feat(ckeditor): add emoji functionality

apps/client/src/types-assets.d.ts

@@ -3,4 +3,9 @@ declare module "*.png" {
     export default path;
 }
 
-declare module "script-loader!mark.js/dist/jquery.mark.min.js";
+declare module "*.json?external" {
+    var path: string;
+    export default path;
+}
+
+declare module "script-loader!mark.js/dist/jquery.mark.min.js";

apps/client/src/widgets/type_widgets/ckeditor/config.ts

@@ -1,6 +1,7 @@
 import { ALLOWED_PROTOCOLS } from "../../../services/link.js";
 import options from "../../../services/options.js";
 import utils from "../../../services/utils.js";
+import emojiDefinitionsUrl from "@triliumnext/ckeditor5/emoji_definitions/en.json?external";
 
 const TEXT_FORMATTING_GROUP = {
     label: "Text formatting",
@@ -96,6 +97,9 @@ export function buildConfig() {
             defaultProtocol: "https://",
             allowedProtocols: ALLOWED_PROTOCOLS
         },
+        emoji: {
+            definitionsUrl: emojiDefinitionsUrl
+        },
         // This value must be kept in sync with the language defined in webpack.config.js.
         language: "en"
     };
@@ -169,7 +173,7 @@ export function buildClassicToolbar(multilineToolbar: boolean) {
                 {
                     label: "Insert",
                     icon: "plus",
-                    items: ["imageUpload", "|", "link", "bookmark", "internallink", "includeNote", "|", "specialCharacters", "math", "mermaid", "horizontalLine", "pageBreak"]
+                    items: ["imageUpload", "|", "link", "bookmark", "internallink", "includeNote", "|", "specialCharacters", "emoji", "math", "mermaid", "horizontalLine", "pageBreak"]
                 },
                 "|",
                 "outdent",
@@ -233,6 +237,7 @@ export function buildFloatingToolbar() {
             "imageUpload",
             "markdownImport",
             "specialCharacters",
+            "emoji",
             "findAndReplace"
         ]
     };

apps/client/webpack.config.cjs

@@ -81,6 +81,7 @@ module.exports = composePlugins(
     }));
 
     inlineSvg(config);
+    externalJson(config);
 
     return config;
   }
@@ -100,4 +101,16 @@ function inlineSvg(config) {
     resourceQuery: /raw/,
     type: 'asset/source',
   });
+}
+
+function externalJson(config) {
+  if (!config.module?.rules) {
+    return;
+  }
+  
+  // Add a rule for prepending ?external.
+  config.module.rules.push({
+    resourceQuery: /external/,
+    type: 'asset/resource',
+  });
 }