@ckeditor/ckeditor5-table 47.6.1 → 48.0.0-alpha.0

package/src/ui/colorinputview.js

@@ -1,305 +0,0 @@
-/**
- * @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/src/ui/inserttableview.js

@@ -1,192 +0,0 @@
-/**
- * @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/src/utils/common.js

@@ -1,118 +0,0 @@
-/**
- * @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);
-}