@ckeditor/ckeditor5-special-characters 39.0.1 → 40.0.0

package/src/ui/charactergridview.js

@@ -1,129 +1,129 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module special-characters/ui/charactergridview
- */
-import { View, ButtonView, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui';
-import { KeystrokeHandler, FocusTracker, global } from 'ckeditor5/src/utils';
-import '../../theme/charactergrid.css';
-/**
- * A grid of character tiles. It allows browsing special characters and selecting the character to
- * be inserted into the content.
- */
-export default class CharacterGridView extends View {
-    /**
-     * 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();
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module special-characters/ui/charactergridview
+ */
+import { View, ButtonView, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui';
+import { KeystrokeHandler, FocusTracker, global } from 'ckeditor5/src/utils';
+import '../../theme/charactergrid.css';
+/**
+ * A grid of character tiles. It allows browsing special characters and selecting the character to
+ * be inserted into the content.
+ */
+export default class CharacterGridView extends View {
+    /**
+     * 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.d.ts

@@ -1,35 +1,35 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module special-characters/ui/characterinfoview
- */
-import type { Locale } from 'ckeditor5/src/utils';
-import { View } from 'ckeditor5/src/ui';
-import '../../theme/characterinfo.css';
-/**
- * The view displaying detailed information about a special character glyph, e.g. upon
- * hovering it with a mouse.
- */
-export default class CharacterInfoView extends View<HTMLDivElement> {
-    /**
-     * The character whose information is displayed by the view. For instance, "∑" or "¿".
-     *
-     * @observable
-     */
-    character: string | null;
-    /**
-     * The name of the {@link #character}. For instance, "N-ary summation" or "Inverted question mark".
-     *
-     * @observable
-     */
-    name: string | null;
-    /**
-     * The "Unicode string" of the {@link #character}. For instance "U+0061".
-     *
-     * @observable
-     */
-    readonly code: string;
-    constructor(locale: Locale);
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module special-characters/ui/characterinfoview
+ */
+import type { Locale } from 'ckeditor5/src/utils';
+import { View } from 'ckeditor5/src/ui';
+import '../../theme/characterinfo.css';
+/**
+ * The view displaying detailed information about a special character glyph, e.g. upon
+ * hovering it with a mouse.
+ */
+export default class CharacterInfoView extends View<HTMLDivElement> {
+    /**
+     * The character whose information is displayed by the view. For instance, "∑" or "¿".
+     *
+     * @observable
+     */
+    character: string | null;
+    /**
+     * The name of the {@link #character}. For instance, "N-ary summation" or "Inverted question mark".
+     *
+     * @observable
+     */
+    name: string | null;
+    /**
+     * The "Unicode string" of the {@link #character}. For instance "U+0061".
+     *
+     * @observable
+     */
+    readonly code: string;
+    constructor(locale: Locale);
+}

package/src/ui/characterinfoview.js

@@ -1,71 +1,71 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-import { View } from 'ckeditor5/src/ui';
-import '../../theme/characterinfo.css';
-/**
- * The view displaying detailed information about a special character glyph, e.g. upon
- * hovering it with a mouse.
- */
-export default 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);
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { View } from 'ckeditor5/src/ui';
+import '../../theme/characterinfo.css';
+/**
+ * The view displaying detailed information about a special character glyph, e.g. upon
+ * hovering it with a mouse.
+ */
+export default 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/specialcharactersnavigationview.d.ts

@@ -1,59 +1,59 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module special-characters/ui/specialcharactersnavigationview
- */
-import { type Locale } from 'ckeditor5/src/utils';
-import { FormHeaderView, type DropdownView } from 'ckeditor5/src/ui';
-/**
- * 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.
- */
-export default class SpecialCharactersNavigationView extends FormHeaderView {
-    /**
-     * A dropdown that allows selecting a group of special characters to be displayed.
-     */
-    groupDropdownView: GroupDropdownView;
-    /**
-     * Creates an instance of the {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
-     * class.
-     *
-     * @param locale The localization services instance.
-     * @param groupNames The names of the character groups and their displayed labels.
-     */
-    constructor(locale: Locale, groupNames: GroupNames);
-    /**
-     * Returns the name of the character group currently selected in the {@link #groupDropdownView}.
-     */
-    get currentGroupName(): string;
-    /**
-     * Focuses the character categories dropdown.
-     */
-    focus(): void;
-    /**
-     * Returns a dropdown that allows selecting character groups.
-     *
-     * @param groupNames The names of the character groups and their displayed labels.
-     */
-    private _createGroupDropdown;
-    /**
-     * Returns list item definitions to be used in the character group dropdown
-     * representing specific character groups.
-     *
-     * @param dropdown Dropdown view element
-     * @param groupNames The names of the character groups and their displayed labels.
-     */
-    private _getCharacterGroupListItemDefinitions;
-}
-/**
- * The names of the character groups and their displayed labels.
- */
-export type GroupNames = Map<string, string>;
-/**
- * `DropdownView` with additional field for the name of the currectly selected character group.
- */
-export type GroupDropdownView = DropdownView & {
-    value: string;
-};
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module special-characters/ui/specialcharactersnavigationview
+ */
+import { type Locale } from 'ckeditor5/src/utils';
+import { FormHeaderView, type DropdownView } from 'ckeditor5/src/ui';
+/**
+ * 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.
+ */
+export default class SpecialCharactersNavigationView extends FormHeaderView {
+    /**
+     * A dropdown that allows selecting a group of special characters to be displayed.
+     */
+    groupDropdownView: GroupDropdownView;
+    /**
+     * Creates an instance of the {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
+     * class.
+     *
+     * @param locale The localization services instance.
+     * @param groupNames The names of the character groups and their displayed labels.
+     */
+    constructor(locale: Locale, groupNames: GroupNames);
+    /**
+     * Returns the name of the character group currently selected in the {@link #groupDropdownView}.
+     */
+    get currentGroupName(): string;
+    /**
+     * Focuses the character categories dropdown.
+     */
+    focus(): void;
+    /**
+     * Returns a dropdown that allows selecting character groups.
+     *
+     * @param groupNames The names of the character groups and their displayed labels.
+     */
+    private _createGroupDropdown;
+    /**
+     * Returns list item definitions to be used in the character group dropdown
+     * representing specific character groups.
+     *
+     * @param dropdown Dropdown view element
+     * @param groupNames The names of the character groups and their displayed labels.
+     */
+    private _getCharacterGroupListItemDefinitions;
+}
+/**
+ * The names of the character groups and their displayed labels.
+ */
+export type GroupNames = Map<string, string>;
+/**
+ * `DropdownView` with additional field for the name of the currectly selected character group.
+ */
+export type GroupDropdownView = DropdownView & {
+    value: string;
+};