@ckeditor/ckeditor5-emoji 0.0.0-nightly-20250217.0 → 0.0.1

package/src/emojimention.js

@@ -1,210 +0,0 @@
-/**
- * @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');
-        this._setupMentionConfiguration(editor);
-    }
-    /**
-     * Initializes the configuration for emojis in the mention feature.
-     * If the marker used by emoji mention is already registered, it displays a warning.
-     * If emoji mention configuration is detected, it does not register it for a second time.
-     */
-    _setupMentionConfiguration(editor) {
-        const mergeFieldsPrefix = editor.config.get('mergeFields.prefix');
-        const mentionFeedsConfigs = editor.config.get('mention.feeds');
-        const isEmojiMarkerUsedByMergeFields = mergeFieldsPrefix ? mergeFieldsPrefix[0] === EMOJI_MENTION_MARKER : false;
-        const isEmojiMarkerUsedByMention = mentionFeedsConfigs
-            .filter(config => !config._isEmojiMarker)
-            .some(config => config.marker === EMOJI_MENTION_MARKER);
-        if (isEmojiMarkerUsedByMention || isEmojiMarkerUsedByMergeFields) {
-            /**
-             * 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;
-        }
-        const isEmojiConfigDefined = mentionFeedsConfigs.some(config => config._isEmojiMarker);
-        if (isEmojiConfigDefined) {
-            return;
-        }
-        const emojiMentionFeedConfig = {
-            _isEmojiMarker: true,
-            marker: EMOJI_MENTION_MARKER,
-            dropdownLimit: this._emojiDropdownLimit,
-            itemRenderer: this._customItemRendererFactory(this.editor.t),
-            feed: this._queryEmojiCallbackFactory()
-        };
-        this.editor.config.set('mention.feeds', [...mentionFeedsConfigs, emojiMentionFeedConfig]);
-    }
-    /**
-     * @inheritDoc
-     */
-    async init() {
-        const editor = this.editor;
-        this.emojiPickerPlugin = editor.plugins.has('EmojiPicker') ? editor.plugins.get('EmojiPicker') : null;
-        this.emojiRepositoryPlugin = editor.plugins.get('EmojiRepository');
-        this._isEmojiRepositoryAvailable = await this.emojiRepositoryPlugin.isReady();
-        // Override the `mention` command listener if the emoji repository is ready.
-        if (this._isEmojiRepositoryAvailable) {
-            editor.once('ready', this._overrideMentionExecuteListener.bind(this));
-        }
-    }
-    /**
-     * 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 [];
-            }
-            // Do not show anything when a query starts with a marker character.
-            if (searchQuery.startsWith(EMOJI_MENTION_MARKER)) {
-                return [];
-            }
-            // If the repository plugin is not available, return an empty feed to avoid confusion. See: #17842.
-            if (!this._isEmojiRepositoryAvailable) {
-                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
-            ];
-        };
-    }
-}

package/src/emojipicker.d.ts

@@ -1,97 +0,0 @@
-/**
- * @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/emojipicker
- */
-import { ContextualBalloon, Dialog } from 'ckeditor5/src/ui.js';
-import { Plugin } from 'ckeditor5/src/core.js';
-import { Typing } from 'ckeditor5/src/typing.js';
-import EmojiRepository from './emojirepository.js';
-import EmojiPickerView from './ui/emojipickerview.js';
-import type { SkinToneId } from './emojiconfig.js';
-import '../theme/emojipicker.css';
-/**
- * The emoji picker plugin.
- *
- * Introduces the `'emoji'` dropdown.
- */
-export default class EmojiPicker extends Plugin {
-    /**
-     * The actions view displayed inside the balloon.
-     */
-    emojiPickerView: EmojiPickerView | undefined;
-    /**
-     * The contextual balloon plugin instance.
-     */
-    balloonPlugin: ContextualBalloon;
-    /**
-     * An instance of the {@link module:emoji/emojirepository~EmojiRepository} plugin.
-     */
-    emojiRepositoryPlugin: EmojiRepository;
-    /**
-     * @inheritDoc
-     */
-    static get requires(): readonly [typeof EmojiRepository, typeof ContextualBalloon, typeof Dialog, typeof Typing];
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "EmojiPicker";
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin(): true;
-    /**
-     * @inheritDoc
-     */
-    init(): Promise<void>;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Represents an active skin tone. Its value depends on the emoji UI plugin.
-     *
-     * Before opening the UI for the first time, the returned value is read from the editor configuration.
-     * Otherwise, it reflects the user's intention.
-     */
-    get skinTone(): SkinToneId;
-    /**
-     * Displays the balloon with the emoji picker.
-     *
-     * @param [searchValue=''] A default query used to filer the grid when opening the UI.
-     */
-    showUI(searchValue?: string): void;
-    /**
-     * Creates a button for toolbar and menu bar that will show the emoji dialog.
-     */
-    private _createButton;
-    /**
-     * Creates an instance of the `EmojiPickerView` class that represents an emoji balloon.
-     */
-    private _createEmojiPickerView;
-    /**
-     * Hides the balloon with the emoji picker.
-     */
-    private _hideUI;
-    /**
-     * Registers converters.
-     */
-    private _setupConversion;
-    /**
-     * Returns positioning options for the {@link #balloonPlugin}. They control the way the balloon is attached
-     * to the target element or selection.
-     */
-    private _getBalloonPositionData;
-    /**
-     * Displays a fake visual selection when the contextual balloon is displayed.
-     *
-     * This adds an 'emoji-picker' marker into the document that is rendered as a highlight on selected text fragment.
-     */
-    private _showFakeVisualSelection;
-    /**
-     * Hides the fake visual selection.
-     */
-    private _hideFakeVisualSelection;
-}

package/src/emojipicker.js

@@ -1,255 +0,0 @@
-/**
- * @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/emojipicker
- */
-import { ButtonView, clickOutsideHandler, ContextualBalloon, Dialog, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
-import { icons, Plugin } from 'ckeditor5/src/core.js';
-import { Typing } from 'ckeditor5/src/typing.js';
-import EmojiCommand from './emojicommand.js';
-import EmojiRepository from './emojirepository.js';
-import EmojiPickerView from './ui/emojipickerview.js';
-import '../theme/emojipicker.css';
-const VISUAL_SELECTION_MARKER_NAME = 'emoji-picker';
-/**
- * The emoji picker plugin.
- *
- * Introduces the `'emoji'` dropdown.
- */
-export default class EmojiPicker extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [EmojiRepository, ContextualBalloon, Dialog, Typing];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'EmojiPicker';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    async init() {
-        const editor = this.editor;
-        this.balloonPlugin = editor.plugins.get('ContextualBalloon');
-        this.emojiRepositoryPlugin = editor.plugins.get('EmojiRepository');
-        // Skip registering a button in the toolbar and list item in the menu bar if the emoji repository is not ready.
-        if (!await this.emojiRepositoryPlugin.isReady()) {
-            return;
-        }
-        const command = new EmojiCommand(editor);
-        editor.commands.add('emoji', command);
-        editor.ui.componentFactory.add('emoji', () => {
-            const button = this._createButton(ButtonView, command);
-            button.set({
-                tooltip: true
-            });
-            return button;
-        });
-        editor.ui.componentFactory.add('menuBar:emoji', () => {
-            return this._createButton(MenuBarMenuListItemButtonView, command);
-        });
-        this._setupConversion();
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        if (this.emojiPickerView) {
-            this.emojiPickerView.destroy();
-        }
-    }
-    /**
-     * Represents an active skin tone. Its value depends on the emoji UI plugin.
-     *
-     * Before opening the UI for the first time, the returned value is read from the editor configuration.
-     * Otherwise, it reflects the user's intention.
-     */
-    get skinTone() {
-        if (!this.emojiPickerView) {
-            return this.editor.config.get('emoji.skinTone');
-        }
-        return this.emojiPickerView.gridView.skinTone;
-    }
-    /**
-     * Displays the balloon with the emoji picker.
-     *
-     * @param [searchValue=''] A default query used to filer the grid when opening the UI.
-     */
-    showUI(searchValue = '') {
-        // Show visual selection on a text when the contextual balloon is displayed.
-        // See #17654.
-        this._showFakeVisualSelection();
-        if (!this.emojiPickerView) {
-            this.emojiPickerView = this._createEmojiPickerView();
-        }
-        if (searchValue) {
-            this.emojiPickerView.searchView.setInputValue(searchValue);
-        }
-        this.emojiPickerView.searchView.search(searchValue);
-        if (!this.balloonPlugin.hasView(this.emojiPickerView)) {
-            this.balloonPlugin.add({
-                view: this.emojiPickerView,
-                position: this._getBalloonPositionData()
-            });
-        }
-        this.emojiPickerView.focus();
-    }
-    /**
-     * Creates a button for toolbar and menu bar that will show the emoji dialog.
-     */
-    _createButton(ViewClass, command) {
-        const buttonView = new ViewClass(this.editor.locale);
-        const t = this.editor.locale.t;
-        buttonView.bind('isEnabled').to(command, 'isEnabled');
-        buttonView.set({
-            label: t('Emoji'),
-            icon: icons.emoji,
-            isToggleable: true
-        });
-        buttonView.on('execute', () => {
-            this.showUI();
-        });
-        return buttonView;
-    }
-    /**
-     * Creates an instance of the `EmojiPickerView` class that represents an emoji balloon.
-     */
-    _createEmojiPickerView() {
-        const emojiPickerView = new EmojiPickerView(this.editor.locale, {
-            emojiCategories: this.emojiRepositoryPlugin.getEmojiCategories(),
-            skinTone: this.editor.config.get('emoji.skinTone'),
-            skinTones: this.emojiRepositoryPlugin.getSkinTones(),
-            getEmojiByQuery: (query) => {
-                return this.emojiRepositoryPlugin.getEmojiByQuery(query);
-            }
-        });
-        // Insert an emoji on a tile click.
-        this.listenTo(emojiPickerView.gridView, 'execute', (evt, data) => {
-            const editor = this.editor;
-            const textToInsert = data.emoji;
-            this._hideUI();
-            editor.execute('insertText', { text: textToInsert });
-        });
-        // Update the balloon position when layout is changed.
-        this.listenTo(emojiPickerView, 'update', () => {
-            if (this.balloonPlugin.visibleView === emojiPickerView) {
-                this.balloonPlugin.updatePosition();
-            }
-        });
-        // Close the panel on `Esc` key press when the **actions have focus**.
-        emojiPickerView.keystrokes.set('Esc', (data, cancel) => {
-            this._hideUI();
-            cancel();
-        });
-        // Close the dialog when clicking outside of it.
-        clickOutsideHandler({
-            emitter: emojiPickerView,
-            contextElements: [this.balloonPlugin.view.element],
-            callback: () => this._hideUI(),
-            activator: () => this.balloonPlugin.visibleView === emojiPickerView
-        });
-        return emojiPickerView;
-    }
-    /**
-     * Hides the balloon with the emoji picker.
-     */
-    _hideUI() {
-        this.balloonPlugin.remove(this.emojiPickerView);
-        this.emojiPickerView.searchView.setInputValue('');
-        this.editor.editing.view.focus();
-        this._hideFakeVisualSelection();
-    }
-    /**
-     * Registers converters.
-     */
-    _setupConversion() {
-        const editor = this.editor;
-        // Renders a fake visual selection marker on an expanded selection.
-        editor.conversion.for('editingDowncast').markerToHighlight({
-            model: VISUAL_SELECTION_MARKER_NAME,
-            view: {
-                classes: ['ck-fake-emoji-selection']
-            }
-        });
-        // Renders a fake visual selection marker on a collapsed selection.
-        editor.conversion.for('editingDowncast').markerToElement({
-            model: VISUAL_SELECTION_MARKER_NAME,
-            view: (data, { writer }) => {
-                if (!data.markerRange.isCollapsed) {
-                    return null;
-                }
-                const markerElement = writer.createUIElement('span');
-                writer.addClass(['ck-fake-emoji-selection', 'ck-fake-emoji-selection_collapsed'], markerElement);
-                return markerElement;
-            }
-        });
-    }
-    /**
-     * Returns positioning options for the {@link #balloonPlugin}. They control the way the balloon is attached
-     * to the target element or selection.
-     */
-    _getBalloonPositionData() {
-        const view = this.editor.editing.view;
-        const viewDocument = view.document;
-        // Set a target position by converting view selection range to DOM.
-        const target = () => view.domConverter.viewRangeToDom(viewDocument.selection.getFirstRange());
-        return {
-            target
-        };
-    }
-    /**
-     * Displays a fake visual selection when the contextual balloon is displayed.
-     *
-     * This adds an 'emoji-picker' marker into the document that is rendered as a highlight on selected text fragment.
-     */
-    _showFakeVisualSelection() {
-        const model = this.editor.model;
-        model.change(writer => {
-            const range = model.document.selection.getFirstRange();
-            if (model.markers.has(VISUAL_SELECTION_MARKER_NAME)) {
-                writer.updateMarker(VISUAL_SELECTION_MARKER_NAME, { range });
-            }
-            else {
-                if (range.start.isAtEnd) {
-                    const startPosition = range.start.getLastMatchingPosition(({ item }) => !model.schema.isContent(item), { boundaries: range });
-                    writer.addMarker(VISUAL_SELECTION_MARKER_NAME, {
-                        usingOperation: false,
-                        affectsData: false,
-                        range: writer.createRange(startPosition, range.end)
-                    });
-                }
-                else {
-                    writer.addMarker(VISUAL_SELECTION_MARKER_NAME, {
-                        usingOperation: false,
-                        affectsData: false,
-                        range
-                    });
-                }
-            }
-        });
-    }
-    /**
-     * Hides the fake visual selection.
-     */
-    _hideFakeVisualSelection() {
-        const model = this.editor.model;
-        if (model.markers.has(VISUAL_SELECTION_MARKER_NAME)) {
-            model.change(writer => {
-                writer.removeMarker(VISUAL_SELECTION_MARKER_NAME);
-            });
-        }
-    }
-}