@ckeditor/ckeditor5-table 0.0.0-nightly-20251218.0 → 0.0.0-nightly-next-20251218.0

package/dist/index.js

@@ -6,7 +6,7 @@ import { Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { toWidgetEditable, toWidget, Widget, isWidget, WidgetToolbarRepository } from '@ckeditor/ckeditor5-widget/dist/index.js';
 import { first, global, CKEditorError, KeystrokeHandler, FocusTracker, Collection, getLocalizedArrowKeyCodeDirection, Rect, priorities, DomEmitterMixin, toUnit } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
-import { IconTable, IconTableColumn, IconTableRow, IconTableMergeCell, IconCheck, IconCancel, IconAlignBottom, IconAlignMiddle, IconAlignTop, IconAlignJustify, IconAlignRight, IconAlignCenter, IconAlignLeft, IconTableCellProperties, IconTableLayout, IconTableProperties, IconObjectInlineRight, IconObjectCenter, IconObjectInlineLeft, IconCaption, IconPreviousArrow, IconObjectRight, IconObjectLeft } from '@ckeditor/ckeditor5-icons/dist/index.js';
+import { IconTable, IconTableColumn, IconTableRow, IconTableMergeCell, IconPreviousArrow, IconAlignBottom, IconAlignMiddle, IconAlignTop, IconAlignJustify, IconAlignRight, IconAlignCenter, IconAlignLeft, IconTableCellProperties, IconTableLayout, IconTableProperties, IconObjectRight, IconObjectLeft, IconObjectInlineRight, IconObjectCenter, IconObjectInlineLeft, IconCaption } from '@ckeditor/ckeditor5-icons/dist/index.js';
 import { View, addKeyboardHandlingForGrid, ButtonView, createDropdown, MenuBarMenuView, SwitchButtonView, SplitButtonView, addListToDropdown, UIModel, ViewCollection, FocusCycler, InputTextView, ColorSelectorView, FormHeaderView, FormRowView, submitHandler, LabelView, LabeledFieldView, createLabeledDropdown, createLabeledInputText, ToolbarView, BalloonPanelView, ContextualBalloon, normalizeColorOptions, getLocalizedColorOptions, clickOutsideHandler, DropdownButtonView } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { ClipboardMarkersUtils, ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard/dist/index.js';
 import { DomEventObserver, isColorStyleValue, isLengthStyleValue, isPercentageStyleValue, addBorderStylesRules, addPaddingStylesRules, addBackgroundStylesRules, addMarginStylesRules, enableViewPlaceholder, ModelElement } from '@ckeditor/ckeditor5-engine/dist/index.js';
@@ -1053,8 +1053,8 @@ const downcastTableAlignmentConfig = {
  *
  * @internal
  */ function isTableCellTypeEnabled(editor) {
-    const { model, config } = editor;
-    return model.schema.checkAttribute('tableCell', 'tableCellType') && config.get('experimentalFlags.tableCellTypeSupport') === true;
+    const { model } = editor;
+    return model.schema.checkAttribute('tableCell', 'tableCellType');
 }
 
 /**
@@ -2175,10 +2175,7 @@ const downcastTableAlignmentConfig = {
  * Downcasts a plain table (also used in the clipboard pipeline).
  */ function convertPlainTable(editor) {
     return (table, conversionApi)=>{
-        const hasPlainTableOutput = editor.plugins.has('PlainTableOutput');
-        const isClipboardPipeline = conversionApi.options.isClipboardPipeline;
-        const useExtendedAlignment = editor.config.get('experimentalFlags.useExtendedTableBlockAlignment');
-        if (!hasPlainTableOutput && !(useExtendedAlignment && isClipboardPipeline)) {
+        if (!conversionApi.options.isClipboardPipeline && !editor.plugins.has('PlainTableOutput')) {
             return null;
         }
         return downcastPlainTable(table, conversionApi, editor);
@@ -2188,10 +2185,7 @@ const downcastTableAlignmentConfig = {
  * Downcasts a plain table caption (also used in the clipboard pipeline).
  */ function convertPlainTableCaption(editor) {
     return (modelElement, { writer, options })=>{
-        const hasPlainTableOutput = editor.plugins.has('PlainTableOutput');
-        const isClipboardPipeline = options.isClipboardPipeline;
-        const useExtendedAlignment = editor.config.get('experimentalFlags.useExtendedTableBlockAlignment');
-        if (!hasPlainTableOutput && !(useExtendedAlignment && isClipboardPipeline)) {
+        if (!options.isClipboardPipeline && !editor.plugins.has('PlainTableOutput')) {
             return null;
         }
         if (modelElement.parent.name === 'table') {
@@ -2279,10 +2273,7 @@ const downcastTableAlignmentConfig = {
             return dispatcher.on(`attribute:${modelAttribute}:table`, (evt, data, conversionApi)=>{
                 const { item, attributeNewValue } = data;
                 const { mapper, writer } = conversionApi;
-                const hasPlainTableOutput = editor.plugins.has('PlainTableOutput');
-                const isClipboardPipeline = conversionApi.options.isClipboardPipeline;
-                const useExtendedAlignment = editor.config.get('experimentalFlags.useExtendedTableBlockAlignment');
-                if (!hasPlainTableOutput && !(useExtendedAlignment && isClipboardPipeline)) {
+                if (!conversionApi.options.isClipboardPipeline && !editor.plugins.has('PlainTableOutput')) {
                     return;
                 }
                 if (!conversionApi.consumable.consume(item, evt.name)) {
@@ -7907,7 +7898,7 @@ const isEmpty = (val)=>val === '';
  *
  * @internal
  * @param t The "t" function provided by the editor that is used to localize strings.
- */ function getBorderStyleLabels$1(t) {
+ */ function getBorderStyleLabels(t) {
     return {
         none: t('None'),
         solid: t('Solid'),
@@ -7977,9 +7968,9 @@ const isEmpty = (val)=>val === '';
  *
  * @internal
  * @param defaultStyle The default border.
- */ function getBorderStyleDefinitions$1(view, defaultStyle) {
+ */ function getBorderStyleDefinitions(view, defaultStyle) {
     const itemDefinitions = new Collection();
-    const styleLabels = getBorderStyleLabels$1(view.t);
+    const styleLabels = getBorderStyleLabels(view.t);
     for(const style in styleLabels){
         const definition = {
             type: 'button',
@@ -8022,7 +8013,7 @@ const isEmpty = (val)=>val === '';
  * @param options.propertyName The name of the observable property in the view.
  * @param options.nameToValue A function that maps a button name to a value. By default names are the same as values.
  * @param options.defaultValue Default value for the property.
- */ function fillToolbar$1(options) {
+ */ function fillToolbar(options) {
     const { view, icons, toolbar, labels, propertyName, nameToValue, defaultValue } = options;
     for(const name in labels){
         const button = new ButtonView(view.locale);
@@ -8226,10 +8217,10 @@ const isEmpty = (val)=>val === '';
  * @param options.defaultColorValue If specified, the color input view will replace the "Remove color" button with
  * the "Restore default" button. Instead of clearing the input field, the default color value will be set.
  * @param options.colorPickerConfig The configuration of the color picker. You could disable it or define your output format.
- */ function getLabeledColorInputCreator$1(options) {
+ */ function getLabeledColorInputCreator(options) {
     return (labeledFieldView, viewUid, statusUid)=>{
         const colorInputView = new ColorInputView(labeledFieldView.locale, {
-            colorDefinitions: colorConfigToColorGridDefinitions$1(options.colorConfig),
+            colorDefinitions: colorConfigToColorGridDefinitions(options.colorConfig),
             columns: options.columns,
             defaultColorValue: options.defaultColorValue,
             colorPickerConfig: options.colorPickerConfig
@@ -8256,7 +8247,7 @@ const isEmpty = (val)=>val === '';
     const parsedValue = parseFloat(value);
     return !Number.isNaN(parsedValue) && value === String(parsedValue);
 }
-function colorConfigToColorGridDefinitions$1(colorConfig) {
+function colorConfigToColorGridDefinitions(colorConfig) {
     return colorConfig.map((item)=>({
             color: item.model,
             label: item.label,
@@ -8294,6 +8285,9 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
     /**
 	 * An input that allows specifying the table cell background color.
 	 */ backgroundInput;
+    /**
+	 * A dropdown that allows selecting the type of the table cell (data or header).
+	 */ cellTypeDropdown;
     /**
 	 * An input that allows specifying the table cell padding.
 	 */ paddingInput;
@@ -8315,6 +8309,9 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
     /**
 	 * The "Cancel" button view.
 	 */ cancelButtonView;
+    /**
+	 * The "Back" button view.
+	 */ backButtonView;
     /**
 	 * A collection of views that can be focused in the form.
 	 */ _focusables;
@@ -8340,11 +8337,13 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
             width: '',
             height: '',
             horizontalAlignment: '',
-            verticalAlignment: ''
+            verticalAlignment: '',
+            cellType: ''
         });
         this.options = options;
         const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
         const { backgroundRowLabel, backgroundInput } = this._createBackgroundFields();
+        const { cellTypeRowLabel, cellTypeDropdown } = this._createCellTypeField();
         const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields();
         const { horizontalAlignmentToolbar, verticalAlignmentToolbar, alignmentLabel } = this._createAlignmentFields();
         this.focusTracker = new FocusTracker();
@@ -8354,6 +8353,7 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
         this.borderWidthInput = borderWidthInput;
         this.borderColorInput = borderColorInput;
         this.backgroundInput = backgroundInput;
+        this.cellTypeDropdown = cellTypeDropdown;
         this.paddingInput = this._createPaddingField();
         this.widthInput = widthInput;
         this.heightInput = heightInput;
@@ -8365,6 +8365,7 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
         const { saveButtonView, cancelButtonView } = this._createActionButtons();
         this.saveButtonView = saveButtonView;
         this.cancelButtonView = cancelButtonView;
+        this.backButtonView = this._createBackButton();
         this._focusables = new ViewCollection();
         this._focusCycler = new FocusCycler({
             focusables: this._focusables,
@@ -8378,28 +8379,42 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
             }
         });
         // Form header.
-        this.children.add(new FormHeaderView(locale, {
+        const header = new FormHeaderView(locale, {
             label: this.t('Cell properties')
-        }));
+        });
+        header.children.add(this.backButtonView, 0);
+        this.children.add(header);
         // Border row.
         this.children.add(new FormRowView(locale, {
             labelView: borderRowLabel,
             children: [
                 borderRowLabel,
                 borderStyleDropdown,
-                borderColorInput,
-                borderWidthInput
+                borderWidthInput,
+                borderColorInput
             ],
             class: 'ck-table-form__border-row'
         }));
-        // Background.
+        // Background and cell type.
         this.children.add(new FormRowView(locale, {
-            labelView: backgroundRowLabel,
             children: [
-                backgroundRowLabel,
-                backgroundInput
-            ],
-            class: 'ck-table-form__background-row'
+                new FormRowView(locale, {
+                    labelView: cellTypeRowLabel,
+                    children: [
+                        cellTypeRowLabel,
+                        cellTypeDropdown
+                    ],
+                    class: 'ck-table-form__cell-type-row'
+                }),
+                new FormRowView(locale, {
+                    labelView: backgroundRowLabel,
+                    children: [
+                        backgroundRowLabel,
+                        backgroundInput
+                    ],
+                    class: 'ck-table-form__background-row'
+                })
+            ]
         }));
         // Dimensions row and padding.
         this.children.add(new FormRowView(locale, {
@@ -8437,8 +8452,8 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
         // Action row.
         this.children.add(new FormRowView(locale, {
             children: [
-                this.saveButtonView,
-                this.cancelButtonView
+                this.cancelButtonView,
+                this.saveButtonView
             ],
             class: 'ck-table-form__action-row'
         }));
@@ -8477,14 +8492,16 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
             this.borderStyleDropdown,
             this.borderColorInput,
             this.borderWidthInput,
+            this.cellTypeDropdown,
             this.backgroundInput,
             this.widthInput,
             this.heightInput,
             this.paddingInput,
             this.horizontalAlignmentToolbar,
             this.verticalAlignmentToolbar,
+            this.cancelButtonView,
             this.saveButtonView,
-            this.cancelButtonView
+            this.backButtonView
         ].forEach((view)=>{
             // Register the view as focusable.
             this._focusables.add(view);
@@ -8519,7 +8536,7 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
             width: defaultTableCellProperties.borderWidth,
             color: defaultTableCellProperties.borderColor
         };
-        const colorInputCreator = getLabeledColorInputCreator$1({
+        const colorInputCreator = getLabeledColorInputCreator({
             colorConfig: this.options.borderColors,
             columns: 5,
             defaultColorValue: defaultBorder.color,
@@ -8532,7 +8549,7 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
         const borderRowLabel = new LabelView(locale);
         borderRowLabel.text = t('Border');
         // -- Style ---------------------------------------------------
-        const styleLabels = getBorderStyleLabels$1(t);
+        const styleLabels = getBorderStyleLabels(t);
         const borderStyleDropdown = new LabeledFieldView(locale, createLabeledDropdown);
         borderStyleDropdown.set({
             label: accessibleLabel,
@@ -8552,7 +8569,7 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
             this.borderStyle = evt.source._borderStyleValue;
         });
         borderStyleDropdown.bind('isEmpty').to(this, 'borderStyle', (value)=>!value);
-        addListToDropdown(borderStyleDropdown.fieldView, getBorderStyleDefinitions$1(this, defaultBorder.style), {
+        addListToDropdown(borderStyleDropdown.fieldView, getBorderStyleDefinitions(this, defaultBorder.style), {
             role: 'menu',
             ariaLabel: accessibleLabel
         });
@@ -8563,7 +8580,7 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
             class: 'ck-table-form__border-width'
         });
         borderWidthInput.fieldView.bind('value').to(this, 'borderWidth');
-        borderWidthInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$3);
+        borderWidthInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$1);
         borderWidthInput.fieldView.on('input', ()=>{
             this.borderWidth = borderWidthInput.fieldView.element.value;
         });
@@ -8574,7 +8591,7 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
             class: 'ck-table-form__border-color'
         });
         borderColorInput.fieldView.bind('value').to(this, 'borderColor');
-        borderColorInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$3);
+        borderColorInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$1);
         borderColorInput.fieldView.on('input', ()=>{
             this.borderColor = borderColorInput.fieldView.value;
         });
@@ -8582,12 +8599,12 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
         this.on('change:borderStyle', (evt, name, newValue, oldValue)=>{
             // When removing the border (`border-style:none`), clear the remaining `border-*` properties.
             // See: https://github.com/ckeditor/ckeditor5/issues/6227.
-            if (!isBorderStyleSet$3(newValue)) {
+            if (!isBorderStyleSet$1(newValue)) {
                 this.borderColor = '';
                 this.borderWidth = '';
             }
             // When setting the `border-style` from `none`, set the default `border-color` and `border-width` properties.
-            if (!isBorderStyleSet$3(oldValue)) {
+            if (!isBorderStyleSet$1(oldValue)) {
                 this.borderColor = defaultBorder.color;
                 this.borderWidth = defaultBorder.width;
             }
@@ -8610,7 +8627,7 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
         const backgroundRowLabel = new LabelView(locale);
         backgroundRowLabel.text = t('Background');
         // -- Background color input -----------------------------------
-        const colorInputCreator = getLabeledColorInputCreator$1({
+        const colorInputCreator = getLabeledColorInputCreator({
             colorConfig: this.options.backgroundColors,
             columns: 5,
             defaultColorValue: this.options.defaultTableCellProperties.backgroundColor,
@@ -8630,6 +8647,46 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
             backgroundInput
         };
     }
+    /**
+	 * Create cell type field.
+	 *
+	 * * {@link #cellTypeDropdown}.
+	 *
+	 * @internal
+	 */ _createCellTypeField() {
+        const locale = this.locale;
+        const t = this.t;
+        const cellTypeRowLabel = new LabelView(locale);
+        cellTypeRowLabel.text = t('Cell type');
+        const cellTypeLabels = this._cellTypeLabels;
+        const cellTypeDropdown = new LabeledFieldView(locale, createLabeledDropdown);
+        cellTypeDropdown.set({
+            label: t('Cell type'),
+            class: 'ck-table-cell-properties-form__cell-type'
+        });
+        cellTypeDropdown.fieldView.buttonView.set({
+            ariaLabel: t('Cell type'),
+            ariaLabelledBy: undefined,
+            isOn: false,
+            withText: true,
+            tooltip: t('Cell type')
+        });
+        cellTypeDropdown.fieldView.buttonView.bind('label').to(this, 'cellType', (value)=>{
+            return cellTypeLabels[value || 'data'];
+        });
+        cellTypeDropdown.fieldView.on('execute', (evt)=>{
+            this.cellType = evt.source._cellTypeValue;
+        });
+        cellTypeDropdown.bind('isEmpty').to(this, 'cellType', (value)=>!value);
+        addListToDropdown(cellTypeDropdown.fieldView, this._getCellTypeDefinitions(), {
+            role: 'menu',
+            ariaLabel: t('Cell type')
+        });
+        return {
+            cellTypeRowLabel,
+            cellTypeDropdown
+        };
+    }
     /**
 	 * Creates the following form fields:
 	 *
@@ -8726,9 +8783,10 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
         horizontalAlignmentToolbar.set({
             isCompact: true,
             role: 'radiogroup',
-            ariaLabel: t('Horizontal text alignment toolbar')
+            ariaLabel: t('Horizontal text alignment toolbar'),
+            class: 'ck-table-cell-properties-form__horizontal-alignment-toolbar'
         });
-        fillToolbar$1({
+        fillToolbar({
             view: this,
             icons: ALIGNMENT_ICONS,
             toolbar: horizontalAlignmentToolbar,
@@ -8752,9 +8810,10 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
         verticalAlignmentToolbar.set({
             isCompact: true,
             role: 'radiogroup',
-            ariaLabel: t('Vertical text alignment toolbar')
+            ariaLabel: t('Vertical text alignment toolbar'),
+            class: 'ck-table-cell-properties-form__vertical-alignment-toolbar'
         });
-        fillToolbar$1({
+        fillToolbar({
             view: this,
             icons: ALIGNMENT_ICONS,
             toolbar: verticalAlignmentToolbar,
@@ -8786,8 +8845,7 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
         ];
         saveButtonView.set({
             label: t('Save'),
-            icon: IconCheck,
-            class: 'ck-button-save',
+            class: 'ck-button-action',
             type: 'submit',
             withText: true
         });
@@ -8796,8 +8854,6 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
         });
         cancelButtonView.set({
             label: t('Cancel'),
-            icon: IconCancel,
-            class: 'ck-button-cancel',
             withText: true
         });
         cancelButtonView.delegate('execute').to(this, 'cancel');
@@ -8806,6 +8862,43 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
             cancelButtonView
         };
     }
+    /**
+	 * Creates a back button view that cancels the form.
+	 */ _createBackButton() {
+        const t = this.locale.t;
+        const backButton = new ButtonView(this.locale);
+        backButton.set({
+            class: 'ck-button-back',
+            label: t('Back'),
+            icon: IconPreviousArrow,
+            tooltip: true
+        });
+        backButton.delegate('execute').to(this, 'cancel');
+        return backButton;
+    }
+    /**
+	 * Creates the cell type dropdown definitions.
+	 */ _getCellTypeDefinitions() {
+        const itemDefinitions = new Collection();
+        const cellTypeLabels = this._cellTypeLabels;
+        for (const type of [
+            'data',
+            'header'
+        ]){
+            const definition = {
+                type: 'button',
+                model: new UIModel({
+                    _cellTypeValue: type,
+                    label: cellTypeLabels[type],
+                    role: 'menuitemradio',
+                    withText: true
+                })
+            };
+            definition.model.bind('isOn').to(this, 'cellType', (value)=>value === type);
+            itemDefinitions.add(definition);
+        }
+        return itemDefinitions;
+    }
     /**
 	 * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
 	 */ get _horizontalAlignmentLabels() {
@@ -8842,8 +8935,17 @@ function colorConfigToColorGridDefinitions$1(colorConfig) {
             bottom: t('Align cell text to the bottom')
         };
     }
+    /**
+	 * Provides localized labels for {@link #cellTypeDropdown}.
+	 */ get _cellTypeLabels() {
+        const t = this.t;
+        return {
+            data: t('Data cell'),
+            header: t('Header cell')
+        };
+    }
 }
-function isBorderStyleSet$3(value) {
+function isBorderStyleSet$1(value) {
     return value !== 'none';
 }
 
@@ -8942,9 +9044,9 @@ const BALLOON_POSITIONS = /* #__PURE__ */ (()=>[
     return Rect.getBoundingRect(rects);
 }
 
-const ERROR_TEXT_TIMEOUT$3 = 500;
+const ERROR_TEXT_TIMEOUT$1 = 500;
 // Map of view properties and related commands.
-const propertyToCommandMap$3 = {
+const propertyToCommandMap$1 = {
     borderStyle: 'tableCellBorderStyle',
     borderColor: 'tableCellBorderColor',
     borderWidth: 'tableCellBorderWidth',
@@ -8953,7 +9055,8 @@ const propertyToCommandMap$3 = {
     padding: 'tableCellPadding',
     backgroundColor: 'tableCellBackgroundColor',
     horizontalAlignment: 'tableCellHorizontalAlignment',
-    verticalAlignment: 'tableCellVerticalAlignment'
+    verticalAlignment: 'tableCellVerticalAlignment',
+    cellType: 'tableCellType'
 };
 /**
  * The table cell properties UI plugin. It introduces the `'tableCellProperties'` button
@@ -9040,7 +9143,7 @@ const propertyToCommandMap$3 = {
                 tooltip: true
             });
             this.listenTo(view, 'execute', ()=>this._showView());
-            const commands = Object.values(propertyToCommandMap$3).map((commandName)=>editor.commands.get(commandName));
+            const commands = Object.values(propertyToCommandMap$1).map((commandName)=>editor.commands.get(commandName)).filter((val)=>!!val);
             view.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled)=>areEnabled.some((isCommandEnabled)=>isCommandEnabled));
             return view;
         });
@@ -9146,6 +9249,11 @@ const propertyToCommandMap$3 = {
         }));
         view.on('change:horizontalAlignment', this._getPropertyChangeCallback('tableCellHorizontalAlignment'));
         view.on('change:verticalAlignment', this._getPropertyChangeCallback('tableCellVerticalAlignment'));
+        const cellTypeCommand = editor.commands.get('tableCellType');
+        if (cellTypeCommand) {
+            view.cellTypeDropdown.bind('isEnabled').to(cellTypeCommand, 'isEnabled');
+            view.on('change:cellType', this._getPropertyChangeCallback('tableCellType'));
+        }
         return view;
     }
     /**
@@ -9158,12 +9266,24 @@ const propertyToCommandMap$3 = {
 	 */ _fillViewFormFromCommandValues() {
         const commands = this.editor.commands;
         const borderStyleCommand = commands.get('tableCellBorderStyle');
-        Object.entries(propertyToCommandMap$3).map(([property, commandName])=>{
+        Object.entries(propertyToCommandMap$1).flatMap(([property, commandName])=>{
+            const command = commands.get(commandName);
+            if (!command) {
+                return [];
+            }
             const propertyKey = property;
-            const defaultValue = this.view === this._viewWithContentTableDefaults ? this._defaultContentTableCellProperties[propertyKey] || '' : this._defaultLayoutTableCellProperties[propertyKey] || '';
-            return [
+            let defaultValue;
+            if (propertyKey === 'cellType') {
+                defaultValue = '';
+            } else {
+                defaultValue = this.view === this._viewWithContentTableDefaults ? this._defaultContentTableCellProperties[propertyKey] || '' : this._defaultLayoutTableCellProperties[propertyKey] || '';
+            }
+            const entry = [
                 property,
-                commands.get(commandName).value || defaultValue
+                command.value || defaultValue
+            ];
+            return [
+                entry
             ];
         }).forEach(([property, value])=>{
             // Do not set the `border-color` and `border-width` fields if `border-style:none`.
@@ -9264,7 +9384,7 @@ const propertyToCommandMap$3 = {
         const { commandName, viewField, validator, errorText } = options;
         const setErrorTextDebounced = debounce(()=>{
             viewField.errorText = errorText;
-        }, ERROR_TEXT_TIMEOUT$3);
+        }, ERROR_TEXT_TIMEOUT$1);
         return (evt, propertyName, newValue)=>{
             setErrorTextDebounced.cancel();
             // Do not execute the command on initial call (opening the table properties view).
@@ -10050,10 +10170,8 @@ const ALIGN_VALUES_REG_EXP = /^(left|center|right|justify)$/;
         editor.commands.add('tableCellHorizontalAlignment', new TableCellHorizontalAlignmentCommand(editor, defaultTableCellProperties.horizontalAlignment));
         enableVerticalAlignmentProperty(schema, conversion, defaultTableCellProperties.verticalAlignment);
         editor.commands.add('tableCellVerticalAlignment', new TableCellVerticalAlignmentCommand(editor, defaultTableCellProperties.verticalAlignment));
-        if (editor.config.get('experimentalFlags.tableCellTypeSupport')) {
-            enableCellTypeProperty(editor);
-            editor.commands.add('tableCellType', new TableCellTypeCommand(editor));
-        }
+        enableCellTypeProperty(editor);
+        editor.commands.add('tableCellType', new TableCellTypeCommand(editor));
     }
 }
 /**
@@ -12238,7 +12356,7 @@ const TABLE_TYPES = [
         const defaultTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
             includeAlignmentProperty: true
         });
-        const useInlineStyles = editor.config.get('table.tableProperties.alignment.useInlineStyles') !== false;
+        const useInlineStyles = editor.config.get('table.tableProperties.alignment.useInlineStyles') === true;
         editor.data.addStyleProcessorRules(addMarginStylesRules);
         editor.data.addStyleProcessorRules(addBorderStylesRules);
         enableBorderProperties(editor, {
@@ -12249,11 +12367,7 @@ const TABLE_TYPES = [
         editor.commands.add('tableBorderColor', new TableBorderColorCommand(editor, defaultTableProperties.borderColor));
         editor.commands.add('tableBorderStyle', new TableBorderStyleCommand(editor, defaultTableProperties.borderStyle));
         editor.commands.add('tableBorderWidth', new TableBorderWidthCommand(editor, defaultTableProperties.borderWidth));
-        if (editor.config.get('experimentalFlags.useExtendedTableBlockAlignment')) {
-            enableExtendedAlignmentProperty(schema, conversion, defaultTableProperties.alignment, useInlineStyles);
-        } else {
-            enableAlignmentProperty(schema, conversion, defaultTableProperties.alignment);
-        }
+        enableAlignmentProperty(schema, conversion, defaultTableProperties.alignment, useInlineStyles);
         editor.commands.add('tableAlignment', new TableAlignmentCommand(editor, defaultTableProperties.alignment));
         enableTableToFigureProperty(schema, conversion, {
             modelAttribute: 'tableWidth',
@@ -12280,20 +12394,18 @@ const TABLE_TYPES = [
             defaultValue: defaultTableProperties.backgroundColor
         });
         editor.commands.add('tableBackgroundColor', new TableBackgroundColorCommand(editor, defaultTableProperties.backgroundColor));
-        if (editor.config.get('experimentalFlags.useExtendedTableBlockAlignment')) {
-            const viewDoc = editor.editing.view.document;
-            // Adjust clipboard output to wrap tables in divs if needed (for alignment).
-            this.listenTo(viewDoc, 'clipboardOutput', (evt, data)=>{
-                editor.editing.view.change((writer)=>{
-                    for (const { item } of writer.createRangeIn(data.content)){
-                        wrapInDivIfNeeded(item, writer);
-                    }
-                    data.dataTransfer.setData('text/html', this.editor.data.htmlProcessor.toData(data.content));
-                });
-            }, {
-                priority: 'lowest'
+        const viewDoc = editor.editing.view.document;
+        // Adjust clipboard output to wrap tables in divs if needed (for alignment).
+        this.listenTo(viewDoc, 'clipboardOutput', (evt, data)=>{
+            editor.editing.view.change((writer)=>{
+                for (const { item } of writer.createRangeIn(data.content)){
+                    wrapInDivIfNeeded(item, writer);
+                }
+                data.dataTransfer.setData('text/html', this.editor.data.htmlProcessor.toData(data.content));
             });
-        }
+        }, {
+            priority: 'lowest'
+        });
     }
 }
 /**
@@ -12363,10 +12475,10 @@ function insertWrapperWithAlignment(writer, align, table) {
     });
 }
 /**
- * Enables the extended block`'alignment'` attribute for table.
+ * Enables the `'alignment'` attribute for table.
  *
  * @param defaultValue The default alignment value.
- */ function enableExtendedAlignmentProperty(schema, conversion, defaultValue, useInlineStyles) {
+ */ function enableAlignmentProperty(schema, conversion, defaultValue, useInlineStyles) {
     schema.extend('table', {
         allowAttributes: [
             'tableAlignment'
@@ -12466,170 +12578,32 @@ function insertWrapperWithAlignment(writer, align, table) {
     conversion.for('upcast').add(upcastTableAlignedDiv(defaultValue));
 }
 /**
- * Enables the `'alignment'` attribute for table.
+ * Returns a function that converts the table view representation:
  *
- * @param defaultValue The default alignment value.
- */ function enableAlignmentProperty(schema, conversion, defaultValue) {
-    const ALIGN_VALUES_REG_EXP = /^(left|center|right)$/;
-    const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
-    schema.extend('table', {
-        allowAttributes: [
-            'tableAlignment'
-        ]
-    });
-    schema.setAttributeProperties('tableAlignment', {
-        isFormatting: true
-    });
-    conversion.for('downcast').attributeToAttribute({
-        model: {
-            name: 'table',
-            key: 'tableAlignment',
-            values: [
-                'left',
-                'center',
-                'right'
-            ]
-        },
-        view: {
-            left: {
-                key: 'style',
-                value: {
-                    float: 'left'
-                }
-            },
-            right: {
-                key: 'style',
-                value: {
-                    float: 'right'
-                }
-            },
-            center: (alignment, conversionApi, data)=>{
-                const value = data.item.getAttribute('tableType') !== 'layout' ? {
-                    // Model: `alignment:center` => CSS: `float:none`.
-                    float: 'none'
-                } : {
-                    'margin-left': 'auto',
-                    'margin-right': 'auto'
-                };
-                return {
-                    key: 'style',
-                    value
-                };
-            }
-        },
-        converterPriority: 'high'
-    });
-    conversion.for('upcast')// Support for the `float:*;` CSS definition for the table alignment.
-    .attributeToAttribute({
-        view: {
-            name: /^(table|figure)$/,
-            styles: {
-                float: FLOAT_VALUES_REG_EXP
-            }
-        },
-        model: {
-            key: 'tableAlignment',
-            value: (viewElement, conversionApi, data)=>{
-                // Ignore other figure elements.
-                if (viewElement.name == 'figure' && !viewElement.hasClass('table')) {
-                    return;
-                }
-                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
-                let align = viewElement.getStyle('float');
-                // CSS: `float:none` => Model: `alignment:center`.
-                if (align === 'none') {
-                    align = 'center';
-                }
-                if (align !== localDefaultValue) {
-                    return align;
-                }
-                // Consume the style even if not applied to the element so it won't be processed by other converters.
-                conversionApi.consumable.consume(viewElement, {
-                    styles: 'float'
-                });
-            }
-        }
-    })// Support for the `margin-left:auto; margin-right:auto;` CSS definition for the table alignment.
-    .attributeToAttribute({
-        view: {
-            name: /^(table|figure)$/,
-            styles: {
-                'margin-left': 'auto',
-                'margin-right': 'auto'
-            }
-        },
-        model: {
-            key: 'tableAlignment',
-            value: (viewElement, conversionApi, data)=>{
-                // Ignore other figure elements.
-                if (viewElement.name == 'figure' && !viewElement.hasClass('table')) {
-                    return;
-                }
-                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
-                const align = 'center';
-                if (align !== localDefaultValue) {
-                    return align;
-                }
-                // Consume the styles even if not applied to the element so it won't be processed by other converters.
-                conversionApi.consumable.consume(viewElement, {
-                    styles: [
-                        'margin-left',
-                        'margin-right'
-                    ]
-                });
-            }
-        }
-    })// Support for the `align` attribute as the backward compatibility while pasting from other sources.
-    .attributeToAttribute({
-        view: {
-            name: 'table',
-            attributes: {
-                align: ALIGN_VALUES_REG_EXP
-            }
-        },
-        model: {
-            key: 'tableAlignment',
-            value: (viewElement, conversionApi, data)=>{
-                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
-                const align = viewElement.getAttribute('align');
-                if (align !== localDefaultValue) {
-                    return align;
-                }
-                // Consume the attribute even if not applied to the element so it won't be processed by other converters.
-                conversionApi.consumable.consume(viewElement, {
-                    attributes: 'align'
-                });
-            }
-        }
-    });
-}
-/**
- * Returns a function that converts the table view representation:
- *
- * ```html
- * <div align="right"><table>...</table></div>
- * <!-- or -->
- * <div align="center"><table>...</table></div>
- * <!-- or -->
- * <div align="left"><table>...</table></div>
- * ```
- *
- * to the model representation:
- *
- * ```xml
- * <table tableAlignment="right|center|left"></table>
- * ```
- *
- * @internal
- */ function upcastTableAlignedDiv(defaultValue) {
-    return (dispatcher)=>{
-        dispatcher.on('element:div', (evt, data, conversionApi)=>{
-            // Do not convert if this is not a "table wrapped in div with align attribute".
-            if (!conversionApi.consumable.test(data.viewItem, {
-                name: true,
-                attributes: 'align'
-            })) {
-                return;
+ * ```html
+ * <div align="right"><table>...</table></div>
+ * <!-- or -->
+ * <div align="center"><table>...</table></div>
+ * <!-- or -->
+ * <div align="left"><table>...</table></div>
+ * ```
+ *
+ * to the model representation:
+ *
+ * ```xml
+ * <table tableAlignment="right|center|left"></table>
+ * ```
+ *
+ * @internal
+ */ function upcastTableAlignedDiv(defaultValue) {
+    return (dispatcher)=>{
+        dispatcher.on('element:div', (evt, data, conversionApi)=>{
+            // Do not convert if this is not a "table wrapped in div with align attribute".
+            if (!conversionApi.consumable.test(data.viewItem, {
+                name: true,
+                attributes: 'align'
+            })) {
+                return;
             }
             // Find a table element inside the div element.
             const viewTable = getViewTableFromWrapper(data.viewItem);
@@ -12793,6 +12767,9 @@ function insertWrapperWithAlignment(writer, align, table) {
     /**
 	 * The "Cancel" button view.
 	 */ cancelButtonView;
+    /**
+	 * The Back button view displayed in the header.
+	 */ backButtonView;
     /**
 	 * A collection of views that can be focused in the form.
 	 */ _focusables;
@@ -12834,6 +12811,7 @@ function insertWrapperWithAlignment(writer, align, table) {
         const { saveButtonView, cancelButtonView } = this._createActionButtons();
         this.saveButtonView = saveButtonView;
         this.cancelButtonView = cancelButtonView;
+        this.backButtonView = this._createBackButton();
         this._focusables = new ViewCollection();
         this._focusCycler = new FocusCycler({
             focusables: this._focusables,
@@ -12847,29 +12825,22 @@ function insertWrapperWithAlignment(writer, align, table) {
             }
         });
         // Form header.
-        this.children.add(new FormHeaderView(locale, {
+        const headerView = new FormHeaderView(locale, {
             label: this.t('Table properties')
-        }));
+        });
+        headerView.children.add(this.backButtonView, 0);
+        this.children.add(headerView);
         // Border row.
         this.children.add(new FormRowView(locale, {
             labelView: borderRowLabel,
             children: [
                 borderRowLabel,
                 borderStyleDropdown,
-                borderColorInput,
-                borderWidthInput
+                borderWidthInput,
+                borderColorInput
             ],
             class: 'ck-table-form__border-row'
         }));
-        // Background row.
-        this.children.add(new FormRowView(locale, {
-            labelView: backgroundRowLabel,
-            children: [
-                backgroundRowLabel,
-                backgroundInput
-            ],
-            class: 'ck-table-form__background-row'
-        }));
         this.children.add(new FormRowView(locale, {
             children: [
                 // Dimensions row.
@@ -12883,22 +12854,31 @@ function insertWrapperWithAlignment(writer, align, table) {
                     ],
                     class: 'ck-table-form__dimensions-row'
                 }),
-                // Alignment row.
+                // Background row.
                 new FormRowView(locale, {
-                    labelView: alignmentLabel,
+                    labelView: backgroundRowLabel,
                     children: [
-                        alignmentLabel,
-                        alignmentToolbar
+                        backgroundRowLabel,
+                        backgroundInput
                     ],
-                    class: 'ck-table-properties-form__alignment-row'
+                    class: 'ck-table-form__background-row'
                 })
             ]
         }));
+        // Alignment row.
+        this.children.add(new FormRowView(locale, {
+            labelView: alignmentLabel,
+            children: [
+                alignmentLabel,
+                alignmentToolbar
+            ],
+            class: 'ck-table-properties-form__alignment-row'
+        }));
         // Action row.
         this.children.add(new FormRowView(locale, {
             children: [
-                this.saveButtonView,
-                this.cancelButtonView
+                this.cancelButtonView,
+                this.saveButtonView
             ],
             class: 'ck-table-form__action-row'
         }));
@@ -12935,14 +12915,15 @@ function insertWrapperWithAlignment(writer, align, table) {
         });
         [
             this.borderStyleDropdown,
-            this.borderColorInput,
             this.borderWidthInput,
-            this.backgroundInput,
+            this.borderColorInput,
             this.widthInput,
             this.heightInput,
+            this.backgroundInput,
             this.alignmentToolbar,
+            this.cancelButtonView,
             this.saveButtonView,
-            this.cancelButtonView
+            this.backButtonView
         ].forEach((view)=>{
             // Register the view as focusable.
             this._focusables.add(view);
@@ -12977,7 +12958,7 @@ function insertWrapperWithAlignment(writer, align, table) {
             width: defaultTableProperties.borderWidth,
             color: defaultTableProperties.borderColor
         };
-        const colorInputCreator = getLabeledColorInputCreator$1({
+        const colorInputCreator = getLabeledColorInputCreator({
             colorConfig: this.options.borderColors,
             columns: 5,
             defaultColorValue: defaultBorder.color,
@@ -12990,7 +12971,7 @@ function insertWrapperWithAlignment(writer, align, table) {
         const borderRowLabel = new LabelView(locale);
         borderRowLabel.text = t('Border');
         // -- Style ---------------------------------------------------
-        const styleLabels = getBorderStyleLabels$1(t);
+        const styleLabels = getBorderStyleLabels(t);
         const borderStyleDropdown = new LabeledFieldView(locale, createLabeledDropdown);
         borderStyleDropdown.set({
             label: accessibleLabel,
@@ -13010,7 +12991,7 @@ function insertWrapperWithAlignment(writer, align, table) {
             this.borderStyle = evt.source._borderStyleValue;
         });
         borderStyleDropdown.bind('isEmpty').to(this, 'borderStyle', (value)=>!value);
-        addListToDropdown(borderStyleDropdown.fieldView, getBorderStyleDefinitions$1(this, defaultBorder.style), {
+        addListToDropdown(borderStyleDropdown.fieldView, getBorderStyleDefinitions(this, defaultBorder.style), {
             role: 'menu',
             ariaLabel: accessibleLabel
         });
@@ -13021,7 +13002,7 @@ function insertWrapperWithAlignment(writer, align, table) {
             class: 'ck-table-form__border-width'
         });
         borderWidthInput.fieldView.bind('value').to(this, 'borderWidth');
-        borderWidthInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$2);
+        borderWidthInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet);
         borderWidthInput.fieldView.on('input', ()=>{
             this.borderWidth = borderWidthInput.fieldView.element.value;
         });
@@ -13032,7 +13013,7 @@ function insertWrapperWithAlignment(writer, align, table) {
             class: 'ck-table-form__border-color'
         });
         borderColorInput.fieldView.bind('value').to(this, 'borderColor');
-        borderColorInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$2);
+        borderColorInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet);
         borderColorInput.fieldView.on('input', ()=>{
             this.borderColor = borderColorInput.fieldView.value;
         });
@@ -13040,12 +13021,12 @@ function insertWrapperWithAlignment(writer, align, table) {
         this.on('change:borderStyle', (evt, name, newValue, oldValue)=>{
             // When removing the border (`border-style:none`), clear the remaining `border-*` properties.
             // See: https://github.com/ckeditor/ckeditor5/issues/6227.
-            if (!isBorderStyleSet$2(newValue)) {
+            if (!isBorderStyleSet(newValue)) {
                 this.borderColor = '';
                 this.borderWidth = '';
             }
             // When setting the `border-style` from `none`, set the default `border-color` and `border-width` properties.
-            if (!isBorderStyleSet$2(oldValue)) {
+            if (!isBorderStyleSet(oldValue)) {
                 this.borderColor = defaultBorder.color;
                 this.borderWidth = defaultBorder.width;
             }
@@ -13068,7 +13049,7 @@ function insertWrapperWithAlignment(writer, align, table) {
         const backgroundRowLabel = new LabelView(locale);
         backgroundRowLabel.text = t('Background');
         // -- Background color input -----------------------------------
-        const backgroundInputCreator = getLabeledColorInputCreator$1({
+        const backgroundInputCreator = getLabeledColorInputCreator({
             colorConfig: this.options.backgroundColors,
             columns: 5,
             defaultColorValue: this.options.defaultTableProperties.backgroundColor,
@@ -13150,7 +13131,7 @@ function insertWrapperWithAlignment(writer, align, table) {
         const t = this.t;
         // -- Label ---------------------------------------------------
         const alignmentLabel = new LabelView(locale);
-        alignmentLabel.text = t('Alignment');
+        alignmentLabel.text = t('Table Alignment');
         // -- Toolbar ---------------------------------------------------
         const alignmentToolbar = new ToolbarView(locale);
         alignmentToolbar.set({
@@ -13158,12 +13139,14 @@ function insertWrapperWithAlignment(writer, align, table) {
             isCompact: true,
             ariaLabel: t('Table alignment toolbar')
         });
-        fillToolbar$1({
+        fillToolbar({
             view: this,
             icons: {
                 left: IconObjectInlineLeft,
                 center: IconObjectCenter,
-                right: IconObjectInlineRight
+                right: IconObjectInlineRight,
+                blockLeft: IconObjectLeft,
+                blockRight: IconObjectRight
             },
             toolbar: alignmentToolbar,
             labels: this._alignmentLabels,
@@ -13194,8 +13177,7 @@ function insertWrapperWithAlignment(writer, align, table) {
         ];
         saveButtonView.set({
             label: t('Save'),
-            icon: IconCheck,
-            class: 'ck-button-save',
+            class: 'ck-button-action',
             type: 'submit',
             withText: true
         });
@@ -13204,8 +13186,6 @@ function insertWrapperWithAlignment(writer, align, table) {
         });
         cancelButtonView.set({
             label: t('Cancel'),
-            icon: IconCancel,
-            class: 'ck-button-cancel',
             withText: true
         });
         cancelButtonView.delegate('execute').to(this, 'cancel');
@@ -13214,37 +13194,56 @@ function insertWrapperWithAlignment(writer, align, table) {
             cancelButtonView
         };
     }
+    /**
+	 * Creates a back button view that cancels the form.
+	 */ _createBackButton() {
+        const t = this.locale.t;
+        const backButton = new ButtonView(this.locale);
+        backButton.set({
+            class: 'ck-button-back',
+            label: t('Back'),
+            icon: IconPreviousArrow,
+            tooltip: true
+        });
+        backButton.delegate('execute').to(this, 'cancel');
+        return backButton;
+    }
     /**
 	 * Provides localized labels for {@link #alignmentToolbar} buttons.
 	 */ get _alignmentLabels() {
         const locale = this.locale;
         const t = this.t;
-        const left = t('Align table to the left');
-        const center = t('Center table');
-        const right = t('Align table to the right');
+        const blockLeft = t('Align table to the left with no text wrapping');
+        const blockRight = t('Align table to the right with no text wrapping');
+        const left = t('Align table to the left with text wrapping');
+        const center = t('Center table with no text wrapping');
+        const right = t('Align table to the right with text wrapping');
         // Returns object with a proper order of labels.
         if (locale.uiLanguageDirection === 'rtl') {
             return {
                 right,
-                center,
-                left
-            };
-        } else {
-            return {
                 left,
+                blockRight,
                 center,
-                right
+                blockLeft
             };
         }
+        return {
+            blockLeft,
+            center,
+            blockRight,
+            left,
+            right
+        };
     }
 }
-function isBorderStyleSet$2(value) {
+function isBorderStyleSet(value) {
     return value !== 'none';
 }
 
-const ERROR_TEXT_TIMEOUT$2 = 500;
+const ERROR_TEXT_TIMEOUT = 500;
 // Map of view properties and related commands.
-const propertyToCommandMap$2 = {
+const propertyToCommandMap = {
     borderStyle: 'tableBorderStyle',
     borderColor: 'tableBorderColor',
     borderWidth: 'tableBorderWidth',
@@ -13336,7 +13335,7 @@ const propertyToCommandMap$2 = {
             tooltip: true
         });
         this.listenTo(view, 'execute', ()=>this._showView());
-        const commands = Object.values(propertyToCommandMap$2).map((commandName)=>editor.commands.get(commandName));
+        const commands = Object.values(propertyToCommandMap).map((commandName)=>editor.commands.get(commandName));
         view.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled)=>areEnabled.some((isCommandEnabled)=>isCommandEnabled));
         return view;
     }
@@ -13446,7 +13445,7 @@ const propertyToCommandMap$2 = {
 	 */ _fillViewFormFromCommandValues() {
         const commands = this.editor.commands;
         const borderStyleCommand = commands.get('tableBorderStyle');
-        Object.entries(propertyToCommandMap$2).map(([property, commandName])=>{
+        Object.entries(propertyToCommandMap).map(([property, commandName])=>{
             const propertyKey = property;
             const defaultValue = this.view === this._viewWithContentTableDefaults ? this._defaultContentTableProperties[propertyKey] || '' : this._defaultLayoutTableProperties[propertyKey] || '';
             return [
@@ -13555,7 +13554,7 @@ const propertyToCommandMap$2 = {
         const { commandName, viewField, validator, errorText } = options;
         const setErrorTextDebounced = debounce(()=>{
             viewField.errorText = errorText;
-        }, ERROR_TEXT_TIMEOUT$2);
+        }, ERROR_TEXT_TIMEOUT);
         return (evt, propertyName, newValue)=>{
             setErrorTextDebounced.cancel();
             // Do not execute the command on initial call (opening the table properties view).
@@ -13996,2096 +13995,5 @@ const propertyToCommandMap$2 = {
     }
 }
 
-/**
- * Returns an object containing pairs of CSS border style values and their localized UI
- * labels. Used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
- * and {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView}.
- *
- * @internal
- * @param t The "t" function provided by the editor that is used to localize strings.
- */ function getBorderStyleLabels(t) {
-    return {
-        none: t('None'),
-        solid: t('Solid'),
-        dotted: t('Dotted'),
-        dashed: t('Dashed'),
-        double: t('Double'),
-        groove: t('Groove'),
-        ridge: t('Ridge'),
-        inset: t('Inset'),
-        outset: t('Outset')
-    };
-}
-/**
- * Generates item definitions for a UI dropdown that allows changing the border style of a table or a table cell.
- *
- * @internal
- * @param defaultStyle The default border.
- */ function getBorderStyleDefinitions(view, defaultStyle) {
-    const itemDefinitions = new Collection();
-    const styleLabels = getBorderStyleLabels(view.t);
-    for(const style in styleLabels){
-        const definition = {
-            type: 'button',
-            model: new UIModel({
-                _borderStyleValue: style,
-                label: styleLabels[style],
-                role: 'menuitemradio',
-                withText: true
-            })
-        };
-        if (style === 'none') {
-            definition.model.bind('isOn').to(view, 'borderStyle', (value)=>{
-                if (defaultStyle === 'none') {
-                    return !value;
-                }
-                return value === style;
-            });
-        } else {
-            definition.model.bind('isOn').to(view, 'borderStyle', (value)=>{
-                return value === style;
-            });
-        }
-        itemDefinitions.add(definition);
-    }
-    return itemDefinitions;
-}
-/**
- * A helper that fills a toolbar with buttons that:
- *
- * * have some labels,
- * * have some icons,
- * * set a certain UI view property value upon execution.
- *
- * @internal
- * @param options Configuration options
- * @param options.view The view that has the observable property.
- * @param options.icons Object with button icons.
- * @param options.toolbar The toolbar to fill with buttons.
- * @param options.labels Object with button labels.
- * @param options.propertyName The name of the observable property in the view.
- * @param options.nameToValue A function that maps a button name to a value. By default names are the same as values.
- * @param options.defaultValue Default value for the property.
- */ function fillToolbar(options) {
-    const { view, icons, toolbar, labels, propertyName, nameToValue, defaultValue } = options;
-    for(const name in labels){
-        const button = new ButtonView(view.locale);
-        button.set({
-            role: 'radio',
-            isToggleable: true,
-            label: labels[name],
-            icon: icons[name],
-            tooltip: labels[name]
-        });
-        // If specified the `nameToValue()` callback, map the value based on the option's name.
-        const buttonValue = nameToValue ? nameToValue(name) : name;
-        button.bind('isOn').to(view, propertyName, (value)=>{
-            // `value` comes from `view[ propertyName ]`.
-            let valueToCompare = value;
-            // If it's empty, and the `defaultValue` is specified, use it instead.
-            if (value === '' && defaultValue) {
-                valueToCompare = defaultValue;
-            }
-            return buttonValue === valueToCompare;
-        });
-        button.on('execute', ()=>{
-            // Allow toggling alignment if there is no default value specified (especially for layout tables).
-            if (!defaultValue && buttonValue && view[propertyName] === buttonValue) {
-                view[propertyName] = undefined;
-            } else {
-                view[propertyName] = buttonValue;
-            }
-        });
-        toolbar.items.add(button);
-    }
-}
-/**
- * Returns a creator for a color input with a label.
- *
- * For given options, it returns a function that creates an instance of a
- * {@link module:table/ui/colorinputview~ColorInputView color input} logically related to
- * a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in the DOM.
- *
- * The helper does the following:
- *
- * * It sets the color input `id` and `ariaDescribedById` attributes.
- * * It binds the color input `isReadOnly` to the labeled view.
- * * It binds the color input `hasError` to the labeled view.
- * * It enables a logic that cleans up the error when the user starts typing in the color input.
- *
- * Usage:
- *
- * ```ts
- * const colorInputCreator = getLabeledColorInputCreator( {
- *   colorConfig: [ ... ],
- *   columns: 3,
- * } );
- *
- * const labeledInputView = new LabeledFieldView( locale, colorInputCreator );
- * console.log( labeledInputView.view ); // A color input instance.
- * ```
- *
- * @internal
- * @param options Color input options.
- * @param options.colorConfig The configuration of the color palette displayed in the input's dropdown.
- * @param options.columns The configuration of the number of columns the color palette consists of in the input's dropdown.
- * @param options.defaultColorValue If specified, the color input view will replace the "Remove color" button with
- * the "Restore default" button. Instead of clearing the input field, the default color value will be set.
- * @param options.colorPickerConfig The configuration of the color picker. You could disable it or define your output format.
- */ function getLabeledColorInputCreator(options) {
-    return (labeledFieldView, viewUid, statusUid)=>{
-        const colorInputView = new ColorInputView(labeledFieldView.locale, {
-            colorDefinitions: colorConfigToColorGridDefinitions(options.colorConfig),
-            columns: options.columns,
-            defaultColorValue: options.defaultColorValue,
-            colorPickerConfig: options.colorPickerConfig
-        });
-        colorInputView.inputView.set({
-            id: viewUid,
-            ariaDescribedById: statusUid
-        });
-        colorInputView.bind('isReadOnly').to(labeledFieldView, 'isEnabled', (value)=>!value);
-        colorInputView.bind('hasError').to(labeledFieldView, 'errorText', (value)=>!!value);
-        colorInputView.on('input', ()=>{
-            // UX: Make the error text disappear and disable the error indicator as the user
-            // starts fixing the errors.
-            labeledFieldView.errorText = null;
-        });
-        labeledFieldView.bind('isEmpty', 'isFocused').to(colorInputView);
-        return colorInputView;
-    };
-}
-function colorConfigToColorGridDefinitions(colorConfig) {
-    return colorConfig.map((item)=>({
-            color: item.model,
-            label: item.label,
-            options: {
-                hasBorder: item.hasBorder
-            }
-        }));
-}
-
-/**
- * The class representing a table properties form, allowing users to customize
- * certain style aspects of a table, for instance, border, background color, alignment, etc..
- */ class TablePropertiesViewExperimental extends View {
-    /**
-	 * Options passed to the view. See {@link #constructor} to learn more.
-	 */ options;
-    /**
-	 * Tracks information about the DOM focus in the form.
-	 */ focusTracker;
-    /**
-	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-	 */ keystrokes;
-    /**
-	 * A collection of child views in the form.
-	 */ children;
-    /**
-	 * A dropdown that allows selecting the style of the table border.
-	 */ borderStyleDropdown;
-    /**
-	 * An input that allows specifying the width of the table border.
-	 */ borderWidthInput;
-    /**
-	 * An input that allows specifying the color of the table border.
-	 */ borderColorInput;
-    /**
-	 * An input that allows specifying the table background color.
-	 */ backgroundInput;
-    /**
-	 * An input that allows specifying the table width.
-	 */ widthInput;
-    /**
-	 * An input that allows specifying the table height.
-	 */ heightInput;
-    /**
-	 * A toolbar with buttons that allow changing the alignment of an entire table.
-	 */ alignmentToolbar;
-    /**
-	 * The "Save" button view.
-	 */ saveButtonView;
-    /**
-	 * The "Cancel" button view.
-	 */ cancelButtonView;
-    /**
-	 * The Back button view displayed in the header.
-	 */ backButtonView;
-    /**
-	 * A collection of views that can be focused in the form.
-	 */ _focusables;
-    /**
-	 * Helps cycling over {@link #_focusables} in the form.
-	 */ _focusCycler;
-    /**
-	 * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-	 * @param options Additional configuration of the view.
-	 */ constructor(locale, options){
-        super(locale);
-        this.set({
-            borderStyle: '',
-            borderWidth: '',
-            borderColor: '',
-            backgroundColor: '',
-            width: '',
-            height: '',
-            alignment: ''
-        });
-        this.options = options;
-        const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
-        const { backgroundRowLabel, backgroundInput } = this._createBackgroundFields();
-        const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields();
-        const { alignmentToolbar, alignmentLabel } = this._createAlignmentFields();
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        this.children = this.createCollection();
-        this.borderStyleDropdown = borderStyleDropdown;
-        this.borderWidthInput = borderWidthInput;
-        this.borderColorInput = borderColorInput;
-        this.backgroundInput = backgroundInput;
-        this.widthInput = widthInput;
-        this.heightInput = heightInput;
-        this.alignmentToolbar = alignmentToolbar;
-        // Defer creating to make sure other fields are present and the Save button can
-        // bind its #isEnabled to their error messages so there's no way to save unless all
-        // fields are valid.
-        const { saveButtonView, cancelButtonView } = this._createActionButtons();
-        this.saveButtonView = saveButtonView;
-        this.cancelButtonView = cancelButtonView;
-        this.backButtonView = this._createBackButton();
-        this._focusables = new ViewCollection();
-        this._focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate form fields backwards using the Shift + Tab keystroke.
-                focusPrevious: 'shift + tab',
-                // Navigate form fields forwards using the Tab key.
-                focusNext: 'tab'
-            }
-        });
-        // Form header.
-        const headerView = new FormHeaderView(locale, {
-            label: this.t('Table properties')
-        });
-        headerView.children.add(this.backButtonView, 0);
-        this.children.add(headerView);
-        // Border row.
-        this.children.add(new FormRowView(locale, {
-            labelView: borderRowLabel,
-            children: [
-                borderRowLabel,
-                borderStyleDropdown,
-                borderWidthInput,
-                borderColorInput
-            ],
-            class: 'ck-table-form__border-row'
-        }));
-        this.children.add(new FormRowView(locale, {
-            children: [
-                // Dimensions row.
-                new FormRowView(locale, {
-                    labelView: dimensionsLabel,
-                    children: [
-                        dimensionsLabel,
-                        widthInput,
-                        operatorLabel,
-                        heightInput
-                    ],
-                    class: 'ck-table-form__dimensions-row'
-                }),
-                // Background row.
-                new FormRowView(locale, {
-                    labelView: backgroundRowLabel,
-                    children: [
-                        backgroundRowLabel,
-                        backgroundInput
-                    ],
-                    class: 'ck-table-form__background-row'
-                })
-            ]
-        }));
-        // Alignment row.
-        this.children.add(new FormRowView(locale, {
-            labelView: alignmentLabel,
-            children: [
-                alignmentLabel,
-                alignmentToolbar
-            ],
-            class: 'ck-table-properties-form__alignment-row'
-        }));
-        // Action row.
-        this.children.add(new FormRowView(locale, {
-            children: [
-                this.cancelButtonView,
-                this.saveButtonView
-            ],
-            class: 'ck-table-form__action-row'
-        }));
-        this.setTemplate({
-            tag: 'form',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-form',
-                    'ck-table-form',
-                    'ck-table-properties-form',
-                    'ck-table-properties-form_experimental'
-                ],
-                // https://github.com/ckeditor/ckeditor5-link/issues/90
-                tabindex: '-1'
-            },
-            children: this.children
-        });
-    }
-    /**
-	 * @inheritDoc
-	 */ render() {
-        super.render();
-        // Enable the "submit" event for this view. It can be triggered by the #saveButtonView
-        // which is of the "submit" DOM "type".
-        submitHandler({
-            view: this
-        });
-        // Maintain continuous focus cycling over views that have focusable children and focus cyclers themselves.
-        [
-            this.borderColorInput,
-            this.backgroundInput
-        ].forEach((view)=>{
-            this._focusCycler.chain(view.fieldView.focusCycler);
-        });
-        [
-            this.borderStyleDropdown,
-            this.borderWidthInput,
-            this.borderColorInput,
-            this.widthInput,
-            this.heightInput,
-            this.backgroundInput,
-            this.alignmentToolbar,
-            this.cancelButtonView,
-            this.saveButtonView,
-            this.backButtonView
-        ].forEach((view)=>{
-            // Register the view as focusable.
-            this._focusables.add(view);
-            // Register the view in the focus tracker.
-            this.focusTracker.add(view.element);
-        });
-        // Mainly for closing using "Esc" and navigation using "Tab".
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-	 * @inheritDoc
-	 */ destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-	 * Focuses the fist focusable field in the form.
-	 */ focus() {
-        this._focusCycler.focusFirst();
-    }
-    /**
-	 * Creates the following form fields:
-	 *
-	 * * {@link #borderStyleDropdown},
-	 * * {@link #borderWidthInput},
-	 * * {@link #borderColorInput}.
-	 */ _createBorderFields() {
-        const defaultTableProperties = this.options.defaultTableProperties;
-        const defaultBorder = {
-            style: defaultTableProperties.borderStyle,
-            width: defaultTableProperties.borderWidth,
-            color: defaultTableProperties.borderColor
-        };
-        const colorInputCreator = getLabeledColorInputCreator({
-            colorConfig: this.options.borderColors,
-            columns: 5,
-            defaultColorValue: defaultBorder.color,
-            colorPickerConfig: this.options.colorPickerConfig
-        });
-        const locale = this.locale;
-        const t = this.t;
-        const accessibleLabel = t('Style');
-        // -- Group label ---------------------------------------------
-        const borderRowLabel = new LabelView(locale);
-        borderRowLabel.text = t('Border');
-        // -- Style ---------------------------------------------------
-        const styleLabels = getBorderStyleLabels(t);
-        const borderStyleDropdown = new LabeledFieldView(locale, createLabeledDropdown);
-        borderStyleDropdown.set({
-            label: accessibleLabel,
-            class: 'ck-table-form__border-style'
-        });
-        borderStyleDropdown.fieldView.buttonView.set({
-            ariaLabel: accessibleLabel,
-            ariaLabelledBy: undefined,
-            isOn: false,
-            withText: true,
-            tooltip: accessibleLabel
-        });
-        borderStyleDropdown.fieldView.buttonView.bind('label').to(this, 'borderStyle', (value)=>{
-            return styleLabels[value ? value : 'none'];
-        });
-        borderStyleDropdown.fieldView.on('execute', (evt)=>{
-            this.borderStyle = evt.source._borderStyleValue;
-        });
-        borderStyleDropdown.bind('isEmpty').to(this, 'borderStyle', (value)=>!value);
-        addListToDropdown(borderStyleDropdown.fieldView, getBorderStyleDefinitions(this, defaultBorder.style), {
-            role: 'menu',
-            ariaLabel: accessibleLabel
-        });
-        // -- Width ---------------------------------------------------
-        const borderWidthInput = new LabeledFieldView(locale, createLabeledInputText);
-        borderWidthInput.set({
-            label: t('Width'),
-            class: 'ck-table-form__border-width'
-        });
-        borderWidthInput.fieldView.bind('value').to(this, 'borderWidth');
-        borderWidthInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$1);
-        borderWidthInput.fieldView.on('input', ()=>{
-            this.borderWidth = borderWidthInput.fieldView.element.value;
-        });
-        // -- Color ---------------------------------------------------
-        const borderColorInput = new LabeledFieldView(locale, colorInputCreator);
-        borderColorInput.set({
-            label: t('Color'),
-            class: 'ck-table-form__border-color'
-        });
-        borderColorInput.fieldView.bind('value').to(this, 'borderColor');
-        borderColorInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$1);
-        borderColorInput.fieldView.on('input', ()=>{
-            this.borderColor = borderColorInput.fieldView.value;
-        });
-        // Reset the border color and width fields depending on the `border-style` value.
-        this.on('change:borderStyle', (evt, name, newValue, oldValue)=>{
-            // When removing the border (`border-style:none`), clear the remaining `border-*` properties.
-            // See: https://github.com/ckeditor/ckeditor5/issues/6227.
-            if (!isBorderStyleSet$1(newValue)) {
-                this.borderColor = '';
-                this.borderWidth = '';
-            }
-            // When setting the `border-style` from `none`, set the default `border-color` and `border-width` properties.
-            if (!isBorderStyleSet$1(oldValue)) {
-                this.borderColor = defaultBorder.color;
-                this.borderWidth = defaultBorder.width;
-            }
-        });
-        return {
-            borderRowLabel,
-            borderStyleDropdown,
-            borderColorInput,
-            borderWidthInput
-        };
-    }
-    /**
-	 * Creates the following form fields:
-	 *
-	 * * {@link #backgroundInput}.
-	 */ _createBackgroundFields() {
-        const locale = this.locale;
-        const t = this.t;
-        // -- Group label ---------------------------------------------
-        const backgroundRowLabel = new LabelView(locale);
-        backgroundRowLabel.text = t('Background');
-        // -- Background color input -----------------------------------
-        const backgroundInputCreator = getLabeledColorInputCreator({
-            colorConfig: this.options.backgroundColors,
-            columns: 5,
-            defaultColorValue: this.options.defaultTableProperties.backgroundColor,
-            colorPickerConfig: this.options.colorPickerConfig
-        });
-        const backgroundInput = new LabeledFieldView(locale, backgroundInputCreator);
-        backgroundInput.set({
-            label: t('Color'),
-            class: 'ck-table-properties-form__background'
-        });
-        backgroundInput.fieldView.bind('value').to(this, 'backgroundColor');
-        backgroundInput.fieldView.on('input', ()=>{
-            this.backgroundColor = backgroundInput.fieldView.value;
-        });
-        return {
-            backgroundRowLabel,
-            backgroundInput
-        };
-    }
-    /**
-	 * Creates the following form fields:
-	 *
-	 * * {@link #widthInput},
-	 * * {@link #heightInput}.
-	 */ _createDimensionFields() {
-        const locale = this.locale;
-        const t = this.t;
-        // -- Label ---------------------------------------------------
-        const dimensionsLabel = new LabelView(locale);
-        dimensionsLabel.text = t('Dimensions');
-        // -- Width ---------------------------------------------------
-        const widthInput = new LabeledFieldView(locale, createLabeledInputText);
-        widthInput.set({
-            label: t('Width'),
-            class: 'ck-table-form__dimensions-row__width'
-        });
-        widthInput.fieldView.bind('value').to(this, 'width');
-        widthInput.fieldView.on('input', ()=>{
-            this.width = widthInput.fieldView.element.value;
-        });
-        // -- Operator ---------------------------------------------------
-        const operatorLabel = new View(locale);
-        operatorLabel.setTemplate({
-            tag: 'span',
-            attributes: {
-                class: [
-                    'ck-table-form__dimension-operator'
-                ]
-            },
-            children: [
-                {
-                    text: '×'
-                }
-            ]
-        });
-        // -- Height ---------------------------------------------------
-        const heightInput = new LabeledFieldView(locale, createLabeledInputText);
-        heightInput.set({
-            label: t('Height'),
-            class: 'ck-table-form__dimensions-row__height'
-        });
-        heightInput.fieldView.bind('value').to(this, 'height');
-        heightInput.fieldView.on('input', ()=>{
-            this.height = heightInput.fieldView.element.value;
-        });
-        return {
-            dimensionsLabel,
-            widthInput,
-            operatorLabel,
-            heightInput
-        };
-    }
-    /**
-	 * Creates the following form fields:
-	 *
-	 * * {@link #alignmentToolbar}.
-	 */ _createAlignmentFields() {
-        const locale = this.locale;
-        const t = this.t;
-        // -- Label ---------------------------------------------------
-        const alignmentLabel = new LabelView(locale);
-        alignmentLabel.text = t('Table Alignment');
-        // -- Toolbar ---------------------------------------------------
-        const alignmentToolbar = new ToolbarView(locale);
-        alignmentToolbar.set({
-            role: 'radiogroup',
-            isCompact: true,
-            ariaLabel: t('Table alignment toolbar')
-        });
-        fillToolbar({
-            view: this,
-            icons: {
-                left: IconObjectInlineLeft,
-                center: IconObjectCenter,
-                right: IconObjectInlineRight,
-                blockLeft: IconObjectLeft,
-                blockRight: IconObjectRight
-            },
-            toolbar: alignmentToolbar,
-            labels: this._alignmentLabels,
-            propertyName: 'alignment',
-            defaultValue: this.options.defaultTableProperties.alignment
-        });
-        return {
-            alignmentLabel,
-            alignmentToolbar
-        };
-    }
-    /**
-	 * Creates the following form controls:
-	 *
-	 * * {@link #saveButtonView},
-	 * * {@link #cancelButtonView}.
-	 */ _createActionButtons() {
-        const locale = this.locale;
-        const t = this.t;
-        const saveButtonView = new ButtonView(locale);
-        const cancelButtonView = new ButtonView(locale);
-        const fieldsThatShouldValidateToSave = [
-            this.borderWidthInput,
-            this.borderColorInput,
-            this.backgroundInput,
-            this.widthInput,
-            this.heightInput
-        ];
-        saveButtonView.set({
-            label: t('Save'),
-            class: 'ck-button-action',
-            type: 'submit',
-            withText: true
-        });
-        saveButtonView.bind('isEnabled').toMany(fieldsThatShouldValidateToSave, 'errorText', (...errorTexts)=>{
-            return errorTexts.every((errorText)=>!errorText);
-        });
-        cancelButtonView.set({
-            label: t('Cancel'),
-            withText: true
-        });
-        cancelButtonView.delegate('execute').to(this, 'cancel');
-        return {
-            saveButtonView,
-            cancelButtonView
-        };
-    }
-    /**
-	 * Creates a back button view that cancels the form.
-	 */ _createBackButton() {
-        const t = this.locale.t;
-        const backButton = new ButtonView(this.locale);
-        backButton.set({
-            class: 'ck-button-back',
-            label: t('Back'),
-            icon: IconPreviousArrow,
-            tooltip: true
-        });
-        backButton.delegate('execute').to(this, 'cancel');
-        return backButton;
-    }
-    /**
-	 * Provides localized labels for {@link #alignmentToolbar} buttons.
-	 */ get _alignmentLabels() {
-        const locale = this.locale;
-        const t = this.t;
-        const blockLeft = t('Align table to the left with no text wrapping');
-        const blockRight = t('Align table to the right with no text wrapping');
-        const left = t('Align table to the left with text wrapping');
-        const center = t('Center table with no text wrapping');
-        const right = t('Align table to the right with text wrapping');
-        // Returns object with a proper order of labels.
-        if (locale.uiLanguageDirection === 'rtl') {
-            return {
-                right,
-                left,
-                blockRight,
-                center,
-                blockLeft
-            };
-        }
-        return {
-            blockLeft,
-            center,
-            blockRight,
-            left,
-            right
-        };
-    }
-}
-function isBorderStyleSet$1(value) {
-    return value !== 'none';
-}
-
-const ERROR_TEXT_TIMEOUT$1 = 500;
-// Map of view properties and related commands.
-const propertyToCommandMap$1 = {
-    borderStyle: 'tableBorderStyle',
-    borderColor: 'tableBorderColor',
-    borderWidth: 'tableBorderWidth',
-    backgroundColor: 'tableBackgroundColor',
-    width: 'tableWidth',
-    height: 'tableHeight',
-    alignment: 'tableAlignment'
-};
-/**
- * The table properties UI plugin. It introduces the `'tableProperties'` button
- * that opens a form allowing to specify visual styling of an entire table.
- *
- * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
- */ class TablePropertiesUIExperimental extends Plugin {
-    /**
-	 * The default table properties.
-	 */ _defaultContentTableProperties;
-    /**
-	 * The default layout table properties.
-	 */ _defaultLayoutTableProperties;
-    /**
-	 * The contextual balloon plugin instance.
-	 */ _balloon;
-    /**
-	 * The properties form view displayed inside the balloon.
-	 */ view = null;
-    /**
-	 * The properties form view displayed inside the balloon (content table).
-	 */ _viewWithContentTableDefaults = null;
-    /**
-	 * The properties form view displayed inside the balloon (layout table).
-	 */ _viewWithLayoutTableDefaults = null;
-    /**
-	 * The batch used to undo all changes made by the form (which are live, as the user types)
-	 * when "Cancel" was pressed. Each time the view is shown, a new batch is created.
-	 */ _undoStepBatch;
-    /**
-	 * Flag used to indicate whether view is ready to execute update commands
-	 * (it finished loading initial data).
-	 */ _isReady;
-    /**
-	 * @inheritDoc
-	 */ static get requires() {
-        return [
-            ContextualBalloon
-        ];
-    }
-    /**
-	 * @inheritDoc
-	 */ static get pluginName() {
-        return 'TablePropertiesUIExperimental';
-    }
-    /**
-	 * @inheritDoc
-	 */ static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-	 * @inheritDoc
-	 */ constructor(editor){
-        super(editor);
-        editor.config.define('table.tableProperties', {
-            borderColors: defaultColors,
-            backgroundColors: defaultColors
-        });
-    }
-    /**
-	 * @inheritDoc
-	 */ init() {
-        const editor = this.editor;
-        this._defaultContentTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
-            includeAlignmentProperty: true
-        });
-        this._defaultLayoutTableProperties = getNormalizedDefaultProperties();
-        this._balloon = editor.plugins.get(ContextualBalloon);
-        editor.ui.componentFactory.add('tableProperties', ()=>this._createTablePropertiesButton());
-    }
-    /**
-	 * Creates the table properties button.
-	 *
-	 * @internal
-	 */ _createTablePropertiesButton() {
-        const editor = this.editor;
-        const t = editor.t;
-        const view = new ButtonView(editor.locale);
-        view.set({
-            label: t('Table properties'),
-            icon: IconTableProperties,
-            tooltip: true
-        });
-        this.listenTo(view, 'execute', ()=>this._showView());
-        const commands = Object.values(propertyToCommandMap$1).map((commandName)=>editor.commands.get(commandName));
-        view.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled)=>areEnabled.some((isCommandEnabled)=>isCommandEnabled));
-        return view;
-    }
-    /**
-	 * @inheritDoc
-	 */ destroy() {
-        super.destroy();
-        // Destroy created UI components as they are not automatically destroyed.
-        // See https://github.com/ckeditor/ckeditor5/issues/1341.
-        if (this.view) {
-            this.view.destroy();
-        }
-    }
-    /**
-	 * Creates the {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView} instance.
-	 *
-	 * @returns The table properties form view instance.
-	 */ _createPropertiesView(defaultTableProperties) {
-        const editor = this.editor;
-        const config = editor.config.get('table.tableProperties');
-        const borderColorsConfig = normalizeColorOptions(config.borderColors);
-        const localizedBorderColors = getLocalizedColorOptions(editor.locale, borderColorsConfig);
-        const backgroundColorsConfig = normalizeColorOptions(config.backgroundColors);
-        const localizedBackgroundColors = getLocalizedColorOptions(editor.locale, backgroundColorsConfig);
-        const hasColorPicker = config.colorPicker !== false;
-        const view = new TablePropertiesViewExperimental(editor.locale, {
-            borderColors: localizedBorderColors,
-            backgroundColors: localizedBackgroundColors,
-            defaultTableProperties,
-            colorPickerConfig: hasColorPicker ? config.colorPicker || {} : false
-        });
-        const t = editor.t;
-        // Render the view so its #element is available for the clickOutsideHandler.
-        view.render();
-        this.listenTo(view, 'submit', ()=>{
-            this._hideView();
-        });
-        this.listenTo(view, 'cancel', ()=>{
-            // https://github.com/ckeditor/ckeditor5/issues/6180
-            if (this._undoStepBatch.operations.length) {
-                editor.execute('undo', this._undoStepBatch);
-            }
-            this._hideView();
-        });
-        // Close the balloon on Esc key press.
-        view.keystrokes.set('Esc', (data, cancel)=>{
-            this._hideView();
-            cancel();
-        });
-        // Close on click outside of balloon panel element.
-        clickOutsideHandler({
-            emitter: view,
-            activator: ()=>this._isViewInBalloon,
-            contextElements: [
-                this._balloon.view.element
-            ],
-            callback: ()=>this._hideView()
-        });
-        const colorErrorText = getLocalizedColorErrorText(t);
-        const lengthErrorText = getLocalizedLengthErrorText(t);
-        // Create the "UI -> editor data" binding.
-        // These listeners update the editor data (via table commands) when any observable
-        // property of the view has changed. They also validate the value and display errors in the UI
-        // when necessary. This makes the view live, which means the changes are
-        // visible in the editing as soon as the user types or changes fields' values.
-        view.on('change:borderStyle', this._getPropertyChangeCallback('tableBorderStyle'));
-        view.on('change:borderColor', this._getValidatedPropertyChangeCallback({
-            viewField: view.borderColorInput,
-            commandName: 'tableBorderColor',
-            errorText: colorErrorText,
-            validator: colorFieldValidator
-        }));
-        view.on('change:borderWidth', this._getValidatedPropertyChangeCallback({
-            viewField: view.borderWidthInput,
-            commandName: 'tableBorderWidth',
-            errorText: lengthErrorText,
-            validator: lineWidthFieldValidator
-        }));
-        view.on('change:backgroundColor', this._getValidatedPropertyChangeCallback({
-            viewField: view.backgroundInput,
-            commandName: 'tableBackgroundColor',
-            errorText: colorErrorText,
-            validator: colorFieldValidator
-        }));
-        view.on('change:width', this._getValidatedPropertyChangeCallback({
-            viewField: view.widthInput,
-            commandName: 'tableWidth',
-            errorText: lengthErrorText,
-            validator: lengthFieldValidator
-        }));
-        view.on('change:height', this._getValidatedPropertyChangeCallback({
-            viewField: view.heightInput,
-            commandName: 'tableHeight',
-            errorText: lengthErrorText,
-            validator: lengthFieldValidator
-        }));
-        view.on('change:alignment', this._getPropertyChangeCallback('tableAlignment'));
-        return view;
-    }
-    /**
-	 * In this method the "editor data -> UI" binding is happening.
-	 *
-	 * When executed, this method obtains selected table property values from various table commands
-	 * and passes them to the {@link #view}.
-	 *
-	 * This way, the UI stays up–to–date with the editor data.
-	 */ _fillViewFormFromCommandValues() {
-        const commands = this.editor.commands;
-        const borderStyleCommand = commands.get('tableBorderStyle');
-        Object.entries(propertyToCommandMap$1).map(([property, commandName])=>{
-            const propertyKey = property;
-            const defaultValue = this.view === this._viewWithContentTableDefaults ? this._defaultContentTableProperties[propertyKey] || '' : this._defaultLayoutTableProperties[propertyKey] || '';
-            return [
-                propertyKey,
-                commands.get(commandName).value || defaultValue
-            ];
-        }).forEach(([property, value])=>{
-            // Do not set the `border-color` and `border-width` fields if `border-style:none`.
-            if ((property === 'borderColor' || property === 'borderWidth') && borderStyleCommand.value === 'none') {
-                return;
-            }
-            this.view.set(property, value);
-        });
-        this._isReady = true;
-    }
-    /**
-	 * Shows the {@link #view} in the {@link #_balloon}.
-	 *
-	 * **Note**: Each time a view is shown, the new {@link #_undoStepBatch} is created that contains
-	 * all changes made to the document when the view is visible, allowing a single undo step
-	 * for all of them.
-	 */ _showView() {
-        const editor = this.editor;
-        const viewTable = getSelectionAffectedTableWidget(editor.editing.view.document.selection);
-        const modelTable = viewTable && editor.editing.mapper.toModelElement(viewTable);
-        const useDefaults = !modelTable || modelTable.getAttribute('tableType') !== 'layout';
-        if (useDefaults && !this._viewWithContentTableDefaults) {
-            this._viewWithContentTableDefaults = this._createPropertiesView(this._defaultContentTableProperties);
-        } else if (!useDefaults && !this._viewWithLayoutTableDefaults) {
-            this._viewWithLayoutTableDefaults = this._createPropertiesView(this._defaultLayoutTableProperties);
-        }
-        this.view = useDefaults ? this._viewWithContentTableDefaults : this._viewWithLayoutTableDefaults;
-        this.listenTo(editor.ui, 'update', ()=>{
-            this._updateView();
-        });
-        // Update the view with the model values.
-        this._fillViewFormFromCommandValues();
-        this._balloon.add({
-            view: this.view,
-            position: getBalloonTablePositionData(editor)
-        });
-        // Create a new batch. Clicking "Cancel" will undo this batch.
-        this._undoStepBatch = editor.model.createBatch();
-        // Basic a11y.
-        this.view.focus();
-    }
-    /**
-	 * Removes the {@link #view} from the {@link #_balloon}.
-	 */ _hideView() {
-        const editor = this.editor;
-        this.stopListening(editor.ui, 'update');
-        this._isReady = false;
-        // Blur any input element before removing it from DOM to prevent issues in some browsers.
-        // See https://github.com/ckeditor/ckeditor5/issues/1501.
-        this.view.saveButtonView.focus();
-        this._balloon.remove(this.view);
-        // Make sure the focus is not lost in the process by putting it directly
-        // into the editing view.
-        this.editor.editing.view.focus();
-    }
-    /**
-	 * Repositions the {@link #_balloon} or hides the {@link #view} if a table is no longer selected.
-	 */ _updateView() {
-        const editor = this.editor;
-        const viewDocument = editor.editing.view.document;
-        if (!getSelectionAffectedTableWidget(viewDocument.selection)) {
-            this._hideView();
-        } else if (this._isViewVisible) {
-            repositionContextualBalloon(editor, 'table');
-        }
-    }
-    /**
-	 * Returns `true` when the {@link #view} is the visible in the {@link #_balloon}.
-	 */ get _isViewVisible() {
-        return !!this.view && this._balloon.visibleView === this.view;
-    }
-    /**
-	 * Returns `true` when the {@link #view} is in the {@link #_balloon}.
-	 */ get _isViewInBalloon() {
-        return !!this.view && this._balloon.hasView(this.view);
-    }
-    /**
-	 * Creates a callback that when executed upon {@link #view view's} property change
-	 * executes a related editor command with the new property value.
-	 *
-	 * If new value will be set to the default value, the command will not be executed.
-	 *
-	 * @param commandName The command that will be executed.
-	 */ _getPropertyChangeCallback(commandName) {
-        return (evt, propertyName, newValue)=>{
-            // Do not execute the command on initial call (opening the table properties view).
-            if (!this._isReady) {
-                return;
-            }
-            this.editor.execute(commandName, {
-                value: newValue,
-                batch: this._undoStepBatch
-            });
-        };
-    }
-    /**
-	 * Creates a callback that when executed upon {@link #view view's} property change:
-	 * * executes a related editor command with the new property value if the value is valid,
-	 * * or sets the error text next to the invalid field, if the value did not pass the validation.
-	 */ _getValidatedPropertyChangeCallback(options) {
-        const { commandName, viewField, validator, errorText } = options;
-        const setErrorTextDebounced = debounce(()=>{
-            viewField.errorText = errorText;
-        }, ERROR_TEXT_TIMEOUT$1);
-        return (evt, propertyName, newValue)=>{
-            setErrorTextDebounced.cancel();
-            // Do not execute the command on initial call (opening the table properties view).
-            if (!this._isReady) {
-                return;
-            }
-            if (validator(newValue)) {
-                this.editor.execute(commandName, {
-                    value: newValue,
-                    batch: this._undoStepBatch
-                });
-                viewField.errorText = null;
-            } else {
-                setErrorTextDebounced();
-            }
-        };
-    }
-}
-
-/**
- * The class representing a table cell properties form, allowing users to customize
- * certain style aspects of a table cell, for instance, border, padding, text alignment, etc..
- */ class TableCellPropertiesViewExperimental extends View {
-    /**
-	 * Options passed to the view. See {@link #constructor} to learn more.
-	 */ options;
-    /**
-	 * Tracks information about the DOM focus in the form.
-	 */ focusTracker;
-    /**
-	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-	 */ keystrokes;
-    /**
-	 * A collection of child views in the form.
-	 */ children;
-    /**
-	 * A dropdown that allows selecting the style of the table cell border.
-	 */ borderStyleDropdown;
-    /**
-	 * An input that allows specifying the width of the table cell border.
-	 */ borderWidthInput;
-    /**
-	 * An input that allows specifying the color of the table cell border.
-	 */ borderColorInput;
-    /**
-	 * An input that allows specifying the table cell background color.
-	 */ backgroundInput;
-    /**
-	 * A dropdown that allows selecting the type of the table cell (data or header).
-	 */ cellTypeDropdown;
-    /**
-	 * An input that allows specifying the table cell padding.
-	 */ paddingInput;
-    /**
-	 * An input that allows specifying the table cell width.
-	 */ widthInput;
-    /**
-	 * An input that allows specifying the table cell height.
-	 */ heightInput;
-    /**
-	 * A toolbar with buttons that allow changing the horizontal text alignment in a table cell.
-	 */ horizontalAlignmentToolbar;
-    /**
-	 * A toolbar with buttons that allow changing the vertical text alignment in a table cell.
-	 */ verticalAlignmentToolbar;
-    /**
-	 * The "Save" button view.
-	 */ saveButtonView;
-    /**
-	 * The "Cancel" button view.
-	 */ cancelButtonView;
-    /**
-	 * The "Back" button view.
-	 */ backButtonView;
-    /**
-	 * A collection of views that can be focused in the form.
-	 */ _focusables;
-    /**
-	 * Helps cycling over {@link #_focusables} in the form.
-	 */ _focusCycler;
-    /**
-	 * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-	 * @param options Additional configuration of the view.
-	 * @param options.borderColors A configuration of the border color palette used by the
-	 * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#borderColorInput}.
-	 * @param options.backgroundColors A configuration of the background color palette used by the
-	 * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#backgroundInput}.
-	 * @param options.defaultTableCellProperties The default table cell properties.
-	 * @param options.isTableCellTypeSupported A flag indicating whether the table cell type is supported.
-	 */ constructor(locale, options){
-        super(locale);
-        this.set({
-            borderStyle: '',
-            borderWidth: '',
-            borderColor: '',
-            padding: '',
-            backgroundColor: '',
-            width: '',
-            height: '',
-            horizontalAlignment: '',
-            verticalAlignment: '',
-            cellType: ''
-        });
-        this.options = options;
-        const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
-        const { backgroundRowLabel, backgroundInput } = this._createBackgroundFields();
-        const { cellTypeRowLabel, cellTypeDropdown } = this._createCellTypeField();
-        const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields();
-        const { horizontalAlignmentToolbar, verticalAlignmentToolbar, alignmentLabel } = this._createAlignmentFields();
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        this.children = this.createCollection();
-        this.borderStyleDropdown = borderStyleDropdown;
-        this.borderWidthInput = borderWidthInput;
-        this.borderColorInput = borderColorInput;
-        this.backgroundInput = backgroundInput;
-        this.cellTypeDropdown = cellTypeDropdown;
-        this.paddingInput = this._createPaddingField();
-        this.widthInput = widthInput;
-        this.heightInput = heightInput;
-        this.horizontalAlignmentToolbar = horizontalAlignmentToolbar;
-        this.verticalAlignmentToolbar = verticalAlignmentToolbar;
-        // Defer creating to make sure other fields are present and the Save button can
-        // bind its #isEnabled to their error messages so there's no way to save unless all
-        // fields are valid.
-        const { saveButtonView, cancelButtonView } = this._createActionButtons();
-        this.saveButtonView = saveButtonView;
-        this.cancelButtonView = cancelButtonView;
-        this.backButtonView = this._createBackButton();
-        this._focusables = new ViewCollection();
-        this._focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate form fields backwards using the Shift + Tab keystroke.
-                focusPrevious: 'shift + tab',
-                // Navigate form fields forwards using the Tab key.
-                focusNext: 'tab'
-            }
-        });
-        // Form header.
-        const header = new FormHeaderView(locale, {
-            label: this.t('Cell properties')
-        });
-        header.children.add(this.backButtonView, 0);
-        this.children.add(header);
-        // Border row.
-        this.children.add(new FormRowView(locale, {
-            labelView: borderRowLabel,
-            children: this.options.isTableCellTypeSupported ? [
-                borderRowLabel,
-                borderStyleDropdown,
-                borderWidthInput,
-                borderColorInput
-            ] : [
-                borderRowLabel,
-                borderStyleDropdown,
-                borderColorInput,
-                borderWidthInput
-            ],
-            class: `ck-table-form__border-row${this.options.isTableCellTypeSupported ? ' ck-table-form__border-row_experimental' : ''}`
-        }));
-        // Background and cell type.
-        this.children.add(new FormRowView(locale, {
-            children: this.options.isTableCellTypeSupported ? [
-                new FormRowView(locale, {
-                    labelView: cellTypeRowLabel,
-                    children: [
-                        cellTypeRowLabel,
-                        cellTypeDropdown
-                    ],
-                    class: 'ck-table-form__cell-type-row'
-                }),
-                new FormRowView(locale, {
-                    labelView: backgroundRowLabel,
-                    children: [
-                        backgroundRowLabel,
-                        backgroundInput
-                    ],
-                    class: 'ck-table-form__background-row'
-                })
-            ] : [
-                new FormRowView(locale, {
-                    labelView: backgroundRowLabel,
-                    children: [
-                        backgroundRowLabel,
-                        backgroundInput
-                    ],
-                    class: 'ck-table-form__background-row'
-                })
-            ]
-        }));
-        // Dimensions row and padding.
-        this.children.add(new FormRowView(locale, {
-            children: [
-                // Dimensions row.
-                new FormRowView(locale, {
-                    labelView: dimensionsLabel,
-                    children: [
-                        dimensionsLabel,
-                        widthInput,
-                        operatorLabel,
-                        heightInput
-                    ],
-                    class: 'ck-table-form__dimensions-row'
-                }),
-                // Padding row.
-                new FormRowView(locale, {
-                    children: [
-                        this.paddingInput
-                    ],
-                    class: 'ck-table-cell-properties-form__padding-row'
-                })
-            ]
-        }));
-        // Text alignment row.
-        this.children.add(new FormRowView(locale, {
-            labelView: alignmentLabel,
-            children: [
-                alignmentLabel,
-                horizontalAlignmentToolbar,
-                verticalAlignmentToolbar
-            ],
-            class: 'ck-table-cell-properties-form__alignment-row'
-        }));
-        // Action row.
-        this.children.add(new FormRowView(locale, {
-            children: [
-                this.cancelButtonView,
-                this.saveButtonView
-            ],
-            class: 'ck-table-form__action-row'
-        }));
-        this.setTemplate({
-            tag: 'form',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-form',
-                    'ck-table-form',
-                    'ck-table-cell-properties-form',
-                    'ck-table-cell-properties-form_experimental',
-                    this.options.isTableCellTypeSupported ? 'ck-table-cell-properties-form_experimental-no-cell-type' : ''
-                ],
-                // https://github.com/ckeditor/ckeditor5-link/issues/90
-                tabindex: '-1'
-            },
-            children: this.children
-        });
-    }
-    /**
-	 * @inheritDoc
-	 */ render() {
-        super.render();
-        // Enable the "submit" event for this view. It can be triggered by the #saveButtonView
-        // which is of the "submit" DOM "type".
-        submitHandler({
-            view: this
-        });
-        // Maintain continuous focus cycling over views that have focusable children and focus cyclers themselves.
-        [
-            this.borderColorInput,
-            this.backgroundInput
-        ].forEach((view)=>{
-            this._focusCycler.chain(view.fieldView.focusCycler);
-        });
-        [
-            this.borderStyleDropdown,
-            this.borderColorInput,
-            this.borderWidthInput,
-            this.cellTypeDropdown,
-            this.backgroundInput,
-            this.widthInput,
-            this.heightInput,
-            this.paddingInput,
-            this.horizontalAlignmentToolbar,
-            this.verticalAlignmentToolbar,
-            this.cancelButtonView,
-            this.saveButtonView,
-            this.backButtonView
-        ].forEach((view)=>{
-            // Register the view as focusable.
-            this._focusables.add(view);
-            // Register the view in the focus tracker.
-            this.focusTracker.add(view.element);
-        });
-        // Mainly for closing using "Esc" and navigation using "Tab".
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-	 * @inheritDoc
-	 */ destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-	 * Focuses the fist focusable field in the form.
-	 */ focus() {
-        this._focusCycler.focusFirst();
-    }
-    /**
-	 * Creates the following form fields:
-	 *
-	 * * {@link #borderStyleDropdown},
-	 * * {@link #borderWidthInput},
-	 * * {@link #borderColorInput}.
-	 */ _createBorderFields() {
-        const defaultTableCellProperties = this.options.defaultTableCellProperties;
-        const defaultBorder = {
-            style: defaultTableCellProperties.borderStyle,
-            width: defaultTableCellProperties.borderWidth,
-            color: defaultTableCellProperties.borderColor
-        };
-        const colorInputCreator = getLabeledColorInputCreator({
-            colorConfig: this.options.borderColors,
-            columns: 5,
-            defaultColorValue: defaultBorder.color,
-            colorPickerConfig: this.options.colorPickerConfig
-        });
-        const locale = this.locale;
-        const t = this.t;
-        const accessibleLabel = t('Style');
-        // -- Group label ---------------------------------------------
-        const borderRowLabel = new LabelView(locale);
-        borderRowLabel.text = t('Border');
-        // -- Style ---------------------------------------------------
-        const styleLabels = getBorderStyleLabels(t);
-        const borderStyleDropdown = new LabeledFieldView(locale, createLabeledDropdown);
-        borderStyleDropdown.set({
-            label: accessibleLabel,
-            class: 'ck-table-form__border-style'
-        });
-        borderStyleDropdown.fieldView.buttonView.set({
-            ariaLabel: accessibleLabel,
-            ariaLabelledBy: undefined,
-            isOn: false,
-            withText: true,
-            tooltip: accessibleLabel
-        });
-        borderStyleDropdown.fieldView.buttonView.bind('label').to(this, 'borderStyle', (value)=>{
-            return styleLabels[value ? value : 'none'];
-        });
-        borderStyleDropdown.fieldView.on('execute', (evt)=>{
-            this.borderStyle = evt.source._borderStyleValue;
-        });
-        borderStyleDropdown.bind('isEmpty').to(this, 'borderStyle', (value)=>!value);
-        addListToDropdown(borderStyleDropdown.fieldView, getBorderStyleDefinitions(this, defaultBorder.style), {
-            role: 'menu',
-            ariaLabel: accessibleLabel
-        });
-        // -- Width ---------------------------------------------------
-        const borderWidthInput = new LabeledFieldView(locale, createLabeledInputText);
-        borderWidthInput.set({
-            label: t('Width'),
-            class: 'ck-table-form__border-width'
-        });
-        borderWidthInput.fieldView.bind('value').to(this, 'borderWidth');
-        borderWidthInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet);
-        borderWidthInput.fieldView.on('input', ()=>{
-            this.borderWidth = borderWidthInput.fieldView.element.value;
-        });
-        // -- Color ---------------------------------------------------
-        const borderColorInput = new LabeledFieldView(locale, colorInputCreator);
-        borderColorInput.set({
-            label: t('Color'),
-            class: 'ck-table-form__border-color'
-        });
-        borderColorInput.fieldView.bind('value').to(this, 'borderColor');
-        borderColorInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet);
-        borderColorInput.fieldView.on('input', ()=>{
-            this.borderColor = borderColorInput.fieldView.value;
-        });
-        // Reset the border color and width fields depending on the `border-style` value.
-        this.on('change:borderStyle', (evt, name, newValue, oldValue)=>{
-            // When removing the border (`border-style:none`), clear the remaining `border-*` properties.
-            // See: https://github.com/ckeditor/ckeditor5/issues/6227.
-            if (!isBorderStyleSet(newValue)) {
-                this.borderColor = '';
-                this.borderWidth = '';
-            }
-            // When setting the `border-style` from `none`, set the default `border-color` and `border-width` properties.
-            if (!isBorderStyleSet(oldValue)) {
-                this.borderColor = defaultBorder.color;
-                this.borderWidth = defaultBorder.width;
-            }
-        });
-        return {
-            borderRowLabel,
-            borderStyleDropdown,
-            borderColorInput,
-            borderWidthInput
-        };
-    }
-    /**
-	 * Creates the following form fields:
-	 *
-	 * * {@link #backgroundInput}.
-	 */ _createBackgroundFields() {
-        const locale = this.locale;
-        const t = this.t;
-        // -- Group label ---------------------------------------------
-        const backgroundRowLabel = new LabelView(locale);
-        backgroundRowLabel.text = t('Background');
-        // -- Background color input -----------------------------------
-        const colorInputCreator = getLabeledColorInputCreator({
-            colorConfig: this.options.backgroundColors,
-            columns: 5,
-            defaultColorValue: this.options.defaultTableCellProperties.backgroundColor,
-            colorPickerConfig: this.options.colorPickerConfig
-        });
-        const backgroundInput = new LabeledFieldView(locale, colorInputCreator);
-        backgroundInput.set({
-            label: t('Color'),
-            class: 'ck-table-cell-properties-form__background'
-        });
-        backgroundInput.fieldView.bind('value').to(this, 'backgroundColor');
-        backgroundInput.fieldView.on('input', ()=>{
-            this.backgroundColor = backgroundInput.fieldView.value;
-        });
-        return {
-            backgroundRowLabel,
-            backgroundInput
-        };
-    }
-    /**
-	 * Create cell type field.
-	 *
-	 * * {@link #cellTypeDropdown}.
-	 *
-	 * @internal
-	 */ _createCellTypeField() {
-        const locale = this.locale;
-        const t = this.t;
-        const cellTypeRowLabel = new LabelView(locale);
-        cellTypeRowLabel.text = t('Cell type');
-        const cellTypeLabels = this._cellTypeLabels;
-        const cellTypeDropdown = new LabeledFieldView(locale, createLabeledDropdown);
-        cellTypeDropdown.set({
-            label: t('Cell type'),
-            class: 'ck-table-cell-properties-form__cell-type'
-        });
-        cellTypeDropdown.fieldView.buttonView.set({
-            ariaLabel: t('Cell type'),
-            ariaLabelledBy: undefined,
-            isOn: false,
-            withText: true,
-            tooltip: t('Cell type')
-        });
-        cellTypeDropdown.fieldView.buttonView.bind('label').to(this, 'cellType', (value)=>{
-            return cellTypeLabels[value || 'data'];
-        });
-        cellTypeDropdown.fieldView.on('execute', (evt)=>{
-            this.cellType = evt.source._cellTypeValue;
-        });
-        cellTypeDropdown.bind('isEmpty').to(this, 'cellType', (value)=>!value);
-        addListToDropdown(cellTypeDropdown.fieldView, this._getCellTypeDefinitions(), {
-            role: 'menu',
-            ariaLabel: t('Cell type')
-        });
-        return {
-            cellTypeRowLabel,
-            cellTypeDropdown
-        };
-    }
-    /**
-	 * Creates the following form fields:
-	 *
-	 * * {@link #widthInput}.
-	 * * {@link #heightInput}.
-	 */ _createDimensionFields() {
-        const locale = this.locale;
-        const t = this.t;
-        // -- Label ---------------------------------------------------
-        const dimensionsLabel = new LabelView(locale);
-        dimensionsLabel.text = t('Dimensions');
-        // -- Width ---------------------------------------------------
-        const widthInput = new LabeledFieldView(locale, createLabeledInputText);
-        widthInput.set({
-            label: t('Width'),
-            class: 'ck-table-form__dimensions-row__width'
-        });
-        widthInput.fieldView.bind('value').to(this, 'width');
-        widthInput.fieldView.on('input', ()=>{
-            this.width = widthInput.fieldView.element.value;
-        });
-        // -- Operator ---------------------------------------------------
-        const operatorLabel = new View(locale);
-        operatorLabel.setTemplate({
-            tag: 'span',
-            attributes: {
-                class: [
-                    'ck-table-form__dimension-operator'
-                ]
-            },
-            children: [
-                {
-                    text: '×'
-                }
-            ]
-        });
-        // -- Height ---------------------------------------------------
-        const heightInput = new LabeledFieldView(locale, createLabeledInputText);
-        heightInput.set({
-            label: t('Height'),
-            class: 'ck-table-form__dimensions-row__height'
-        });
-        heightInput.fieldView.bind('value').to(this, 'height');
-        heightInput.fieldView.on('input', ()=>{
-            this.height = heightInput.fieldView.element.value;
-        });
-        return {
-            dimensionsLabel,
-            widthInput,
-            operatorLabel,
-            heightInput
-        };
-    }
-    /**
-	 * Creates the following form fields:
-	 *
-	 * * {@link #paddingInput}.
-	 */ _createPaddingField() {
-        const locale = this.locale;
-        const t = this.t;
-        const paddingInput = new LabeledFieldView(locale, createLabeledInputText);
-        paddingInput.set({
-            label: t('Padding'),
-            class: 'ck-table-cell-properties-form__padding'
-        });
-        paddingInput.fieldView.bind('value').to(this, 'padding');
-        paddingInput.fieldView.on('input', ()=>{
-            this.padding = paddingInput.fieldView.element.value;
-        });
-        return paddingInput;
-    }
-    /**
-	 * Creates the following form fields:
-	 *
-	 * * {@link #horizontalAlignmentToolbar},
-	 * * {@link #verticalAlignmentToolbar}.
-	 */ _createAlignmentFields() {
-        const locale = this.locale;
-        const t = this.t;
-        const alignmentLabel = new LabelView(locale);
-        const ALIGNMENT_ICONS = {
-            left: IconAlignLeft,
-            center: IconAlignCenter,
-            right: IconAlignRight,
-            justify: IconAlignJustify,
-            top: IconAlignTop,
-            middle: IconAlignMiddle,
-            bottom: IconAlignBottom
-        };
-        alignmentLabel.text = t('Table cell text alignment');
-        // -- Horizontal ---------------------------------------------------
-        const horizontalAlignmentToolbar = new ToolbarView(locale);
-        const isContentRTL = locale.contentLanguageDirection === 'rtl';
-        horizontalAlignmentToolbar.set({
-            isCompact: true,
-            role: 'radiogroup',
-            ariaLabel: t('Horizontal text alignment toolbar'),
-            class: 'ck-table-cell-properties-form__horizontal-alignment-toolbar'
-        });
-        fillToolbar({
-            view: this,
-            icons: ALIGNMENT_ICONS,
-            toolbar: horizontalAlignmentToolbar,
-            labels: this._horizontalAlignmentLabels,
-            propertyName: 'horizontalAlignment',
-            nameToValue: (name)=>{
-                // For the RTL content, we want to swap the buttons "align to the left" and "align to the right".
-                if (isContentRTL) {
-                    if (name === 'left') {
-                        return 'right';
-                    } else if (name === 'right') {
-                        return 'left';
-                    }
-                }
-                return name;
-            },
-            defaultValue: this.options.defaultTableCellProperties.horizontalAlignment
-        });
-        // -- Vertical -----------------------------------------------------
-        const verticalAlignmentToolbar = new ToolbarView(locale);
-        verticalAlignmentToolbar.set({
-            isCompact: true,
-            role: 'radiogroup',
-            ariaLabel: t('Vertical text alignment toolbar'),
-            class: 'ck-table-cell-properties-form__vertical-alignment-toolbar'
-        });
-        fillToolbar({
-            view: this,
-            icons: ALIGNMENT_ICONS,
-            toolbar: verticalAlignmentToolbar,
-            labels: this._verticalAlignmentLabels,
-            propertyName: 'verticalAlignment',
-            defaultValue: this.options.defaultTableCellProperties.verticalAlignment
-        });
-        return {
-            horizontalAlignmentToolbar,
-            verticalAlignmentToolbar,
-            alignmentLabel
-        };
-    }
-    /**
-	 * Creates the following form controls:
-	 *
-	 * * {@link #saveButtonView},
-	 * * {@link #cancelButtonView}.
-	 */ _createActionButtons() {
-        const locale = this.locale;
-        const t = this.t;
-        const saveButtonView = new ButtonView(locale);
-        const cancelButtonView = new ButtonView(locale);
-        const fieldsThatShouldValidateToSave = [
-            this.borderWidthInput,
-            this.borderColorInput,
-            this.backgroundInput,
-            this.paddingInput
-        ];
-        saveButtonView.set({
-            label: t('Save'),
-            class: 'ck-button-action',
-            type: 'submit',
-            withText: true
-        });
-        saveButtonView.bind('isEnabled').toMany(fieldsThatShouldValidateToSave, 'errorText', (...errorTexts)=>{
-            return errorTexts.every((errorText)=>!errorText);
-        });
-        cancelButtonView.set({
-            label: t('Cancel'),
-            withText: true
-        });
-        cancelButtonView.delegate('execute').to(this, 'cancel');
-        return {
-            saveButtonView,
-            cancelButtonView
-        };
-    }
-    /**
-	 * Creates a back button view that cancels the form.
-	 */ _createBackButton() {
-        const t = this.locale.t;
-        const backButton = new ButtonView(this.locale);
-        backButton.set({
-            class: 'ck-button-back',
-            label: t('Back'),
-            icon: IconPreviousArrow,
-            tooltip: true
-        });
-        backButton.delegate('execute').to(this, 'cancel');
-        return backButton;
-    }
-    /**
-	 * Creates the cell type dropdown definitions.
-	 */ _getCellTypeDefinitions() {
-        const itemDefinitions = new Collection();
-        const cellTypeLabels = this._cellTypeLabels;
-        for (const type of [
-            'data',
-            'header'
-        ]){
-            const definition = {
-                type: 'button',
-                model: new UIModel({
-                    _cellTypeValue: type,
-                    label: cellTypeLabels[type],
-                    role: 'menuitemradio',
-                    withText: true
-                })
-            };
-            definition.model.bind('isOn').to(this, 'cellType', (value)=>value === type);
-            itemDefinitions.add(definition);
-        }
-        return itemDefinitions;
-    }
-    /**
-	 * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
-	 */ get _horizontalAlignmentLabels() {
-        const locale = this.locale;
-        const t = this.t;
-        const left = t('Align cell text to the left');
-        const center = t('Align cell text to the center');
-        const right = t('Align cell text to the right');
-        const justify = t('Justify cell text');
-        // Returns object with a proper order of labels.
-        if (locale.uiLanguageDirection === 'rtl') {
-            return {
-                right,
-                center,
-                left,
-                justify
-            };
-        } else {
-            return {
-                left,
-                center,
-                right,
-                justify
-            };
-        }
-    }
-    /**
-	 * Provides localized labels for {@link #verticalAlignmentToolbar} buttons.
-	 */ get _verticalAlignmentLabels() {
-        const t = this.t;
-        return {
-            top: t('Align cell text to the top'),
-            middle: t('Align cell text to the middle'),
-            bottom: t('Align cell text to the bottom')
-        };
-    }
-    /**
-	 * Provides localized labels for {@link #cellTypeDropdown}.
-	 */ get _cellTypeLabels() {
-        const t = this.t;
-        return {
-            data: t('Data cell'),
-            header: t('Header cell')
-        };
-    }
-}
-function isBorderStyleSet(value) {
-    return value !== 'none';
-}
-
-const ERROR_TEXT_TIMEOUT = 500;
-// Map of view properties and related commands.
-const propertyToCommandMap = {
-    borderStyle: 'tableCellBorderStyle',
-    borderColor: 'tableCellBorderColor',
-    borderWidth: 'tableCellBorderWidth',
-    height: 'tableCellHeight',
-    width: 'tableCellWidth',
-    padding: 'tableCellPadding',
-    backgroundColor: 'tableCellBackgroundColor',
-    horizontalAlignment: 'tableCellHorizontalAlignment',
-    verticalAlignment: 'tableCellVerticalAlignment',
-    cellType: 'tableCellType'
-};
-/**
- * The table cell properties UI plugin. It introduces the `'tableCellProperties'` button
- * that opens a form allowing to specify the visual styling of a table cell.
- *
- * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
- */ class TableCellPropertiesUIExperimental extends Plugin {
-    /**
-	 * The default table cell properties.
-	 */ _defaultContentTableCellProperties;
-    /**
-	 * The default layout table cell properties.
-	 */ _defaultLayoutTableCellProperties;
-    /**
-	 * The contextual balloon plugin instance.
-	 */ _balloon;
-    /**
-	 * The cell properties form view displayed inside the balloon.
-	 */ view;
-    /**
-	 * The cell properties form view displayed inside the balloon (content table).
-	 */ _viewWithContentTableDefaults;
-    /**
-	 * The cell properties form view displayed inside the balloon (layout table).
-	 */ _viewWithLayoutTableDefaults;
-    /**
-	 * The batch used to undo all changes made by the form (which are live, as the user types)
-	 * when "Cancel" was pressed. Each time the view is shown, a new batch is created.
-	 */ _undoStepBatch;
-    /**
-	 * Flag used to indicate whether view is ready to execute update commands
-	 * (it finished loading initial data).
-	 */ _isReady;
-    /**
-	 * @inheritDoc
-	 */ static get requires() {
-        return [
-            ContextualBalloon
-        ];
-    }
-    /**
-	 * @inheritDoc
-	 */ static get pluginName() {
-        return 'TableCellPropertiesUIExperimental';
-    }
-    /**
-	 * @inheritDoc
-	 */ static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-	 * @inheritDoc
-	 */ constructor(editor){
-        super(editor);
-        editor.config.define('table.tableCellProperties', {
-            borderColors: defaultColors,
-            backgroundColors: defaultColors
-        });
-    }
-    /**
-	 * @inheritDoc
-	 */ init() {
-        const editor = this.editor;
-        const t = editor.t;
-        this._defaultContentTableCellProperties = getNormalizedDefaultCellProperties(editor.config.get('table.tableCellProperties.defaultProperties'), {
-            includeVerticalAlignmentProperty: true,
-            includeHorizontalAlignmentProperty: true,
-            includePaddingProperty: true,
-            isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
-        });
-        this._defaultLayoutTableCellProperties = getNormalizedDefaultProperties(undefined, {
-            includeVerticalAlignmentProperty: true,
-            includeHorizontalAlignmentProperty: true,
-            isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
-        });
-        this._balloon = editor.plugins.get(ContextualBalloon);
-        this.view = null;
-        this._isReady = false;
-        editor.ui.componentFactory.add('tableCellProperties', (locale)=>{
-            const view = new ButtonView(locale);
-            view.set({
-                label: t('Cell properties'),
-                icon: IconTableCellProperties,
-                tooltip: true
-            });
-            this.listenTo(view, 'execute', ()=>this._showView());
-            const commands = Object.values(propertyToCommandMap).map((commandName)=>editor.commands.get(commandName)).filter((val)=>!!val);
-            view.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled)=>areEnabled.some((isCommandEnabled)=>isCommandEnabled));
-            return view;
-        });
-    }
-    /**
-	 * @inheritDoc
-	 */ destroy() {
-        super.destroy();
-        // Destroy created UI components as they are not automatically destroyed.
-        // See https://github.com/ckeditor/ckeditor5/issues/1341.
-        if (this.view) {
-            this.view.destroy();
-        }
-    }
-    /**
-	 * Creates the {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView} instance.
-	 *
-	 * @returns The cell properties form view instance.
-	 */ _createPropertiesView(defaultTableCellProperties) {
-        const editor = this.editor;
-        const config = editor.config.get('table.tableCellProperties');
-        const borderColorsConfig = normalizeColorOptions(config.borderColors);
-        const localizedBorderColors = getLocalizedColorOptions(editor.locale, borderColorsConfig);
-        const backgroundColorsConfig = normalizeColorOptions(config.backgroundColors);
-        const localizedBackgroundColors = getLocalizedColorOptions(editor.locale, backgroundColorsConfig);
-        const hasColorPicker = config.colorPicker !== false;
-        const isTableCellTypeSupported = !!editor.config.get('experimentalFlags.tableCellTypeSupport');
-        const view = new TableCellPropertiesViewExperimental(editor.locale, {
-            borderColors: localizedBorderColors,
-            backgroundColors: localizedBackgroundColors,
-            defaultTableCellProperties,
-            colorPickerConfig: hasColorPicker ? config.colorPicker || {} : false,
-            isTableCellTypeSupported
-        });
-        const t = editor.t;
-        // Render the view so its #element is available for the clickOutsideHandler.
-        view.render();
-        this.listenTo(view, 'submit', ()=>{
-            this._hideView();
-        });
-        this.listenTo(view, 'cancel', ()=>{
-            // https://github.com/ckeditor/ckeditor5/issues/6180
-            if (this._undoStepBatch.operations.length) {
-                editor.execute('undo', this._undoStepBatch);
-            }
-            this._hideView();
-        });
-        // Close the balloon on Esc key press.
-        view.keystrokes.set('Esc', (data, cancel)=>{
-            this._hideView();
-            cancel();
-        });
-        // Close on click outside of balloon panel element.
-        clickOutsideHandler({
-            emitter: view,
-            activator: ()=>this._isViewInBalloon,
-            contextElements: [
-                this._balloon.view.element
-            ],
-            callback: ()=>this._hideView()
-        });
-        const colorErrorText = getLocalizedColorErrorText(t);
-        const lengthErrorText = getLocalizedLengthErrorText(t);
-        // Create the "UI -> editor data" binding.
-        // These listeners update the editor data (via table commands) when any observable
-        // property of the view has changed. They also validate the value and display errors in the UI
-        // when necessary. This makes the view live, which means the changes are
-        // visible in the editing as soon as the user types or changes fields' values.
-        view.on('change:borderStyle', this._getPropertyChangeCallback('tableCellBorderStyle'));
-        view.on('change:borderColor', this._getValidatedPropertyChangeCallback({
-            viewField: view.borderColorInput,
-            commandName: 'tableCellBorderColor',
-            errorText: colorErrorText,
-            validator: colorFieldValidator
-        }));
-        view.on('change:borderWidth', this._getValidatedPropertyChangeCallback({
-            viewField: view.borderWidthInput,
-            commandName: 'tableCellBorderWidth',
-            errorText: lengthErrorText,
-            validator: lineWidthFieldValidator
-        }));
-        view.on('change:padding', this._getValidatedPropertyChangeCallback({
-            viewField: view.paddingInput,
-            commandName: 'tableCellPadding',
-            errorText: lengthErrorText,
-            validator: lengthFieldValidator
-        }));
-        view.on('change:width', this._getValidatedPropertyChangeCallback({
-            viewField: view.widthInput,
-            commandName: 'tableCellWidth',
-            errorText: lengthErrorText,
-            validator: lengthFieldValidator
-        }));
-        view.on('change:height', this._getValidatedPropertyChangeCallback({
-            viewField: view.heightInput,
-            commandName: 'tableCellHeight',
-            errorText: lengthErrorText,
-            validator: lengthFieldValidator
-        }));
-        view.on('change:backgroundColor', this._getValidatedPropertyChangeCallback({
-            viewField: view.backgroundInput,
-            commandName: 'tableCellBackgroundColor',
-            errorText: colorErrorText,
-            validator: colorFieldValidator
-        }));
-        view.on('change:horizontalAlignment', this._getPropertyChangeCallback('tableCellHorizontalAlignment'));
-        view.on('change:verticalAlignment', this._getPropertyChangeCallback('tableCellVerticalAlignment'));
-        const cellTypeCommand = editor.commands.get('tableCellType');
-        if (cellTypeCommand) {
-            view.cellTypeDropdown.bind('isEnabled').to(cellTypeCommand, 'isEnabled');
-            view.on('change:cellType', this._getPropertyChangeCallback('tableCellType'));
-        }
-        return view;
-    }
-    /**
-	 * In this method the "editor data -> UI" binding is happening.
-	 *
-	 * When executed, this method obtains selected cell property values from various table commands
-	 * and passes them to the {@link #view}.
-	 *
-	 * This way, the UI stays up–to–date with the editor data.
-	 */ _fillViewFormFromCommandValues() {
-        const commands = this.editor.commands;
-        const borderStyleCommand = commands.get('tableCellBorderStyle');
-        Object.entries(propertyToCommandMap).flatMap(([property, commandName])=>{
-            const command = commands.get(commandName);
-            if (!command) {
-                return [];
-            }
-            const propertyKey = property;
-            let defaultValue;
-            if (propertyKey === 'cellType') {
-                defaultValue = '';
-            } else {
-                defaultValue = this.view === this._viewWithContentTableDefaults ? this._defaultContentTableCellProperties[propertyKey] || '' : this._defaultLayoutTableCellProperties[propertyKey] || '';
-            }
-            const entry = [
-                property,
-                command.value || defaultValue
-            ];
-            return [
-                entry
-            ];
-        }).forEach(([property, value])=>{
-            // Do not set the `border-color` and `border-width` fields if `border-style:none`.
-            if ((property === 'borderColor' || property === 'borderWidth') && borderStyleCommand.value === 'none') {
-                return;
-            }
-            this.view.set(property, value);
-        });
-        this._isReady = true;
-    }
-    /**
-	 * Shows the {@link #view} in the {@link #_balloon}.
-	 *
-	 * **Note**: Each time a view is shown, a new {@link #_undoStepBatch} is created. It contains
-	 * all changes made to the document when the view is visible, allowing a single undo step
-	 * for all of them.
-	 */ _showView() {
-        const editor = this.editor;
-        const viewTable = getSelectionAffectedTableWidget(editor.editing.view.document.selection);
-        const modelTable = viewTable && editor.editing.mapper.toModelElement(viewTable);
-        const useDefaults = !modelTable || modelTable.getAttribute('tableType') !== 'layout';
-        if (useDefaults && !this._viewWithContentTableDefaults) {
-            this._viewWithContentTableDefaults = this._createPropertiesView(this._defaultContentTableCellProperties);
-        } else if (!useDefaults && !this._viewWithLayoutTableDefaults) {
-            this._viewWithLayoutTableDefaults = this._createPropertiesView(this._defaultLayoutTableCellProperties);
-        }
-        this.view = useDefaults ? this._viewWithContentTableDefaults : this._viewWithLayoutTableDefaults;
-        this.listenTo(editor.ui, 'update', ()=>{
-            this._updateView();
-        });
-        // Update the view with the model values.
-        this._fillViewFormFromCommandValues();
-        this._balloon.add({
-            view: this.view,
-            position: getBalloonCellPositionData(editor)
-        });
-        // Create a new batch. Clicking "Cancel" will undo this batch.
-        this._undoStepBatch = editor.model.createBatch();
-        // Basic a11y.
-        this.view.focus();
-    }
-    /**
-	 * Removes the {@link #view} from the {@link #_balloon}.
-	 */ _hideView() {
-        const editor = this.editor;
-        this.stopListening(editor.ui, 'update');
-        this._isReady = false;
-        // Blur any input element before removing it from DOM to prevent issues in some browsers.
-        // See https://github.com/ckeditor/ckeditor5/issues/1501.
-        this.view.saveButtonView.focus();
-        this._balloon.remove(this.view);
-        // Make sure the focus is not lost in the process by putting it directly
-        // into the editing view.
-        this.editor.editing.view.focus();
-    }
-    /**
-	 * Repositions the {@link #_balloon} or hides the {@link #view} if a table cell is no longer selected.
-	 */ _updateView() {
-        const editor = this.editor;
-        const viewDocument = editor.editing.view.document;
-        if (!getTableWidgetAncestor(viewDocument.selection)) {
-            this._hideView();
-        } else if (this._isViewVisible) {
-            repositionContextualBalloon(editor, 'cell');
-        }
-    }
-    /**
-	 * Returns `true` when the {@link #view} is visible in the {@link #_balloon}.
-	 */ get _isViewVisible() {
-        return !!this.view && this._balloon.visibleView === this.view;
-    }
-    /**
-	 * Returns `true` when the {@link #view} is in the {@link #_balloon}.
-	 */ get _isViewInBalloon() {
-        return !!this.view && this._balloon.hasView(this.view);
-    }
-    /**
-	 * Creates a callback that when executed upon the {@link #view view's} property change
-	 * executes a related editor command with the new property value.
-	 *
-	 * @param commandName The default value of the command.
-	 */ _getPropertyChangeCallback(commandName) {
-        return (evt, propertyName, newValue)=>{
-            if (!this._isReady) {
-                return;
-            }
-            this.editor.execute(commandName, {
-                value: newValue,
-                batch: this._undoStepBatch
-            });
-        };
-    }
-    /**
-	 * Creates a callback that when executed upon the {@link #view view's} property change:
-	 * * Executes a related editor command with the new property value if the value is valid,
-	 * * Or sets the error text next to the invalid field, if the value did not pass the validation.
-	 */ _getValidatedPropertyChangeCallback(options) {
-        const { commandName, viewField, validator, errorText } = options;
-        const setErrorTextDebounced = debounce(()=>{
-            viewField.errorText = errorText;
-        }, ERROR_TEXT_TIMEOUT);
-        return (evt, propertyName, newValue)=>{
-            setErrorTextDebounced.cancel();
-            // Do not execute the command on initial call (opening the table properties view).
-            if (!this._isReady) {
-                return;
-            }
-            if (validator(newValue)) {
-                this.editor.execute(commandName, {
-                    value: newValue,
-                    batch: this._undoStepBatch
-                });
-                viewField.errorText = null;
-            } else {
-                setErrorTextDebounced();
-            }
-        };
-    }
-}
-
-export { InsertColumnCommand, InsertRowCommand, InsertTableCommand, InsertTableLayoutCommand, MergeCellCommand, MergeCellsCommand, PlainTableOutput, RemoveColumnCommand, RemoveRowCommand, SelectColumnCommand, SelectRowCommand, SetHeaderColumnCommand, SetHeaderRowCommand, SplitCellCommand, Table, TableAlignmentCommand, TableBackgroundColorCommand, TableBorderColorCommand, TableBorderStyleCommand, TableBorderWidthCommand, TableCaption, TableCaptionEditing, TableCaptionUI, TableCellBackgroundColorCommand, TableCellBorderColorCommand, TableCellBorderStyleCommand, TableCellBorderWidthCommand, TableCellHeightCommand, TableCellHorizontalAlignmentCommand, TableCellPaddingCommand, TableCellProperties, TableCellPropertiesEditing, TableCellPropertiesUI, TableCellPropertiesUIExperimental, TableCellPropertiesView, TableCellPropertiesViewExperimental, TableCellPropertyCommand, TableCellTypeCommand, TableCellVerticalAlignmentCommand, TableCellWidthCommand, TableCellWidthEditing, TableClipboard, TableColumnResize, TableColumnResizeEditing, TableEditing, TableHeightCommand, TableKeyboard, TableLayout, TableLayoutEditing, TableLayoutUI, TableMouse, TableProperties, TablePropertiesEditing, TablePropertiesUI, TablePropertiesUIExperimental, TablePropertiesView, TablePropertiesViewExperimental, TablePropertyCommand, TableSelection, TableToolbar, TableTypeCommand, TableUI, TableUtils, TableWalker, TableWidthCommand, TableWidthsCommand, ToggleTableCaptionCommand, InsertTableView as _InsertTableView, COLUMN_MIN_WIDTH_AS_PERCENTAGE as _TABLE_COLUMN_MIN_WIDTH_AS_PERCENTAGE, COLUMN_MIN_WIDTH_IN_PIXELS as _TABLE_COLUMN_MIN_WIDTH_IN_PIXELS, COLUMN_RESIZE_DISTANCE_THRESHOLD as _TABLE_COLUMN_RESIZE_DISTANCE_THRESHOLD, COLUMN_WIDTH_PRECISION as _TABLE_COLUMN_WIDTH_PRECISION, defaultColors as _TABLE_DEFAULT_COLORS, ColorInputView as _TableColorInputView, MouseEventsObserver as _TableMouseEventsObserver, addDefaultUnitToNumericValue as _addDefaultUnitToNumericValue, adjustLastColumnIndex as _adjustLastTableColumnIndex, adjustLastRowIndex as _adjustLastTableRowIndex, clamp as _clamp, colorFieldValidator as _colorTableFieldValidator, convertParagraphInTableCell as _convertParagraphInTableCell, createEmptyTableCell as _createEmptyTableCell, createFilledArray as _createFilledArray, cropTableToDimensions as _cropTableToDimensions, downcastTable as _downcastTable, downcastTableAttribute as _downcastTableAttribute, downcastAttributeToStyle as _downcastTableAttributeToStyle, downcastCell as _downcastTableCell, downcastTableResizedClass as _downcastTableResizedClass, downcastRow as _downcastTableRow, enableProperty$1 as _enableTableCellProperty, ensureParagraphInTableCell as _ensureParagraphInTableCell, fillToolbar$1 as _fillTableOrCellToolbar, getBalloonCellPositionData as _getBalloonTableCellPositionData, getBalloonTablePositionData as _getBalloonTablePositionData, getBorderStyleLabels$1 as _getBorderTableStyleLabels, getChangedResizedTables as _getChangedResizedTables, getDefaultValueAdjusted as _getDefaultTableValueAdjusted, getDomCellOuterWidth as _getDomTableCellOuterWidth, getElementWidthInPixels as _getElementWidthInPixels, getHorizontallyOverlappingCells as _getHorizontallyOverlappingTableCells, getLabeledColorInputCreator$1 as _getLabeledTableColorInputCreator, getLocalizedColorErrorText as _getLocalizedTableColorErrorText, getLocalizedLengthErrorText as _getLocalizedTableLengthErrorText, getNormalizedDefaultProperties as _getNormalizedDefaultTableBaseProperties, getNormalizedDefaultCellProperties as _getNormalizedDefaultTableCellProperties, getNormalizedDefaultTableProperties as _getNormalizedDefaultTableProperties, getSelectedTableWidget as _getSelectedTableWidget, getSelectionAffectedTable as _getSelectionAffectedTable, getSelectionAffectedTableWidget as _getSelectionAffectedTableWidget, getSingleValue as _getTableBorderBoxSingleValue, getCaptionFromTableModelElement as _getTableCaptionFromModelElement, getCaptionFromModelSelection as _getTableCaptionFromModelSelection, getColumnEdgesIndexes as _getTableColumnEdgesIndexes, getTableColumnElements as _getTableColumnElements, getColumnGroupElement as _getTableColumnGroupElement, getColumnMinWidthAsPercentage as _getTableColumnMinWidthAsPercentage, getTableColumnsWidths as _getTableColumnsWidths, getBorderStyleDefinitions$1 as _getTableOrCellBorderStyleDefinitions, getTableWidgetAncestor as _getTableWidgetAncestor, getTableWidthInPixels as _getTableWidthInPixels, getVerticallyOverlappingCells as _getVerticallyOverlappingTableCells, injectTableCaptionPostFixer as _injectTableCaptionPostFixer, injectTableCellParagraphPostFixer as _injectTableCellParagraphPostFixer, injectTableLayoutPostFixer as _injectTableLayoutPostFixer, isSingleParagraphWithoutAttributes as _isSingleTableParagraphWithoutAttributes, isHeadingColumnCell as _isTableHeadingColumnCell, isTable as _isTableModelElement, lengthFieldValidator as _lengthTableFieldValidator, lineWidthFieldValidator as _lineWidthTableFieldValidator, matchTableCaptionViewElement as _matchTableCaptionViewElement, normalizeColumnWidths as _normalizeTableColumnWidths, removeEmptyColumns as _removeEmptyTableColumns, removeEmptyRows as _removeEmptyTableRows, removeEmptyRowsColumns as _removeEmptyTableRowsColumns, repositionContextualBalloon as _repositionTableContextualBalloon, skipEmptyTableRow as _skipEmptyTableRow, splitHorizontally as _splitTableCellHorizontally, splitVertically as _splitTableCellVertically, sumArray as _sumArray, tableCellRefreshHandler as _tableCellRefreshHandler, tableHeadingsRefreshHandler as _tableHeadingsRefreshHandler, toPrecision as _toPrecision, translateColSpanAttribute as _translateTableColspanAttribute, trimTableCellIfNeeded as _trimTableCellIfNeeded, upcastStyleToAttribute as _upcastNormalizedTableStyleToAttribute, upcastTable as _upcastTable, upcastBorderStyles as _upcastTableBorderStyles, upcastColgroupElement as _upcastTableColgroupElement, upcastTableFigure as _upcastTableFigure, updateColumnElements as _updateTableColumnElements, updateNumericAttribute as _updateTableNumericAttribute };
+export { InsertColumnCommand, InsertRowCommand, InsertTableCommand, InsertTableLayoutCommand, MergeCellCommand, MergeCellsCommand, PlainTableOutput, RemoveColumnCommand, RemoveRowCommand, SelectColumnCommand, SelectRowCommand, SetHeaderColumnCommand, SetHeaderRowCommand, SplitCellCommand, Table, TableAlignmentCommand, TableBackgroundColorCommand, TableBorderColorCommand, TableBorderStyleCommand, TableBorderWidthCommand, TableCaption, TableCaptionEditing, TableCaptionUI, TableCellBackgroundColorCommand, TableCellBorderColorCommand, TableCellBorderStyleCommand, TableCellBorderWidthCommand, TableCellHeightCommand, TableCellHorizontalAlignmentCommand, TableCellPaddingCommand, TableCellProperties, TableCellPropertiesEditing, TableCellPropertiesUI, TableCellPropertiesView, TableCellPropertyCommand, TableCellTypeCommand, TableCellVerticalAlignmentCommand, TableCellWidthCommand, TableCellWidthEditing, TableClipboard, TableColumnResize, TableColumnResizeEditing, TableEditing, TableHeightCommand, TableKeyboard, TableLayout, TableLayoutEditing, TableLayoutUI, TableMouse, TableProperties, TablePropertiesEditing, TablePropertiesUI, TablePropertiesView, TablePropertyCommand, TableSelection, TableToolbar, TableTypeCommand, TableUI, TableUtils, TableWalker, TableWidthCommand, TableWidthsCommand, ToggleTableCaptionCommand, InsertTableView as _InsertTableView, COLUMN_MIN_WIDTH_AS_PERCENTAGE as _TABLE_COLUMN_MIN_WIDTH_AS_PERCENTAGE, COLUMN_MIN_WIDTH_IN_PIXELS as _TABLE_COLUMN_MIN_WIDTH_IN_PIXELS, COLUMN_RESIZE_DISTANCE_THRESHOLD as _TABLE_COLUMN_RESIZE_DISTANCE_THRESHOLD, COLUMN_WIDTH_PRECISION as _TABLE_COLUMN_WIDTH_PRECISION, defaultColors as _TABLE_DEFAULT_COLORS, ColorInputView as _TableColorInputView, MouseEventsObserver as _TableMouseEventsObserver, addDefaultUnitToNumericValue as _addDefaultUnitToNumericValue, adjustLastColumnIndex as _adjustLastTableColumnIndex, adjustLastRowIndex as _adjustLastTableRowIndex, clamp as _clamp, colorFieldValidator as _colorTableFieldValidator, convertParagraphInTableCell as _convertParagraphInTableCell, createEmptyTableCell as _createEmptyTableCell, createFilledArray as _createFilledArray, cropTableToDimensions as _cropTableToDimensions, downcastTable as _downcastTable, downcastTableAttribute as _downcastTableAttribute, downcastAttributeToStyle as _downcastTableAttributeToStyle, downcastCell as _downcastTableCell, downcastTableResizedClass as _downcastTableResizedClass, downcastRow as _downcastTableRow, enableProperty$1 as _enableTableCellProperty, ensureParagraphInTableCell as _ensureParagraphInTableCell, fillToolbar as _fillTableOrCellToolbar, getBalloonCellPositionData as _getBalloonTableCellPositionData, getBalloonTablePositionData as _getBalloonTablePositionData, getBorderStyleLabels as _getBorderTableStyleLabels, getChangedResizedTables as _getChangedResizedTables, getDefaultValueAdjusted as _getDefaultTableValueAdjusted, getDomCellOuterWidth as _getDomTableCellOuterWidth, getElementWidthInPixels as _getElementWidthInPixels, getHorizontallyOverlappingCells as _getHorizontallyOverlappingTableCells, getLabeledColorInputCreator as _getLabeledTableColorInputCreator, getLocalizedColorErrorText as _getLocalizedTableColorErrorText, getLocalizedLengthErrorText as _getLocalizedTableLengthErrorText, getNormalizedDefaultProperties as _getNormalizedDefaultTableBaseProperties, getNormalizedDefaultCellProperties as _getNormalizedDefaultTableCellProperties, getNormalizedDefaultTableProperties as _getNormalizedDefaultTableProperties, getSelectedTableWidget as _getSelectedTableWidget, getSelectionAffectedTable as _getSelectionAffectedTable, getSelectionAffectedTableWidget as _getSelectionAffectedTableWidget, getSingleValue as _getTableBorderBoxSingleValue, getCaptionFromTableModelElement as _getTableCaptionFromModelElement, getCaptionFromModelSelection as _getTableCaptionFromModelSelection, getColumnEdgesIndexes as _getTableColumnEdgesIndexes, getTableColumnElements as _getTableColumnElements, getColumnGroupElement as _getTableColumnGroupElement, getColumnMinWidthAsPercentage as _getTableColumnMinWidthAsPercentage, getTableColumnsWidths as _getTableColumnsWidths, getBorderStyleDefinitions as _getTableOrCellBorderStyleDefinitions, getTableWidgetAncestor as _getTableWidgetAncestor, getTableWidthInPixels as _getTableWidthInPixels, getVerticallyOverlappingCells as _getVerticallyOverlappingTableCells, injectTableCaptionPostFixer as _injectTableCaptionPostFixer, injectTableCellParagraphPostFixer as _injectTableCellParagraphPostFixer, injectTableLayoutPostFixer as _injectTableLayoutPostFixer, isSingleParagraphWithoutAttributes as _isSingleTableParagraphWithoutAttributes, isHeadingColumnCell as _isTableHeadingColumnCell, isTable as _isTableModelElement, lengthFieldValidator as _lengthTableFieldValidator, lineWidthFieldValidator as _lineWidthTableFieldValidator, matchTableCaptionViewElement as _matchTableCaptionViewElement, normalizeColumnWidths as _normalizeTableColumnWidths, removeEmptyColumns as _removeEmptyTableColumns, removeEmptyRows as _removeEmptyTableRows, removeEmptyRowsColumns as _removeEmptyTableRowsColumns, repositionContextualBalloon as _repositionTableContextualBalloon, skipEmptyTableRow as _skipEmptyTableRow, splitHorizontally as _splitTableCellHorizontally, splitVertically as _splitTableCellVertically, sumArray as _sumArray, tableCellRefreshHandler as _tableCellRefreshHandler, tableHeadingsRefreshHandler as _tableHeadingsRefreshHandler, toPrecision as _toPrecision, translateColSpanAttribute as _translateTableColspanAttribute, trimTableCellIfNeeded as _trimTableCellIfNeeded, upcastStyleToAttribute as _upcastNormalizedTableStyleToAttribute, upcastTable as _upcastTable, upcastBorderStyles as _upcastTableBorderStyles, upcastColgroupElement as _upcastTableColgroupElement, upcastTableFigure as _upcastTableFigure, updateColumnElements as _updateTableColumnElements, updateNumericAttribute as _updateTableNumericAttribute };
 //# sourceMappingURL=index.js.map