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

package/src/commands/setheaderrowcommand.js

@@ -2,16 +2,12 @@
  * @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/commands/setheaderrowcommand
  */
-
 import { Command } from 'ckeditor5/src/core';
-
 import { updateNumericAttribute } from '../utils/common';
 import { getVerticallyOverlappingCells, splitHorizontally } from '../utils/structure';
-
 /**
  * The header row command.
  *
@@ -19,90 +15,65 @@ import { getVerticallyOverlappingCells, splitHorizontally } from '../utils/struc
  *
  * You can make the row containing the selected cell a [header](https://www.w3.org/TR/html50/tabular-data.html#the-th-element) by executing:
  *
- *		editor.execute( 'setTableRowHeader' );
+ * ```ts
+ * editor.execute( 'setTableRowHeader' );
+ * ```
  *
  * **Note:** All preceding rows will also become headers. If the current row is already a header, executing this command
  * will make it a regular row back again (including the following rows).
- *
- * @extends module:core/command~Command
  */
 export default class SetHeaderRowCommand extends Command {
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const tableUtils = this.editor.plugins.get( 'TableUtils' );
-		const model = this.editor.model;
-		const selectedCells = tableUtils.getSelectionAffectedTableCells( model.document.selection );
-		const isInTable = selectedCells.length > 0;
-
-		this.isEnabled = isInTable;
-
-		/**
-		 * Flag indicating whether the command is active. The command is active when the
-		 * {@link module:engine/model/selection~Selection} is in a header row.
-		 *
-		 * @observable
-		 * @readonly
-		 * @member {Boolean} #value
-		 */
-		this.value = isInTable && selectedCells.every( cell => this._isInHeading( cell, cell.parent.parent ) );
-	}
-
-	/**
-	 * Executes the command.
-	 *
-	 * When the selection is in a non-header row, the command will set the `headingRows` table attribute to cover that row.
-	 *
-	 * When the selection is already in a header row, it will set `headingRows` so the heading section will end before that row.
-	 *
-	 * @fires execute
-	 * @param {Object} options
-	 * @param {Boolean} [options.forceValue] If set, the command will set (`true`) or unset (`false`) the header rows according to
-	 * the `forceValue` parameter instead of the current model state.
-	 */
-	execute( options = {} ) {
-		if ( options.forceValue === this.value ) {
-			return;
-		}
-
-		const tableUtils = this.editor.plugins.get( 'TableUtils' );
-		const model = this.editor.model;
-
-		const selectedCells = tableUtils.getSelectionAffectedTableCells( model.document.selection );
-		const table = selectedCells[ 0 ].findAncestor( 'table' );
-
-		const { first, last } = tableUtils.getRowIndexes( selectedCells );
-		const headingRowsToSet = this.value ? first : last + 1;
-		const currentHeadingRows = table.getAttribute( 'headingRows' ) || 0;
-
-		model.change( writer => {
-			if ( headingRowsToSet ) {
-				// Changing heading rows requires to check if any of a heading cell is overlapping vertically the table head.
-				// Any table cell that has a rowspan attribute > 1 will not exceed the table head so we need to fix it in rows below.
-				const startRow = headingRowsToSet > currentHeadingRows ? currentHeadingRows : 0;
-				const overlappingCells = getVerticallyOverlappingCells( table, headingRowsToSet, startRow );
-
-				for ( const { cell } of overlappingCells ) {
-					splitHorizontally( cell, headingRowsToSet, writer );
-				}
-			}
-
-			updateNumericAttribute( 'headingRows', headingRowsToSet, table, writer, 0 );
-		} );
-	}
-
-	/**
-	 * Checks if a table cell is in the heading section.
-	 *
-	 * @param {module:engine/model/element~Element} tableCell
-	 * @param {module:engine/model/element~Element} table
-	 * @returns {Boolean}
-	 * @private
-	 */
-	_isInHeading( tableCell, table ) {
-		const headingRows = parseInt( table.getAttribute( 'headingRows' ) || 0 );
-
-		return !!headingRows && tableCell.parent.index < headingRows;
-	}
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const tableUtils = this.editor.plugins.get('TableUtils');
+        const model = this.editor.model;
+        const selectedCells = tableUtils.getSelectionAffectedTableCells(model.document.selection);
+        const isInTable = selectedCells.length > 0;
+        this.isEnabled = isInTable;
+        this.value = isInTable && selectedCells.every(cell => this._isInHeading(cell, cell.parent.parent));
+    }
+    /**
+     * Executes the command.
+     *
+     * When the selection is in a non-header row, the command will set the `headingRows` table attribute to cover that row.
+     *
+     * When the selection is already in a header row, it will set `headingRows` so the heading section will end before that row.
+     *
+     * @fires execute
+     * @param options.forceValue If set, the command will set (`true`) or unset (`false`) the header rows according to
+     * the `forceValue` parameter instead of the current model state.
+     */
+    execute(options = {}) {
+        if (options.forceValue === this.value) {
+            return;
+        }
+        const tableUtils = this.editor.plugins.get('TableUtils');
+        const model = this.editor.model;
+        const selectedCells = tableUtils.getSelectionAffectedTableCells(model.document.selection);
+        const table = selectedCells[0].findAncestor('table');
+        const { first, last } = tableUtils.getRowIndexes(selectedCells);
+        const headingRowsToSet = this.value ? first : last + 1;
+        const currentHeadingRows = table.getAttribute('headingRows') || 0;
+        model.change(writer => {
+            if (headingRowsToSet) {
+                // Changing heading rows requires to check if any of a heading cell is overlapping vertically the table head.
+                // Any table cell that has a rowspan attribute > 1 will not exceed the table head so we need to fix it in rows below.
+                const startRow = headingRowsToSet > currentHeadingRows ? currentHeadingRows : 0;
+                const overlappingCells = getVerticallyOverlappingCells(table, headingRowsToSet, startRow);
+                for (const { cell } of overlappingCells) {
+                    splitHorizontally(cell, headingRowsToSet, writer);
+                }
+            }
+            updateNumericAttribute('headingRows', headingRowsToSet, table, writer, 0);
+        });
+    }
+    /**
+     * Checks if a table cell is in the heading section.
+     */
+    _isInHeading(tableCell, table) {
+        const headingRows = parseInt(table.getAttribute('headingRows') || '0');
+        return !!headingRows && tableCell.parent.index < headingRows;
+    }
 }

package/src/commands/splitcellcommand.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @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/commands/splitcellcommand
+ */
+import { Command, type Editor } from 'ckeditor5/src/core';
+/**
+ * The split cell command.
+ *
+ * The command is registered by {@link module:table/tableediting~TableEditing} as the `'splitTableCellVertically'`
+ * and `'splitTableCellHorizontally'`  editor commands.
+ *
+ * You can split any cell vertically or horizontally by executing this command. For example, to split the selected table cell vertically:
+ *
+ * ```ts
+ * editor.execute( 'splitTableCellVertically' );
+ * ```
+ */
+export default class SplitCellCommand extends Command {
+    /**
+     * The direction that indicates which cell will be split.
+     */
+    readonly direction: 'horizontally' | 'vertically';
+    /**
+     * Creates a new `SplitCellCommand` instance.
+     *
+     * @param editor The editor on which this command will be used.
+     * @param options.direction Indicates whether the command should split cells `'horizontally'` or `'vertically'`.
+     */
+    constructor(editor: Editor, options?: {
+        direction?: 'horizontally' | 'vertically';
+    });
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * @inheritDoc
+     */
+    execute(): void;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface CommandsMap {
+        splitTableCellVertically: SplitCellCommand;
+        splitTableCellHorizontally: SplitCellCommand;
+    }
+}

package/src/commands/splitcellcommand.js

@@ -2,13 +2,10 @@
  * @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/commands/splitcellcommand
  */
-
 import { Command } from 'ckeditor5/src/core';
-
 /**
  * The split cell command.
  *
@@ -17,52 +14,41 @@ import { Command } from 'ckeditor5/src/core';
  *
  * You can split any cell vertically or horizontally by executing this command. For example, to split the selected table cell vertically:
  *
- *		editor.execute( 'splitTableCellVertically' );
- *
- * @extends module:core/command~Command
+ * ```ts
+ * editor.execute( 'splitTableCellVertically' );
+ * ```
  */
 export default class SplitCellCommand extends Command {
-	/**
-	 * Creates a new `SplitCellCommand` instance.
-	 *
-	 * @param {module:core/editor/editor~Editor} editor The editor on which this command will be used.
-	 * @param {Object} options
-	 * @param {String} options.direction Indicates whether the command should split cells `'horizontally'` or `'vertically'`.
-	 */
-	constructor( editor, options = {} ) {
-		super( editor );
-
-		/**
-		 * The direction that indicates which cell will be split.
-		 *
-		 * @readonly
-		 * @member {String} #direction
-		 */
-		this.direction = options.direction || 'horizontally';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const tableUtils = this.editor.plugins.get( 'TableUtils' );
-		const selectedCells = tableUtils.getSelectionAffectedTableCells( this.editor.model.document.selection );
-
-		this.isEnabled = selectedCells.length === 1;
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	execute() {
-		const tableUtils = this.editor.plugins.get( 'TableUtils' );
-		const tableCell = tableUtils.getSelectionAffectedTableCells( this.editor.model.document.selection )[ 0 ];
-		const isHorizontal = this.direction === 'horizontally';
-
-		if ( isHorizontal ) {
-			tableUtils.splitCellHorizontally( tableCell, 2 );
-		} else {
-			tableUtils.splitCellVertically( tableCell, 2 );
-		}
-	}
+    /**
+     * Creates a new `SplitCellCommand` instance.
+     *
+     * @param editor The editor on which this command will be used.
+     * @param options.direction Indicates whether the command should split cells `'horizontally'` or `'vertically'`.
+     */
+    constructor(editor, options = {}) {
+        super(editor);
+        this.direction = options.direction || 'horizontally';
+    }
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const tableUtils = this.editor.plugins.get('TableUtils');
+        const selectedCells = tableUtils.getSelectionAffectedTableCells(this.editor.model.document.selection);
+        this.isEnabled = selectedCells.length === 1;
+    }
+    /**
+     * @inheritDoc
+     */
+    execute() {
+        const tableUtils = this.editor.plugins.get('TableUtils');
+        const tableCell = tableUtils.getSelectionAffectedTableCells(this.editor.model.document.selection)[0];
+        const isHorizontal = this.direction === 'horizontally';
+        if (isHorizontal) {
+            tableUtils.splitCellHorizontally(tableCell, 2);
+        }
+        else {
+            tableUtils.splitCellVertically(tableCell, 2);
+        }
+    }
 }

package/src/converters/downcast.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @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
+ */
+import type { Element, ElementCreatorFunction } from 'ckeditor5/src/engine';
+import type TableUtils from '../tableutils';
+import type { AdditionalSlot } from '../tableediting';
+/**
+ * Model table element to view table element conversion helper.
+ */
+export declare function downcastTable(tableUtils: TableUtils, options: DowncastTableOptions): ElementCreatorFunction;
+/**
+ * Model table row element to view `<tr>` element conversion helper.
+ *
+ * @returns Element creator.
+ */
+export declare function downcastRow(): ElementCreatorFunction;
+/**
+ * Model table cell element to view `<td>` or `<th>` element conversion helper.
+ *
+ * This conversion helper will create proper `<th>` elements for table cells that are in the heading section (heading row or column)
+ * and `<td>` otherwise.
+ *
+ * @param options.asWidget If set to `true`, the downcast conversion will produce a widget.
+ * @returns Element creator.
+ */
+export declare function downcastCell(options?: {
+    asWidget?: boolean;
+}): ElementCreatorFunction;
+/**
+ * Overrides paragraph inside table cell conversion.
+ *
+ * This converter:
+ * * should be used to override default paragraph conversion.
+ * * It will only convert `<paragraph>` placed directly inside `<tableCell>`.
+ * * For a single paragraph without attributes it returns `<span>` to simulate data table.
+ * * For all other cases it returns `<p>` element.
+ *
+ * @param options.asWidget If set to `true`, the downcast conversion will produce a widget.
+ * @returns Element creator.
+ */
+export declare function convertParagraphInTableCell(options?: {
+    asWidget?: boolean;
+}): ElementCreatorFunction;
+/**
+ * Checks if given model `<paragraph>` is an only child of a parent (`<tableCell>`) and if it has any attribute set.
+ *
+ * The paragraph should be converted in the editing view to:
+ *
+ * * If returned `true` - to a `<span class="ck-table-bogus-paragraph">`
+ * * If returned `false` - to a `<p>`
+ */
+export declare function isSingleParagraphWithoutAttributes(modelElement: Element): boolean;
+export interface DowncastTableOptions {
+    /**
+     * If set to `true`, the downcast conversion will produce a widget.
+     */
+    asWidget?: boolean;
+    /**
+     * Array of additional slot handlers.
+     */
+    additionalSlots: Array<AdditionalSlot>;
+}