@ckeditor/ckeditor5-table 44.3.0 → 45.0.0-alpha.1

package/src/tableediting.js

@@ -30,6 +30,10 @@ import '../theme/tableediting.css';
  * The table editing feature.
  */
 export default class TableEditing extends Plugin {
+    /**
+     * Handlers for creating additional slots in the table.
+     */
+    _additionalSlots;
     /**
      * @inheritDoc
      */

package/src/tablelayout/commands/tabletypecommand.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license Copyright (c) 2003-2025, 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 type { TableType } from '../../tableconfig.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 default class TableTypeCommand extends Command {
+    /**
+     * The table type of selected table.
+     *
+     * @observable
+     * @readonly
+     */
+    value: TableType | null;
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * 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: TableType): void;
+}

package/src/tablelayout/commands/tabletypecommand.js

@@ -0,0 +1,68 @@
+/**
+ * @license Copyright (c) 2003-2025, 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 default 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);
+                }
+            }
+        });
+    }
+}

package/src/tablelayout/tablelayoutediting.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @license Copyright (c) 2003-2025, 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/tablelayoutediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import TableColumnResize from '../tablecolumnresize.js';
+import '../../theme/tablelayout.css';
+/**
+ * The table layout editing plugin.
+ */
+export default class TableLayoutEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "TableLayoutEditing";
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof TableColumnResize];
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Defines the schema for the table layout feature.
+     */
+    private _defineSchema;
+    /**
+     * Defines the converters for the table layout feature.
+     */
+    private _defineConverters;
+    /**
+     * Handles the clipboard content insertion events.
+     *
+     * - If the content is from another editor, do not override the table type.
+     * - If the content is from another source, set the table type to 'content'.
+     *
+     * It handles the scenario when user copies `<table></table>` from Word. We do not want to
+     * change the table type to `layout` because it is really `content` table.
+     */
+    private _defineClipboardPasteHandlers;
+    /**
+     * Registers a post-fixer that sets the `tableType` attribute to `content` for inserted "default" tables.
+     * Also fixes potential issues with the table structure when the `tableType` attribute has been changed.
+     */
+    private _registerTableTypeAttributePostfixer;
+}

package/src/tablelayout/tablelayoutediting.js

@@ -0,0 +1,276 @@
+/**
+ * @license Copyright (c) 2003-2025, 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/tablelayoutediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import InsertTableLayoutCommand from './../commands/inserttablelayoutcommand.js';
+import TableColumnResize from '../tablecolumnresize.js';
+import TableTypeCommand from './commands/tabletypecommand.js';
+import { createEmptyTableCell } from '../utils/common.js';
+import '../../theme/tablelayout.css';
+const TABLE_TYPES = ['content', 'layout'];
+/**
+ * The table layout editing plugin.
+ */
+export default class TableLayoutEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'TableLayoutEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [TableColumnResize];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        this._defineSchema();
+        this._defineConverters();
+        this._defineClipboardPasteHandlers();
+        this._registerTableTypeAttributePostfixer();
+        this.editor.commands.add('insertTableLayout', new InsertTableLayoutCommand(this.editor));
+        this.editor.commands.add('tableType', new TableTypeCommand(this.editor));
+    }
+    /**
+     * Defines the schema for the table layout feature.
+     */
+    _defineSchema() {
+        const { schema } = this.editor.model;
+        schema.extend('table', {
+            allowAttributes: 'tableType'
+        });
+        // Disallow adding `caption` to layout table.
+        schema.addChildCheck(layoutTableCheck, 'caption');
+        // Disallow adding `headingRows` attribute to layout table.
+        schema.addAttributeCheck(layoutTableCheck, 'headingRows');
+        // Disallow adding `headingColumns` attribute to layout table.
+        schema.addAttributeCheck(layoutTableCheck, 'headingColumns');
+    }
+    /**
+     * Defines the converters for the table layout feature.
+     */
+    _defineConverters() {
+        const { editor } = this;
+        const { conversion } = editor;
+        const preferredExternalTableType = editor.config.get('table.tableLayout.preferredExternalTableType');
+        conversion.for('upcast').add(upcastLayoutTable(preferredExternalTableType));
+        conversion.for('dataDowncast').add(dataDowncastLayoutTable());
+        conversion.for('editingDowncast').attributeToAttribute({
+            model: {
+                key: 'tableType',
+                values: ['layout', 'content']
+            },
+            view: {
+                layout: {
+                    key: 'class',
+                    value: ['layout-table']
+                },
+                content: {
+                    key: 'class',
+                    value: ['content-table']
+                }
+            }
+        });
+    }
+    /**
+     * Handles the clipboard content insertion events.
+     *
+     * - If the content is from another editor, do not override the table type.
+     * - If the content is from another source, set the table type to 'content'.
+     *
+     * It handles the scenario when user copies `<table></table>` from Word. We do not want to
+     * change the table type to `layout` because it is really `content` table.
+     */
+    _defineClipboardPasteHandlers() {
+        const { plugins } = this.editor;
+        if (!plugins.has('ClipboardPipeline')) {
+            return;
+        }
+        const clipboardPipeline = plugins.get('ClipboardPipeline');
+        this.listenTo(clipboardPipeline, 'contentInsertion', (evt, data) => {
+            // If content is pasted from the other editor, skip overriding table type.
+            if (data.sourceEditorId) {
+                return;
+            }
+            // For content from other sources, always set table type to 'content'.
+            this.editor.model.change(writer => {
+                for (const { item } of writer.createRangeIn(data.content)) {
+                    if (item.is('element', 'table')) {
+                        writer.setAttribute('tableType', 'content', item);
+                    }
+                }
+            });
+        });
+    }
+    /**
+     * Registers a post-fixer that sets the `tableType` attribute to `content` for inserted "default" tables.
+     * Also fixes potential issues with the table structure when the `tableType` attribute has been changed.
+     */
+    _registerTableTypeAttributePostfixer() {
+        const editor = this.editor;
+        editor.model.document.registerPostFixer((writer) => {
+            const changes = editor.model.document.differ.getChanges();
+            let hasChanged = false;
+            for (const entry of changes) {
+                if (entry.type == 'insert' && entry.name != '$text') {
+                    const element = entry.position.nodeAfter;
+                    const range = writer.createRangeOn(element);
+                    for (const item of range.getItems()) {
+                        if (item.is('element', 'table') && !item.hasAttribute('tableType')) {
+                            writer.setAttribute('tableType', 'content', item);
+                            hasChanged = true;
+                        }
+                    }
+                }
+                // Remove disallowed attributes and children for layout tables
+                // when `tableType` attribute has been changed by `TableTypeCommand`.
+                if (entry.type == 'attribute' && entry.attributeKey == 'tableType') {
+                    for (const item of entry.range.getItems()) {
+                        if (item.is('element', 'table')) {
+                            editor.model.schema.removeDisallowedAttributes([item], writer);
+                            const tableChildren = item.getChildren();
+                            // Check if all children are allowed for the new table type.
+                            for (const child of tableChildren) {
+                                if (!editor.model.schema.checkChild(item, child)) {
+                                    writer.remove(child);
+                                    hasChanged = true;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            return hasChanged;
+        });
+    }
+}
+/**
+ * View table element to model table element conversion helper.
+ *
+ * This conversion helper overrides the default table converter to meet table layout conditions.
+ *
+ * @returns Conversion helper.
+ */
+function upcastLayoutTable(preferredExternalTableType) {
+    return (dispatcher) => {
+        dispatcher.on('element:table', (evt, data, conversionApi) => {
+            const viewTable = data.viewItem;
+            if (!conversionApi.consumable.test(viewTable, { name: true })) {
+                return;
+            }
+            const resolvedTableType = resolveTableType(viewTable, preferredExternalTableType);
+            // When an element is a content table, then skip it.
+            if (resolvedTableType == 'content') {
+                return;
+            }
+            const table = conversionApi.writer.createElement('table', { tableType: 'layout' });
+            if (!conversionApi.safeInsert(table, data.modelCursor)) {
+                return;
+            }
+            conversionApi.consumable.consume(viewTable, { name: true });
+            conversionApi.consumable.consume(viewTable, { attributes: ['role'] });
+            conversionApi.consumable.consume(viewTable, { classes: ['layout-table'] });
+            // Get all rows from the table and convert them.
+            // While looping over the children of `<table>` we can be sure that first will be `<tbody>`
+            // and optionally `<thead>` and `<tfoot>`, and in these elements are the table rows found.
+            // We can be sure of that because of `DomParser` handle it.
+            for (const tableChild of viewTable.getChildren()) {
+                if (tableChild.is('element')) {
+                    for (const row of tableChild.getChildren()) {
+                        if (row.is('element', 'tr')) {
+                            conversionApi.convertItem(row, conversionApi.writer.createPositionAt(table, 'end'));
+                        }
+                    }
+                }
+            }
+            // Convert everything else.
+            conversionApi.convertChildren(viewTable, conversionApi.writer.createPositionAt(table, 'end'));
+            // Create one row and one table cell for empty table.
+            if (table.isEmpty) {
+                const row = conversionApi.writer.createElement('tableRow');
+                conversionApi.writer.insert(row, conversionApi.writer.createPositionAt(table, 'end'));
+                createEmptyTableCell(conversionApi.writer, conversionApi.writer.createPositionAt(row, 'end'));
+            }
+            conversionApi.updateConversionResult(table, data);
+        }, { priority: 'high' });
+        // Sets only the table type attribute.
+        dispatcher.on('element:table', (evt, data, conversionApi) => {
+            const { viewItem, modelRange } = data;
+            if (modelRange) {
+                conversionApi.writer.setAttribute('tableType', resolveTableType(viewItem, preferredExternalTableType), modelRange);
+                conversionApi.consumable.consume(viewItem, { classes: ['layout-table'] });
+                conversionApi.consumable.consume(viewItem, { classes: ['content-table'] });
+            }
+        }, { priority: 'low' });
+    };
+}
+/**
+ * Model table container element to view table element conversion helper.
+ *
+ * @returns Conversion helper.
+ */
+function dataDowncastLayoutTable() {
+    return (dispatcher) => {
+        return dispatcher.on('attribute:tableType:table', (evt, data, conversionApi) => {
+            const { item, attributeNewValue } = data;
+            const { mapper, writer } = conversionApi;
+            if (!conversionApi.consumable.test(item, evt.name)) {
+                return;
+            }
+            const table = mapper.toViewElement(item);
+            writer.addClass(`${attributeNewValue}-table`, table);
+            if (attributeNewValue == 'layout') {
+                writer.setAttribute('role', 'presentation', table);
+            }
+            conversionApi.consumable.consume(item, evt.name);
+        });
+    };
+}
+/**
+ * Resolves the table type based on the view table element and the preferred external table type.
+ */
+function resolveTableType(viewTable, preferredExternalTableType) {
+    if (viewTable.hasClass('content-table')) {
+        return 'content';
+    }
+    if (viewTable.hasClass('layout-table')) {
+        return 'layout';
+    }
+    if (preferredExternalTableType && TABLE_TYPES.includes(preferredExternalTableType)) {
+        return preferredExternalTableType;
+    }
+    const parent = viewTable.parent;
+    /**
+     * Checks if the table is a content table if any of the following conditions are met:
+     * - the `<table>` is wrapped with `<figure>`,
+     * - the `<table>` has a `<caption>` element.
+     */
+    if (parent.is('element', 'figure') ||
+        Array.from(viewTable.getChildren()).some(child => child.is('element', 'caption'))) {
+        return 'content';
+    }
+    return 'layout';
+}
+/**
+ * Checks if the element is a layout table.
+ * It is used to disallow attributes or children that is managed by `Schema`.
+ */
+function layoutTableCheck(context) {
+    if (context.endsWith('table') && context.last.getAttribute('tableType') == 'layout') {
+        return false;
+    }
+}

package/src/tablelayout/tablelayoutui.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2025, 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/tablelayoutui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+/**
+ * The table layout UI plugin. It introduces:
+ *
+ * * The `'insertTableLayout'` dropdown,
+ * * The `'menuBar:insertTableLayout'` menu bar menu.
+ */
+export default class TableLayoutUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "TableLayoutUI";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+}

package/src/tablelayout/tablelayoutui.js

@@ -0,0 +1,189 @@
+/**
+ * @license Copyright (c) 2003-2025, 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/tablelayoutui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { IconTableLayout, IconTableProperties } from 'ckeditor5/src/icons.js';
+import { createDropdown, addListToDropdown, MenuBarMenuView, SplitButtonView, DropdownButtonView, ViewModel } from 'ckeditor5/src/ui.js';
+import { Collection } from 'ckeditor5/src/utils.js';
+import InsertTableView from '../ui/inserttableview.js';
+/**
+ * The table layout UI plugin. It introduces:
+ *
+ * * The `'insertTableLayout'` dropdown,
+ * * The `'menuBar:insertTableLayout'` menu bar menu.
+ */
+export default class TableLayoutUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'TableLayoutUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const t = this.editor.t;
+        editor.ui.componentFactory.add('insertTableLayout', locale => {
+            const command = editor.commands.get('insertTableLayout');
+            const dropdownView = createDropdown(locale);
+            dropdownView.bind('isEnabled').to(command);
+            // Decorate dropdown's button.
+            dropdownView.buttonView.set({
+                icon: IconTableLayout,
+                label: t('Insert table layout'),
+                tooltip: true
+            });
+            let insertTableLayoutView;
+            dropdownView.on('change:isOpen', () => {
+                if (insertTableLayoutView) {
+                    return;
+                }
+                // Prepare custom view for dropdown's panel.
+                insertTableLayoutView = new InsertTableView(locale);
+                dropdownView.panelView.children.add(insertTableLayoutView);
+                insertTableLayoutView.delegate('execute').to(dropdownView);
+                dropdownView.on('execute', () => {
+                    editor.execute('insertTableLayout', {
+                        rows: insertTableLayoutView.rows,
+                        columns: insertTableLayoutView.columns
+                    });
+                    editor.editing.view.focus();
+                });
+            });
+            return dropdownView;
+        });
+        editor.ui.componentFactory.add('menuBar:insertTableLayout', locale => {
+            const command = editor.commands.get('insertTableLayout');
+            const menuView = new MenuBarMenuView(locale);
+            const insertTableLayoutView = new InsertTableView(locale);
+            insertTableLayoutView.delegate('execute').to(menuView);
+            menuView.on('change:isOpen', (event, name, isOpen) => {
+                if (!isOpen) {
+                    insertTableLayoutView.reset();
+                }
+            });
+            insertTableLayoutView.on('execute', () => {
+                editor.execute('insertTableLayout', {
+                    rows: insertTableLayoutView.rows,
+                    columns: insertTableLayoutView.columns
+                });
+                editor.editing.view.focus();
+            });
+            menuView.buttonView.set({
+                label: t('Table layout'),
+                icon: IconTableLayout
+            });
+            menuView.panelView.children.add(insertTableLayoutView);
+            menuView.bind('isEnabled').to(command);
+            return menuView;
+        });
+        // Create table type dropdown button.
+        editor.ui.componentFactory.add('tableType', () => {
+            const editor = this.editor;
+            const t = editor.t;
+            const button = new DropdownButtonView(editor.locale);
+            button.set({
+                label: t('Table type'),
+                icon: IconTableProperties,
+                tooltip: true
+            });
+            return createTableTypeDropdown(editor, button);
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    afterInit() {
+        const editor = this.editor;
+        if (!editor.plugins.has('TablePropertiesUI')) {
+            return;
+        }
+        const tablePropertiesUI = editor.plugins.get('TablePropertiesUI');
+        // Override the default table properties button to include the table type dropdown.
+        // It needs to be done in `afterInit()` to make sure that `tableProperties` button is
+        // registered after the initialization of the `TablePropertiesUI`. Otherwise, the
+        // button will be overridden by the default one if the `TablePropertiesUI` is
+        // initialized after the `TableLayoutUI`.
+        editor.ui.componentFactory.add('tableProperties', locale => {
+            const baseButton = tablePropertiesUI._createTablePropertiesButton();
+            const splitButtonView = new SplitButtonView(locale, baseButton);
+            return createTableTypeDropdown(editor, splitButtonView);
+        });
+    }
+}
+/**
+ * Creates a dropdown for the table type selection.
+ *
+ * @param editor The editor instance.
+ * @param dropdownButton The button view that will be used as the dropdown trigger.
+ * @returns A dropdown view containing table type options.
+ */
+function createTableTypeDropdown(editor, dropdownButton) {
+    const t = editor.t;
+    const locale = editor.locale;
+    const tableTypeCommand = editor.commands.get('tableType');
+    // Wrap the original button in a SplitButtonView.
+    const dropdownView = createDropdown(locale, dropdownButton);
+    const itemsDefinitions = createTableLayoutTypeDropdownItems(editor);
+    // Add table types to the dropdown.
+    addListToDropdown(dropdownView, itemsDefinitions, {
+        ariaLabel: t('Table type options'),
+        role: 'menu'
+    });
+    dropdownButton.tooltip = t('Choose table type');
+    dropdownView.on('execute', evt => {
+        const tableType = evt.source.tableType;
+        if (tableType) {
+            tableTypeCommand.execute(tableType);
+        }
+    });
+    return dropdownView;
+}
+/**
+ * Creates dropdown items for table type selection.
+ *
+ * @param editor The editor instance.
+ * @returns A collection of dropdown items for the table type dropdown.
+ */
+function createTableLayoutTypeDropdownItems(editor) {
+    const t = editor.t;
+    const tableTypeCommand = editor.commands.get('tableType');
+    const itemDefinitions = new Collection();
+    itemDefinitions.add(createTableTypeDropdownItem(tableTypeCommand, 'layout', t('Layout table')));
+    itemDefinitions.add(createTableTypeDropdownItem(tableTypeCommand, 'content', t('Content table')));
+    return itemDefinitions;
+}
+/**
+ * Creates a dropdown item for a specific table type.
+ *
+ * @param tableTypeCommand The table type command.
+ * @param type The table type value ('layout' or 'content').
+ * @param label The localized label for the dropdown item.
+ * @returns The dropdown item definition.
+ */
+function createTableTypeDropdownItem(tableTypeCommand, type, label) {
+    const model = new ViewModel({
+        label,
+        role: 'menuitemradio',
+        withText: true,
+        tableType: type
+    });
+    model.bind('isEnabled').to(tableTypeCommand, 'isEnabled');
+    model.bind('isOn').to(tableTypeCommand, 'value', value => value === type);
+    return {
+        type: 'button',
+        model
+    };
+}