@ckeditor/ckeditor5-table 36.0.1 → 37.0.0-alpha.1

package/src/tablecaption/tablecaptionediting.js

@@ -2,152 +2,121 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module table/tablecaption/tablecaptionediting
  */
-
 import { Plugin } from 'ckeditor5/src/core';
 import { Element, enablePlaceholder } from 'ckeditor5/src/engine';
 import { toWidgetEditable } from 'ckeditor5/src/widget';
-
 import injectTableCaptionPostFixer from '../converters/table-caption-post-fixer';
 import ToggleTableCaptionCommand from './toggletablecaptioncommand';
 import { isTable, matchTableCaptionViewElement } from './utils';
-
 /**
  * The table caption editing plugin.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class TableCaptionEditing extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'TableCaptionEditing';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	constructor( editor ) {
-		super( editor );
-
-		/**
-		 * 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}.
-		 *
-		 * @member {WeakMap.<module:engine/model/element~Element,Object>}
-		 */
-		this._savedCaptionsMap = new WeakMap();
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const schema = editor.model.schema;
-		const view = editor.editing.view;
-		const t = editor.t;
-
-		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 ) );
-
-		// 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( '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 figcaptionElement = writer.createEditableElement( 'figcaption' );
-				writer.setCustomProperty( 'tableCaption', true, figcaptionElement );
-
-				enablePlaceholder( {
-					view,
-					element: figcaptionElement,
-					text: t( 'Enter table caption' ),
-					keepOnFocus: true
-				} );
-
-				return toWidgetEditable( figcaptionElement, writer );
-			}
-		} );
-
-		injectTableCaptionPostFixer( editor.model );
-	}
-
-	/**
-	 * Returns the saved {@link module:engine/model/element~Element#toJSON JSONified} caption
-	 * of a table model element.
-	 *
-	 * See {@link #_saveCaption}.
-	 *
-	 * @protected
-	 * @param {module:engine/model/element~Element} tableModelElement The model element the
-	 * caption should be returned for.
-	 * @returns {module:engine/model/element~Element|null} The model caption element or `null` if there is none.
-	 */
-	_getSavedCaption( tableModelElement ) {
-		const jsonObject = this._savedCaptionsMap.get( tableModelElement );
-
-		return jsonObject ? Element.fromJSON( jsonObject ) : null;
-	}
-
-	/**
-	 * Saves a {@link module:engine/model/element~Element#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}.
-	 *
-	 * @protected
-	 * @param {module:engine/model/element~Element} tableModelElement The model element the
-	 * caption is saved for.
-	 * @param {module:engine/model/element~Element} caption The caption model element to be saved.
-	 */
-	_saveCaption( tableModelElement, caption ) {
-		this._savedCaptionsMap.set( tableModelElement, caption.toJSON() );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'TableCaptionEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        this._savedCaptionsMap = new WeakMap();
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const schema = editor.model.schema;
+        const view = editor.editing.view;
+        const t = editor.t;
+        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));
+        // 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('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 figcaptionElement = writer.createEditableElement('figcaption');
+                writer.setCustomProperty('tableCaption', true, figcaptionElement);
+                enablePlaceholder({
+                    view,
+                    element: figcaptionElement,
+                    text: t('Enter table caption'),
+                    keepOnFocus: true
+                });
+                return toWidgetEditable(figcaptionElement, writer);
+            }
+        });
+        injectTableCaptionPostFixer(editor.model);
+    }
+    /**
+     * Returns the saved {@link module:engine/model/element~Element#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 ? Element.fromJSON(jsonObject) : null;
+    }
+    /**
+     * Saves a {@link module:engine/model/element~Element#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.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+* @module table/tablecaption/tablecaptionui
+*/
+import { Plugin } from 'ckeditor5/src/core';
+/**
+  * The table caption UI plugin. It introduces the `'toggleTableCaption'` UI button.
+  */
+export default class TableCaptionUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'TableCaptionUI';
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+}

package/src/tablecaption/tablecaptionui.js

@@ -2,72 +2,56 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
 * @module table/tablecaption/tablecaptionui
 */
-
 import { Plugin, icons } from 'ckeditor5/src/core';
 import { ButtonView } from 'ckeditor5/src/ui';
-
 import { getCaptionFromModelSelection } from './utils';
-
 /**
   * The table caption UI plugin. It introduces the `'toggleTableCaption'` UI button.
-  *
-  * @extends module:core/plugin~Plugin
   */
 export default class TableCaptionUI extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'TableCaptionUI';
-	}
-
-	/**
-	 * @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: icons.caption,
-				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;
-		} );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'TableCaptionUI';
+    }
+    /**
+     * @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: icons.caption,
+                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.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+* @module table/tablecaption/toggletablecaptioncommand
+*/
+import { Command } from 'ckeditor5/src/core';
+/**
+ * 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 default class ToggleTableCaptionCommand extends Command {
+    value: boolean;
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * 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 }?: {
+        focusCaptionOnShow?: boolean;
+    }): void;
+    /**
+     * 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.
+     */
+    private _showTableCaption;
+    /**
+     * 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.
+     */
+    private _hideTableCaption;
+}

package/src/tablecaption/toggletablecaptioncommand.js

@@ -2,15 +2,11 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
 * @module table/tablecaption/toggletablecaptioncommand
 */
-
 import { Command } from 'ckeditor5/src/core';
-
 import { getCaptionFromTableModelElement, getSelectionAffectedTable } from './utils';
-
 /**
  * The toggle table caption command.
  *
@@ -22,98 +18,87 @@ import { getCaptionFromTableModelElement, getSelectionAffectedTable } from './ut
  * * 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.
  *
- *		// Toggle the presence of the caption.
- *		editor.execute( 'toggleTableCaption' );
+ * ```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:
  *
- *		editor.execute( 'toggleTableCaption', { focusCaptionOnShow: true } );
- *
- * @extends module:core/command~Command
+ * ```ts
+ * editor.execute( 'toggleTableCaption', { focusCaptionOnShow: true } );
+ * ```
  */
 export default class ToggleTableCaptionCommand extends Command {
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const editor = this.editor;
-		const tableElement = getSelectionAffectedTable( editor.model.document.selection );
-
-		this.isEnabled = !!tableElement;
-
-		if ( !this.isEnabled ) {
-			this.value = false;
-		} else {
-			this.value = !!getCaptionFromTableModelElement( tableElement );
-		}
-	}
-
-	/**
-	 * Executes the command.
-	 *
-	 *		editor.execute( 'toggleTableCaption' );
-	 *
-	 * @param {Object} [options] Options for the executed command.
-	 * @param {String} [options.focusCaptionOnShow] When true and the caption shows up, the selection will be moved into it straight away.
-	 * @fires execute
-	 */
-	execute( options = {} ) {
-		const { focusCaptionOnShow } = options;
-
-		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.
-	 *
-	 * @private
-	 * @param {module:engine/model/writer~Writer} writer
-	 * @param {Boolean} 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.
-	 *
-	 * @private
-	 * @param {module:engine/model/writer~Writer} writer
-	 */
-	_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' ) );
-	}
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const editor = this.editor;
+        const tableElement = getSelectionAffectedTable(editor.model.document.selection);
+        this.isEnabled = !!tableElement;
+        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'));
+    }
 }