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

package/src/ui/emojipickerview.js

@@ -1,208 +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/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 {
-    /**
-     * A collection of the focusable children of the view.
-     */
-    items;
-    /**
-     * Tracks information about the DOM focus in the view.
-     */
-    focusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    keystrokes;
-    /**
-     * Helps cycling over focusable {@link #items} in the view.
-     */
-    focusCycler;
-    /**
-     * An instance of the `EmojiSearchView`.
-     */
-    searchView;
-    /**
-     * An instance of the `EmojiToneView`.
-     */
-    toneView;
-    /**
-     * An instance of the `EmojiCategoriesView`.
-     */
-    categoriesView;
-    /**
-     * An instance of the `EmojiGridView`.
-     */
-    gridView;
-    /**
-     * An instance of the `EmojiGridView`.
-     */
-    infoView;
-    /**
-     * @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

@@ -1,51 +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
- */
-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

@@ -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/ui/emojisearchview
- */
-import { escapeRegExp } from 'es-toolkit/compat';
-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 {
-    /**
-     * The find in text input view that stores the searched string.
-     */
-    inputView;
-    /**
-     * An instance of the `EmojiGridView`.
-     */
-    gridView;
-    /**
-     * @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

@@ -1,46 +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/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

@@ -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/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 {
-    /**
-     * A dropdown element for selecting an active skin tone.
-     */
-    dropdownView;
-    /**
-     * An array of available skin tones.
-     */
-    _skinTones;
-    /**
-     * @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

@@ -1,29 +0,0 @@
-/*
- * 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

@@ -1,55 +0,0 @@
-/*
- * 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

@@ -1,32 +0,0 @@
-/*
- * 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

@@ -1,21 +0,0 @@
-/*
- * 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;
-			}
-		}
-	}
-}