allow following links in custom text widget

frontend/src/app/modules/grids/widgets/custom-text/custom-text.component.html

@@ -9,7 +9,8 @@
 </widget-header>
 
 <ng-template #text>
-  <span class="inplace-edit--read-value -default">
+  <span #displayContainer
+        class="inplace-edit--read-value -default">
     <span
         *ngIf="!textEmpty"
         [innerHTML]="customText"></span>
@@ -33,17 +34,15 @@
     </attachments>
 
     <div *ngIf="!active"
-         class="inplace-edit--read">
-      <accessible-by-keyboard
-          *ngIf="isTextEditable"
-          class="inplace-editing--trigger-container"
-          [spanClass]="inplaceEditClasses"
-          [linkClass]="'inplace-editing--trigger-link'"
-          (execute)="activate()">
+         class="inplace-edit--read -no-label"
+         [ngClass]="{'wp-edit-field--container': isTextEditable}">
+      <div *ngIf="isTextEditable"
+           (accessibleClick)="activate($event)"
+           [accessibleClickStopEvent]="false"
+           [ngClass]="inplaceEditClasses">
 
         <ng-container *ngTemplateOutlet="text"></ng-container>
-      </accessible-by-keyboard>
-
+      </div>
 
       <ng-container *ngIf="!isTextEditable">
         <ng-container *ngTemplateOutlet="text"></ng-container>

frontend/src/app/modules/grids/widgets/custom-text/custom-text.component.ts

@@ -1,5 +1,5 @@
 import {AbstractWidgetComponent} from "core-app/modules/grids/widgets/abstract-widget.component";
-import {Component, ChangeDetectionStrategy, Injector, OnInit, OnDestroy, SimpleChanges, ChangeDetectorRef} from '@angular/core';
+import {Component, ChangeDetectionStrategy, Injector, OnInit, OnDestroy, SimpleChanges, ChangeDetectorRef, ElementRef, ViewChild} from '@angular/core';
 import {CustomTextEditFieldService} from "core-app/modules/grids/widgets/custom-text/custom-text-edit-field.service";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 import {HalResource} from "core-app/modules/hal/resources/hal-resource";
@@ -19,6 +19,8 @@ export class WidgetCustomTextComponent extends AbstractWidgetComponent implement
   protected currentRawText:string;
   public customText:SafeHtml;
 
+  @ViewChild('displayContainer', { static: false }) readonly displayContainer:ElementRef;
+
   constructor (protected i18n:I18nService,
                protected injector:Injector,
                public handler:CustomTextEditFieldService,
@@ -55,7 +57,12 @@ export class WidgetCustomTextComponent extends AbstractWidgetComponent implement
     }
   }
 
-  public activate() {
+  public activate(event:MouseEvent) {
+    // Prevent opening the edit mode if a link was clicked
+    if (this.clickedElementIsLinkWithinDisplayContainer(event)) {
+      return;
+    }
+
     // load the attachments so that they are displayed in the list;
     this.resource.grid.updateAttachments();
 
@@ -67,7 +74,7 @@ export class WidgetCustomTextComponent extends AbstractWidgetComponent implement
   }
 
   public get inplaceEditClasses() {
-    let classes = 'inplace-editing--container wp-edit-field--display-field';
+    let classes = 'inplace-editing--container wp-edit-field--display-field wp-table--cell-span -editable';
 
     if (this.textEmpty) {
       classes += ' -placeholder';
@@ -113,4 +120,8 @@ export class WidgetCustomTextComponent extends AbstractWidgetComponent implement
   private memorizeCustomText() {
     this.customText = this.sanitization.bypassSecurityTrustHtml(this.handler.htmlText);
   }
+
+  private clickedElementIsLinkWithinDisplayContainer(event:any) {
+    return this.displayContainer.nativeElement.contains(event.target.closest('a,macro'));
+  }
 }

modules/dashboards/spec/features/custom_text_spec.rb

@@ -72,7 +72,7 @@ describe 'Project description widget on dashboard', type: :feature, js: true do
       custom_text_widget = Components::Grids::GridArea.new('.grid--area.-widgeted:nth-of-type(1)')
 
       within custom_text_widget.area do
-        find('.inplace-editing--trigger-container').click
+        find('.inplace-editing--container ').click
 
         field.set_value('My own little text')
         field.save!
@@ -80,7 +80,7 @@ describe 'Project description widget on dashboard', type: :feature, js: true do
         expect(page)
           .to have_selector('.wp-edit-field--display-field', text: 'My own little text')
 
-        find('.inplace-editing--trigger-container').click
+        find('.inplace-editing--container').click
 
         field.set_value('My new text')
         field.cancel_by_click
@@ -89,7 +89,7 @@ describe 'Project description widget on dashboard', type: :feature, js: true do
           .to have_selector('.wp-edit-field--display-field', text: 'My own little text')
 
         # adding an image
-        find('.inplace-editing--trigger-container').click
+        find('.inplace-editing--container').click
 
         sleep(0.1)
       end
@@ -134,7 +134,7 @@ describe 'Project description widget on dashboard', type: :feature, js: true do
           .to have_content(dashboard.widgets.first.options[:text])
 
         expect(page)
-          .to have_no_selector('.inplace-editing--trigger-container')
+          .to have_no_selector('.inplace-editing--container')
       end
     end
   end

modules/my_page/spec/features/my/custom_text_spec.rb

@@ -70,7 +70,7 @@ describe 'Custom text widget on my page', type: :feature, js: true do
     custom_text_widget.expect_to_span(1, 1, 2, 2)
 
     within custom_text_widget.area do
-      find('.inplace-editing--trigger-container').click
+      find('.inplace-editing--container').click
 
       field.set_value('My own little text')
       field.save!
@@ -78,7 +78,7 @@ describe 'Custom text widget on my page', type: :feature, js: true do
       expect(page)
         .to have_selector('.wp-edit-field--display-field', text: 'My own little text')
 
-      find('.inplace-editing--trigger-container').click
+      find('.inplace-editing--container').click
 
       field.set_value('My new text')
       field.cancel_by_click
@@ -87,7 +87,7 @@ describe 'Custom text widget on my page', type: :feature, js: true do
         .to have_selector('.wp-edit-field--display-field', text: 'My own little text')
 
       # adding an image
-      find('.inplace-editing--trigger-container').click
+      find('.inplace-editing--container').click
 
       sleep(0.1)
     end