@ckeditor/ckeditor5-table 38.2.0-alpha.0 → 38.2.0-alpha.1

package/src/tableproperties/tablepropertiesediting.js

@@ -5,18 +5,18 @@
 /**
  * @module table/tableproperties/tablepropertiesediting
  */
-import { Plugin } from 'ckeditor5/src/core';
-import { addBackgroundRules, addBorderRules } from 'ckeditor5/src/engine';
-import TableEditing from '../tableediting';
-import { downcastAttributeToStyle, downcastTableAttribute, upcastBorderStyles, upcastStyleToAttribute } from '../converters/tableproperties';
-import TableBackgroundColorCommand from './commands/tablebackgroundcolorcommand';
-import TableBorderColorCommand from './commands/tablebordercolorcommand';
-import TableBorderStyleCommand from './commands/tableborderstylecommand';
-import TableBorderWidthCommand from './commands/tableborderwidthcommand';
-import TableWidthCommand from './commands/tablewidthcommand';
-import TableHeightCommand from './commands/tableheightcommand';
-import TableAlignmentCommand from './commands/tablealignmentcommand';
-import { getNormalizedDefaultProperties } from '../utils/table-properties';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { addBackgroundRules, addBorderRules } from 'ckeditor5/src/engine.js';
+import TableEditing from '../tableediting.js';
+import { downcastAttributeToStyle, downcastTableAttribute, upcastBorderStyles, upcastStyleToAttribute } from '../converters/tableproperties.js';
+import TableBackgroundColorCommand from './commands/tablebackgroundcolorcommand.js';
+import TableBorderColorCommand from './commands/tablebordercolorcommand.js';
+import TableBorderStyleCommand from './commands/tableborderstylecommand.js';
+import TableBorderWidthCommand from './commands/tableborderwidthcommand.js';
+import TableWidthCommand from './commands/tablewidthcommand.js';
+import TableHeightCommand from './commands/tableheightcommand.js';
+import TableAlignmentCommand from './commands/tablealignmentcommand.js';
+import { getNormalizedDefaultProperties } from '../utils/table-properties.js';
 const ALIGN_VALUES_REG_EXP = /^(left|center|right)$/;
 const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
 /**

package/src/tableproperties/tablepropertiesui.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module table/tableproperties/tablepropertiesui
  */
-import { type Editor, Plugin } from 'ckeditor5/src/core';
-import { ContextualBalloon } from 'ckeditor5/src/ui';
-import TablePropertiesView from './ui/tablepropertiesview';
+import { type Editor, Plugin } from 'ckeditor5/src/core.js';
+import { ContextualBalloon } from 'ckeditor5/src/ui.js';
+import TablePropertiesView from './ui/tablepropertiesview.js';
 /**
  * The table properties UI plugin. It introduces the `'tableProperties'` button
  * that opens a form allowing to specify visual styling of an entire table.

package/src/tableproperties/tablepropertiesui.js

@@ -5,15 +5,15 @@
 /**
  * @module table/tableproperties/tablepropertiesui
  */
-import { Plugin } from 'ckeditor5/src/core';
-import { ButtonView, ContextualBalloon, clickOutsideHandler, getLocalizedColorOptions, normalizeColorOptions } from 'ckeditor5/src/ui';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ButtonView, ContextualBalloon, clickOutsideHandler, getLocalizedColorOptions, normalizeColorOptions } from 'ckeditor5/src/ui.js';
 import { debounce } from 'lodash-es';
-import TablePropertiesView from './ui/tablepropertiesview';
+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';
-import { getTableWidgetAncestor } from '../utils/ui/widget';
-import { getBalloonTablePositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon';
-import { getNormalizedDefaultProperties } from '../utils/table-properties';
+import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, lengthFieldValidator, lineWidthFieldValidator, defaultColors } from '../utils/ui/table-properties.js';
+import { getTableWidgetAncestor } from '../utils/ui/widget.js';
+import { getBalloonTablePositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon.js';
+import { getNormalizedDefaultProperties } from '../utils/table-properties.js';
 const ERROR_TEXT_TIMEOUT = 500;
 // Map of view properties and related commands.
 const propertyToCommandMap = {
@@ -105,10 +105,12 @@ export default class TablePropertiesUI extends Plugin {
         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 TablePropertiesView(editor.locale, {
             borderColors: localizedBorderColors,
             backgroundColors: localizedBackgroundColors,
-            defaultTableProperties: this._defaultTableProperties
+            defaultTableProperties: this._defaultTableProperties,
+            colorPickerConfig: hasColorPicker ? (config.colorPicker || {}) : false
         });
         const t = editor.t;
         // Render the view so its #element is available for the clickOutsideHandler.

package/src/tableproperties/ui/tablepropertiesview.d.ts

@@ -5,13 +5,13 @@
 /**
  * @module table/tableproperties/ui/tablepropertiesview
  */
-import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewCollection, type DropdownView, type InputTextView, type NormalizedColorOption } from 'ckeditor5/src/ui';
-import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
+import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewCollection, type DropdownView, type InputTextView, type NormalizedColorOption, type ColorPickerConfig } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
 import '../../../theme/form.css';
 import '../../../theme/tableform.css';
 import '../../../theme/tableproperties.css';
-import type ColorInputView from '../../ui/colorinputview';
-import type { TablePropertiesOptions } from '../../tableconfig';
+import type ColorInputView from '../../ui/colorinputview.js';
+import type { TablePropertiesOptions } from '../../tableconfig.js';
 /**
  * Additional configuration of the view.
  */
@@ -30,6 +30,10 @@ export interface TablePropertiesViewOptions {
      * The default table properties.
      */
     defaultTableProperties: TablePropertiesOptions;
+    /**
+     * The default color picker config.
+     */
+    colorPickerConfig: false | ColorPickerConfig;
 }
 /**
  * The class representing a table properties form, allowing users to customize

package/src/tableproperties/ui/tablepropertiesview.js

@@ -5,11 +5,11 @@
 /**
  * @module table/tableproperties/ui/tablepropertiesview
  */
-import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, FormHeaderView, LabeledFieldView, LabelView, submitHandler, ToolbarView, View, ViewCollection } from 'ckeditor5/src/ui';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
-import { icons } from 'ckeditor5/src/core';
-import { fillToolbar, getBorderStyleDefinitions, getBorderStyleLabels, getLabeledColorInputCreator } from '../../utils/ui/table-properties';
-import FormRowView from '../../ui/formrowview';
+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 { fillToolbar, getBorderStyleDefinitions, getBorderStyleLabels, getLabeledColorInputCreator } from '../../utils/ui/table-properties.js';
+import FormRowView from '../../ui/formrowview.js';
 import '../../../theme/form.css';
 import '../../../theme/tableform.css';
 import '../../../theme/tableproperties.css';
@@ -204,7 +204,8 @@ export default class TablePropertiesView extends View {
         const colorInputCreator = getLabeledColorInputCreator({
             colorConfig: this.options.borderColors,
             columns: 5,
-            defaultColorValue: defaultBorder.color
+            defaultColorValue: defaultBorder.color,
+            colorPickerConfig: this.options.colorPickerConfig
         });
         const locale = this.locale;
         const t = this.t;
@@ -295,7 +296,8 @@ export default class TablePropertiesView extends View {
         const backgroundInputCreator = getLabeledColorInputCreator({
             colorConfig: this.options.backgroundColors,
             columns: 5,
-            defaultColorValue: this.options.defaultTableProperties.backgroundColor
+            defaultColorValue: this.options.defaultTableProperties.backgroundColor,
+            colorPickerConfig: this.options.colorPickerConfig
         });
         const backgroundInput = new LabeledFieldView(locale, backgroundInputCreator);
         backgroundInput.set({

package/src/tableproperties.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module table/tableproperties
  */
-import { Plugin } from 'ckeditor5/src/core';
-import TablePropertiesEditing from './tableproperties/tablepropertiesediting';
-import TablePropertiesUI from './tableproperties/tablepropertiesui';
+import { Plugin } from 'ckeditor5/src/core.js';
+import TablePropertiesEditing from './tableproperties/tablepropertiesediting.js';
+import TablePropertiesUI from './tableproperties/tablepropertiesui.js';
 /**
  * The table properties feature. Enables support for setting properties of tables (size, border, background, etc.).
  *

package/src/tableproperties.js

@@ -5,9 +5,9 @@
 /**
  * @module table/tableproperties
  */
-import { Plugin } from 'ckeditor5/src/core';
-import TablePropertiesEditing from './tableproperties/tablepropertiesediting';
-import TablePropertiesUI from './tableproperties/tablepropertiesui';
+import { Plugin } from 'ckeditor5/src/core.js';
+import TablePropertiesEditing from './tableproperties/tablepropertiesediting.js';
+import TablePropertiesUI from './tableproperties/tablepropertiesui.js';
 /**
  * The table properties feature. Enables support for setting properties of tables (size, border, background, etc.).
  *

package/src/tableselection.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module table/tableselection
  */
-import { Plugin } from 'ckeditor5/src/core';
-import type { Element, DocumentFragment } from 'ckeditor5/src/engine';
-import TableUtils from './tableutils';
+import { Plugin } from 'ckeditor5/src/core.js';
+import type { Element, DocumentFragment } from 'ckeditor5/src/engine.js';
+import TableUtils from './tableutils.js';
 import '../theme/tableselection.css';
 /**
  * This plugin enables the advanced table cells, rows and columns selection.

package/src/tableselection.js

@@ -5,11 +5,11 @@
 /**
  * @module table/tableselection
  */
-import { Plugin } from 'ckeditor5/src/core';
-import { first } from 'ckeditor5/src/utils';
-import TableWalker from './tablewalker';
-import TableUtils from './tableutils';
-import { cropTableToDimensions, adjustLastRowIndex, adjustLastColumnIndex } from './utils/structure';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { first } from 'ckeditor5/src/utils.js';
+import TableWalker from './tablewalker.js';
+import TableUtils from './tableutils.js';
+import { cropTableToDimensions, adjustLastRowIndex, adjustLastColumnIndex } from './utils/structure.js';
 import '../theme/tableselection.css';
 /**
  * This plugin enables the advanced table cells, rows and columns selection.

package/src/tabletoolbar.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module table/tabletoolbar
  */
-import { Plugin } from 'ckeditor5/src/core';
-import { WidgetToolbarRepository } from 'ckeditor5/src/widget';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { WidgetToolbarRepository } from 'ckeditor5/src/widget.js';
 /**
  * The table toolbar class. It creates toolbars for the table feature and its content (for now only for the table cell content).
  *

package/src/tabletoolbar.js

@@ -5,9 +5,9 @@
 /**
  * @module table/tabletoolbar
  */
-import { Plugin } from 'ckeditor5/src/core';
-import { WidgetToolbarRepository } from 'ckeditor5/src/widget';
-import { getSelectedTableWidget, getTableWidgetAncestor } from './utils/ui/widget';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { WidgetToolbarRepository } from 'ckeditor5/src/widget.js';
+import { getSelectedTableWidget, getTableWidgetAncestor } from './utils/ui/widget.js';
 /**
  * The table toolbar class. It creates toolbars for the table feature and its content (for now only for the table cell content).
  *

package/src/tableui.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/tableui
  */
-import { Plugin } from 'ckeditor5/src/core';
+import { Plugin } from 'ckeditor5/src/core.js';
 /**
  * The table UI plugin. It introduces:
  *

package/src/tableui.js

@@ -5,10 +5,10 @@
 /**
  * @module table/tableui
  */
-import { Plugin } from 'ckeditor5/src/core';
-import { addListToDropdown, createDropdown, Model, SplitButtonView, SwitchButtonView } from 'ckeditor5/src/ui';
-import { Collection } from 'ckeditor5/src/utils';
-import InsertTableView from './ui/inserttableview';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { addListToDropdown, createDropdown, Model, SplitButtonView, SwitchButtonView } from 'ckeditor5/src/ui.js';
+import { Collection } from 'ckeditor5/src/utils.js';
+import InsertTableView from './ui/inserttableview.js';
 import tableIcon from './../theme/icons/table.svg';
 import tableColumnIcon from './../theme/icons/table-column.svg';
 import tableRowIcon from './../theme/icons/table-row.svg';

package/src/tableutils.d.ts

@@ -2,9 +2,9 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { Plugin } from 'ckeditor5/src/core';
-import type { DocumentSelection, Element, Range, Selection, Writer } from 'ckeditor5/src/engine';
-import TableWalker, { type TableWalkerOptions } from './tablewalker';
+import { Plugin } from 'ckeditor5/src/core.js';
+import type { DocumentSelection, Element, Range, Selection, Writer } from 'ckeditor5/src/engine.js';
+import TableWalker, { type TableWalkerOptions } from './tablewalker.js';
 type IndexesObject = {
     first: number;
     last: number;

package/src/tableutils.js

@@ -5,11 +5,11 @@
 /**
  * @module table/tableutils
  */
-import { CKEditorError } from 'ckeditor5/src/utils';
-import { Plugin } from 'ckeditor5/src/core';
-import TableWalker from './tablewalker';
-import { createEmptyTableCell, updateNumericAttribute } from './utils/common';
-import { removeEmptyColumns, removeEmptyRows } from './utils/structure';
+import { CKEditorError } from 'ckeditor5/src/utils.js';
+import { Plugin } from 'ckeditor5/src/core.js';
+import TableWalker from './tablewalker.js';
+import { createEmptyTableCell, updateNumericAttribute } from './utils/common.js';
+import { removeEmptyColumns, removeEmptyRows } from './utils/structure.js';
 /**
  * The table utilities plugin.
  */

package/src/tablewalker.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/tablewalker
  */
-import type { Element, Position } from 'ckeditor5/src/engine';
+import type { Element, Position } from 'ckeditor5/src/engine.js';
 /**
  * An object with configuration for `TableWalker`.
  */

package/src/ui/colorinputview.d.ts

@@ -5,13 +5,14 @@
 /**
  * @module table/ui/colorinputview
  */
-import { View, InputTextView, FocusCycler, ViewCollection, type ColorDefinition, type DropdownView } from 'ckeditor5/src/ui';
-import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
+import { View, InputTextView, FocusCycler, ViewCollection, type ColorDefinition, type DropdownView, type ColorPickerConfig } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
 import '../../theme/colorinput.css';
 export type ColorInputViewOptions = {
     colorDefinitions: Array<ColorDefinition>;
     columns: number;
     defaultColorValue?: string;
+    colorPickerConfig: false | ColorPickerConfig;
 };
 /**
  * The color input view class. It allows the user to type in a color (hex, rgb, etc.)
@@ -121,13 +122,9 @@ export default class ColorInputView extends View {
      */
     private _createInputTextView;
     /**
-     * Creates and configures the button that clears the color.
+     * Creates and configures the panel with "color grid" and "color picker" inside the {@link #dropdownView}.
      */
-    private _createRemoveColorButton;
-    /**
-     * Creates and configures the color grid inside the {@link #dropdownView}.
-     */
-    private _createColorGrid;
+    private _createColorSelector;
     /**
      * Sets {@link #inputView}'s value property to the color value or color label,
      * if there is one and the user is not typing.

package/src/ui/colorinputview.js

@@ -5,9 +5,8 @@
 /**
  * @module table/ui/colorinputview
  */
-import { View, InputTextView, ButtonView, createDropdown, ColorGridView, FocusCycler, ViewCollection } from 'ckeditor5/src/ui';
-import { icons } from 'ckeditor5/src/core';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
+import { View, InputTextView, createDropdown, FocusCycler, ViewCollection, ColorSelectorView } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
 import '../../theme/colorinput.css';
 /**
  * The color input view class. It allows the user to type in a color (hex, rgb, etc.)
@@ -94,10 +93,9 @@ export default class ColorInputView extends View {
         const locale = this.locale;
         const t = locale.t;
         const bind = this.bindTemplate;
-        const colorGrid = this._createColorGrid(locale);
+        const colorSelector = this._createColorSelector(locale);
         const dropdown = createDropdown(locale);
         const colorPreview = new View();
-        const removeColorButton = this._createRemoveColorButton();
         colorPreview.setTemplate({
             tag: 'span',
             attributes: {
@@ -129,13 +127,16 @@ export default class ColorInputView extends View {
         dropdown.buttonView.label = t('Color picker');
         dropdown.buttonView.tooltip = true;
         dropdown.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
-        dropdown.panelView.children.add(removeColorButton);
-        dropdown.panelView.children.add(colorGrid);
+        dropdown.panelView.children.add(colorSelector);
         dropdown.bind('isEnabled').to(this, 'isReadOnly', value => !value);
-        this._focusables.add(removeColorButton);
-        this._focusables.add(colorGrid);
-        this.focusTracker.add(removeColorButton.element);
-        this.focusTracker.add(colorGrid.element);
+        this._focusables.add(colorSelector);
+        this.focusTracker.add(colorSelector.element);
+        dropdown.on('change:isOpen', (evt, name, isVisible) => {
+            if (isVisible) {
+                colorSelector.updateSelectedColors();
+                colorSelector.showColorGridsFragment();
+            }
+        });
         return dropdown;
     }
     /**
@@ -169,40 +170,56 @@ export default class ColorInputView extends View {
         return inputView;
     }
     /**
-     * Creates and configures the button that clears the color.
+     * Creates and configures the panel with "color grid" and "color picker" inside the {@link #dropdownView}.
      */
-    _createRemoveColorButton() {
-        const locale = this.locale;
+    _createColorSelector(locale) {
         const t = locale.t;
-        const removeColorButton = new ButtonView(locale);
         const defaultColor = this.options.defaultColorValue || '';
         const removeColorButtonLabel = defaultColor ? t('Restore default') : t('Remove color');
-        removeColorButton.class = 'ck-input-color__remove-color';
-        removeColorButton.withText = true;
-        removeColorButton.icon = icons.eraser;
-        removeColorButton.label = removeColorButtonLabel;
-        removeColorButton.on('execute', () => {
-            this.value = defaultColor;
-            this.dropdownView.isOpen = false;
-            this.fire('input');
+        const colorSelector = new ColorSelectorView(locale, {
+            colors: this.options.colorDefinitions,
+            columns: this.options.columns,
+            removeButtonLabel: removeColorButtonLabel,
+            colorPickerLabel: t('Color picker'),
+            colorPickerViewConfig: this.options.colorPickerConfig === false ? false : {
+                ...this.options.colorPickerConfig,
+                hideInput: true
+            }
         });
-        return removeColorButton;
-    }
-    /**
-     * Creates and configures the color grid inside the {@link #dropdownView}.
-     */
-    _createColorGrid(locale) {
-        const colorGrid = new ColorGridView(locale, {
-            colorDefinitions: this.options.colorDefinitions,
-            columns: this.options.columns
+        colorSelector.appendUI();
+        colorSelector.on('execute', (evt, data) => {
+            if (data.source === 'colorPickerSaveButton') {
+                this.dropdownView.isOpen = false;
+                return;
+            }
+            this.value = data.value || defaultColor;
+            // Trigger the listener that actually applies the set value.
+            this.fire('input');
+            if (data.source !== 'colorPicker') {
+                this.dropdownView.isOpen = false;
+            }
         });
-        colorGrid.on('execute', (evtData, data) => {
-            this.value = data.value;
-            this.dropdownView.isOpen = false;
+        /**
+         * Color is saved before changes in color picker. In case "cancel button" is pressed
+         * this color will be applied.
+         */
+        let backupColor = this.value;
+        colorSelector.on('colorPicker:cancel', () => {
+            /**
+             * Revert color to previous value before changes in color picker.
+             */
+            this.value = backupColor;
             this.fire('input');
+            this.dropdownView.isOpen = false;
+        });
+        colorSelector.colorGridsFragmentView.colorPickerButtonView.on('execute', () => {
+            /**
+             * Save color value before changes in color picker.
+             */
+            backupColor = this.value;
         });
-        colorGrid.bind('selectedColor').to(this, 'value');
-        return colorGrid;
+        colorSelector.bind('selectedColor').to(this, 'value');
+        return colorSelector;
     }
     /**
      * Sets {@link #inputView}'s value property to the color value or color label,

package/src/ui/formrowview.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module table/ui/formrowview
  */
-import { View, type LabelView, type ViewCollection } from 'ckeditor5/src/ui';
-import type { Locale } from 'ckeditor5/src/utils';
+import { View, type LabelView, type ViewCollection } from 'ckeditor5/src/ui.js';
+import type { Locale } from 'ckeditor5/src/utils.js';
 import '../../theme/formrow.css';
 /**
  * The class representing a single row in a complex form,

package/src/ui/formrowview.js

@@ -5,7 +5,7 @@
 /**
  * @module table/ui/formrowview
  */
-import { View } from 'ckeditor5/src/ui';
+import { View } from 'ckeditor5/src/ui.js';
 import '../../theme/formrow.css';
 /**
  * The class representing a single row in a complex form,

package/src/ui/inserttableview.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module table/ui/inserttableview
  */
-import { View, ButtonView, type ViewCollection } from 'ckeditor5/src/ui';
-import { KeystrokeHandler, FocusTracker, type Locale } from 'ckeditor5/src/utils';
+import { View, ButtonView, type ViewCollection } from 'ckeditor5/src/ui.js';
+import { KeystrokeHandler, FocusTracker, type Locale } from 'ckeditor5/src/utils.js';
 import './../../theme/inserttable.css';
 /**
  * The table size view.

package/src/ui/inserttableview.js

@@ -5,8 +5,8 @@
 /**
  * @module table/ui/inserttableview
  */
-import { View, ButtonView, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui';
-import { KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils';
+import { View, ButtonView, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui.js';
+import { KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils.js';
 import './../../theme/inserttable.css';
 /**
  * The table size view.

package/src/utils/common.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module table/utils/common
  */
-import type { Conversion, Element, Item, Position, Schema, Writer } from 'ckeditor5/src/engine';
-import type TableUtils from '../tableutils';
+import type { Conversion, Element, Item, Position, Schema, Writer } from 'ckeditor5/src/engine.js';
+import type TableUtils from '../tableutils.js';
 /**
  * A common method to update the numeric value. If a value is the default one, it will be unset.
  *

package/src/utils/common.js

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { downcastAttributeToStyle, upcastStyleToAttribute } from './../converters/tableproperties';
+import { downcastAttributeToStyle, upcastStyleToAttribute } from './../converters/tableproperties.js';
 /**
  * A common method to update the numeric value. If a value is the default one, it will be unset.
  *

package/src/utils/structure.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module table/utils/structure
  */
-import type { Element, Writer } from 'ckeditor5/src/engine';
-import { type TableSlot } from '../tablewalker';
-import type TableUtils from '../tableutils';
+import type { Element, Writer } from 'ckeditor5/src/engine.js';
+import { type TableSlot } from '../tablewalker.js';
+import type TableUtils from '../tableutils.js';
 /**
  * Returns a cropped table according to given dimensions.
 

package/src/utils/structure.js

@@ -2,8 +2,8 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { default as TableWalker } from '../tablewalker';
-import { createEmptyTableCell, updateNumericAttribute } from './common';
+import { default as TableWalker } from '../tablewalker.js';
+import { createEmptyTableCell, updateNumericAttribute } from './common.js';
 /**
  * Returns a cropped table according to given dimensions.
 

package/src/utils/table-properties.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/utils/table-properties
  */
-import type { BoxSides } from 'ckeditor5/src/engine';
+import type { BoxSides } from 'ckeditor5/src/engine.js';
 /**
  * Returns a string if all four values of box sides are equal.
  *

package/src/utils/ui/contextualballoon.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module table/utils/ui/contextualballoon
  */
-import { type PositionOptions } from 'ckeditor5/src/utils';
-import type { Editor } from 'ckeditor5/src/core';
+import { type PositionOptions } from 'ckeditor5/src/utils.js';
+import type { Editor } from 'ckeditor5/src/core.js';
 /**
  * A helper utility that positions the
  * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} instance

package/src/utils/ui/contextualballoon.js

@@ -5,9 +5,9 @@
 /**
  * @module table/utils/ui/contextualballoon
  */
-import { Rect } from 'ckeditor5/src/utils';
-import { BalloonPanelView } from 'ckeditor5/src/ui';
-import { getTableWidgetAncestor } from './widget';
+import { Rect } from 'ckeditor5/src/utils.js';
+import { BalloonPanelView } from 'ckeditor5/src/ui.js';
+import { getTableWidgetAncestor } from './widget.js';
 const DEFAULT_BALLOON_POSITIONS = BalloonPanelView.defaultPositions;
 const BALLOON_POSITIONS = [
     DEFAULT_BALLOON_POSITIONS.northArrowSouth,