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

package/src/tablecolumnresize/tablecolumnresizeediting.js

@@ -1,734 +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/tablecolumnresize/tablecolumnresizeediting
- */
-import { throttle, isEqual } from 'es-toolkit/compat';
-import { global, DomEmitterMixin, Rect, toUnit } from 'ckeditor5/src/utils.js';
-import { Plugin } from 'ckeditor5/src/core.js';
-import { MouseEventsObserver } from '../../src/tablemouse/mouseeventsobserver.js';
-import { TableEditing } from '../tableediting.js';
-import { TableUtils } from '../tableutils.js';
-import { TableWalker } from '../tablewalker.js';
-import { TableWidthsCommand } from './tablewidthscommand.js';
-import { downcastTableResizedClass, upcastColgroupElement, upcastTableResizedClass } from './converters.js';
-import { clamp, createFilledArray, sumArray, getColumnEdgesIndexes, getChangedResizedTables, getColumnMinWidthAsPercentage, getElementWidthInPixels, getTableWidthInPixels, normalizeColumnWidths, toPrecision, getDomCellOuterWidth, updateColumnElements, getColumnGroupElement, getTableColumnElements, getTableColumnsWidths } from './utils.js';
-import { COLUMN_MIN_WIDTH_IN_PIXELS, COLUMN_RESIZE_DISTANCE_THRESHOLD } from './constants.js';
-const toPx = /* #__PURE__ */ toUnit('px');
-/**
- * The table column resize editing plugin.
- */
-export 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;
-    /**
-     * Starting mouse position data used to add a threshold to the resizing process.
-     */
-    _initialMouseEventData = null;
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [TableEditing, TableUtils];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'TableColumnResizeEditing';
-    }
-    /**
-     * @inheritDoc
-     * @internal
-     */
-    static get licenseFeatureCode() {
-        return 'TCR';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isPremiumPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        this._isResizingActive = false;
-        this.set('_isResizingAllowed', true);
-        this._resizingData = null;
-        this._domEmitter = new (DomEmitterMixin())();
-        this._tableUtilsPlugin = editor.plugins.get('TableUtils');
-        this.on('change:_isResizingAllowed', (evt, name, value) => {
-            // Toggling the `ck-column-resize_disabled` class shows and hides the resizers through CSS.
-            const classAction = value ? 'removeClass' : 'addClass';
-            editor.editing.view.change(writer => {
-                for (const root of editor.editing.view.document.roots) {
-                    writer[classAction]('ck-column-resize_disabled', editor.editing.view.document.getRoot(root.rootName));
-                }
-            });
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        this._extendSchema();
-        this._registerPostFixer();
-        this._registerConverters();
-        this._registerResizingListeners();
-        this._registerResizerInserter();
-        const editor = this.editor;
-        const columnResizePlugin = editor.plugins.get('TableColumnResize');
-        const tableEditing = editor.plugins.get('TableEditing');
-        tableEditing.registerAdditionalSlot({
-            filter: element => element.is('element', 'tableColumnGroup'),
-            positionOffset: 0
-        });
-        const tableWidthsCommand = new TableWidthsCommand(editor);
-        // For backwards compatibility we have two commands that perform exactly the same operation.
-        editor.commands.add('resizeTableWidth', tableWidthsCommand);
-        editor.commands.add('resizeColumnWidths', tableWidthsCommand);
-        // Currently the states of column resize and table resize (which is actually the last column resize) features
-        // are bound together. They can be separated in the future by adding distinct listeners and applying
-        // different CSS classes (e.g. `ck-column-resize_disabled` and `ck-table-resize_disabled`) to the editor root.
-        // See #12148 for the details.
-        this.bind('_isResizingAllowed').to(editor, 'isReadOnly', columnResizePlugin, 'isEnabled', tableWidthsCommand, 'isEnabled', (isEditorReadOnly, isPluginEnabled, isTableWidthsCommandCommandEnabled) => !isEditorReadOnly && isPluginEnabled && isTableWidthsCommandCommandEnabled);
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        this._domEmitter.stopListening();
-        super.destroy();
-    }
-    /**
-     * Returns a 'tableColumnGroup' element from the 'table'.
-     *
-     * @param element A 'table' or 'tableColumnGroup' element.
-     * @returns A 'tableColumnGroup' element.
-     */
-    getColumnGroupElement(element) {
-        return getColumnGroupElement(element);
-    }
-    /**
-     * Returns an array of 'tableColumn' elements.
-     *
-     * @param element A 'table' or 'tableColumnGroup' element.
-     * @returns An array of 'tableColumn' elements.
-     */
-    getTableColumnElements(element) {
-        return getTableColumnElements(element);
-    }
-    /**
-     * Returns an array of table column widths.
-     *
-     * @param element A 'table' or 'tableColumnGroup' element.
-     * @returns An array of table column widths.
-     */
-    getTableColumnsWidths(element) {
-        return getTableColumnsWidths(element);
-    }
-    /**
-     * Registers new attributes for a table model element.
-     */
-    _extendSchema() {
-        const schema = this.editor.model.schema;
-        schema.extend('table', {
-            allowAttributes: ['tableWidth']
-        });
-        schema.register('tableColumnGroup', {
-            allowIn: 'table',
-            isLimit: true
-        });
-        schema.register('tableColumn', {
-            allowIn: 'tableColumnGroup',
-            allowAttributes: ['columnWidth', 'colSpan'],
-            isLimit: true
-        });
-        schema.setAttributeProperties('columnWidth', { isFormatting: true });
-    }
-    /**
-     * Registers table column resize post-fixer.
-     *
-     * It checks if the change from the differ concerns a table-related element or attribute. For detected changes it:
-     *  * Adjusts the `columnWidths` attribute to guarantee that the sum of the widths from all columns is 100%.
-     *  * Checks if the `columnWidths` attribute gets updated accordingly after columns have been added or removed.
-     */
-    _registerPostFixer() {
-        const editor = this.editor;
-        const model = editor.model;
-        model.document.registerPostFixer(writer => {
-            let changed = false;
-            for (const table of getChangedResizedTables(model)) {
-                const tableColumnGroup = this.getColumnGroupElement(table);
-                const columns = this.getTableColumnElements(tableColumnGroup);
-                const columnWidths = this.getTableColumnsWidths(tableColumnGroup);
-                // Adjust the `columnWidths` attribute to guarantee that the sum of the widths from all columns is 100%.
-                let normalizedWidths = normalizeColumnWidths(columnWidths);
-                // If the number of columns has changed, then we need to adjust the widths of the affected columns.
-                normalizedWidths = adjustColumnWidths(normalizedWidths, table, this);
-                if (isEqual(columnWidths, normalizedWidths)) {
-                    continue;
-                }
-                updateColumnElements(columns, tableColumnGroup, normalizedWidths, writer);
-                changed = true;
-            }
-            return changed;
-        });
-        /**
-         * Adjusts if necessary the `columnWidths` in case if the number of column has changed.
-         *
-         * @param columnWidths Note: this array **may be modified** by the function.
-         * @param table Table to be checked.
-         */
-        function adjustColumnWidths(columnWidths, table, plugin) {
-            const newTableColumnsCount = plugin._tableUtilsPlugin.getColumns(table);
-            const columnsCountDelta = newTableColumnsCount - columnWidths.length;
-            if (columnsCountDelta === 0) {
-                return columnWidths;
-            }
-            const widths = columnWidths.map(width => Number(width.replace('%', '')));
-            // Collect all cells that are affected by the change.
-            const cellSet = getAffectedCells(plugin.editor.model.document.differ, table);
-            for (const cell of cellSet) {
-                const currentColumnsDelta = newTableColumnsCount - widths.length;
-                if (currentColumnsDelta === 0) {
-                    continue;
-                }
-                // If the column count in the table changed, adjust the widths of the affected columns.
-                const hasMoreColumns = currentColumnsDelta > 0;
-                const currentColumnIndex = plugin._tableUtilsPlugin.getCellLocation(cell).column;
-                if (hasMoreColumns) {
-                    const columnMinWidthAsPercentage = getColumnMinWidthAsPercentage(table, plugin.editor);
-                    const columnWidthsToInsert = createFilledArray(currentColumnsDelta, columnMinWidthAsPercentage);
-                    widths.splice(currentColumnIndex, 0, ...columnWidthsToInsert);
-                }
-                else {
-                    // Moves the widths of the removed columns to the preceding one.
-                    // Other editors either reduce the width of the whole table or adjust the widths
-                    // proportionally, so change of this behavior can be considered in the future.
-                    const removedColumnWidths = widths.splice(currentColumnIndex, Math.abs(currentColumnsDelta));
-                    widths[currentColumnIndex] += sumArray(removedColumnWidths);
-                }
-            }
-            return widths.map(width => width + '%');
-        }
-        /**
-         * Returns a set of cells that have been changed in a given table.
-         */
-        function getAffectedCells(differ, table) {
-            const cellSet = new Set();
-            for (const change of differ.getChanges()) {
-                if (change.type == 'insert' &&
-                    change.position.nodeAfter &&
-                    change.position.nodeAfter.name == 'tableCell' &&
-                    change.position.nodeAfter.getAncestors().includes(table)) {
-                    cellSet.add(change.position.nodeAfter);
-                }
-                else if (change.type == 'remove') {
-                    // If the first cell was removed, use the node after the change position instead.
-                    const referenceNode = (change.position.nodeBefore || change.position.nodeAfter);
-                    if (referenceNode.name == 'tableCell' && referenceNode.getAncestors().includes(table)) {
-                        cellSet.add(referenceNode);
-                    }
-                }
-            }
-            return cellSet;
-        }
-    }
-    /**
-     * Registers table column resize converters.
-     */
-    _registerConverters() {
-        const editor = this.editor;
-        const conversion = editor.conversion;
-        // Table width style
-        conversion.for('upcast').attributeToAttribute({
-            view: {
-                name: /^(figure|table)$/,
-                styles: {
-                    width: /[\s\S]+/
-                }
-            },
-            model: {
-                key: 'tableWidth',
-                value: (viewElement) => {
-                    const parent = viewElement.parent;
-                    if (parent.is('element', 'figure')) {
-                        return;
-                    }
-                    return viewElement.getStyle('width');
-                }
-            }
-        });
-        conversion.for('downcast').attributeToAttribute({
-            model: {
-                name: 'table',
-                key: 'tableWidth'
-            },
-            view: (width) => ({
-                name: 'figure',
-                key: 'style',
-                value: {
-                    width
-                }
-            })
-        });
-        conversion.elementToElement({ model: 'tableColumnGroup', view: 'colgroup' });
-        conversion.elementToElement({ model: 'tableColumn', view: 'col' });
-        conversion.for('downcast').add(downcastTableResizedClass());
-        conversion.for('upcast').add(upcastTableResizedClass());
-        conversion.for('upcast').add(upcastColgroupElement(this._tableUtilsPlugin));
-        conversion.for('upcast').attributeToAttribute({
-            view: {
-                name: 'col',
-                styles: {
-                    width: /.*/
-                }
-            },
-            model: {
-                key: 'columnWidth',
-                value: (viewElement) => {
-                    const viewColWidth = viewElement.getStyle('width');
-                    // 'pt' is the default unit for table column width pasted from MS Office.
-                    // See https://github.com/ckeditor/ckeditor5/issues/14521#issuecomment-1662102889 for more details.
-                    if (!viewColWidth || (!viewColWidth.endsWith('%') && !viewColWidth.endsWith('pt'))) {
-                        return 'auto';
-                    }
-                    return viewColWidth;
-                }
-            }
-        });
-        // The `col[span]` attribute is present in tables pasted from MS Excel. We use it to set the temporary `colSpan` model attribute,
-        // which is consumed during the `colgroup` element upcast.
-        // See https://github.com/ckeditor/ckeditor5/issues/14521#issuecomment-1662102889 for more details.
-        conversion.for('upcast').attributeToAttribute({
-            view: {
-                name: 'col',
-                key: 'span'
-            },
-            model: 'colSpan'
-        });
-        conversion.for('downcast').attributeToAttribute({
-            model: {
-                name: 'tableColumn',
-                key: 'columnWidth'
-            },
-            view: width => ({ key: 'style', value: { width } })
-        });
-    }
-    /**
-     * Registers listeners to handle resizing process.
-     */
-    _registerResizingListeners() {
-        const editingView = this.editor.editing.view;
-        editingView.addObserver(MouseEventsObserver);
-        editingView.document.on('mouseover', this._onMouseOverHandler.bind(this), { priority: 'high' });
-        editingView.document.on('mousedown', this._onMouseDownHandler.bind(this), { priority: 'high' });
-        editingView.document.on('mouseout', this._onMouseOutHandler.bind(this), { priority: 'high' });
-        this._domEmitter.listenTo(global.window.document, 'mousemove', throttle(this._onMouseMoveHandler.bind(this), 50));
-        this._domEmitter.listenTo(global.window.document, 'mouseup', this._onMouseUpHandler.bind(this));
-    }
-    /**
-     * Calculate and set `top` and `bottom` styles to the column resizer element to fit the height of the table.
-     *
-     * @param viewResizer The column resizer element.
-     */
-    _recalculateResizerElement(viewResizer) {
-        const editor = this.editor;
-        const domConverter = editor.editing.view.domConverter;
-        // Get DOM target figure ancestor element.
-        const domTable = domConverter.mapViewToDom(viewResizer.findAncestor('table'));
-        // Get DOM table cell element.
-        const domCell = domConverter.mapViewToDom(viewResizer.findAncestor(item => ['td', 'th'].includes(item.name)));
-        const rectTable = new Rect(domTable);
-        const rectCell = new Rect(domCell);
-        // Calculate the top, and bottom positions of the column resizer element.
-        const targetTopPosition = toPx(Number((rectTable.top - rectCell.top).toFixed(4)));
-        const targetBottomPosition = toPx(Number((rectCell.bottom - rectTable.bottom).toFixed(4)));
-        // Set `top` and `bottom` styles to the column resizer element.
-        editor.editing.view.change(viewWriter => {
-            viewWriter.setStyle('top', targetTopPosition, viewResizer);
-            viewWriter.setStyle('bottom', targetBottomPosition, viewResizer);
-        });
-    }
-    /**
-     * Remove `top` and `bottom` styles of the column resizer element.
-     *
-     * @param viewResizer The column resizer element.
-     */
-    _resetResizerStyles(viewResizer) {
-        this.editor.editing.view.change(viewWriter => {
-            viewWriter.removeStyle('top', viewResizer);
-            viewWriter.removeStyle('bottom', viewResizer);
-        });
-    }
-    /**
-     * Handles the `mouseover` event on column resizer element.
-     * Recalculates the `top` and `bottom` styles of the column resizer element to fit the height of the table.
-     *
-     * @param eventInfo An object containing information about the fired event.
-     * @param domEventData The data related to the DOM event.
-     */
-    _onMouseOverHandler(eventInfo, domEventData) {
-        const target = domEventData.target;
-        if (!target.hasClass('ck-table-column-resizer')) {
-            return;
-        }
-        if (!this._isResizingAllowed) {
-            return;
-        }
-        this._recalculateResizerElement(target);
-    }
-    /**
-     * Handles the `mouseout` event on column resizer element.
-     * When resizing is not active, it resets the `top` and `bottom` styles of the column resizer element.
-     *
-     * @param eventInfo An object containing information about the fired event.
-     * @param domEventData The data related to the DOM event.
-     */
-    _onMouseOutHandler(eventInfo, domEventData) {
-        const target = domEventData.target;
-        if (!target.hasClass('ck-table-column-resizer')) {
-            return;
-        }
-        if (!this._isResizingAllowed) {
-            return;
-        }
-        if (this._isResizingActive) {
-            return;
-        }
-        this._resetResizerStyles(target);
-    }
-    /**
-     * Handles the `mousedown` event on column resizer element:
-     *  * calculates the initial column pixel widths,
-     *  * inserts the `<colgroup>` element if it is not present in the `<table>`,
-     *  * puts the necessary data in the temporary storage,
-     *  * applies the attributes to the `<table>` view element.
-     *
-     * @param eventInfo An object containing information about the fired event.
-     * @param domEventData The data related to the DOM event.
-     */
-    _onMouseDownHandler(eventInfo, domEventData) {
-        const target = domEventData.target;
-        if (!target.hasClass('ck-table-column-resizer')) {
-            return;
-        }
-        if (!this._isResizingAllowed) {
-            return;
-        }
-        const editor = this.editor;
-        const modelTable = editor.editing.mapper.toModelElement(target.findAncestor('figure'));
-        // Do not resize if table model is in non-editable place.
-        if (!editor.model.canEditAt(modelTable)) {
-            return;
-        }
-        domEventData.preventDefault();
-        eventInfo.stop();
-        this._initialMouseEventData = domEventData;
-    }
-    /**
-     * Starts the resizing process after the threshold is reached.
-     */
-    _startResizingAfterThreshold() {
-        const domEventData = this._initialMouseEventData;
-        const { target } = domEventData;
-        const modelTable = this.editor.editing.mapper.toModelElement(target.findAncestor('figure'));
-        const viewTable = target.findAncestor('table');
-        // Calculate the initial column widths in pixels.
-        const columnWidthsInPx = _calculateDomColumnWidths(modelTable, this._tableUtilsPlugin, this.editor);
-        // Insert colgroup for the table that is resized for the first time.
-        if (!Array.from(viewTable.getChildren()).find(viewCol => viewCol.is('element', 'colgroup'))) {
-            this.editor.editing.view.change(viewWriter => {
-                _insertColgroupElement(viewWriter, columnWidthsInPx, viewTable);
-            });
-        }
-        this._isResizingActive = true;
-        this._resizingData = this._getResizingData(domEventData, columnWidthsInPx);
-        // At this point we change only the editor view - we don't want other users to see our changes yet,
-        // so we can't apply them in the model.
-        this.editor.editing.view.change(writer => _applyResizingAttributesToTable(writer, viewTable, this._resizingData));
-        /**
-         * Calculates the DOM columns' widths. It is done by taking the width of the widest cell
-         * from each table column (we rely on the  {@link module:table/tablewalker~TableWalker}
-         * to determine which column the cell belongs to).
-         *
-         * @param modelTable A table which columns should be measured.
-         * @param tableUtils The Table Utils plugin instance.
-         * @param editor The editor instance.
-         * @returns Columns' widths expressed in pixels (without unit).
-         */
-        function _calculateDomColumnWidths(modelTable, tableUtilsPlugin, editor) {
-            const columnWidthsInPx = Array(tableUtilsPlugin.getColumns(modelTable));
-            const tableWalker = new TableWalker(modelTable);
-            for (const cellSlot of tableWalker) {
-                const viewCell = editor.editing.mapper.toViewElement(cellSlot.cell);
-                const domCell = editor.editing.view.domConverter.mapViewToDom(viewCell);
-                const domCellWidth = getDomCellOuterWidth(domCell);
-                if (!columnWidthsInPx[cellSlot.column] || domCellWidth < columnWidthsInPx[cellSlot.column]) {
-                    columnWidthsInPx[cellSlot.column] = toPrecision(domCellWidth);
-                }
-            }
-            return columnWidthsInPx;
-        }
-        /**
-         * Creates a `<colgroup>` element with `<col>`s and inserts it into a given view table.
-         *
-         * @param viewWriter A writer instance.
-         * @param columnWidthsInPx Column widths.
-         * @param viewTable A table view element.
-         */
-        function _insertColgroupElement(viewWriter, columnWidthsInPx, viewTable) {
-            const colgroup = viewWriter.createContainerElement('colgroup');
-            for (let i = 0; i < columnWidthsInPx.length; i++) {
-                const viewColElement = viewWriter.createEmptyElement('col');
-                const columnWidthInPc = `${toPrecision(columnWidthsInPx[i] / sumArray(columnWidthsInPx) * 100)}%`;
-                viewWriter.setStyle('width', columnWidthInPc, viewColElement);
-                viewWriter.insert(viewWriter.createPositionAt(colgroup, 'end'), viewColElement);
-            }
-            viewWriter.insert(viewWriter.createPositionAt(viewTable, 0), colgroup);
-        }
-        /**
-         * Applies the style and classes to the view table as the resizing begun.
-         *
-         * @param viewWriter A writer instance.
-         * @param viewTable A table containing the clicked resizer.
-         * @param resizingData Data related to the resizing.
-         */
-        function _applyResizingAttributesToTable(viewWriter, viewTable, resizingData) {
-            const figureInitialPcWidth = resizingData.widths.viewFigureWidth / resizingData.widths.viewFigureParentWidth;
-            viewWriter.addClass('ck-table-resized', viewTable);
-            viewWriter.addClass('ck-table-column-resizer__active', resizingData.elements.viewResizer);
-            viewWriter.setStyle('width', `${toPrecision(figureInitialPcWidth * 100)}%`, viewTable.findAncestor('figure'));
-        }
-    }
-    /**
-     * Handles the `mousemove` event.
-     *  * If resizing process is not in progress, it does nothing.
-     *  * If resizing is active but not allowed, it stops the resizing process instantly calling the `mousedown` event handler.
-     *  * Otherwise it dynamically updates the widths of the resized columns.
-     *
-     * @param eventInfo An object containing information about the fired event.
-     * @param mouseEventData The native DOM event.
-     */
-    _onMouseMoveHandler(eventInfo, mouseEventData) {
-        if (this._initialMouseEventData) {
-            const mouseEvent = this._initialMouseEventData.domEvent;
-            const distanceX = Math.abs(mouseEventData.clientX - mouseEvent.clientX);
-            if (distanceX >= COLUMN_RESIZE_DISTANCE_THRESHOLD) {
-                this._startResizingAfterThreshold();
-                this._initialMouseEventData = null;
-            }
-            else {
-                return;
-            }
-        }
-        if (!this._isResizingActive) {
-            return;
-        }
-        if (!this._isResizingAllowed) {
-            this._onMouseUpHandler();
-            return;
-        }
-        const { columnPosition, flags: { isRightEdge, isTableCentered, isLtrContent }, elements: { viewFigure, viewLeftColumn, viewRightColumn, viewResizer }, widths: { viewFigureParentWidth, tableWidth, leftColumnWidth, rightColumnWidth } } = this._resizingData;
-        const dxLowerBound = -leftColumnWidth + COLUMN_MIN_WIDTH_IN_PIXELS;
-        const dxUpperBound = isRightEdge ?
-            viewFigureParentWidth - tableWidth :
-            rightColumnWidth - COLUMN_MIN_WIDTH_IN_PIXELS;
-        // The multiplier is needed for calculating the proper movement offset:
-        // - it should negate the sign if content language direction is right-to-left,
-        // - it should double the offset if the table edge is resized and table is centered.
-        const multiplier = (isLtrContent ? 1 : -1) * (isRightEdge && isTableCentered ? 2 : 1);
-        const dx = clamp((mouseEventData.clientX - columnPosition) * multiplier, Math.min(dxLowerBound, 0), Math.max(dxUpperBound, 0));
-        if (dx === 0) {
-            return;
-        }
-        this.editor.editing.view.change(writer => {
-            const leftColumnWidthAsPercentage = toPrecision((leftColumnWidth + dx) * 100 / tableWidth);
-            writer.setStyle('width', `${leftColumnWidthAsPercentage}%`, viewLeftColumn);
-            if (isRightEdge) {
-                const tableWidthAsPercentage = toPrecision((tableWidth + dx) * 100 / viewFigureParentWidth);
-                writer.setStyle('width', `${tableWidthAsPercentage}%`, viewFigure);
-            }
-            else {
-                const rightColumnWidthAsPercentage = toPrecision((rightColumnWidth - dx) * 100 / tableWidth);
-                writer.setStyle('width', `${rightColumnWidthAsPercentage}%`, viewRightColumn);
-            }
-        });
-        this._recalculateResizerElement(viewResizer);
-    }
-    /**
-     * Handles the `mouseup` event.
-     *  * If resizing process is not in progress, it does nothing.
-     *  * If resizing is active but not allowed, it cancels the resizing process restoring the original widths.
-     *  * Otherwise it propagates the changes from view to the model by executing the adequate commands.
-     */
-    _onMouseUpHandler() {
-        this._initialMouseEventData = null;
-        if (!this._isResizingActive) {
-            return;
-        }
-        const { viewResizer, modelTable, viewFigure, viewColgroup } = this._resizingData.elements;
-        const editor = this.editor;
-        const editingView = editor.editing.view;
-        const tableColumnGroup = this.getColumnGroupElement(modelTable);
-        const viewColumns = Array
-            .from(viewColgroup.getChildren())
-            .filter((column) => column.is('view:element'));
-        const columnWidthsAttributeOld = tableColumnGroup ?
-            this.getTableColumnsWidths(tableColumnGroup) :
-            null;
-        const columnWidthsAttributeNew = viewColumns.map(column => column.getStyle('width'));
-        const isColumnWidthsAttributeChanged = !isEqual(columnWidthsAttributeOld, columnWidthsAttributeNew);
-        const tableWidthAttributeOld = modelTable.getAttribute('tableWidth');
-        const tableWidthAttributeNew = viewFigure.getStyle('width');
-        const isTableWidthAttributeChanged = tableWidthAttributeOld !== tableWidthAttributeNew;
-        if (isColumnWidthsAttributeChanged || isTableWidthAttributeChanged) {
-            if (this._isResizingAllowed) {
-                editor.execute('resizeTableWidth', {
-                    table: modelTable,
-                    tableWidth: `${toPrecision(tableWidthAttributeNew)}%`,
-                    columnWidths: columnWidthsAttributeNew
-                });
-            }
-            else {
-                // In read-only mode revert all changes in the editing view. The model is not touched so it does not need to be restored.
-                // This case can occur if the read-only mode kicks in during the resizing process.
-                editingView.change(writer => {
-                    // If table had resized columns before, restore the previous column widths.
-                    // Otherwise clean up the view from the temporary column resizing markup.
-                    if (columnWidthsAttributeOld) {
-                        for (const viewCol of viewColumns) {
-                            writer.setStyle('width', columnWidthsAttributeOld.shift(), viewCol);
-                        }
-                    }
-                    else {
-                        writer.remove(viewColgroup);
-                    }
-                    if (isTableWidthAttributeChanged) {
-                        // If the whole table was already resized before, restore the previous table width.
-                        // Otherwise clean up the view from the temporary table resizing markup.
-                        if (tableWidthAttributeOld) {
-                            writer.setStyle('width', tableWidthAttributeOld, viewFigure);
-                        }
-                        else {
-                            writer.removeStyle('width', viewFigure);
-                        }
-                    }
-                    // If a table and its columns weren't resized before,
-                    // prune the remaining common resizing markup.
-                    if (!columnWidthsAttributeOld && !tableWidthAttributeOld) {
-                        writer.removeClass('ck-table-resized', [...viewFigure.getChildren()].find(element => element.name === 'table'));
-                    }
-                });
-            }
-        }
-        editingView.change(writer => {
-            writer.removeClass('ck-table-column-resizer__active', viewResizer);
-        });
-        const element = editingView.domConverter.mapViewToDom(viewResizer);
-        if (!element.matches(':hover')) {
-            this._resetResizerStyles(viewResizer);
-        }
-        this._isResizingActive = false;
-        this._resizingData = null;
-    }
-    /**
-     * Retrieves and returns required data needed for the resizing process.
-     *
-     * @param domEventData The data of the `mousedown` event.
-     * @param columnWidths The current widths of the columns.
-     * @returns The data needed for the resizing process.
-     */
-    _getResizingData(domEventData, columnWidths) {
-        const editor = this.editor;
-        const columnPosition = domEventData.domEvent.clientX;
-        const viewResizer = domEventData.target;
-        const viewLeftCell = viewResizer.findAncestor('td') || viewResizer.findAncestor('th');
-        const modelLeftCell = editor.editing.mapper.toModelElement(viewLeftCell);
-        const modelTable = modelLeftCell.findAncestor('table');
-        const leftColumnIndex = getColumnEdgesIndexes(modelLeftCell, this._tableUtilsPlugin).rightEdge;
-        const lastColumnIndex = this._tableUtilsPlugin.getColumns(modelTable) - 1;
-        let tableAlignment = modelTable.getAttribute('tableAlignment');
-        if (modelTable.getAttribute('tableType') !== 'layout') {
-            tableAlignment ||= editor.config.get('table.tableProperties.defaultProperties.alignment');
-            tableAlignment ||= 'center';
-        }
-        const isRightEdge = leftColumnIndex === lastColumnIndex;
-        const isLtrContent = editor.locale.contentLanguageDirection !== 'rtl';
-        const isTableCentered = tableAlignment === 'center';
-        const viewTable = viewLeftCell.findAncestor('table');
-        const viewFigure = viewTable.findAncestor('figure');
-        const viewColgroup = [...viewTable.getChildren()]
-            .find(viewCol => viewCol.is('element', 'colgroup'));
-        const viewLeftColumn = viewColgroup.getChild(leftColumnIndex);
-        const viewRightColumn = isRightEdge ? undefined : viewColgroup.getChild(leftColumnIndex + 1);
-        const viewFigureParentWidth = getElementWidthInPixels(editor.editing.view.domConverter.mapViewToDom(viewFigure.parent));
-        const viewFigureWidth = getElementWidthInPixels(editor.editing.view.domConverter.mapViewToDom(viewFigure));
-        const tableWidth = getTableWidthInPixels(modelTable, editor);
-        const leftColumnWidth = columnWidths[leftColumnIndex];
-        const rightColumnWidth = isRightEdge ? undefined : columnWidths[leftColumnIndex + 1];
-        return {
-            columnPosition,
-            flags: {
-                isRightEdge,
-                isTableCentered,
-                isLtrContent
-            },
-            elements: {
-                viewResizer,
-                modelTable,
-                viewFigure,
-                viewColgroup,
-                viewLeftColumn,
-                viewRightColumn
-            },
-            widths: {
-                viewFigureParentWidth,
-                viewFigureWidth,
-                tableWidth,
-                leftColumnWidth,
-                rightColumnWidth
-            }
-        };
-    }
-    /**
-     * Registers a listener ensuring that each resizable cell have a resizer handle.
-     */
-    _registerResizerInserter() {
-        this.editor.conversion.for('editingDowncast').add(dispatcher => {
-            dispatcher.on('insert:tableCell', (evt, data, conversionApi) => {
-                const modelElement = data.item;
-                const viewElement = conversionApi.mapper.toViewElement(modelElement);
-                const viewWriter = conversionApi.writer;
-                viewWriter.insert(viewWriter.createPositionAt(viewElement, 'end'), viewWriter.createUIElement('div', { class: 'ck-table-column-resizer' }));
-            }, { priority: 'lowest' });
-        });
-    }
-}