@ckeditor/ckeditor5-emoji 0.0.0-nightly-20250129.0

package/lang/contexts.json

@@ -0,0 +1,24 @@
+{
+	"Emoji": "Toolbar button tooltip for the Emoji feature.",
+	"Show all emoji...": "Dropdown option label for opening an emoji picker offering more results to choose from.",
+	"Find an emoji (min. 2 characters)": "Label of an input field for filtering an emoji collection by the typed value.",
+	"No emojis were found matching \"%0\".": "The main text of the message shown to the user when no emoji are available for the search criteria.",
+	"Keep on typing to see the emoji.": "The main text of the message shown to the user when the provided search query does not contain the required number of characters.",
+	"The query must contain at least two characters.": "The secondary text of the message shown to the user to explain how many characters the search query must consist of.",
+	"Smileys & Expressions": "Tooltip for filtering the displayed emoji by the \"Smileys & Expressions\" category.",
+	"Gestures & People": "Tooltip for filtering the displayed emoji by the \"Gestures & People\" category.",
+	"Animals & Nature": "Tooltip for filtering the displayed emoji by the \"Animals & Nature\" category.",
+	"Food & Drinks": "Tooltip for filtering the displayed emoji by the \"Food & Drinks\" category.",
+	"Travel & Places": "Tooltip for filtering the displayed emoji by the \"Travel & Places\" category.",
+	"Activities": "Tooltip for filtering the displayed emoji by the \"Activities\" category.",
+	"Objects": "Tooltip for filtering the displayed emoji by the \"Objects\" category.",
+	"Symbols": "Tooltip for filtering the displayed emoji by the \"Symbols\" category.",
+	"Flags": "Tooltip for filtering the displayed emoji by the \"Flags\" category.",
+	"Select skin tone": "Default label for the emoji skin tone dropdown.",
+	"Default skin tone": "Dropdown option label for using the \"Default skin tone\" variant. Example emoji: 👋.",
+	"Light skin tone": "Dropdown option label for using the \"Light skin tone\" variant. Example emoji: 👋🏻.",
+	"Medium Light skin tone": "Dropdown option label for using the \"Medium Light skin tone\" variant. Example emoji: 👋🏼.",
+	"Medium skin tone": "Dropdown option label for using the \"Medium skin tone\" variant. Example emoji: 👋🏽.",
+	"Medium Dark skin tone": "Dropdown option label for using the \"Medium Dark skin tone\" variant. Example emoji: 👋🏾.",
+	"Dark skin tone": "Dropdown option label for using the \"Dark skin tone\" variant. Example emoji: 👋🏿."
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@ckeditor/ckeditor5-emoji",
+  "version": "0.0.0-nightly-20250129.0",
+  "description": "Emoji feature for CKEditor 5.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin",
+    "ckeditor5-dll"
+  ],
+  "type": "module",
+  "main": "src/index.js",
+  "dependencies": {
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20250129.0",
+    "@ckeditor/ckeditor5-mention": "0.0.0-nightly-20250129.0",
+    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-20250129.0",
+    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20250129.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20250129.0",
+    "ckeditor5": "0.0.0-nightly-20250129.0",
+    "fuse.js": "7.0.0",
+    "lodash-es": "4.17.21"
+  },
+  "author": "CKSource (http://cksource.com/)",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "homepage": "https://ckeditor.com",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ckeditor/ckeditor5.git",
+    "directory": "packages/ckeditor5-emoji"
+  },
+  "files": [
+    "dist",
+    "lang",
+    "src/**/*.js",
+    "src/**/*.d.ts",
+    "theme",
+    "build",
+    "ckeditor5-metadata.json",
+    "CHANGELOG.md"
+  ],
+  "types": "src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./dist/*": {
+      "types": "./src/index.d.ts",
+      "import": "./dist/*",
+      "default": "./dist/*"
+    },
+    "./src/*": {
+      "types": "./src/*.d.ts",
+      "import": "./src/*",
+      "default": "./src/*"
+    },
+    "./build/*": "./build/*",
+    "./lang/*": "./lang/*",
+    "./theme/*": "./theme/*",
+    "./ckeditor5-metadata.json": "./ckeditor5-metadata.json",
+    "./package.json": "./package.json"
+  }
+}

package/src/augmentation.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+import type { Emoji, EmojiConfig, EmojiMention, EmojiPicker, EmojiRepository, EmojiCommand } from './index.js';
+declare module '@ckeditor/ckeditor5-core' {
+    interface EditorConfig {
+        /**
+         * The configuration of the {@link module:emoji/emoji~Emoji} feature.
+         *
+         * Read more in {@link module:emoji/emojiconfig~EmojiConfig}.
+         */
+        emoji?: EmojiConfig;
+    }
+    interface PluginsMap {
+        [Emoji.pluginName]: Emoji;
+        [EmojiMention.pluginName]: EmojiMention;
+        [EmojiPicker.pluginName]: EmojiPicker;
+        [EmojiRepository.pluginName]: EmojiRepository;
+    }
+    interface CommandsMap {
+        emoji: EmojiCommand;
+    }
+}

package/src/augmentation.js

@@ -0,0 +1,5 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+export {};

package/src/emoji.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module emoji/emoji
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import EmojiMention from './emojimention.js';
+import EmojiPicker from './emojipicker.js';
+/**
+ * The emoji plugin.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ *
+ * * {@link module:emoji/emojimention~EmojiMention},
+ * * {@link module:emoji/emojipicker~EmojiPicker},
+ */
+export default class Emoji extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof EmojiMention, typeof EmojiPicker];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "Emoji";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+}

package/src/emoji.js

@@ -0,0 +1,38 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module emoji/emoji
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import EmojiMention from './emojimention.js';
+import EmojiPicker from './emojipicker.js';
+/**
+ * The emoji plugin.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ *
+ * * {@link module:emoji/emojimention~EmojiMention},
+ * * {@link module:emoji/emojipicker~EmojiPicker},
+ */
+export default class Emoji extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [EmojiMention, EmojiPicker];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'Emoji';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+}

package/src/emojicommand.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module emoji/emojicommand
+ */
+import { Command } from 'ckeditor5/src/core.js';
+/**
+ * Command that shows the emoji user interface.
+ */
+export default class EmojiCommand extends Command {
+    /**
+     * Updates the command's {@link #isEnabled} based on the current selection.
+     */
+    refresh(): void;
+    /**
+     * Opens emoji user interface for the current document selection.
+     *
+     * @fires execute
+     * @param [searchValue=''] A default query used to filer the grid when opening the UI.
+     */
+    execute(searchValue?: string): void;
+}

package/src/emojicommand.js

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module emoji/emojicommand
+ */
+import { Command } from 'ckeditor5/src/core.js';
+/**
+ * Command that shows the emoji user interface.
+ */
+export default class EmojiCommand extends Command {
+    /**
+     * Updates the command's {@link #isEnabled} based on the current selection.
+     */
+    refresh() {
+        const editor = this.editor;
+        const model = editor.model;
+        const schema = model.schema;
+        const selection = model.document.selection;
+        this.isEnabled = schema.checkChild(selection.getFirstPosition(), '$text');
+    }
+    /**
+     * Opens emoji user interface for the current document selection.
+     *
+     * @fires execute
+     * @param [searchValue=''] A default query used to filer the grid when opening the UI.
+     */
+    execute(searchValue = '') {
+        const emojiPickerPlugin = this.editor.plugins.get('EmojiPicker');
+        emojiPickerPlugin.showUI(searchValue);
+    }
+}

package/src/emojiconfig.d.ts

@@ -0,0 +1,80 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module emoji/emojiconfig
+ */
+/**
+ * The configuration of the emoji feature.
+ *
+ * Read more about {@glink features/emoji#configuration configuring the emoji feature}.
+ *
+ * ```ts
+ *	ClassicEditor
+ *		.create( editorElement, {
+ *			emoji: ... // Emoji feature options.
+ *		} )
+ *		.then( ... )
+ *		.catch( ... );
+ * ```
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor configuration options}.
+ */
+export interface EmojiConfig {
+    /**
+     * The maximum number of emojis displayed in the dropdown list.
+     *
+     * ```ts
+     *	ClassicEditor
+     *		.create( editorElement, {
+     *			plugins: [ Emoji, ... ],
+     *			emoji: {
+     *				dropdownLimit: 4
+     *			}
+     *		} )
+     *		.then( ... )
+     *		.catch( ... );
+     * ```
+     *
+     * @default 6
+     */
+    dropdownLimit?: number;
+    /**
+     * Initial skin tone for the emojis that support skin tones.
+     *
+     * ```ts
+     *	ClassicEditor
+     *		.create( editorElement, {
+     *			plugins: [ Emoji, ... ],
+     *			emoji: {
+     *				skinTone: 'medium'
+     *			}
+     *		} )
+     *		.then( ... )
+     *		.catch( ... );
+     * ```
+     *
+     * @default 'default'
+     */
+    skinTone?: SkinToneId;
+    /**
+     * The emoji database version.
+     *
+     * ```ts
+     *	ClassicEditor
+     *		.create( editorElement, {
+     *			plugins: [ Emoji, ... ],
+     *			emoji: {
+     *				version: 15
+     *			}
+     *		} )
+     *		.then( ... )
+     *		.catch( ... );
+     * ```
+     *
+     * @default 16
+     */
+    version?: 15 | 16;
+}
+export type SkinToneId = 'default' | 'light' | 'medium-light' | 'medium' | 'medium-dark' | 'dark';

package/src/emojiconfig.js

@@ -0,0 +1,5 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+export {};

package/src/emojimention.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
+import { Typing } from 'ckeditor5/src/typing.js';
+import EmojiRepository from './emojirepository.js';
+/**
+ * The emoji mention plugin.
+ *
+ * Introduces the autocomplete of emojis while typing.
+ */
+export default class EmojiMention extends Plugin {
+    /**
+     * An instance of the {@link module:emoji/emojipicker~EmojiPicker} plugin if it is loaded in the editor.
+     */
+    private _emojiPickerPlugin;
+    /**
+     * An instance of the {@link module:emoji/emojirepository~EmojiRepository} plugin.
+     */
+    private _emojiRepositoryPlugin;
+    /**
+     * Defines a number of displayed items in the auto complete dropdown.
+     *
+     * It includes the "Show all emoji..." option if the `EmojiPicker` plugin is loaded.
+     */
+    private readonly _emojiDropdownLimit;
+    /**
+     * Defines a skin tone that is set in the emoji config.
+     */
+    private readonly _skinTone;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof EmojiRepository, typeof Typing, "Mention"];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "EmojiMention";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): Promise<void>;
+    /**
+     * Initializes the configuration for emojis in the mention feature.
+     */
+    private _setupMentionConfiguration;
+    /**
+     * Returns the `itemRenderer()` callback for mention config.
+     */
+    private _customItemRendererFactory;
+    /**
+     * Overrides the default mention execute listener to insert an emoji as plain text instead.
+     */
+    private _overrideMentionExecuteListener;
+    /**
+     * Returns the `feed()` callback for mention config.
+     */
+    private _queryEmojiCallbackFactory;
+}

package/src/emojimention.js

@@ -0,0 +1,193 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module emoji/emojimention
+ */
+import { logWarning } from 'ckeditor5/src/utils.js';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { Typing } from 'ckeditor5/src/typing.js';
+import EmojiRepository from './emojirepository.js';
+const EMOJI_MENTION_MARKER = ':';
+const EMOJI_SHOW_ALL_OPTION_ID = ':__EMOJI_SHOW_ALL:';
+const EMOJI_HINT_OPTION_ID = ':__EMOJI_HINT:';
+/**
+ * The emoji mention plugin.
+ *
+ * Introduces the autocomplete of emojis while typing.
+ */
+export default class EmojiMention extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [EmojiRepository, Typing, 'Mention'];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'EmojiMention';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.config.define('emoji', {
+            dropdownLimit: 6
+        });
+        this._emojiDropdownLimit = editor.config.get('emoji.dropdownLimit');
+        this._skinTone = editor.config.get('emoji.skinTone');
+        const mentionFeedsConfigs = editor.config.get('mention.feeds');
+        const mergeFieldsPrefix = editor.config.get('mergeFields.prefix');
+        const markerAlreadyUsed = mentionFeedsConfigs.some(config => config.marker === EMOJI_MENTION_MARKER);
+        const isMarkerUsedByMergeFields = mergeFieldsPrefix ? mergeFieldsPrefix[0] === EMOJI_MENTION_MARKER : false;
+        if (markerAlreadyUsed || isMarkerUsedByMergeFields) {
+            /**
+             * The `marker` in the `emoji` config is already used by other plugin configuration.
+             *
+             * @error emoji-config-marker-already-used
+             * @param {string} marker Used marker.
+             */
+            logWarning('emoji-config-marker-already-used', { marker: EMOJI_MENTION_MARKER });
+            return;
+        }
+        this._setupMentionConfiguration(mentionFeedsConfigs);
+    }
+    /**
+     * @inheritDoc
+     */
+    async init() {
+        const editor = this.editor;
+        this._emojiPickerPlugin = editor.plugins.has('EmojiPicker') ? editor.plugins.get('EmojiPicker') : null;
+        this._emojiRepositoryPlugin = editor.plugins.get('EmojiRepository');
+        // Skip overriding the `mention` command listener if the emoji repository is not ready.
+        if (!await this._emojiRepositoryPlugin.isReady()) {
+            return;
+        }
+        editor.once('ready', this._overrideMentionExecuteListener.bind(this));
+    }
+    /**
+     * Initializes the configuration for emojis in the mention feature.
+     */
+    _setupMentionConfiguration(mentionFeedsConfigs) {
+        const emojiMentionFeedConfig = {
+            marker: EMOJI_MENTION_MARKER,
+            dropdownLimit: this._emojiDropdownLimit,
+            itemRenderer: this._customItemRendererFactory(this.editor.t),
+            feed: this._queryEmojiCallbackFactory()
+        };
+        this.editor.config.set('mention.feeds', [...mentionFeedsConfigs, emojiMentionFeedConfig]);
+    }
+    /**
+     * Returns the `itemRenderer()` callback for mention config.
+     */
+    _customItemRendererFactory(t) {
+        return (item) => {
+            const itemElement = document.createElement('button');
+            itemElement.classList.add('ck');
+            itemElement.classList.add('ck-button');
+            itemElement.classList.add('ck-button_with-text');
+            itemElement.id = `mention-list-item-id${item.id.slice(0, -1)}`;
+            itemElement.type = 'button';
+            itemElement.tabIndex = -1;
+            const labelElement = document.createElement('span');
+            labelElement.classList.add('ck');
+            labelElement.classList.add('ck-button__label');
+            itemElement.appendChild(labelElement);
+            if (item.id === EMOJI_HINT_OPTION_ID) {
+                itemElement.classList.add('ck-list-item-button');
+                itemElement.classList.add('ck-disabled');
+                labelElement.textContent = t('Keep on typing to see the emoji.');
+            }
+            else if (item.id === EMOJI_SHOW_ALL_OPTION_ID) {
+                labelElement.textContent = t('Show all emoji...');
+            }
+            else {
+                labelElement.textContent = `${item.text} ${item.id}`;
+            }
+            return itemElement;
+        };
+    }
+    /**
+     * Overrides the default mention execute listener to insert an emoji as plain text instead.
+     */
+    _overrideMentionExecuteListener() {
+        const editor = this.editor;
+        editor.commands.get('mention').on('execute', (event, data) => {
+            const eventData = data[0];
+            // Ignore non-emoji auto-complete actions.
+            if (eventData.marker !== EMOJI_MENTION_MARKER) {
+                return;
+            }
+            // Do not propagate the event.
+            event.stop();
+            // Do nothing when executing after selecting a hint message.
+            if (eventData.mention.id === EMOJI_HINT_OPTION_ID) {
+                return;
+            }
+            // Trigger the picker UI.
+            if (eventData.mention.id === EMOJI_SHOW_ALL_OPTION_ID) {
+                const text = [...eventData.range.getItems()]
+                    .filter(item => item.is('$textProxy'))
+                    .map(item => item.data)
+                    .reduce((result, text) => result + text, '');
+                editor.model.change(writer => {
+                    editor.model.deleteContent(writer.createSelection(eventData.range));
+                });
+                const emojiPickerPlugin = this._emojiPickerPlugin;
+                emojiPickerPlugin.showUI(text.slice(1));
+                setTimeout(() => {
+                    emojiPickerPlugin.emojiPickerView.focus();
+                });
+            }
+            // Or insert the emoji to editor.
+            else {
+                editor.execute('insertText', {
+                    text: eventData.mention.text,
+                    range: eventData.range
+                });
+            }
+        }, { priority: 'high' });
+    }
+    /**
+     * Returns the `feed()` callback for mention config.
+     */
+    _queryEmojiCallbackFactory() {
+        return (searchQuery) => {
+            // Do not show anything when a query starts with a space.
+            if (searchQuery.startsWith(' ')) {
+                return [];
+            }
+            const emojis = this._emojiRepositoryPlugin.getEmojiByQuery(searchQuery)
+                .map(emoji => {
+                let text = emoji.skins[this._skinTone] || emoji.skins.default;
+                if (this._emojiPickerPlugin) {
+                    text = emoji.skins[this._emojiPickerPlugin.skinTone] || emoji.skins.default;
+                }
+                return {
+                    id: `:${emoji.annotation}:`,
+                    text
+                };
+            });
+            if (!this._emojiPickerPlugin) {
+                return emojis.slice(0, this._emojiDropdownLimit);
+            }
+            const actionItem = {
+                id: searchQuery.length > 1 ? EMOJI_SHOW_ALL_OPTION_ID : EMOJI_HINT_OPTION_ID
+            };
+            return [
+                ...emojis.slice(0, this._emojiDropdownLimit - 1),
+                actionItem
+            ];
+        };
+    }
+}