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

package/dist/index.js

@@ -4,97 +4,8 @@
  */
 import { Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { Typing } from '@ckeditor/ckeditor5-typing/dist/index.js';
-import { FormHeaderView, createDropdown, addListToDropdown, ViewModel, View, addKeyboardHandlingForGrid, ButtonView, FocusCycler } from '@ckeditor/ckeditor5-ui/dist/index.js';
-import { Collection, FocusTracker, KeystrokeHandler, global, CKEditorError } from '@ckeditor/ckeditor5-utils/dist/index.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.
- */ class SpecialCharactersNavigationView extends FormHeaderView {
-    /**
-	 * A dropdown that allows selecting a group of special characters to be displayed.
-	 */ 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, groupNames){
-        super(locale);
-        const t = locale.t;
-        this.set('class', 'ck-special-characters-navigation');
-        this.groupDropdownView = this._createGroupDropdown(groupNames);
-        this.groupDropdownView.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
-        this.label = t('Special characters');
-        this.children.add(this.groupDropdownView);
-    }
-    /**
-	 * Returns the name of the character group currently selected in the {@link #groupDropdownView}.
-	 */ get currentGroupName() {
-        return this.groupDropdownView.value;
-    }
-    /**
-	 * Focuses the character categories dropdown.
-	 */ focus() {
-        this.groupDropdownView.focus();
-    }
-    /**
-	 * Returns a dropdown that allows selecting character groups.
-	 *
-	 * @param groupNames The names of the character groups and their displayed labels.
-	 */ _createGroupDropdown(groupNames) {
-        const locale = this.locale;
-        const t = locale.t;
-        const dropdown = createDropdown(locale);
-        const groupDefinitions = this._getCharacterGroupListItemDefinitions(dropdown, groupNames);
-        const accessibleLabel = t('Character categories');
-        dropdown.set('value', groupDefinitions.first.model.name);
-        dropdown.buttonView.bind('label').to(dropdown, 'value', (value)=>groupNames.get(value));
-        dropdown.buttonView.set({
-            isOn: false,
-            withText: true,
-            tooltip: accessibleLabel,
-            class: [
-                'ck-dropdown__button_label-width_auto'
-            ],
-            ariaLabel: accessibleLabel,
-            ariaLabelledBy: undefined
-        });
-        dropdown.on('execute', (evt)=>{
-            dropdown.value = evt.source.name;
-        });
-        dropdown.delegate('execute').to(this);
-        addListToDropdown(dropdown, groupDefinitions, {
-            ariaLabel: accessibleLabel,
-            role: 'menu'
-        });
-        return dropdown;
-    }
-    /**
-	 * 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.
-	 */ _getCharacterGroupListItemDefinitions(dropdown, groupNames) {
-        const groupDefs = new Collection();
-        for (const [name, label] of groupNames){
-            const model = new ViewModel({
-                name,
-                label,
-                withText: true,
-                role: 'menuitemradio'
-            });
-            model.bind('isOn').to(dropdown, 'value', (value)=>value === model.name);
-            groupDefs.add({
-                type: 'button',
-                model
-            });
-        }
-        return groupDefs;
-    }
-}
+import { View, addKeyboardHandlingForGrid, ButtonView, FocusCycler, LabeledFieldView, createLabeledDropdown, ViewModel, addListToDropdown, Dialog, MenuBarMenuListItemButtonView, DialogViewPosition } from '@ckeditor/ckeditor5-ui/dist/index.js';
+import { FocusTracker, KeystrokeHandler, global, Collection, CKEditorError } from '@ckeditor/ckeditor5-utils/dist/index.js';
 
 /**
  * A grid of character tiles. It allows browsing special characters and selecting the character to
@@ -309,8 +220,8 @@ import { Collection, FocusTracker, KeystrokeHandler, global, CKEditorError } fro
 	 * Helps cycling over focusable {@link #items} in the view.
 	 */ _focusCycler;
     /**
-	 * An instance of the `SpecialCharactersNavigationView`.
-	 */ navigationView;
+	 * An instance of the `SpecialCharactersCategoriesView`.
+	 */ categoriesView;
     /**
 	 * An instance of the `CharacterGridView`.
 	 */ gridView;
@@ -319,9 +230,9 @@ import { Collection, FocusTracker, KeystrokeHandler, global, CKEditorError } fro
 	 */ infoView;
     /**
 	 * 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();
@@ -339,7 +250,7 @@ import { Collection, FocusTracker, KeystrokeHandler, global, CKEditorError } fro
         this.setTemplate({
             tag: 'div',
             children: [
-                this.navigationView,
+                this.categoriesView,
                 this.gridView,
                 this.infoView
             ],
@@ -349,14 +260,14 @@ import { Collection, FocusTracker, KeystrokeHandler, global, CKEditorError } fro
                 tabindex: '-1'
             }
         });
-        this.items.add(this.navigationView.groupDropdownView.buttonView);
+        this.items.add(this.categoriesView);
         this.items.add(this.gridView);
     }
     /**
 	 * @inheritDoc
 	 */ 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);
@@ -371,12 +282,97 @@ import { Collection, FocusTracker, KeystrokeHandler, global, CKEditorError } fro
     /**
 	 * Focuses the first focusable in {@link #items}.
 	 */ focus() {
-        this.navigationView.focus();
+        this._focusCycler.focusFirst();
     }
 }
 
 var specialCharactersIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 2.5a7.47 7.47 0 0 1 4.231 1.31 7.268 7.268 0 0 1 2.703 3.454 7.128 7.128 0 0 1 .199 4.353c-.39 1.436-1.475 2.72-2.633 3.677h2.013c0-.226.092-.443.254-.603a.876.876 0 0 1 1.229 0c.163.16.254.377.254.603v.853c0 .209-.078.41-.22.567a.873.873 0 0 1-.547.28l-.101.006h-4.695a.517.517 0 0 1-.516-.518v-1.265c0-.21.128-.398.317-.489a5.601 5.601 0 0 0 2.492-2.371 5.459 5.459 0 0 0 .552-3.693 5.53 5.53 0 0 0-1.955-3.2A5.71 5.71 0 0 0 10 4.206 5.708 5.708 0 0 0 6.419 5.46 5.527 5.527 0 0 0 4.46 8.663a5.457 5.457 0 0 0 .554 3.695 5.6 5.6 0 0 0 2.497 2.37.55.55 0 0 1 .317.49v1.264c0 .286-.23.518-.516.518H2.618a.877.877 0 0 1-.614-.25.845.845 0 0 1-.254-.603v-.853c0-.226.091-.443.254-.603a.876.876 0 0 1 1.228 0c.163.16.255.377.255.603h1.925c-1.158-.958-2.155-2.241-2.545-3.678a7.128 7.128 0 0 1 .199-4.352 7.268 7.268 0 0 1 2.703-3.455A7.475 7.475 0 0 1 10 2.5z\"/></svg>";
 
+/**
+ * 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.
+ */ 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 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'
+        });
+    }
+}
+
 const ALL_SPECIAL_CHARACTERS_GROUP = 'All';
 /**
  * The special characters feature.
@@ -396,7 +392,8 @@ const ALL_SPECIAL_CHARACTERS_GROUP = 'All';
 	 * @inheritDoc
 	 */ static get requires() {
         return [
-            Typing
+            Typing,
+            Dialog
         ];
     }
     /**
@@ -417,37 +414,15 @@ const ALL_SPECIAL_CHARACTERS_GROUP = 'All';
 	 * @inheritDoc
 	 */ 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);
         });
     }
     /**
@@ -539,8 +514,8 @@ const ALL_SPECIAL_CHARACTERS_GROUP = 'All';
     /**
 	 * Initializes the dropdown, used for lazy loading.
 	 *
-	 * @returns An object with `navigationView`, `gridView` and `infoView` properties, containing UI parts.
-	 */ _createDropdownPanelContent(locale, dropdownView) {
+	 * @returns An object with `categoriesView`, `gridView` and `infoView` properties, containing UI parts.
+	 */ _createDropdownPanelContent(locale) {
         const groupEntries = Array.from(this.getGroups()).map((name)=>[
                 name,
                 this._groups.get(name).label
@@ -554,10 +529,9 @@ const ALL_SPECIAL_CHARACTERS_GROUP = 'All';
             ],
             ...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);
         });
@@ -565,17 +539,61 @@ const ALL_SPECIAL_CHARACTERS_GROUP = 'All';
             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);
+        this._updateGrid(categoriesView.currentGroupName, gridView);
         return {
-            navigationView,
+            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
+        });
+    }
 }
 
 /**