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

package/src/tablecolumnresize/constants.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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/tablecolumnresize/constants
+ */
+/**
+ * The minimum column width given as a percentage value. Used in situations when the table is not yet rendered, so it is impossible to
+ * calculate how many percentage of the table width would be {@link ~COLUMN_MIN_WIDTH_IN_PIXELS minimum column width in pixels}.
+ */
+export declare const COLUMN_MIN_WIDTH_AS_PERCENTAGE = 5;
+/**
+ * The minimum column width in pixels when the maximum table width is known.
+ */
+export declare const COLUMN_MIN_WIDTH_IN_PIXELS = 40;
+/**
+ * Determines how many digits after the decimal point are used to store the column width as a percentage value.
+ */
+export declare const COLUMN_WIDTH_PRECISION = 2;

package/src/tablecolumnresize/constants.js

@@ -2,29 +2,19 @@
  * @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/tablecolumnresize/constants
  */
-
 /**
  * The minimum column width given as a percentage value. Used in situations when the table is not yet rendered, so it is impossible to
  * calculate how many percentage of the table width would be {@link ~COLUMN_MIN_WIDTH_IN_PIXELS minimum column width in pixels}.
- *
- * @const {Number}
  */
 export const COLUMN_MIN_WIDTH_AS_PERCENTAGE = 5;
-
 /**
  * The minimum column width in pixels when the maximum table width is known.
- *
- * @const {Number}
  */
 export const COLUMN_MIN_WIDTH_IN_PIXELS = 40;
-
 /**
  * Determines how many digits after the decimal point are used to store the column width as a percentage value.
- *
- * @const {Number}
  */
 export const COLUMN_WIDTH_PRECISION = 2;

package/src/tablecolumnresize/converters.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @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/tablecolumnresize/converters
+ */
+import type { DowncastDispatcher, UpcastDispatcher } from 'ckeditor5/src/engine';
+import type TableUtils from '../tableutils';
+/**
+ * Returns a upcast helper that ensures the number of `<tableColumn>` elements corresponds to the actual number of columns in the table,
+ * because the input data might have too few or too many <col> elements.
+ */
+export declare function upcastColgroupElement(tableUtilsPlugin: TableUtils): (dispatcher: UpcastDispatcher) => void;
+/**
+ * Returns downcast helper for adding `ck-table-resized` class if there is a `<tableColumnGroup>` element inside the table.
+ */
+export declare function downcastTableResizedClass(): (dispatcher: DowncastDispatcher) => void;

package/src/tablecolumnresize/converters.js

@@ -2,128 +2,44 @@
  * @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 { normalizeColumnWidths, updateColumnElements, getColumnGroupElement, getTableColumnElements, getTableColumnsWidths } from './utils';
 /**
- * @module table/tablecolumnresize/converters
+ * Returns a upcast helper that ensures the number of `<tableColumn>` elements corresponds to the actual number of columns in the table,
+ * because the input data might have too few or too many <col> elements.
  */
-
-import { normalizeColumnWidths } from './utils';
-
-/**
- * Returns a helper for converting a view `<colgroup>` and `<col>` elements to the model table `columnWidths` attribute.
- *
- * Only the inline width, provided as a percentage value, in the `<col>` element is taken into account. If there are not enough `<col>`
- * elements matching this condition, the special value `auto` is returned. It indicates that the width of a column will be automatically
- * calculated in the
- * {@link module:table/tablecolumnresize/tablecolumnresizeediting~TableColumnResizeEditing#_registerPostFixer post-fixer}, depending
- * on the available table space.
- *
- * @param {module:core/plugin~Plugin} tableUtilsPlugin The {@link module:table/tableutils~TableUtils} plugin instance.
- * @returns {Function} Conversion helper.
- */
-export function upcastColgroupElement( tableUtilsPlugin ) {
-	return dispatcher => dispatcher.on( 'element:colgroup', ( evt, data, conversionApi ) => {
-		const viewColgroupElement = data.viewItem;
-
-		if ( !conversionApi.consumable.test( viewColgroupElement, { name: true } ) ) {
-			return;
-		}
-
-		conversionApi.consumable.consume( viewColgroupElement, { name: true } );
-
-		const modelTable = data.modelCursor.findAncestor( 'table' );
-		const numberOfColumns = tableUtilsPlugin.getColumns( modelTable );
-
-		let columnWidths = [ ...Array( numberOfColumns ).keys() ]
-			.map( columnIndex => {
-				const viewChild = viewColgroupElement.getChild( columnIndex );
-
-				if ( !viewChild || !viewChild.is( 'element', 'col' ) ) {
-					return 'auto';
-				}
-
-				const viewColWidth = viewChild.getStyle( 'width' );
-
-				if ( !viewColWidth || !viewColWidth.endsWith( '%' ) ) {
-					return 'auto';
-				}
-
-				return viewColWidth;
-			} );
-
-		if ( columnWidths.includes( 'auto' ) ) {
-			columnWidths = normalizeColumnWidths( columnWidths ).map( width => width + '%' );
-		}
-
-		conversionApi.writer.setAttribute( 'columnWidths', columnWidths.join( ',' ), modelTable );
-	} );
+export function upcastColgroupElement(tableUtilsPlugin) {
+    return dispatcher => dispatcher.on('element:colgroup', (evt, data, conversionApi) => {
+        const modelTable = data.modelCursor.findAncestor('table');
+        const tableColumnGroup = getColumnGroupElement(modelTable);
+        if (!tableColumnGroup) {
+            return;
+        }
+        const columnElements = getTableColumnElements(tableColumnGroup);
+        let columnWidths = getTableColumnsWidths(tableColumnGroup);
+        const columnsCount = tableUtilsPlugin.getColumns(modelTable);
+        columnWidths = Array.from({ length: columnsCount }, (_, index) => columnWidths[index] || 'auto');
+        if (columnWidths.length != columnElements.length || columnWidths.includes('auto')) {
+            updateColumnElements(columnElements, tableColumnGroup, normalizeColumnWidths(columnWidths), conversionApi.writer);
+        }
+    }, { priority: 'low' });
 }
-
 /**
- * Returns a helper for converting a model table `columnWidths` attribute to view `<colgroup>` and `<col>` elements.
- *
- * @returns {Function} Conversion helper.
+ * Returns downcast helper for adding `ck-table-resized` class if there is a `<tableColumnGroup>` element inside the table.
  */
-export function downcastTableColumnWidthsAttribute() {
-	return dispatcher => dispatcher.on( 'attribute:columnWidths:table', ( evt, data, conversionApi ) => {
-		const viewWriter = conversionApi.writer;
-		const modelTable = data.item;
-		const viewElement = conversionApi.mapper.toViewElement( modelTable );
-
-		const viewTable = viewElement.is( 'element', 'table' ) ?
-			viewElement :
-			Array.from( viewElement.getChildren() ).find( viewChild => viewChild.is( 'element', 'table' ) );
-
-		if ( data.attributeNewValue ) {
-			// If new value is the same as the old, the operation is not applied (see the `writer.setAttributeOnItem()`).
-			// OTOH the model element has the attribute already applied, so we can't compare the values.
-			// Hence we need to just recreate the <colgroup> element every time.
-			insertColgroupElement( viewWriter, viewTable, data.attributeNewValue );
-			viewWriter.addClass( 'ck-table-resized', viewTable );
-		} else {
-			removeColgroupElement( viewWriter, viewTable );
-			viewWriter.removeClass( 'ck-table-resized', viewTable );
-		}
-	} );
-}
-
-// Inserts the `<colgroup>` with `<col>` elements as the first child in the view table. Each `<col>` element represents a single column
-// and it has the inline width style set, taken from the appropriate slot from the `columnWidths` table attribute.
-//
-// @private
-// @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter View writer instance.
-// @param {module:engine/view/element~Element} viewTable View table.
-// @param {String} columnWidthsAttribute Column widths attribute from model table.
-function insertColgroupElement( viewWriter, viewTable, columnWidthsAttribute ) {
-	const columnWidths = columnWidthsAttribute.split( ',' );
-
-	let viewColgroupElement = [ ...viewTable.getChildren() ].find( viewElement => viewElement.is( 'element', 'colgroup' ) );
-
-	if ( !viewColgroupElement ) {
-		viewColgroupElement = viewWriter.createContainerElement( 'colgroup' );
-	} else {
-		for ( const viewChild of [ ...viewColgroupElement.getChildren() ] ) {
-			viewWriter.remove( viewChild );
-		}
-	}
-
-	for ( const columnIndex of Array( columnWidths.length ).keys() ) {
-		const viewColElement = viewWriter.createEmptyElement( 'col' );
-
-		viewWriter.setStyle( 'width', columnWidths[ columnIndex ], viewColElement );
-		viewWriter.insert( viewWriter.createPositionAt( viewColgroupElement, 'end' ), viewColElement );
-	}
-
-	viewWriter.insert( viewWriter.createPositionAt( viewTable, 'start' ), viewColgroupElement );
-}
-
-// Removes the `<colgroup>` with `<col>` elements from the view table.
-//
-// @private
-// @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter View writer instance.
-// @param {module:engine/view/element~Element} viewTable View table.
-function removeColgroupElement( viewWriter, viewTable ) {
-	const viewColgroupElement = [ ...viewTable.getChildren() ].find( viewElement => viewElement.is( 'element', 'colgroup' ) );
-
-	viewWriter.remove( viewColgroupElement );
+export function downcastTableResizedClass() {
+    return dispatcher => dispatcher.on('insert:table', (evt, data, conversionApi) => {
+        const viewWriter = conversionApi.writer;
+        const modelTable = data.item;
+        const viewElement = conversionApi.mapper.toViewElement(modelTable);
+        const viewTable = viewElement.is('element', 'table') ?
+            viewElement :
+            Array.from(viewElement.getChildren()).find(viewChild => viewChild.is('element', 'table'));
+        const tableColumnGroup = getColumnGroupElement(data.item);
+        if (tableColumnGroup) {
+            viewWriter.addClass('ck-table-resized', viewTable);
+        }
+        else {
+            viewWriter.removeClass('ck-table-resized', viewTable);
+        }
+    }, { priority: 'low' });
 }

package/src/tablecolumnresize/tablecolumnresizeediting.d.ts

@@ -0,0 +1,142 @@
+/**
+ * @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 Editor, type PluginDependencies } from 'ckeditor5/src/core';
+import type { Element } from 'ckeditor5/src/engine';
+/**
+ * The table column resize editing plugin.
+ */
+export default class TableColumnResizeEditing extends Plugin {
+    /**
+     * A flag indicating if the column resizing is in progress.
+     */
+    private _isResizingActive;
+    /**
+     * A flag indicating if the column resizing is allowed. It is not allowed if the editor is in read-only
+     * or comments-only mode or the `TableColumnResize` plugin is disabled.
+     *
+     * @observable
+     * @internal
+     */
+    _isResizingAllowed: boolean;
+    /**
+     * A temporary storage for the required data needed to correctly calculate the widths of the resized columns. This storage is
+     * initialized when column resizing begins, and is purged upon completion.
+     */
+    private _resizingData;
+    /**
+     * DOM emitter.
+     */
+    private _domEmitter;
+    /**
+     * A local reference to the {@link module:table/tableutils~TableUtils} plugin.
+     */
+    private _tableUtilsPlugin;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): PluginDependencies;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'TableColumnResizeEditing';
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Returns a 'tableColumnGroup' element from the 'table'.
+     *
+     * @param element A 'table' or 'tableColumnGroup' element.
+     * @returns A 'tableColumnGroup' element.
+     */
+    getColumnGroupElement(element: Element): Element | undefined;
+    /**
+     * Returns an array of 'tableColumn' elements.
+     *
+     * @param element A 'table' or 'tableColumnGroup' element.
+     * @returns An array of 'tableColumn' elements.
+     */
+    getTableColumnElements(element: Element): Array<Element>;
+    /**
+     * Returns an array of table column widths.
+     *
+     * @param element A 'table' or 'tableColumnGroup' element.
+     * @returns An array of table column widths.
+     */
+    getTableColumnsWidths(element: Element): Array<string>;
+    /**
+     * Registers new attributes for a table model element.
+     */
+    private _extendSchema;
+    /**
+     * Registers table column resize post-fixer.
+     *
+     * It checks if the change from the differ concerns a table-related element or attribute. For detected changes it:
+     *  * Adjusts the `columnWidths` attribute to guarantee that the sum of the widths from all columns is 100%.
+     *  * Checks if the `columnWidths` attribute gets updated accordingly after columns have been added or removed.
+     */
+    private _registerPostFixer;
+    /**
+     * Registers table column resize converters.
+     */
+    private _registerConverters;
+    /**
+     * Registers listeners to handle resizing process.
+     */
+    private _registerResizingListeners;
+    /**
+     * Handles the `mousedown` event on column resizer element:
+     *  * calculates the initial column pixel widths,
+     *  * inserts the `<colgroup>` element if it is not present in the `<table>`,
+     *  * puts the necessary data in the temporary storage,
+     *  * applies the attributes to the `<table>` view element.
+     *
+     * @param eventInfo An object containing information about the fired event.
+     * @param domEventData The data related to the DOM event.
+     */
+    private _onMouseDownHandler;
+    /**
+     * Handles the `mousemove` event.
+     *  * If resizing process is not in progress, it does nothing.
+     *  * If resizing is active but not allowed, it stops the resizing process instantly calling the `mousedown` event handler.
+     *  * Otherwise it dynamically updates the widths of the resized columns.
+     *
+     * @param eventInfo An object containing information about the fired event.
+     * @param mouseEventData The native DOM event.
+     */
+    private _onMouseMoveHandler;
+    /**
+     * Handles the `mouseup` event.
+     *  * If resizing process is not in progress, it does nothing.
+     *  * If resizing is active but not allowed, it cancels the resizing process restoring the original widths.
+     *  * Otherwise it propagates the changes from view to the model by executing the adequate commands.
+     */
+    private _onMouseUpHandler;
+    /**
+     * Retrieves and returns required data needed for the resizing process.
+     *
+     * @param domEventData The data of the `mousedown` event.
+     * @param columnWidths The current widths of the columns.
+     * @returns The data needed for the resizing process.
+     */
+    private _getResizingData;
+    /**
+     * Registers a listener ensuring that each resizable cell have a resizer handle.
+     */
+    private _registerResizerInserter;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [TableColumnResizeEditing.pluginName]: TableColumnResizeEditing;
+    }
+}