[UXP-241] add emoji plugin

Author: FrancescoMolinaro

angular.json

@@ -73,6 +73,7 @@
               "./node_modules/quill/dist/quill.core.css",
               "./node_modules/quill/dist/quill.snow.css",
               "./node_modules/quill/dist/quill.bubble.css",
+              "./node_modules/quill-emoji/dist/quill-emoji.css"
             ],
             "scripts": [],
             "baseHref": "/"

package.json

@@ -152,6 +152,7 @@
     "ngx-quill": "21.0.2",
     "prop-types": "^15.8.1",
     "quill": "1.3.7",
+    "quill-emoji": "^0.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.0",

src/app/shared/markdown-editor/markdown-editor.component.ts

@@ -1,3 +1,4 @@
+import 'quill-emoji/dist/quill-emoji.js';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ContentChange, QuillModules } from 'ngx-quill';
 
@@ -20,18 +21,22 @@ export class MarkdownEditorComponent  {
    * Quill modules config
    */
   modules: QuillModules = {
-    toolbar: [
-      ['bold', 'italic', 'underline', 'strike'],
-      [{ 'header': 1 }, { 'header': 2 }],
-      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
-      [{ 'indent': '-1'}, { 'indent': '+1' }],
-      [{ 'direction': 'rtl' }],
-      [{ 'size': ['small', false, 'large', 'huge'] }],
-      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-      [{ 'font': [] }],
-      [{ 'align': [] }],
-      ['clean'],
-    ],
+    'emoji-toolbar': true,
+    toolbar: {
+      container:  [
+        ['bold', 'italic', 'underline', 'strike'],
+        [{ 'header': 1 }, { 'header': 2 }],
+        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+        [{ 'indent': '-1'}, { 'indent': '+1' }],
+        [{ 'direction': 'rtl' }],
+        [{ 'size': ['small', false, 'large', 'huge'] }],
+        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+        [{ 'font': [] }],
+        [{ 'align': [] }],
+        ['clean'],
+        ['emoji'],
+      ],
+    },
     syntax: false
   };