@ckeditor/ckeditor5-table 0.0.0-nightly-next-20251217.0 → 0.0.0-nightly-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, 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 { 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 { 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 } = editor;
-    return model.schema.checkAttribute('tableCell', 'tableCellType');
+    const { model, config } = editor;
+    return model.schema.checkAttribute('tableCell', 'tableCellType') && config.get('experimentalFlags.tableCellTypeSupport') === true;
 }
 
 /**
@@ -2175,7 +2175,10 @@ const downcastTableAlignmentConfig = {
  * Downcasts a plain table (also used in the clipboard pipeline).
  */ function convertPlainTable(editor) {
     return (table, conversionApi)=>{
-        if (!conversionApi.options.isClipboardPipeline && !editor.plugins.has('PlainTableOutput')) {
+        const hasPlainTableOutput = editor.plugins.has('PlainTableOutput');
+        const isClipboardPipeline = conversionApi.options.isClipboardPipeline;
+        const useExtendedAlignment = editor.config.get('experimentalFlags.useExtendedTableBlockAlignment');
+        if (!hasPlainTableOutput && !(useExtendedAlignment && isClipboardPipeline)) {
             return null;
         }
         return downcastPlainTable(table, conversionApi, editor);
@@ -2185,7 +2188,10 @@ const downcastTableAlignmentConfig = {
  * Downcasts a plain table caption (also used in the clipboard pipeline).
  */ function convertPlainTableCaption(editor) {
     return (modelElement, { writer, options })=>{
-        if (!options.isClipboardPipeline && !editor.plugins.has('PlainTableOutput')) {
+        const hasPlainTableOutput = editor.plugins.has('PlainTableOutput');
+        const isClipboardPipeline = options.isClipboardPipeline;
+        const useExtendedAlignment = editor.config.get('experimentalFlags.useExtendedTableBlockAlignment');
+        if (!hasPlainTableOutput && !(useExtendedAlignment && isClipboardPipeline)) {
             return null;
         }
         if (modelElement.parent.name === 'table') {
@@ -2273,7 +2279,10 @@ const downcastTableAlignmentConfig = {
             return dispatcher.on(`attribute:${modelAttribute}:table`, (evt, data, conversionApi)=>{
                 const { item, attributeNewValue } = data;
                 const { mapper, writer } = conversionApi;
-                if (!conversionApi.options.isClipboardPipeline && !editor.plugins.has('PlainTableOutput')) {
+                const hasPlainTableOutput = editor.plugins.has('PlainTableOutput');
+                const isClipboardPipeline = conversionApi.options.isClipboardPipeline;
+                const useExtendedAlignment = editor.config.get('experimentalFlags.useExtendedTableBlockAlignment');
+                if (!hasPlainTableOutput && !(useExtendedAlignment && isClipboardPipeline)) {
                     return;
                 }
                 if (!conversionApi.consumable.consume(item, evt.name)) {
@@ -7898,7 +7907,7 @@ const isEmpty = (val)=>val === '';
  *
  * @internal
  * @param t The "t" function provided by the editor that is used to localize strings.
- */ function getBorderStyleLabels(t) {
+ */ function getBorderStyleLabels$1(t) {
     return {
         none: t('None'),
         solid: t('Solid'),
@@ -7968,9 +7977,9 @@ const isEmpty = (val)=>val === '';
  *
  * @internal
  * @param defaultStyle The default border.
- */ function getBorderStyleDefinitions(view, defaultStyle) {
+ */ function getBorderStyleDefinitions$1(view, defaultStyle) {
     const itemDefinitions = new Collection();
-    const styleLabels = getBorderStyleLabels(view.t);
+    const styleLabels = getBorderStyleLabels$1(view.t);
     for(const style in styleLabels){
         const definition = {
             type: 'button',
@@ -8013,7 +8022,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(options) {
+ */ function fillToolbar$1(options) {
     const { view, icons, toolbar, labels, propertyName, nameToValue, defaultValue } = options;
     for(const name in labels){
         const button = new ButtonView(view.locale);
@@ -8217,10 +8226,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(options) {
+ */ function getLabeledColorInputCreator$1(options) {
     return (labeledFieldView, viewUid, statusUid)=>{
         const colorInputView = new ColorInputView(labeledFieldView.locale, {
-            colorDefinitions: colorConfigToColorGridDefinitions(options.colorConfig),
+            colorDefinitions: colorConfigToColorGridDefinitions$1(options.colorConfig),
             columns: options.columns,
             defaultColorValue: options.defaultColorValue,
             colorPickerConfig: options.colorPickerConfig
@@ -8247,7 +8256,7 @@ const isEmpty = (val)=>val === '';
     const parsedValue = parseFloat(value);
     return !Number.isNaN(parsedValue) && value === String(parsedValue);
 }
-function colorConfigToColorGridDefinitions(colorConfig) {
+function colorConfigToColorGridDefinitions$1(colorConfig) {
     return colorConfig.map((item)=>({
             color: item.model,
             label: item.label,
@@ -8285,9 +8294,6 @@ function colorConfigToColorGridDefinitions(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;
@@ -8309,9 +8315,6 @@ function colorConfigToColorGridDefinitions(colorConfig) {
     /**
 	 * The "Cancel" button view.
 	 */ cancelButtonView;
-    /**
-	 * The "Back" button view.
-	 */ backButtonView;
     /**
 	 * A collection of views that can be focused in the form.
 	 */ _focusables;
@@ -8337,13 +8340,11 @@ function colorConfigToColorGridDefinitions(colorConfig) {
             width: '',
             height: '',
             horizontalAlignment: '',
-            verticalAlignment: '',
-            cellType: ''
+            verticalAlignment: ''
         });
         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();
@@ -8353,7 +8354,6 @@ function colorConfigToColorGridDefinitions(colorConfig) {
         this.borderWidthInput = borderWidthInput;
         this.borderColorInput = borderColorInput;
         this.backgroundInput = backgroundInput;
-        this.cellTypeDropdown = cellTypeDropdown;
         this.paddingInput = this._createPaddingField();
         this.widthInput = widthInput;
         this.heightInput = heightInput;
@@ -8365,7 +8365,6 @@ function colorConfigToColorGridDefinitions(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,
@@ -8379,42 +8378,28 @@ function colorConfigToColorGridDefinitions(colorConfig) {
             }
         });
         // Form header.
-        const header = new FormHeaderView(locale, {
+        this.children.add(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,
-                borderWidthInput,
-                borderColorInput
+                borderColorInput,
+                borderWidthInput
             ],
             class: 'ck-table-form__border-row'
         }));
-        // Background and cell type.
+        // Background.
         this.children.add(new FormRowView(locale, {
+            labelView: backgroundRowLabel,
             children: [
-                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'
-                })
-            ]
+                backgroundRowLabel,
+                backgroundInput
+            ],
+            class: 'ck-table-form__background-row'
         }));
         // Dimensions row and padding.
         this.children.add(new FormRowView(locale, {
@@ -8452,8 +8437,8 @@ function colorConfigToColorGridDefinitions(colorConfig) {
         // Action row.
         this.children.add(new FormRowView(locale, {
             children: [
-                this.cancelButtonView,
-                this.saveButtonView
+                this.saveButtonView,
+                this.cancelButtonView
             ],
             class: 'ck-table-form__action-row'
         }));
@@ -8492,16 +8477,14 @@ function colorConfigToColorGridDefinitions(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.backButtonView
+            this.cancelButtonView
         ].forEach((view)=>{
             // Register the view as focusable.
             this._focusables.add(view);
@@ -8536,7 +8519,7 @@ function colorConfigToColorGridDefinitions(colorConfig) {
             width: defaultTableCellProperties.borderWidth,
             color: defaultTableCellProperties.borderColor
         };
-        const colorInputCreator = getLabeledColorInputCreator({
+        const colorInputCreator = getLabeledColorInputCreator$1({
             colorConfig: this.options.borderColors,
             columns: 5,
             defaultColorValue: defaultBorder.color,
@@ -8549,7 +8532,7 @@ function colorConfigToColorGridDefinitions(colorConfig) {
         const borderRowLabel = new LabelView(locale);
         borderRowLabel.text = t('Border');
         // -- Style ---------------------------------------------------
-        const styleLabels = getBorderStyleLabels(t);
+        const styleLabels = getBorderStyleLabels$1(t);
         const borderStyleDropdown = new LabeledFieldView(locale, createLabeledDropdown);
         borderStyleDropdown.set({
             label: accessibleLabel,
@@ -8569,7 +8552,7 @@ function colorConfigToColorGridDefinitions(colorConfig) {
             this.borderStyle = evt.source._borderStyleValue;
         });
         borderStyleDropdown.bind('isEmpty').to(this, 'borderStyle', (value)=>!value);
-        addListToDropdown(borderStyleDropdown.fieldView, getBorderStyleDefinitions(this, defaultBorder.style), {
+        addListToDropdown(borderStyleDropdown.fieldView, getBorderStyleDefinitions$1(this, defaultBorder.style), {
             role: 'menu',
             ariaLabel: accessibleLabel
         });
@@ -8580,7 +8563,7 @@ function colorConfigToColorGridDefinitions(colorConfig) {
             class: 'ck-table-form__border-width'
         });
         borderWidthInput.fieldView.bind('value').to(this, 'borderWidth');
-        borderWidthInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$1);
+        borderWidthInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$3);
         borderWidthInput.fieldView.on('input', ()=>{
             this.borderWidth = borderWidthInput.fieldView.element.value;
         });
@@ -8591,7 +8574,7 @@ function colorConfigToColorGridDefinitions(colorConfig) {
             class: 'ck-table-form__border-color'
         });
         borderColorInput.fieldView.bind('value').to(this, 'borderColor');
-        borderColorInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$1);
+        borderColorInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$3);
         borderColorInput.fieldView.on('input', ()=>{
             this.borderColor = borderColorInput.fieldView.value;
         });
@@ -8599,12 +8582,12 @@ function colorConfigToColorGridDefinitions(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$1(newValue)) {
+            if (!isBorderStyleSet$3(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)) {
+            if (!isBorderStyleSet$3(oldValue)) {
                 this.borderColor = defaultBorder.color;
                 this.borderWidth = defaultBorder.width;
             }
@@ -8627,7 +8610,7 @@ function colorConfigToColorGridDefinitions(colorConfig) {
         const backgroundRowLabel = new LabelView(locale);
         backgroundRowLabel.text = t('Background');
         // -- Background color input -----------------------------------
-        const colorInputCreator = getLabeledColorInputCreator({
+        const colorInputCreator = getLabeledColorInputCreator$1({
             colorConfig: this.options.backgroundColors,
             columns: 5,
             defaultColorValue: this.options.defaultTableCellProperties.backgroundColor,
@@ -8647,46 +8630,6 @@ function colorConfigToColorGridDefinitions(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:
 	 *
@@ -8783,10 +8726,9 @@ function colorConfigToColorGridDefinitions(colorConfig) {
         horizontalAlignmentToolbar.set({
             isCompact: true,
             role: 'radiogroup',
-            ariaLabel: t('Horizontal text alignment toolbar'),
-            class: 'ck-table-cell-properties-form__horizontal-alignment-toolbar'
+            ariaLabel: t('Horizontal text alignment toolbar')
         });
-        fillToolbar({
+        fillToolbar$1({
             view: this,
             icons: ALIGNMENT_ICONS,
             toolbar: horizontalAlignmentToolbar,
@@ -8810,10 +8752,9 @@ function colorConfigToColorGridDefinitions(colorConfig) {
         verticalAlignmentToolbar.set({
             isCompact: true,
             role: 'radiogroup',
-            ariaLabel: t('Vertical text alignment toolbar'),
-            class: 'ck-table-cell-properties-form__vertical-alignment-toolbar'
+            ariaLabel: t('Vertical text alignment toolbar')
         });
-        fillToolbar({
+        fillToolbar$1({
             view: this,
             icons: ALIGNMENT_ICONS,
             toolbar: verticalAlignmentToolbar,
@@ -8845,7 +8786,8 @@ function colorConfigToColorGridDefinitions(colorConfig) {
         ];
         saveButtonView.set({
             label: t('Save'),
-            class: 'ck-button-action',
+            icon: IconCheck,
+            class: 'ck-button-save',
             type: 'submit',
             withText: true
         });
@@ -8854,6 +8796,8 @@ function colorConfigToColorGridDefinitions(colorConfig) {
         });
         cancelButtonView.set({
             label: t('Cancel'),
+            icon: IconCancel,
+            class: 'ck-button-cancel',
             withText: true
         });
         cancelButtonView.delegate('execute').to(this, 'cancel');
@@ -8862,43 +8806,6 @@ function colorConfigToColorGridDefinitions(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() {
@@ -8935,17 +8842,8 @@ function colorConfigToColorGridDefinitions(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$1(value) {
+function isBorderStyleSet$3(value) {
     return value !== 'none';
 }
 
@@ -9044,9 +8942,9 @@ const BALLOON_POSITIONS = /* #__PURE__ */ (()=>[
     return Rect.getBoundingRect(rects);
 }
 
-const ERROR_TEXT_TIMEOUT$1 = 500;
+const ERROR_TEXT_TIMEOUT$3 = 500;
 // Map of view properties and related commands.
-const propertyToCommandMap$1 = {
+const propertyToCommandMap$3 = {
     borderStyle: 'tableCellBorderStyle',
     borderColor: 'tableCellBorderColor',
     borderWidth: 'tableCellBorderWidth',
@@ -9055,8 +8953,7 @@ const propertyToCommandMap$1 = {
     padding: 'tableCellPadding',
     backgroundColor: 'tableCellBackgroundColor',
     horizontalAlignment: 'tableCellHorizontalAlignment',
-    verticalAlignment: 'tableCellVerticalAlignment',
-    cellType: 'tableCellType'
+    verticalAlignment: 'tableCellVerticalAlignment'
 };
 /**
  * The table cell properties UI plugin. It introduces the `'tableCellProperties'` button
@@ -9143,7 +9040,7 @@ const propertyToCommandMap$1 = {
                 tooltip: true
             });
             this.listenTo(view, 'execute', ()=>this._showView());
-            const commands = Object.values(propertyToCommandMap$1).map((commandName)=>editor.commands.get(commandName)).filter((val)=>!!val);
+            const commands = Object.values(propertyToCommandMap$3).map((commandName)=>editor.commands.get(commandName));
             view.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled)=>areEnabled.some((isCommandEnabled)=>isCommandEnabled));
             return view;
         });
@@ -9249,11 +9146,6 @@ const propertyToCommandMap$1 = {
         }));
         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;
     }
     /**
@@ -9266,24 +9158,12 @@ const propertyToCommandMap$1 = {
 	 */ _fillViewFormFromCommandValues() {
         const commands = this.editor.commands;
         const borderStyleCommand = commands.get('tableCellBorderStyle');
-        Object.entries(propertyToCommandMap$1).flatMap(([property, commandName])=>{
-            const command = commands.get(commandName);
-            if (!command) {
-                return [];
-            }
+        Object.entries(propertyToCommandMap$3).map(([property, commandName])=>{
             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
-            ];
+            const defaultValue = this.view === this._viewWithContentTableDefaults ? this._defaultContentTableCellProperties[propertyKey] || '' : this._defaultLayoutTableCellProperties[propertyKey] || '';
             return [
-                entry
+                property,
+                commands.get(commandName).value || defaultValue
             ];
         }).forEach(([property, value])=>{
             // Do not set the `border-color` and `border-width` fields if `border-style:none`.
@@ -9384,7 +9264,7 @@ const propertyToCommandMap$1 = {
         const { commandName, viewField, validator, errorText } = options;
         const setErrorTextDebounced = debounce(()=>{
             viewField.errorText = errorText;
-        }, ERROR_TEXT_TIMEOUT$1);
+        }, ERROR_TEXT_TIMEOUT$3);
         return (evt, propertyName, newValue)=>{
             setErrorTextDebounced.cancel();
             // Do not execute the command on initial call (opening the table properties view).
@@ -10170,8 +10050,10 @@ 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));
-        enableCellTypeProperty(editor);
-        editor.commands.add('tableCellType', new TableCellTypeCommand(editor));
+        if (editor.config.get('experimentalFlags.tableCellTypeSupport')) {
+            enableCellTypeProperty(editor);
+            editor.commands.add('tableCellType', new TableCellTypeCommand(editor));
+        }
     }
 }
 /**
@@ -12356,7 +12238,7 @@ const TABLE_TYPES = [
         const defaultTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
             includeAlignmentProperty: true
         });
-        const useInlineStyles = editor.config.get('table.tableProperties.alignment.useInlineStyles') === true;
+        const useInlineStyles = editor.config.get('table.tableProperties.alignment.useInlineStyles') !== false;
         editor.data.addStyleProcessorRules(addMarginStylesRules);
         editor.data.addStyleProcessorRules(addBorderStylesRules);
         enableBorderProperties(editor, {
@@ -12367,7 +12249,11 @@ 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));
-        enableAlignmentProperty(schema, conversion, defaultTableProperties.alignment, useInlineStyles);
+        if (editor.config.get('experimentalFlags.useExtendedTableBlockAlignment')) {
+            enableExtendedAlignmentProperty(schema, conversion, defaultTableProperties.alignment, useInlineStyles);
+        } else {
+            enableAlignmentProperty(schema, conversion, defaultTableProperties.alignment);
+        }
         editor.commands.add('tableAlignment', new TableAlignmentCommand(editor, defaultTableProperties.alignment));
         enableTableToFigureProperty(schema, conversion, {
             modelAttribute: 'tableWidth',
@@ -12394,18 +12280,20 @@ const TABLE_TYPES = [
             defaultValue: defaultTableProperties.backgroundColor
         });
         editor.commands.add('tableBackgroundColor', new TableBackgroundColorCommand(editor, defaultTableProperties.backgroundColor));
-        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));
+        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'
             });
-        }, {
-            priority: 'lowest'
-        });
+        }
     }
 }
 /**
@@ -12475,10 +12363,10 @@ function insertWrapperWithAlignment(writer, align, table) {
     });
 }
 /**
- * Enables the `'alignment'` attribute for table.
+ * Enables the extended block`'alignment'` attribute for table.
  *
  * @param defaultValue The default alignment value.
- */ function enableAlignmentProperty(schema, conversion, defaultValue, useInlineStyles) {
+ */ function enableExtendedAlignmentProperty(schema, conversion, defaultValue, useInlineStyles) {
     schema.extend('table', {
         allowAttributes: [
             'tableAlignment'
@@ -12578,37 +12466,175 @@ function insertWrapperWithAlignment(writer, align, table) {
     conversion.for('upcast').add(upcastTableAlignedDiv(defaultValue));
 }
 /**
- * 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>
- * ```
+ * Enables the `'alignment'` attribute for 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;
+ * @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
+                };
             }
-            // Find a table element inside the div element.
-            const viewTable = getViewTableFromWrapper(data.viewItem);
-            // Do not convert if table element is absent or was already converted.
-            if (!viewTable || !conversionApi.consumable.test(viewTable, {
+        },
+        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;
+            }
+            // Find a table element inside the div element.
+            const viewTable = getViewTableFromWrapper(data.viewItem);
+            // Do not convert if table element is absent or was already converted.
+            if (!viewTable || !conversionApi.consumable.test(viewTable, {
                 name: true
             })) {
                 return;
@@ -12767,9 +12793,6 @@ 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;
@@ -12811,7 +12834,6 @@ 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,
@@ -12825,22 +12847,29 @@ function insertWrapperWithAlignment(writer, align, table) {
             }
         });
         // Form header.
-        const headerView = new FormHeaderView(locale, {
+        this.children.add(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
+                borderColorInput,
+                borderWidthInput
             ],
             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.
@@ -12854,31 +12883,22 @@ function insertWrapperWithAlignment(writer, align, table) {
                     ],
                     class: 'ck-table-form__dimensions-row'
                 }),
-                // Background row.
+                // Alignment row.
                 new FormRowView(locale, {
-                    labelView: backgroundRowLabel,
+                    labelView: alignmentLabel,
                     children: [
-                        backgroundRowLabel,
-                        backgroundInput
+                        alignmentLabel,
+                        alignmentToolbar
                     ],
-                    class: 'ck-table-form__background-row'
+                    class: 'ck-table-properties-form__alignment-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
+                this.saveButtonView,
+                this.cancelButtonView
             ],
             class: 'ck-table-form__action-row'
         }));
@@ -12915,15 +12935,14 @@ function insertWrapperWithAlignment(writer, align, table) {
         });
         [
             this.borderStyleDropdown,
-            this.borderWidthInput,
             this.borderColorInput,
+            this.borderWidthInput,
+            this.backgroundInput,
             this.widthInput,
             this.heightInput,
-            this.backgroundInput,
             this.alignmentToolbar,
-            this.cancelButtonView,
             this.saveButtonView,
-            this.backButtonView
+            this.cancelButtonView
         ].forEach((view)=>{
             // Register the view as focusable.
             this._focusables.add(view);
@@ -12958,7 +12977,7 @@ function insertWrapperWithAlignment(writer, align, table) {
             width: defaultTableProperties.borderWidth,
             color: defaultTableProperties.borderColor
         };
-        const colorInputCreator = getLabeledColorInputCreator({
+        const colorInputCreator = getLabeledColorInputCreator$1({
             colorConfig: this.options.borderColors,
             columns: 5,
             defaultColorValue: defaultBorder.color,
@@ -12971,7 +12990,7 @@ function insertWrapperWithAlignment(writer, align, table) {
         const borderRowLabel = new LabelView(locale);
         borderRowLabel.text = t('Border');
         // -- Style ---------------------------------------------------
-        const styleLabels = getBorderStyleLabels(t);
+        const styleLabels = getBorderStyleLabels$1(t);
         const borderStyleDropdown = new LabeledFieldView(locale, createLabeledDropdown);
         borderStyleDropdown.set({
             label: accessibleLabel,
@@ -12991,7 +13010,7 @@ function insertWrapperWithAlignment(writer, align, table) {
             this.borderStyle = evt.source._borderStyleValue;
         });
         borderStyleDropdown.bind('isEmpty').to(this, 'borderStyle', (value)=>!value);
-        addListToDropdown(borderStyleDropdown.fieldView, getBorderStyleDefinitions(this, defaultBorder.style), {
+        addListToDropdown(borderStyleDropdown.fieldView, getBorderStyleDefinitions$1(this, defaultBorder.style), {
             role: 'menu',
             ariaLabel: accessibleLabel
         });
@@ -13002,7 +13021,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);
+        borderWidthInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$2);
         borderWidthInput.fieldView.on('input', ()=>{
             this.borderWidth = borderWidthInput.fieldView.element.value;
         });
@@ -13013,7 +13032,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);
+        borderColorInput.bind('isEnabled').to(this, 'borderStyle', isBorderStyleSet$2);
         borderColorInput.fieldView.on('input', ()=>{
             this.borderColor = borderColorInput.fieldView.value;
         });
@@ -13021,12 +13040,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(newValue)) {
+            if (!isBorderStyleSet$2(newValue)) {
                 this.borderColor = '';
                 this.borderWidth = '';
             }
             // When setting the `border-style` from `none`, set the default `border-color` and `border-width` properties.
-            if (!isBorderStyleSet(oldValue)) {
+            if (!isBorderStyleSet$2(oldValue)) {
                 this.borderColor = defaultBorder.color;
                 this.borderWidth = defaultBorder.width;
             }
@@ -13049,7 +13068,7 @@ function insertWrapperWithAlignment(writer, align, table) {
         const backgroundRowLabel = new LabelView(locale);
         backgroundRowLabel.text = t('Background');
         // -- Background color input -----------------------------------
-        const backgroundInputCreator = getLabeledColorInputCreator({
+        const backgroundInputCreator = getLabeledColorInputCreator$1({
             colorConfig: this.options.backgroundColors,
             columns: 5,
             defaultColorValue: this.options.defaultTableProperties.backgroundColor,
@@ -13131,7 +13150,7 @@ function insertWrapperWithAlignment(writer, align, table) {
         const t = this.t;
         // -- Label ---------------------------------------------------
         const alignmentLabel = new LabelView(locale);
-        alignmentLabel.text = t('Table Alignment');
+        alignmentLabel.text = t('Alignment');
         // -- Toolbar ---------------------------------------------------
         const alignmentToolbar = new ToolbarView(locale);
         alignmentToolbar.set({
@@ -13139,14 +13158,12 @@ function insertWrapperWithAlignment(writer, align, table) {
             isCompact: true,
             ariaLabel: t('Table alignment toolbar')
         });
-        fillToolbar({
+        fillToolbar$1({
             view: this,
             icons: {
                 left: IconObjectInlineLeft,
                 center: IconObjectCenter,
-                right: IconObjectInlineRight,
-                blockLeft: IconObjectLeft,
-                blockRight: IconObjectRight
+                right: IconObjectInlineRight
             },
             toolbar: alignmentToolbar,
             labels: this._alignmentLabels,
@@ -13177,7 +13194,8 @@ function insertWrapperWithAlignment(writer, align, table) {
         ];
         saveButtonView.set({
             label: t('Save'),
-            class: 'ck-button-action',
+            icon: IconCheck,
+            class: 'ck-button-save',
             type: 'submit',
             withText: true
         });
@@ -13186,6 +13204,8 @@ function insertWrapperWithAlignment(writer, align, table) {
         });
         cancelButtonView.set({
             label: t('Cancel'),
+            icon: IconCancel,
+            class: 'ck-button-cancel',
             withText: true
         });
         cancelButtonView.delegate('execute').to(this, 'cancel');
@@ -13194,56 +13214,37 @@ 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 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');
+        const left = t('Align table to the left');
+        const center = t('Center table');
+        const right = t('Align table to the right');
         // Returns object with a proper order of labels.
         if (locale.uiLanguageDirection === 'rtl') {
             return {
                 right,
+                center,
+                left
+            };
+        } else {
+            return {
                 left,
-                blockRight,
                 center,
-                blockLeft
+                right
             };
         }
-        return {
-            blockLeft,
-            center,
-            blockRight,
-            left,
-            right
-        };
     }
 }
-function isBorderStyleSet(value) {
+function isBorderStyleSet$2(value) {
     return value !== 'none';
 }
 
-const ERROR_TEXT_TIMEOUT = 500;
+const ERROR_TEXT_TIMEOUT$2 = 500;
 // Map of view properties and related commands.
-const propertyToCommandMap = {
+const propertyToCommandMap$2 = {
     borderStyle: 'tableBorderStyle',
     borderColor: 'tableBorderColor',
     borderWidth: 'tableBorderWidth',
@@ -13335,7 +13336,7 @@ const propertyToCommandMap = {
             tooltip: true
         });
         this.listenTo(view, 'execute', ()=>this._showView());
-        const commands = Object.values(propertyToCommandMap).map((commandName)=>editor.commands.get(commandName));
+        const commands = Object.values(propertyToCommandMap$2).map((commandName)=>editor.commands.get(commandName));
         view.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled)=>areEnabled.some((isCommandEnabled)=>isCommandEnabled));
         return view;
     }
@@ -13445,7 +13446,7 @@ const propertyToCommandMap = {
 	 */ _fillViewFormFromCommandValues() {
         const commands = this.editor.commands;
         const borderStyleCommand = commands.get('tableBorderStyle');
-        Object.entries(propertyToCommandMap).map(([property, commandName])=>{
+        Object.entries(propertyToCommandMap$2).map(([property, commandName])=>{
             const propertyKey = property;
             const defaultValue = this.view === this._viewWithContentTableDefaults ? this._defaultContentTableProperties[propertyKey] || '' : this._defaultLayoutTableProperties[propertyKey] || '';
             return [
@@ -13554,7 +13555,7 @@ const propertyToCommandMap = {
         const { commandName, viewField, validator, errorText } = options;
         const setErrorTextDebounced = debounce(()=>{
             viewField.errorText = errorText;
-        }, ERROR_TEXT_TIMEOUT);
+        }, ERROR_TEXT_TIMEOUT$2);
         return (evt, propertyName, newValue)=>{
             setErrorTextDebounced.cancel();
             // Do not execute the command on initial call (opening the table properties view).
@@ -13995,5 +13996,2096 @@ const propertyToCommandMap = {
     }
 }
 
-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 };
+/**
+ * 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 };
 //# sourceMappingURL=index.js.map