Add Emojis to Special Characters input of CKEDITOR

assets/ckeditor/markdown_full.js

@@ -63,6 +63,7 @@ import EditorWatchdog from '@ckeditor/ckeditor5-watchdog/src/editorwatchdog.js';
 import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
 
 import ExtendedMarkdown from "./plugins/extendedMarkdown.js";
+import SpecialCharactersEmoji from "./plugins/special_characters_emoji";
 
 class Editor extends ClassicEditor {}
 
@@ -115,7 +116,10 @@ Editor.builtinPlugins = [
     TableToolbar,
     Underline,
     TodoList,
-    ExtendedMarkdown
+
+    //Our own extensions
+    ExtendedMarkdown,
+    SpecialCharactersEmoji
 ];
 
 // Editor configuration.

assets/ckeditor/markdown_single_line.js

@@ -30,6 +30,7 @@ import EditorWatchdog from '@ckeditor/ckeditor5-watchdog/src/editorwatchdog.js';
 
 import ExtendedMarkdownInline from "./plugins/extendedMarkdownInline";
 import SingleLinePlugin from "./plugins/singleLine";
+import SpecialCharactersEmoji from "./plugins/special_characters_emoji";
 
 class Editor extends ClassicEditor {}
 
@@ -61,6 +62,7 @@ Editor.builtinPlugins = [
 
     ExtendedMarkdownInline,
     SingleLinePlugin,
+    SpecialCharactersEmoji
 ];
 
 // Editor configuration.

assets/ckeditor/plugins/special_characters_emoji.js

@@ -0,0 +1,26 @@
+import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters';
+import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials';
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+const emoji = require('emoji.json');
+
+export default class SpecialCharactersEmoji extends Plugin {
+
+    init() {
+        const editor = this.editor;
+        const specialCharsPlugin = editor.plugins.get('SpecialCharacters');
+
+        specialCharsPlugin.addItems('Emoji', this.getEmojis());
+    }
+
+    getEmojis() {
+        //Map our emoji data to the format the plugin expects
+        return emoji.map(emoji => {
+            return {
+                title: emoji.name,
+                character: emoji.char
+            };
+        });
+    }
+}

package.json

@@ -75,6 +75,7 @@
         "datatables.net-responsive-bs5": "^2.2.3",
         "datatables.net-select-bs5": "^1.2.7",
         "dompurify": "^2.0.6",
+        "emoji.json": "^13.1.0",
         "exports-loader": "^3.0.0",
         "jszip": "^3.2.0",
         "katex": "^0.16.0",

yarn.lock

@@ -3144,6 +3144,11 @@ 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@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/emoji.json/-/emoji.json-13.1.0.tgz#116e46dc57c97af7ec2605ec88cfff31e9bcbade"
+  integrity sha512-ibJCYVe3Ilic4euofl0ozWqkmqXXsCuhuOuwhwAoG9qsMizNGI8aa7P4QIKlZ8NLgXx+pnVT2t6ZTvQczIv/ZA==
+
 emojis-list@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"