@ckeditor/ckeditor5-special-characters 0.0.0-nightly-next-20260125.0 → 0.0.0-nightly-20260126.0

package/src/ui/specialcharacterscategoriesview.js

@@ -0,0 +1,98 @@
+/**
+ * @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/{dist → src}/ui/specialcharactersview.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module special-characters/ui/specialcharactersview
  */
-import { View, FocusCycler, type ViewCollection, type FocusableView } from '@ckeditor/ckeditor5-ui';
-import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
+import { View, FocusCycler, type ViewCollection, type FocusableView } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
 import { type CharacterGridView } from './charactergridview.js';
 import { type CharacterInfoView } from './characterinfoview.js';
 import { type SpecialCharactersCategoriesView } from './specialcharacterscategoriesview.js';

package/src/ui/specialcharactersview.js

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

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

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

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