Add WoltlabEmoji picker to CKEditor toolbar

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts
index c9079a9f36a7eb91933ce1f3a2b160425cf9fbbf..eada24370f173978de87a1a96e11f8ff7911ded9 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts
@@ -182,6 +182,7 @@ class ConfigurationBuilder {
     } else {
       this.#removePlugins.push("Table", "TableToolbar");
     }
+    this.#toolbar.push("WoltlabEmoji");
 
     if (this.#features.quoteBlock) {
       this.#toolbar.push("blockQuote");

diff --git a/ts/WoltLabSuite/WebComponent/emoji-picker.ts b/ts/WoltLabSuite/WebComponent/emoji-picker.ts
index 84a3856ed7d4eb9eb41bd2c5f7bce2e84c40ac8a..36eeeb745a0047d4660e11a7a0997757d7b56242 100644 (file)
--- a/ts/WoltLabSuite/WebComponent/emoji-picker.ts
+++ b/ts/WoltLabSuite/WebComponent/emoji-picker.ts
@@ -83,7 +83,13 @@ void customElements.whenDefined("emoji-picker").then(() => {
         this._dbFlush();
       }
     }
+
+    focus() {
+      this.shadowRoot!.querySelector<HTMLInputElement>(".search")!.focus();
+    }
   }
 
-  customElements.define("woltlab-core-emoji-picker", WoltlabCoreEmojiPicker);
+  customElements.define("woltlab-core-emoji-picker", WoltlabCoreEmojiPicker, {
+    extends: "emoji-picker",
+  });
 });

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js
index df7dc19f5d187dfec0657dccc30b6874f9ac64f2..5711c6b542fa07f9a6a45eae8e0587b58d8def78 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js
@@ -168,6 +168,7 @@ define(["require", "exports", "../../Language"], function (require, exports, Lan
             else {
                 this.#removePlugins.push("Table", "TableToolbar");
             }
+            this.#toolbar.push("WoltlabEmoji");
             if (this.#features.quoteBlock) {
                 this.#toolbar.push("blockQuote");
             }