@ckeditor/ckeditor5-emoji 0.0.1 → 44.2.0-alpha.0

package/src/ui/emojipickerview.js

@@ -0,0 +1,172 @@
+/**
+ * @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/ui/emojipickerview
+ */
+import { FocusCycler, SearchInfoView, View } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
+import EmojiGridView from './emojigridview.js';
+import EmojiCategoriesView from './emojicategoriesview.js';
+import EmojiSearchView from './emojisearchview.js';
+import EmojiToneView from './emojitoneview.js';
+/**
+ * A view that glues pieces of the emoji panel together.
+ */
+export default class EmojiPickerView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale, { emojiCategories, getEmojiByQuery, skinTone, skinTones }) {
+        super(locale);
+        const categoryName = emojiCategories[0].title;
+        this.gridView = new EmojiGridView(locale, {
+            categoryName,
+            emojiCategories,
+            getEmojiByQuery,
+            skinTone
+        });
+        this.infoView = new SearchInfoView();
+        this.searchView = new EmojiSearchView(locale, {
+            gridView: this.gridView,
+            resultsView: this.infoView
+        });
+        this.categoriesView = new EmojiCategoriesView(locale, {
+            emojiCategories,
+            categoryName
+        });
+        this.toneView = new EmojiToneView(locale, {
+            skinTone,
+            skinTones
+        });
+        this.items = this.createCollection([
+            this.searchView,
+            this.toneView,
+            this.categoriesView,
+            this.gridView,
+            this.infoView
+        ]);
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this.focusCycler = new FocusCycler({
+            focusables: this.items,
+            focusTracker: this.focusTracker,
+            keystrokeHandler: this.keystrokes,
+            actions: {
+                focusPrevious: 'shift + tab',
+                focusNext: 'tab'
+            }
+        });
+        this.setTemplate({
+            tag: 'div',
+            children: [
+                {
+                    tag: 'div',
+                    children: [
+                        this.searchView,
+                        this.toneView
+                    ],
+                    attributes: {
+                        class: ['ck', 'ck-emoji__search']
+                    }
+                },
+                this.categoriesView,
+                this.gridView,
+                {
+                    tag: 'div',
+                    children: [
+                        this.infoView
+                    ],
+                    attributes: {
+                        class: ['ck', 'ck-search__results']
+                    }
+                }
+            ],
+            attributes: {
+                tabindex: '-1',
+                class: ['ck', 'ck-emoji', 'ck-search']
+            }
+        });
+        this._setupEventListeners();
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.focusTracker.add(this.searchView.element);
+        this.focusTracker.add(this.toneView.element);
+        this.focusTracker.add(this.categoriesView.element);
+        this.focusTracker.add(this.gridView.element);
+        this.focusTracker.add(this.infoView.element);
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+     * Focuses the search input.
+     */
+    focus() {
+        this.searchView.focus();
+    }
+    /**
+     * Initializes interactions between sub-views.
+     */
+    _setupEventListeners() {
+        const t = this.locale.t;
+        // Disable the category switcher when filtering by a query.
+        this.searchView.on('search', (evt, data) => {
+            if (data.query) {
+                this.categoriesView.disableCategories();
+            }
+            else {
+                this.categoriesView.enableCategories();
+            }
+        });
+        // Show a user-friendly message depending on the search query.
+        this.searchView.on('search', (evt, data) => {
+            if (data.query.length === 1) {
+                this.infoView.set({
+                    primaryText: t('Keep on typing to see the emoji.'),
+                    secondaryText: t('The query must contain at least two characters.'),
+                    isVisible: true
+                });
+            }
+            else if (!data.resultsCount) {
+                this.infoView.set({
+                    primaryText: t('No emojis were found matching "%0".', data.query),
+                    secondaryText: t('Please try a different phrase or check the spelling.'),
+                    isVisible: true
+                });
+            }
+            else {
+                this.infoView.set({
+                    isVisible: false
+                });
+            }
+        });
+        // Emit an update event to react to balloon dimensions changes.
+        this.searchView.on('search', () => {
+            this.fire('update');
+        });
+        // Update the grid of emojis when the selected category is changed.
+        this.categoriesView.on('change:categoryName', (ev, args, categoryName) => {
+            this.gridView.categoryName = categoryName;
+            this.searchView.search('');
+        });
+        // Update the grid of emojis when the selected skin tone is changed.
+        // In such a case, the displayed emoji should use an updated skin tone value.
+        this.toneView.on('change:skinTone', (evt, propertyName, newValue) => {
+            this.gridView.skinTone = newValue;
+            this.searchView.search(this.searchView.getInputValue());
+        });
+    }
+}

package/src/ui/emojisearchview.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @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 { SearchTextView, View, type SearchInfoView } from 'ckeditor5/src/ui.js';
+import type { Locale } from 'ckeditor5/src/utils.js';
+import type EmojiGridView from './emojigridview.js';
+/**
+ * A view responsible for providing an input element that allows filtering emoji by the provided query.
+ */
+export default class EmojiSearchView extends View {
+    /**
+     * The find in text input view that stores the searched string.
+     */
+    readonly inputView: SearchTextView;
+    /**
+     * An instance of the `EmojiGridView`.
+     */
+    readonly gridView: EmojiGridView;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: Locale, { gridView, resultsView }: {
+        gridView: EmojiGridView;
+        resultsView: SearchInfoView;
+    });
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Searches the {@link #gridView} for the given query.
+     *
+     * @param query The search query string.
+     */
+    search(query: string): void;
+    /**
+     * Allows defining the default value in the search text field.
+     *
+     * @param value The new value.
+     */
+    setInputValue(value: string): void;
+    /**
+     * Returns an input provided by a user in the search text field.
+     */
+    getInputValue(): string;
+    /**
+     * @inheritDoc
+     */
+    focus(): void;
+}

package/src/ui/emojisearchview.js

@@ -0,0 +1,89 @@
+/**
+ * @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/ui/emojisearchview
+ */
+import { escapeRegExp } from 'lodash-es';
+import { createLabeledInputText, SearchTextView, View } from 'ckeditor5/src/ui.js';
+/**
+ * A view responsible for providing an input element that allows filtering emoji by the provided query.
+ */
+export default class EmojiSearchView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale, { gridView, resultsView }) {
+        super(locale);
+        this.gridView = gridView;
+        const t = locale.t;
+        this.inputView = new SearchTextView(this.locale, {
+            queryView: {
+                label: t('Find an emoji (min. 2 characters)'),
+                creator: createLabeledInputText
+            },
+            filteredView: this.gridView,
+            infoView: {
+                instance: resultsView
+            }
+        });
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-search'
+                ],
+                tabindex: '-1'
+            },
+            children: [
+                this.inputView.queryView
+            ]
+        });
+        // Pass through the `search` event to handle it by a parent view.
+        this.inputView.delegate('search').to(this);
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.inputView.destroy();
+    }
+    /**
+     * Searches the {@link #gridView} for the given query.
+     *
+     * @param query The search query string.
+     */
+    search(query) {
+        const regExp = query ? new RegExp(escapeRegExp(query), 'ig') : null;
+        const filteringResults = this.gridView.filter(regExp);
+        this.inputView.fire('search', { query, ...filteringResults });
+    }
+    /**
+     * Allows defining the default value in the search text field.
+     *
+     * @param value The new value.
+     */
+    setInputValue(value) {
+        if (!value) {
+            this.inputView.queryView.fieldView.reset();
+        }
+        else {
+            this.inputView.queryView.fieldView.value = value;
+        }
+    }
+    /**
+     * Returns an input provided by a user in the search text field.
+     */
+    getInputValue() {
+        return this.inputView.queryView.fieldView.element.value;
+    }
+    /**
+     * @inheritDoc
+     */
+    focus() {
+        this.inputView.focus();
+    }
+}

package/src/ui/emojitoneview.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @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/ui/emojitoneview
+ */
+import { View, type DropdownView } from 'ckeditor5/src/ui.js';
+import { type Locale } from 'ckeditor5/src/utils.js';
+import type { SkinToneId } from '../emojiconfig.js';
+import type { SkinTone } from '../emojirepository.js';
+import '../../theme/emojitone.css';
+/**
+ * A view responsible for selecting a skin tone for an emoji.
+ */
+export default class EmojiToneView extends View {
+    /**
+     * Active skin tone.
+     *
+     * @observable
+     */
+    skinTone: SkinToneId;
+    /**
+     * A dropdown element for selecting an active skin tone.
+     */
+    readonly dropdownView: DropdownView;
+    /**
+     * An array of available skin tones.
+     */
+    private readonly _skinTones;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: Locale, { skinTone, skinTones }: {
+        skinTone: SkinToneId;
+        skinTones: Array<SkinTone>;
+    });
+    /**
+     * @inheritDoc
+     */
+    focus(): void;
+    /**
+     * Helper method for receiving an object describing the active skin tone.
+     */
+    private _getSkinTone;
+}

package/src/ui/emojitoneview.js

@@ -0,0 +1,89 @@
+/**
+ * @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/ui/emojitoneview
+ */
+import { createDropdown, addListToDropdown, View, ViewModel } from 'ckeditor5/src/ui.js';
+import { Collection } from 'ckeditor5/src/utils.js';
+import '../../theme/emojitone.css';
+/**
+ * A view responsible for selecting a skin tone for an emoji.
+ */
+export default class EmojiToneView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale, { skinTone, skinTones }) {
+        super(locale);
+        this.set('skinTone', skinTone);
+        this._skinTones = skinTones;
+        const t = locale.t;
+        const accessibleLabel = t('Select skin tone');
+        const dropdownView = createDropdown(locale);
+        const itemDefinitions = new Collection();
+        for (const { id, icon, tooltip } of this._skinTones) {
+            const def = {
+                type: 'button',
+                model: new ViewModel({
+                    value: id,
+                    label: icon,
+                    ariaLabel: tooltip,
+                    tooltip,
+                    tooltipPosition: 'e',
+                    role: 'menuitemradio',
+                    withText: true,
+                    // To improve accessibility, disconnect a button and its label connection so that screen
+                    // readers can read the `[aria-label]` attribute directly from the more descriptive button.
+                    ariaLabelledBy: undefined
+                })
+            };
+            def.model.bind('isOn').to(this, 'skinTone', value => value === id);
+            itemDefinitions.add(def);
+        }
+        addListToDropdown(dropdownView, itemDefinitions, {
+            ariaLabel: accessibleLabel,
+            role: 'menu'
+        });
+        dropdownView.buttonView.set({
+            label: this._getSkinTone().icon,
+            ariaLabel: accessibleLabel,
+            ariaLabelledBy: undefined,
+            isOn: false,
+            withText: true,
+            tooltip: accessibleLabel
+        });
+        this.dropdownView = dropdownView;
+        // Execute command when an item from the dropdown is selected.
+        this.listenTo(dropdownView, 'execute', evt => {
+            this.skinTone = evt.source.value;
+        });
+        dropdownView.buttonView.bind('label').to(this, 'skinTone', () => {
+            return this._getSkinTone().icon;
+        });
+        dropdownView.buttonView.bind('ariaLabel').to(this, 'skinTone', () => {
+            // Render a current state, but also what the dropdown does.
+            return `${this._getSkinTone().tooltip}, ${accessibleLabel}`;
+        });
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: ['ck', 'ck-emoji__skin-tone']
+            },
+            children: [dropdownView]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    focus() {
+        this.dropdownView.buttonView.focus();
+    }
+    /**
+     * Helper method for receiving an object describing the active skin tone.
+     */
+    _getSkinTone() {
+        return this._skinTones.find(tone => tone.id === this.skinTone);
+    }
+}

package/theme/emojicategories.css

@@ -0,0 +1,29 @@
+/*
+ * 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
+ */
+
+.ck.ck-emoji__categories-list {
+	display: flex;
+	justify-content: space-between;
+	margin: 0 var(--ck-spacing-large);
+
+	> .ck.ck-button.ck-button_with-text {
+		border-width: 0;
+		border-bottom-width: 2px;
+		border-bottom-style: solid;
+		border-bottom-color: transparent;
+		padding: 0;
+		font-size: var(--ck-font-size-big);
+		min-width: var(--ck-font-size-big);
+		min-height: var(--ck-font-size-big);
+
+		&.ck-emoji__category-item.ck-on {
+			border-bottom-color: var(--ck-color-base-active);
+		}
+
+		> span {
+			margin: auto;
+		}
+	}
+}

package/theme/emojigrid.css

@@ -0,0 +1,55 @@
+/*
+ * 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
+ */
+
+:root {
+	--ck-emoji-grid-tile-size: 27px;
+}
+
+.ck.ck-emoji {
+	& .ck.ck-emoji__tiles {
+		max-width: 100%;
+		max-height: 265px;
+
+		overflow-y: auto;
+		overflow-x: hidden;
+		border-top: 1px solid var(--ck-color-base-border);
+
+		& .ck-emoji__grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(var(--ck-emoji-grid-tile-size), 1fr));
+			margin: var(--ck-spacing-standard) var(--ck-spacing-large);
+			grid-gap: var(--ck-spacing-small);
+		}
+
+		& .ck-emoji__tile {
+			width: var(--ck-emoji-grid-tile-size);
+			height: var(--ck-emoji-grid-tile-size);
+			min-width: var(--ck-emoji-grid-tile-size);
+			min-height: var(--ck-emoji-grid-tile-size);
+			font-size: 1.5em;
+			padding: 0;
+			transition: .2s ease box-shadow;
+			border: 0;
+
+			@media (prefers-reduced-motion: reduce) {
+				transition: none;
+			}
+
+			&:focus:not(.ck-disabled),
+			&:hover:not(.ck-disabled) {
+				/* Disable the default .ck-button's border ring. */
+				border: 0;
+				box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
+			}
+
+			/* Make sure the glyph is rendered in the center of the button */
+			& .ck-button__label {
+				line-height: var(--ck-emoji-grid-tile-size);
+				width: 100%;
+				text-align: center;
+			}
+		}
+	}
+}

package/theme/emojipicker.css

@@ -0,0 +1,32 @@
+/*
+ * 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
+ */
+
+.ck.ck-emoji {
+	width: 320px;
+}
+
+.ck .ck.ck-emoji__search {
+	display: flex;
+	padding: var(--ck-spacing-large);
+	padding-bottom: var(--ck-spacing-medium);
+	justify-content: space-between;
+	align-items: center;
+}
+
+/*
+ * Classes used by the "fake visual selection" displayed in the content when an input
+ * in the emoji picker UI has focus (the browser does not render the native selection in this state).
+ */
+.ck .ck-fake-emoji-selection {
+	background: var(--ck-color-link-fake-selection);
+}
+
+/* A collapsed fake visual selection. */
+.ck .ck-fake-emoji-selection_collapsed {
+	height: 100%;
+	border-right: 1px solid var(--ck-color-base-text);
+	margin-right: -1px;
+	outline: solid 1px hsla(0, 0%, 100%, .5);
+}

package/theme/emojitone.css

@@ -0,0 +1,21 @@
+/*
+ * 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
+ */
+
+.ck.ck-emoji__skin-tone {
+	margin-left: var(--ck-spacing-standard);
+
+	> .ck.ck-dropdown {
+
+		.ck.ck-list__item {
+			min-width: 1em;
+		}
+
+		.ck-button.ck-dropdown__button {
+			.ck-button__label {
+				width: initial;
+			}
+		}
+	}
+}