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

Permite incluir imagem por drag drop, seleção ou por url.

Fixes DTHFUI-1717

Author: alinelariguet

projects/ui/src/lib/components/po-field/po-field.module.ts

@@ -33,6 +33,7 @@ import { PoMultiselectItemComponent } from './po-multiselect/po-multiselect-item
 import { PoMultiselectSearchComponent } from './po-multiselect/po-multiselect-search/po-multiselect-search.component';
 import { PoRichTextBodyComponent } from './po-rich-text/po-rich-text-body/po-rich-text-body.component';
 import { PoRichTextComponent } from './po-rich-text/po-rich-text.component';
+import { PoRichTextModalComponent } from './po-rich-text/po-rich-text-modal/po-rich-text-modal.component';
 import { PoRichTextToolbarComponent } from './po-rich-text/po-rich-text-toolbar/po-rich-text-toolbar.component';
 import { PoInputComponent } from './po-input/po-input.component';
 import { PoNumberComponent } from './po-number/po-number.component';
@@ -122,6 +123,7 @@ import { PoUrlComponent } from './po-url/po-url.component';
     PoRadioGroupComponent,
     PoRichTextBodyComponent,
     PoRichTextComponent,
+    PoRichTextModalComponent,
     PoRichTextToolbarComponent,
     PoSelectComponent,
     PoSelectOptionTemplateDirective,
@@ -138,7 +140,8 @@ import { PoUrlComponent } from './po-url/po-url.component';
   providers: [],
   entryComponents: [
     PoCalendarComponent,
-    PoLookupModalComponent
+    PoLookupModalComponent,
+    PoRichTextModalComponent
   ]
 })
 export class PoFieldModule { }

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

@@ -0,0 +1,17 @@
+/**
+ * @docsPrivate
+ *
+ * @usedBy PoRichTextComponent
+ *
+ * @description
+ *
+ * *Enum* `PoRichTextModalType` para especificação dos tipos de modal.
+ */
+export enum PoRichTextModalType {
+
+/**
+ * Exibe os dados para inserção de imagens.
+ */
+Image = 'image'
+
+}

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

@@ -114,14 +114,30 @@ describe('PoRichTextBodyComponent:', () => {
       expect(component['emitSelectionCommands']).toHaveBeenCalled();
     });
 
-    it('onKeyUp: should call `updateModel`', () => {
-      const element = document.createElement('div');
+    it('onKeyUp: should remove tag `br`', () => {
+      const element = document.createElement('br');
       element.classList.add('teste');
       component.bodyElement.nativeElement.appendChild(element);
       component.onKeyUp();
       expect(nativeElement.querySelector('.teste')).toBeFalsy();
     });
 
+    it('onKeyUp: should`t remove tag `br`', () => {
+      const div = document.createElement('div');
+      const br = document.createElement('br');
+
+      br.classList.add('teste-br');
+      div.classList.add('teste-div');
+
+      component.bodyElement.nativeElement.appendChild(div);
+      component.bodyElement.nativeElement.appendChild(br);
+
+      component.onKeyUp();
+
+      expect(nativeElement.querySelector('.teste-br')).toBeTruthy();
+      expect(nativeElement.querySelector('.teste-div')).toBeTruthy();
+    });
+
     it('onKeyUp: should call `updateModel`', () => {
       spyOn(component, <any>'updateModel');
       component.onKeyUp();

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

@@ -74,8 +74,8 @@ export class PoRichTextBodyComponent implements OnInit {
     // Tratamento necessário para eliminar a tag <br> criada no firefox quando o body for limpo.
     const bodyElement = this.bodyElement.nativeElement;
 
-    if (!bodyElement.innerText.trim() && bodyElement.firstChild) {
-      bodyElement.firstChild.remove();
+    if (!bodyElement.innerText.trim() && bodyElement.childNodes.length === 1 && bodyElement.querySelector('br')) {
+      bodyElement.querySelector('br').remove();
     }
 
     this.updateModel();

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

@@ -8,7 +8,11 @@ export const poRichTextLiteralsDefault = {
     right: 'Right',
     justify: 'Justify',
     textColor: 'Text color',
-    unorderedList: 'Bulleted list'
+    unorderedList: 'Bulleted list',
+    cancel: 'Cancel',
+    insert: 'Insert',
+    insertImage: 'Insert image',
+    urlImage: 'URL image'
   },
   es: {
     bold: 'Negrita',
@@ -19,7 +23,11 @@ export const poRichTextLiteralsDefault = {
     right: 'Derecha',
     justify: 'Justificado',
     textColor: 'Color del texto',
-    unorderedList: 'Lista con viñetas'
+    unorderedList: 'Lista con viñetas',
+    cancel: 'Cancelar',
+    insert: 'Insertar',
+    insertImage: 'Insertar imagen',
+    urlImage: 'Imagen URL'
   },
   pt: {
     bold: 'Negrito',
@@ -30,6 +38,10 @@ export const poRichTextLiteralsDefault = {
     right: 'Direita',
     justify: 'Justificado',
     textColor: 'Cor do texto',
-    unorderedList: 'Lista com marcadores'
+    unorderedList: 'Lista com marcadores',
+    cancel: 'Cancelar',
+    insert: 'Inserir',
+    insertImage: 'Inserir imagem',
+    urlImage: 'Imagem em URL'
   }
 };

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

@@ -0,0 +1,38 @@
+<po-modal #modal
+  p-hide-close
+  [p-primary-action]="modalConfirmAction"
+  [p-secondary-action]="modalCancelAction"
+  [p-title]="literals.insertImage">
+
+  <ng-container *ngIf="modalType === 'image'; then modalImage"></ng-container>
+</po-modal>
+
+<ng-template #modalImage>
+  <form #modalImageForm="ngForm">
+    <div class="po-row">
+      <!-- po-upload desabilita o drag drop caso não tenha valor atribuido para a propriedade p-url -->
+      <po-upload #upload
+        class="po-md-12"
+        name="upload"
+        [(ngModel)]="uploadModel"
+        p-drag-drop-height="160"
+        p-hide-restrictions-info
+        p-hide-send-button
+        p-url="x"
+        [p-drag-drop]="!modal.isHidden"
+        [p-disabled]="isUrlValid"
+        [p-restrictions]="uploadRestrictions">
+      </po-upload>
+    </div>
+
+    <div class="po-row">
+      <po-url
+        class="po-md-12 po-mt-3"
+        name="url"
+        [(ngModel)]="urlImage"
+        [p-label]="literals.urlImage"
+        [p-disabled]="isUploadValid">
+      </po-url>
+    </div>
+  </form>
+</ng-template>