@ckeditor/ckeditor5-ui 44.3.0-alpha.7 → 45.0.0-alpha.0

package/dist/index.js

@@ -3,8 +3,9 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Collection, CKEditorError, EmitterMixin, isNode, toArray, DomEmitterMixin, ObservableMixin, isIterable, uid, env, delay, getEnvKeystrokeText, isVisible, global, KeystrokeHandler, FocusTracker, toUnit, Rect, createElement, ResizeObserver, getBorderWidths, logWarning, getOptimalPosition, isText, isRange, priorities, first, parseBase64EncodedObject, getAncestors } from '@ckeditor/ckeditor5-utils/dist/index.js';
-import { cloneDeepWith, isObject, isElement, debounce, throttle, cloneDeep, extend, escapeRegExp, escape } from 'lodash-es';
-import { icons, Plugin, ContextPlugin } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { cloneDeepWith, isObject, isElement, debounce, throttle, cloneDeep, extend, escapeRegExp, escape } from 'es-toolkit/compat';
+import { Plugin, ContextPlugin } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { IconCancel, IconCheck, IconAccessibility, IconDropdownArrow, IconColorTileCheck, IconDragIndicator, IconPilcrow, IconThreeVerticalDots, IconText, IconPlus, IconParagraph, IconImportExport, IconBold, IconAlignLeft, IconColorPalette, IconEraser, IconProjectLogo, IconPreviousArrow, IconNextArrow, IconLoupe } from '@ckeditor/ckeditor5-icons/dist/index.js';
 import parse from 'color-parse';
 import * as convert from 'color-convert';
 import { HexBase } from 'vanilla-colorful/lib/entrypoints/hex';
@@ -2326,6 +2327,13 @@ const xhtmlNs = 'http://www.w3.org/1999/xhtml';
         if (this.content) {
             const parsed = new DOMParser().parseFromString(this.content.trim(), 'image/svg+xml');
             const svg = parsed.querySelector('svg');
+            if (!svg) {
+                /**
+				 * The provided icon content is not a valid SVG.
+				 *
+				 * @error ui-iconview-invalid-svg
+				 */ throw new CKEditorError('ui-iconview-invalid-svg', this);
+            }
             const viewBox = svg.getAttribute('viewBox');
             if (viewBox) {
                 this.viewBox = viewBox;
@@ -2467,6 +2475,7 @@ const xhtmlNs = 'http://www.w3.org/1999/xhtml';
                 class: 'ck-button__icon'
             }
         });
+        this.iconView.bind('content').to(this, 'icon');
         this.keystrokeView = this._createKeystrokeView();
         this.bind('_tooltipString').to(this, 'tooltip', this, 'label', this, 'keystroke', this._getTooltipString.bind(this));
         const template = {
@@ -2540,9 +2549,15 @@ const xhtmlNs = 'http://www.w3.org/1999/xhtml';
 	 */ render() {
         super.render();
         if (this.icon) {
-            this.iconView.bind('content').to(this, 'icon');
             this.children.add(this.iconView);
         }
+        this.on('change:icon', (evt, prop, newIcon, oldIcon)=>{
+            if (newIcon && !oldIcon) {
+                this.children.add(this.iconView, 0);
+            } else if (!newIcon && oldIcon) {
+                this.children.remove(this.iconView);
+            }
+        });
         this.children.add(this.labelView);
         if (this.withKeystroke && this.keystroke) {
             this.children.add(this.keystrokeView);
@@ -3777,7 +3792,7 @@ const toPx$6 = /* #__PURE__ */ toUnit('px');
         buttonView.set({
             label: t('Close'),
             tooltip: true,
-            icon: icons.cancel
+            icon: IconCancel
         });
         buttonView.on('execute', ()=>this.fire('close', {
                 source: 'closeButton'
@@ -4193,7 +4208,7 @@ class CheckIconHolderView extends View {
 	 * Creates a check icon view.
 	 */ _createCheckIconView() {
         const iconView = new IconView();
-        iconView.content = icons.check;
+        iconView.content = IconCheck;
         iconView.extendTemplate({
             attributes: {
                 class: 'ck-list-item-button__check-icon'
@@ -4362,8 +4377,6 @@ function normalizeKeystrokeDefinition(definition) {
     return definition;
 }
 
-var accessibilityIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 6.628a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\"/><path d=\"M8.5 9.125a.3.3 0 0 0-.253-.296L5.11 8.327a.75.75 0 1 1 .388-1.449l4.04.716c.267.072.624.08.893.009l4.066-.724a.75.75 0 1 1 .388 1.45l-3.132.5a.3.3 0 0 0-.253.296v1.357a.3.3 0 0 0 .018.102l1.615 4.438a.75.75 0 0 1-1.41.513l-1.35-3.71a.3.3 0 0 0-.281-.197h-.209a.3.3 0 0 0-.282.198l-1.35 3.711a.75.75 0 0 1-1.41-.513l1.64-4.509a.3.3 0 0 0 .019-.103V9.125Z\"/><path clip-rule=\"evenodd\" d=\"M10 18.5a8.5 8.5 0 1 1 0-17 8.5 8.5 0 0 1 0 17Zm0 1.5c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10Z\"/></svg>";
-
 /**
  * A plugin that brings the accessibility help dialog to the editor available under the <kbd>Alt</kbd>+<kbd>0</kbd>
  * keystroke and via the "Accessibility help" toolbar button. The dialog displays a list of keystrokes that can be used
@@ -4427,7 +4440,7 @@ var accessibilityIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/20
         const view = new ButtonClass(locale);
         view.set({
             keystroke: 'Alt+0',
-            icon: accessibilityIcon,
+            icon: IconAccessibility,
             isToggleable: true
         });
         view.on('execute', ()=>this._toggleDialog());
@@ -4481,7 +4494,7 @@ var accessibilityIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/20
                 id: 'accessibilityHelp',
                 className: 'ck-accessibility-help-dialog',
                 title: t('Accessibility help'),
-                icon: accessibilityIcon,
+                icon: IconAccessibility,
                 hasCloseButton: true,
                 content: this.contentView
             });
@@ -4788,7 +4801,7 @@ var accessibilityIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/20
             on: {
                 // Removing from code coverage since we cannot programmatically set input element files.
                 change: bind.to(/* istanbul ignore next -- @preserve */ ()=>{
-                    if (this.element && this.element.files && this.element.files.length) {
+                    if (this.element?.files?.length) {
                         this.fire('done', this.element.files);
                     }
                     this.element.value = '';
@@ -4803,8 +4816,6 @@ var accessibilityIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/20
     }
 }
 
-var dropdownArrowIcon = "<svg viewBox=\"0 0 10 10\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M.941 4.523a.75.75 0 1 1 1.06-1.06l3.006 3.005 3.005-3.005a.75.75 0 1 1 1.06 1.06l-3.549 3.55a.75.75 0 0 1-1.168-.136L.941 4.523z\"/></svg>";
-
 /**
  * A collapsible UI component. Consists of a labeled button and a container which can be collapsed
  * by clicking the button. The collapsible container can be a host to other UI views.
@@ -4878,7 +4889,7 @@ var dropdownArrowIcon = "<svg viewBox=\"0 0 10 10\" xmlns=\"http://www.w3.org/20
         const bind = buttonView.bindTemplate;
         buttonView.set({
             withText: true,
-            icon: dropdownArrowIcon
+            icon: IconDropdownArrow
         });
         buttonView.extendTemplate({
             attributes: {
@@ -4974,8 +4985,6 @@ var dropdownArrowIcon = "<svg viewBox=\"0 0 10 10\" xmlns=\"http://www.w3.org/20
     }
 }
 
-var checkIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path class=\"ck-icon__fill\" d=\"M16.935 5.328a2 2 0 0 1 0 2.829l-7.778 7.778a2 2 0 0 1-2.829 0L3.5 13.107a1.999 1.999 0 1 1 2.828-2.829l.707.707a1 1 0 0 0 1.414 0l5.658-5.657a2 2 0 0 1 2.828 0z\"/><path d=\"M14.814 6.035 8.448 12.4a1 1 0 0 1-1.414 0l-1.413-1.415A1 1 0 1 0 4.207 12.4l2.829 2.829a1 1 0 0 0 1.414 0l7.778-7.778a1 1 0 1 0-1.414-1.415z\"/></svg>";
-
 /**
  * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
  */ class ColorTileView extends ButtonView {
@@ -4984,7 +4993,7 @@ var checkIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"
         const bind = this.bindTemplate;
         this.set('color', undefined);
         this.set('hasBorder', false);
-        this.icon = checkIcon;
+        this.icon = IconColorTileCheck;
         this.extendTemplate({
             attributes: {
                 style: {
@@ -5034,7 +5043,7 @@ var checkIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"
 	 */ 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)`
         };
@@ -5114,7 +5123,7 @@ var checkIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"
             focusTracker: this.focusTracker,
             gridItems: this.items,
             numberOfColumns: this.columns,
-            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
+            uiLanguageDirection: this.locale?.uiLanguageDirection
         });
     }
     /**
@@ -6298,7 +6307,7 @@ function getTextareaElementClone(element, value) {
 	 * Creates a {@link module:ui/icon/iconview~IconView} instance as {@link #arrowView}.
 	 */ _createArrowView() {
         const arrowView = new IconView();
-        arrowView.content = dropdownArrowIcon;
+        arrowView.content = IconDropdownArrow;
         arrowView.extendTemplate({
             attributes: {
                 class: 'ck-dropdown__arrow'
@@ -6376,7 +6385,7 @@ function getTextareaElementClone(element, value) {
 	 * @private
 	 */ _createArrowView() {
         const arrowView = new IconView();
-        arrowView.content = dropdownArrowIcon;
+        arrowView.content = IconDropdownArrow;
         arrowView.extendTemplate({
             attributes: {
                 class: 'ck-dropdown-menu-list__nested-menu__button__arrow'
@@ -8528,15 +8537,15 @@ const POSITION_OFF_SCREEN = {
 }
 
 const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
-        alignLeft: icons.alignLeft,
-        bold: icons.bold,
-        importExport: icons.importExport,
-        paragraph: icons.paragraph,
-        plus: icons.plus,
-        text: icons.text,
-        threeVerticalDots: icons.threeVerticalDots,
-        pilcrow: icons.pilcrow,
-        dragIndicator: icons.dragIndicator
+        alignLeft: IconAlignLeft,
+        bold: IconBold,
+        importExport: IconImportExport,
+        paragraph: IconParagraph,
+        plus: IconPlus,
+        text: IconText,
+        threeVerticalDots: IconThreeVerticalDots,
+        pilcrow: IconPilcrow,
+        dragIndicator: IconDragIndicator
     }))();
 /**
  * The toolbar view class.
@@ -8600,11 +8609,14 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
         this.set('ariaLabel', t('Editor toolbar'));
         this.set('maxWidth', 'auto');
         this.set('role', 'toolbar');
+        this.set('isGrouping', !!this.options.shouldGroupWhenFull);
         this.items = this.createCollection();
         this.focusTracker = new FocusTracker();
         this.keystrokes = new KeystrokeHandler();
         this.set('class', undefined);
         this.set('isCompact', false);
+        // Static toolbar can be vertical when needed.
+        this.set('isVertical', false);
         this.itemsView = new ItemsView(locale);
         this.children = this.createCollection();
         this.children.add(this.itemsView);
@@ -8631,7 +8643,11 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
             'ck',
             'ck-toolbar',
             bind.to('class'),
-            bind.if('isCompact', 'ck-toolbar_compact')
+            bind.if('isCompact', 'ck-toolbar_compact'),
+            // To group items dynamically, the toolbar needs a dedicated CSS class. Only used for dynamic grouping.
+            bind.if('isGrouping', 'ck-toolbar_grouping'),
+            // When vertical, the toolbar has an additional CSS class. Only used for static layout.
+            bind.if('isVertical', 'ck-toolbar_vertical')
         ];
         if (this.options.shouldGroupWhenFull && this.options.isFloating) {
             classes.push('ck-toolbar_floating');
@@ -8703,6 +8719,23 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
 	 */ fillFromConfig(itemsOrConfig, factory, removeItems) {
         this.items.addMany(this._buildItemsFromConfig(itemsOrConfig, factory, removeItems));
     }
+    /**
+	 * Changes the behavior of toolbar if it does not fit into the available space.
+	 */ switchBehavior(newBehaviorType) {
+        if (this._behavior.type !== newBehaviorType) {
+            this._behavior.destroy();
+            this.itemsView.children.clear();
+            this.focusables.clear();
+            if (newBehaviorType === 'dynamic') {
+                this._behavior = new DynamicGrouping(this);
+                this._behavior.render(this);
+                this._behavior.refreshItems();
+            } else {
+                this._behavior = new StaticLayout(this);
+                this._behavior.render(this);
+            }
+        }
+    }
     /**
 	 * A utility that expands the plain toolbar configuration into a list of view items using a given component factory.
 	 *
@@ -8875,7 +8908,7 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
         // Allow disabling icon by passing false.
         if (icon !== false) {
             // A pre-defined icon picked by name, SVG string, a fallback (default) icon.
-            dropdownView.buttonView.icon = NESTED_TOOLBAR_ICONS[icon] || icon || icons.threeVerticalDots;
+            dropdownView.buttonView.icon = NESTED_TOOLBAR_ICONS[icon] || icon || IconThreeVerticalDots;
         } else {
             dropdownView.buttonView.withText = true;
         }
@@ -8912,27 +8945,20 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
  * At the same time, it also makes it possible to display a toolbar with a vertical layout
  * using the {@link module:ui/toolbar/toolbarview~ToolbarView#isVertical} property.
  */ class StaticLayout {
+    /**
+	 * Toolbar behavior type.
+	 */ type = 'static';
     /**
 	 * Creates an instance of the {@link module:ui/toolbar/toolbarview~StaticLayout} toolbar
 	 * behavior.
 	 *
 	 * @param view An instance of the toolbar that this behavior is added to.
 	 */ constructor(view){
-        const bind = view.bindTemplate;
-        // Static toolbar can be vertical when needed.
-        view.set('isVertical', false);
+        view.isGrouping = false;
         // 1:1 pass–through binding, all ToolbarView#items are visible.
         view.itemsView.children.bindTo(view.items).using((item)=>item);
         // 1:1 pass–through binding, all ToolbarView#items are focusable.
         view.focusables.bindTo(view.items).using((item)=>isFocusable(item) ? item : null);
-        view.extendTemplate({
-            attributes: {
-                class: [
-                    // When vertical, the toolbar has an additional CSS class.
-                    bind.if('isVertical', 'ck-toolbar_vertical')
-                ]
-            }
-        });
     }
     /**
 	 * @inheritDoc
@@ -8959,6 +8985,9 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
  *	└───────────────────────────────────────────────────────────────────────────────────────────────┘
  * ```
  */ class DynamicGrouping {
+    /**
+	 * Toolbar behavior type.
+	 */ type = 'dynamic';
     /**
 	 * A toolbar view this behavior belongs to.
 	 */ view;
@@ -9039,6 +9068,7 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
         this.viewItemsView = view.itemsView;
         this.viewFocusTracker = view.focusTracker;
         this.viewLocale = view.locale;
+        this.view.isGrouping = true;
         this.ungroupedItems = view.createCollection();
         this.groupedItems = view.createCollection();
         this.groupedItemsDropdown = this._createGroupedItemsDropdown();
@@ -9078,14 +9108,6 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
             // some new space is available and we could do some ungrouping.
             this._updateGrouping();
         });
-        view.extendTemplate({
-            attributes: {
-                class: [
-                    // To group items dynamically, the toolbar needs a dedicated CSS class.
-                    'ck-toolbar_grouping'
-                ]
-            }
-        });
     }
     /**
 	 * Enables dynamic items grouping based on the dimensions of the toolbar.
@@ -9102,8 +9124,27 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
         // The dropdown may not be in ToolbarView#children at the moment of toolbar destruction
         // so let's make sure it's actually destroyed along with the toolbar.
         this.groupedItemsDropdown.destroy();
+        // Do not try to remove the same elements if they are already removed.
+        if (this.viewChildren.length > 1) {
+            this.viewChildren.remove(this.groupedItemsDropdown);
+            this.viewChildren.remove(this.viewChildren.last);
+        }
         this.resizeObserver.destroy();
     }
+    /**
+	 * Re-adds all items to the toolbar. Use when the toolbar is re-rendered and the items grouping is lost.
+	 */ refreshItems() {
+        const view = this.view;
+        if (view.items.length) {
+            for(let currentIndex = 0; currentIndex < view.items.length; currentIndex++){
+                const item = [
+                    ...view.items
+                ][currentIndex];
+                this.ungroupedItems.add(item, currentIndex);
+            }
+            this._updateGrouping();
+        }
+    }
     /**
 	 * When called, it will check if any of the {@link #ungroupedItems} do not fit into a single row of the toolbar,
 	 * and it will move them to the {@link #groupedItems} when it happens.
@@ -9257,7 +9298,7 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
             label: t('Show more items'),
             tooltip: true,
             tooltipPosition: locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw',
-            icon: icons.threeVerticalDots
+            icon: IconThreeVerticalDots
         });
         return dropdown;
     }
@@ -9419,7 +9460,7 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
 	 */ _createArrowView() {
         const arrowView = new ButtonView();
         const bind = arrowView.bindTemplate;
-        arrowView.icon = dropdownArrowIcon;
+        arrowView.icon = IconDropdownArrow;
         arrowView.extendTemplate({
             attributes: {
                 class: [
@@ -10737,7 +10778,7 @@ class ColorPickerInputRowView 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', ()=>{
@@ -10750,7 +10791,7 @@ class ColorPickerInputRowView 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';
@@ -10794,7 +10835,7 @@ class ColorPickerInputRowView 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({
@@ -11022,14 +11063,14 @@ class ColorPickerInputRowView 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,
@@ -12068,8 +12109,6 @@ function getLowerCornerPosition(focusedEditableElement, config, getBalloonLeft)
     };
 }
 
-var poweredByIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"53\" height=\"10\" viewBox=\"0 0 53 10\"><path fill=\"#1C2331\" d=\"M31.724 1.492a15.139 15.139 0 0 0 .045 1.16 2.434 2.434 0 0 0-.687-.34 3.68 3.68 0 0 0-1.103-.166 2.332 2.332 0 0 0-1.14.255 1.549 1.549 0 0 0-.686.87c-.15.41-.225.98-.225 1.712 0 .939.148 1.659.444 2.161.297.503.792.754 1.487.754.452.015.9-.094 1.294-.316.296-.174.557-.4.771-.669l.14.852h1.282V.007h-1.623v1.485ZM31 6.496a1.77 1.77 0 0 1-.494.061.964.964 0 0 1-.521-.127.758.758 0 0 1-.296-.466 3.984 3.984 0 0 1-.093-.992 4.208 4.208 0 0 1 .098-1.052.753.753 0 0 1 .307-.477 1.08 1.08 0 0 1 .55-.122c.233-.004.466.026.69.089l.483.144v2.553c-.11.076-.213.143-.307.2a1.73 1.73 0 0 1-.417.189ZM35.68 0l-.702.004c-.322.002-.482.168-.48.497l.004.581c.002.33.164.493.486.49l.702-.004c.322-.002.481-.167.48-.496L36.165.49c-.002-.33-.164-.493-.486-.491ZM36.145 2.313l-1.612.01.034 5.482 1.613-.01-.035-5.482ZM39.623.79 37.989.8 38 2.306l-.946.056.006 1.009.949-.006.024 2.983c.003.476.143.844.419 1.106.275.26.658.39 1.148.387.132 0 .293-.01.483-.03.19-.02.38-.046.57-.08.163-.028.324-.068.482-.119l-.183-1.095-.702.004a.664.664 0 0 1-.456-.123.553.553 0 0 1-.14-.422l-.016-2.621 1.513-.01-.006-1.064-1.514.01-.01-1.503ZM46.226 2.388c-.41-.184-.956-.274-1.636-.27-.673.004-1.215.101-1.627.29-.402.179-.72.505-.888.91-.18.419-.268.979-.264 1.68.004.688.1 1.24.285 1.655.172.404.495.724.9.894.414.18.957.268 1.63.264.68-.004 1.224-.099 1.632-.284.4-.176.714-.501.878-.905.176-.418.263-.971.258-1.658-.004-.702-.097-1.261-.28-1.677a1.696 1.696 0 0 0-.888-.9Zm-.613 3.607a.77.77 0 0 1-.337.501 1.649 1.649 0 0 1-1.317.009.776.776 0 0 1-.343-.497 4.066 4.066 0 0 1-.105-1.02 4.136 4.136 0 0 1 .092-1.03.786.786 0 0 1 .337-.507 1.59 1.59 0 0 1 1.316-.008.79.79 0 0 1 .344.502c.078.337.113.683.105 1.03.012.343-.019.685-.092 1.02ZM52.114 2.07a2.67 2.67 0 0 0-1.128.278c-.39.191-.752.437-1.072.73l-.157-.846-1.273.008.036 5.572 1.623-.01-.024-3.78c.35-.124.646-.22.887-.286.26-.075.53-.114.8-.118l.45-.003.144-1.546-.286.001ZM22.083 7.426l-1.576-2.532a2.137 2.137 0 0 0-.172-.253 1.95 1.95 0 0 0-.304-.29.138.138 0 0 1 .042-.04 1.7 1.7 0 0 0 .328-.374l1.75-2.71c.01-.015.025-.028.024-.048-.01-.01-.021-.007-.031-.007L20.49 1.17a.078.078 0 0 0-.075.045l-.868 1.384c-.23.366-.46.732-.688 1.099a.108.108 0 0 1-.112.06c-.098-.005-.196-.001-.294-.002-.018 0-.038.006-.055-.007.002-.02.002-.039.005-.058a4.6 4.6 0 0 0 .046-.701V1.203c0-.02-.009-.032-.03-.03h-.033L16.93 1.17c-.084 0-.073-.01-.073.076v6.491c-.001.018.006.028.025.027h1.494c.083 0 .072.007.072-.071v-2.19c0-.055-.003-.11-.004-.166a3.366 3.366 0 0 0-.05-.417h.06c.104 0 .209.002.313-.002a.082.082 0 0 1 .084.05c.535.913 1.07 1.824 1.607 2.736a.104.104 0 0 0 .103.062c.554-.003 1.107-.002 1.66-.002l.069-.003-.019-.032-.188-.304ZM27.112 6.555c-.005-.08-.004-.08-.082-.08h-2.414c-.053 0-.106-.003-.159-.011a.279.279 0 0 1-.246-.209.558.558 0 0 1-.022-.15c0-.382 0-.762-.002-1.143 0-.032.007-.049.042-.044h2.504c.029.003.037-.012.034-.038V3.814c0-.089.013-.078-.076-.078h-2.44c-.07 0-.062.003-.062-.06v-.837c0-.047.004-.093.013-.14a.283.283 0 0 1 .241-.246.717.717 0 0 1 .146-.011h2.484c.024.002.035-.009.036-.033l.003-.038.03-.496c.01-.183.024-.365.034-.548.005-.085.003-.087-.082-.094-.218-.018-.437-.038-.655-.05a17.845 17.845 0 0 0-.657-.026 72.994 72.994 0 0 0-1.756-.016 1.7 1.7 0 0 0-.471.064 1.286 1.286 0 0 0-.817.655c-.099.196-.149.413-.145.633v3.875c0 .072.003.144.011.216a1.27 1.27 0 0 0 .711 1.029c.228.113.48.167.734.158.757-.005 1.515.002 2.272-.042.274-.016.548-.034.82-.053.03-.002.043-.008.04-.041-.008-.104-.012-.208-.019-.312a69.964 69.964 0 0 1-.05-.768ZM16.14 7.415l-.127-1.075c-.004-.03-.014-.04-.044-.037a13.125 13.125 0 0 1-.998.073c-.336.01-.672.02-1.008.016-.116-.001-.233-.014-.347-.039a.746.746 0 0 1-.45-.262c-.075-.1-.132-.211-.167-.33a3.324 3.324 0 0 1-.126-.773 9.113 9.113 0 0 1-.015-.749c0-.285.022-.57.065-.852.023-.158.066-.312.127-.46a.728.728 0 0 1 .518-.443 1.64 1.64 0 0 1 .397-.048c.628-.001 1.255.003 1.882.05.022.001.033-.006.036-.026l.003-.031.06-.55c.019-.177.036-.355.057-.532.004-.034-.005-.046-.04-.056a5.595 5.595 0 0 0-1.213-.21 10.783 10.783 0 0 0-.708-.02c-.24-.003-.48.01-.719.041a3.477 3.477 0 0 0-.625.14 1.912 1.912 0 0 0-.807.497c-.185.2-.33.433-.424.688a4.311 4.311 0 0 0-.24 1.096c-.031.286-.045.572-.042.86-.006.43.024.86.091 1.286.04.25.104.497.193.734.098.279.26.53.473.734.214.205.473.358.756.446.344.11.702.17 1.063.177a8.505 8.505 0 0 0 1.578-.083 6.11 6.11 0 0 0 .766-.18c.03-.008.047-.023.037-.057a.157.157 0 0 1-.003-.025Z\"/><path fill=\"#AFE229\" d=\"M6.016 6.69a1.592 1.592 0 0 0-.614.21c-.23.132-.422.32-.56.546-.044.072-.287.539-.287.539l-.836 1.528.009.006c.038.025.08.046.123.063.127.046.26.07.395.073.505.023 1.011-.007 1.517-.003.29.009.58.002.869-.022a.886.886 0 0 0 .395-.116.962.962 0 0 0 .312-.286c.056-.083.114-.163.164-.249.24-.408.48-.816.718-1.226.075-.128.148-.257.222-.386l.112-.192a1.07 1.07 0 0 0 .153-.518l-1.304.023s-1.258-.005-1.388.01Z\"/><path fill=\"#771BFF\" d=\"m2.848 9.044.76-1.39.184-.352c-.124-.067-.245-.14-.367-.21-.346-.204-.706-.384-1.045-.6a.984.984 0 0 1-.244-.207c-.108-.134-.136-.294-.144-.46-.021-.409-.002-.818-.009-1.227-.003-.195 0-.39.003-.585.004-.322.153-.553.427-.713l.833-.488c.22-.13.44-.257.662-.385.05-.029.105-.052.158-.077.272-.128.519-.047.76.085l.044.028c.123.06.242.125.358.196.318.178.635.357.952.537.095.056.187.117.275.184.194.144.254.35.266.578.016.284.007.569.006.853-.001.28.004.558 0 .838.592-.003 1.259 0 1.259 0l.723-.013c-.003-.292-.007-.584-.007-.876 0-.524.015-1.048-.016-1.571-.024-.42-.135-.8-.492-1.067a5.02 5.02 0 0 0-.506-.339A400.52 400.52 0 0 0 5.94.787C5.722.664 5.513.524 5.282.423 5.255.406 5.228.388 5.2.373 4.758.126 4.305-.026 3.807.21c-.097.046-.197.087-.29.14A699.896 699.896 0 0 0 .783 1.948c-.501.294-.773.717-.778 1.31-.004.36-.009.718-.001 1.077.016.754-.017 1.508.024 2.261.016.304.07.6.269.848.127.15.279.28.448.382.622.4 1.283.734 1.92 1.11l.183.109Z\"/></svg>\n";
-
 const DEFAULT_LABEL = 'Powered by';
 /**
  * A helper that enables the "powered by" feature in the editor and renders a link to the project's
@@ -12136,7 +12175,7 @@ const DEFAULT_LABEL = 'Powered by';
         const iconView = new IconView();
         const bind = this.bindTemplate;
         iconView.set({
-            content: poweredByIcon,
+            content: IconProjectLogo,
             isColorInherited: false
         });
         this.setTemplate({
@@ -12616,7 +12655,7 @@ const NESTED_PANEL_HORIZONTAL_OFFSET = 5;
 	 * This is analogous to the {@link module:ui/dropdown/dropdownview~DropdownView}.
 	 */ openAndFocusPanelOnArrowDownKey (menuView) {
         menuView.keystrokes.set('arrowdown', (data, cancel)=>{
-            if (menuView.focusTracker.focusedElement === menuView.buttonView.element) {
+            if (menuView.isEnabled && menuView.focusTracker.focusedElement === menuView.buttonView.element) {
                 if (!menuView.isOpen) {
                     menuView.isOpen = true;
                 }
@@ -12928,6 +12967,12 @@ const NESTED_PANEL_HORIZONTAL_OFFSET = 5;
  * 				]
  * 			},
  * 			{
+ * 				groupId: 'fullscreen',
+ * 				items: [
+ * 					'menuBar:fullscreen'
+ * 				]
+ * 			},
+ * 			{
  * 				groupId: 'restrictedEditingException',
  * 				items: [
  * 					'menuBar:restrictedEditingException'
@@ -13191,6 +13236,12 @@ const DefaultMenuBarItems = [
                     'menuBar:previewMergeFields'
                 ]
             },
+            {
+                groupId: 'fullscreen',
+                items: [
+                    'menuBar:fullscreen'
+                ]
+            },
             {
                 groupId: 'restrictedEditing',
                 items: [
@@ -13209,7 +13260,8 @@ const DefaultMenuBarItems = [
                     'menuBar:insertImage',
                     'menuBar:ckbox',
                     'menuBar:ckfinder',
-                    'menuBar:insertTable'
+                    'menuBar:insertTable',
+                    'menuBar:insertTableLayout'
                 ]
             },
             {
@@ -14065,7 +14117,7 @@ function isMenuDefinition(definition) {
     }
     /**
 	 * Initializes menu bar.
-	 */ _initMenuBar(menuBarView) {
+	 */ initMenuBar(menuBarView) {
         const menuBarViewElement = menuBarView.element;
         this.focusTracker.add(menuBarViewElement);
         this.editor.keystrokes.listenTo(menuBarViewElement);
@@ -14307,7 +14359,7 @@ function isMenuDefinition(definition) {
     }
     // Prioritize contextual toolbars. They are displayed at the selection.
     if (options.isContextual) {
-        weight--;
+        weight -= 2;
     }
     return weight;
 }
@@ -14320,8 +14372,20 @@ function isMenuDefinition(definition) {
 	 * structure of the editor, like panels, icons etc.
 	 */ body;
     /**
-	 * Menu bar view instance. May not be initialized in some editor types.
+	 * Menu bar view instance. Initialized by default in:
+	 *
+	 * * balloon editor;
+	 * * decoupled editor;
+	 * * multiroot editor.
 	 */ menuBarView;
+    /**
+	 * Toolbar view instance. Initialized by default in:
+	 *
+	 * * classic editor;
+	 * * decoupled editor;
+	 * * inline editor;
+	 * * multiroot editor.
+	 */ toolbar;
     /**
 	 * Creates an instance of the editor UI view class.
 	 *
@@ -14595,6 +14659,50 @@ function isMenuDefinition(definition) {
     }
 }
 
+/**
+ * The class representing a single row in a form,
+ */ class FormRowView extends View {
+    /**
+	 * A collection of row items (buttons, dropdowns, etc.).
+	 */ children;
+    /**
+	 * Creates an instance of the form row class.
+	 *
+	 * @param locale The locale instance.
+	 * @param options.labelView When passed, the row gets the `group` and `aria-labelledby`
+	 * DOM attributes and gets described by the label.
+	 */ constructor(locale, options = {}){
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('class', [
+            'ck',
+            'ck-form__row',
+            ...toArray(options.class || [])
+        ]);
+        this.children = this.createCollection();
+        if (options.children) {
+            options.children.forEach((child)=>this.children.add(child));
+        }
+        this.set('_role', null);
+        this.set('_ariaLabelledBy', null);
+        if (options.labelView) {
+            this.set({
+                _role: 'group',
+                _ariaLabelledBy: options.labelView.id
+            });
+        }
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: bind.to('class', (classes)=>classes.join(' ')),
+                role: bind.to('_role'),
+                'aria-labelledby': bind.to('_ariaLabelledBy')
+            },
+            children: this.children
+        });
+    }
+}
+
 /**
  * The iframe view class.
  *
@@ -15287,8 +15395,8 @@ const toPx$4 = /* #__PURE__ */ toUnit('px');
         const bind = this.bindTemplate;
         this.set('isNavigationVisible', true);
         this.focusTracker = new FocusTracker();
-        this.buttonPrevView = this._createButtonView(t('Previous'), icons.previousArrow);
-        this.buttonNextView = this._createButtonView(t('Next'), icons.nextArrow);
+        this.buttonPrevView = this._createButtonView(t('Previous'), IconPreviousArrow);
+        this.buttonNextView = this._createButtonView(t('Next'), IconNextArrow);
         this.content = this.createCollection();
         this.setTemplate({
             tag: 'div',
@@ -15706,7 +15814,7 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
         this._viewConfig = viewConfig;
         if (this._viewConfig.showIcon) {
             this.iconView = new IconView();
-            this.iconView.content = icons.loupe;
+            this.iconView.content = IconLoupe;
             this.fieldWrapperChildren.add(this.iconView, 0);
             this.extendTemplate({
                 attributes: {
@@ -15718,7 +15826,7 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
             this.resetButtonView = new ButtonView(locale);
             this.resetButtonView.set({
                 label: t('Clear'),
-                icon: icons.cancel,
+                icon: IconCancel,
                 class: 'ck-search__reset',
                 isVisible: false,
                 tooltip: true
@@ -16051,7 +16159,7 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
                 const defaultTextConfig = this._config.infoView && this._config.infoView.text;
                 let primaryText, secondaryText;
                 if (data.totalItemsCount) {
-                    if (defaultTextConfig && defaultTextConfig.notFound) {
+                    if (defaultTextConfig?.notFound) {
                         primaryText = defaultTextConfig.notFound.primary;
                         secondaryText = defaultTextConfig.notFound.secondary;
                     } else {
@@ -16059,7 +16167,7 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
                         secondaryText = '';
                     }
                 } else {
-                    if (defaultTextConfig && defaultTextConfig.noSearchableItems) {
+                    if (defaultTextConfig?.noSearchableItems) {
                         primaryText = defaultTextConfig.noSearchableItems.primary;
                         secondaryText = defaultTextConfig.noSearchableItems.secondary;
                     } else {
@@ -16427,7 +16535,7 @@ const toPx$2 = /* #__PURE__ */ toUnit('px');
 	 * The contextual balloon plugin instance.
 	 */ _balloon;
     /**
-	 * Fires `_selectionChangeDebounced` event using `lodash#debounce`.
+	 * Fires `_selectionChangeDebounced` event using `es-toolkit#debounce`.
 	 *
 	 * This event is an internal plugin event which is fired 200 ms after model selection last change.
 	 * This is to makes easy test debounced action without need to use `setTimeout`.
@@ -17257,7 +17365,7 @@ const toPx = /* #__PURE__ */ toUnit('px');
 	 * Creates the {@link #arrowView} instance.
 	 */ _createArrowView() {
         const arrowView = new IconView();
-        arrowView.content = dropdownArrowIcon;
+        arrowView.content = IconDropdownArrow;
         arrowView.extendTemplate({
             attributes: {
                 class: 'ck-menu-bar__menu__button__arrow'
@@ -17681,6 +17789,20 @@ const EVENT_NAME_DELEGATES = [
             topLevelCategoryMenuView.isOpen = false;
         }
     }
+    /**
+	 * Disables all menus in the bar.
+	 */ disable() {
+        for (const topLevelCategoryMenuView of this.children){
+            topLevelCategoryMenuView.isEnabled = false;
+        }
+    }
+    /**
+	 * Enables all menus in the bar.
+	 */ enable() {
+        for (const topLevelCategoryMenuView of this.children){
+            topLevelCategoryMenuView.isEnabled = true;
+        }
+    }
     /**
 	 * Registers a menu view in the menu bar. Every {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} instance must be registered
 	 * in the menu bar to be properly managed.
@@ -17821,5 +17943,5 @@ const EVENT_NAME_DELEGATES = [
     }
 }
 
-export { AccessibilityHelp, AutocompleteView, BalloonPanelView, BalloonToolbar, BlockToolbar, BodyCollection, BoxedEditorUIView, ButtonLabelView, ButtonLabelWithHighlightView, ButtonView, CollapsibleView, ColorGridView, ColorPickerView, ColorSelectorView, ColorTileView, ComponentFactory, ContextualBalloon, CssTransitionDisablerMixin, DefaultMenuBarItems, Dialog, DialogView, DialogViewPosition, DocumentColorCollection, DropdownButtonView, DropdownMenuListItemButtonView, DropdownMenuListItemView, DropdownMenuListView, DropdownMenuNestedMenuView, DropdownMenuPanelPositioningFunctions, DropdownMenuRootListView, DropdownPanelView, DropdownView, EditorUI, EditorUIView, FileDialogButtonView, FileDialogListItemButtonView, FocusCycler, FormHeaderView, HighlightedTextView, IconView, IframeView, InlineEditableUIView, InputNumberView, InputTextView, InputView, LabelView, LabelWithHighlightView, LabeledFieldView, ListItemButtonView, ListItemGroupView, ListItemView, ListSeparatorView, ListView, MenuBarMenuListItemButtonView, MenuBarMenuListItemFileDialogButtonView, MenuBarMenuListItemView, MenuBarMenuListView, MenuBarMenuView, MenuBarView, Notification, SearchInfoView, SearchTextView, SpinnerView, SplitButtonView, StickyPanelView, SwitchButtonView, Template, TextareaView, ToolbarLineBreakView, ToolbarSeparatorView, ToolbarView, TooltipManager, View, ViewCollection, Model as ViewModel, addKeyboardHandlingForGrid, addListToDropdown, addMenuToDropdown, addToolbarToDropdown, clickOutsideHandler, createDropdown, createLabeledDropdown, createLabeledInputNumber, createLabeledInputText, createLabeledTextarea, filterGroupAndItemNames, focusChildOnDropdownOpen, getLocalizedColorOptions, injectCssTransitionDisabler, isFocusable, isViewWithFocusCycler, normalizeColorOptions, normalizeMenuBarConfig, normalizeSingleColorDefinition, normalizeToolbarConfig, submitHandler };
+export { AccessibilityHelp, AutocompleteView, BalloonPanelView, BalloonToolbar, BlockToolbar, BodyCollection, BoxedEditorUIView, ButtonLabelView, ButtonLabelWithHighlightView, ButtonView, CollapsibleView, ColorGridView, ColorPickerView, ColorSelectorView, ColorTileView, ComponentFactory, ContextualBalloon, CssTransitionDisablerMixin, DefaultMenuBarItems, Dialog, DialogView, DialogViewPosition, DocumentColorCollection, DropdownButtonView, DropdownMenuListItemButtonView, DropdownMenuListItemView, DropdownMenuListView, DropdownMenuNestedMenuView, DropdownMenuPanelPositioningFunctions, DropdownMenuRootListView, DropdownPanelView, DropdownView, EditorUI, EditorUIView, FileDialogButtonView, FileDialogListItemButtonView, FocusCycler, FormHeaderView, FormRowView, HighlightedTextView, IconView, IframeView, InlineEditableUIView, InputNumberView, InputTextView, InputView, LabelView, LabelWithHighlightView, LabeledFieldView, ListItemButtonView, ListItemGroupView, ListItemView, ListSeparatorView, ListView, MenuBarMenuListItemButtonView, MenuBarMenuListItemFileDialogButtonView, MenuBarMenuListItemView, MenuBarMenuListView, MenuBarMenuView, MenuBarView, Notification, SearchInfoView, SearchTextView, SpinnerView, SplitButtonView, StickyPanelView, SwitchButtonView, Template, TextareaView, ToolbarLineBreakView, ToolbarSeparatorView, ToolbarView, TooltipManager, View, ViewCollection, Model as ViewModel, addKeyboardHandlingForGrid, addListToDropdown, addMenuToDropdown, addToolbarToDropdown, clickOutsideHandler, createDropdown, createLabeledDropdown, createLabeledInputNumber, createLabeledInputText, createLabeledTextarea, filterGroupAndItemNames, focusChildOnDropdownOpen, getLocalizedColorOptions, injectCssTransitionDisabler, isFocusable, isViewWithFocusCycler, normalizeColorOptions, normalizeMenuBarConfig, normalizeSingleColorDefinition, normalizeToolbarConfig, submitHandler };
 //# sourceMappingURL=index.js.map