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',
+  });
 }

docs/Release Notes/Release Notes/v0.94.0.md

@@ -20,7 +20,9 @@
 
 *   Improved the text editor style, to match the TriliumNext.
 *   Footnotes work in image captions by @werererer
-*   Text notes now have support for bookmarks, similar to HTML anchors (see the in-app help for more details).
+*   Improvements to text notes, thanks updates to the editor (see the in-app help for more details):
+    *   Bookmarks, similar to HTML anchors.
+    *   Emojis.
 
 ## 📖 Documentation
 

packages/ckeditor5/package.json

@@ -9,6 +9,7 @@
   "types": "./dist/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
+    "./emoji_definitions/": "./src/emoji_definitions/",
     ".": {
       "development": "./src/index.ts",
       "types": "./dist/index.d.ts",

packages/ckeditor5/src/plugins.ts

@@ -1,4 +1,4 @@
-import { Autoformat, AutoLink, BlockQuote, BlockToolbar, Bold, CKFinderUploadAdapter, Clipboard, Code, CodeBlock, Enter, FindAndReplace, Font, FontBackgroundColor, FontColor, GeneralHtmlSupport, Heading, HeadingButtonsUI, HorizontalLine, Image, ImageCaption, ImageInline, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, List, ListProperties, Mention, PageBreak, Paragraph, ParagraphButtonUI, PasteFromOffice, PictureEditing, RemoveFormat, SelectAll, ShiftEnter, SpecialCharacters, SpecialCharactersEssentials, Strikethrough, Style, Subscript, Superscript, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableSelection, TableToolbar, TextPartLanguage, TextTransformation, TodoList, Typing, Underline, Undo, Bookmark } from "ckeditor5";
+import { Autoformat, AutoLink, BlockQuote, BlockToolbar, Bold, CKFinderUploadAdapter, Clipboard, Code, CodeBlock, Enter, FindAndReplace, Font, FontBackgroundColor, FontColor, GeneralHtmlSupport, Heading, HeadingButtonsUI, HorizontalLine, Image, ImageCaption, ImageInline, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, List, ListProperties, Mention, PageBreak, Paragraph, ParagraphButtonUI, PasteFromOffice, PictureEditing, RemoveFormat, SelectAll, ShiftEnter, SpecialCharacters, SpecialCharactersEssentials, Strikethrough, Style, Subscript, Superscript, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableSelection, TableToolbar, TextPartLanguage, TextTransformation, TodoList, Typing, Underline, Undo, Bookmark, Emoji } from "ckeditor5";
 import type { Plugin } from "ckeditor5";
 import CutToNotePlugin from "./plugins/cuttonote.js";
 import UploadimagePlugin from "./plugins/uploadimage.js";
@@ -112,7 +112,8 @@ export const COMMON_PLUGINS: typeof Plugin[] = [
 	GeneralHtmlSupport,
 	TextPartLanguage,
     Style,
-    Bookmark
+    Bookmark,
+    Emoji
 ];
 
 export const POPUP_EDITOR_PLUGINS: typeof Plugin[] = [