@ckeditor/ckeditor5-table 32.0.0 → 34.1.0

package/src/index.js

@@ -7,6 +7,7 @@
  * @module table
  */
 
+export { default as PlainTableOutput } from './plaintableoutput';
 export { default as Table } from './table';
 export { default as TableEditing } from './tableediting';
 export { default as TableUI } from './tableui';
@@ -25,3 +26,5 @@ export { default as TableMouse } from './tablemouse';
 export { default as TableKeyboard } from './tablekeyboard';
 export { default as TableSelection } from './tableselection';
 export { default as TableUtils } from './tableutils';
+export { default as TableColumnResize } from './tablecolumnresize';
+export { default as TableColumnResizeEditing } from './tablecolumnresize/tablecolumnresizeediting';

package/src/plaintableoutput.js

@@ -0,0 +1,151 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/plaintableoutput
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import Table from './table';
+
+/**
+ * The plain table output feature.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class PlainTableOutput extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'PlainTableOutput';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ Table ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		// Override default table data downcast converter.
+		editor.conversion.for( 'dataDowncast' ).elementToStructure( {
+			model: 'table',
+			view: downcastTableElement,
+			converterPriority: 'high'
+		} );
+
+		// Make sure table <caption> is downcasted into <caption> in the data pipeline when necessary.
+		if ( editor.plugins.has( 'TableCaption' ) ) {
+			editor.conversion.for( 'dataDowncast' ).elementToElement( {
+				model: 'caption',
+				view: ( modelElement, { writer } ) => {
+					if ( modelElement.parent.name === 'table' ) {
+						return writer.createContainerElement( 'caption' );
+					}
+				},
+				converterPriority: 'high'
+			} );
+		}
+
+		// Handle border-style, border-color, border-width and background-color table attributes.
+		if ( editor.plugins.has( 'TableProperties' ) ) {
+			downcastTableBorderAndBackgroundAttributes( editor );
+		}
+	}
+}
+
+// The plain table downcast converter callback.
+//
+// @private
+// @param {module:engine/model/element~Element} Table model element.
+// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi The conversion API object.
+// @returns {module:engine/view/containerelement~ContainerElement} Created element.
+function downcastTableElement( table, { writer } ) {
+	const headingRows = table.getAttribute( 'headingRows' ) || 0;
+
+	// Table head rows slot.
+	const headRowsSlot = writer.createSlot( element =>
+		element.is( 'element', 'tableRow' ) && element.index < headingRows
+	);
+
+	// Table body rows slot.
+	const bodyRowsSlot = writer.createSlot( element =>
+		element.is( 'element', 'tableRow' ) && element.index >= headingRows
+	);
+
+	// Table children slot.
+	const childrenSlot = writer.createSlot( element => !element.is( 'element', 'tableRow' ) );
+
+	// Table <thead> element with all the heading rows.
+	const theadElement = writer.createContainerElement( 'thead', null, headRowsSlot );
+
+	// Table <tbody> element with all the body rows.
+	const tbodyElement = writer.createContainerElement( 'tbody', null, bodyRowsSlot );
+
+	// Table contents element containing <thead> and <tbody> when necessary.
+	const tableContentElements = [];
+
+	if ( headingRows ) {
+		tableContentElements.push( theadElement );
+	}
+
+	if ( headingRows < table.childCount ) {
+		tableContentElements.push( tbodyElement );
+	}
+
+	// Create table structure.
+	//
+	// <table>
+	//    {children-slot-like-caption}
+	//    <thead>
+	//        {table-head-rows-slot}
+	//    </thead>
+	//    <tbody>
+	//        {table-body-rows-slot}
+	//    </tbody>
+	// </table>
+	return writer.createContainerElement( 'table', null, [ childrenSlot, ...tableContentElements ] );
+}
+
+// Register table border and background attributes converters.
+//
+// @private
+// @param {module:core/editor/editor~Editor} editor
+function downcastTableBorderAndBackgroundAttributes( editor ) {
+	const modelAttributes = {
+		'border-width': 'tableBorderWidth',
+		'border-color': 'tableBorderColor',
+		'border-style': 'tableBorderStyle',
+		'background-color': 'tableBackgroundColor'
+	};
+
+	for ( const [ styleName, modelAttribute ] of Object.entries( modelAttributes ) ) {
+		editor.conversion.for( 'dataDowncast' ).add( dispatcher => {
+			return dispatcher.on( `attribute:${ modelAttribute }:table`, ( evt, data, conversionApi ) => {
+				const { item, attributeNewValue } = data;
+				const { mapper, writer } = conversionApi;
+
+				if ( !conversionApi.consumable.consume( item, evt.name ) ) {
+					return;
+				}
+
+				const table = mapper.toViewElement( item );
+
+				if ( attributeNewValue ) {
+					writer.setStyle( styleName, attributeNewValue, table );
+				} else {
+					writer.removeStyle( styleName, table );
+				}
+			}, { priority: 'high' } );
+		} );
+	}
+}

package/src/tablecellproperties/commands/tablecellpropertycommand.js

@@ -8,7 +8,6 @@
  */
 
 import { Command } from 'ckeditor5/src/core';
-import { getSelectionAffectedTableCells } from '../../utils/selection';
 
 /**
  * The table cell attribute command.
@@ -51,7 +50,8 @@ export default class TableCellPropertyCommand extends Command {
 	 */
 	refresh() {
 		const editor = this.editor;
-		const selectedTableCells = getSelectionAffectedTableCells( editor.model.document.selection );
+		const tableUtils = this.editor.plugins.get( 'TableUtils' );
+		const selectedTableCells = tableUtils.getSelectionAffectedTableCells( editor.model.document.selection );
 
 		this.isEnabled = !!selectedTableCells.length;
 		this.value = this._getSingleValue( selectedTableCells );
@@ -70,7 +70,8 @@ export default class TableCellPropertyCommand extends Command {
 	execute( options = {} ) {
 		const { value, batch } = options;
 		const model = this.editor.model;
-		const tableCells = getSelectionAffectedTableCells( model.document.selection );
+		const tableUtils = this.editor.plugins.get( 'TableUtils' );
+		const tableCells = tableUtils.getSelectionAffectedTableCells( model.document.selection );
 		const valueToSet = this._getValueToSet( value );
 
 		model.enqueueChange( batch, writer => {

package/src/tableclipboard.js

@@ -12,7 +12,6 @@ import { Plugin } from 'ckeditor5/src/core';
 import TableSelection from './tableselection';
 import TableWalker from './tablewalker';
 import TableUtils from './tableutils';
-import { getColumnIndexes, getRowIndexes, getSelectionAffectedTableCells, isSelectionRectangular, sortRanges } from './utils/selection';
 import {
 	cropTableToDimensions,
 	getHorizontallyOverlappingCells,
@@ -122,7 +121,7 @@ export default class TableClipboard extends Plugin {
 			return;
 		}
 
-		const selectedTableCells = getSelectionAffectedTableCells( model.document.selection );
+		const selectedTableCells = tableUtils.getSelectionAffectedTableCells( model.document.selection );
 
 		if ( !selectedTableCells.length ) {
 			removeEmptyRowsColumns( pastedTable, tableUtils );
@@ -171,7 +170,7 @@ export default class TableClipboard extends Plugin {
 			if ( this.editor.plugins.get( 'TableSelection' ).isEnabled ) {
 				// Selection ranges must be sorted because the first and last selection ranges are considered
 				// as anchor/focus cell ranges for multi-cell selection.
-				const selectionRanges = sortRanges( cellsToSelect.map( cell => writer.createRangeOn( cell ) ) );
+				const selectionRanges = tableUtils.sortRanges( cellsToSelect.map( cell => writer.createRangeOn( cell ) ) );
 
 				writer.setSelection( selectionRanges );
 			} else {
@@ -311,17 +310,21 @@ export default class TableClipboard extends Plugin {
 
 		return cellToInsert;
 	}
+
+	/**
+	 * Extracts the table for pasting into a table.
+	 *
+	 * @protected
+	 * @param {module:engine/model/documentfragment~DocumentFragment|module:engine/model/item~Item} content The content to insert.
+	 * @param {module:engine/model/model~Model} model The editor model.
+	 * @returns {module:engine/model/element~Element|null}
+	 */
+	getTableIfOnlyTableInContent( content, model ) {
+		return getTableIfOnlyTableInContent( content, model );
+	}
 }
 
-/**
- * Extract table for pasting into table.
- *
- * @private
- * @param {module:engine/model/documentfragment~DocumentFragment|module:engine/model/item~Item} content The content to insert.
- * @param {module:engine/model/model~Model} model The editor model.
- * @returns {module:engine/model/element~Element|null}
- */
-export function getTableIfOnlyTableInContent( content, model ) {
+function getTableIfOnlyTableInContent( content, model ) {
 	if ( !content.is( 'documentFragment' ) && !content.is( 'element' ) ) {
 		return null;
 	}
@@ -381,8 +384,8 @@ export function getTableIfOnlyTableInContent( content, model ) {
 function prepareTableForPasting( selectedTableCells, pastedDimensions, writer, tableUtils ) {
 	const selectedTable = selectedTableCells[ 0 ].findAncestor( 'table' );
 
-	const columnIndexes = getColumnIndexes( selectedTableCells );
-	const rowIndexes = getRowIndexes( selectedTableCells );
+	const columnIndexes = tableUtils.getColumnIndexes( selectedTableCells );
+	const rowIndexes = tableUtils.getRowIndexes( selectedTableCells );
 
 	const selection = {
 		firstColumn: columnIndexes.first,
@@ -403,7 +406,7 @@ function prepareTableForPasting( selectedTableCells, pastedDimensions, writer, t
 
 	// In case of expanding selection we do not reset the selection so in this case we will always try to fix selection
 	// like in the case of a non-rectangular area. This might be fixed by re-setting selected cells array but this shortcut is safe.
-	if ( shouldExpandSelection || !isSelectionRectangular( selectedTableCells, tableUtils ) ) {
+	if ( shouldExpandSelection || !tableUtils.isSelectionRectangular( selectedTableCells ) ) {
 		// For a non-rectangular selection (ie in which some cells sticks out from a virtual selection rectangle) we need to create
 		// a table layout that has a rectangular selection. This will split cells so the selection become rectangular.
 		// Beyond this point we will operate on fixed content table.

package/src/tablecolumnresize/constants.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2022, 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
+ */
+
+/* istanbul ignore file */
+
+/**
+ * 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.js

@@ -0,0 +1,126 @@
+/**
+ * @license Copyright (c) 2003-2022, 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
+ */
+
+/* istanbul ignore file */
+
+import { getNumberOfColumn } 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#_setupPostFixer post-fixer}, depending
+ * on the available table space.
+ *
+ * @param {module:core/editor/editor~Editor} editor The editor instance.
+ * @returns {Function} Conversion helper.
+ */
+export function upcastColgroupElement( editor ) {
+	return dispatcher => dispatcher.on( 'element:colgroup', ( evt, data, conversionApi ) => {
+		const modelTable = data.modelCursor.findAncestor( 'table' );
+
+		if ( !modelTable ) {
+			return;
+		}
+
+		const modelWriter = conversionApi.writer;
+		const viewColgroupElement = data.viewItem;
+		const numberOfColumns = getNumberOfColumn( modelTable, editor );
+
+		const columnWidthsAttribute = [ ...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;
+			} )
+			.join( ',' );
+
+		modelWriter.setAttribute( 'columnWidths', columnWidthsAttribute, modelTable );
+	} );
+}
+
+/**
+ * Returns a helper for converting a model table `columnWidths` attribute to view `<colgroup>` and `<col>` elements.
+ *
+ * @returns {Function} Conversion helper.
+ */
+export function downcastTableColumnWidthsAttribute() {
+	return dispatcher => dispatcher.on( 'attribute:columnWidths:table', ( evt, data, conversionApi ) => {
+		const viewWriter = conversionApi.writer;
+		const modelTable = data.item;
+
+		const viewTable = [ ...conversionApi.mapper.toViewElement( modelTable ).getChildren() ]
+			.find( viewChild => viewChild.is( 'element', 'table' ) );
+
+		if ( data.attributeNewValue ) {
+			if ( data.attributeNewValue !== data.attributeOldValue ) {
+				insertColgroupElement( viewWriter, viewTable, data.attributeNewValue );
+			}
+		} else {
+			removeColgroupElement( viewWriter, 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 width 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' );
+	}
+
+	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' ) );
+
+	if ( !viewColgroupElement ) {
+		return;
+	}
+
+	viewWriter.remove( viewColgroupElement );
+}