From 9628b99f9be75f4b55cb56b1700fb107d0c423af Mon Sep 17 00:00:00 2001 From: Cyperghost Date: Fri, 18 Oct 2024 12:13:19 +0200 Subject: [PATCH] Add Emoji button to toolbar --- ts/WoltLabSuite/Core/Component/Ckeditor.ts | 9 +++++++++ ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts | 2 +- .../Component/EmojiPicker/woltlab-core-emoji-picker.ts | 9 ++++++++- .../files/js/WoltLabSuite/Core/Component/Ckeditor.js | 9 ++++++++- .../Core/Component/Ckeditor/Configuration.js | 2 +- .../Component/EmojiPicker/woltlab-core-emoji-picker.js | 7 +++++++ 6 files changed, 34 insertions(+), 4 deletions(-) diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor.ts b/ts/WoltLabSuite/Core/Component/Ckeditor.ts index 257a672784..ee0363d6f2 100644 --- a/ts/WoltLabSuite/Core/Component/Ckeditor.ts +++ b/ts/WoltLabSuite/Core/Component/Ckeditor.ts @@ -29,6 +29,7 @@ import { setupSubmitShortcut } from "./Ckeditor/Keyboard"; import { setup as setupLayer } from "./Ckeditor/Layer"; import { browser, touch } from "../Environment"; import { WoltlabSmileyItem } from "@woltlab/editor/plugins/ckeditor5-woltlab-smiley"; +import { getDatabaseForAutoComplete } from "WoltLabSuite/Core/Component/EmojiPicker/woltlab-core-emoji-picker"; const instances = new WeakMap(); @@ -309,6 +310,14 @@ export async function setupCkeditor( configuration.licenseKey = licenseKey; } + const { getDatabaseForAutoComplete } = await import("./EmojiPicker/woltlab-core-emoji-picker"); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + // TODO remove eslint-disable + configuration.woltlabEmojis = { + getDatabase: getDatabaseForAutoComplete(), + }; + normalizeLegacyMessage(element); const cke = await createEditor(element, configuration); diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts index c9079a9f36..47d49594b9 100644 --- a/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts +++ b/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts @@ -35,7 +35,7 @@ class ConfigurationBuilder { } #setupBasicFormat(): void { - this.#toolbar.push("bold", "italic"); + this.#toolbar.push("bold", "italic", "WoltlabEmoji"); } #setupTextFormat(): void { diff --git a/ts/WoltLabSuite/Core/Component/EmojiPicker/woltlab-core-emoji-picker.ts b/ts/WoltLabSuite/Core/Component/EmojiPicker/woltlab-core-emoji-picker.ts index 1457fc2ff1..2b49cebbe2 100644 --- a/ts/WoltLabSuite/Core/Component/EmojiPicker/woltlab-core-emoji-picker.ts +++ b/ts/WoltLabSuite/Core/Component/EmojiPicker/woltlab-core-emoji-picker.ts @@ -1,6 +1,6 @@ import "emoji-picker-element"; import { PickerConstructorOptions } from "emoji-picker-element/shared"; -import { Picker } from "emoji-picker-element"; +import { Picker, Database } from "emoji-picker-element"; import { getLocalizationData } from "WoltLabSuite/Core/Component/EmojiPicker/Localization"; function getDataSource(locale: string): string { @@ -28,6 +28,13 @@ export class WoltlabCoreEmojiPicker extends Picker { } } +export function getDatabaseForAutoComplete(): Database { + return new Database({ + dataSource: getDataSource("en"), + locale: "en", + }); +} + void customElements.whenDefined("emoji-picker").then(() => { customElements.define("woltlab-core-emoji-picker", WoltlabCoreEmojiPicker, { extends: "emoji-picker", diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js index 89412aec80..6ed365c275 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js @@ -221,6 +221,13 @@ define(["require", "exports", "tslib", "./Ckeditor/Attachment", "./Ckeditor/Medi if (licenseKey) { configuration.licenseKey = licenseKey; } + const { getDatabaseForAutoComplete } = await new Promise((resolve_2, reject_2) => { require(["./EmojiPicker/woltlab-core-emoji-picker"], resolve_2, reject_2); }).then(tslib_1.__importStar); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + // TODO remove eslint-disable + configuration.woltlabEmojis = { + getDatabase: getDatabaseForAutoComplete(), + }; (0, Normalizer_1.normalizeLegacyMessage)(element); const cke = await createEditor(element, configuration); const ckeditor = new Ckeditor(cke, features); @@ -241,7 +248,7 @@ define(["require", "exports", "tslib", "./Ckeditor/Attachment", "./Ckeditor/Medi notifyOfDataChanges(cke, element); const enableDebug = window.ENABLE_DEBUG_MODE && window.ENABLE_DEVELOPER_TOOLS; if (enableDebug && Devtools_1.default._internal_.editorInspector()) { - void new Promise((resolve_2, reject_2) => { require(["@ckeditor/ckeditor5-inspector"], resolve_2, reject_2); }).then(tslib_1.__importStar).then((inspector) => { + void new Promise((resolve_3, reject_3) => { require(["@ckeditor/ckeditor5-inspector"], resolve_3, reject_3); }).then(tslib_1.__importStar).then((inspector) => { inspector.default.attach(cke); }); } 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 df7dc19f5d..b37b169ab7 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js @@ -29,7 +29,7 @@ define(["require", "exports", "../../Language"], function (require, exports, Lan } } #setupBasicFormat() { - this.#toolbar.push("bold", "italic"); + this.#toolbar.push("bold", "italic", "WoltlabEmoji"); } #setupTextFormat() { const items = []; diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/EmojiPicker/woltlab-core-emoji-picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/EmojiPicker/woltlab-core-emoji-picker.js index a4d177aa8a..d03c4d5637 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/EmojiPicker/woltlab-core-emoji-picker.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/EmojiPicker/woltlab-core-emoji-picker.js @@ -2,6 +2,7 @@ define(["require", "exports", "emoji-picker-element", "WoltLabSuite/Core/Compone "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.WoltlabCoreEmojiPicker = void 0; + exports.getDatabaseForAutoComplete = getDatabaseForAutoComplete; function getDataSource(locale) { return `${window.WSC_API_URL}emoji/${locale}.json`; } @@ -23,6 +24,12 @@ define(["require", "exports", "emoji-picker-element", "WoltLabSuite/Core/Compone } } exports.WoltlabCoreEmojiPicker = WoltlabCoreEmojiPicker; + function getDatabaseForAutoComplete() { + return new emoji_picker_element_1.Database({ + dataSource: getDataSource("en"), + locale: "en", + }); + } void customElements.whenDefined("emoji-picker").then(() => { customElements.define("woltlab-core-emoji-picker", WoltlabCoreEmojiPicker, { extends: "emoji-picker", -- 2.20.1