@ckeditor/ckeditor5-table 29.0.0 → 31.0.0

package/ckeditor5-metadata.json

@@ -0,0 +1,174 @@
+{
+	"plugins": [
+		{
+			"name": "Table",
+			"className": "Table",
+			"description": "Adds table creation and editing tools that help content authors bring tabular data into their documents.",
+			"docs": "features/table.html",
+			"path": "src/table.js",
+			"uiComponents": [
+				{
+					"type": "SplitButton",
+					"name": "insertTable",
+					"iconPath": "theme/icons/table.svg"
+				},
+				{
+					"type": "Button",
+					"name": "tableColumn",
+					"iconPath": "theme/icons/table-column.svg",
+					"toolbars": [
+						"table.contentToolbar"
+					]
+				},
+				{
+					"type": "Button",
+					"name": "tableRow",
+					"iconPath": "theme/icons/table-row.svg",
+					"toolbars": [
+						"table.contentToolbar"
+					]
+				},
+				{
+					"type": "Button",
+					"name": "mergeTableCells",
+					"iconPath": "theme/icons/table-merge-cell.svg",
+					"toolbars": [
+						"table.contentToolbar"
+					]
+				}
+			],
+			"htmlOutput": [
+				{
+					"elements": "figure",
+					"classes": "table"
+				},
+				{
+					"elements": [
+						"table",
+						"thead",
+						"tbody",
+						"tr"
+					]
+				},
+				{
+					"elements": [
+						"td",
+						"th"
+					],
+					"attributes": [
+						"colspan",
+						"rowspan"
+					]
+				}
+			]
+		},
+		{
+			"name": "Table cell properties",
+			"className": "TableCellProperties",
+			"description": "Adds the ability to style individual table cells.",
+			"docs": "features/table.html#table-and-cell-styling-tools",
+			"path": "src/tablecellproperties",
+			"requires": [
+				"Table",
+				"TableToolbar"
+			],
+			"uiComponents": [
+				{
+					"type": "Button",
+					"name": "tableCellProperties",
+					"iconPath": "theme/icons/table-cell-properties.svg",
+					"toolbars": [
+						"table.contentToolbar"
+					]
+				}
+			],
+			"htmlOutput": [
+				{
+					"elements": [
+						"td",
+						"th"
+					],
+					"styles": [
+						"background-color",
+						"border",
+						"border-*",
+						"height",
+						"padding",
+						"text-align",
+						"vertical-align",
+						"width"
+					]
+				}
+			]
+		},
+		{
+			"name": "Table properties",
+			"className": "TableProperties",
+			"description": "Adds the ability to style entire tables.",
+			"docs": "features/table.html#table-and-cell-styling-tools",
+			"path": "src/tableproperties",
+			"requires": [
+				"Table",
+				"TableToolbar"
+			],
+			"uiComponents": [
+				{
+					"type": "Button",
+					"name": "tableProperties",
+					"iconPath": "theme/icons/table-properties.svg",
+					"toolbars": [
+						"table.contentToolbar"
+					]
+				}
+			],
+			"htmlOutput": [
+				{
+					"elements": "figure",
+					"styles": [
+						"float",
+						"height",
+						"width"
+					]
+				},
+				{
+					"elements": "table",
+					"styles": [
+						"background-color",
+						"border",
+						"border-*"
+					]
+				}
+			]
+		},
+		{
+			"name": "Table toolbar",
+			"className": "TableToolbar",
+			"description": "Creates configurable toolbars for both the table feature and table content. They show up when the table widget or the content inside a table cell are selected.",
+			"docs": "features/table.html#toolbars",
+			"path": "src/tabletoolbar.js",
+			"requires": [
+				"Table"
+			],
+			"registeredToolbars": [
+				"table.contentToolbar",
+				"table.tableToolbar"
+			]
+		},
+		{
+			"name": "Table caption",
+			"className": "TableCaption",
+			"description": "Adds support for table captions, which inform the reader about the content of the table. Using captions is also beneficial from the accessibility point of view.",
+			"docs": "features/table.html#table-caption",
+			"path": "src/tablecaption.js",
+			"requires": [
+				"Table"
+			],
+			"htmlOutput": [
+				{
+					"elements": "figcaption",
+					"attributes": "data-placeholder"
+				}
+			]
+		}
+	]
+}

package/lang/translations/nl.po

@@ -38,7 +38,7 @@ msgstr "Verwijder kolom"
 
 msgctxt "Label for the select the entire table column button."
 msgid "Select column"
-msgstr ""
+msgstr "Selecteer kolom"
 
 msgctxt "Label for the table column dropdown button."
 msgid "Column"
@@ -62,7 +62,7 @@ msgstr "Verwijder rij"
 
 msgctxt "Label for the select the entire table row button."
 msgid "Select row"
-msgstr ""
+msgstr "Selecteer rij"
 
 msgctxt "Label for the table row dropdown button."
 msgid "Row"

package/lang/translations/pl.po

@@ -250,12 +250,12 @@ msgstr "Wybór koloru"
 
 msgctxt "The button label for the table toolbar hiding caption attached to the table."
 msgid "Toggle caption off"
-msgstr ""
+msgstr "Ukryj podpis tabeli"
 
 msgctxt "The button label for the table toolbar showing caption attached to the table."
 msgid "Toggle caption on"
-msgstr ""
+msgstr "Pokaż podpis tabeli"
 
 msgctxt "The placeholder text for the table caption displayed when the caption is empty."
 msgid "Enter table caption"
-msgstr ""
+msgstr "Wprowadź podpis tabeli"

package/lang/translations/ru.po

@@ -250,12 +250,12 @@ msgstr "Выбор цвета"
 
 msgctxt "The button label for the table toolbar hiding caption attached to the table."
 msgid "Toggle caption off"
-msgstr ""
+msgstr "Выключить описание"
 
 msgctxt "The button label for the table toolbar showing caption attached to the table."
 msgid "Toggle caption on"
-msgstr ""
+msgstr "Включить описание"
 
 msgctxt "The placeholder text for the table caption displayed when the caption is empty."
 msgid "Enter table caption"
-msgstr ""
+msgstr "Подпись таблицы"

package/lang/translations/sr-latn.po

@@ -250,12 +250,12 @@ msgstr "Birač boja"
 
 msgctxt "The button label for the table toolbar hiding caption attached to the table."
 msgid "Toggle caption off"
-msgstr ""
+msgstr "Isključivanje natpisa"
 
 msgctxt "The button label for the table toolbar showing caption attached to the table."
 msgid "Toggle caption on"
-msgstr ""
+msgstr "Uključite naslov"
 
 msgctxt "The placeholder text for the table caption displayed when the caption is empty."
 msgid "Enter table caption"
-msgstr ""
+msgstr "Unesite naslov tabele"

package/lang/translations/sr.po

@@ -250,12 +250,12 @@ msgstr "Бирач боја"
 
 msgctxt "The button label for the table toolbar hiding caption attached to the table."
 msgid "Toggle caption off"
-msgstr ""
+msgstr "Искључивање натписа "
 
 msgctxt "The button label for the table toolbar showing caption attached to the table."
 msgid "Toggle caption on"
-msgstr ""
+msgstr "Укључите наслов "
 
 msgctxt "The placeholder text for the table caption displayed when the caption is empty."
 msgid "Enter table caption"
-msgstr ""
+msgstr "Унесите наслов табеле "

package/package.json

@@ -1,39 +1,40 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "29.0.0",
+  "version": "31.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": "^29.0.0",
+    "ckeditor5": "^31.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^29.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^29.0.0",
-    "@ckeditor/ckeditor5-clipboard": "^29.0.0",
-    "@ckeditor/ckeditor5-core": "^29.0.0",
-    "@ckeditor/ckeditor5-dev-utils": "^25.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^29.0.0",
-    "@ckeditor/ckeditor5-engine": "^29.0.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^29.0.0",
-    "@ckeditor/ckeditor5-image": "^29.0.0",
-    "@ckeditor/ckeditor5-indent": "^29.0.0",
-    "@ckeditor/ckeditor5-list": "^29.0.0",
-    "@ckeditor/ckeditor5-media-embed": "^29.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^29.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^29.0.0",
-    "@ckeditor/ckeditor5-typing": "^29.0.0",
-    "@ckeditor/ckeditor5-ui": "^29.0.0",
-    "@ckeditor/ckeditor5-undo": "^29.0.0",
-    "@ckeditor/ckeditor5-utils": "^29.0.0",
-    "@ckeditor/ckeditor5-widget": "^29.0.0",
+    "@ckeditor/ckeditor5-alignment": "^31.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^31.0.0",
+    "@ckeditor/ckeditor5-clipboard": "^31.0.0",
+    "@ckeditor/ckeditor5-core": "^31.0.0",
+    "@ckeditor/ckeditor5-dev-utils": "^25.4.0",
+    "@ckeditor/ckeditor5-editor-classic": "^31.0.0",
+    "@ckeditor/ckeditor5-engine": "^31.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^31.0.0",
+    "@ckeditor/ckeditor5-image": "^31.0.0",
+    "@ckeditor/ckeditor5-indent": "^31.0.0",
+    "@ckeditor/ckeditor5-list": "^31.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^31.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^31.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^31.0.0",
+    "@ckeditor/ckeditor5-typing": "^31.0.0",
+    "@ckeditor/ckeditor5-ui": "^31.0.0",
+    "@ckeditor/ckeditor5-undo": "^31.0.0",
+    "@ckeditor/ckeditor5-utils": "^31.0.0",
+    "@ckeditor/ckeditor5-widget": "^31.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

@@ -41,17 +41,33 @@ 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 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 );
 

package/src/commands/selectcolumncommand.js

@@ -24,6 +24,16 @@ import { getSelectionAffectedTableCells } from '../utils/selection';
  * @extends module:core/command~Command
  */
 export default class SelectColumnCommand extends Command {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		// It does not affect data so should be enabled in read-only mode.
+		this.affectsData = false;
+	}
+
 	/**
 	 * @inheritDoc
 	 */

package/src/commands/selectrowcommand.js

@@ -23,6 +23,16 @@ import { getRowIndexes, getSelectionAffectedTableCells } from '../utils/selectio
  * @extends module:core/command~Command
  */
 export default class SelectRowCommand extends Command {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		// It does not affect data so should be enabled in read-only mode.
+		this.affectsData = false;
+	}
+
 	/**
 	 * @inheritDoc
 	 */

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.
@@ -311,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 ) );
@@ -359,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;