myrta-ui 17.0.18 → 17.0.20

package/src/lib/components/form/input-editor/components/editor-toolbar/editor-toolbar.component.html

@@ -0,0 +1,252 @@
+<div class="angular-editor-toolbar" *ngIf="showToolbar">
+  <div class="angular-editor-toolbar-set">
+    <mrx-editor-toolbar-button
+      [icon]="'return'"
+      [title]="'Undo'"
+      [id]="'undo-'+id"
+      (mrxClick)="triggerCommand('undo')"
+      [hidden]="isButtonHidden('undo')"
+    ></mrx-editor-toolbar-button>
+
+    <mrx-editor-toolbar-button
+      [icon]="'reload'"
+      [title]="'Undo'"
+      [id]="'redo-'+id"
+      (mrxClick)="triggerCommand('redo')"
+      [hidden]="isButtonHidden('redo')"
+    ></mrx-editor-toolbar-button>
+  </div>
+
+  <div class="angular-editor-toolbar-set">
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-text-bold'"
+      [title]="'Bold'"
+      [id]="'bold-'+id"
+      (mrxClick)="triggerCommand('bold')"
+      [hidden]="isButtonHidden('bold')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-text-italic'"
+      [title]="'Italic'"
+      [id]="'italic-'+id"
+      (mrxClick)="triggerCommand('italic')"
+      [hidden]="isButtonHidden('italic')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-text-underline'"
+      [title]="'Underline'"
+      [id]="'underline-'+id"
+      (mrxClick)="triggerCommand('underline')"
+      [hidden]="isButtonHidden('underline')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-strikethrough-text'"
+      [title]="'Strikethrough'"
+      [id]="'strikeThrough-'+id"
+      (mrxClick)="triggerCommand('strikeThrough')"
+      [hidden]="isButtonHidden('strikeThrough')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+    <mrx-editor-toolbar-button
+      [icon]="'negative'"
+      [title]="'Subscript'"
+      [id]="'subscript-'+id"
+      (mrxClick)="triggerCommand('subscript')"
+      [hidden]="isButtonHidden('subscript')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+    <mrx-editor-toolbar-button
+      [icon]="'negative'"
+      [title]="'Superscript'"
+      [id]="'superscript-'+id"
+      (mrxClick)="triggerCommand('superscript')"
+      [hidden]="isButtonHidden('superscript')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+  </div>
+
+  <div class="angular-editor-toolbar-set">
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-text-align-left'"
+      [title]="'Justify Left'"
+      [id]="'justifyLeft-'+id"
+      (mrxClick)="triggerCommand('justifyLeft')"
+      [hidden]="isButtonHidden('justifyLeft')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-text-align-center'"
+      [title]="'Justify Center'"
+      [id]="'justifyCenter-'+id"
+      (mrxClick)="triggerCommand('justifyCenter')"
+      [hidden]="isButtonHidden('justifyCenter')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-text-align-right'"
+      [title]="'Justify Center'"
+      [id]="'justifyRight-'+id"
+      (mrxClick)="triggerCommand('justifyRight')"
+      [hidden]="isButtonHidden('justifyRight')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-text-align-justify'"
+      [title]="'Justify Center'"
+      [id]="'justifyFull-'+id"
+      (mrxClick)="triggerCommand('justifyFull')"
+      [hidden]="isButtonHidden('justifyFull')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+  </div>
+
+  <div class="angular-editor-toolbar-set">
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-padding-right'"
+      [title]="'Indent'"
+      [id]="'indent-'+id"
+      (mrxClick)="triggerCommand('indent')"
+      [hidden]="isButtonHidden('indent')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-padding-left'"
+      [title]="'Outdent'"
+      [id]="'outdent-'+id"
+      (mrxClick)="triggerCommand('outdent')"
+      [hidden]="isButtonHidden('outdent')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+  </div>
+
+  <div class="angular-editor-toolbar-set">
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-ul'"
+      [title]="'Unordered List'"
+      [id]="'insertUnorderedList-'+id"
+      (mrxClick)="triggerCommand('insertUnorderedList')"
+      [hidden]="isButtonHidden('insertUnorderedList')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-ol'"
+      [title]="'Ordered List'"
+      [id]="'insertOrderedList-'+id"
+      (mrxClick)="triggerCommand('insertOrderedList')"
+      [hidden]="isButtonHidden('insertOrderedList')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+  </div>
+
+  <div class="angular-editor-toolbar-set">
+
+    <mrx-editor-toolbar-select class="select-heading" [options]="headings"
+               [(ngModel)]="block"
+               (change)="triggerCommand(block)"
+               [disabled]="htmlMode"
+               [hidden]="isButtonHidden('heading')"
+               tabindex="-1"></mrx-editor-toolbar-select>
+  </div>
+  <div class="angular-editor-toolbar-set">
+
+    <mrx-editor-toolbar-select class="select-font" [options]="fonts"
+               [(ngModel)]="fontName"
+               (change)="setFontName(fontName)"
+               [disabled]="htmlMode"
+               [hidden]="isButtonHidden('fontName')"
+               tabindex="-1"></mrx-editor-toolbar-select>
+  </div>
+  <div class="angular-editor-toolbar-set">
+
+    <mrx-editor-toolbar-select class="select-font-size" [options]="fontSizes"
+               [(ngModel)]="fontSize"
+               (change)="setFontSize(fontSize)"
+               [disabled]="htmlMode"
+               [hidden]="isButtonHidden('fontSize')"
+               tabindex="-1">
+    </mrx-editor-toolbar-select>
+  </div>
+  <div class="angular-editor-toolbar-set">
+    <input style="display: none" type="color" (change)="insertColor(fgInput.value, 'textColor')" #fgInput>
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-font-color'"
+      [title]="'Text Color'"
+      [id]="'textColor-'+id"
+      (mrxClick)="focus(); ; fgInput.click()"
+      [hidden]="isButtonHidden('textColor')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+
+    <input style="display: none" type="color" (change)="insertColor(bgInput.value, 'backgroundColor')" #bgInput>
+    <mrx-editor-toolbar-button
+      [icon]="'wysiwyg-icons-bg-color'"
+      [title]="'Background Color'"
+      [id]="'backgroundColor-'+id"
+      (mrxClick)="focus(); ; bgInput.click()"
+      [hidden]="isButtonHidden('backgroundColor')"
+      [disabled]="htmlMode"
+    ></mrx-editor-toolbar-button>
+  </div>
+
+  <div *ngIf="_customClasses" class="angular-editor-toolbar-set">
+    <mrx-editor-toolbar-select class="select-custom-style" [options]="customClassList"
+               [(ngModel)]="customClassId"
+               (change)="setCustomClass(customClassId)"
+               [disabled]="htmlMode"
+               [hidden]="isButtonHidden('customClasses')"
+               tabindex="-1"></mrx-editor-toolbar-select>
+  </div>
+
+  <div class="angular-editor-toolbar-set">
+    <mrx-editor-toolbar-button
+      [icon]="'link'"
+      [title]="'Insert Link'"
+      [id]="'link-'+id"
+      (mrxClick)="insertUrl()"
+      [hidden]="isButtonHidden('link')"
+      [disabled]="isLinkButtonDisabled"
+    ></mrx-editor-toolbar-button>
+    <mrx-editor-toolbar-button
+      [icon]="'negative'"
+      [title]="'Unlink'"
+      [id]="'unlink-'+id"
+      (mrxClick)="triggerCommand('unlink')"
+      [hidden]="isButtonHidden('unlink')"
+      [disabled]="htmlMode || !linkSelected"
+    ></mrx-editor-toolbar-button>
+
+    <input style="display: none" accept="image/*" type="file" (change)="onFileChanged($event)" #fileInput>
+    <mrx-editor-toolbar-button
+      [icon]="'negative'"
+      [title]="'Insert Image'"
+      [id]="'insertImage-'+id"
+      (mrxClick)="focus(); fileInput.click()"
+      [hidden]="isButtonHidden('insertImage')"
+      [disabled]="htmlMode || !linkSelected"
+    ></mrx-editor-toolbar-button>
+
+    <button type="button" class="angular-editor-button"
+            (click)="insertVideo()" title="Insert Video" [disabled]="htmlMode" [hidden]="isButtonHidden('insertVideo')"
+            tabindex="-1"><i
+      class="fa fa-video-camera"></i></button>
+    <button type="button" title="Horizontal Line" class="angular-editor-button"
+            (click)="triggerCommand('insertHorizontalRule')" [disabled]="htmlMode"
+            [hidden]="isButtonHidden('insertHorizontalRule')" tabindex="-1"><i
+      class="fa fa-minus"></i></button>
+  </div>
+  <div class="angular-editor-toolbar-set">
+    <button type="button" title="Clear Formatting" class="angular-editor-button"
+            (click)="triggerCommand('removeFormat')" [disabled]="htmlMode" [hidden]="isButtonHidden('removeFormat')"
+            tabindex="-1"><i class='fa fa-remove'></i>
+    </button>
+  </div>
+  <div class="angular-editor-toolbar-set">
+    <button type="button" title="HTML Code" class="angular-editor-button"
+            (click)="triggerCommand('toggleEditorMode')" [hidden]="isButtonHidden('toggleEditorMode')" tabindex="-1"><i
+      class='fa fa-code'></i></button>
+  </div>
+  <ng-content></ng-content>
+</div>

package/src/lib/components/form/input-editor/components/editor-toolbar/editor-toolbar.component.less

@@ -0,0 +1 @@
+@import "../../assets/style";

package/src/lib/components/form/input-editor/components/editor-toolbar/editor-toolbar.component.ts

@@ -0,0 +1,390 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  OnInit,
+  Output,
+  Renderer2,
+  ViewChild
+} from '@angular/core';
+import { SelectOption } from '../../models/editor-select.model';
+import { CustomClass } from '../../config';
+import { Observable } from 'rxjs';
+import { HttpEvent, HttpResponse } from '@angular/common/http';
+import { EditorService, UploadResponse } from '../../services/editor.service';
+import { DOCUMENT } from '@angular/common';
+
+@Component({
+  selector: 'mrx-editor-toolbar',
+  templateUrl: './editor-toolbar.component.html',
+  styleUrls: ['./editor-toolbar.component.less']
+})
+export class EditorToolbarComponent {
+  htmlMode = false;
+  linkSelected = false;
+  block = 'default';
+  fontName = 'Times New Roman';
+  fontSize = '3';
+  foreColour!: any;
+  backColor!: any;
+
+  headings: SelectOption[] = [
+    {
+      label: 'Heading 1',
+      value: 'h1',
+    },
+    {
+      label: 'Heading 2',
+      value: 'h2',
+    },
+    {
+      label: 'Heading 3',
+      value: 'h3',
+    },
+    {
+      label: 'Heading 4',
+      value: 'h4',
+    },
+    {
+      label: 'Heading 5',
+      value: 'h5',
+    },
+    {
+      label: 'Heading 6',
+      value: 'h6',
+    },
+    {
+      label: 'Heading 7',
+      value: 'h7',
+    },
+    {
+      label: 'Paragraph',
+      value: 'p',
+    },
+    {
+      label: 'Predefined',
+      value: 'pre'
+    },
+    {
+      label: 'Standard',
+      value: 'div'
+    },
+    {
+      label: 'default',
+      value: 'default'
+    }
+  ];
+
+  fontSizes: SelectOption[] = [
+    {
+      label: '1',
+      value: '1',
+    },
+    {
+      label: '2',
+      value: '2',
+    },
+    {
+      label: '3',
+      value: '3',
+    },
+    {
+      label: '4',
+      value: '4',
+    },
+    {
+      label: '5',
+      value: '5',
+    },
+    {
+      label: '6',
+      value: '6',
+    },
+    {
+      label: '7',
+      value: '7',
+    }
+  ];
+
+  customClassId = '-1';
+  // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match
+  _customClasses!: CustomClass[];
+  customClassList: SelectOption[] = [{label: '', value: ''}];
+  // uploadUrl: string;
+
+  tagMap = {
+    BLOCKQUOTE: 'indent',
+    A: 'link'
+  };
+
+  select = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'PRE', 'DIV'];
+
+  buttons = ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'justifyLeft', 'justifyCenter',
+    'justifyRight', 'justifyFull', 'indent', 'outdent', 'insertUnorderedList', 'insertOrderedList', 'link'];
+
+  @Input() uploadUrl?: string;
+  @Input() upload?: (file: File) => Observable<HttpEvent<UploadResponse>>;
+  @Input() showToolbar!: boolean;
+  @Input() id = '';
+  @Input() fonts: SelectOption[] = [{label: '', value: ''}];
+
+  @Input()
+  set customClasses(classes: CustomClass[] | undefined) {
+    if (classes) {
+      this._customClasses = classes;
+      this.customClassList = this._customClasses.map((x, i) => ({label: x.name, value: i.toString()}));
+      this.customClassList.unshift({label: 'Clear Class', value: '-1'});
+    }
+  }
+
+  @Input()
+  set defaultFontName(value: string | undefined) {
+    if (value) {
+      this.fontName = value;
+    }
+  }
+
+  @Input()
+  set defaultFontSize(value: string | undefined) {
+    if (value) {
+      this.fontSize = value;
+    }
+  }
+
+  @Input() hiddenButtons?: string[][];
+
+  @Output() execute: EventEmitter<string> = new EventEmitter<string>();
+
+  @ViewChild('fileInput', {static: true}) myInputFile!: ElementRef;
+
+  public get isLinkButtonDisabled(): boolean {
+    return this.htmlMode || !Boolean(this.editorService.selectedText);
+  }
+
+  constructor(
+    private r: Renderer2,
+    private editorService: EditorService,
+    private er: ElementRef,
+    @Inject(DOCUMENT) private doc: any
+  ) {
+  }
+
+  /**
+   * Trigger command from editor header buttons
+   * @param command string from toolbar buttons
+   */
+  triggerCommand(command: string) {
+    this.execute.emit(command);
+  }
+
+  /**
+   * highlight editor buttons when cursor moved or positioning
+   */
+  triggerButtons() {
+    if (!this.showToolbar) {
+      return;
+    }
+    this.buttons.forEach(e => {
+      const result = this.doc.queryCommandState(e);
+      const elementById = this.doc.getElementById(e + '-' + this.id);
+      if (result) {
+        this.r.addClass(elementById, 'active');
+      } else {
+        this.r.removeClass(elementById, 'active');
+      }
+    });
+  }
+
+  /**
+   * trigger highlight editor buttons when cursor moved or positioning in block
+   */
+  triggerBlocks(nodes: Node[]) {
+    if (!this.showToolbar) {
+      return;
+    }
+    this.linkSelected = nodes.findIndex(x => x.nodeName === 'A') > -1;
+    let found = false;
+    this.select.forEach(y => {
+      const node = nodes.find(x => x.nodeName === y);
+      if (node !== undefined && y === node.nodeName) {
+        if (found === false) {
+          this.block = node.nodeName.toLowerCase();
+          found = true;
+        }
+      } else if (found === false) {
+        this.block = 'default';
+      }
+    });
+
+    found = false;
+    if (this._customClasses) {
+      this._customClasses.forEach((y, index) => {
+        const node = nodes.find((x: Node): boolean | void => {
+          if (x instanceof Element) {
+            return x.className === y.class;
+          }
+        });
+        if (node !== undefined) {
+          if (found === false) {
+            this.customClassId = index.toString();
+            found = true;
+          }
+        } else if (found === false) {
+          this.customClassId = '-1';
+        }
+      });
+    }
+
+    Object.keys(this.tagMap).map(e => {
+      // @ts-ignore
+      const elementById = this.doc.getElementById(this.tagMap[e] + '-' + this.id);
+      const node = nodes.find(x => x.nodeName === e);
+      if (node !== undefined && e === node.nodeName) {
+        this.r.addClass(elementById, 'active');
+      } else {
+        this.r.removeClass(elementById, 'active');
+      }
+    });
+
+    this.foreColour = this.doc.queryCommandValue('ForeColor');
+    this.fontSize = this.doc.queryCommandValue('FontSize');
+    this.fontName = this.doc.queryCommandValue('FontName').replace(/"/g, '');
+    this.backColor = this.doc.queryCommandValue('backColor');
+  }
+
+  /**
+   * insert URL link
+   */
+  insertUrl() {
+    let url = 'https:\/\/';
+    const selection = this.editorService.savedSelection;
+    // @ts-ignore
+    if (selection && selection.commonAncestorContainer.parentElement.nodeName === 'A') {
+      const parent = selection.commonAncestorContainer.parentElement as HTMLAnchorElement;
+      if (parent.href !== '') {
+        url = parent.href;
+      }
+    }
+    // @ts-ignore
+    url = prompt('Insert URL link', url);
+    if (url && url !== '' && url !== 'https://') {
+      this.editorService.createLink(url);
+    }
+  }
+
+  /**
+   * insert Video link
+   */
+  insertVideo() {
+    this.execute.emit('');
+    const url = prompt('Insert Video link', `https://`);
+    if (url && url !== '' && url !== `https://`) {
+      this.editorService.insertVideo(url);
+    }
+  }
+
+  /** insert color */
+  insertColor(color: string, where: string) {
+    this.editorService.insertColor(color, where);
+    this.execute.emit('');
+  }
+
+  /**
+   * set font Name/family
+   * @param foreColor string
+   */
+  setFontName(foreColor: string): void {
+    this.editorService.setFontName(foreColor);
+    this.execute.emit('');
+  }
+
+  /**
+   * set font Size
+   * @param fontSize string
+   */
+  setFontSize(fontSize: string): void {
+    this.editorService.setFontSize(fontSize);
+    this.execute.emit('');
+  }
+
+  /**
+   * toggle editor mode (WYSIWYG or SOURCE)
+   * @param m boolean
+   */
+  setEditorMode(m: boolean) {
+    const toggleEditorModeButton = this.doc.getElementById('toggleEditorMode' + '-' + this.id);
+    if (m) {
+      this.r.addClass(toggleEditorModeButton, 'active');
+    } else {
+      this.r.removeClass(toggleEditorModeButton, 'active');
+    }
+    this.htmlMode = m;
+  }
+
+  /**
+   * Upload image when file is selected.
+   */
+  onFileChanged(event: any) {
+    const file = event.target.files[0];
+    if (file.type.includes('image/')) {
+      if (this.upload) {
+        // @ts-ignore
+        this.upload(file).subscribe((response: HttpResponse<UploadResponse>) => this.watchUploadImage(response, event));
+      } else if (this.uploadUrl) {
+        // @ts-ignore
+        this.editorService.uploadImage(file).subscribe((response: HttpResponse<UploadResponse>) => this.watchUploadImage(response, event));
+      } else {
+        const reader = new FileReader();
+        reader.onload = (e: ProgressEvent) => {
+          const fr = e.currentTarget as FileReader;
+          // @ts-ignore
+          this.editorService.insertImage(fr.result.toString());
+        };
+        reader.readAsDataURL(file);
+      }
+    }
+  }
+
+  watchUploadImage(response: HttpResponse<{imageUrl: string}>, event: { srcElement: { value: null; }; }) {
+    // @ts-ignore
+    const { imageUrl } = response.body;
+    this.editorService.insertImage(imageUrl);
+    event.srcElement.value = null;
+  }
+
+  /**
+   * Set custom class
+   */
+  setCustomClass(classId: string) {
+    if (classId === '-1') {
+      this.execute.emit('clear');
+    } else {
+      this.editorService.createCustomClass(this._customClasses[+classId]);
+    }
+  }
+
+  isButtonHidden(name: string): boolean {
+    if (!name) {
+      return false;
+    }
+    if (!(this.hiddenButtons instanceof Array)) {
+      return false;
+    }
+    let result: any;
+    for (const arr of this.hiddenButtons) {
+      if (arr instanceof Array) {
+        result = arr.find(item => item === name);
+      }
+      if (result) {
+        break;
+      }
+    }
+    return result !== undefined;
+  }
+
+  focus() {
+    this.execute.emit('focus');
+  }
+}

package/src/lib/components/form/input-editor/components/editor-toolbar-button/editor-toolbar-button.component.html

@@ -0,0 +1,12 @@
+<button
+  type="button"
+  [title]="title"
+  [hidden]="hidden"
+  [disabled]="disabled"
+  [id]="id"
+  class="angular-editor-button"
+  (click)="mrxClick.emit()"
+  tabindex="-1"
+>
+  <span class="mrx-icon icon-font-16" [class]="getIconClass"></span>
+</button>

package/src/lib/components/form/input-editor/components/editor-toolbar-button/editor-toolbar-button.component.less

@@ -0,0 +1,13 @@
+@import "../../assets/style";
+
+.select-button {
+  display: inline-block;
+  // border: #000066 solid;
+  // padding-right: 10px;
+  // padding: auto;
+  &.disabled {
+    cursor: pointer;
+    background-color: #f1f1f1;
+    transition: 0.2s ease;
+  }
+}

package/src/lib/components/form/input-editor/components/editor-toolbar-button/editor-toolbar-button.component.ts

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'mrx-editor-toolbar-button',
+  templateUrl: './editor-toolbar-button.component.html',
+  styleUrls: ['./editor-toolbar-button.component.less'],
+  encapsulation: ViewEncapsulation.None
+})
+export class EditorToolbarButtonComponent {
+  @Input() icon = '';
+  @Input() title = '';
+  @Input() id = '';
+  @Input() hidden = false;
+  @Input() disabled = false;
+  @Output() mrxClick: EventEmitter<void> = new EventEmitter<void>();
+
+  constructor() { }
+
+  get getIconClass(): string {
+    return `icon-${this.icon}`
+  }
+}