@ckeditor/ckeditor5-table 0.0.0-nightly-20250214.0 → 0.0.0-nightly-next-20250215.0

package/package.json

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

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/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/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/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/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.js

@@ -7,7 +7,7 @@
  */
 import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, 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';
@@ -18,6 +18,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 +480,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 +557,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 +567,7 @@ export default class TableCellPropertiesView extends View {
         });
         cancelButtonView.set({
             label: t('Cancel'),
-            icon: icons.cancel,
+            icon: IconCancel,
             class: 'ck-button-cancel',
             withText: true
         });

package/src/tablecolumnresize/tablecolumnresizeediting.js

@@ -5,7 +5,7 @@
 /**
  * @module table/tablecolumnresize/tablecolumnresizeediting
  */
-import { throttle, isEqual } from 'lodash-es';
+import { throttle, isEqual } from 'es-toolkit/compat';
 import { global, DomEmitterMixin } from 'ckeditor5/src/utils.js';
 import { Plugin } from 'ckeditor5/src/core.js';
 import MouseEventsObserver from '../../src/tablemouse/mouseeventsobserver.js';
@@ -20,6 +20,23 @@ import { COLUMN_MIN_WIDTH_IN_PIXELS } from './constants.js';
  * The table column resize editing plugin.
  */
 export default class TableColumnResizeEditing extends Plugin {
+    /**
+     * A flag indicating if the column resizing is in progress.
+     */
+    _isResizingActive;
+    /**
+     * A temporary storage for the required data needed to correctly calculate the widths of the resized columns. This storage is
+     * initialized when column resizing begins, and is purged upon completion.
+     */
+    _resizingData;
+    /**
+     * DOM emitter.
+     */
+    _domEmitter;
+    /**
+     * A local reference to the {@link module:table/tableutils~TableUtils} plugin.
+     */
+    _tableUtilsPlugin;
     /**
      * @inheritDoc
      */

package/src/tableediting.js

@@ -30,6 +30,10 @@ import '../theme/tableediting.css';
  * The table editing feature.
  */
 export default class TableEditing extends Plugin {
+    /**
+     * Handlers for creating additional slots in the table.
+     */
+    _additionalSlots;
     /**
      * @inheritDoc
      */

package/src/tablemouse/mouseeventsobserver.js

@@ -20,12 +20,9 @@ import { DomEventObserver } from 'ckeditor5/src/engine.js';
  * The observer is registered by the {@link module:table/tableselection~TableSelection} plugin.
  */
 export default class MouseEventsObserver extends DomEventObserver {
-    constructor() {
-        super(...arguments);
-        this.domEventType = [
-            'mousemove', 'mouseleave'
-        ];
-    }
+    domEventType = [
+        'mousemove', 'mouseleave'
+    ];
     /**
      * @inheritDoc
      */

package/src/tableproperties/commands/tablepropertycommand.js

@@ -10,6 +10,14 @@ import { getSelectionAffectedTable } from '../../utils/common.js';
  * This command is a base command for other table property commands.
  */
 export default class TablePropertyCommand extends Command {
+    /**
+     * The attribute that will be set by the command.
+     */
+    attributeName;
+    /**
+     * The default value for the attribute.
+     */
+    _defaultValue;
     /**
      * Creates a new `TablePropertyCommand` instance.
      *

package/src/tableproperties/tablepropertiesui.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/tableproperties/tablepropertiesui
  */
-import { type Editor, Plugin } from 'ckeditor5/src/core.js';
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
 import { ContextualBalloon } from 'ckeditor5/src/ui.js';
 import TablePropertiesView from './ui/tablepropertiesview.js';
 /**

package/src/tableproperties/tablepropertiesui.js

@@ -6,10 +6,10 @@
  * @module table/tableproperties/tablepropertiesui
  */
 import { Plugin } from 'ckeditor5/src/core.js';
+import { IconTableProperties } from 'ckeditor5/src/icons.js';
 import { ButtonView, ContextualBalloon, clickOutsideHandler, getLocalizedColorOptions, normalizeColorOptions } from 'ckeditor5/src/ui.js';
-import { debounce } from 'lodash-es';
+import { debounce } from 'es-toolkit/compat';
 import TablePropertiesView from './ui/tablepropertiesview.js';
-import tableProperties from './../../theme/icons/table-properties.svg';
 import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, lengthFieldValidator, lineWidthFieldValidator, defaultColors } from '../utils/ui/table-properties.js';
 import { getSelectionAffectedTableWidget } from '../utils/ui/widget.js';
 import { getBalloonTablePositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon.js';
@@ -32,6 +32,28 @@ const propertyToCommandMap = {
  * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
  */
 export default class TablePropertiesUI extends Plugin {
+    /**
+     * The default table properties.
+     */
+    _defaultTableProperties;
+    /**
+     * The contextual balloon plugin instance.
+     */
+    _balloon;
+    /**
+     * The properties form view displayed inside the balloon.
+     */
+    view = 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
      */
@@ -55,10 +77,6 @@ export default class TablePropertiesUI extends Plugin {
      */
     constructor(editor) {
         super(editor);
-        /**
-         * The properties form view displayed inside the balloon.
-         */
-        this.view = null;
         editor.config.define('table.tableProperties', {
             borderColors: defaultColors,
             backgroundColors: defaultColors
@@ -78,7 +96,7 @@ export default class TablePropertiesUI extends Plugin {
             const view = new ButtonView(locale);
             view.set({
                 label: t('Table properties'),
-                icon: tableProperties,
+                icon: IconTableProperties,
                 tooltip: true
             });
             this.listenTo(view, 'execute', () => this._showView());

package/src/tableproperties/ui/tablepropertiesview.js

@@ -7,7 +7,7 @@
  */
 import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, FormHeaderView, LabeledFieldView, LabelView, submitHandler, ToolbarView, View, ViewCollection } from 'ckeditor5/src/ui.js';
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-import { icons } from 'ckeditor5/src/core.js';
+import { IconCancel, IconCheck, IconObjectCenter, IconObjectInlineLeft, IconObjectInlineRight } 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';
@@ -18,6 +18,66 @@ import '../../../theme/tableproperties.css';
  * certain style aspects of a table, for instance, border, background color, alignment, etc..
  */
 export default class TablePropertiesView 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;
+    /**
+     * 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.
@@ -383,9 +443,9 @@ export default class TablePropertiesView extends View {
         fillToolbar({
             view: this,
             icons: {
-                left: icons.objectLeft,
-                center: icons.objectCenter,
-                right: icons.objectRight
+                left: IconObjectInlineLeft,
+                center: IconObjectCenter,
+                right: IconObjectInlineRight
             },
             toolbar: alignmentToolbar,
             labels: this._alignmentLabels,
@@ -417,7 +477,7 @@ export default class TablePropertiesView extends View {
         ];
         saveButtonView.set({
             label: t('Save'),
-            icon: icons.check,
+            icon: IconCheck,
             class: 'ck-button-save',
             type: 'submit',
             withText: true
@@ -427,7 +487,7 @@ export default class TablePropertiesView extends View {
         });
         cancelButtonView.set({
             label: t('Cancel'),
-            icon: icons.cancel,
+            icon: IconCancel,
             class: 'ck-button-cancel',
             withText: true
         });

package/src/tableui.js

@@ -5,13 +5,11 @@
 /**
  * @module table/tableui
  */
-import { icons, Plugin } from 'ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { IconTable, IconTableColumn, IconTableRow, IconTableMergeCell } from 'ckeditor5/src/icons.js';
 import { addListToDropdown, createDropdown, ViewModel, SplitButtonView, SwitchButtonView, MenuBarMenuView } from 'ckeditor5/src/ui.js';
 import { Collection } from 'ckeditor5/src/utils.js';
 import InsertTableView from './ui/inserttableview.js';
-import tableColumnIcon from './../theme/icons/table-column.svg';
-import tableRowIcon from './../theme/icons/table-row.svg';
-import tableMergeCellIcon from './../theme/icons/table-merge-cell.svg';
 /**
  * The table UI plugin. It introduces:
  *
@@ -50,7 +48,7 @@ export default class TableUI extends Plugin {
             dropdownView.bind('isEnabled').to(command);
             // Decorate dropdown's button.
             dropdownView.buttonView.set({
-                icon: icons.table,
+                icon: IconTable,
                 label: t('Insert table'),
                 tooltip: true
             });
@@ -86,7 +84,7 @@ export default class TableUI extends Plugin {
             });
             menuView.buttonView.set({
                 label: t('Table'),
-                icon: icons.table
+                icon: IconTable
             });
             menuView.panelView.children.add(insertTableView);
             menuView.bind('isEnabled').to(command);
@@ -132,7 +130,7 @@ export default class TableUI extends Plugin {
                     }
                 }
             ];
-            return this._prepareDropdown(t('Column'), tableColumnIcon, options, locale);
+            return this._prepareDropdown(t('Column'), IconTableColumn, options, locale);
         });
         editor.ui.componentFactory.add('tableRow', locale => {
             const options = [
@@ -174,7 +172,7 @@ export default class TableUI extends Plugin {
                     }
                 }
             ];
-            return this._prepareDropdown(t('Row'), tableRowIcon, options, locale);
+            return this._prepareDropdown(t('Row'), IconTableRow, options, locale);
         });
         editor.ui.componentFactory.add('mergeTableCells', locale => {
             const options = [
@@ -222,7 +220,7 @@ export default class TableUI extends Plugin {
                     }
                 }
             ];
-            return this._prepareMergeSplitButtonDropdown(t('Merge cells'), tableMergeCellIcon, options, locale);
+            return this._prepareMergeSplitButtonDropdown(t('Merge cells'), IconTableMergeCell, options, locale);
         });
     }
     /**