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

package/src/tablecaption/tablecaptionediting.js

@@ -1,178 +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/tablecaption/tablecaptionediting
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ModelElement, enableViewPlaceholder } from 'ckeditor5/src/engine.js';
-import { uid } from 'ckeditor5/src/utils.js';
-import { toWidgetEditable } from 'ckeditor5/src/widget.js';
-import { injectTableCaptionPostFixer } from '../converters/table-caption-post-fixer.js';
-import { ToggleTableCaptionCommand } from './toggletablecaptioncommand.js';
-import { getCaptionFromTableModelElement, isTable, matchTableCaptionViewElement } from './utils.js';
-/**
- * The table caption editing plugin.
- */
-export class TableCaptionEditing extends Plugin {
-    /**
-     * A map that keeps saved JSONified table captions and table model elements they are
-     * associated with.
-     *
-     * To learn more about this system, see {@link #_saveCaption}.
-     */
-    _savedCaptionsMap = new WeakMap();
-    /**
-     * A map that keeps generated ids for table captions to reuse them if the same caption is rendered again.
-     */
-    _captionIdsMapping = new WeakMap();
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'TableCaptionEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const schema = editor.model.schema;
-        const view = editor.editing.view;
-        const t = editor.t;
-        const useCaptionElement = editor.config.get('table.tableCaption.useCaptionElement');
-        if (!schema.isRegistered('caption')) {
-            schema.register('caption', {
-                allowIn: 'table',
-                allowContentOf: '$block',
-                isLimit: true
-            });
-        }
-        else {
-            schema.extend('caption', {
-                allowIn: 'table'
-            });
-        }
-        editor.commands.add('toggleTableCaption', new ToggleTableCaptionCommand(this.editor));
-        if (useCaptionElement) {
-            const tableEditing = editor.plugins.get('TableEditing');
-            tableEditing.registerAdditionalSlot({
-                filter: element => element.is('element', 'caption'),
-                positionOffset: 'end'
-            });
-        }
-        // View -> model converter for the data pipeline.
-        editor.conversion.for('upcast').elementToElement({
-            view: matchTableCaptionViewElement,
-            model: 'caption'
-        });
-        // Model -> view converter for the data pipeline.
-        editor.conversion.for('dataDowncast').elementToElement({
-            model: 'caption',
-            view: (modelElement, { writer }) => {
-                if (!isTable(modelElement.parent)) {
-                    return null;
-                }
-                return writer.createContainerElement(useCaptionElement ? 'caption' : 'figcaption');
-            }
-        });
-        // Model -> view converter for the editing pipeline.
-        editor.conversion.for('editingDowncast').elementToElement({
-            model: 'caption',
-            view: (modelElement, { writer }) => {
-                if (!isTable(modelElement.parent)) {
-                    return null;
-                }
-                const captionElement = writer.createEditableElement(useCaptionElement ? 'caption' : 'figcaption');
-                writer.setCustomProperty('tableCaption', true, captionElement);
-                captionElement.placeholder = t('Enter table caption');
-                enableViewPlaceholder({
-                    view,
-                    element: captionElement,
-                    keepOnFocus: true
-                });
-                return toWidgetEditable(captionElement, writer);
-            }
-        });
-        editor.conversion.for('editingDowncast').add(dispatcher => {
-            dispatcher.on('insert:table', (evt, data, { writer, mapper }) => {
-                const modelTable = data.item;
-                const viewFigure = mapper.toViewElement(modelTable);
-                if (!viewFigure) {
-                    return;
-                }
-                const viewTable = Array
-                    .from(viewFigure.getChildren())
-                    .find(child => child.is('element', 'table'));
-                if (!viewTable) {
-                    return;
-                }
-                const modelCaption = getCaptionFromTableModelElement(modelTable);
-                // Remove `aria-labelledby` from the table if there is no caption.
-                if (!modelCaption) {
-                    writer.removeAttribute('aria-labelledby', viewTable);
-                    return;
-                }
-                const viewCaption = mapper.toViewElement(modelCaption);
-                if (!viewCaption) {
-                    return;
-                }
-                // Try reusing the same id for the caption if it was already created for the given model caption.
-                // If it was not created before, generate a new one and save it in the mapping to reuse it in the future if needed.
-                let captionId;
-                if (viewCaption.hasAttribute('id')) {
-                    captionId = viewCaption.getAttribute('id');
-                }
-                else {
-                    captionId = this._captionIdsMapping.get(modelCaption) ?? `ck-editor__caption_${uid()}`;
-                }
-                this._captionIdsMapping.set(modelCaption, captionId);
-                writer.setAttribute('id', captionId, viewCaption);
-                writer.setAttribute('aria-labelledby', captionId, viewTable);
-            }, { priority: 'low' });
-        });
-        injectTableCaptionPostFixer(editor.model);
-    }
-    /**
-     * Returns the saved {@link module:engine/model/element~ModelElement#toJSON JSONified} caption
-     * of a table model element.
-     *
-     * See {@link #_saveCaption}.
-     *
-     * @internal
-     * @param tableModelElement The model element the caption should be returned for.
-     * @returns The model caption element or `null` if there is none.
-     */
-    _getSavedCaption(tableModelElement) {
-        const jsonObject = this._savedCaptionsMap.get(tableModelElement);
-        return jsonObject ? ModelElement.fromJSON(jsonObject) : null;
-    }
-    /**
-     * Saves a {@link module:engine/model/element~ModelElement#toJSON JSONified} caption for
-     * a table element to allow restoring it in the future.
-     *
-     * A caption is saved every time it gets hidden. The
-     * user should be able to restore it on demand.
-     *
-     * **Note**: The caption cannot be stored in the table model element attribute because,
-     * for instance, when the model state propagates to collaborators, the attribute would get
-     * lost (mainly because it does not convert to anything when the caption is hidden) and
-     * the states of collaborators' models would de-synchronize causing numerous issues.
-     *
-     * See {@link #_getSavedCaption}.
-     *
-     * @internal
-     * @param tableModelElement The model element the caption is saved for.
-     * @param caption The caption model element to be saved.
-     */
-    _saveCaption(tableModelElement, caption) {
-        this._savedCaptionsMap.set(tableModelElement, caption.toJSON());
-    }
-}

package/src/tablecaption/tablecaptionui.js

@@ -1,64 +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/tablecaption/tablecaptionui
-*/
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ButtonView } from 'ckeditor5/src/ui.js';
-import { IconCaption } from 'ckeditor5/src/icons.js';
-import { getCaptionFromModelSelection } from './utils.js';
-/**
-  * The table caption UI plugin. It introduces the `'toggleTableCaption'` UI button.
-  */
-export class TableCaptionUI extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'TableCaptionUI';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const editingView = editor.editing.view;
-        const t = editor.t;
-        editor.ui.componentFactory.add('toggleTableCaption', locale => {
-            const command = editor.commands.get('toggleTableCaption');
-            const view = new ButtonView(locale);
-            view.set({
-                icon: IconCaption,
-                tooltip: true,
-                isToggleable: true
-            });
-            view.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
-            view.bind('label').to(command, 'value', value => value ? t('Toggle caption off') : t('Toggle caption on'));
-            this.listenTo(view, 'execute', () => {
-                editor.execute('toggleTableCaption', { focusCaptionOnShow: true });
-                // Scroll to the selection and highlight the caption if the caption showed up.
-                if (command.value) {
-                    const modelCaptionElement = getCaptionFromModelSelection(editor.model.document.selection);
-                    const figcaptionElement = editor.editing.mapper.toViewElement(modelCaptionElement);
-                    if (!figcaptionElement) {
-                        return;
-                    }
-                    editingView.scrollToTheSelection();
-                    editingView.change(writer => {
-                        writer.addClass('table__caption_highlighted', figcaptionElement);
-                    });
-                }
-                editor.editing.view.focus();
-            });
-            return view;
-        });
-    }
-}

package/src/tablecaption/toggletablecaptioncommand.js

@@ -1,105 +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/tablecaption/toggletablecaptioncommand
-*/
-import { Command } from 'ckeditor5/src/core.js';
-import { getCaptionFromTableModelElement } from './utils.js';
-import { getSelectionAffectedTable } from '../utils/common.js';
-/**
- * The toggle table caption command.
- *
- * This command is registered by {@link module:table/tablecaption/tablecaptionediting~TableCaptionEditing} as the
- * `'toggleTableCaption'` editor command.
- *
- * Executing this command:
- *
- * * either adds or removes the table caption of a selected table (depending on whether the caption is present or not),
- * * removes the table caption if the selection is anchored in one.
- *
- * ```ts
- * // Toggle the presence of the caption.
- * editor.execute( 'toggleTableCaption' );
- * ```
- *
- * **Note**: You can move the selection to the caption right away as it shows up upon executing this command by using
- * the `focusCaptionOnShow` option:
- *
- * ```ts
- * editor.execute( 'toggleTableCaption', { focusCaptionOnShow: true } );
- * ```
- */
-export class ToggleTableCaptionCommand extends Command {
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const editor = this.editor;
-        const tableElement = getSelectionAffectedTable(editor.model.document.selection);
-        this.isEnabled = !!tableElement && editor.model.schema.checkChild(tableElement, 'caption');
-        if (!this.isEnabled) {
-            this.value = false;
-        }
-        else {
-            this.value = !!getCaptionFromTableModelElement(tableElement);
-        }
-    }
-    /**
-     * Executes the command.
-     *
-     * ```ts
-     * editor.execute( 'toggleTableCaption' );
-     * ```
-     *
-     * @param options Options for the executed command.
-     * @param options.focusCaptionOnShow When true and the caption shows up, the selection will be moved into it straight away.
-     * @fires execute
-     */
-    execute({ focusCaptionOnShow = false } = {}) {
-        this.editor.model.change(writer => {
-            if (this.value) {
-                this._hideTableCaption(writer);
-            }
-            else {
-                this._showTableCaption(writer, focusCaptionOnShow);
-            }
-        });
-    }
-    /**
-     * Shows the table caption. Also:
-     *
-     * * it attempts to restore the caption content from the `TableCaptionEditing` caption registry,
-     * * it moves the selection to the caption right away, it the `focusCaptionOnShow` option was set.
-     *
-     * @param focusCaptionOnShow Default focus behavior when showing the caption.
-     */
-    _showTableCaption(writer, focusCaptionOnShow) {
-        const model = this.editor.model;
-        const tableElement = getSelectionAffectedTable(model.document.selection);
-        const tableCaptionEditing = this.editor.plugins.get('TableCaptionEditing');
-        const savedCaptionElement = tableCaptionEditing._getSavedCaption(tableElement);
-        // Try restoring the caption from the TableCaptionEditing plugin storage.
-        const newCaptionElement = savedCaptionElement || writer.createElement('caption');
-        model.insertContent(newCaptionElement, tableElement, 'end');
-        if (focusCaptionOnShow) {
-            writer.setSelection(newCaptionElement, 'in');
-        }
-    }
-    /**
-     * Hides the caption of a selected table (or an table caption the selection is anchored to).
-     *
-     * The content of the caption is stored in the `TableCaptionEditing` caption registry to make this
-     * a reversible action.
-     */
-    _hideTableCaption(writer) {
-        const model = this.editor.model;
-        const tableElement = getSelectionAffectedTable(model.document.selection);
-        const tableCaptionEditing = this.editor.plugins.get('TableCaptionEditing');
-        const captionElement = getCaptionFromTableModelElement(tableElement);
-        // Store the caption content so it can be restored quickly if the user changes their mind.
-        tableCaptionEditing._saveCaption(tableElement, captionElement);
-        model.deleteContent(writer.createSelection(captionElement, 'on'));
-    }
-}

package/src/tablecaption/utils.js

@@ -1,61 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { getSelectionAffectedTable } from '../utils/common.js';
-/**
- * Checks if the provided model element is a `table`.
- *
- * @param modelElement Element to check if it is a table.
- * @internal
- */
-export function isTable(modelElement) {
-    return !!modelElement && modelElement.is('element', 'table');
-}
-/**
- * Returns the caption model element from a given table element. Returns `null` if no caption is found.
- *
- * @param tableModelElement Table element in which we will try to find a caption element.
- * @internal
- */
-export function getCaptionFromTableModelElement(tableModelElement) {
-    for (const node of tableModelElement.getChildren()) {
-        if (node.is('element', 'caption')) {
-            return node;
-        }
-    }
-    return null;
-}
-/**
- * Returns the caption model element for a model selection. Returns `null` if the selection has no caption element ancestor.
- *
- * @param selection The selection checked for caption presence.
- * @internal
- */
-export function getCaptionFromModelSelection(selection) {
-    const tableElement = getSelectionAffectedTable(selection);
-    if (!tableElement) {
-        return null;
-    }
-    return getCaptionFromTableModelElement(tableElement);
-}
-/**
- * {@link module:engine/view/matcher~Matcher} pattern. Checks if a given element is a caption.
- *
- * There are two possible forms of the valid caption:
- *  - A `<figcaption>` element inside a `<figure class="table">` element.
- *  - A `<caption>` inside a <table>.
- *
- * @returns Returns the object accepted by {@link module:engine/view/matcher~Matcher} or `null` if the element cannot be matched.
- * @internal
- */
-export function matchTableCaptionViewElement(element) {
-    const parent = element.parent;
-    if (element.name == 'figcaption' && parent && parent.is('element', 'figure') && parent.hasClass('table')) {
-        return { name: true };
-    }
-    if (element.name == 'caption' && parent && parent.is('element', 'table')) {
-        return { name: true };
-    }
-    return null;
-}

package/src/tablecaption.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/tablecaption
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { TableCaptionEditing } from './tablecaption/tablecaptionediting.js';
-import { TableCaptionUI } from './tablecaption/tablecaptionui.js';
-import '../theme/tablecaption.css';
-/**
- * The table caption plugin.
- */
-export class TableCaption extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'TableCaption';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [TableCaptionEditing, TableCaptionUI];
-    }
-}

package/src/tablecellproperties/commands/tablecellbackgroundcolorcommand.js

@@ -1,30 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { TableCellPropertyCommand } from './tablecellpropertycommand.js';
-/**
- * The table cell background color command.
- *
- * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * the `'tableCellBackgroundColor'` editor command.
- *
- * To change the background color of selected cells, execute the command:
- *
- * ```ts
- * editor.execute( 'tableCellBackgroundColor', {
- *   value: '#f00'
- * } );
- * ```
- */
-export class TableCellBackgroundColorCommand extends TableCellPropertyCommand {
-    /**
-     * Creates a new `TableCellBackgroundColorCommand` instance.
-     *
-     * @param editor An editor in which this command will be used.
-     * @param defaultValue The default value of the attribute.
-     */
-    constructor(editor, defaultValue) {
-        super(editor, 'tableCellBackgroundColor', defaultValue);
-    }
-}

package/src/tablecellproperties/commands/tablecellbordercolorcommand.js

@@ -1,44 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { TableCellPropertyCommand } from './tablecellpropertycommand.js';
-import { getSingleValue } from '../../utils/table-properties.js';
-/**
- * The table cell border color command.
- *
- * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * the `'tableCellBorderColor'` editor command.
- *
- * To change the border color of selected cells, execute the command:
- *
- * ```ts
- * editor.execute( 'tableCellBorderColor', {
- *   value: '#f00'
- * } );
- * ```
- */
-export class TableCellBorderColorCommand extends TableCellPropertyCommand {
-    /**
-     * Creates a new `TableCellBorderColorCommand` instance.
-     *
-     * @param editor An editor in which this command will be used.
-     * @param defaultValue The default value of the attribute.
-     */
-    constructor(editor, defaultValue) {
-        super(editor, 'tableCellBorderColor', defaultValue);
-    }
-    /**
-     * @inheritDoc
-     */
-    _getAttribute(tableCell) {
-        if (!tableCell) {
-            return;
-        }
-        const value = getSingleValue(tableCell.getAttribute(this.attributeName));
-        if (value === this._defaultValue) {
-            return;
-        }
-        return value;
-    }
-}

package/src/tablecellproperties/commands/tablecellborderstylecommand.js

@@ -1,44 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { TableCellPropertyCommand } from './tablecellpropertycommand.js';
-import { getSingleValue } from '../../utils/table-properties.js';
-/**
- * The table cell border style command.
- *
- * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * the `'tableCellBorderStyle'` editor command.
- *
- * To change the border style of selected cells, execute the command:
- *
- * ```ts
- * editor.execute( 'tableCellBorderStyle', {
- *   value: 'dashed'
- * } );
- * ```
- */
-export class TableCellBorderStyleCommand extends TableCellPropertyCommand {
-    /**
-     * Creates a new `TableCellBorderStyleCommand` instance.
-     *
-     * @param editor An editor in which this command will be used.
-     * @param defaultValue The default value of the attribute.
-     */
-    constructor(editor, defaultValue) {
-        super(editor, 'tableCellBorderStyle', defaultValue);
-    }
-    /**
-     * @inheritDoc
-     */
-    _getAttribute(tableCell) {
-        if (!tableCell) {
-            return;
-        }
-        const value = getSingleValue(tableCell.getAttribute(this.attributeName));
-        if (value === this._defaultValue) {
-            return;
-        }
-        return value;
-    }
-}

package/src/tablecellproperties/commands/tablecellborderwidthcommand.js

@@ -1,64 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { TableCellPropertyCommand } from './tablecellpropertycommand.js';
-import { addDefaultUnitToNumericValue, getSingleValue } from '../../utils/table-properties.js';
-/**
- * The table cell border width command.
- *
- * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * the `'tableCellBorderWidth'` editor command.
- *
- * To change the border width of selected cells, execute the command:
- *
- * ```ts
- * editor.execute( 'tableCellBorderWidth', {
- *   value: '5px'
- * } );
- * ```
- *
- * **Note**: This command adds the default `'px'` unit to numeric values. Executing:
- *
- * ```ts
- * editor.execute( 'tableCellBorderWidth', {
- *   value: '5'
- * } );
- * ```
- *
- * will set the `borderWidth` attribute to `'5px'` in the model.
- */
-export class TableCellBorderWidthCommand extends TableCellPropertyCommand {
-    /**
-     * Creates a new `TableCellBorderWidthCommand` instance.
-     *
-     * @param editor An editor in which this command will be used.
-     * @param defaultValue The default value of the attribute.
-     */
-    constructor(editor, defaultValue) {
-        super(editor, 'tableCellBorderWidth', defaultValue);
-    }
-    /**
-     * @inheritDoc
-     */
-    _getAttribute(tableCell) {
-        if (!tableCell) {
-            return;
-        }
-        const value = getSingleValue(tableCell.getAttribute(this.attributeName));
-        if (value === this._defaultValue) {
-            return;
-        }
-        return value;
-    }
-    /**
-     * @inheritDoc
-     */
-    _getValueToSet(value) {
-        const newValue = addDefaultUnitToNumericValue(value, 'px');
-        if (newValue === this._defaultValue) {
-            return;
-        }
-        return newValue;
-    }
-}

package/src/tablecellproperties/commands/tablecellheightcommand.js

@@ -1,51 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { TableCellPropertyCommand } from './tablecellpropertycommand.js';
-import { addDefaultUnitToNumericValue } from '../../utils/table-properties.js';
-/**
- * The table cell height command.
- *
- * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * the `'tableCellHeight'` editor command.
- *
- * To change the height of selected cells, execute the command:
- *
- * ```ts
- * editor.execute( 'tableCellHeight', {
- *   value: '50px'
- * } );
- * ```
- *
- * **Note**: This command adds the default `'px'` unit to numeric values. Executing:
- *
- * ```ts
- * editor.execute( 'tableCellHeight', {
- *   value: '50'
- * } );
- * ```
- *
- * will set the `height` attribute to `'50px'` in the model.
- */
-export class TableCellHeightCommand extends TableCellPropertyCommand {
-    /**
-     * Creates a new `TableCellHeightCommand` instance.
-     *
-     * @param editor An editor in which this command will be used.
-     * @param defaultValue The default value of the attribute.
-     */
-    constructor(editor, defaultValue) {
-        super(editor, 'tableCellHeight', defaultValue);
-    }
-    /**
-     * @inheritDoc
-     */
-    _getValueToSet(value) {
-        const newValue = addDefaultUnitToNumericValue(value, 'px');
-        if (newValue === this._defaultValue) {
-            return;
-        }
-        return newValue;
-    }
-}