@ckeditor/ckeditor5-table 0.0.0-nightly-next-20260127.0 → 0.0.0-nightly-20260128.0

package/src/ui/colorinputview.js

@@ -0,0 +1,305 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module table/ui/colorinputview
+ */
+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.)
+ * or choose it from the configurable color palette with a preview.
+ *
+ * @internal
+ */
+export class ColorInputView extends View {
+    /**
+     * A cached reference to the options passed to the constructor.
+     */
+    options;
+    /**
+     * Tracks information about the DOM focus in the view.
+     */
+    focusTracker;
+    /**
+     * Helps cycling over focusable children in the input view.
+     */
+    focusCycler;
+    /**
+     * A collection of views that can be focused in the view.
+     */
+    _focusables;
+    /**
+     * An instance of the dropdown allowing to select a color from a grid.
+     */
+    dropdownView;
+    /**
+     * An instance of the input allowing the user to type a color value.
+     */
+    inputView;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    keystrokes;
+    /**
+     * The flag that indicates whether the user is still typing.
+     * If set to true, it means that the text input field ({@link #inputView}) still has the focus.
+     * So, we should interrupt the user by replacing the input's value.
+     */
+    _stillTyping;
+    /**
+     * Creates an instance of the color input view.
+     *
+     * @param locale The locale instance.
+     * @param options The input options.
+     * @param options.colorDefinitions The colors to be displayed in the palette inside the input's dropdown.
+     * @param options.columns The number of columns in which the colors will be displayed.
+     * @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.
+     */
+    constructor(locale, options) {
+        super(locale);
+        this.set('value', '');
+        this.set('isReadOnly', false);
+        this.set('isFocused', false);
+        this.set('isEmpty', true);
+        this.options = options;
+        this.focusTracker = new FocusTracker();
+        this._focusables = new ViewCollection();
+        this.dropdownView = this._createDropdownView();
+        this.inputView = this._createInputTextView();
+        this.keystrokes = new KeystrokeHandler();
+        this._stillTyping = false;
+        this.focusCycler = new FocusCycler({
+            focusables: this._focusables,
+            focusTracker: this.focusTracker,
+            keystrokeHandler: this.keystrokes,
+            actions: {
+                // Navigate items backwards using the <kbd>Shift</kbd> + <kbd>Tab</kbd> keystroke.
+                focusPrevious: 'shift + tab',
+                // Navigate items forwards using the <kbd>Tab</kbd> key.
+                focusNext: 'tab'
+            }
+        });
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-input-color'
+                ]
+            },
+            children: [
+                this.dropdownView,
+                this.inputView
+            ]
+        });
+        this.on('change:value', (evt, name, inputValue) => this._setInputValue(inputValue));
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        [this.inputView, this.dropdownView.buttonView].forEach(view => {
+            this.focusTracker.add(view.element);
+            this._focusables.add(view);
+        });
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+     * Focuses the view.
+     */
+    focus(direction) {
+        if (direction === -1) {
+            this.focusCycler.focusLast();
+        }
+        else {
+            this.focusCycler.focusFirst();
+        }
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+     * Creates and configures the {@link #dropdownView}.
+     */
+    _createDropdownView() {
+        const locale = this.locale;
+        const t = locale.t;
+        const bind = this.bindTemplate;
+        const colorSelector = this._createColorSelector(locale);
+        const dropdown = createDropdown(locale);
+        const colorPreview = new View();
+        colorPreview.setTemplate({
+            tag: 'span',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-input-color__button__preview'
+                ],
+                style: {
+                    backgroundColor: bind.to('value')
+                }
+            },
+            children: [{
+                    tag: 'span',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-input-color__button__preview__no-color-indicator',
+                            bind.if('value', 'ck-hidden', value => value != '')
+                        ]
+                    }
+                }]
+        });
+        dropdown.buttonView.extendTemplate({
+            attributes: {
+                class: 'ck-input-color__button'
+            }
+        });
+        dropdown.buttonView.children.add(colorPreview);
+        dropdown.buttonView.label = t('Color picker');
+        dropdown.buttonView.tooltip = true;
+        dropdown.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
+        dropdown.panelView.children.add(colorSelector);
+        dropdown.bind('isEnabled').to(this, 'isReadOnly', value => !value);
+        dropdown.on('change:isOpen', (evt, name, isVisible) => {
+            if (isVisible) {
+                colorSelector.updateSelectedColors();
+                colorSelector.showColorGridsFragment();
+            }
+        });
+        return dropdown;
+    }
+    /**
+     * Creates and configures an instance of {@link module:ui/inputtext/inputtextview~InputTextView}.
+     *
+     * @returns A configured instance to be set as {@link #inputView}.
+     */
+    _createInputTextView() {
+        const locale = this.locale;
+        const inputView = new InputTextView(locale);
+        inputView.extendTemplate({
+            on: {
+                blur: inputView.bindTemplate.to('blur')
+            }
+        });
+        inputView.value = this.value;
+        inputView.bind('isReadOnly', 'hasError').to(this);
+        this.bind('isFocused', 'isEmpty').to(inputView);
+        inputView.on('input', () => {
+            const inputValue = inputView.element.value;
+            // Check if the value matches one of our defined colors' label.
+            const mappedColor = this.options.colorDefinitions.find(def => inputValue === def.label);
+            this._stillTyping = true;
+            this.value = mappedColor && mappedColor.color || inputValue;
+        });
+        inputView.on('blur', () => {
+            this._stillTyping = false;
+            this._setInputValue(inputView.element.value);
+        });
+        inputView.delegate('input').to(this);
+        return inputView;
+    }
+    /**
+     * Creates and configures the panel with "color grid" and "color picker" inside the {@link #dropdownView}.
+     */
+    _createColorSelector(locale) {
+        const t = locale.t;
+        const defaultColor = this.options.defaultColorValue || '';
+        const removeColorButtonLabel = defaultColor ? t('Restore default') : t('Remove color');
+        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
+            }
+        });
+        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;
+            }
+        });
+        /**
+         * 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;
+        });
+        colorSelector.bind('selectedColor').to(this, 'value');
+        return colorSelector;
+    }
+    /**
+     * Sets {@link #inputView}'s value property to the color value or color label,
+     * if there is one and the user is not typing.
+     *
+     * Handles cases like:
+     *
+     * * Someone picks the color in the grid.
+     * * The color is set from the plugin level.
+     *
+     * @param inputValue Color value to be set.
+     */
+    _setInputValue(inputValue) {
+        if (!this._stillTyping) {
+            const normalizedInputValue = normalizeColor(inputValue);
+            // Check if the value matches one of our defined colors.
+            const mappedColor = this.options.colorDefinitions.find(def => normalizedInputValue === normalizeColor(def.color));
+            if (mappedColor) {
+                this.inputView.value = mappedColor.label;
+            }
+            else {
+                this.inputView.value = inputValue || '';
+            }
+        }
+    }
+}
+/**
+ * Normalizes color value, by stripping extensive whitespace.
+ * For example., transforms:
+ * * `   rgb(  25 50    0 )` to `rgb(25 50 0)`,
+ * * "\t  rgb(  25 ,  50,0 )		" to `rgb(25 50 0)`.
+ *
+ * @param colorString The value to be normalized.
+ */
+function normalizeColor(colorString) {
+    return colorString
+        // Remove any whitespace right after `(` or `,`.
+        .replace(/([(,])\s+/g, '$1')
+        // Remove any whitespace at the beginning or right before the end, `)`, `,`, or another whitespace.
+        .replace(/^\s+|\s+(?=[),\s]|$)/g, '')
+        // Then, replace `,` or whitespace with a single space.
+        .replace(/,|\s/g, ' ');
+}

package/{dist → src}/ui/inserttableview.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module table/ui/inserttableview
  */
-import { View, ButtonView, type ViewCollection } from '@ckeditor/ckeditor5-ui';
-import { KeystrokeHandler, FocusTracker, type Locale } from '@ckeditor/ckeditor5-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

@@ -0,0 +1,192 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module table/ui/inserttableview
+ */
+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.
+ *
+ * It renders a 10x10 grid to choose the inserted table size.
+ *
+ * @internal
+ */
+export class InsertTableView extends View {
+    /**
+     * A collection of table size box items.
+     */
+    items;
+    /**
+     * Listen to `keydown` events fired in this view's main element.
+     */
+    keystrokes;
+    /**
+     * Tracks information about the DOM focus in the grid.
+     */
+    focusTracker;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.items = this._createGridCollection();
+        this.keystrokes = new KeystrokeHandler();
+        this.focusTracker = new FocusTracker();
+        this.set('rows', 0);
+        this.set('columns', 0);
+        this.bind('label').to(this, 'columns', this, 'rows', (columns, rows) => `${rows} × ${columns}`);
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: ['ck']
+            },
+            children: [
+                {
+                    tag: 'div',
+                    attributes: {
+                        class: ['ck-insert-table-dropdown__grid']
+                    },
+                    on: {
+                        'mouseover@.ck-insert-table-dropdown-grid-box': bind.to('boxover')
+                    },
+                    children: this.items
+                },
+                {
+                    tag: 'div',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-insert-table-dropdown__label'
+                        ],
+                        'aria-hidden': true
+                    },
+                    children: [
+                        {
+                            text: bind.to('label')
+                        }
+                    ]
+                }
+            ],
+            on: {
+                mousedown: bind.to(evt => {
+                    evt.preventDefault();
+                }),
+                click: bind.to(() => {
+                    this.fire('execute');
+                })
+            }
+        });
+        // #rows and #columns are set via changes to #focusTracker on mouse over.
+        this.on('boxover', (evt, domEvt) => {
+            const { row, column } = domEvt.target.dataset;
+            this.items.get((parseInt(row, 10) - 1) * 10 + (parseInt(column, 10) - 1)).focus();
+        });
+        // This allows the #rows and #columns to be updated when:
+        // * the user navigates the grid using the keyboard,
+        // * the user moves the mouse over grid items.
+        this.focusTracker.on('change:focusedElement', (evt, name, focusedElement) => {
+            if (!focusedElement) {
+                return;
+            }
+            const { row, column } = focusedElement.dataset;
+            // As row & column indexes are zero-based transform it to number of selected rows & columns.
+            this.set({
+                rows: parseInt(row),
+                columns: parseInt(column)
+            });
+        });
+        this.on('change:columns', () => this._highlightGridBoxes());
+        this.on('change:rows', () => this._highlightGridBoxes());
+    }
+    render() {
+        super.render();
+        addKeyboardHandlingForGrid({
+            keystrokeHandler: this.keystrokes,
+            focusTracker: this.focusTracker,
+            gridItems: this.items,
+            numberOfColumns: 10,
+            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
+        });
+        for (const item of this.items) {
+            this.focusTracker.add(item.element);
+        }
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+     * Resets the rows and columns selection.
+     */
+    reset() {
+        this.set({
+            rows: 1,
+            columns: 1
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    focus() {
+        this.items.get(0).focus();
+    }
+    /**
+     * @inheritDoc
+     */
+    focusLast() {
+        this.items.get(0).focus();
+    }
+    /**
+     * Highlights grid boxes depending on rows and columns selected.
+     */
+    _highlightGridBoxes() {
+        const rows = this.rows;
+        const columns = this.columns;
+        this.items.map((boxView, index) => {
+            // Translate box index to the row & column index.
+            const itemRow = Math.floor(index / 10);
+            const itemColumn = index % 10;
+            // Grid box is highlighted when its row & column index belongs to selected number of rows & columns.
+            const isOn = itemRow < rows && itemColumn < columns;
+            boxView.set('isOn', isOn);
+        });
+    }
+    /**
+     * Creates a new Button for the grid.
+     *
+     * @param locale The locale instance.
+     * @param row Row number.
+     * @param column Column number.
+     * @param label The grid button label.
+     */
+    _createGridButton(locale, row, column, label) {
+        const button = new ButtonView(locale);
+        button.set({
+            label,
+            class: 'ck-insert-table-dropdown-grid-box'
+        });
+        button.extendTemplate({
+            attributes: {
+                'data-row': row,
+                'data-column': column
+            }
+        });
+        return button;
+    }
+    /**
+     * @returns A view collection containing boxes to be placed in a table grid.
+     */
+    _createGridCollection() {
+        const boxes = [];
+        // Add grid boxes to table selection view.
+        for (let index = 0; index < 100; index++) {
+            const row = Math.floor(index / 10);
+            const column = index % 10;
+            const label = `${row + 1} × ${column + 1}`;
+            boxes.push(this._createGridButton(this.locale, row + 1, column + 1, label));
+        }
+        return this.createCollection(boxes);
+    }
+}

package/{dist → src}/utils/common.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module table/utils/common
  */
-import type { Editor } from '@ckeditor/ckeditor5-core';
-import type { Conversion, ModelElement, ModelItem, ModelPosition, ModelSchema, ModelWriter, ModelDocumentSelection } from '@ckeditor/ckeditor5-engine';
+import type { Editor } from 'ckeditor5/src/core.js';
+import type { Conversion, ModelElement, ModelItem, ModelPosition, ModelSchema, ModelWriter, ModelDocumentSelection } 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

@@ -0,0 +1,118 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+import { downcastAttributeToStyle, upcastStyleToAttribute } from '../converters/tableproperties.js';
+import { TableWalker } from '../tablewalker.js';
+/**
+ * A common method to update the numeric value. If a value is the default one, it will be unset.
+ *
+ * @internal
+ * @param key An attribute key.
+ * @param value The new attribute value.
+ * @param item A model item on which the attribute will be set.
+ * @param defaultValue The default attribute value. If a value is lower or equal, it will be unset.
+ */
+export function updateNumericAttribute(key, value, item, writer, defaultValue = 1) {
+    if (value !== undefined && value !== null && defaultValue !== undefined && defaultValue !== null && value > defaultValue) {
+        writer.setAttribute(key, value, item);
+    }
+    else {
+        writer.removeAttribute(key, item);
+    }
+}
+/**
+ * A common method to create an empty table cell. It creates a proper model structure as a table cell must have at least one block inside.
+ *
+ * @internal
+ * @param writer The model writer.
+ * @param insertPosition The position at which the table cell should be inserted.
+ * @param attributes The element attributes.
+ * @returns Created table cell.
+ */
+export function createEmptyTableCell(writer, insertPosition, attributes = {}) {
+    const tableCell = writer.createElement('tableCell', attributes);
+    writer.insertElement('paragraph', tableCell);
+    writer.insert(tableCell, insertPosition);
+    return tableCell;
+}
+/**
+ * Checks if a table cell belongs to the heading column section.
+ *
+ * @internal
+ */
+export function isHeadingColumnCell(tableUtils, tableCell) {
+    const table = tableCell.parent.parent;
+    const headingColumns = parseInt(table.getAttribute('headingColumns') || '0');
+    const { column } = tableUtils.getCellLocation(tableCell);
+    return !!headingColumns && column < headingColumns;
+}
+/**
+ * Enables conversion for an attribute for simple view-model mappings.
+ *
+ * @internal
+ * @param options.defaultValue The default value for the specified `modelAttribute`.
+ */
+export function enableProperty(schema, conversion, options) {
+    const { modelAttribute } = options;
+    schema.extend('tableCell', {
+        allowAttributes: [modelAttribute]
+    });
+    schema.setAttributeProperties(modelAttribute, { isFormatting: true });
+    upcastStyleToAttribute(conversion, { viewElement: /^(td|th)$/, ...options });
+    downcastAttributeToStyle(conversion, { modelElement: 'tableCell', ...options });
+}
+/**
+ * Depending on the position of the selection we either return the table under cursor or look for the table higher in the hierarchy.
+ *
+ * @internal
+ */
+export function getSelectionAffectedTable(selection) {
+    const selectedElement = selection.getSelectedElement();
+    // Is the command triggered from the `tableToolbar`?
+    if (selectedElement && selectedElement.is('element', 'table')) {
+        return selectedElement;
+    }
+    return selection.getFirstPosition().findAncestor('table');
+}
+/**
+ * Groups table cells by their parent table.
+ *
+ * @internal
+ */
+export function groupCellsByTable(tableCells) {
+    const tableMap = new Map();
+    for (const tableCell of tableCells) {
+        const table = tableCell.findAncestor('table');
+        if (!tableMap.has(table)) {
+            tableMap.set(table, []);
+        }
+        tableMap.get(table).push(tableCell);
+    }
+    return tableMap;
+}
+/**
+ * Checks if all cells in a given row or column are header cells.
+ *
+ * @internal
+ */
+export function isEntireCellsLineHeader({ table, row, column }) {
+    const tableWalker = new TableWalker(table, { row, column });
+    for (const { cell } of tableWalker) {
+        const cellType = cell.getAttribute('tableCellType');
+        if (cellType !== 'header') {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Checks whether the `tableCellType` attribute is enabled in the editor schema and the experimental flag is set.
+ *
+ * @internal
+ */
+export function isTableCellTypeEnabled(editor) {
+    const { model, config } = editor;
+    return (model.schema.checkAttribute('tableCell', 'tableCellType') &&
+        config.get('experimentalFlags.tableCellTypeSupport') === true);
+}

package/{dist → src}/utils/structure.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/utils/structure
  */
-import type { ModelElement, ModelWriter, ViewElement } from '@ckeditor/ckeditor5-engine';
+import type { ModelElement, ModelWriter, ViewElement } from 'ckeditor5/src/engine.js';
 import { type TableSlot } from '../tablewalker.js';
 import { type TableUtils } from '../tableutils.js';
 /**