@ckeditor/ckeditor5-table 27.1.0 → 29.2.0

package/src/tableutils.js

@@ -7,6 +7,7 @@
  * @module table/tableutils
  */
 
+import { CKEditorError } from 'ckeditor5/src/utils';
 import { Plugin } from 'ckeditor5/src/core';
 
 import TableWalker from './tablewalker';
@@ -105,11 +106,11 @@ export default class TableUtils extends Plugin {
 		createEmptyRows( writer, table, 0, rows, columns );
 
 		if ( options.headingRows ) {
-			updateNumericAttribute( 'headingRows', options.headingRows, table, writer, 0 );
+			updateNumericAttribute( 'headingRows', Math.min( options.headingRows, rows ), table, writer, 0 );
 		}
 
 		if ( options.headingColumns ) {
-			updateNumericAttribute( 'headingColumns', options.headingColumns, table, writer, 0 );
+			updateNumericAttribute( 'headingColumns', Math.min( options.headingColumns, columns ), table, writer, 0 );
 		}
 
 		return table;
@@ -153,6 +154,19 @@ export default class TableUtils extends Plugin {
 		const rows = this.getRows( table );
 		const columns = this.getColumns( table );
 
+		if ( insertAt > rows ) {
+			/**
+			 * The `options.at` points at a row position that does not exist.
+			 *
+			 * @error tableutils-insertrows-insert-out-of-range
+			 */
+			throw new CKEditorError(
+				'tableutils-insertrows-insert-out-of-range',
+				this,
+				{ options }
+			);
+		}
+
 		model.change( writer => {
 			const headingRows = table.getAttribute( 'headingRows' ) || 0;
 
@@ -261,6 +275,11 @@ export default class TableUtils extends Plugin {
 			// Inserting at the end and at the beginning of a table doesn't require to calculate anything special.
 			if ( insertAt === 0 || tableColumns === insertAt ) {
 				for ( const tableRow of table.getChildren() ) {
+					// Ignore non-row elements inside the table (e.g. caption).
+					if ( !tableRow.is( 'element', 'tableRow' ) ) {
+						continue;
+					}
+
 					createCells( columnsToInsert, writer, writer.createPositionAt( tableRow, insertAt ? 'end' : 0 ) );
 				}
 
@@ -329,9 +348,23 @@ export default class TableUtils extends Plugin {
 		const model = this.editor.model;
 
 		const rowsToRemove = options.rows || 1;
+		const rowCount = this.getRows( table );
 		const first = options.at;
 		const last = first + rowsToRemove - 1;
 
+		if ( last > rowCount - 1 ) {
+			/**
+			 * The `options.at` param must point at existing row and `options.rows` must not exceed the rows in the table.
+			 *
+			 * @error tableutils-removerows-row-index-out-of-range
+			 */
+			throw new CKEditorError(
+				'tableutils-removerows-row-index-out-of-range',
+				this,
+				{ table, options }
+			);
+		}
+
 		model.change( writer => {
 			// Removing rows from the table require that most calculations to be done prior to changing table structure.
 			// Preparations must be done in the same enqueueChange callback to use the current table structure.
@@ -718,6 +751,8 @@ export default class TableUtils extends Plugin {
 	 */
 	getColumns( table ) {
 		// Analyze first row only as all the rows should have the same width.
+		// Using the first row without checking if it's a tableRow because we expect
+		// that table will have only tableRow model elements at the beginning.
 		const row = table.getChild( 0 );
 
 		return [ ...row.getChildren() ].reduce( ( columns, row ) => {
@@ -728,7 +763,7 @@ export default class TableUtils extends Plugin {
 	}
 
 	/**
-	 * Returns the number of rows for a given table.
+	 * Returns the number of rows for a given table. Any other element present in the table model is omitted.
 	 *
 	 *		editor.plugins.get( 'TableUtils' ).getRows( table );
 	 *
@@ -736,8 +771,9 @@ export default class TableUtils extends Plugin {
 	 * @returns {Number}
 	 */
 	getRows( table ) {
-		// Simple row counting, not including rowspan due to #6427.
-		return table.childCount;
+		// Rowspan not included due to #6427.
+		return Array.from( table.getChildren() )
+			.reduce( ( rowCount, child ) => child.is( 'element', 'tableRow' ) ? rowCount + 1 : rowCount, 0 );
 	}
 }
 

package/src/tablewalker.js

@@ -159,6 +159,14 @@ export default class TableWalker {
 		 */
 		this._row = 0;
 
+		/**
+		 * The index of the current row element in the table.
+		 *
+		 * @type {Number}
+		 * @protected
+		 */
+		this._rowIndex = 0;
+
 		/**
 		 * The current column index.
 		 *
@@ -209,13 +217,20 @@ export default class TableWalker {
 	 * @returns {module:table/tablewalker~TableSlot} The next table walker's value.
 	 */
 	next() {
-		const row = this._table.getChild( this._row );
+		const row = this._table.getChild( this._rowIndex );
 
 		// Iterator is done when there's no row (table ended) or the row is after `endRow` limit.
 		if ( !row || this._isOverEndRow() ) {
 			return { done: true };
 		}
 
+		// We step over current element when it is not a tableRow instance.
+		if ( !row.is( 'element', 'tableRow' ) ) {
+			this._rowIndex++;
+
+			return this.next();
+		}
+
 		if ( this._isOverEndColumn() ) {
 			return this._advanceToNextRow();
 		}
@@ -280,6 +295,7 @@ export default class TableWalker {
 	 */
 	_advanceToNextRow() {
 		this._row++;
+		this._rowIndex++;
 		this._column = 0;
 		this._cellIndex = 0;
 		this._nextCellAtColumn = -1;
@@ -465,6 +481,15 @@ class TableSlot {
 		 */
 		this._cellIndex = tableWalker._cellIndex;
 
+		/**
+		 * The index of the current row element in the table.
+		 *
+		 * @readonly
+		 * @member {Number}
+		 * @private
+		 */
+		this._rowIndex = tableWalker._rowIndex;
+
 		/**
 		 * The table element.
 		 *
@@ -505,6 +530,16 @@ class TableSlot {
 		return parseInt( this.cell.getAttribute( 'rowspan' ) || 1 );
 	}
 
+	/**
+	 * The index of the current row element in the table.
+	 *
+	 * @readonly
+	 * @returns {Number}
+	 */
+	get rowIndex() {
+		return this._rowIndex;
+	}
+
 	/**
 	 * Returns the {@link module:engine/model/position~Position} before the table slot.
 	 *

package/src/ui/colorinputview.js

@@ -25,9 +25,11 @@ export default class ColorInputView extends View {
 	 *
 	 * @param {module:utils/locale~Locale} locale The locale instance.
 	 * @param {Object} options The input options.
-	 * @param {module:ui/colorgrid/colorgrid~ColorDefinition} options.colorDefinitions The colors to be displayed
+	 * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} options.colorDefinitions The colors to be displayed
 	 * in the palette inside the input's dropdown.
 	 * @param {Number} options.columns The number of columns in which the colors will be displayed.
+	 * @param {String} [options.defaultColorValue] If specified, the color input view will replace the "Remove color" button with
+	 * the "Restore default" button. Instead of clearing the input field, the default color value will be set.
 	 */
 	constructor( locale, options ) {
 		super( locale );
@@ -96,7 +98,7 @@ export default class ColorInputView extends View {
 		 * some error, it helps screen readers read the error text.
 		 *
 		 * @observable
-		 * @member {Boolean} #ariaDescribedById
+		 * @member {String} #ariaDescribedById
 		 */
 		this.set( 'ariaDescribedById' );
 
@@ -113,7 +115,7 @@ export default class ColorInputView extends View {
 		 * @protected
 		 * @member {module:ui/dropdown/dropdown~DropdownView}
 		 */
-		this._dropdownView = this._createDropdownView( locale );
+		this._dropdownView = this._createDropdownView();
 
 		/**
 		 * An instance of the input allowing the user to type a color value.
@@ -121,7 +123,7 @@ export default class ColorInputView extends View {
 		 * @protected
 		 * @member {module:ui/inputtext/inputtextview~InputTextView}
 		 */
-		this._inputView = this._createInputTextView( locale );
+		this._inputView = this._createInputTextView();
 
 		/**
 		 * The flag that indicates whether the user is still typing.
@@ -173,7 +175,7 @@ export default class ColorInputView extends View {
 		const colorGrid = this._createColorGrid( locale );
 		const dropdown = createDropdown( locale );
 		const colorPreview = new View();
-		const removeColorButton = this._createRemoveColorButton( locale );
+		const removeColorButton = this._createRemoveColorButton();
 
 		colorPreview.setTemplate( {
 			tag: 'span',
@@ -263,13 +265,15 @@ export default class ColorInputView extends View {
 		const locale = this.locale;
 		const t = locale.t;
 		const removeColorButton = new ButtonView( locale );
+		const defaultColor = this.options.defaultColorValue || '';
+		const removeColorButtonLabel = defaultColor ? t( 'Restore default' ) : t( 'Remove color' );
 
 		removeColorButton.class = 'ck-input-color__remove-color';
 		removeColorButton.withText = true;
 		removeColorButton.icon = icons.eraser;
-		removeColorButton.label = t( 'Remove color' );
+		removeColorButton.label = removeColorButtonLabel;
 		removeColorButton.on( 'execute', () => {
-			this.value = '';
+			this.value = defaultColor;
 			this._dropdownView.isOpen = false;
 			this.fire( 'input' );
 		} );

package/src/utils/structure.js

@@ -17,8 +17,8 @@ import { createEmptyTableCell, updateNumericAttribute } from './common';
  *
  *		const croppedTable = cropTableToDimensions( table, {
  *			startRow: 1,
- *			endRow: 1,
- *			startColumn: 3,
+ *			endRow: 3,
+ *			startColumn: 1,
  *			endColumn: 3
  *		}, writer );
  *
@@ -396,8 +396,9 @@ export function removeEmptyColumns( table, tableUtils ) {
  */
 export function removeEmptyRows( table, tableUtils ) {
 	const emptyRows = [];
+	const tableRowCount = tableUtils.getRows( table );
 
-	for ( let rowIndex = 0; rowIndex < table.childCount; rowIndex++ ) {
+	for ( let rowIndex = 0; rowIndex < tableRowCount; rowIndex++ ) {
 		const tableRow = table.getChild( rowIndex );
 
 		if ( tableRow.isEmpty ) {

package/src/utils/table-properties.js

@@ -64,3 +64,44 @@ export function addDefaultUnitToNumericValue( value, defaultUnit ) {
 
 	return `${ numericValue }${ defaultUnit }`;
 }
+
+/**
+ * Returns the normalized configuration.
+ *
+ * @param {Object} config
+ * @param {Object} [options={}]
+ * @param {Boolean} [options.includeAlignmentProperty=false] Whether the "alignment" property should be added.
+ * @param {Boolean} [options.includePaddingProperty=false] Whether the "padding" property should be added.
+ * @param {Boolean} [options.includeVerticalAlignmentProperty=false] Whether the "verticalAlignment" property should be added.
+ * @param {Boolean} [options.includeHorizontalAlignmentProperty=false] Whether the "horizontalAlignment" property should be added.
+ * @param {Boolean} [options.isRightToLeftContent=false] Whether the content is right-to-left.
+ * @returns {Object}
+ */
+export function getNormalizedDefaultProperties( config, options = {} ) {
+	const normalizedConfig = Object.assign( {
+		borderStyle: 'none',
+		borderWidth: '',
+		borderColor: '',
+		backgroundColor: '',
+		width: '',
+		height: ''
+	}, config );
+
+	if ( options.includeAlignmentProperty && !normalizedConfig.alignment ) {
+		normalizedConfig.alignment = 'center';
+	}
+
+	if ( options.includePaddingProperty && !normalizedConfig.padding ) {
+		normalizedConfig.padding = '';
+	}
+
+	if ( options.includeVerticalAlignmentProperty && !normalizedConfig.verticalAlignment ) {
+		normalizedConfig.verticalAlignment = 'middle';
+	}
+
+	if ( options.includeHorizontalAlignmentProperty && !normalizedConfig.horizontalAlignment ) {
+		normalizedConfig.horizontalAlignment = options.isRightToLeftContent ? 'right' : 'left';
+	}
+
+	return normalizedConfig;
+}

package/src/utils/ui/table-properties.js

@@ -113,9 +113,10 @@ export function lineWidthFieldValidator( value ) {
  *
  * @param {module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView|
  * module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView} view
+ * @param {String} defaultStyle The default border.
  * @returns {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>}
  */
-export function getBorderStyleDefinitions( view ) {
+export function getBorderStyleDefinitions( view, defaultStyle ) {
 	const itemDefinitions = new Collection();
 	const styleLabels = getBorderStyleLabels( view.t );
 
@@ -123,14 +124,20 @@ export function getBorderStyleDefinitions( view ) {
 		const definition = {
 			type: 'button',
 			model: new Model( {
-				_borderStyleValue: style === 'none' ? '' : style,
+				_borderStyleValue: style,
 				label: styleLabels[ style ],
 				withText: true
 			} )
 		};
 
 		if ( style === 'none' ) {
-			definition.model.bind( 'isOn' ).to( view, 'borderStyle', value => !value );
+			definition.model.bind( 'isOn' ).to( view, 'borderStyle', value => {
+				if ( defaultStyle === 'none' ) {
+					return !value;
+				}
+
+				return value === style;
+			} );
 		} else {
 			definition.model.bind( 'isOn' ).to( view, 'borderStyle', value => {
 				return value === style;
@@ -159,7 +166,8 @@ export function getBorderStyleDefinitions( view ) {
  * @param {String} propertyName
  * @param {Function} nameToValue A function that maps a button name to a value. By default names are the same as values.
  */
-export function fillToolbar( { view, icons, toolbar, labels, propertyName, nameToValue } ) {
+export function fillToolbar( options ) {
+	const { view, icons, toolbar, labels, propertyName, nameToValue, defaultValue } = options;
 	for ( const name in labels ) {
 		const button = new ButtonView( view.locale );
 
@@ -169,12 +177,23 @@ export function fillToolbar( { view, icons, toolbar, labels, propertyName, nameT
 			tooltip: labels[ name ]
 		} );
 
+		// If specified the `nameToValue()` callback, map the value based on the option's name.
+		const buttonValue = nameToValue ? nameToValue( name ) : name;
+
 		button.bind( 'isOn' ).to( view, propertyName, value => {
-			return value === nameToValue( name );
+			// `value` comes from `view[ propertyName ]`.
+			let valueToCompare = value;
+
+			// If it's empty, and the `defaultValue` is specified, use it instead.
+			if ( value === '' && defaultValue ) {
+				valueToCompare = defaultValue;
+			}
+
+			return buttonValue === valueToCompare;
 		} );
 
 		button.on( 'execute', () => {
-			view[ propertyName ] = nameToValue( name );
+			view[ propertyName ] = buttonValue;
 		} );
 
 		toolbar.items.add( button );
@@ -347,13 +366,16 @@ export const defaultColors = [
  * displayed in the input's dropdown.
  * @param {Number} options.columns The configuration of the number of columns the color palette consists of
  * in the input's dropdown.
+ * @param {String} [options.defaultColorValue] If specified, the color input view will replace the "Remove color" button with
+ * the "Restore default" button. Instead of clearing the input field, the default color value will be set.
  * @returns {Function}
  */
 export function getLabeledColorInputCreator( options ) {
 	return ( labeledFieldView, viewUid, statusUid ) => {
 		const inputView = new ColorInputView( labeledFieldView.locale, {
 			colorDefinitions: colorConfigToColorGridDefinitions( options.colorConfig ),
-			columns: options.columns
+			columns: options.columns,
+			defaultColorValue: options.defaultColorValue
 		} );
 
 		inputView.set( {

package/src/utils/ui/widget.js

@@ -32,10 +32,14 @@ export function getSelectedTableWidget( selection ) {
  * @returns {module:engine/view/element~Element|null}
  */
 export function getTableWidgetAncestor( selection ) {
-	const parentTable = findAncestor( 'table', selection.getFirstPosition() );
+	let parent = selection.getFirstPosition().parent;
 
-	if ( parentTable && isTableWidget( parentTable.parent ) ) {
-		return parentTable.parent;
+	while ( parent ) {
+		if ( parent.is( 'element' ) && isTableWidget( parent ) ) {
+			return parent;
+		}
+
+		parent = parent.parent;
 	}
 
 	return null;
@@ -48,15 +52,3 @@ export function getTableWidgetAncestor( selection ) {
 function isTableWidget( viewElement ) {
 	return !!viewElement.getCustomProperty( 'table' ) && isWidget( viewElement );
 }
-
-function findAncestor( parentName, positionOrElement ) {
-	let parent = positionOrElement.parent;
-
-	while ( parent ) {
-		if ( parent.name === parentName ) {
-			return parent;
-		}
-
-		parent = parent.parent;
-	}
-}

package/theme/table.css

@@ -5,7 +5,9 @@
 
 .ck-content .table {
 	/* Give the table widget some air and center it horizontally */
-	margin: 1em auto;
+	/* The first value should be equal to --ck-spacing-large variable if used in the editor context
+	to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
+	margin: 0.9em auto;
 	display: table;
 
 	& table {
@@ -49,3 +51,17 @@ when content is available outside the ediitor. See https://github.com/ckeditor/c
 .ck-content[dir="ltr"] .table th {
 	text-align: left;
 }
+
+.ck-editor__editable .ck-table-bogus-paragraph {
+	/*
+	 * Use display:inline-block to force Chrome/Safari to limit text mutations to this element.
+	 * See https://github.com/ckeditor/ckeditor5/issues/6062.
+	 */
+	display: inline-block;
+
+	/*
+	 * Inline HTML elements nested in the span should always be dimensioned in relation to the whole cell width.
+	 * See https://github.com/ckeditor/ckeditor5/issues/9117.
+	 */
+	width: 100%;
+}

package/theme/tablecaption.css

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-color-table-caption-background: hsl(0, 0%, 97%);
+	--ck-color-table-caption-text: hsl(0, 0%, 20%);
+	--ck-color-table-caption-highlighted-background: hsl(52deg 100% 50%);
+}
+
+/* Content styles */
+.ck-content .table > figcaption {
+	display: table-caption;
+	caption-side: top;
+	word-break: break-word;
+	text-align: center;
+	color: var(--ck-color-table-caption-text);
+	background-color: var(--ck-color-table-caption-background);
+	padding: .6em;
+	font-size: .75em;
+	outline-offset: -1px;
+}
+
+/* Editing styles */
+.ck.ck-editor__editable .table > figcaption {
+	&.table__caption_highlighted {
+		animation: ck-table-caption-highlight .6s ease-out;
+	}
+
+	&.ck-placeholder::before {
+		padding-left: inherit;
+		padding-right: inherit;
+
+		/*
+		 * Make sure the table caption placeholder doesn't overflow the placeholder area.
+		 * See https://github.com/ckeditor/ckeditor5/issues/9162.
+		 */
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+@keyframes ck-table-caption-highlight {
+	0% {
+		background-color: var(--ck-color-table-caption-highlighted-background);
+	}
+
+	100% {
+		background-color: var(--ck-color-table-caption-background);
+	}
+}