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

package/src/tableediting.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/tableediting
  */
-
 import { Plugin } from 'ckeditor5/src/core';
-
 import upcastTable, { ensureParagraphInTableCell, skipEmptyTableRow, upcastTableFigure } from './converters/upcasttable';
 import { convertParagraphInTableCell, downcastCell, downcastRow, downcastTable } from './converters/downcast';
-
 import InsertTableCommand from './commands/inserttablecommand';
 import InsertRowCommand from './commands/insertrowcommand';
 import InsertColumnCommand from './commands/insertcolumncommand';
@@ -25,186 +21,171 @@ import MergeCellsCommand from './commands/mergecellscommand';
 import SelectRowCommand from './commands/selectrowcommand';
 import SelectColumnCommand from './commands/selectcolumncommand';
 import TableUtils from '../src/tableutils';
-
 import injectTableLayoutPostFixer from './converters/table-layout-post-fixer';
 import injectTableCellParagraphPostFixer from './converters/table-cell-paragraph-post-fixer';
-
 import tableHeadingsRefreshHandler from './converters/table-headings-refresh-handler';
 import tableCellRefreshHandler from './converters/table-cell-refresh-handler';
-
 import '../theme/tableediting.css';
-
 /**
  * The table editing feature.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class TableEditing extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'TableEditing';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ TableUtils ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const model = editor.model;
-		const schema = model.schema;
-		const conversion = editor.conversion;
-		const tableUtils = editor.plugins.get( TableUtils );
-
-		schema.register( 'table', {
-			inheritAllFrom: '$blockObject',
-			allowAttributes: [ 'headingRows', 'headingColumns' ]
-		} );
-
-		schema.register( 'tableRow', {
-			allowIn: 'table',
-			isLimit: true
-		} );
-
-		schema.register( 'tableCell', {
-			allowContentOf: '$container',
-			allowIn: 'tableRow',
-			allowAttributes: [ 'colspan', 'rowspan' ],
-			isLimit: true,
-			isSelectable: true
-		} );
-
-		// Figure conversion.
-		conversion.for( 'upcast' ).add( upcastTableFigure() );
-
-		// Table conversion.
-		conversion.for( 'upcast' ).add( upcastTable() );
-
-		conversion.for( 'editingDowncast' ).elementToStructure( {
-			model: {
-				name: 'table',
-				attributes: [ 'headingRows' ]
-			},
-			view: downcastTable( tableUtils, { asWidget: true } )
-		} );
-		conversion.for( 'dataDowncast' ).elementToStructure( {
-			model: {
-				name: 'table',
-				attributes: [ 'headingRows' ]
-			},
-			view: downcastTable( tableUtils )
-		} );
-
-		// Table row conversion.
-		conversion.for( 'upcast' ).elementToElement( { model: 'tableRow', view: 'tr' } );
-		conversion.for( 'upcast' ).add( skipEmptyTableRow() );
-
-		conversion.for( 'downcast' ).elementToElement( {
-			model: 'tableRow',
-			view: downcastRow()
-		} );
-
-		// Table cell conversion.
-		conversion.for( 'upcast' ).elementToElement( { model: 'tableCell', view: 'td' } );
-		conversion.for( 'upcast' ).elementToElement( { model: 'tableCell', view: 'th' } );
-		conversion.for( 'upcast' ).add( ensureParagraphInTableCell( 'td' ) );
-		conversion.for( 'upcast' ).add( ensureParagraphInTableCell( 'th' ) );
-
-		conversion.for( 'editingDowncast' ).elementToElement( {
-			model: 'tableCell',
-			view: downcastCell( { asWidget: true } )
-		} );
-		conversion.for( 'dataDowncast' ).elementToElement( {
-			model: 'tableCell',
-			view: downcastCell()
-		} );
-
-		// Duplicates code - needed to properly refresh paragraph inside a table cell.
-		conversion.for( 'editingDowncast' ).elementToElement( {
-			model: 'paragraph',
-			view: convertParagraphInTableCell( { asWidget: true } ),
-			converterPriority: 'high'
-		} );
-		conversion.for( 'dataDowncast' ).elementToElement( {
-			model: 'paragraph',
-			view: convertParagraphInTableCell(),
-			converterPriority: 'high'
-		} );
-
-		// Table attributes conversion.
-		conversion.for( 'downcast' ).attributeToAttribute( { model: 'colspan', view: 'colspan' } );
-		conversion.for( 'upcast' ).attributeToAttribute( {
-			model: { key: 'colspan', value: upcastCellSpan( 'colspan' ) },
-			view: 'colspan'
-		} );
-
-		conversion.for( 'downcast' ).attributeToAttribute( { model: 'rowspan', view: 'rowspan' } );
-		conversion.for( 'upcast' ).attributeToAttribute( {
-			model: { key: 'rowspan', value: upcastCellSpan( 'rowspan' ) },
-			view: 'rowspan'
-		} );
-
-		// Define the config.
-		editor.config.define( 'table.defaultHeadings.rows', 0 );
-		editor.config.define( 'table.defaultHeadings.columns', 0 );
-
-		// Define all the commands.
-		editor.commands.add( 'insertTable', new InsertTableCommand( editor ) );
-		editor.commands.add( 'insertTableRowAbove', new InsertRowCommand( editor, { order: 'above' } ) );
-		editor.commands.add( 'insertTableRowBelow', new InsertRowCommand( editor, { order: 'below' } ) );
-		editor.commands.add( 'insertTableColumnLeft', new InsertColumnCommand( editor, { order: 'left' } ) );
-		editor.commands.add( 'insertTableColumnRight', new InsertColumnCommand( editor, { order: 'right' } ) );
-
-		editor.commands.add( 'removeTableRow', new RemoveRowCommand( editor ) );
-		editor.commands.add( 'removeTableColumn', new RemoveColumnCommand( editor ) );
-
-		editor.commands.add( 'splitTableCellVertically', new SplitCellCommand( editor, { direction: 'vertically' } ) );
-		editor.commands.add( 'splitTableCellHorizontally', new SplitCellCommand( editor, { direction: 'horizontally' } ) );
-
-		editor.commands.add( 'mergeTableCells', new MergeCellsCommand( editor ) );
-
-		editor.commands.add( 'mergeTableCellRight', new MergeCellCommand( editor, { direction: 'right' } ) );
-		editor.commands.add( 'mergeTableCellLeft', new MergeCellCommand( editor, { direction: 'left' } ) );
-		editor.commands.add( 'mergeTableCellDown', new MergeCellCommand( editor, { direction: 'down' } ) );
-		editor.commands.add( 'mergeTableCellUp', new MergeCellCommand( editor, { direction: 'up' } ) );
-
-		editor.commands.add( 'setTableColumnHeader', new SetHeaderColumnCommand( editor ) );
-		editor.commands.add( 'setTableRowHeader', new SetHeaderRowCommand( editor ) );
-
-		editor.commands.add( 'selectTableRow', new SelectRowCommand( editor ) );
-		editor.commands.add( 'selectTableColumn', new SelectColumnCommand( editor ) );
-
-		injectTableLayoutPostFixer( model );
-		injectTableCellParagraphPostFixer( model );
-
-		this.listenTo( model.document, 'change:data', () => {
-			tableHeadingsRefreshHandler( model, editor.editing );
-			tableCellRefreshHandler( model, editor.editing );
-		} );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'TableEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [TableUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        this._additionalSlots = [];
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const model = editor.model;
+        const schema = model.schema;
+        const conversion = editor.conversion;
+        const tableUtils = editor.plugins.get(TableUtils);
+        schema.register('table', {
+            inheritAllFrom: '$blockObject',
+            allowAttributes: ['headingRows', 'headingColumns']
+        });
+        schema.register('tableRow', {
+            allowIn: 'table',
+            isLimit: true
+        });
+        schema.register('tableCell', {
+            allowContentOf: '$container',
+            allowIn: 'tableRow',
+            allowAttributes: ['colspan', 'rowspan'],
+            isLimit: true,
+            isSelectable: true
+        });
+        // Figure conversion.
+        conversion.for('upcast').add(upcastTableFigure());
+        // Table conversion.
+        conversion.for('upcast').add(upcastTable());
+        conversion.for('editingDowncast').elementToStructure({
+            model: {
+                name: 'table',
+                attributes: ['headingRows']
+            },
+            view: downcastTable(tableUtils, {
+                asWidget: true,
+                additionalSlots: this._additionalSlots
+            })
+        });
+        conversion.for('dataDowncast').elementToStructure({
+            model: {
+                name: 'table',
+                attributes: ['headingRows']
+            },
+            view: downcastTable(tableUtils, {
+                additionalSlots: this._additionalSlots
+            })
+        });
+        // Table row conversion.
+        conversion.for('upcast').elementToElement({ model: 'tableRow', view: 'tr' });
+        conversion.for('upcast').add(skipEmptyTableRow());
+        conversion.for('downcast').elementToElement({
+            model: 'tableRow',
+            view: downcastRow()
+        });
+        // Table cell conversion.
+        conversion.for('upcast').elementToElement({ model: 'tableCell', view: 'td' });
+        conversion.for('upcast').elementToElement({ model: 'tableCell', view: 'th' });
+        conversion.for('upcast').add(ensureParagraphInTableCell('td'));
+        conversion.for('upcast').add(ensureParagraphInTableCell('th'));
+        conversion.for('editingDowncast').elementToElement({
+            model: 'tableCell',
+            view: downcastCell({ asWidget: true })
+        });
+        conversion.for('dataDowncast').elementToElement({
+            model: 'tableCell',
+            view: downcastCell()
+        });
+        // Duplicates code - needed to properly refresh paragraph inside a table cell.
+        conversion.for('editingDowncast').elementToElement({
+            model: 'paragraph',
+            view: convertParagraphInTableCell({ asWidget: true }),
+            converterPriority: 'high'
+        });
+        conversion.for('dataDowncast').elementToElement({
+            model: 'paragraph',
+            view: convertParagraphInTableCell(),
+            converterPriority: 'high'
+        });
+        // Table attributes conversion.
+        conversion.for('downcast').attributeToAttribute({ model: 'colspan', view: 'colspan' });
+        conversion.for('upcast').attributeToAttribute({
+            model: { key: 'colspan', value: upcastCellSpan('colspan') },
+            view: 'colspan'
+        });
+        conversion.for('downcast').attributeToAttribute({ model: 'rowspan', view: 'rowspan' });
+        conversion.for('upcast').attributeToAttribute({
+            model: { key: 'rowspan', value: upcastCellSpan('rowspan') },
+            view: 'rowspan'
+        });
+        // Define the config.
+        editor.config.define('table.defaultHeadings.rows', 0);
+        editor.config.define('table.defaultHeadings.columns', 0);
+        // Define all the commands.
+        editor.commands.add('insertTable', new InsertTableCommand(editor));
+        editor.commands.add('insertTableRowAbove', new InsertRowCommand(editor, { order: 'above' }));
+        editor.commands.add('insertTableRowBelow', new InsertRowCommand(editor, { order: 'below' }));
+        editor.commands.add('insertTableColumnLeft', new InsertColumnCommand(editor, { order: 'left' }));
+        editor.commands.add('insertTableColumnRight', new InsertColumnCommand(editor, { order: 'right' }));
+        editor.commands.add('removeTableRow', new RemoveRowCommand(editor));
+        editor.commands.add('removeTableColumn', new RemoveColumnCommand(editor));
+        editor.commands.add('splitTableCellVertically', new SplitCellCommand(editor, { direction: 'vertically' }));
+        editor.commands.add('splitTableCellHorizontally', new SplitCellCommand(editor, { direction: 'horizontally' }));
+        editor.commands.add('mergeTableCells', new MergeCellsCommand(editor));
+        editor.commands.add('mergeTableCellRight', new MergeCellCommand(editor, { direction: 'right' }));
+        editor.commands.add('mergeTableCellLeft', new MergeCellCommand(editor, { direction: 'left' }));
+        editor.commands.add('mergeTableCellDown', new MergeCellCommand(editor, { direction: 'down' }));
+        editor.commands.add('mergeTableCellUp', new MergeCellCommand(editor, { direction: 'up' }));
+        editor.commands.add('setTableColumnHeader', new SetHeaderColumnCommand(editor));
+        editor.commands.add('setTableRowHeader', new SetHeaderRowCommand(editor));
+        editor.commands.add('selectTableRow', new SelectRowCommand(editor));
+        editor.commands.add('selectTableColumn', new SelectColumnCommand(editor));
+        injectTableLayoutPostFixer(model);
+        injectTableCellParagraphPostFixer(model);
+        this.listenTo(model.document, 'change:data', () => {
+            tableHeadingsRefreshHandler(model, editor.editing);
+            tableCellRefreshHandler(model, editor.editing);
+        });
+    }
+    /**
+     * Registers downcast handler for the additional table slot.
+     */
+    registerAdditionalSlot(slotHandler) {
+        this._additionalSlots.push(slotHandler);
+    }
 }
-
-// Returns fixed colspan and rowspan attrbutes values.
-//
-// @private
-// @param {String} type colspan or rowspan.
-// @returns {Function} conversion value function.
-function upcastCellSpan( type ) {
-	return cell => {
-		const span = parseInt( cell.getAttribute( type ) );
-
-		if ( Number.isNaN( span ) || span <= 0 ) {
-			return null;
-		}
-
-		return span;
-	};
+/**
+ * Returns fixed colspan and rowspan attrbutes values.
+ *
+ * @param type colspan or rowspan.
+ * @returns conversion value function.
+ */
+function upcastCellSpan(type) {
+    return (cell) => {
+        const span = parseInt(cell.getAttribute(type));
+        if (Number.isNaN(span) || span <= 0) {
+            return null;
+        }
+        return span;
+    };
 }

package/src/tablekeyboard.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 { Plugin, type PluginDependencies } from 'ckeditor5/src/core';
+import { type ArrowKeyCodeDirection } from 'ckeditor5/src/utils';
+import type { Element } from 'ckeditor5/src/engine';
+/**
+ * This plugin enables keyboard navigation for tables.
+ * It is loaded automatically by the {@link module:table/table~Table} plugin.
+ */
+export default class TableKeyboard extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'TableKeyboard';
+    /**
+     * @inheritDoc
+     */
+    static get requires(): PluginDependencies;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Handles {@link module:engine/view/document~Document#event:tab tab} events for the <kbd>Tab</kbd> key executed
+     * when the table widget is selected.
+     */
+    private _handleTabOnSelectedTable;
+    /**
+     * Handles {@link module:engine/view/document~Document#event:tab tab} events for the <kbd>Tab</kbd> key executed
+     * inside table cells.
+     */
+    private _handleTab;
+    /**
+     * Handles {@link module:engine/view/document~Document#event:keydown keydown} events.
+     */
+    private _onArrowKey;
+    /**
+     * Handles arrow keys to move the selection around the table.
+     *
+     * @param direction The direction of the arrow key.
+     * @param expandSelection If the current selection should be expanded.
+     * @returns Returns `true` if key was handled.
+     */
+    private _handleArrowKeys;
+    /**
+     * Returns `true` if the selection is at the boundary of a table cell according to the navigation direction.
+     *
+     * @param selection The current selection.
+     * @param tableCell The current table cell element.
+     * @param isForward The expected navigation direction.
+     */
+    private _isSelectionAtCellEdge;
+    /**
+     * Moves the selection from the given table cell in the specified direction.
+     *
+     * @param focusCell The table cell that is current multi-cell selection focus.
+     * @param direction Direction in which selection should move.
+     * @param expandSelection If the current selection should be expanded. Default value is false.
+     */
+    protected _navigateFromCellInDirection(focusCell: Element, direction: ArrowKeyCodeDirection, expandSelection?: boolean): void;
+}