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

package/src/collapsible/collapsibleview.d.ts

@@ -2,14 +2,11 @@
  * @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/collapsible/collapsibleview
- */
-import type { Locale } from '@ckeditor/ckeditor5-utils';
 import View from '../view.js';
 import ButtonView from '../button/buttonview.js';
 import type ViewCollection from '../viewcollection.js';
 import type { FocusableView } from '../focuscycler.js';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/collapsible/collapsible.css';
 /**
  * A collapsible UI component. Consists of a labeled button and a container which can be collapsed

package/src/collapsible/collapsibleview.js

@@ -2,9 +2,12 @@
  * @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/collapsible/collapsibleview
+ */
+import { IconDropdownArrow } from '@ckeditor/ckeditor5-icons';
 import View from '../view.js';
 import ButtonView from '../button/buttonview.js';
-import dropdownArrowIcon from '../../theme/icons/dropdown-arrow.svg';
 import '../../theme/components/collapsible/collapsible.css';
 /**
  * A collapsible UI component. Consists of a labeled button and a container which can be collapsed
@@ -13,6 +16,14 @@ import '../../theme/components/collapsible/collapsible.css';
  * @internal
  */
 export default class CollapsibleView extends View {
+    /**
+     * The main button that, when clicked, collapses or expands the container with {@link #children}.
+     */
+    buttonView;
+    /**
+     * A collection of the child views that can be collapsed by clicking the {@link #buttonView}.
+     */
+    children;
     /**
      * Creates an instance of the collapsible view.
      *
@@ -78,7 +89,7 @@ export default class CollapsibleView extends View {
         const bind = buttonView.bindTemplate;
         buttonView.set({
             withText: true,
-            icon: dropdownArrowIcon
+            icon: IconDropdownArrow
         });
         buttonView.extendTemplate({
             attributes: {

package/src/colorgrid/colorgridview.js

@@ -14,6 +14,22 @@ import '../../theme/components/colorgrid/colorgrid.css';
  * A grid of {@link module:ui/colorgrid/colortileview~ColorTileView color tiles}.
  */
 export default class ColorGridView extends View {
+    /**
+     * A number of columns for the tiles grid.
+     */
+    columns;
+    /**
+     * Collection of the child tile views.
+     */
+    items;
+    /**
+     * Tracks information about DOM focus in the grid.
+     */
+    focusTracker;
+    /**
+     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    keystrokes;
     /**
      * Creates an instance of a color grid containing {@link module:ui/colorgrid/colortileview~ColorTileView tiles}.
      *
@@ -27,7 +43,7 @@ export default class ColorGridView extends View {
     constructor(locale, options) {
         super(locale);
         const colorDefinitions = options && options.colorDefinitions ? options.colorDefinitions : [];
-        this.columns = options && options.columns ? options.columns : 5;
+        this.columns = options?.columns || 5;
         const viewStyleAttribute = {
             gridTemplateColumns: `repeat( ${this.columns}, 1fr)`
         };
@@ -110,7 +126,7 @@ export default class ColorGridView extends View {
             focusTracker: this.focusTracker,
             gridItems: this.items,
             numberOfColumns: this.columns,
-            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
+            uiLanguageDirection: this.locale?.uiLanguageDirection
         });
     }
     /**

package/src/colorgrid/colortileview.d.ts

@@ -2,11 +2,8 @@
  * @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/colorgrid/colortileview
- */
-import ButtonView from '../button/buttonview.js';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
+import ButtonView from '../button/buttonview.js';
 /**
  * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
  */

package/src/colorgrid/colortileview.js

@@ -5,9 +5,9 @@
 /**
  * @module ui/colorgrid/colortileview
  */
-import ButtonView from '../button/buttonview.js';
+import { IconColorTileCheck } from '@ckeditor/ckeditor5-icons';
 import { env } from '@ckeditor/ckeditor5-utils';
-import checkIcon from '../../theme/icons/color-tile-check.svg';
+import ButtonView from '../button/buttonview.js';
 /**
  * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
  */
@@ -17,7 +17,7 @@ export default class ColorTileView extends ButtonView {
         const bind = this.bindTemplate;
         this.set('color', undefined);
         this.set('hasBorder', false);
-        this.icon = checkIcon;
+        this.icon = IconColorTileCheck;
         this.extendTemplate({
             attributes: {
                 style: {

package/src/colorpicker/colorpickerview.js

@@ -7,7 +7,7 @@
  */
 import { convertColor, convertToHex, registerCustomElement } from './utils.js';
 import { global, env } from '@ckeditor/ckeditor5-utils';
-import { debounce } from 'lodash-es';
+import { debounce } from 'es-toolkit/compat';
 import View from '../view.js';
 import LabeledFieldView from '../labeledfield/labeledfieldview.js';
 import { createLabeledInputText } from '../labeledfield/utils.js';
@@ -19,6 +19,25 @@ const waitingTime = 150;
  * A class which represents a color picker with an input field for defining custom colors.
  */
 export default class ColorPickerView extends View {
+    /**
+     * Container for a `#` sign prefix and an input for displaying and defining custom colors
+     * in HEX format.
+     */
+    hexInputRow;
+    /**
+     * Debounced function updating the `color` property in the component
+     * and firing the `ColorPickerColorSelectedEvent`. Executed whenever color in component
+     * is changed by the user interaction (through the palette or input).
+     *
+     * @private
+     */
+    _debounceColorPickerEvent;
+    /**
+     * A reference to the configuration of the color picker specified in the constructor.
+     *
+     * @private
+     */
+    _config;
     /**
      * Creates a view of color picker.
      *
@@ -273,6 +292,14 @@ class HashView extends View {
 //
 // @private
 class ColorPickerInputRowView extends View {
+    /**
+     * A collection of row items (buttons, dropdowns, etc.).
+     */
+    children;
+    /**
+     * Hex input view element.
+     */
+    inputView;
     /**
      * Creates an instance of the form row class.
      *

package/src/colorselector/colorgridsfragmentview.js

@@ -11,7 +11,7 @@ import ColorGridView from '../colorgrid/colorgridview.js';
 import ColorTileView from '../colorgrid/colortileview.js';
 import Template from '../template.js';
 import DocumentColorCollection from './documentcolorcollection.js';
-import { icons } from '@ckeditor/ckeditor5-core';
+import { IconEraser, IconColorPalette } from '@ckeditor/ckeditor5-icons';
 /**
  * One of the fragments of {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
  *
@@ -25,6 +25,82 @@ import { icons } from '@ckeditor/ckeditor5-core';
  * * If color picker is configured, the "Color Picker" button is visible too.
  */
 export default class ColorGridsFragmentView extends View {
+    /**
+     * A collection of the children of the table.
+     */
+    items;
+    /**
+     * An array with objects representing colors to be displayed in the grid.
+     */
+    colorDefinitions;
+    /**
+     * Tracks information about the DOM focus in the list.
+     */
+    focusTracker;
+    /**
+     * The number of columns in the color grid.
+     */
+    columns;
+    /**
+     * Preserves the reference to {@link module:ui/colorselector/documentcolorcollection~DocumentColorCollection} used to collect
+     * definitions that store the document colors.
+     *
+     * @readonly
+     */
+    documentColors;
+    /**
+     * The maximum number of colors in the document colors section.
+     * If it equals 0, the document colors section is not added.
+     *
+     * @readonly
+     */
+    documentColorsCount;
+    /**
+     * Preserves the reference to {@link module:ui/colorgrid/colorgridview~ColorGridView} used to create
+     * the default (static) color set.
+     *
+     * The property is loaded once the the parent dropdown is opened the first time.
+     *
+     * @readonly
+     */
+    staticColorsGrid;
+    /**
+     * Preserves the reference to {@link module:ui/colorgrid/colorgridview~ColorGridView} used to create
+     * the document colors. It remains undefined if the document colors feature is disabled.
+     *
+     * The property is loaded once the the parent dropdown is opened the first time.
+     *
+     * @readonly
+     */
+    documentColorsGrid;
+    /**
+     * The "Color picker" button view.
+     */
+    colorPickerButtonView;
+    /**
+     * The "Remove color" button view.
+     */
+    removeColorButtonView;
+    /**
+     * A collection of views that can be focused in the view.
+     *
+     * @readonly
+     */
+    _focusables;
+    /**
+     * Document color section's label.
+     *
+     * @readonly
+     */
+    _documentColorsLabel;
+    /**
+     * The label of the button responsible for removing color attributes.
+     */
+    _removeButtonLabel;
+    /**
+     * The label of the button responsible for switching to the color picker component.
+     */
+    _colorPickerLabel;
     /**
      * Creates an instance of the view.
      *
@@ -182,7 +258,7 @@ export default class ColorGridsFragmentView extends View {
         this.colorPickerButtonView.set({
             label: this._colorPickerLabel,
             withText: true,
-            icon: icons.colorPalette,
+            icon: IconColorPalette,
             class: 'ck-color-selector__color-picker'
         });
         this.colorPickerButtonView.on('execute', () => {
@@ -196,7 +272,7 @@ export default class ColorGridsFragmentView extends View {
         const buttonView = new ButtonView();
         buttonView.set({
             withText: true,
-            icon: icons.eraser,
+            icon: IconEraser,
             label: this._removeButtonLabel
         });
         buttonView.class = 'ck-color-selector__remove-color';
@@ -242,7 +318,7 @@ export default class ColorGridsFragmentView extends View {
             const colorTile = new ColorTileView();
             colorTile.set({
                 color: colorObj.color,
-                hasBorder: colorObj.options && colorObj.options.hasBorder
+                hasBorder: colorObj.options?.hasBorder
             });
             if (colorObj.label) {
                 colorTile.set({

package/src/colorselector/colorpickerfragmentview.js

@@ -8,7 +8,7 @@
 import View from '../view.js';
 import ButtonView from '../button/buttonview.js';
 import { default as ColorPickerView } from '../colorpicker/colorpickerview.js';
-import { icons } from '@ckeditor/ckeditor5-core';
+import { IconCancel, IconCheck } from '@ckeditor/ckeditor5-icons';
 /**
  * One of the fragments of {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
  *
@@ -21,6 +21,47 @@ import { icons } from '@ckeditor/ckeditor5-core';
  * * "Save" and "Cancel" action buttons.
  */
 export default class ColorPickerFragmentView extends View {
+    /**
+     * A collection of component's children.
+     */
+    items;
+    /**
+     * A view with saturation and hue sliders and color input.
+     */
+    colorPickerView;
+    /**
+     * The "Save" button view.
+     */
+    saveButtonView;
+    /**
+     * The "Cancel" button view.
+     */
+    cancelButtonView;
+    /**
+     * The action bar where are "Save" button and "Cancel" button.
+     */
+    actionBarView;
+    /**
+     * Tracks information about the DOM focus in the list.
+     */
+    focusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    keystrokes;
+    /**
+     * A collection of views that can be focused in the view.
+     *
+     * @readonly
+     */
+    _focusables;
+    /**
+     * A reference to the configuration of {@link #colorPickerView}. `false` when the view was
+     * configured without a color picker.
+     *
+     * @readonly
+     */
+    _colorPickerViewConfig;
     /**
      * Creates an instance of the view.
      *
@@ -168,14 +209,14 @@ export default class ColorPickerFragmentView extends View {
         const saveButtonView = new ButtonView(locale);
         const cancelButtonView = new ButtonView(locale);
         saveButtonView.set({
-            icon: icons.check,
+            icon: IconCheck,
             class: 'ck-button-save',
             type: 'button',
             withText: false,
             label: t('Accept')
         });
         cancelButtonView.set({
-            icon: icons.cancel,
+            icon: IconCancel,
             class: 'ck-button-cancel',
             type: 'button',
             withText: false,

package/src/colorselector/colorselectorview.js

@@ -61,6 +61,42 @@ import '../../theme/components/colorselector/colorselector.css';
  * ```
  */
 export default class ColorSelectorView extends View {
+    /**
+     * Tracks information about the DOM focus in the list.
+     */
+    focusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    keystrokes;
+    /**
+     * A collection of components.
+     */
+    items;
+    /**
+     * A fragment that allows users to select colors from the a predefined set and from existing document colors.
+     */
+    colorGridsFragmentView;
+    /**
+     * A fragment that allows users to select a color from a color picker.
+     */
+    colorPickerFragmentView;
+    /**
+     * Helps cycling over focusable {@link #items} in the list.
+     *
+     * @readonly
+     */
+    _focusCycler;
+    /**
+     * A collection of views that can be focused in the view.
+     *
+     * @readonly
+     */
+    _focusables;
+    /**
+     * The configuration of color picker sub-component.
+     */
+    _colorPickerViewConfig;
     /**
      * Creates a view to be inserted as a child of {@link module:ui/dropdown/dropdownview~DropdownView}.
      *

package/src/componentfactory.js

@@ -31,16 +31,20 @@ import { CKEditorError } from '@ckeditor/ckeditor5-utils';
  * function when {@link module:ui/componentfactory~ComponentFactory#create} is called.
  */
 export default class ComponentFactory {
+    /**
+     * The editor instance that the factory belongs to.
+     */
+    editor;
+    /**
+     * Registered component factories.
+     */
+    _components = new Map();
     /**
      * Creates an instance of the factory.
      *
      * @param editor The editor instance.
      */
     constructor(editor) {
-        /**
-         * Registered component factories.
-         */
-        this._components = new Map();
         this.editor = editor;
     }
     /**

package/src/dialog/dialog.js

@@ -8,6 +8,24 @@ import DialogView, { DialogViewPosition } from './dialogview.js';
  * The dialog controller class. It is used to show and hide the {@link module:ui/dialog/dialogview~DialogView}.
  */
 export default class Dialog extends Plugin {
+    /**
+     * The currently visible dialog view instance.
+     */
+    view;
+    /**
+     * The `Dialog` plugin instance which most recently showed the dialog.
+     *
+     * Only one dialog can be visible at once, even if there are many editor instances on the page.
+     * If an editor wants to show a dialog, it should first hide the dialog that is already opened.
+     * But only the `Dialog` instance that showed the dialog is able able to properly hide it.
+     * This is why we need to store it in a globally available space (static property).
+     * This way every `Dialog` plugin in every editor is able to correctly close any open dialog window.
+     */
+    static _visibleDialogPlugin;
+    /**
+     * A configurable callback called when the dialog is hidden.
+     */
+    _onHide;
     /**
      * @inheritDoc
      */

package/src/dialog/dialogactionsview.js

@@ -15,6 +15,26 @@ import '../../theme/components/dialog/dialogactions.css';
  * A dialog actions view class. It contains button views which are used to execute dialog actions.
  */
 export default class DialogActionsView extends View {
+    /**
+     * A collection of button views.
+     */
+    children;
+    /**
+     * A keystroke handler instance.
+     */
+    keystrokes;
+    /**
+     * A focus cycler instance.
+     */
+    focusCycler;
+    /**
+     * A focus tracker instance.
+     */
+    _focusTracker;
+    /**
+     * A collection of focusable views.
+     */
+    _focusables;
     /**
      * @inheritDoc
      */

package/src/dialog/dialogcontentview.js

@@ -10,6 +10,10 @@ import View from '../view.js';
  * A dialog content view class.
  */
 export default class DialogContentView extends View {
+    /**
+     * A collection of content items.
+     */
+    children;
     /**
      * @inheritDoc
      */

package/src/dialog/dialogview.d.ts

@@ -105,7 +105,7 @@ export default class DialogView extends /* #__PURE__ */ DialogView_base implemen
      *
      * @observable
      */
-    position: typeof DialogViewPosition[keyof typeof DialogViewPosition];
+    position: typeof DialogViewPosition[keyof typeof DialogViewPosition] | null;
     /**
      * A flag indicating that the dialog should be shown. Once set to `true`, the dialog will be shown
      * after its position is calculated. Until then, the dialog is transparent and not visible.

package/src/dialog/dialogview.js

@@ -6,7 +6,7 @@
  * @module ui/dialog/dialogview
  */
 import { KeystrokeHandler, FocusTracker, Rect, global, toUnit } from '@ckeditor/ckeditor5-utils';
-import { icons } from '@ckeditor/ckeditor5-core';
+import { IconCancel } from '@ckeditor/ckeditor5-icons';
 import ViewCollection from '../viewcollection.js';
 import View from '../view.js';
 import FormHeaderView from '../formheader/formheaderview.js';
@@ -46,16 +46,65 @@ const toPx = /* #__PURE__ */ toUnit('px');
  * A dialog view class.
  */
 class DialogView extends /* #__PURE__ */ DraggableViewMixin(View) {
+    /**
+     * A collection of the child views inside of the dialog.
+     * A dialog can have 3 optional parts: header, content, and actions.
+     */
+    parts;
+    /**
+     * A header view of the dialog. It is also a drag handle of the dialog.
+     */
+    headerView;
+    /**
+     * A close button view. It is automatically added to the header view if present.
+     */
+    closeButtonView;
+    /**
+     * A view with the action buttons available to the user.
+     */
+    actionsView;
+    /**
+     * A default dialog element offset from the reference element (e.g. editor editable area).
+     */
+    static defaultOffset = 15;
+    /**
+     * A view with the dialog content.
+     */
+    contentView;
+    /**
+     * A keystroke handler instance.
+     */
+    keystrokes;
+    /**
+     * A focus tracker instance.
+     */
+    focusTracker;
+    /**
+     * A flag indicating if the dialog was moved manually. If so, its position
+     * will not be updated automatically upon window resize or document scroll.
+     */
+    wasMoved = false;
+    /**
+     * A callback returning the DOM root that requested the dialog.
+     */
+    _getCurrentDomRoot;
+    /**
+     * A callback returning the configured editor viewport offset.
+     */
+    _getViewportOffset;
+    /**
+     * The list of the focusable elements inside the dialog view.
+     */
+    _focusables;
+    /**
+     * The focus cycler instance.
+     */
+    _focusCycler;
     /**
      * @inheritDoc
      */
     constructor(locale, { getCurrentDomRoot, getViewportOffset, keystrokeHandlerOptions }) {
         super(locale);
-        /**
-         * A flag indicating if the dialog was moved manually. If so, its position
-         * will not be updated automatically upon window resize or document scroll.
-         */
-        this.wasMoved = false;
         const bind = this.bindTemplate;
         const t = locale.t;
         this.set('className', '');
@@ -454,14 +503,10 @@ class DialogView extends /* #__PURE__ */ DraggableViewMixin(View) {
         buttonView.set({
             label: t('Close'),
             tooltip: true,
-            icon: icons.cancel
+            icon: IconCancel
         });
         buttonView.on('execute', () => this.fire('close', { source: 'closeButton' }));
         return buttonView;
     }
 }
-/**
- * A default dialog element offset from the reference element (e.g. editor editable area).
- */
-DialogView.defaultOffset = 15;
 export default DialogView;

package/src/dropdown/button/dropdownbuttonview.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/button/dropdownbuttonview
- */
 import ButtonView from '../../button/buttonview.js';
 import type DropdownButton from './dropdownbutton.js';
 import IconView from '../../icon/iconview.js';

package/src/dropdown/button/dropdownbuttonview.js

@@ -5,9 +5,9 @@
 /**
  * @module ui/dropdown/button/dropdownbuttonview
  */
+import { IconDropdownArrow } from '@ckeditor/ckeditor5-icons';
 import ButtonView from '../../button/buttonview.js';
 import IconView from '../../icon/iconview.js';
-import dropdownArrowIcon from '../../../theme/icons/dropdown-arrow.svg';
 /**
  * The default dropdown button view class.
  *
@@ -28,6 +28,10 @@ import dropdownArrowIcon from '../../../theme/icons/dropdown-arrow.svg';
  * Also see the {@link module:ui/dropdown/utils~createDropdown `createDropdown()` util}.
  */
 export default class DropdownButtonView extends ButtonView {
+    /**
+     * An icon that displays arrow to indicate a dropdown button.
+     */
+    arrowView;
     /**
      * @inheritDoc
      */
@@ -55,7 +59,7 @@ export default class DropdownButtonView extends ButtonView {
      */
     _createArrowView() {
         const arrowView = new IconView();
-        arrowView.content = dropdownArrowIcon;
+        arrowView.content = IconDropdownArrow;
         arrowView.extendTemplate({
             attributes: {
                 class: 'ck-dropdown__arrow'

package/src/dropdown/button/splitbuttonview.d.ts

@@ -2,16 +2,13 @@
  * @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/button/splitbuttonview
- */
+import { KeystrokeHandler, FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';
 import View from '../../view.js';
 import ButtonView from '../../button/buttonview.js';
 import type ViewCollection from '../../viewcollection.js';
 import type Button from '../../button/button.js';
 import type DropdownButton from './dropdownbutton.js';
 import type { FocusableView } from '../../focuscycler.js';
-import { KeystrokeHandler, FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';
 import '../../../theme/components/dropdown/splitbutton.css';
 /**
  * The split button view class.