@ckeditor/ckeditor5-table 44.3.0 → 45.0.0-alpha.0

package/lang/translations/zh.po

@@ -266,3 +266,31 @@ msgstr "在表格中移動"
 msgctxt "The accessible label of the menu bar button that displays a user interface to insert a table into editor content."
 msgid "Table"
 msgstr "表格"
+
+msgctxt "Label for the insert table layout toolbar button."
+msgid "Insert table layout"
+msgstr ""
+
+msgctxt "The accessible label used in the table layout insert UI element."
+msgid "Table layout"
+msgstr ""
+
+msgctxt "The accessible label of the layout table type dropdown button."
+msgid "Layout table"
+msgstr ""
+
+msgctxt "The accessible label of the content table type dropdown button."
+msgid "Content table"
+msgstr ""
+
+msgctxt "The accessible label of the table balloon button that displays a user interface to choose table type."
+msgid "Choose table type"
+msgstr ""
+
+msgctxt "The accessible label of the table type toolbar button."
+msgid "Table type"
+msgstr ""
+
+msgctxt "The accessible label of dropdown list that displays a user interface to choose table type."
+msgid "Table type options"
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "44.3.0",
+  "version": "45.0.0-alpha.0",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,14 +13,15 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "44.3.0",
-    "@ckeditor/ckeditor5-clipboard": "44.3.0",
-    "@ckeditor/ckeditor5-core": "44.3.0",
-    "@ckeditor/ckeditor5-engine": "44.3.0",
-    "@ckeditor/ckeditor5-ui": "44.3.0",
-    "@ckeditor/ckeditor5-utils": "44.3.0",
-    "@ckeditor/ckeditor5-widget": "44.3.0",
-    "lodash-es": "4.17.21"
+    "ckeditor5": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-clipboard": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-core": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-widget": "45.0.0-alpha.0",
+    "es-toolkit": "1.32.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/augmentation.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import type { TableConfig, Table, TableCaption, TableCaptionEditing, TableCaptionUI, TableCellProperties, TableCellPropertiesEditing, TableCellPropertiesUI, TableCellWidthEditing, TableClipboard, TableColumnResize, TableColumnResizeEditing, TableEditing, TableKeyboard, TableMouse, TableProperties, TablePropertiesEditing, TablePropertiesUI, TableSelection, TableToolbar, TableUI, TableUtils, PlainTableOutput, InsertColumnCommand, InsertRowCommand, InsertTableCommand, MergeCellCommand, MergeCellsCommand, RemoveColumnCommand, RemoveRowCommand, SelectColumnCommand, SelectRowCommand, SetHeaderColumnCommand, SetHeaderRowCommand, SplitCellCommand, ToggleTableCaptionCommand, TableCellBackgroundColorCommand, TableCellBorderColorCommand, TableCellBorderStyleCommand, TableCellBorderWidthCommand, TableCellHeightCommand, TableCellHorizontalAlignmentCommand, TableCellPaddingCommand, TableCellVerticalAlignmentCommand, TableCellWidthCommand, TableAlignmentCommand, TableBackgroundColorCommand, TableBorderColorCommand, TableBorderStyleCommand, TableBorderWidthCommand, TableHeightCommand, TableWidthCommand } from './index.js';
+import type { TableConfig, Table, TableCaption, TableCaptionEditing, TableCaptionUI, TableCellProperties, TableCellPropertiesEditing, TableCellPropertiesUI, TableCellWidthEditing, TableClipboard, TableColumnResize, TableColumnResizeEditing, TableEditing, TableKeyboard, TableLayout, TableLayoutEditing, TableMouse, TableProperties, TablePropertiesEditing, TablePropertiesUI, TableSelection, TableToolbar, TableUI, TableUtils, PlainTableOutput, InsertColumnCommand, InsertRowCommand, InsertTableCommand, InsertTableLayoutCommand, MergeCellCommand, MergeCellsCommand, RemoveColumnCommand, RemoveRowCommand, SelectColumnCommand, SelectRowCommand, SetHeaderColumnCommand, SetHeaderRowCommand, TableTypeCommand, SplitCellCommand, ToggleTableCaptionCommand, TableCellBackgroundColorCommand, TableCellBorderColorCommand, TableCellBorderStyleCommand, TableCellBorderWidthCommand, TableCellHeightCommand, TableCellHorizontalAlignmentCommand, TableCellPaddingCommand, TableCellVerticalAlignmentCommand, TableCellWidthCommand, TableAlignmentCommand, TableBackgroundColorCommand, TableBorderColorCommand, TableBorderStyleCommand, TableBorderWidthCommand, TableHeightCommand, TableWidthCommand } from './index.js';
 declare module '@ckeditor/ckeditor5-core' {
     interface EditorConfig {
         /**
@@ -26,6 +26,8 @@ declare module '@ckeditor/ckeditor5-core' {
         [TableColumnResizeEditing.pluginName]: TableColumnResizeEditing;
         [TableEditing.pluginName]: TableEditing;
         [TableKeyboard.pluginName]: TableKeyboard;
+        [TableLayout.pluginName]: TableLayout;
+        [TableLayoutEditing.pluginName]: TableLayoutEditing;
         [TableMouse.pluginName]: TableMouse;
         [TableProperties.pluginName]: TableProperties;
         [TablePropertiesEditing.pluginName]: TablePropertiesEditing;
@@ -42,6 +44,7 @@ declare module '@ckeditor/ckeditor5-core' {
         insertTableRowAbove: InsertRowCommand;
         insertTableRowBelow: InsertRowCommand;
         insertTable: InsertTableCommand;
+        insertTableLayout: InsertTableLayoutCommand;
         mergeTableCellRight: MergeCellCommand;
         mergeTableCellLeft: MergeCellCommand;
         mergeTableCellDown: MergeCellCommand;
@@ -72,5 +75,6 @@ declare module '@ckeditor/ckeditor5-core' {
         tableBorderWidth: TableBorderWidthCommand;
         tableHeight: TableHeightCommand;
         tableWidth: TableWidthCommand;
+        tableType: TableTypeCommand;
     }
 }

package/src/commands/insertcolumncommand.js

@@ -25,6 +25,10 @@ import { Command } from 'ckeditor5/src/core.js';
  * ```
  */
 export default class InsertColumnCommand extends Command {
+    /**
+     * The order of insertion relative to the column in which the caret is located.
+     */
+    order;
     /**
      * Creates a new `InsertColumnCommand` instance.
      *

package/src/commands/insertrowcommand.js

@@ -25,6 +25,10 @@ import { Command } from 'ckeditor5/src/core.js';
  * ```
  */
 export default class InsertRowCommand extends Command {
+    /**
+     * The order of insertion relative to the row in which the caret is located.
+     */
+    order;
     /**
      * Creates a new `InsertRowCommand` instance.
      *

package/src/commands/inserttablelayoutcommand.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module table/commands/inserttablelayoutcommand
+ */
+import { Command } from 'ckeditor5/src/core.js';
+/**
+ * The insert table layout command.
+ *
+ * The command is registered by {@link module:table/tablelayout/tablelayoutediting~TableLayoutEditing}
+ * as the `'insertTableLayout'` editor command.
+ *
+ * To insert a layout table at the current selection, execute the command and specify the dimensions:
+ *
+ * ```ts
+ * editor.execute( 'insertTableLayout', { rows: 20, columns: 5 } );
+ * ```
+ */
+export default class InsertTableLayoutCommand extends Command {
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command.
+     *
+     * Inserts a layout table with the given number of rows and columns into the editor.
+     *
+     * @param options.rows The number of rows to create in the inserted table. Default value is 2.
+     * @param options.columns The number of columns to create in the inserted table. Default value is 2.
+     * @fires execute
+     */
+    execute(options?: {
+        rows?: number;
+        columns?: number;
+    }): void;
+}

package/src/commands/inserttablelayoutcommand.js

@@ -0,0 +1,65 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module table/commands/inserttablelayoutcommand
+ */
+import { Command } from 'ckeditor5/src/core.js';
+/**
+ * The insert table layout command.
+ *
+ * The command is registered by {@link module:table/tablelayout/tablelayoutediting~TableLayoutEditing}
+ * as the `'insertTableLayout'` editor command.
+ *
+ * To insert a layout table at the current selection, execute the command and specify the dimensions:
+ *
+ * ```ts
+ * editor.execute( 'insertTableLayout', { rows: 20, columns: 5 } );
+ * ```
+ */
+export default class InsertTableLayoutCommand extends Command {
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const model = this.editor.model;
+        const selection = model.document.selection;
+        const schema = model.schema;
+        this.isEnabled = isAllowedInParent(selection, schema);
+    }
+    /**
+     * Executes the command.
+     *
+     * Inserts a layout table with the given number of rows and columns into the editor.
+     *
+     * @param options.rows The number of rows to create in the inserted table. Default value is 2.
+     * @param options.columns The number of columns to create in the inserted table. Default value is 2.
+     * @fires execute
+     */
+    execute(options = {}) {
+        const editor = this.editor;
+        const model = editor.model;
+        const tableUtils = editor.plugins.get('TableUtils');
+        model.change(writer => {
+            const normalizedOptions = { rows: options.rows || 2, columns: options.columns || 2 };
+            const table = tableUtils.createTable(writer, normalizedOptions);
+            writer.setAttribute('tableType', 'layout', table);
+            model.insertObject(table, null, null, { findOptimalPosition: 'auto' });
+            const singleColumnWidth = `${100 / normalizedOptions.columns}%`;
+            const columnWidths = Array(normalizedOptions.columns).fill(singleColumnWidth);
+            const tableWidthsCommand = editor.commands.get('resizeColumnWidths');
+            // Make the table full-width with equal columns width.
+            tableWidthsCommand.execute({ tableWidth: '100%', columnWidths, table });
+            writer.setSelection(writer.createPositionAt(table.getNodeByPath([0, 0, 0]), 0));
+        });
+    }
+}
+/**
+ * Checks if the table is allowed in the parent.
+ */
+function isAllowedInParent(selection, schema) {
+    const positionParent = selection.getFirstPosition().parent;
+    const validParent = positionParent === positionParent.root ? positionParent : positionParent.parent;
+    return schema.checkChild(validParent, 'table');
+}

package/src/commands/mergecellcommand.js

@@ -25,6 +25,14 @@ import { removeEmptyRowsColumns } from '../utils/structure.js';
  * (for `'mergeTableCellUp'` and `'mergeTableCellDown'`), the command will be disabled.
  */
 export default class MergeCellCommand extends Command {
+    /**
+     * The direction that indicates which cell will be merged with the currently selected one.
+     */
+    direction;
+    /**
+     * Whether the merge is horizontal (left/right) or vertical (up/down).
+     */
+    isHorizontal;
     /**
      * Creates a new `MergeCellCommand` instance.
      *

package/src/commands/setheadercolumncommand.js

@@ -28,12 +28,17 @@ export default class SetHeaderColumnCommand extends Command {
      * @inheritDoc
      */
     refresh() {
-        const model = this.editor.model;
         const tableUtils = this.editor.plugins.get('TableUtils');
+        const model = this.editor.model;
         const selectedCells = tableUtils.getSelectionAffectedTableCells(model.document.selection);
-        const isInTable = selectedCells.length > 0;
-        this.isEnabled = isInTable;
-        this.value = isInTable && selectedCells.every(cell => isHeadingColumnCell(tableUtils, cell));
+        if (selectedCells.length === 0) {
+            this.isEnabled = false;
+            this.value = false;
+            return;
+        }
+        const table = selectedCells[0].findAncestor('table');
+        this.isEnabled = model.schema.checkAttribute(table, 'headingColumns');
+        this.value = selectedCells.every(cell => isHeadingColumnCell(tableUtils, cell));
     }
     /**
      * Executes the command.

package/src/commands/setheaderrowcommand.js

@@ -30,9 +30,14 @@ export default class SetHeaderRowCommand extends Command {
         const tableUtils = this.editor.plugins.get('TableUtils');
         const model = this.editor.model;
         const selectedCells = tableUtils.getSelectionAffectedTableCells(model.document.selection);
-        const isInTable = selectedCells.length > 0;
-        this.isEnabled = isInTable;
-        this.value = isInTable && selectedCells.every(cell => this._isInHeading(cell, cell.parent.parent));
+        if (selectedCells.length === 0) {
+            this.isEnabled = false;
+            this.value = false;
+            return;
+        }
+        const table = selectedCells[0].findAncestor('table');
+        this.isEnabled = model.schema.checkAttribute(table, 'headingRows');
+        this.value = selectedCells.every(cell => this._isInHeading(cell, cell.parent.parent));
     }
     /**
      * Executes the command.

package/src/commands/splitcellcommand.js

@@ -19,6 +19,10 @@ import { Command } from 'ckeditor5/src/core.js';
  * ```
  */
 export default class SplitCellCommand extends Command {
+    /**
+     * The direction that indicates which cell will be split.
+     */
+    direction;
     /**
      * Creates a new `SplitCellCommand` instance.
      *

package/src/converters/downcast.js

@@ -73,7 +73,7 @@ export function downcastCell(options = {}) {
                 const isHeading = tableSlot.row < headingRows || tableSlot.column < headingColumns;
                 const cellElementName = isHeading ? 'th' : 'td';
                 result = options.asWidget ?
-                    toWidgetEditable(writer.createEditableElement(cellElementName), writer) :
+                    toWidgetEditable(writer.createEditableElement(cellElementName), writer, { withAriaRole: false }) :
                     writer.createContainerElement(cellElementName);
                 break;
             }

package/src/index.d.ts

@@ -14,6 +14,8 @@ export { default as TableCellProperties } from './tablecellproperties.js';
 export { default as TableCellPropertiesEditing } from './tablecellproperties/tablecellpropertiesediting.js';
 export { default as TableCellPropertiesUI } from './tablecellproperties/tablecellpropertiesui.js';
 export { default as TableCellWidthEditing } from './tablecellwidth/tablecellwidthediting.js';
+export { default as TableLayout } from './tablelayout.js';
+export { default as TableLayoutEditing } from './tablelayout/tablelayoutediting.js';
 export { default as TableProperties } from './tableproperties.js';
 export { default as TablePropertiesEditing } from './tableproperties/tablepropertiesediting.js';
 export { default as TablePropertiesUI } from './tableproperties/tablepropertiesui.js';
@@ -31,6 +33,8 @@ export type { TableConfig } from './tableconfig.js';
 export type { default as InsertColumnCommand } from './commands/insertcolumncommand.js';
 export type { default as InsertRowCommand } from './commands/insertrowcommand.js';
 export type { default as InsertTableCommand } from './commands/inserttablecommand.js';
+export type { default as InsertTableLayoutCommand } from './commands/inserttablelayoutcommand.js';
+export type { default as TableTypeCommand } from './tablelayout/commands/tabletypecommand.js';
 export type { default as MergeCellCommand } from './commands/mergecellcommand.js';
 export type { default as MergeCellsCommand } from './commands/mergecellscommand.js';
 export type { default as RemoveColumnCommand } from './commands/removecolumncommand.js';

package/src/index.js

@@ -14,6 +14,8 @@ export { default as TableCellProperties } from './tablecellproperties.js';
 export { default as TableCellPropertiesEditing } from './tablecellproperties/tablecellpropertiesediting.js';
 export { default as TableCellPropertiesUI } from './tablecellproperties/tablecellpropertiesui.js';
 export { default as TableCellWidthEditing } from './tablecellwidth/tablecellwidthediting.js';
+export { default as TableLayout } from './tablelayout.js';
+export { default as TableLayoutEditing } from './tablelayout/tablelayoutediting.js';
 export { default as TableProperties } from './tableproperties.js';
 export { default as TablePropertiesEditing } from './tableproperties/tablepropertiesediting.js';
 export { default as TablePropertiesUI } from './tableproperties/tablepropertiesui.js';

package/src/plaintableoutput.d.ts

@@ -9,6 +9,9 @@ import { Plugin } from 'ckeditor5/src/core.js';
 import Table from './table.js';
 /**
  * The plain table output feature.
+ *
+ * This feature strips the `<figure>` tag from the table data. This is because this tag is not supported
+ * by most popular email clients and removing it ensures compatibility.
  */
 export default class PlainTableOutput extends Plugin {
     /**

package/src/plaintableoutput.js

@@ -9,6 +9,9 @@ import { Plugin } from 'ckeditor5/src/core.js';
 import Table from './table.js';
 /**
  * The plain table output feature.
+ *
+ * This feature strips the `<figure>` tag from the table data. This is because this tag is not supported
+ * by most popular email clients and removing it ensures compatibility.
  */
 export default class PlainTableOutput extends Plugin {
     /**
@@ -56,6 +59,14 @@ export default class PlainTableOutput extends Plugin {
         if (editor.plugins.has('TableProperties')) {
             downcastTableBorderAndBackgroundAttributes(editor);
         }
+        editor.conversion.for('upcast').add(dispatcher => {
+            dispatcher.on('element:table', (evt, data, conversionApi) => {
+                // It's not necessary to upcast the `table` class. This class was only added in data downcast
+                // to center a plain table in the editor output.
+                // See: https://github.com/ckeditor/ckeditor5/issues/17888.
+                conversionApi.consumable.consume(data.viewItem, { classes: 'table' });
+            });
+        });
     }
 }
 /**
@@ -96,7 +107,7 @@ function downcastTableElement(table, { writer }) {
     //        {table-body-rows-slot}
     //    </tbody>
     // </table>
-    return writer.createContainerElement('table', null, [childrenSlot, ...tableContentElements]);
+    return writer.createContainerElement('table', { class: 'table' }, [childrenSlot, ...tableContentElements]);
 }
 /**
  * Register table border and background attributes converters.

package/src/tablecaption/tablecaptionediting.js

@@ -15,6 +15,13 @@ import { isTable, matchTableCaptionViewElement } from './utils.js';
  * The table caption editing plugin.
  */
 export default class TableCaptionEditing extends Plugin {
+    /**
+     * A map that keeps saved JSONified table captions and table model elements they are
+     * associated with.
+     *
+     * To learn more about this system, see {@link #_saveCaption}.
+     */
+    _savedCaptionsMap;
     /**
      * @inheritDoc
      */

package/src/tablecaption/tablecaptionui.js

@@ -5,8 +5,9 @@
 /**
 * @module table/tablecaption/tablecaptionui
 */
-import { Plugin, icons } from 'ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
 import { ButtonView } from 'ckeditor5/src/ui.js';
+import { IconCaption } from 'ckeditor5/src/icons.js';
 import { getCaptionFromModelSelection } from './utils.js';
 /**
   * The table caption UI plugin. It introduces the `'toggleTableCaption'` UI button.
@@ -35,7 +36,7 @@ export default class TableCaptionUI extends Plugin {
             const command = editor.commands.get('toggleTableCaption');
             const view = new ButtonView(locale);
             view.set({
-                icon: icons.caption,
+                icon: IconCaption,
                 tooltip: true,
                 isToggleable: true
             });

package/src/tablecaption/toggletablecaptioncommand.js

@@ -38,7 +38,7 @@ export default class ToggleTableCaptionCommand extends Command {
     refresh() {
         const editor = this.editor;
         const tableElement = getSelectionAffectedTable(editor.model.document.selection);
-        this.isEnabled = !!tableElement;
+        this.isEnabled = !!tableElement && editor.model.schema.checkChild(tableElement, 'caption');
         if (!this.isEnabled) {
             this.value = false;
         }

package/src/tablecellproperties/commands/tablecellpropertycommand.js

@@ -12,6 +12,14 @@ import { Command } from 'ckeditor5/src/core.js';
  * The command is a base command for other table cell property commands.
  */
 export default class TableCellPropertyCommand extends Command {
+    /**
+     * The attribute that will be set by the command.
+     */
+    attributeName;
+    /**
+     * The default value for the attribute.
+     */
+    _defaultValue;
     /**
      * Creates a new `TableCellPropertyCommand` instance.
      *

package/src/tablecellproperties/tablecellpropertiesui.js

@@ -6,13 +6,13 @@
  * @module table/tablecellproperties/tablecellpropertiesui
  */
 import { Plugin } from 'ckeditor5/src/core.js';
+import { IconTableCellProperties } from 'ckeditor5/src/icons.js';
 import { ButtonView, clickOutsideHandler, ContextualBalloon, getLocalizedColorOptions, normalizeColorOptions } from 'ckeditor5/src/ui.js';
 import TableCellPropertiesView from './ui/tablecellpropertiesview.js';
 import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, defaultColors, lengthFieldValidator, lineWidthFieldValidator } from '../utils/ui/table-properties.js';
-import { debounce } from 'lodash-es';
+import { debounce } from 'es-toolkit/compat';
 import { getTableWidgetAncestor } from '../utils/ui/widget.js';
 import { getBalloonCellPositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon.js';
-import tableCellProperties from './../../theme/icons/table-cell-properties.svg';
 import { getNormalizedDefaultCellProperties } from '../utils/table-properties.js';
 const ERROR_TEXT_TIMEOUT = 500;
 // Map of view properties and related commands.
@@ -34,6 +34,28 @@ const propertyToCommandMap = {
  * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
  */
 export default class TableCellPropertiesUI extends Plugin {
+    /**
+     * The default table cell properties.
+     */
+    _defaultTableCellProperties;
+    /**
+     * The contextual balloon plugin instance.
+     */
+    _balloon;
+    /**
+     * The cell properties form view displayed inside the balloon.
+     */
+    view;
+    /**
+     * 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
      */
@@ -81,7 +103,7 @@ export default class TableCellPropertiesUI extends Plugin {
             const view = new ButtonView(locale);
             view.set({
                 label: t('Cell properties'),
-                icon: tableCellProperties,
+                icon: IconTableCellProperties,
                 tooltip: true
             });
             this.listenTo(view, 'execute', () => this._showView());

package/src/tablecellproperties/ui/tablecellpropertiesview.d.ts

@@ -9,7 +9,8 @@ import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewColle
 import { KeystrokeHandler, FocusTracker, type Locale } from 'ckeditor5/src/utils.js';
 import type ColorInputView from '../../ui/colorinputview.js';
 import type { TableCellPropertiesOptions } from '../../tableconfig.js';
-import '../../../theme/form.css';
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
+import '../../../theme/formrow.css';
 import '../../../theme/tableform.css';
 import '../../../theme/tablecellproperties.css';
 export interface TableCellPropertiesViewOptions {

package/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -5,12 +5,13 @@
 /**
  * @module table/tablecellproperties/ui/tablecellpropertiesview
  */
-import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, FormHeaderView, LabeledFieldView, LabelView, submitHandler, ToolbarView, View, ViewCollection } from 'ckeditor5/src/ui.js';
+import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, FormRowView, FormHeaderView, LabeledFieldView, LabelView, submitHandler, ToolbarView, View, ViewCollection } from 'ckeditor5/src/ui.js';
 import { KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils.js';
-import { icons } from 'ckeditor5/src/core.js';
+import { IconAlignBottom, IconAlignCenter, IconAlignJustify, IconAlignLeft, IconAlignMiddle, IconAlignRight, IconAlignTop, IconCancel, IconCheck } from 'ckeditor5/src/icons.js';
 import { fillToolbar, getBorderStyleDefinitions, getBorderStyleLabels, getLabeledColorInputCreator } from '../../utils/ui/table-properties.js';
-import FormRowView from '../../ui/formrowview.js';
-import '../../../theme/form.css';
+// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
+import '../../../theme/formrow.css';
 import '../../../theme/tableform.css';
 import '../../../theme/tablecellproperties.css';
 /**
@@ -18,6 +19,74 @@ import '../../../theme/tablecellproperties.css';
  * certain style aspects of a table cell, for instance, border, padding, text alignment, etc..
  */
 export default class TableCellPropertiesView 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;
+    /**
+     * 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;
+    /**
+     * 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.
@@ -412,13 +481,13 @@ export default class TableCellPropertiesView extends View {
         const t = this.t;
         const alignmentLabel = new LabelView(locale);
         const ALIGNMENT_ICONS = {
-            left: icons.alignLeft,
-            center: icons.alignCenter,
-            right: icons.alignRight,
-            justify: icons.alignJustify,
-            top: icons.alignTop,
-            middle: icons.alignMiddle,
-            bottom: icons.alignBottom
+            left: IconAlignLeft,
+            center: IconAlignCenter,
+            right: IconAlignRight,
+            justify: IconAlignJustify,
+            top: IconAlignTop,
+            middle: IconAlignMiddle,
+            bottom: IconAlignBottom
         };
         alignmentLabel.text = t('Table cell text alignment');
         // -- Horizontal ---------------------------------------------------
@@ -489,7 +558,7 @@ export default class TableCellPropertiesView extends View {
         ];
         saveButtonView.set({
             label: t('Save'),
-            icon: icons.check,
+            icon: IconCheck,
             class: 'ck-button-save',
             type: 'submit',
             withText: true
@@ -499,7 +568,7 @@ export default class TableCellPropertiesView extends View {
         });
         cancelButtonView.set({
             label: t('Cancel'),
-            icon: icons.cancel,
+            icon: IconCancel,
             class: 'ck-button-cancel',
             withText: true
         });