Use ckeditors emoji picker instead of our own plugin

Author: jbtronics

assets/ckeditor/emojis.json

@@ -63,7 +63,8 @@ import {EditorWatchdog} from 'ckeditor5';
 import {TodoList} from 'ckeditor5';
 
 import ExtendedMarkdown from "./plugins/extendedMarkdown.js";
-import SpecialCharactersEmoji from "./plugins/special_characters_emoji";
+import SpecialCharactersGreek from "./plugins/special_characters_emoji";
+import {Mention, Emoji} from "ckeditor5";
 
 class Editor extends ClassicEditor {}
 
@@ -117,9 +118,11 @@ Editor.builtinPlugins = [
     Underline,
     TodoList,
 
+    Mention, Emoji,
+
     //Our own extensions
     ExtendedMarkdown,
-    SpecialCharactersEmoji
+    SpecialCharactersGreek
 ];
 
 // Editor configuration.
@@ -148,6 +151,7 @@ Editor.defaultConfig = {
             'indent',
             '|',
             'specialCharacters',
+            "emoji",
             'horizontalLine',
             '|',
             'imageUpload',

assets/ckeditor/markdown_full.js

@@ -27,10 +27,11 @@ import {Subscript} from 'ckeditor5';
 import {Superscript} from 'ckeditor5';
 import {Underline} from 'ckeditor5';
 import {EditorWatchdog} from 'ckeditor5';
+import {Mention, Emoji} from "ckeditor5";
 
 import ExtendedMarkdownInline from "./plugins/extendedMarkdownInline";
 import SingleLinePlugin from "./plugins/singleLine";
-import SpecialCharactersEmoji from "./plugins/special_characters_emoji";
+import SpecialCharactersGreek from "./plugins/special_characters_emoji";
 
 class Editor extends ClassicEditor {}
 
@@ -62,7 +63,8 @@ Editor.builtinPlugins = [
 
     ExtendedMarkdownInline,
     SingleLinePlugin,
-    SpecialCharactersEmoji
+    SpecialCharactersGreek,
+    Mention, Emoji
 ];
 
 // Editor configuration.
@@ -81,6 +83,7 @@ Editor.defaultConfig = {
             'link',
             'code',
             'specialCharacters',
+            'emoji',
             '|',
             'undo',
             'redo',

assets/ckeditor/markdown_single_line.js

@@ -22,19 +22,14 @@ import SpecialCharactersEssentials from 'ckeditor5';
 
 import {Plugin} from 'ckeditor5';
 
-const emoji = require('emoji.json');
-
-export default class SpecialCharactersEmoji extends Plugin {
+export default class SpecialCharactersGreek extends Plugin {
 
     init() {
         const editor = this.editor;
         const specialCharsPlugin = editor.plugins.get('SpecialCharacters');
 
         //Add greek characters to special characters
         specialCharsPlugin.addItems('Greek', this.getGreek());
-
-        //Add Emojis to special characters
-        specialCharsPlugin.addItems('Emoji', this.getEmojis());
     }
 
     getGreek() {
@@ -96,14 +91,4 @@ export default class SpecialCharactersEmoji extends Plugin {
             { title: 'san', character: 'Ϻ' },
         ];
     }
-
-    getEmojis() {
-        //Map our emoji data to the format the plugin expects
-        return emoji.map(emoji => {
-            return {
-                title: emoji.name,
-                character: emoji.char
-            };
-        });
-    }
 }

assets/ckeditor/plugins/special_characters_emoji.js

@@ -52,9 +52,15 @@ export default class extends Controller {
 
         const language = document.body.dataset.locale ?? "en";
 
+        const emojiURL = new URL('../../ckeditor/emojis.json', import.meta.url).href;
+
         const config = {
             language: language,
             licenseKey: "GPL",
+
+            emoji: {
+                definitionsUrl: emojiURL
+            }
         }
 
         const watchdog = new EditorWatchdog();

assets/controllers/elements/ckeditor_controller.js

@@ -58,7 +58,6 @@
         "datatables.net-responsive-bs5": "^3.0.0",
         "datatables.net-select-bs5": "^2.0.0",
         "dompurify": "^3.0.3",
-        "emoji.json": "^15.0.0",
         "exports-loader": "^5.0.0",
         "json-formatter-js": "^2.3.4",
         "jszip": "^3.2.0",

package.json

@@ -3682,11 +3682,6 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emoji.json@^15.0.0:
-  version "15.1.0"
-  resolved "https://registry.yarnpkg.com/emoji.json/-/emoji.json-15.1.0.tgz#1a1bac02f95983c808601a74b0b367677e52db3b"
-  integrity sha512-GqE6SCE8rSc5Gyd+oh6s/pkoNSW/pULdgJTB6jd/sM87FWA/a1nmvFMdWBjvSA5vdomzDvZgy584KNgzdYJwDA==
-
 emojis-list@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"