@ckeditor/ckeditor5-table 28.0.0 → 30.0.0

package/package.json

@@ -1,39 +1,40 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "28.0.0",
+  "version": "30.0.0",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
     "ckeditor5",
     "ckeditor 5",
     "ckeditor5-feature",
-    "ckeditor5-plugin"
+    "ckeditor5-plugin",
+    "ckeditor5-dll"
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^28.0.0",
+    "ckeditor5": "^30.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^28.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^28.0.0",
-    "@ckeditor/ckeditor5-clipboard": "^28.0.0",
-    "@ckeditor/ckeditor5-core": "^28.0.0",
-    "@ckeditor/ckeditor5-dev-utils": "^25.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^28.0.0",
-    "@ckeditor/ckeditor5-engine": "^28.0.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^28.0.0",
-    "@ckeditor/ckeditor5-image": "^28.0.0",
-    "@ckeditor/ckeditor5-indent": "^28.0.0",
-    "@ckeditor/ckeditor5-list": "^28.0.0",
-    "@ckeditor/ckeditor5-media-embed": "^28.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^28.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^28.0.0",
-    "@ckeditor/ckeditor5-typing": "^28.0.0",
-    "@ckeditor/ckeditor5-ui": "^28.0.0",
-    "@ckeditor/ckeditor5-undo": "^28.0.0",
-    "@ckeditor/ckeditor5-utils": "^28.0.0",
-    "@ckeditor/ckeditor5-widget": "^28.0.0",
+    "@ckeditor/ckeditor5-alignment": "^30.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^30.0.0",
+    "@ckeditor/ckeditor5-clipboard": "^30.0.0",
+    "@ckeditor/ckeditor5-core": "^30.0.0",
+    "@ckeditor/ckeditor5-dev-utils": "^25.4.0",
+    "@ckeditor/ckeditor5-editor-classic": "^30.0.0",
+    "@ckeditor/ckeditor5-engine": "^30.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^30.0.0",
+    "@ckeditor/ckeditor5-image": "^30.0.0",
+    "@ckeditor/ckeditor5-indent": "^30.0.0",
+    "@ckeditor/ckeditor5-list": "^30.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^30.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^30.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^30.0.0",
+    "@ckeditor/ckeditor5-typing": "^30.0.0",
+    "@ckeditor/ckeditor5-ui": "^30.0.0",
+    "@ckeditor/ckeditor5-undo": "^30.0.0",
+    "@ckeditor/ckeditor5-utils": "^30.0.0",
+    "@ckeditor/ckeditor5-widget": "^30.0.0",
     "json-diff": "^0.5.4",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
@@ -55,7 +56,8 @@
     "lang",
     "src",
     "theme",
-    "build"
+    "build",
+    "ckeditor5-metadata.json"
   ],
   "scripts": {
     "dll:build": "webpack"

package/src/commands/inserttablecommand.js

@@ -8,7 +8,7 @@
  */
 
 import { Command } from 'ckeditor5/src/core';
-import { findOptimalInsertionPosition, checkSelectionOnObject } from 'ckeditor5/src/widget';
+import { findOptimalInsertionRange } from 'ckeditor5/src/widget';
 
 /**
  * The insert table command.
@@ -30,8 +30,7 @@ export default class InsertTableCommand extends Command {
 		const selection = model.document.selection;
 		const schema = model.schema;
 
-		this.isEnabled = isAllowedInParent( selection, schema ) &&
-			!checkSelectionOnObject( selection, schema );
+		this.isEnabled = isAllowedInParent( selection, schema );
 	}
 
 	/**
@@ -42,21 +41,37 @@ export default class InsertTableCommand extends Command {
 	 * @param {Object} options
 	 * @param {Number} [options.rows=2] The number of rows to create in the inserted table.
 	 * @param {Number} [options.columns=2] The number of columns to create in the inserted table.
-	 * @param {Number} [options.headingRows=0] The number of heading rows.
-	 * @param {Number} [options.headingColumns=0] The number of heading columns.
+	 * @param {Number} [options.headingRows] The number of heading rows.
+	 * If not provided it will default to {@link module:table/table~TableConfig#defaultHeadings `config.table.defaultHeadings.rows`}
+	 * table config.
+	 * @param {Number} [options.headingColumns] The number of heading columns.
+	 * If not provided it will default to {@link module:table/table~TableConfig#defaultHeadings `config.table.defaultHeadings.columns`}
+	 * table config.
 	 * @fires execute
 	 */
 	execute( options = {} ) {
 		const model = this.editor.model;
 		const selection = model.document.selection;
 		const tableUtils = this.editor.plugins.get( 'TableUtils' );
+		const config = this.editor.config.get( 'table' );
 
-		const insertPosition = findOptimalInsertionPosition( selection, model );
+		const insertionRange = findOptimalInsertionRange( selection, model );
+
+		const defaultRows = config.defaultHeadings.rows;
+		const defaultColumns = config.defaultHeadings.columns;
+
+		if ( options.headingRows === undefined && defaultRows ) {
+			options.headingRows = defaultRows;
+		}
+
+		if ( options.headingColumns === undefined && defaultColumns ) {
+			options.headingColumns = defaultColumns;
+		}
 
 		model.change( writer => {
 			const table = tableUtils.createTable( writer, options );
 
-			model.insertContent( table, insertPosition );
+			model.insertContent( table, insertionRange );
 
 			writer.setSelection( writer.createPositionAt( table.getNodeByPath( [ 0, 0, 0 ] ), 0 ) );
 		} );

package/src/converters/downcast.js

@@ -8,8 +8,7 @@
  */
 
 import TableWalker from './../tablewalker';
-import { setHighlightHandling, toWidget, toWidgetEditable } from 'ckeditor5/src/widget';
-import { toArray } from 'ckeditor5/src/utils';
+import { toWidget, toWidgetEditable } from 'ckeditor5/src/widget';
 
 /**
  * Model table element to view table element conversion helper.
@@ -258,9 +257,7 @@ export function convertParagraphInTableCell( modelElement, conversionApi ) {
 	}
 
 	if ( isSingleParagraphWithoutAttributes( modelElement ) ) {
-		// Use display:inline-block to force Chrome/Safari to limit text mutations to this element.
-		// See #6062.
-		return writer.createContainerElement( 'span', { style: 'display:inline-block' } );
+		return writer.createContainerElement( 'span', { class: 'ck-table-bogus-paragraph' } );
 	} else {
 		return writer.createContainerElement( 'p' );
 	}
@@ -271,7 +268,7 @@ export function convertParagraphInTableCell( modelElement, conversionApi ) {
  *
  * The paragraph should be converted in the editing view to:
  *
- * * If returned `true` - to a `<span style="display:inline-block">`
+ * * If returned `true` - to a `<span class="ck-table-bogus-paragraph">`
  * * If returned `false` - to a `<p>`
  *
  * @param {module:engine/model/element~Element} modelElement
@@ -313,13 +310,6 @@ function renameViewTableCell( tableCell, desiredCellElementName, conversionApi )
 	const editable = viewWriter.createEditableElement( desiredCellElementName, viewCell.getAttributes() );
 	const renamedCell = toWidgetEditable( editable, viewWriter );
 
-	setHighlightHandling(
-		renamedCell,
-		viewWriter,
-		( element, descriptor, writer ) => writer.addClass( toArray( descriptor.classes ), element ),
-		( element, descriptor, writer ) => writer.removeClass( toArray( descriptor.classes ), element )
-	);
-
 	viewWriter.insert( viewWriter.createPositionAfter( viewCell ), renamedCell );
 	viewWriter.move( viewWriter.createRangeIn( viewCell ), viewWriter.createPositionAt( renamedCell, 0 ) );
 	viewWriter.remove( viewWriter.createRangeOn( viewCell ) );
@@ -361,15 +351,6 @@ function createViewTableCellElement( tableSlot, tableAttributes, insertPosition,
 		toWidgetEditable( conversionApi.writer.createEditableElement( cellElementName ), conversionApi.writer ) :
 		conversionApi.writer.createContainerElement( cellElementName );
 
-	if ( asWidget ) {
-		setHighlightHandling(
-			cellElement,
-			conversionApi.writer,
-			( element, descriptor, writer ) => writer.addClass( toArray( descriptor.classes ), element ),
-			( element, descriptor, writer ) => writer.removeClass( toArray( descriptor.classes ), element )
-		);
-	}
-
 	const tableCell = tableSlot.cell;
 
 	const firstChild = tableCell.getChild( 0 );

package/src/converters/table-heading-rows-refresh-post-fixer.js

@@ -29,14 +29,31 @@ function tableHeadingRowsRefreshPostFixer( model ) {
 	const tablesToRefresh = new Set();
 
 	for ( const change of differ.getChanges() ) {
-		if ( change.type != 'attribute' ) {
-			continue;
-		}
+		if ( change.type === 'attribute' ) {
+			const element = change.range.start.nodeAfter;
+
+			if ( element && element.is( 'element', 'table' ) && change.attributeKey === 'headingRows' ) {
+				tablesToRefresh.add( element );
+			}
+		} else {
+			/* istanbul ignore else */
+			if ( change.type === 'insert' || change.type === 'remove' ) {
+				if ( change.name === 'tableRow' ) {
+					const table = change.position.findAncestor( 'table' );
+					const headingRows = table.getAttribute( 'headingRows' ) || 0;
 
-		const element = change.range.start.nodeAfter;
+					if ( change.position.offset < headingRows ) {
+						tablesToRefresh.add( table );
+					}
+				} else if ( change.name === 'tableCell' ) {
+					const table = change.position.findAncestor( 'table' );
+					const headingColumns = table.getAttribute( 'headingColumns' ) || 0;
 
-		if ( element && element.is( 'element', 'table' ) && change.attributeKey == 'headingRows' ) {
-			tablesToRefresh.add( element );
+					if ( change.position.offset < headingColumns ) {
+						tablesToRefresh.add( table );
+					}
+				}
+			}
 		}
 	}
 

package/src/converters/upcasttable.js

@@ -48,6 +48,8 @@ export function upcastTableFigure() {
 				return;
 			}
 
+			conversionApi.consumable.consume( data.viewItem, { name: true, classes: 'table' } );
+
 			conversionApi.convertChildren( data.viewItem, conversionApi.writer.createPositionAt( modelTable, 'end' ) );
 			conversionApi.updateConversionResult( modelTable, data );
 		} );

package/src/table.js

@@ -74,6 +74,23 @@ export default class Table extends Plugin {
  * @member {module:table/table~TableConfig} module:core/editor/editorconfig~EditorConfig#table
  */
 
+/**
+ * Number of rows and columns to render by default as table heading when inserting new tables.
+ *
+ * You can configure it like this:
+ *
+ *		const tableConfig = {
+ *			defaultHeadings: {
+ *				rows: 1,
+ *				columns: 1
+ *			}
+ *		};
+ *
+ * Both rows and columns properties are optional defaulting to 0 (no heading).
+ *
+ * @member {Object} module:table/table~TableConfig#defaultHeadings
+ */
+
 /**
  * An array of color definitions (either strings or objects).
  *

package/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -799,7 +799,6 @@ export default class TableCellPropertiesView extends View {
 			label: t( 'Cancel' ),
 			icon: icons.cancel,
 			class: 'ck-button-cancel',
-			type: 'cancel',
 			withText: true
 		} );
 

package/src/tableediting.js

@@ -114,12 +114,30 @@ export default class TableEditing extends Plugin {
 		} );
 
 		// Table attributes conversion.
-		conversion.attributeToAttribute( { model: 'colspan', view: 'colspan' } );
-		conversion.attributeToAttribute( { model: 'rowspan', view: 'rowspan' } );
+		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'
+		} );
 
 		// Table heading columns conversion (a change of heading rows requires a reconversion of the whole table).
 		conversion.for( 'editingDowncast' ).add( downcastTableHeadingColumnsChange() );
 
+		// Manually adjust model position mappings in a special case, when a table cell contains a paragraph, which is bound
+		// to its parent (to the table cell). This custom model-to-view position mapping is necessary in data pipeline only,
+		// because only during this conversion a paragraph can be bound to its parent.
+		editor.data.mapper.on( 'modelToViewPosition', mapTableCellModelPositionToView() );
+
+		// 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' } ) );
@@ -159,3 +177,54 @@ export default class TableEditing extends Plugin {
 		return [ TableUtils ];
 	}
 }
+
+// Creates a mapper callback to adjust model position mappings in a table cell containing a paragraph, which is bound to its parent
+// (to the table cell). Only positions after this paragraph have to be adjusted, because after binding this paragraph to the table cell,
+// elements located after this paragraph would point either to a non-existent offset inside `tableCell` (if paragraph is empty), or after
+// the first character of the paragraph's text. See https://github.com/ckeditor/ckeditor5/issues/10116.
+//
+// <tableCell><paragraph></paragraph>^</tableCell> -> <td>^&nbsp;</td>
+//
+// <tableCell><paragraph>foobar</paragraph>^</tableCell> -> <td>foobar^</td>
+//
+// @returns {Function}
+function mapTableCellModelPositionToView() {
+	return ( evt, data ) => {
+		const modelParent = data.modelPosition.parent;
+		const modelNodeBefore = data.modelPosition.nodeBefore;
+
+		if ( !modelParent.is( 'element', 'tableCell' ) ) {
+			return;
+		}
+
+		if ( !modelNodeBefore || !modelNodeBefore.is( 'element', 'paragraph' ) ) {
+			return;
+		}
+
+		const viewNodeBefore = data.mapper.toViewElement( modelNodeBefore );
+		const viewParent = data.mapper.toViewElement( modelParent );
+
+		if ( viewNodeBefore === viewParent ) {
+			// Since the paragraph has already been bound to its parent, update the current position in the model with paragraph's
+			// max offset, so it points to the place which should normally (in all other cases) be the end position of this paragraph.
+			data.viewPosition = data.mapper.findPositionIn( viewParent, modelNodeBefore.maxOffset );
+		}
+	};
+}
+
+// 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;
+	};
+}

package/src/tablekeyboard.js

@@ -218,10 +218,25 @@ export default class TableKeyboard extends Plugin {
 			return false;
 		}
 
-		// Navigation is in the opposite direction than the selection direction so this is shrinking of the selection.
-		// Selection for sure will not approach cell edge.
-		if ( expandSelection && !selection.isCollapsed && selection.isBackward == isForward ) {
-			return false;
+		// When the selection is not collapsed.
+		if ( !selection.isCollapsed ) {
+			if ( expandSelection ) {
+				// Navigation is in the opposite direction than the selection direction so this is shrinking of the selection.
+				// Selection for sure will not approach cell edge.
+				//
+				// With a special case when all cell content is selected - then selection should expand to the other cell.
+				// Note: When the entire cell gets selected using CTRL+A, the selection is always forward.
+				if ( selection.isBackward == isForward && !selection.containsEntireContent( tableCell ) ) {
+					return false;
+				}
+			} else {
+				const selectedElement = selection.getSelectedElement();
+
+				// It will collapse for non-object selected so it's not going to move to other cell.
+				if ( !selectedElement || !model.schema.isObject( selectedElement ) ) {
+					return false;
+				}
+			}
 		}
 
 		// Let's check if the selection is at the beginning/end of the cell.

package/src/tableproperties/ui/tablepropertiesview.js

@@ -690,7 +690,6 @@ export default class TablePropertiesView extends View {
 			label: t( 'Cancel' ),
 			icon: icons.cancel,
 			class: 'ck-button-cancel',
-			type: 'cancel',
 			withText: true
 		} );
 

package/src/tableutils.js

@@ -106,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;

package/src/ui/colorinputview.js

@@ -25,7 +25,7 @@ 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
@@ -98,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' );
 

package/src/utils/ui/contextualballoon.js

@@ -7,7 +7,6 @@
  * @module table/utils/ui/contextualballoon
  */
 
-import { centeredBalloonPositionForLongWidgets } from 'ckeditor5/src/widget';
 import { Rect } from 'ckeditor5/src/utils';
 import { BalloonPanelView } from 'ckeditor5/src/ui';
 
@@ -21,12 +20,8 @@ const BALLOON_POSITIONS = [
 	DEFAULT_BALLOON_POSITIONS.northArrowSouthEast,
 	DEFAULT_BALLOON_POSITIONS.southArrowNorth,
 	DEFAULT_BALLOON_POSITIONS.southArrowNorthWest,
-	DEFAULT_BALLOON_POSITIONS.southArrowNorthEast
-];
-
-const TABLE_PROPERTIES_BALLOON_POSITIONS = [
-	...BALLOON_POSITIONS,
-	centeredBalloonPositionForLongWidgets
+	DEFAULT_BALLOON_POSITIONS.southArrowNorthEast,
+	DEFAULT_BALLOON_POSITIONS.viewportStickyNorth
 ];
 
 /**
@@ -69,7 +64,7 @@ export function getBalloonTablePositionData( editor ) {
 
 	return {
 		target: editor.editing.view.domConverter.viewToDom( viewTable ),
-		positions: TABLE_PROPERTIES_BALLOON_POSITIONS
+		positions: BALLOON_POSITIONS
 	};
 }
 

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%;
+}