@ckeditor/ckeditor5-special-characters 0.0.0-nightly-20260116.0 → 0.0.0-nightly-next-20260116.0

package/src/specialcharactersmathematical.js

@@ -1,88 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module special-characters/specialcharactersmathematical
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-/**
- * A plugin that provides special characters for the "Mathematical" category.
- *
- * ```ts
- * ClassicEditor
- *   .create( {
- *     plugins: [ ..., SpecialCharacters, SpecialCharactersMathematical ],
- *   } )
- *   .then( ... )
- *   .catch( ... );
- * ```
- */
-export class SpecialCharactersMathematical extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'SpecialCharactersMathematical';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const t = editor.t;
-        const plugin = editor.plugins.get('SpecialCharacters');
-        plugin.addItems('Mathematical', [
-            { character: '<', title: t('Less-than sign') },
-            { character: '>', title: t('Greater-than sign') },
-            { character: '≤', title: t('Less-than or equal to') },
-            { character: '≥', title: t('Greater-than or equal to') },
-            { character: '–', title: t('En dash') },
-            { character: '—', title: t('Em dash') },
-            { character: '¯', title: t('Macron') },
-            { character: '‾', title: t('Overline') },
-            { character: '°', title: t('Degree sign') },
-            { character: '−', title: t('Minus sign') },
-            { character: '±', title: t('Plus-minus sign') },
-            { character: '÷', title: t('Division sign') },
-            { character: '⁄', title: t('Fraction slash') },
-            { character: '×', title: t('Multiplication sign') },
-            { character: 'ƒ', title: t('Latin small letter f with hook') },
-            { character: '∫', title: t('Integral') },
-            { character: '∑', title: t('N-ary summation') },
-            { character: '∞', title: t('Infinity') },
-            { character: '√', title: t('Square root') },
-            { character: '∼', title: t('Tilde operator') },
-            { character: '≅', title: t('Approximately equal to') },
-            { character: '≈', title: t('Almost equal to') },
-            { character: '≠', title: t('Not equal to') },
-            { character: '≡', title: t('Identical to') },
-            { character: '∈', title: t('Element of') },
-            { character: '∉', title: t('Not an element of') },
-            { character: '∋', title: t('Contains as member') },
-            { character: '∏', title: t('N-ary product') },
-            { character: '∧', title: t('Logical and') },
-            { character: '∨', title: t('Logical or') },
-            { character: '¬', title: t('Not sign') },
-            { character: '∩', title: t('Intersection') },
-            { character: '∪', title: t('Union') },
-            { character: '∂', title: t('Partial differential') },
-            { character: '∀', title: t('For all') },
-            { character: '∃', title: t('There exists') },
-            { character: '∅', title: t('Empty set') },
-            { character: '∇', title: t('Nabla') },
-            { character: '∗', title: t('Asterisk operator') },
-            { character: '∝', title: t('Proportional to') },
-            { character: '∠', title: t('Angle') },
-            { character: '¼', title: t('Vulgar fraction one quarter') },
-            { character: '½', title: t('Vulgar fraction one half') },
-            { character: '¾', title: t('Vulgar fraction three quarters') }
-        ], { label: t('Mathematical') });
-    }
-}

package/src/specialcharacterstext.js

@@ -1,71 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module special-characters/specialcharacterstext
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-/**
- * A plugin that provides special characters for the "Text" category.
- *
- * ```ts
- * ClassicEditor
- *   .create( {
- *     plugins: [ ..., SpecialCharacters, SpecialCharactersText ],
- *   } )
- *   .then( ... )
- *   .catch( ... );
- * ```
- */
-export class SpecialCharactersText extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'SpecialCharactersText';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const t = editor.t;
-        const plugin = editor.plugins.get('SpecialCharacters');
-        plugin.addItems('Text', [
-            { character: '‹', title: t('Single left-pointing angle quotation mark') },
-            { character: '›', title: t('Single right-pointing angle quotation mark') },
-            { character: '«', title: t('Left-pointing double angle quotation mark') },
-            { character: '»', title: t('Right-pointing double angle quotation mark') },
-            { character: '‘', title: t('Left single quotation mark') },
-            { character: '’', title: t('Right single quotation mark') },
-            { character: '“', title: t('Left double quotation mark') },
-            { character: '”', title: t('Right double quotation mark') },
-            { character: '‚', title: t('Single low-9 quotation mark') },
-            { character: '„', title: t('Double low-9 quotation mark') },
-            { character: '¡', title: t('Inverted exclamation mark') },
-            { character: '¿', title: t('Inverted question mark') },
-            { character: '‥', title: t('Two dot leader') },
-            { character: '…', title: t('Horizontal ellipsis') },
-            { character: '‡', title: t('Double dagger') },
-            { character: '‰', title: t('Per mille sign') },
-            { character: '‱', title: t('Per ten thousand sign') },
-            { character: '‼', title: t('Double exclamation mark') },
-            { character: '⁈', title: t('Question exclamation mark') },
-            { character: '⁉', title: t('Exclamation question mark') },
-            { character: '⁇', title: t('Double question mark') },
-            { character: '©', title: t('Copyright sign') },
-            { character: '®', title: t('Registered sign') },
-            { character: '™', title: t('Trade mark sign') },
-            { character: '§', title: t('Section sign') },
-            { character: '¶', title: t('Paragraph sign') },
-            { character: '⁋', title: t('Reversed paragraph sign') }
-        ], { label: t('Text') });
-    }
-}

package/src/ui/charactergridview.js

@@ -1,143 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module special-characters/ui/charactergridview
- */
-import { View, ButtonView, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui.js';
-import { KeystrokeHandler, FocusTracker, global } from 'ckeditor5/src/utils.js';
-import '../../theme/charactergrid.css';
-/**
- * A grid of character tiles. It allows browsing special characters and selecting the character to
- * be inserted into the content.
- *
- * @internal
- */
-export class CharacterGridView extends View {
-    /**
-     * A collection of the child tile views. Each tile represents a particular character.
-     */
-    tiles;
-    /**
-     * Tracks information about the DOM focus in the grid.
-     */
-    focusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    keystrokes;
-    /**
-     * Creates an instance of a character grid containing tiles representing special characters.
-     *
-     * @param locale The localization services instance.
-     */
-    constructor(locale) {
-        super(locale);
-        this.tiles = this.createCollection();
-        this.setTemplate({
-            tag: 'div',
-            children: [
-                {
-                    tag: 'div',
-                    attributes: {
-                        class: [
-                            'ck',
-                            'ck-character-grid__tiles'
-                        ]
-                    },
-                    children: this.tiles
-                }
-            ],
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-character-grid'
-                ]
-            }
-        });
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        addKeyboardHandlingForGrid({
-            keystrokeHandler: this.keystrokes,
-            focusTracker: this.focusTracker,
-            gridItems: this.tiles,
-            numberOfColumns: () => global.window
-                .getComputedStyle(this.element.firstChild) // Responsive .ck-character-grid__tiles
-                .getPropertyValue('grid-template-columns')
-                .split(' ')
-                .length,
-            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
-        });
-    }
-    /**
-     * Creates a new tile for the grid.
-     *
-     * @param character A human-readable character displayed as the label (e.g. "ε").
-     * @param name The name of the character (e.g. "greek small letter epsilon").
-     */
-    createTile(character, name) {
-        const tile = new ButtonView(this.locale);
-        tile.set({
-            label: character,
-            withText: true,
-            class: 'ck-character-grid__tile'
-        });
-        // Labels are vital for the users to understand what character they're looking at.
-        // For now we're using native title attribute for that, see #5817.
-        tile.extendTemplate({
-            attributes: {
-                title: name
-            },
-            on: {
-                mouseover: tile.bindTemplate.to('mouseover'),
-                focus: tile.bindTemplate.to('focus')
-            }
-        });
-        tile.on('mouseover', () => {
-            this.fire('tileHover', { name, character });
-        });
-        tile.on('focus', () => {
-            this.fire('tileFocus', { name, character });
-        });
-        tile.on('execute', () => {
-            this.fire('execute', { name, character });
-        });
-        return tile;
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        for (const item of this.tiles) {
-            this.focusTracker.add(item.element);
-        }
-        this.tiles.on('change', (eventInfo, { added, removed }) => {
-            if (added.length > 0) {
-                for (const item of added) {
-                    this.focusTracker.add(item.element);
-                }
-            }
-            if (removed.length > 0) {
-                for (const item of removed) {
-                    this.focusTracker.remove(item.element);
-                }
-            }
-        });
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-     * Focuses the first focusable in {@link ~CharacterGridView#tiles}.
-     */
-    focus() {
-        this.tiles.first.focus();
-    }
-}

package/src/ui/characterinfoview.js

@@ -1,73 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { View } from 'ckeditor5/src/ui.js';
-import '../../theme/characterinfo.css';
-/**
- * The view displaying detailed information about a special character glyph, e.g. upon
- * hovering it with a mouse.
- *
- * @internal
- */
-export class CharacterInfoView extends View {
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('character', null);
-        this.set('name', null);
-        this.bind('code').to(this, 'character', characterToUnicodeString);
-        this.setTemplate({
-            tag: 'div',
-            children: [
-                {
-                    tag: 'span',
-                    attributes: {
-                        class: [
-                            'ck-character-info__name'
-                        ]
-                    },
-                    children: [
-                        {
-                            // Note: ZWSP to prevent vertical collapsing.
-                            text: bind.to('name', name => name ? name : '\u200B')
-                        }
-                    ]
-                },
-                {
-                    tag: 'span',
-                    attributes: {
-                        class: [
-                            'ck-character-info__code'
-                        ]
-                    },
-                    children: [
-                        {
-                            text: bind.to('code')
-                        }
-                    ]
-                }
-            ],
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-character-info'
-                ]
-            }
-        });
-    }
-}
-/**
- * Converts a character into a "Unicode string", for instance:
- *
- * "$" -> "U+0024"
- *
- * Returns an empty string when the character is `null`.
- */
-function characterToUnicodeString(character) {
-    if (character === null) {
-        return '';
-    }
-    const hexCode = character.codePointAt(0).toString(16);
-    return 'U+' + ('0000' + hexCode).slice(-4);
-}

package/src/ui/specialcharacterscategoriesview.js

@@ -1,98 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module special-characters/ui/specialcharacterscategoriesview
- */
-import { Collection } from 'ckeditor5/src/utils.js';
-import { addListToDropdown, createLabeledDropdown, LabeledFieldView, View, UIModel } from 'ckeditor5/src/ui.js';
-/**
- * A class representing the navigation part of the special characters UI. It is responsible
- * for describing the feature and allowing the user to select a particular character group.
- *
- * @internal
- */
-export class SpecialCharactersCategoriesView extends View {
-    _groupNames;
-    _dropdownView;
-    /**
-     * Creates an instance of the {@link module:special-characters/ui/specialcharacterscategoriesview~SpecialCharactersCategoriesView}
-     * class.
-     *
-     * @param locale The localization services instance.
-     * @param groupNames The names of the character groups.
-     */
-    constructor(locale, groupNames) {
-        super(locale);
-        this.set('currentGroupName', Array.from(groupNames.entries())[0][0]);
-        this._groupNames = groupNames;
-        this._dropdownView = new LabeledFieldView(locale, createLabeledDropdown);
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: ['ck', 'ck-character-categories']
-            },
-            children: [
-                this._dropdownView
-            ]
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this._setupDropdown();
-    }
-    /**
-     * @inheritDoc
-     */
-    focus() {
-        this._dropdownView.focus();
-    }
-    /**
-     * Creates dropdown item list, sets up bindings and fills properties.
-     */
-    _setupDropdown() {
-        const items = new Collection();
-        for (const [name, label] of this._groupNames) {
-            const item = {
-                type: 'button',
-                model: new UIModel({
-                    name,
-                    label,
-                    role: 'menuitemradio',
-                    withText: true
-                })
-            };
-            item.model.bind('isOn').to(this, 'currentGroupName', value => {
-                return value === name;
-            });
-            items.add(item);
-        }
-        const t = this.locale.t;
-        const accessibleLabel = t('Category');
-        this._dropdownView.set({
-            label: accessibleLabel,
-            isEmpty: false
-        });
-        this._dropdownView.fieldView.panelPosition = this.locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
-        this._dropdownView.fieldView.buttonView.set({
-            withText: true,
-            tooltip: accessibleLabel,
-            ariaLabel: accessibleLabel,
-            ariaLabelledBy: undefined,
-            isOn: false
-        });
-        this._dropdownView.fieldView.buttonView.bind('label')
-            .to(this, 'currentGroupName', value => this._groupNames.get(value));
-        this._dropdownView.fieldView.on('execute', ({ source }) => {
-            this.currentGroupName = source.name;
-        });
-        addListToDropdown(this._dropdownView.fieldView, items, {
-            ariaLabel: accessibleLabel,
-            role: 'menu'
-        });
-    }
-}

package/src/ui/specialcharactersview.js

@@ -1,108 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module special-characters/ui/specialcharactersview
- */
-import { View, FocusCycler } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-/**
- * A view that glues pieces of the special characters dropdown panel together:
- *
- * * the navigation view (allows selecting the category),
- * * the grid view (displays characters as a grid),
- * * and the info view (displays detailed info about a specific character).
- *
- * @internal
- */
-export class SpecialCharactersView 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 `SpecialCharactersCategoriesView`.
-     */
-    categoriesView;
-    /**
-     * An instance of the `CharacterGridView`.
-     */
-    gridView;
-    /**
-     * An instance of the `CharacterInfoView`.
-     */
-    infoView;
-    /**
-     * Creates an instance of the `SpecialCharactersView`.
-     */
-    constructor(locale, categoriesView, gridView, infoView) {
-        super(locale);
-        this.categoriesView = categoriesView;
-        this.gridView = gridView;
-        this.infoView = infoView;
-        this.items = this.createCollection();
-        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: [
-                this.categoriesView,
-                this.gridView,
-                this.infoView
-            ],
-            attributes: {
-                // Avoid focus loss when the user clicks the area of the grid that is not a button.
-                // https://github.com/ckeditor/ckeditor5/pull/12319#issuecomment-1231779819
-                tabindex: '-1'
-            }
-        });
-        this.items.add(this.categoriesView);
-        this.items.add(this.gridView);
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this.focusTracker.add(this.categoriesView.element);
-        this.focusTracker.add(this.gridView.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 first focusable in {@link #items}.
-     */
-    focus() {
-        this._focusCycler.focusFirst();
-    }
-}

package/theme/charactergrid.css

@@ -1,12 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck.ck-character-grid {
-	max-width: 100%;
-
-	& .ck-character-grid__tiles {
-		display: grid;
-	}
-}

package/theme/characterinfo.css

@@ -1,9 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck.ck-character-info {
-	display: flex;
-	justify-content: space-between;
-}

package/theme/specialcharacters.css

@@ -1,89 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-/*
- * Note: This file should contain the wireframe styles only. But since there are no such styles,
- * it acts as a message to the builder telling that it should look for the corresponding styles
- * **in the theme** when compiling the editor.
- */
-
-.ck.ck-special-characters {
-	& > .ck-dialog__content > div {
-		width: 350px;
-		max-width: 100%;
-		height: 100%;
-
-		display: grid;
-		grid-column-gap: 0px;
-		grid-row-gap: 0px;
-		grid-template-columns: 1fr;
-		grid-template-rows: auto 1fr auto;
-
-		& > .ck-character-categories {
-			grid-area: 1 / 1 / 2 / 2;
-			padding: var(--ck-spacing-medium) var(--ck-spacing-large);
-
-			& > .ck-labeled-field-view {
-				padding-top: var(--ck-spacing-standard);
-				width: 100%;
-
-				& .ck.ck-labeled-field-view__status {
-					background: var(--ck-color-base-error);
-					color: var(--ck-color-base-background);
-					padding: var(--ck-spacing-small) var(--ck-spacing-medium);
-					min-width: var(--ck-table-properties-min-error-width);
-					text-align: center;
-
-					/* The arrow pointing towards the field. */
-					&::after {
-						border-color: transparent transparent var(--ck-color-base-error) transparent;
-						border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
-						border-style: solid;
-					}
-
-					animation: ck-table-form-labeled-view-status-appear .15s ease both;
-
-					@media (prefers-reduced-motion: reduce) {
-						animation: none;
-					}
-				}
-
-				/* Hide the error balloon when the field is blurred. Makes the experience much more clear. */
-				& .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status {
-					display: none;
-				}
-
-				& > .ck-label {
-					font-size: var(--ck-font-size-tiny);
-					text-align: center;
-				}
-			}
-
-			.ck-dropdown {
-				display: block;
-				width: 100%;
-
-				& > button {
-					&:not(:focus) {
-						border: 1px solid var(--ck-color-base-border);
-					}
-
-					& > span {
-						width: 100%;
-					}
-				}
-			}
-		}
-
-		& > .ck-character-grid {
-			grid-area: 2 / 1 / 3 / 2;
-			max-height: 200px;
-		}
-
-		& > .ck-character-info {
-			grid-area: 3 / 1 / 4 / 2;
-		}
-	}
-}