feat(rich-text): permite inclusão de links

É possível agora definir links contendo valor de exibição diferenciado ou o próprio link.

Fixes DTHFUI-1745

Author: samir-ayoub

projects/ui/src/lib/components/po-field/po-rich-text/enums/po-rich-text-modal-type.enum.ts

@@ -12,6 +12,11 @@ export enum PoRichTextModalType {
 /**
  * Exibe os dados para inserção de imagens.
  */
-Image = 'image'
+Image = 'image',
+
+/**
+ * Exibe os dados para inserção de link e texto customizado para link.
+ */
+Link = 'link'
 
 }

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.component.html

@@ -8,6 +8,7 @@
   (click)="onClick()"
   (cut)="update()"
   (focus)="onFocus()"
+  (keydown)="onKeyDown($event)"
   (keyup)="onKeyUp()"
   (paste)="update()">
 </div>

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 
+import * as UtilsFunction from '../../../../utils/util';
 import { configureTestSuite } from './../../../../util-test/util-expect.spec';
 
 import { PoRichTextBodyComponent } from './po-rich-text-body.component';
@@ -49,7 +50,7 @@ describe('PoRichTextBodyComponent:', () => {
     describe('executeCommand:', () => {
 
       it('should call `focus`', () => {
-        const spyFocus = spyOn(component.bodyElement.nativeElement, <any> 'focus');
+        const spyFocus = spyOn(component.bodyElement.nativeElement, <any>'focus');
         const fakeValue = 'p';
 
         component.executeCommand(fakeValue);
@@ -58,7 +59,7 @@ describe('PoRichTextBodyComponent:', () => {
       });
 
       it('should call `execCommand` with string as parameter.', () => {
-        const spyExecCommand = spyOn(document, <any> 'execCommand');
+        const spyExecCommand = spyOn(document, <any>'execCommand');
         const fakeValue = 'p';
 
         component.executeCommand(fakeValue);
@@ -69,12 +70,29 @@ describe('PoRichTextBodyComponent:', () => {
       it('should call `execCommand` with object as parameter.', () => {
         const command = 'foreColor';
         const value = '#000000';
-        const spyExecCommand = spyOn(document, <any> 'execCommand');
-        const fakeValue = { command, value } ;
+        const spyExecCommand = spyOn(document, <any>'execCommand');
+        const fakeValue = { command, value };
+
+        spyOn(component, <any>'handleCommandLink');
 
         component.executeCommand(fakeValue);
 
         expect(spyExecCommand).toHaveBeenCalledWith(fakeValue.command, false, fakeValue.value);
+        expect(component['handleCommandLink']).not.toHaveBeenCalled();
+      });
+
+      it('should call `handleCommandLink` with an object as parameter if command value is `InsertHTML`.', () => {
+        const command = 'InsertHTML';
+        const value = { urlLink: 'link', urlLinkText: 'link text' };
+        const spyExecCommand = spyOn(document, <any>'execCommand');
+        const fakeValue = { command, value };
+
+        spyOn(component, <any>'handleCommandLink');
+
+        component.executeCommand(fakeValue);
+
+        expect(component['handleCommandLink']).toHaveBeenCalledWith(command, value.urlLink, value.urlLinkText);
+        expect(spyExecCommand).not.toHaveBeenCalled();
       });
 
       it('should call `updateModel`', () => {
@@ -152,6 +170,90 @@ describe('PoRichTextBodyComponent:', () => {
       expect(component['emitSelectionCommands']).toHaveBeenCalled();
     });
 
+    it('onKeyDown: should call `event.preventDefault` and `shortcutCommand.emit` if keyCode is `76` and ctrlKey is `true`', () => {
+      const fakeEvent = {
+        keyCode: 76,
+        ctrlKey: true,
+        preventDefault: () => {},
+      };
+
+      spyOn(component.shortcutCommand, 'emit');
+      spyOn(fakeEvent, 'preventDefault');
+
+      component.onKeyDown(fakeEvent);
+
+      expect(fakeEvent.preventDefault).toHaveBeenCalled();
+      expect(component.shortcutCommand.emit).toHaveBeenCalled();
+    });
+
+    it('onKeyDown: should call `event.preventDefault` and `shortcutCommand.emit` if keyCode is `76` and metaKey is `true`', () => {
+      const fakeEvent = {
+        keyCode: 76,
+        metaKey: true,
+        preventDefault: () => {},
+      };
+
+      spyOn(component.shortcutCommand, 'emit');
+      spyOn(fakeEvent, 'preventDefault');
+
+      component.onKeyDown(fakeEvent);
+
+      expect(fakeEvent.preventDefault).toHaveBeenCalled();
+      expect(component.shortcutCommand.emit).toHaveBeenCalled();
+    });
+
+    it('onKeyDown: shouldn`t call `event.preventDefault` and `shortcutCommand.emit` if keyCode isn`t `76`', () => {
+      const fakeEvent = {
+        keyCode: 18,
+        cmdKey: true,
+        preventDefault: () => {},
+      };
+
+      spyOn(component.shortcutCommand, 'emit');
+      spyOn(fakeEvent, 'preventDefault');
+
+      component.onKeyDown(fakeEvent);
+
+      expect(fakeEvent.preventDefault).not.toHaveBeenCalled();
+      expect(component.shortcutCommand.emit).not.toHaveBeenCalled();
+    });
+
+    it('onKeyDown: shouldn`t call `event.preventDefault` and `shortcutCommand.emit` if ctrlKey isn`t true', () => {
+      const fakeEvent = {
+        keyCode: 76,
+        ctrlKey: false,
+        preventDefault: () => {},
+      };
+
+      spyOn(component.shortcutCommand, 'emit');
+      spyOn(fakeEvent, 'preventDefault');
+
+      component.onKeyDown(fakeEvent);
+
+      expect(fakeEvent.preventDefault).not.toHaveBeenCalled();
+      expect(component.shortcutCommand.emit).not.toHaveBeenCalled();
+    });
+
+    it('cursorPositionedInALink: should return true if tag element is a link', () => {
+      const fakeSelection = { focusNode: { parentElement: { tagName: 'A' } } };
+
+      spyOn(document, 'getSelection').and.returnValue(<any>fakeSelection);
+
+      const expectedValue = component['cursorPositionedInALink']();
+
+      expect(expectedValue).toBe(true);
+    });
+
+    it('cursorPositionedInALink: should return false if tag element isn`t a link', () => {
+      const fakeSelection = { focusNode: { parentElement: { tagName: 'B' } } };
+
+      spyOn(document, 'getSelection').and.returnValue(<any>fakeSelection);
+
+      const expectedValue = component['cursorPositionedInALink']();
+
+      expect(expectedValue).toBe(false);
+    });
+
     it('update: should call `updateModel`', fakeAsync(() => {
       spyOn(component, <any>'updateModel');
 
@@ -177,6 +279,86 @@ describe('PoRichTextBodyComponent:', () => {
       expect(component.commands.emit).toHaveBeenCalled();
     });
 
+    it(`emitSelectionCommands: the object property 'commands'
+    should contain 'Createlink' if 'cursorPositionedInALink' returns 'true'`, () => {
+
+      spyOn(component, <any>'cursorPositionedInALink').and.returnValue(true);
+      spyOn(document, 'queryCommandState').and.returnValue(false);
+      spyOn(document, 'queryCommandValue').and.returnValue('rgb');
+      spyOn(component, <any>'rgbToHex').and.returnValue('hex');
+      spyOn(component.commands, 'emit');
+
+      component['emitSelectionCommands']();
+
+      expect(component.commands.emit).toHaveBeenCalledWith({commands: ['Createlink'], hexColor: 'hex'});
+    });
+
+    it(`emitSelectionCommands: the object property 'commands'
+    shouldn't contain 'Createlink' if 'cursorPositionedInALink' returns 'false'`, () => {
+
+      spyOn(component, <any>'cursorPositionedInALink').and.returnValue(false);
+      spyOn(document, 'queryCommandState').and.returnValue(false);
+      spyOn(document, 'queryCommandValue').and.returnValue('rgb');
+      spyOn(component, <any>'rgbToHex').and.returnValue('hex');
+      spyOn(component.commands, 'emit');
+
+      component['emitSelectionCommands']();
+
+      expect(component.commands.emit).toHaveBeenCalledWith({commands: [], hexColor: 'hex'});
+    });
+
+    it('handleCommandLink: should call `insertHtmlLinkElement` if isIE returns `true`', () => {
+      const fakeValue = {
+        command: 'InsertHTML',
+        urlLink: 'urlLink',
+        urlLinkText: 'url link text'
+      };
+
+      spyOn(UtilsFunction, 'isIE').and.returnValue(true);
+      spyOn(component, <any>'insertHtmlLinkElement');
+      spyOn(document, <any>'execCommand');
+
+      component['handleCommandLink'](fakeValue.command, fakeValue.urlLink, fakeValue.urlLinkText);
+
+      expect(document.execCommand).not.toHaveBeenCalled();
+      expect(UtilsFunction.isIE).toHaveBeenCalled();
+      expect(component['insertHtmlLinkElement']).toHaveBeenCalledWith(fakeValue.urlLink, fakeValue.urlLinkText);
+    });
+
+    it('handleCommandLink: should call `document.execCommand` with `command`, `false` and linkValue as params if isIE is `false`', () => {
+      const linkValue = `<a class="po-rich-text-link" href="urlLink" target="_blank">url link text</a>`;
+      const fakeValue = {
+        command: 'InsertHTML',
+        urlLink: 'urlLink',
+        urlLinkText: 'url link text'
+      };
+
+      spyOn(UtilsFunction, 'isIE').and.returnValue(false);
+      spyOn(component, <any>'insertHtmlLinkElement');
+      spyOn(document, <any>'execCommand');
+
+      component['handleCommandLink'](fakeValue.command, fakeValue.urlLink, fakeValue.urlLinkText);
+
+      expect(document.execCommand).toHaveBeenCalledWith(fakeValue.command, false, linkValue);
+      expect(component['insertHtmlLinkElement']).not.toHaveBeenCalled();
+    });
+
+    it(`handleCommandLink: the parameter 'linkvalue' should be concatenated with 'urlLink' if 'urlLinkText' is undefined`, () => {
+      const linkValue = `<a class="po-rich-text-link" href="urlLink" target="_blank">urlLink</a>`;
+      const fakeValue = {
+        command: 'InsertHTML',
+        urlLink: 'urlLink',
+        urlLinkText: undefined
+      };
+
+      spyOn(UtilsFunction, 'isIE').and.returnValue(false);
+      spyOn(document, <any>'execCommand');
+
+      component['handleCommandLink'](fakeValue.command, fakeValue.urlLink, fakeValue.urlLinkText);
+
+      expect(document.execCommand).toHaveBeenCalledWith(fakeValue.command, false, linkValue);
+    });
+
     it('updateModel: should update `modelValue`', () => {
       component.bodyElement.nativeElement.innerHTML = 'teste';
       component['updateModel']();
@@ -258,14 +440,27 @@ describe('PoRichTextBodyComponent:', () => {
       expect(fakeThis.change.emit).not.toHaveBeenCalled();
     }));
 
+    it('insertHtmlLinkElement: should contain `po-rich-text-link`', () => {
+      const urlLink = 'urlLink';
+      const urlLinkText = 'url link text';
+
+      component.focus();
+
+      component['insertHtmlLinkElement'](urlLink, urlLinkText);
+
+      fixture.detectChanges();
+
+      expect(nativeElement.querySelector('.po-rich-text-link')).toBeTruthy();
+    });
+
   });
 
   describe('Templates:', () => {
 
-  it('should contain `po-rich-text-body`', () => {
+    it('should contain `po-rich-text-body`', () => {
 
-    expect(nativeElement.querySelector('.po-rich-text-body')).toBeTruthy();
-  });
+      expect(nativeElement.querySelector('.po-rich-text-body')).toBeTruthy();
+    });
 
   });
 

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.component.ts

@@ -1,7 +1,10 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 
+import { isIE } from './../../../../utils/util';
+import { PoKeyCodeEnum } from './../../../../enums/po-key-code.enum';
+
 const poRichTextBodyCommands = [
-  'bold', 'italic', 'underline', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertUnorderedList'
+  'bold', 'italic', 'underline', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertUnorderedList', 'Createlink'
 ];
 
 @Component({
@@ -27,6 +30,8 @@ export class PoRichTextBodyComponent implements OnInit {
 
   @Output('p-commands') commands = new EventEmitter<any>();
 
+  @Output('p-shortcut-command') shortcutCommand = new EventEmitter<any>();
+
   @Output('p-value') value = new EventEmitter<any>();
 
   ngOnInit() {
@@ -36,11 +41,18 @@ export class PoRichTextBodyComponent implements OnInit {
     setTimeout(() => this.updateValueWithModelValue());
   }
 
-  executeCommand(command: (string | { command: any, value: string })) {
+  executeCommand(command: (string | { command: any, value: string | any })) {
     this.bodyElement.nativeElement.focus();
 
     if (typeof (command) === 'object') {
-      document.execCommand(command.command, false, command.value);
+
+      if (command.command === 'InsertHTML') {
+        const { command: linkCommand, value : { urlLink }, value : { urlLinkText} } = command;
+
+        this.handleCommandLink(linkCommand, urlLink, urlLinkText);
+      } else {
+        document.execCommand(command.command, false, command.value);
+      }
     } else {
       document.execCommand(command, false, null);
     }
@@ -70,6 +82,15 @@ export class PoRichTextBodyComponent implements OnInit {
     this.valueBeforeChange = this.modelValue;
   }
 
+  onKeyDown(event) {
+    const keyL = event.keyCode === PoKeyCodeEnum.keyL;
+
+    if (keyL && event.ctrlKey || keyL && event.metaKey) {
+      event.preventDefault();
+      this.shortcutCommand.emit();
+    }
+  }
+
   onKeyUp() {
     // Tratamento necessário para eliminar a tag <br> criada no firefox quando o body for limpo.
     const bodyElement = this.bodyElement.nativeElement;
@@ -87,13 +108,51 @@ export class PoRichTextBodyComponent implements OnInit {
     setTimeout(() => this.onKeyUp());
   }
 
+  private cursorPositionedInALink() {
+    const link = document.getSelection();
+
+    return link.focusNode.parentElement.tagName === 'A';
+  }
+
   private emitSelectionCommands() {
     const commands = poRichTextBodyCommands.filter(command => document.queryCommandState(command));
     const rgbColor = document.queryCommandValue('ForeColor');
     const hexColor = this.rgbToHex(rgbColor);
+
+    if (this.cursorPositionedInALink()) {
+      commands.push('Createlink');
+    }
+
     this.commands.emit({commands, hexColor});
   }
 
+  private handleCommandLink(linkCommand: string, urlLink: string, urlLinkText: string) {
+    if (isIE()) {
+      this.insertHtmlLinkElement(urlLink, urlLinkText);
+    } else {
+      // necessário '&nbsp;' no fim pois o Firefox mantém o cursor dentro da tag;
+      const linkValue = `<a class="po-rich-text-link" href="${urlLink}" target="_blank">${urlLinkText || urlLink}</a>`;
+
+      document.execCommand(linkCommand, false, linkValue);
+    }
+  }
+
+  // tratamento específico para IE pois não suporta o comando 'insertHTML'.
+  private insertHtmlLinkElement(urlLink: string, urlLinkText: string) {
+    const selection = document.getSelection();
+    const selectionRange = selection.getRangeAt(0);
+    const elementLink = document.createElement('a');
+    const elementlinkText = document.createTextNode(urlLinkText);
+
+    elementLink.appendChild(elementlinkText);
+    elementLink.href = urlLink;
+    elementLink.setAttribute('target', '_blank');
+    elementLink.classList.add('po-rich-text-link');
+
+    selectionRange.deleteContents();
+    selectionRange.insertNode(elementLink);
+  }
+
   private rgbToHex(rgb) {
     // Tratamento necessário para converter o código rgb para hexadecimal.
     const sep = rgb.indexOf(',') > -1 ? ',' : ' ';