CKEditor Emoji Picker

app.ts

@@ -31,6 +31,7 @@ import {
   RemoveFormat,
   Table,
   Undo,
+  Emoji,
   WoltlabAttachment,
   WoltlabAutoLink,
   WoltlabAutosave,
@@ -39,7 +40,6 @@ import {
   WoltlabCode,
   WoltlabCodeBlock,
   WoltlabFontSize,
-  WoltlabEmoji,
   WoltlabHtmlEmbed,
   WoltlabImage,
   WoltlabMagicParagraph,
@@ -62,6 +62,7 @@ const defaultConfig: Core.EditorConfig = {
     Paragraph.Paragraph,
     PasteFromOffice.PasteFromOffice,
     Undo.Undo,
+    Emoji.Emoji,
 
     // Formatting
     Alignment.Alignment,
@@ -118,7 +119,6 @@ const defaultConfig: Core.EditorConfig = {
     WoltlabToolbarGroup.WoltlabToolbarGroup,
     WoltlabUpload.WoltlabUpload,
     WoltlabFontSize.WoltlabFontSize,
-    WoltlabEmoji.WoltlabEmoji,
   ],
 };
 

modules.ts

@@ -33,6 +33,7 @@ export * as Undo from "@ckeditor/ckeditor5-undo";
 export * as Upload from "@ckeditor/ckeditor5-upload";
 export * as Utils from "@ckeditor/ckeditor5-utils";
 export * as Widget from "@ckeditor/ckeditor5-widget";
+export * as Emoji from "@ckeditor/ckeditor5-emoji";
 
 export * as WoltlabAttachment from "./plugins/ckeditor5-woltlab-attachment/src";
 export * as WoltlabAutoLink from "./plugins/ckeditor5-woltlab-autolink/src";
@@ -41,7 +42,6 @@ export * as WoltlabBbcode from "./plugins/ckeditor5-woltlab-bbcode/src";
 export * as WoltlabBlockQuote from "./plugins/ckeditor5-woltlab-block-quote/src";
 export * as WoltlabCode from "./plugins/ckeditor5-woltlab-code/src";
 export * as WoltlabCodeBlock from "./plugins/ckeditor5-woltlab-code-block/src";
-export * as WoltlabEmoji from "./plugins/ckeditor5-woltlab-emoji/src";
 export * as WoltlabHtmlEmbed from "./plugins/ckeditor5-woltlab-html-embed/src";
 export * as WoltlabImage from "./plugins/ckeditor5-woltlab-image/src";
 export * as WoltlabMagicParagraph from "./plugins/ckeditor5-woltlab-magic-paragraph/src";

package.json

@@ -32,7 +32,7 @@
     "@ckeditor/ckeditor5-undo": "^45.0.0",
     "@ckeditor/ckeditor5-utils": "^45.0.0",
     "@ckeditor/ckeditor5-widget": "^45.0.0",
-    "emoji-picker-element": "^1.25.0"
+    "@ckeditor/ckeditor5-emoji": "^45.0.0"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-dev-translations": "^43.0.1",
@@ -50,4 +50,4 @@
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1"
   }
-}
+}

plugins/ckeditor5-woltlab-smiley/src/index.ts

@@ -6,5 +6,8 @@
  */
 
 export { WoltlabSmiley } from "./woltlabsmiley";
-export { WoltlabSmileyItem } from "./woltlabsmileyui";
+export {
+  WoltlabSmileyItem,
+  WoltlabSmileyMention,
+} from "./woltlabsmileymention";
 export { default as WoltlabSmileyCommand } from "./woltlabsmileycommand";

plugins/ckeditor5-woltlab-smiley/src/woltlabsmiley.ts

@@ -10,18 +10,18 @@
 import { Plugin } from "@ckeditor/ckeditor5-core";
 import type { DowncastInsertEvent } from "@ckeditor/ckeditor5-engine";
 import { Image } from "@ckeditor/ckeditor5-image";
-import { WoltlabSmileyUi } from "./woltlabsmileyui";
 
 import "../theme/woltlabsmiley.css";
 import { toWidget } from "@ckeditor/ckeditor5-widget";
+import WoltlabSmileyMention from "./woltlabsmileymention";
 
 export class WoltlabSmiley extends Plugin {
   static get pluginName() {
     return "WoltlabSmiley";
   }
 
   static get requires() {
-    return [Image, WoltlabSmileyUi] as const;
+    return [Image, WoltlabSmileyMention] as const;
   }
 
   init() {