@ckeditor/ckeditor5-ui 44.3.0 → 45.0.0-alpha.1

package/src/dropdown/button/splitbuttonview.js

@@ -5,10 +5,10 @@
 /**
  * @module ui/dropdown/button/splitbuttonview
  */
+import { IconDropdownArrow } from '@ckeditor/ckeditor5-icons';
+import { KeystrokeHandler, FocusTracker } from '@ckeditor/ckeditor5-utils';
 import View from '../../view.js';
 import ButtonView from '../../button/buttonview.js';
-import { KeystrokeHandler, FocusTracker } from '@ckeditor/ckeditor5-utils';
-import dropdownArrowIcon from '../../../theme/icons/dropdown-arrow.svg';
 import '../../../theme/components/dropdown/splitbutton.css';
 /**
  * The split button view class.
@@ -30,6 +30,30 @@ import '../../../theme/components/dropdown/splitbutton.css';
  * Also see the {@link module:ui/dropdown/utils~createDropdown `createDropdown()` util}.
  */
 export default class SplitButtonView extends View {
+    /**
+     * Collection of the child views inside of the split button {@link #element}.
+     */
+    children;
+    /**
+     * A main button of split button.
+     */
+    actionView;
+    /**
+     * A secondary button of split button that opens dropdown.
+     */
+    arrowView;
+    /**
+     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}. It manages
+     * keystrokes of the split button:
+     *
+     * * <kbd>▶</kbd> moves focus to arrow view when action view is focused,
+     * * <kbd>◀</kbd> moves focus to action view when arrow view is focused.
+     */
+    keystrokes;
+    /**
+     * Tracks information about DOM focus in the dropdown.
+     */
+    focusTracker;
     /**
      * @inheritDoc
      */
@@ -134,7 +158,7 @@ export default class SplitButtonView extends View {
     _createArrowView() {
         const arrowView = new ButtonView();
         const bind = arrowView.bindTemplate;
-        arrowView.icon = dropdownArrowIcon;
+        arrowView.icon = IconDropdownArrow;
         arrowView.extendTemplate({
             attributes: {
                 class: [

package/src/dropdown/dropdownpanelview.js

@@ -13,6 +13,14 @@ import { logWarning } from '@ckeditor/ckeditor5-utils';
  * See {@link module:ui/dropdown/dropdownview~DropdownView} to learn about the common usage.
  */
 export default class DropdownPanelView extends View {
+    /**
+     * Collection of the child views in this panel.
+     *
+     * A common child type is the {@link module:ui/list/listview~ListView} and {@link module:ui/toolbar/toolbarview~ToolbarView}.
+     * See {@link module:ui/dropdown/utils~addListToDropdown} and
+     * {@link module:ui/dropdown/utils~addToolbarToDropdown} to learn more about child views of dropdowns.
+     */
+    children;
     /**
      * @inheritDoc
      */

package/src/dropdown/dropdownview.js

@@ -61,6 +61,57 @@ import '../../theme/components/dropdown/dropdown.css';
  * you do and you really need to do it, it is recommended to use the {@link module:ui/dropdown/utils~createDropdown} helper.
  */
 class DropdownView extends View {
+    /**
+     * Button of the dropdown view. Clicking the button opens the {@link #panelView}.
+     */
+    buttonView;
+    /**
+     * Panel of the dropdown. It opens when the {@link #buttonView} is
+     * {@link module:ui/button/button~Button#event:execute executed} (i.e. clicked).
+     *
+     * Child views can be added to the panel's `children` collection:
+     *
+     * ```ts
+     * dropdown.panelView.children.add( childView );
+     * ```
+     *
+     * See {@link module:ui/dropdown/dropdownpanelview~DropdownPanelView#children} and
+     * {@link module:ui/viewcollection~ViewCollection#add}.
+     */
+    panelView;
+    /**
+     * Tracks information about the DOM focus in the dropdown.
+     */
+    focusTracker;
+    /**
+     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}. It manages
+     * keystrokes of the dropdown:
+     *
+     * * <kbd>▼</kbd> opens the dropdown,
+     * * <kbd>◀</kbd> and <kbd>Esc</kbd> closes the dropdown.
+     */
+    keystrokes;
+    /**
+     * A child {@link module:ui/list/listview~ListView list view} of the dropdown located
+     * in its {@link module:ui/dropdown/dropdownview~DropdownView#panelView panel}.
+     *
+     * **Note**: Only supported when dropdown has list view added using {@link module:ui/dropdown/utils~addListToDropdown}.
+     */
+    listView;
+    /**
+     * A child toolbar of the dropdown located in the
+     * {@link module:ui/dropdown/dropdownview~DropdownView#panelView panel}.
+     *
+     * **Note**: Only supported when dropdown has a toolbar added using {@link module:ui/dropdown/utils~addToolbarToDropdown}.
+     */
+    toolbarView;
+    /**
+     * A child menu component of the dropdown located
+     * in its {@link module:ui/dropdown/dropdownview~DropdownView#panelView panel}.
+     *
+     * **Note**: Only supported when dropdown has a menu added using {@link module:ui/dropdown/utils~addMenuToDropdown}.
+     */
+    menuView;
     /**
      * Creates an instance of the dropdown.
      *
@@ -200,189 +251,189 @@ class DropdownView extends View {
     get _defaultPanelPositionName() {
         return this.locale.uiLanguageDirection === 'rtl' ? 'sw' : 'se';
     }
+    /**
+     * A set of positioning functions used by the dropdown view to determine
+     * the optimal position (i.e. fitting into the browser viewport) of its
+     * {@link module:ui/dropdown/dropdownview~DropdownView#panelView panel} when
+     * {@link module:ui/dropdown/dropdownview~DropdownView#panelPosition} is set to 'auto'`.
+     *
+     * The available positioning functions are as follow:
+     *
+     * **South**
+     *
+     * * `south`
+     *
+     * ```
+     *			[ Button ]
+     *		+-----------------+
+     *		|      Panel      |
+     *		+-----------------+
+     * ```
+     *
+     * * `southEast`
+     *
+     * ```
+     *		[ Button ]
+     *		+-----------------+
+     *		|      Panel      |
+     *		+-----------------+
+     * ```
+     *
+     * * `southWest`
+     *
+     * ```
+     *		         [ Button ]
+     *		+-----------------+
+     *		|      Panel      |
+     *		+-----------------+
+     * ```
+     *
+     * * `southMiddleEast`
+     *
+     * ```
+     *		  [ Button ]
+     *		+-----------------+
+     *		|      Panel      |
+     *		+-----------------+
+     * ```
+     *
+     * * `southMiddleWest`
+     *
+     * ```
+     *		       [ Button ]
+     *		+-----------------+
+     *		|      Panel      |
+     *		+-----------------+
+     * ```
+     *
+     * **North**
+     *
+     * * `north`
+     *
+     * ```
+     *		+-----------------+
+     *		|      Panel      |
+     *		+-----------------+
+     *		    [ Button ]
+     * ```
+     *
+     * * `northEast`
+     *
+     * ```
+     *		+-----------------+
+     *		|      Panel      |
+     *		+-----------------+
+     *		[ Button ]
+     * ```
+     *
+     * * `northWest`
+     *
+     * ```
+     *		+-----------------+
+     *		|      Panel      |
+     *		+-----------------+
+     *		         [ Button ]
+     * ```
+     *
+     * * `northMiddleEast`
+     *
+     * ```
+     *		+-----------------+
+     *		|      Panel      |
+     *		+-----------------+
+     *		  [ Button ]
+     * ```
+     *
+     * * `northMiddleWest`
+     *
+     * ```
+     *		+-----------------+
+     *		|      Panel      |
+     *		+-----------------+
+     *		       [ Button ]
+     * ```
+     *
+     * Positioning functions are compatible with {@link module:utils/dom/position~DomPoint}.
+     *
+     * The name that position function returns will be reflected in dropdown panel's class that
+     * controls its placement. See {@link module:ui/dropdown/dropdownview~DropdownView#panelPosition}
+     * to learn more.
+     */
+    static defaultPanelPositions = {
+        south: (buttonRect, panelRect) => {
+            return {
+                top: buttonRect.bottom,
+                left: buttonRect.left - (panelRect.width - buttonRect.width) / 2,
+                name: 's'
+            };
+        },
+        southEast: buttonRect => {
+            return {
+                top: buttonRect.bottom,
+                left: buttonRect.left,
+                name: 'se'
+            };
+        },
+        southWest: (buttonRect, panelRect) => {
+            return {
+                top: buttonRect.bottom,
+                left: buttonRect.left - panelRect.width + buttonRect.width,
+                name: 'sw'
+            };
+        },
+        southMiddleEast: (buttonRect, panelRect) => {
+            return {
+                top: buttonRect.bottom,
+                left: buttonRect.left - (panelRect.width - buttonRect.width) / 4,
+                name: 'sme'
+            };
+        },
+        southMiddleWest: (buttonRect, panelRect) => {
+            return {
+                top: buttonRect.bottom,
+                left: buttonRect.left - (panelRect.width - buttonRect.width) * 3 / 4,
+                name: 'smw'
+            };
+        },
+        north: (buttonRect, panelRect) => {
+            return {
+                top: buttonRect.top - panelRect.height,
+                left: buttonRect.left - (panelRect.width - buttonRect.width) / 2,
+                name: 'n'
+            };
+        },
+        northEast: (buttonRect, panelRect) => {
+            return {
+                top: buttonRect.top - panelRect.height,
+                left: buttonRect.left,
+                name: 'ne'
+            };
+        },
+        northWest: (buttonRect, panelRect) => {
+            return {
+                top: buttonRect.top - panelRect.height,
+                left: buttonRect.left - panelRect.width + buttonRect.width,
+                name: 'nw'
+            };
+        },
+        northMiddleEast: (buttonRect, panelRect) => {
+            return {
+                top: buttonRect.top - panelRect.height,
+                left: buttonRect.left - (panelRect.width - buttonRect.width) / 4,
+                name: 'nme'
+            };
+        },
+        northMiddleWest: (buttonRect, panelRect) => {
+            return {
+                top: buttonRect.top - panelRect.height,
+                left: buttonRect.left - (panelRect.width - buttonRect.width) * 3 / 4,
+                name: 'nmw'
+            };
+        }
+    };
+    /**
+     * A function used to calculate the optimal position for the dropdown panel.
+     */
+    static _getOptimalPosition = getOptimalPosition;
 }
-/**
- * A set of positioning functions used by the dropdown view to determine
- * the optimal position (i.e. fitting into the browser viewport) of its
- * {@link module:ui/dropdown/dropdownview~DropdownView#panelView panel} when
- * {@link module:ui/dropdown/dropdownview~DropdownView#panelPosition} is set to 'auto'`.
- *
- * The available positioning functions are as follow:
- *
- * **South**
- *
- * * `south`
- *
- * ```
- *			[ Button ]
- *		+-----------------+
- *		|      Panel      |
- *		+-----------------+
- * ```
- *
- * * `southEast`
- *
- * ```
- *		[ Button ]
- *		+-----------------+
- *		|      Panel      |
- *		+-----------------+
- * ```
- *
- * * `southWest`
- *
- * ```
- *		         [ Button ]
- *		+-----------------+
- *		|      Panel      |
- *		+-----------------+
- * ```
- *
- * * `southMiddleEast`
- *
- * ```
- *		  [ Button ]
- *		+-----------------+
- *		|      Panel      |
- *		+-----------------+
- * ```
- *
- * * `southMiddleWest`
- *
- * ```
- *		       [ Button ]
- *		+-----------------+
- *		|      Panel      |
- *		+-----------------+
- * ```
- *
- * **North**
- *
- * * `north`
- *
- * ```
- *		+-----------------+
- *		|      Panel      |
- *		+-----------------+
- *		    [ Button ]
- * ```
- *
- * * `northEast`
- *
- * ```
- *		+-----------------+
- *		|      Panel      |
- *		+-----------------+
- *		[ Button ]
- * ```
- *
- * * `northWest`
- *
- * ```
- *		+-----------------+
- *		|      Panel      |
- *		+-----------------+
- *		         [ Button ]
- * ```
- *
- * * `northMiddleEast`
- *
- * ```
- *		+-----------------+
- *		|      Panel      |
- *		+-----------------+
- *		  [ Button ]
- * ```
- *
- * * `northMiddleWest`
- *
- * ```
- *		+-----------------+
- *		|      Panel      |
- *		+-----------------+
- *		       [ Button ]
- * ```
- *
- * Positioning functions are compatible with {@link module:utils/dom/position~DomPoint}.
- *
- * The name that position function returns will be reflected in dropdown panel's class that
- * controls its placement. See {@link module:ui/dropdown/dropdownview~DropdownView#panelPosition}
- * to learn more.
- */
-DropdownView.defaultPanelPositions = {
-    south: (buttonRect, panelRect) => {
-        return {
-            top: buttonRect.bottom,
-            left: buttonRect.left - (panelRect.width - buttonRect.width) / 2,
-            name: 's'
-        };
-    },
-    southEast: buttonRect => {
-        return {
-            top: buttonRect.bottom,
-            left: buttonRect.left,
-            name: 'se'
-        };
-    },
-    southWest: (buttonRect, panelRect) => {
-        return {
-            top: buttonRect.bottom,
-            left: buttonRect.left - panelRect.width + buttonRect.width,
-            name: 'sw'
-        };
-    },
-    southMiddleEast: (buttonRect, panelRect) => {
-        return {
-            top: buttonRect.bottom,
-            left: buttonRect.left - (panelRect.width - buttonRect.width) / 4,
-            name: 'sme'
-        };
-    },
-    southMiddleWest: (buttonRect, panelRect) => {
-        return {
-            top: buttonRect.bottom,
-            left: buttonRect.left - (panelRect.width - buttonRect.width) * 3 / 4,
-            name: 'smw'
-        };
-    },
-    north: (buttonRect, panelRect) => {
-        return {
-            top: buttonRect.top - panelRect.height,
-            left: buttonRect.left - (panelRect.width - buttonRect.width) / 2,
-            name: 'n'
-        };
-    },
-    northEast: (buttonRect, panelRect) => {
-        return {
-            top: buttonRect.top - panelRect.height,
-            left: buttonRect.left,
-            name: 'ne'
-        };
-    },
-    northWest: (buttonRect, panelRect) => {
-        return {
-            top: buttonRect.top - panelRect.height,
-            left: buttonRect.left - panelRect.width + buttonRect.width,
-            name: 'nw'
-        };
-    },
-    northMiddleEast: (buttonRect, panelRect) => {
-        return {
-            top: buttonRect.top - panelRect.height,
-            left: buttonRect.left - (panelRect.width - buttonRect.width) / 4,
-            name: 'nme'
-        };
-    },
-    northMiddleWest: (buttonRect, panelRect) => {
-        return {
-            top: buttonRect.top - panelRect.height,
-            left: buttonRect.left - (panelRect.width - buttonRect.width) * 3 / 4,
-            name: 'nmw'
-        };
-    }
-};
-/**
- * A function used to calculate the optimal position for the dropdown panel.
- */
-DropdownView._getOptimalPosition = getOptimalPosition;
 export default DropdownView;

package/src/dropdown/menu/dropdownmenubuttonview.d.ts

@@ -2,9 +2,6 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-/**
- * @module ui/dropdown/menu/dropdownmenubuttonview
- */
 import IconView from '../../icon/iconview.js';
 import ListItemButtonView from '../../button/listitembuttonview.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';

package/src/dropdown/menu/dropdownmenubuttonview.js

@@ -5,14 +5,18 @@
 /**
  * @module ui/dropdown/menu/dropdownmenubuttonview
  */
+import { IconDropdownArrow } from '@ckeditor/ckeditor5-icons';
 import IconView from '../../icon/iconview.js';
 import ListItemButtonView from '../../button/listitembuttonview.js';
-import dropdownArrowIcon from '../../../theme/icons/dropdown-arrow.svg';
 import '../../../theme/components/dropdown/menu/dropdownmenubutton.css';
 /**
  * Represents a view for a dropdown menu button.
  */
 export default class DropdownMenuButtonView extends ListItemButtonView {
+    /**
+     * An icon that displays an arrow to indicate a direction of the menu.
+     */
+    arrowView;
     /**
      * Creates an instance of the dropdown menu button view.
      *
@@ -54,7 +58,7 @@ export default class DropdownMenuButtonView extends ListItemButtonView {
      */
     _createArrowView() {
         const arrowView = new IconView();
-        arrowView.content = dropdownArrowIcon;
+        arrowView.content = IconDropdownArrow;
         arrowView.extendTemplate({
             attributes: {
                 class: 'ck-dropdown-menu-list__nested-menu__button__arrow'

package/src/dropdown/menu/dropdownmenulistitembuttonview.js

@@ -8,6 +8,7 @@ import '../../../theme/components/dropdown/menu/dropdownmenulistitembutton.css';
  * Represents a view for a button in a dropdown menu list item.
  */
 export default class DropdownMenuListItemButtonView extends ButtonView {
+    id;
     constructor(locale, id, label) {
         super(locale);
         this.id = id;

package/src/dropdown/menu/dropdownmenulistitemview.js

@@ -9,6 +9,10 @@ import '../../../theme/components/dropdown/menu/dropdownmenulistitem.css';
  * Represents a view for a single item in a dropdown menu list.
  */
 export default class DropdownMenuListItemView extends ListItemView {
+    /**
+     * The view representing either a flat item or a nested menu in a dropdown menu list item.
+     */
+    childView;
     constructor(locale, parentMenuView, childView) {
         super(locale);
         const bind = this.bindTemplate;

package/src/dropdown/menu/dropdownmenunestedmenuview.js

@@ -17,6 +17,37 @@ import '../../../theme/components/dropdown/menu/dropdownmenu.css';
  * Represents a nested menu view.
  */
 class DropdownMenuNestedMenuView extends View {
+    /**
+     * An array of delegated events for the dropdown menu definition controller.
+     * These events are delegated to the dropdown menu element.
+     */
+    // Due to some spaghetti code we need to delegate `change:isOpen`.
+    static DELEGATED_EVENTS = [
+        'mouseenter', 'execute', 'change:isOpen'
+    ];
+    id;
+    /**
+     * Button of the menu view.
+     */
+    buttonView;
+    /**
+     * Panel of the menu. It hosts children of the menu.
+     */
+    panelView;
+    /**
+     * List of nested menu entries.
+     */
+    listView;
+    /**
+     * Tracks information about the DOM focus in the menu.
+     */
+    focusTracker;
+    /**
+     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}. It manages
+     * keystrokes of the menu.
+     */
+    keystrokes;
+    _bodyCollection;
     /**
      * Creates a new instance of the DropdownMenuView class.
      *
@@ -181,12 +212,4 @@ class DropdownMenuNestedMenuView extends View {
         }
     }
 }
-/**
- * An array of delegated events for the dropdown menu definition controller.
- * These events are delegated to the dropdown menu element.
- */
-// Due to some spaghetti code we need to delegate `change:isOpen`.
-DropdownMenuNestedMenuView.DELEGATED_EVENTS = [
-    'mouseenter', 'execute', 'change:isOpen'
-];
 export default DropdownMenuNestedMenuView;

package/src/dropdown/menu/dropdownmenurootlistview.js

@@ -70,6 +70,22 @@ import { DropdownRootMenuBehaviors } from './dropdownmenubehaviors.js';
  * It is recommended to use this class together with {@link module:ui/dropdown/utils~addMenuToDropdown `addMenuToDropdown()` helper}.
  */
 export default class DropdownMenuRootListView extends DropdownMenuListView {
+    /**
+     * The definitions object used to create the whole menu structure.
+     */
+    _definition;
+    /**
+     * Cached array of all menus in the dropdown menu (including nested menus).
+     */
+    _cachedMenus = [];
+    /**
+     * Cached array of all buttons in the dropdown menu (including buttons in nested menus).
+     */
+    _cachedButtons = [];
+    /**
+     * Editor body collection into which nested menus panels will be appended.
+     */
+    _bodyCollection;
     /**
      * Creates an instance of the DropdownMenuRootListView class.
      *
@@ -79,14 +95,6 @@ export default class DropdownMenuRootListView extends DropdownMenuListView {
      */
     constructor(locale, bodyCollection, definition) {
         super(locale);
-        /**
-         * Cached array of all menus in the dropdown menu (including nested menus).
-         */
-        this._cachedMenus = [];
-        /**
-         * Cached array of all buttons in the dropdown menu (including buttons in nested menus).
-         */
-        this._cachedButtons = [];
         this._bodyCollection = bodyCollection;
         this._definition = definition;
         this.set('menuPanelClass', undefined);

package/src/editableui/editableuiview.js

@@ -10,6 +10,28 @@ import View from '../view.js';
  * The editable UI view class.
  */
 export default class EditableUIView extends View {
+    /**
+     * The name of the editable UI view.
+     */
+    name = null;
+    /**
+     * The editing view instance the editable is related to. Editable uses the editing
+     * view to dynamically modify its certain DOM attributes after {@link #render rendering}.
+     *
+     * **Note**: The DOM attributes are performed by the editing view and not UI
+     * {@link module:ui/view~View#bindTemplate template bindings} because once rendered,
+     * the editable DOM element must remain under the full control of the engine to work properly.
+     */
+    _editingView;
+    /**
+     * The element which is the main editable element (usually the one with `contentEditable="true"`).
+     */
+    _editableElement;
+    /**
+     * Whether an external {@link #_editableElement} was passed into the constructor, which also means
+     * the view will not render its {@link #template}.
+     */
+    _hasExternalElement;
     /**
      * Creates an instance of EditableUIView class.
      *
@@ -20,10 +42,6 @@ export default class EditableUIView extends View {
      */
     constructor(locale, editingView, editableElement) {
         super(locale);
-        /**
-         * The name of the editable UI view.
-         */
-        this.name = null;
         this.setTemplate({
             tag: 'div',
             attributes: {

package/src/editableui/inline/inlineeditableuiview.js

@@ -10,6 +10,10 @@ import EditableUIView from '../editableuiview.js';
  * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
  */
 export default class InlineEditableUIView extends EditableUIView {
+    /**
+     * The cached options object passed to the constructor.
+     */
+    _options;
     /**
      * Creates an instance of the InlineEditableUIView class.
      *