@ckeditor/ckeditor5-ui 42.0.2 → 43.0.0-alpha.1

package/src/button/filedialogbuttonview.js

@@ -7,6 +7,7 @@
  */
 import View from '../view.js';
 import ButtonView from './buttonview.js';
+import ListItemButtonView from './listitembuttonview.js';
 /**
  * The file dialog button view.
  *
@@ -31,34 +32,75 @@ import ButtonView from './buttonview.js';
  * } );
  * ```
  */
-export default class FileDialogButtonView extends ButtonView {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        // For backward compatibility.
-        this.buttonView = this;
-        this._fileInputView = new FileInputView(locale);
-        this._fileInputView.bind('acceptedType').to(this);
-        this._fileInputView.bind('allowMultipleFiles').to(this);
-        this._fileInputView.delegate('done').to(this);
-        this.on('execute', () => {
-            this._fileInputView.open();
-        });
-        this.extendTemplate({
-            attributes: {
-                class: 'ck-file-dialog-button'
-            }
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this.children.add(this._fileInputView);
+export default class FileDialogButtonView extends /* #__PURE__ */ FileDialogViewMixin(ButtonView) {
+}
+/**
+ * The file dialog button view used in a lists.
+ *
+ * This component provides a button that opens the native file selection dialog.
+ * It can be used to implement the UI of a file upload feature.
+ *
+* ```ts
+ * const view = new FileDialogListItemButtonView( locale );
+ *
+ * view.set( {
+ * 	acceptedType: 'image/*',
+ * 	allowMultipleFiles: true
+ * 	label: t( 'Insert image' ),
+ * 	icon: imageIcon,
+ * 	tooltip: true
+ * } );
+ *
+ * view.on( 'done', ( evt, files ) => {
+ * 	for ( const file of Array.from( files ) ) {
+ * 		console.log( 'Selected file', file );
+ * 	}
+ * } );
+ * ```
+ */
+export class FileDialogListItemButtonView extends /* #__PURE__ */ FileDialogViewMixin(ListItemButtonView) {
+}
+/**
+ * Mixin function that enhances a base button view class with file dialog functionality. It is used
+ * to create a button view class that opens the native select file dialog when clicked.
+ *
+ * The enhanced view includes a button and a hidden file input. When the button is clicked, the file dialog is opened.
+ * The mixin adds properties and methods to the base class to handle the file selection.
+ *
+ * @param view The base class to be enhanced with file dialog functionality.
+ * @returns A new class that extends the base class and includes the file dialog functionality.
+ */
+function FileDialogViewMixin(view) {
+    class FileDialogView extends view {
+        /**
+         * @inheritDoc
+         */
+        constructor(...args) {
+            super(...args);
+            // For backward compatibility.
+            this.buttonView = this;
+            this._fileInputView = new FileInputView(this.locale);
+            this._fileInputView.bind('acceptedType').to(this);
+            this._fileInputView.bind('allowMultipleFiles').to(this);
+            this._fileInputView.delegate('done').to(this);
+            this.on('execute', () => {
+                this._fileInputView.open();
+            });
+            this.extendTemplate({
+                attributes: {
+                    class: 'ck-file-dialog-button'
+                }
+            });
+        }
+        /**
+         * @inheritDoc
+         */
+        render() {
+            super.render();
+            this.children.add(this._fileInputView);
+        }
     }
+    return FileDialogView;
 }
 /**
  * The hidden file input view class.

package/src/button/listitembuttonview.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @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 ui/button/listitembuttonview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import type ButtonLabel from './buttonlabel.js';
+import type ViewCollection from '../viewcollection.js';
+import ButtonView from './buttonview.js';
+import View from '../view.js';
+import '../../theme/components/button/listitembutton.css';
+/**
+ * Button that is used as dropdown list item entry.
+ */
+export default class ListItemButtonView extends ButtonView {
+    /**
+     * Indicates whether the button view has reserved space for a check holder.
+     *
+     * @observable
+     */
+    hasCheckSpace: boolean;
+    /**
+     * The flag that indicates if the button should render a check holder.
+     *
+     * @internal
+     * @readonly
+     * @observable
+     */
+    _hasCheck: boolean;
+    /**
+     * Holds the view for the check icon of a button list item.
+     */
+    private readonly _checkIconHolderView;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale, labelView?: ButtonLabel);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Renders the check icon if the button is toggleable.
+     */
+    private _watchCheckIconHolderMount;
+}
+export declare class CheckIconHolderView extends View {
+    /**
+     * Collection of child views.
+     */
+    readonly children: ViewCollection<View>;
+    /**
+     * Indicates whether the button is in the "on" state.
+     */
+    isOn: boolean;
+    /**
+     * The view for the check icon of the button list item.
+     */
+    private readonly _checkIconView;
+    /**
+     * @inheritDoc
+     */
+    constructor();
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Renders the check icon if the button is toggleable.
+     */
+    private _watchCheckIconMount;
+    /**
+     * Creates a check icon view.
+     */
+    private _createCheckIconView;
+}

package/src/button/listitembuttonview.js

@@ -0,0 +1,129 @@
+/**
+ * @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
+ */
+import { icons } from '@ckeditor/ckeditor5-core';
+import ButtonView from './buttonview.js';
+import ButtonLabelView from './buttonlabelview.js';
+import IconView from '../icon/iconview.js';
+import View from '../view.js';
+import '../../theme/components/button/listitembutton.css';
+/**
+ * Button that is used as dropdown list item entry.
+ */
+export default class ListItemButtonView extends ButtonView {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale, labelView = new ButtonLabelView()) {
+        super(locale, labelView);
+        /**
+         * Holds the view for the check icon of a button list item.
+         */
+        this._checkIconHolderView = new CheckIconHolderView();
+        this.set({
+            hasCheckSpace: false,
+            _hasCheck: this.isToggleable
+        });
+        const bind = this.bindTemplate;
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-list-item-button',
+                    bind.if('isToggleable', 'ck-list-item-button_toggleable')
+                ]
+            }
+        });
+        this.bind('_hasCheck').to(this, 'hasCheckSpace', this, 'isToggleable', (hasCheckSpace, isToggleable) => hasCheckSpace || isToggleable);
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        if (this._hasCheck) {
+            this.children.add(this._checkIconHolderView, 0);
+        }
+        this._watchCheckIconHolderMount();
+    }
+    /**
+     * Renders the check icon if the button is toggleable.
+     */
+    _watchCheckIconHolderMount() {
+        this._checkIconHolderView
+            .bind('isOn')
+            .to(this, 'isOn', value => this.isToggleable && value);
+        this.on('change:_hasCheck', (evt, propertyName, hasCheck) => {
+            const { children, _checkIconHolderView } = this;
+            if (hasCheck) {
+                children.add(_checkIconHolderView, 0);
+            }
+            else {
+                children.remove(_checkIconHolderView);
+            }
+        });
+    }
+}
+export class CheckIconHolderView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor() {
+        super();
+        /**
+         * The view for the check icon of the button list item.
+         */
+        this._checkIconView = this._createCheckIconView();
+        const bind = this.bindTemplate;
+        this.children = this.createCollection();
+        this.set('isOn', false);
+        this.setTemplate({
+            tag: 'span',
+            children: this.children,
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-list-item-button__check-holder',
+                    bind.to('isOn', isOn => isOn ? 'ck-on' : 'ck-off')
+                ]
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        if (this.isOn) {
+            this.children.add(this._checkIconView, 0);
+        }
+        this._watchCheckIconMount();
+    }
+    /**
+     * Renders the check icon if the button is toggleable.
+     */
+    _watchCheckIconMount() {
+        this.on('change:isOn', (evt, propertyName, isOn) => {
+            const { children, _checkIconView } = this;
+            if (isOn && !children.has(_checkIconView)) {
+                children.add(_checkIconView);
+            }
+            else if (!isOn && children.has(_checkIconView)) {
+                children.remove(_checkIconView);
+            }
+        });
+    }
+    /**
+     * Creates a check icon view.
+     */
+    _createCheckIconView() {
+        const iconView = new IconView();
+        iconView.content = icons.check;
+        iconView.extendTemplate({
+            attributes: {
+                class: 'ck-list-item-button__check-icon'
+            }
+        });
+        return iconView;
+    }
+}

package/src/colorpicker/colorpickerview.js

@@ -194,6 +194,11 @@ export default class ColorPickerView extends View {
      */
     isValid() {
         const { t } = this.locale;
+        // If the input is hidden, it's always valid, because there is no way to select
+        // invalid color value using diagram color picker.
+        if (this._config.hideInput) {
+            return true;
+        }
         this.resetValidationStatus();
         // One error per field is enough.
         if (!this.hexInputRow.getParsedColor()) {

package/src/colorselector/colorgridsfragmentview.js

@@ -9,7 +9,6 @@ import View from '../view.js';
 import ButtonView from '../button/buttonview.js';
 import ColorGridView from '../colorgrid/colorgridview.js';
 import ColorTileView from '../colorgrid/colortileview.js';
-import LabelView from '../label/labelview.js';
 import Template from '../template.js';
 import DocumentColorCollection from './documentcolorcollection.js';
 import { icons } from '@ckeditor/ckeditor5-core';
@@ -115,16 +114,21 @@ export default class ColorGridsFragmentView extends View {
         if (this.documentColorsCount) {
             // Create a label for document colors.
             const bind = Template.bind(this.documentColors, this.documentColors);
-            const label = new LabelView(this.locale);
-            label.text = this._documentColorsLabel;
-            label.extendTemplate({
+            const label = new View(this.locale);
+            label.setTemplate({
+                tag: 'span',
                 attributes: {
                     class: [
                         'ck',
                         'ck-color-grid__label',
                         bind.if('isEmpty', 'ck-hidden')
                     ]
-                }
+                },
+                children: [
+                    {
+                        text: this._documentColorsLabel
+                    }
+                ]
             });
             this.items.add(label);
             this.documentColorsGrid = this._createDocumentColorsGrid();

package/src/dialog/dialog.js

@@ -23,7 +23,10 @@ export default class Dialog extends Plugin {
         this._initShowHideListeners();
         this._initFocusToggler();
         this._initMultiRootIntegration();
-        this.set('id', null);
+        this.set({
+            id: null,
+            isOpen: false
+        });
         // Add the information about the keystroke to the accessibility database.
         editor.accessibility.addKeystrokeInfos({
             categoryId: 'navigation',

package/src/dialog/dialogview.js

@@ -413,20 +413,7 @@ class DialogView extends /* #__PURE__ */ DraggableViewMixin(View) {
             this._focusables.add(focusable);
             this.focusTracker.add(focusable.element);
             if (isViewWithFocusCycler(focusable)) {
-                this.listenTo(focusable.focusCycler, 'forwardCycle', evt => {
-                    this._focusCycler.focusNext();
-                    // Stop the event propagation only if there are more focusables.
-                    if (this._focusCycler.next !== this._focusCycler.focusables.get(this._focusCycler.current)) {
-                        evt.stop();
-                    }
-                });
-                this.listenTo(focusable.focusCycler, 'backwardCycle', evt => {
-                    this._focusCycler.focusPrevious();
-                    // Stop the event propagation only if there are more focusables.
-                    if (this._focusCycler.previous !== this._focusCycler.focusables.get(this._focusCycler.current)) {
-                        evt.stop();
-                    }
-                });
+                this._focusCycler.chain(focusable.focusCycler);
             }
         });
     }

package/src/dropdown/utils.js

@@ -12,7 +12,6 @@ import ToolbarView from '../toolbar/toolbarview.js';
 import ListView from '../list/listview.js';
 import ListItemView from '../list/listitemview.js';
 import ListSeparatorView from '../list/listseparatorview.js';
-import ButtonView from '../button/buttonview.js';
 import SplitButtonView from './button/splitbuttonview.js';
 import SwitchButtonView from '../button/switchbuttonview.js';
 import ViewCollection from '../viewcollection.js';
@@ -21,6 +20,7 @@ import { global, priorities, logWarning } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/dropdown/toolbardropdown.css';
 import '../../theme/components/dropdown/listdropdown.css';
 import ListItemGroupView from '../list/listitemgroupview.js';
+import ListItemButtonView from '../button/listitembuttonview.js';
 /**
  * A helper for creating dropdowns. It creates an instance of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown},
  * with a {@link module:ui/dropdown/button/dropdownbutton~DropdownButton button},
@@ -427,6 +427,23 @@ function focusDropdownPanelOnOpen(dropdownView) {
  * @param locale
  */
 function bindViewCollectionItemsToDefinitions(dropdownView, listItems, definitions, locale) {
+    // List item checkboxes have a reserved space for the check icon, so we need to know if there are any checkboxes in the list
+    // to adjust the layout accordingly. It'd look weird if the items on the list were not aligned horizontally.
+    //
+    // Possible theoretical performance problem if many items are added one by one, as this will be called for each item.
+    listItems.on('change', () => {
+        // Filter-map. Check all items, leave only these that have buttons and return the buttons.
+        const listItemButtons = [...listItems].reduce((acc, item) => {
+            if (item instanceof ListItemView && item.children.first instanceof ListItemButtonView) {
+                acc.push(item.children.first);
+            }
+            return acc;
+        }, []);
+        const hasAnyCheckboxOnList = listItemButtons.some(button => button.isToggleable);
+        listItemButtons.forEach(item => {
+            item.hasCheckSpace = hasAnyCheckboxOnList;
+        });
+    });
     listItems.bindTo(definitions).using(def => {
         if (def.type === 'separator') {
             return new ListSeparatorView(locale);
@@ -439,11 +456,14 @@ function bindViewCollectionItemsToDefinitions(dropdownView, listItems, definitio
             return groupView;
         }
         else if (def.type === 'button' || def.type === 'switchbutton') {
+            const isToggleable = def.model.role === 'menuitemcheckbox' || def.model.role === 'menuitemradio';
             const listItemView = new ListItemView(locale);
             let buttonView;
             if (def.type === 'button') {
-                buttonView = new ButtonView(locale);
-                buttonView.bind('ariaChecked').to(buttonView, 'isOn');
+                buttonView = new ListItemButtonView(locale);
+                buttonView.set({
+                    isToggleable
+                });
             }
             else {
                 buttonView = new SwitchButtonView(locale);

package/src/editorui/accessibilityhelp/accessibilityhelp.d.ts

@@ -47,5 +47,5 @@ export default class AccessibilityHelp extends Plugin {
     /**
      * Shows the accessibility help dialog. Also, creates {@link #contentView} on demand.
      */
-    private _showDialog;
+    private _toggleDialog;
 }

package/src/editorui/accessibilityhelp/accessibilityhelp.js

@@ -63,7 +63,7 @@ export default class AccessibilityHelp extends Plugin {
             return button;
         });
         editor.keystrokes.set('Alt+0', (evt, cancel) => {
-            this._showDialog();
+            this._toggleDialog();
             cancel();
         });
         this._setupRootLabels();
@@ -73,13 +73,16 @@ export default class AccessibilityHelp extends Plugin {
      */
     _createButton(ButtonClass) {
         const editor = this.editor;
+        const dialog = editor.plugins.get('Dialog');
         const locale = editor.locale;
         const view = new ButtonClass(locale);
         view.set({
             keystroke: 'Alt+0',
-            icon: accessibilityIcon
+            icon: accessibilityIcon,
+            isToggleable: true
         });
-        view.on('execute', () => this._showDialog());
+        view.on('execute', () => this._toggleDialog());
+        view.bind('isOn').to(dialog, 'id', id => id === 'accessibilityHelp');
         return view;
     }
     /**
@@ -110,20 +113,25 @@ export default class AccessibilityHelp extends Plugin {
     /**
      * Shows the accessibility help dialog. Also, creates {@link #contentView} on demand.
      */
-    _showDialog() {
+    _toggleDialog() {
         const editor = this.editor;
         const dialog = editor.plugins.get('Dialog');
         const t = editor.locale.t;
         if (!this.contentView) {
             this.contentView = new AccessibilityHelpContentView(editor.locale, editor.accessibility.keystrokeInfos);
         }
-        dialog.show({
-            id: 'accessibilityHelp',
-            className: 'ck-accessibility-help-dialog',
-            title: t('Accessibility help'),
-            icon: accessibilityIcon,
-            hasCloseButton: true,
-            content: this.contentView
-        });
+        if (dialog.id === 'accessibilityHelp') {
+            dialog.hide();
+        }
+        else {
+            dialog.show({
+                id: 'accessibilityHelp',
+                className: 'ck-accessibility-help-dialog',
+                title: t('Accessibility help'),
+                icon: accessibilityIcon,
+                hasCloseButton: true,
+                content: this.contentView
+            });
+        }
     }
 }

package/src/editorui/bodycollection.js

@@ -56,7 +56,8 @@ export default class BodyCollection extends ViewCollection {
                     'ck-body',
                     'ck-rounded-corners'
                 ],
-                dir: this.locale.uiLanguageDirection
+                dir: this.locale.uiLanguageDirection,
+                role: 'application'
             },
             children: this
         }).render();

package/src/editorui/editorui.d.ts

@@ -13,6 +13,7 @@ import type EditorUIView from './editoruiview.js';
 import type ToolbarView from '../toolbar/toolbarview.js';
 import { FocusTracker } from '@ckeditor/ckeditor5-utils';
 import type { Editor } from '@ckeditor/ckeditor5-core';
+import type { default as MenuBarView, MenuBarConfigAddedGroup, MenuBarConfigAddedItem, MenuBarConfigAddedMenu } from '../menubar/menubarview.js';
 declare const EditorUI_base: {
     new (): import("@ckeditor/ckeditor5-utils").Observable;
     prototype: import("@ckeditor/ckeditor5-utils").Observable;
@@ -100,6 +101,14 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
      * All available & focusable toolbars.
      */
     private _focusableToolbarDefinitions;
+    /**
+     * All additional menu bar items, groups or menus that have their default location defined.
+     */
+    private _extraMenuBarElements;
+    /**
+     * The last focused element to which focus should return on `Esc` press.
+     */
+    private _lastFocusedForeignElement;
     /**
      * Creates an instance of the editor UI class.
      *
@@ -165,12 +174,56 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
      * @param toolbarView A instance of the toolbar to be registered.
      */
     addToolbar(toolbarView: ToolbarView, options?: FocusableToolbarOptions): void;
+    /**
+     * Registers an extra menu bar element, which could be a single item, a group of items, or a menu containing groups.
+     *
+     * ```ts
+     * // Register a new menu bar item.
+     * editor.ui.extendMenuBar( {
+     *   item: 'menuBar:customFunctionButton',
+     *   position: 'after:menuBar:bold'
+     * } );
+     *
+     * // Register a new menu bar group.
+     * editor.ui.extendMenuBar( {
+     *   group: {
+     *     groupId: 'customGroup',
+     *     items: [
+     *       'menuBar:customFunctionButton'
+     *     ]
+     *   },
+     *   position: 'start:help'
+     * } );
+     *
+     * // Register a new menu bar menu.
+     * editor.ui.extendMenuBar( {
+     *   menu: {
+     *     menuId: 'customMenu',
+     *     label: 'customMenu',
+     *     groups: [
+     *       {
+     *         groupId: 'customGroup',
+     *         items: [
+     *           'menuBar:customFunctionButton'
+     *         ]
+     *       }
+     *     ]
+     *   },
+     *   position: 'after:help'
+     * } );
+     * ```
+     */
+    extendMenuBar(config: MenuBarConfigAddedItem | MenuBarConfigAddedGroup | MenuBarConfigAddedMenu): void;
     /**
      * Stores all editable elements used by the editor instance.
      *
      * @deprecated
      */
     protected get _editableElements(): unknown;
+    /**
+     * Initializes menu bar.
+     */
+    protected _initMenuBar(menuBarView: MenuBarView): void;
     /**
      * Returns viewport offsets object:
      *
@@ -192,6 +245,10 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
      * to allow users navigate across the UI.
      */
     private _initFocusTracking;
+    /**
+     * Saves last focused element that doen not belong to editing view to restore focus on `Esc`.
+     */
+    private _saveLastFocusedForeignElement;
     /**
      * Returns definitions of toolbars that could potentially be focused, sorted by their importance for the user.
      *