@ckeditor/ckeditor5-special-characters 42.0.2-alpha.2 → 43.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-special-characters",
-  "version": "42.0.2-alpha.2",
+  "version": "43.0.0-alpha.0",
   "description": "Special characters feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,11 +13,11 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "42.0.2-alpha.2",
-    "@ckeditor/ckeditor5-typing": "42.0.2-alpha.2",
-    "@ckeditor/ckeditor5-ui": "42.0.2-alpha.2",
-    "@ckeditor/ckeditor5-utils": "42.0.2-alpha.2",
-    "ckeditor5": "42.0.2-alpha.2"
+    "ckeditor5": "43.0.0-alpha.0",
+    "@ckeditor/ckeditor5-core": "43.0.0-alpha.0",
+    "@ckeditor/ckeditor5-typing": "43.0.0-alpha.0",
+    "@ckeditor/ckeditor5-ui": "43.0.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "43.0.0-alpha.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",

package/src/specialcharacters.d.ts

@@ -7,6 +7,7 @@
  */
 import { Plugin, type Editor } from 'ckeditor5/src/core.js';
 import { Typing } from 'ckeditor5/src/typing.js';
+import { Dialog } from 'ckeditor5/src/ui.js';
 import '../theme/specialcharacters.css';
 /**
  * The special characters feature.
@@ -29,7 +30,7 @@ export default class SpecialCharacters extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof Typing];
+    static get requires(): readonly [typeof Typing, typeof Dialog];
     /**
      * @inheritDoc
      */
@@ -80,9 +81,14 @@ export default class SpecialCharacters extends Plugin {
     /**
      * Initializes the dropdown, used for lazy loading.
      *
-     * @returns An object with `navigationView`, `gridView` and `infoView` properties, containing UI parts.
+     * @returns An object with `categoriesView`, `gridView` and `infoView` properties, containing UI parts.
      */
     private _createDropdownPanelContent;
+    /**
+     * Creates a button for for menu bar that will show special characetrs dialog.
+     */
+    private _createDialogButton;
+    private _showDialog;
 }
 export interface SpecialCharacterDefinition {
     /**

package/src/specialcharacters.js

@@ -7,14 +7,14 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { Typing } from 'ckeditor5/src/typing.js';
-import { createDropdown } from 'ckeditor5/src/ui.js';
+import { ButtonView, MenuBarMenuListItemButtonView, DialogViewPosition, Dialog } from 'ckeditor5/src/ui.js';
 import { CKEditorError } from 'ckeditor5/src/utils.js';
-import SpecialCharactersNavigationView from './ui/specialcharactersnavigationview.js';
 import CharacterGridView from './ui/charactergridview.js';
 import CharacterInfoView from './ui/characterinfoview.js';
 import SpecialCharactersView from './ui/specialcharactersview.js';
 import specialCharactersIcon from '../theme/icons/specialcharacters.svg';
 import '../theme/specialcharacters.css';
+import SpecialCharactersCategoriesView from './ui/specialcharacterscategoriesview.js';
 const ALL_SPECIAL_CHARACTERS_GROUP = 'All';
 /**
  * The special characters feature.
@@ -26,7 +26,7 @@ export default class SpecialCharacters extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [Typing];
+        return [Typing, Dialog];
     }
     /**
      * @inheritDoc
@@ -49,35 +49,15 @@ export default class SpecialCharacters extends Plugin {
      */
     init() {
         const editor = this.editor;
-        const t = editor.t;
-        const inputCommand = editor.commands.get('insertText');
-        // Add the `specialCharacters` dropdown button to feature components.
-        editor.ui.componentFactory.add('specialCharacters', locale => {
-            const dropdownView = createDropdown(locale);
-            let dropdownPanelContent;
-            dropdownView.buttonView.set({
-                label: t('Special characters'),
-                icon: specialCharactersIcon,
+        editor.ui.componentFactory.add('specialCharacters', () => {
+            const button = this._createDialogButton(ButtonView);
+            button.set({
                 tooltip: true
             });
-            dropdownView.bind('isEnabled').to(inputCommand);
-            // Insert a special character when a tile was clicked.
-            dropdownView.on('execute', (evt, data) => {
-                editor.execute('insertText', { text: data.character });
-                editor.editing.view.focus();
-            });
-            dropdownView.on('change:isOpen', () => {
-                if (!dropdownPanelContent) {
-                    dropdownPanelContent = this._createDropdownPanelContent(locale, dropdownView);
-                    const specialCharactersView = new SpecialCharactersView(locale, dropdownPanelContent.navigationView, dropdownPanelContent.gridView, dropdownPanelContent.infoView);
-                    dropdownView.panelView.children.add(specialCharactersView);
-                }
-                dropdownPanelContent.infoView.set({
-                    character: null,
-                    name: null
-                });
-            });
-            return dropdownView;
+            return button;
+        });
+        editor.ui.componentFactory.add('menuBar:specialCharacters', () => {
+            return this._createDialogButton(MenuBarMenuListItemButtonView);
         });
     }
     /**
@@ -173,9 +153,9 @@ export default class SpecialCharacters extends Plugin {
     /**
      * Initializes the dropdown, used for lazy loading.
      *
-     * @returns An object with `navigationView`, `gridView` and `infoView` properties, containing UI parts.
+     * @returns An object with `categoriesView`, `gridView` and `infoView` properties, containing UI parts.
      */
-    _createDropdownPanelContent(locale, dropdownView) {
+    _createDropdownPanelContent(locale) {
         const groupEntries = Array
             .from(this.getGroups())
             .map(name => ([name, this._groups.get(name).label]));
@@ -185,10 +165,9 @@ export default class SpecialCharacters extends Plugin {
             [ALL_SPECIAL_CHARACTERS_GROUP, this._allSpecialCharactersGroupLabel],
             ...groupEntries
         ]);
-        const navigationView = new SpecialCharactersNavigationView(locale, specialCharsGroups);
+        const categoriesView = new SpecialCharactersCategoriesView(locale, specialCharsGroups);
         const gridView = new CharacterGridView(locale);
         const infoView = new CharacterInfoView(locale);
-        gridView.delegate('execute').to(dropdownView);
         gridView.on('tileHover', (evt, data) => {
             infoView.set(data);
         });
@@ -196,11 +175,54 @@ export default class SpecialCharacters extends Plugin {
             infoView.set(data);
         });
         // Update the grid of special characters when a user changed the character group.
-        navigationView.on('execute', () => {
-            this._updateGrid(navigationView.currentGroupName, gridView);
+        categoriesView.on('change:currentGroupName', (evt, propertyName, newValue) => {
+            this._updateGrid(newValue, gridView);
         });
         // Set the initial content of the special characters grid.
-        this._updateGrid(navigationView.currentGroupName, gridView);
-        return { navigationView, gridView, infoView };
+        this._updateGrid(categoriesView.currentGroupName, gridView);
+        return { categoriesView, gridView, infoView };
+    }
+    /**
+     * Creates a button for for menu bar that will show special characetrs dialog.
+     */
+    _createDialogButton(ButtonClass) {
+        const editor = this.editor;
+        const locale = editor.locale;
+        const buttonView = new ButtonClass(editor.locale);
+        const command = editor.commands.get('insertText');
+        const t = locale.t;
+        const dialogPlugin = this.editor.plugins.get('Dialog');
+        buttonView.set({
+            label: t('Special characters'),
+            icon: specialCharactersIcon
+        });
+        buttonView.bind('isOn').to(dialogPlugin, 'id', id => id === 'specialCharacters');
+        buttonView.bind('isEnabled').to(command, 'isEnabled');
+        buttonView.on('execute', () => {
+            if (dialogPlugin.id === 'specialCharacters') {
+                dialogPlugin.hide();
+                return;
+            }
+            this._showDialog();
+        });
+        return buttonView;
+    }
+    _showDialog() {
+        const editor = this.editor;
+        const dialog = editor.plugins.get('Dialog');
+        const locale = editor.locale;
+        const t = locale.t;
+        const { categoriesView, gridView, infoView } = this._createDropdownPanelContent(locale);
+        const content = new SpecialCharactersView(locale, categoriesView, gridView, infoView);
+        gridView.on('execute', (evt, data) => {
+            editor.execute('insertText', { text: data.character });
+        });
+        dialog.show({
+            id: 'specialCharacters',
+            title: t('Special characters'),
+            className: 'ck-special-characters',
+            content,
+            position: DialogViewPosition.EDITOR_TOP_SIDE
+        });
     }
 }

package/src/ui/specialcharacterscategoriesview.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license Copyright (c) 2003-2024, 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/specialcharacterscategoriesview
+ */
+import { type Locale } from 'ckeditor5/src/utils.js';
+import { View } 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.
+ */
+export default class SpecialCharactersCategoriesView extends View {
+    /**
+     * Currently selected special characters group's name.
+     */
+    currentGroupName: string;
+    private _groupNames;
+    private _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: Locale, groupNames: Map<string, string>);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    focus(): void;
+    /**
+     * Creates dropdown item list, sets up bindings and fills properties.
+     */
+    private _setupDropdown;
+}

package/src/ui/specialcharacterscategoriesview.js

@@ -0,0 +1,94 @@
+/**
+ * @license Copyright (c) 2003-2024, 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/specialcharacterscategoriesview
+ */
+import { Collection } from 'ckeditor5/src/utils.js';
+import { addListToDropdown, createLabeledDropdown, LabeledFieldView, View, ViewModel } 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.
+ */
+export default class SpecialCharactersCategoriesView extends View {
+    /**
+     * 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 ViewModel({
+                    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.d.ts

@@ -9,7 +9,7 @@ import { View, FocusCycler, type ViewCollection, type FocusableView } from 'cked
 import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
 import type CharacterGridView from './charactergridview.js';
 import type CharacterInfoView from './characterinfoview.js';
-import type SpecialCharactersNavigationView from './specialcharactersnavigationview.js';
+import type SpecialCharactersCategoriesView from './specialcharacterscategoriesview.js';
 /**
  * A view that glues pieces of the special characters dropdown panel together:
  *
@@ -35,9 +35,9 @@ export default class SpecialCharactersView extends View<HTMLDivElement> {
      */
     protected readonly _focusCycler: FocusCycler;
     /**
-     * An instance of the `SpecialCharactersNavigationView`.
+     * An instance of the `SpecialCharactersCategoriesView`.
      */
-    navigationView: SpecialCharactersNavigationView;
+    categoriesView: SpecialCharactersCategoriesView;
     /**
      * An instance of the `CharacterGridView`.
      */
@@ -49,7 +49,7 @@ export default class SpecialCharactersView extends View<HTMLDivElement> {
     /**
      * Creates an instance of the `SpecialCharactersView`.
      */
-    constructor(locale: Locale, navigationView: SpecialCharactersNavigationView, gridView: CharacterGridView, infoView: CharacterInfoView);
+    constructor(locale: Locale, categoriesView: SpecialCharactersCategoriesView, gridView: CharacterGridView, infoView: CharacterInfoView);
     /**
      * @inheritDoc
      */

package/src/ui/specialcharactersview.js

@@ -18,9 +18,9 @@ export default class SpecialCharactersView extends View {
     /**
      * Creates an instance of the `SpecialCharactersView`.
      */
-    constructor(locale, navigationView, gridView, infoView) {
+    constructor(locale, categoriesView, gridView, infoView) {
         super(locale);
-        this.navigationView = navigationView;
+        this.categoriesView = categoriesView;
         this.gridView = gridView;
         this.infoView = infoView;
         this.items = this.createCollection();
@@ -38,7 +38,7 @@ export default class SpecialCharactersView extends View {
         this.setTemplate({
             tag: 'div',
             children: [
-                this.navigationView,
+                this.categoriesView,
                 this.gridView,
                 this.infoView
             ],
@@ -48,7 +48,7 @@ export default class SpecialCharactersView extends View {
                 tabindex: '-1'
             }
         });
-        this.items.add(this.navigationView.groupDropdownView.buttonView);
+        this.items.add(this.categoriesView);
         this.items.add(this.gridView);
     }
     /**
@@ -56,7 +56,7 @@ export default class SpecialCharactersView extends View {
      */
     render() {
         super.render();
-        this.focusTracker.add(this.navigationView.groupDropdownView.buttonView.element);
+        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);
@@ -73,6 +73,6 @@ export default class SpecialCharactersView extends View {
      * Focuses the first focusable in {@link #items}.
      */
     focus() {
-        this.navigationView.focus();
+        this._focusCycler.focusFirst();
     }
 }

package/theme/specialcharacters.css

@@ -8,3 +8,84 @@
  * it acts as a message to the builder telling that it should look for the corresponding styles
  * **in the theme** when compiling the editor.
  */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+.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;
+		}
+	}
+}

package/dist/ui/specialcharactersnavigationview.d.ts

@@ -1,63 +0,0 @@
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @license Copyright (c) 2003-2024, 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.js';
-import { FormHeaderView, type DropdownView } 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.
- */
-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;
-};

package/src/ui/specialcharactersnavigationview.d.ts

@@ -1,59 +0,0 @@
-/**
- * @license Copyright (c) 2003-2024, 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.js';
-import { FormHeaderView, type DropdownView } 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.
- */
-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;
-};