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

package/src/tableediting.js

@@ -1,246 +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/tableediting
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { upcastTable, ensureParagraphInTableCell, skipEmptyTableRow, upcastTableFigure } from './converters/upcasttable.js';
-import { convertParagraphInTableCell, downcastCell, downcastRow, downcastTable, downcastTableBorderAndBackgroundAttributes, convertPlainTable, convertPlainTableCaption } from './converters/downcast.js';
-import { InsertTableCommand } from './commands/inserttablecommand.js';
-import { InsertRowCommand } from './commands/insertrowcommand.js';
-import { InsertColumnCommand } from './commands/insertcolumncommand.js';
-import { SplitCellCommand } from './commands/splitcellcommand.js';
-import { MergeCellCommand } from './commands/mergecellcommand.js';
-import { RemoveRowCommand } from './commands/removerowcommand.js';
-import { RemoveColumnCommand } from './commands/removecolumncommand.js';
-import { SetHeaderRowCommand } from './commands/setheaderrowcommand.js';
-import { SetHeaderColumnCommand } from './commands/setheadercolumncommand.js';
-import { MergeCellsCommand } from './commands/mergecellscommand.js';
-import { SelectRowCommand } from './commands/selectrowcommand.js';
-import { SelectColumnCommand } from './commands/selectcolumncommand.js';
-import { TableUtils } from '../src/tableutils.js';
-import { injectTableLayoutPostFixer } from './converters/table-layout-post-fixer.js';
-import { injectTableCellParagraphPostFixer } from './converters/table-cell-paragraph-post-fixer.js';
-import { tableHeadingsRefreshHandler } from './converters/table-headings-refresh-handler.js';
-import { tableCellRefreshHandler } from './converters/table-cell-refresh-handler.js';
-import { isTableCellTypeEnabled } from './utils/common.js';
-import '../theme/tableediting.css';
-/**
- * The table editing feature.
- */
-export class TableEditing extends Plugin {
-    /**
-     * Handlers for creating additional slots in the table.
-     */
-    _additionalSlots;
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'TableEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [TableUtils];
-    }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        this._additionalSlots = [];
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const model = editor.model;
-        const schema = model.schema;
-        const conversion = editor.conversion;
-        const tableUtils = editor.plugins.get(TableUtils);
-        schema.register('table', {
-            inheritAllFrom: '$blockObject',
-            allowAttributes: ['headingRows', 'headingColumns']
-        });
-        schema.register('tableRow', {
-            allowIn: 'table',
-            isLimit: true
-        });
-        schema.register('tableCell', {
-            allowContentOf: '$container',
-            allowIn: 'tableRow',
-            allowAttributes: ['colspan', 'rowspan'],
-            isLimit: true,
-            isSelectable: true
-        });
-        // Figure conversion.
-        conversion.for('upcast').add(upcastTableFigure());
-        // Table conversion.
-        conversion.for('upcast').add(upcastTable());
-        conversion.for('editingDowncast').elementToStructure({
-            model: {
-                name: 'table',
-                attributes: ['headingRows']
-            },
-            view: downcastTable(tableUtils, {
-                asWidget: true,
-                additionalSlots: this._additionalSlots
-            })
-        });
-        conversion.for('dataDowncast').elementToStructure({
-            model: {
-                name: 'table',
-                attributes: ['headingRows']
-            },
-            view: downcastTable(tableUtils, {
-                additionalSlots: this._additionalSlots
-            })
-        });
-        // Table row conversion.
-        conversion.for('upcast').elementToElement({ model: 'tableRow', view: 'tr' });
-        conversion.for('upcast').add(skipEmptyTableRow());
-        conversion.for('downcast').elementToElement({
-            model: 'tableRow',
-            view: downcastRow()
-        });
-        // Table cell conversion.
-        conversion.for('upcast').elementToElement({ model: 'tableCell', view: 'td' });
-        conversion.for('upcast').elementToElement({ model: 'tableCell', view: 'th' });
-        conversion.for('upcast').add(ensureParagraphInTableCell('td'));
-        conversion.for('upcast').add(ensureParagraphInTableCell('th'));
-        conversion.for('editingDowncast').elementToElement({
-            model: 'tableCell',
-            view: downcastCell({
-                asWidget: true,
-                cellTypeEnabled: () => isTableCellTypeEnabled(this.editor)
-            })
-        });
-        conversion.for('dataDowncast').elementToElement({
-            model: 'tableCell',
-            view: downcastCell({
-                cellTypeEnabled: () => isTableCellTypeEnabled(this.editor)
-            })
-        });
-        // Duplicates code - needed to properly refresh paragraph inside a table cell.
-        conversion.for('editingDowncast').elementToElement({
-            model: 'paragraph',
-            view: convertParagraphInTableCell({ asWidget: true }),
-            converterPriority: 'high'
-        });
-        conversion.for('dataDowncast').elementToElement({
-            model: 'paragraph',
-            view: convertParagraphInTableCell(),
-            converterPriority: 'high'
-        });
-        // Table attributes conversion.
-        conversion.for('downcast').attributeToAttribute({ model: 'colspan', view: 'colspan' });
-        conversion.for('upcast').attributeToAttribute({
-            model: { key: 'colspan', value: upcastCellSpan('colspan') },
-            view: 'colspan'
-        });
-        conversion.for('downcast').attributeToAttribute({ model: 'rowspan', view: 'rowspan' });
-        conversion.for('upcast').attributeToAttribute({
-            model: { key: 'rowspan', value: upcastCellSpan('rowspan') },
-            view: 'rowspan'
-        });
-        // Plain table output converters (also used in the clipboard pipeline).
-        this._addPlainTableOutputConverters();
-        // Define the config.
-        editor.config.define('table.defaultHeadings.rows', 0);
-        editor.config.define('table.defaultHeadings.columns', 0);
-        editor.config.define('table.showHiddenBorders', true);
-        if (editor.config.get('table.showHiddenBorders')) {
-            editor.editing.view.change(writer => {
-                for (const root of editor.editing.view.document.roots) {
-                    writer.addClass('ck-table-show-hidden-borders', root);
-                }
-            });
-        }
-        // Define all the commands.
-        editor.commands.add('insertTable', new InsertTableCommand(editor));
-        editor.commands.add('insertTableRowAbove', new InsertRowCommand(editor, { order: 'above' }));
-        editor.commands.add('insertTableRowBelow', new InsertRowCommand(editor, { order: 'below' }));
-        editor.commands.add('insertTableColumnLeft', new InsertColumnCommand(editor, { order: 'left' }));
-        editor.commands.add('insertTableColumnRight', new InsertColumnCommand(editor, { order: 'right' }));
-        editor.commands.add('removeTableRow', new RemoveRowCommand(editor));
-        editor.commands.add('removeTableColumn', new RemoveColumnCommand(editor));
-        editor.commands.add('splitTableCellVertically', new SplitCellCommand(editor, { direction: 'vertically' }));
-        editor.commands.add('splitTableCellHorizontally', new SplitCellCommand(editor, { direction: 'horizontally' }));
-        editor.commands.add('mergeTableCells', new MergeCellsCommand(editor));
-        editor.commands.add('mergeTableCellRight', new MergeCellCommand(editor, { direction: 'right' }));
-        editor.commands.add('mergeTableCellLeft', new MergeCellCommand(editor, { direction: 'left' }));
-        editor.commands.add('mergeTableCellDown', new MergeCellCommand(editor, { direction: 'down' }));
-        editor.commands.add('mergeTableCellUp', new MergeCellCommand(editor, { direction: 'up' }));
-        editor.commands.add('setTableColumnHeader', new SetHeaderColumnCommand(editor));
-        editor.commands.add('setTableRowHeader', new SetHeaderRowCommand(editor));
-        editor.commands.add('selectTableRow', new SelectRowCommand(editor));
-        editor.commands.add('selectTableColumn', new SelectColumnCommand(editor));
-        injectTableLayoutPostFixer(model);
-        injectTableCellParagraphPostFixer(model);
-        this.listenTo(model.document, 'change:data', () => {
-            // It's no longer needed to refresh table headings on every data change if table cell type feature is enabled.
-            // It's because headings rows / columns are updated based on cell types which triggers their own refresh handler.
-            if (!isTableCellTypeEnabled(editor)) {
-                tableHeadingsRefreshHandler(model, editor.editing);
-            }
-            tableCellRefreshHandler(model, editor.editing);
-        });
-    }
-    /**
-     * Registers downcast handler for the additional table slot.
-     */
-    registerAdditionalSlot(slotHandler) {
-        this._additionalSlots.push(slotHandler);
-    }
-    /**
-     * Adds converters for plain table output. These converters are used either when the `PlainTableOutput` plugin is loaded
-     * or when content is processed by the clipboard pipeline, ensuring that pasted tables are not wrapped in a <figure> element.
-     */
-    _addPlainTableOutputConverters() {
-        const editor = this.editor;
-        // Override default table data downcast converter.
-        editor.conversion.for('dataDowncast').elementToStructure({
-            model: 'table',
-            view: convertPlainTable(editor),
-            converterPriority: 'high'
-        });
-        // Make sure table <caption> is downcasted into <caption> in the data pipeline when necessary.
-        if (editor.plugins.has('TableCaptionEditing')) {
-            editor.conversion.for('dataDowncast').elementToElement({
-                model: 'caption',
-                view: convertPlainTableCaption(editor),
-                converterPriority: 'high'
-            });
-        }
-        // Handle border-style, border-color, border-width and background-color table attributes.
-        if (editor.plugins.has('TablePropertiesEditing')) {
-            downcastTableBorderAndBackgroundAttributes(editor);
-        }
-    }
-}
-/**
- * Returns fixed colspan and rowspan attrbutes values.
- *
- * @param type colspan or rowspan.
- * @returns conversion value function.
- */
-function upcastCellSpan(type) {
-    return (cell) => {
-        const span = parseInt(cell.getAttribute(type));
-        if (Number.isNaN(span) || span <= 0) {
-            return null;
-        }
-        return span;
-    };
-}

package/src/tablekeyboard.js

@@ -1,273 +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/tablekeyboard
- */
-import { TableSelection } from './tableselection.js';
-import { TableWalker } from './tablewalker.js';
-import { TableUtils } from './tableutils.js';
-import { Plugin } from 'ckeditor5/src/core.js';
-import { getLocalizedArrowKeyCodeDirection } from 'ckeditor5/src/utils.js';
-/**
- * This plugin enables keyboard navigation for tables.
- * It is loaded automatically by the {@link module:table/table~Table} plugin.
- */
-export class TableKeyboard extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'TableKeyboard';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [TableSelection, TableUtils];
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const view = editor.editing.view;
-        const viewDocument = view.document;
-        const t = editor.t;
-        this.listenTo(viewDocument, 'arrowKey', (...args) => this._onArrowKey(...args), { context: 'table' });
-        this.listenTo(viewDocument, 'tab', (...args) => this._handleTabOnSelectedTable(...args), { context: 'figure' });
-        this.listenTo(viewDocument, 'tab', (...args) => this._handleTab(...args), { context: ['th', 'td'] });
-        // Add the information about the keystrokes to the accessibility database.
-        editor.accessibility.addKeystrokeInfoGroup({
-            id: 'table',
-            label: t('Keystrokes that can be used in a table cell'),
-            keystrokes: [
-                {
-                    label: t('Move the selection to the next cell'),
-                    keystroke: 'Tab'
-                },
-                {
-                    label: t('Move the selection to the previous cell'),
-                    keystroke: 'Shift+Tab'
-                },
-                {
-                    label: t('Insert a new table row (when in the last cell of a table)'),
-                    keystroke: 'Tab'
-                },
-                {
-                    label: t('Navigate through the table'),
-                    keystroke: [['arrowup'], ['arrowright'], ['arrowdown'], ['arrowleft']]
-                }
-            ]
-        });
-    }
-    /**
-     * Handles {@link module:engine/view/document~ViewDocument#event:tab tab} events for the <kbd>Tab</kbd> key executed
-     * when the table widget is selected.
-     */
-    _handleTabOnSelectedTable(bubblingEventInfo, domEventData) {
-        const editor = this.editor;
-        const selection = editor.model.document.selection;
-        const selectedElement = selection.getSelectedElement();
-        if (!selectedElement || !selectedElement.is('element', 'table')) {
-            return;
-        }
-        // For backward compatibility stop propagation of this DOM event.
-        // The default tab handling from widgets handles navigation.
-        domEventData.stopPropagation();
-    }
-    /**
-     * Handles {@link module:engine/view/document~ViewDocument#event:tab tab} events for the <kbd>Tab</kbd> key executed
-     * inside table cells.
-     */
-    _handleTab(bubblingEventInfo, domEventData) {
-        const editor = this.editor;
-        const tableUtils = this.editor.plugins.get(TableUtils);
-        const tableSelection = this.editor.plugins.get('TableSelection');
-        const selection = editor.model.document.selection;
-        const isForward = !domEventData.shiftKey;
-        let tableCell = tableUtils.getTableCellsContainingSelection(selection)[0];
-        if (!tableCell) {
-            tableCell = tableSelection.getFocusCell();
-        }
-        if (!tableCell) {
-            return;
-        }
-        // For backward compatibility stop propagation of this DOM event.
-        // The default tab handling from widgets handles navigation.
-        domEventData.stopPropagation();
-        const tableRow = tableCell.parent;
-        const table = tableRow.parent;
-        const currentRowIndex = table.getChildIndex(tableRow);
-        const currentCellIndex = tableRow.getChildIndex(tableCell);
-        const isLastCellInRow = currentCellIndex === tableRow.childCount - 1;
-        const isLastRow = currentRowIndex === tableUtils.getRows(table) - 1;
-        if (isForward && isLastRow && isLastCellInRow) {
-            editor.execute('insertTableRowBelow');
-        }
-    }
-    /**
-     * Handles {@link module:engine/view/document~ViewDocument#event:keydown keydown} events.
-     */
-    _onArrowKey(eventInfo, domEventData) {
-        const editor = this.editor;
-        const keyCode = domEventData.keyCode;
-        const direction = getLocalizedArrowKeyCodeDirection(keyCode, editor.locale.contentLanguageDirection);
-        const wasHandled = this._handleArrowKeys(direction, domEventData.shiftKey);
-        if (wasHandled) {
-            domEventData.preventDefault();
-            domEventData.stopPropagation();
-            eventInfo.stop();
-        }
-    }
-    /**
-     * Handles arrow keys to move the selection around the table.
-     *
-     * @param direction The direction of the arrow key.
-     * @param expandSelection If the current selection should be expanded.
-     * @returns Returns `true` if key was handled.
-     */
-    _handleArrowKeys(direction, expandSelection) {
-        const tableUtils = this.editor.plugins.get(TableUtils);
-        const tableSelection = this.editor.plugins.get('TableSelection');
-        const model = this.editor.model;
-        const selection = model.document.selection;
-        const isForward = ['right', 'down'].includes(direction);
-        // In case one or more table cells are selected (from outside),
-        // move the selection to a cell adjacent to the selected table fragment.
-        const selectedCells = tableUtils.getSelectedTableCells(selection);
-        if (selectedCells.length) {
-            let focusCell;
-            if (expandSelection) {
-                focusCell = tableSelection.getFocusCell();
-            }
-            else {
-                focusCell = isForward ? selectedCells[selectedCells.length - 1] : selectedCells[0];
-            }
-            this._navigateFromCellInDirection(focusCell, direction, expandSelection);
-            return true;
-        }
-        // Abort if we're not in a table cell.
-        const tableCell = selection.focus.findAncestor('tableCell');
-        /* istanbul ignore if: paranoid check -- @preserve */
-        if (!tableCell) {
-            return false;
-        }
-        // When the selection is not collapsed.
-        if (!selection.isCollapsed) {
-            if (expandSelection) {
-                // Navigation is in the opposite direction than the selection direction so this is shrinking of the selection.
-                // Selection for sure will not approach cell edge.
-                //
-                // With a special case when all cell content is selected - then selection should expand to the other cell.
-                // Note: When the entire cell gets selected using CTRL+A, the selection is always forward.
-                if (selection.isBackward == isForward && !selection.containsEntireContent(tableCell)) {
-                    return false;
-                }
-            }
-            else {
-                const selectedElement = selection.getSelectedElement();
-                // It will collapse for non-object selected so it's not going to move to other cell.
-                if (!selectedElement || !model.schema.isObject(selectedElement)) {
-                    return false;
-                }
-            }
-        }
-        // Let's check if the selection is at the beginning/end of the cell.
-        if (this._isSelectionAtCellEdge(selection, tableCell, isForward)) {
-            this._navigateFromCellInDirection(tableCell, direction, expandSelection);
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Returns `true` if the selection is at the boundary of a table cell according to the navigation direction.
-     *
-     * @param selection The current selection.
-     * @param tableCell The current table cell element.
-     * @param isForward The expected navigation direction.
-     */
-    _isSelectionAtCellEdge(selection, tableCell, isForward) {
-        const model = this.editor.model;
-        const schema = this.editor.model.schema;
-        const focus = isForward ? selection.getLastPosition() : selection.getFirstPosition();
-        // If the current limit element is not table cell we are for sure not at the cell edge.
-        // Also `modifySelection` will not let us out of it.
-        if (!schema.getLimitElement(focus).is('element', 'tableCell')) {
-            const boundaryPosition = model.createPositionAt(tableCell, isForward ? 'end' : 0);
-            return boundaryPosition.isTouching(focus);
-        }
-        const probe = model.createSelection(focus);
-        model.modifySelection(probe, { direction: isForward ? 'forward' : 'backward' });
-        // If there was no change in the focus position, then it's not possible to move the selection there.
-        return focus.isEqual(probe.focus);
-    }
-    /**
-     * Moves the selection from the given table cell in the specified direction.
-     *
-     * @param focusCell The table cell that is current multi-cell selection focus.
-     * @param direction Direction in which selection should move.
-     * @param expandSelection If the current selection should be expanded. Default value is false.
-     */
-    _navigateFromCellInDirection(focusCell, direction, expandSelection = false) {
-        const model = this.editor.model;
-        const table = focusCell.findAncestor('table');
-        const tableMap = [...new TableWalker(table, { includeAllSlots: true })];
-        const { row: lastRow, column: lastColumn } = tableMap[tableMap.length - 1];
-        const currentCellInfo = tableMap.find(({ cell }) => cell == focusCell);
-        let { row, column } = currentCellInfo;
-        switch (direction) {
-            case 'left':
-                column--;
-                break;
-            case 'up':
-                row--;
-                break;
-            case 'right':
-                column += currentCellInfo.cellWidth;
-                break;
-            case 'down':
-                row += currentCellInfo.cellHeight;
-                break;
-        }
-        const isOutsideVertically = row < 0 || row > lastRow;
-        const isBeforeFirstCell = column < 0 && row <= 0;
-        const isAfterLastCell = column > lastColumn && row >= lastRow;
-        // Note that if the table cell at the end of a row is row-spanned then isAfterLastCell will never be true.
-        // However, we don't know if user was navigating on the last row or not, so let's stay in the table.
-        if (isOutsideVertically || isBeforeFirstCell || isAfterLastCell) {
-            model.change(writer => {
-                writer.setSelection(writer.createRangeOn(table));
-            });
-            return;
-        }
-        if (column < 0) {
-            column = expandSelection ? 0 : lastColumn;
-            row--;
-        }
-        else if (column > lastColumn) {
-            column = expandSelection ? lastColumn : 0;
-            row++;
-        }
-        const cellToSelect = tableMap.find(cellInfo => cellInfo.row == row && cellInfo.column == column).cell;
-        const isForward = ['right', 'down'].includes(direction);
-        const tableSelection = this.editor.plugins.get('TableSelection');
-        if (expandSelection && tableSelection.isEnabled) {
-            const anchorCell = tableSelection.getAnchorCell() || focusCell;
-            tableSelection.setCellSelection(anchorCell, cellToSelect);
-        }
-        else {
-            const positionToSelect = model.createPositionAt(cellToSelect, isForward ? 0 : 'end');
-            model.change(writer => {
-                writer.setSelection(positionToSelect);
-            });
-        }
-    }
-}

package/src/tablelayout/commands/tabletypecommand.js

@@ -1,68 +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/tablelayout/commands/tabletypecommand
- */
-import { Command } from 'ckeditor5/src/core.js';
-import { getSelectionAffectedTable } from '../../utils/common.js';
-/**
- * The set table type command.
- *
- * The command is registered by {@link module:table/tablelayout/tablelayoutediting~TableLayoutEditing}
- * as the `'tableType'` editor command.
- *
- * To set the table type at the current selection, execute the command and specify the table type:
- *
- * ```ts
- * editor.execute( 'tableType', 'layout' );
- * ```
- */
-export class TableTypeCommand extends Command {
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const model = this.editor.model;
-        const selection = model.document.selection;
-        const selectedTable = getSelectionAffectedTable(selection);
-        if (selectedTable) {
-            this.isEnabled = true;
-            this.value = selectedTable.getAttribute('tableType');
-        }
-        else {
-            this.isEnabled = false;
-            this.value = null;
-        }
-    }
-    /**
-     * Executes the command.
-     *
-     * Set table type by the given table type parameter.
-     *
-     * @param tableType The type of table it should become.
-     * @fires execute
-     */
-    execute(tableType) {
-        const editor = this.editor;
-        const model = editor.model;
-        const selection = model.document.selection;
-        const table = getSelectionAffectedTable(selection);
-        const currentTableType = table.getAttribute('tableType');
-        if (currentTableType === tableType) {
-            return;
-        }
-        model.change(writer => {
-            writer.setAttribute('tableType', tableType, table);
-            model.schema.removeDisallowedAttributes([table], writer);
-            const tableChildren = table.getChildren();
-            // Check if all children are allowed for the new table type.
-            for (const child of tableChildren) {
-                if (!model.schema.checkChild(table, child)) {
-                    writer.remove(child);
-                }
-            }
-        });
-    }
-}