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

package/src/tablelayout/tablelayoutediting.js

@@ -1,295 +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/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 class TableLayoutEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'TableLayoutEditing';
-    }
-    /**
-     * @inheritDoc
-     * @internal
-     */
-    static get licenseFeatureCode() {
-        return 'TL';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [TableColumnResize];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isPremiumPlugin() {
-        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(editor, 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.
- *
- * @param editor Editor instance.
- * @returns Conversion helper.
- */
-function upcastLayoutTable(editor, 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'] });
-            // Layout tables have no border, so it's equitable to consume the border="0" attribute.
-            if (editor.config.get('experimentalFlags.upcastTableBorderZeroAttributes') &&
-                viewTable.getAttribute('border') === '0') {
-                conversionApi.consumable.consume(viewTable, { attributes: ['border'] });
-            }
-            // 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.js

@@ -1,196 +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/tablelayoutui
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { IconTableLayout, IconTableProperties } from 'ckeditor5/src/icons.js';
-import { createDropdown, addListToDropdown, MenuBarMenuView, SplitButtonView, DropdownButtonView, UIModel } 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 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;
-        const { ui, plugins } = editor;
-        let tablePropertiesUI;
-        if (plugins.has('TablePropertiesUIExperimental')) {
-            tablePropertiesUI = plugins.get('TablePropertiesUIExperimental');
-        }
-        else if (plugins.has('TablePropertiesUI')) {
-            tablePropertiesUI = plugins.get('TablePropertiesUI');
-        }
-        else {
-            return;
-        }
-        // 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`.
-        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 UIModel({
-        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
-    };
-}

package/src/tablelayout.js

@@ -1,36 +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
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { TableLayoutUI } from './tablelayout/tablelayoutui.js';
-import { TableLayoutEditing } from './tablelayout/tablelayoutediting.js';
-import { TableColumnResize } from './tablecolumnresize.js';
-/**
- * The table plugin.
- *
- * For a detailed overview, check the {@glink features/tables/layout-tables Layout table feature documentation}.
- */
-export class TableLayout extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'TableLayout';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [TableColumnResize, TableLayoutEditing, TableLayoutUI];
-    }
-}

package/src/tablemouse/mouseeventsobserver.js

@@ -1,34 +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/tablemouse/mouseeventsobserver
- */
-import { DomEventObserver } from 'ckeditor5/src/engine.js';
-/**
- * The mouse selection event observer.
- *
- * It registers listeners for the following DOM events:
- *
- * - `'mousemove'`
- * - `'mouseleave'`
- *
- * Note that this observer is disabled by default. To enable this observer, it needs to be added to
- * {@link module:engine/view/view~EditingView} using the {@link module:engine/view/view~EditingView#addObserver} method.
- *
- * The observer is registered by the {@link module:table/tableselection~TableSelection} plugin.
- *
- * @internal
- */
-export class MouseEventsObserver extends DomEventObserver {
-    domEventType = [
-        'mousemove', 'mouseleave'
-    ];
-    /**
-     * @inheritDoc
-     */
-    onDomEvent(domEvent) {
-        this.fire(domEvent.type, domEvent);
-    }
-}