@ckeditor/ckeditor5-table 34.0.0 → 35.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "34.0.0",
+  "version": "35.0.0",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,31 +12,34 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^34.0.0",
+    "ckeditor5": "^35.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^34.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^34.0.0",
-    "@ckeditor/ckeditor5-clipboard": "^34.0.0",
-    "@ckeditor/ckeditor5-core": "^34.0.0",
+    "@ckeditor/ckeditor5-alignment": "^35.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^35.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^35.0.0",
+    "@ckeditor/ckeditor5-clipboard": "^35.0.0",
+    "@ckeditor/ckeditor5-core": "^35.0.0",
     "@ckeditor/ckeditor5-dev-utils": "^30.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^34.0.0",
-    "@ckeditor/ckeditor5-engine": "^34.0.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^34.0.0",
-    "@ckeditor/ckeditor5-html-support": "^34.0.0",
-    "@ckeditor/ckeditor5-image": "^34.0.0",
-    "@ckeditor/ckeditor5-indent": "^34.0.0",
-    "@ckeditor/ckeditor5-list": "^34.0.0",
-    "@ckeditor/ckeditor5-media-embed": "^34.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^34.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^34.0.0",
-    "@ckeditor/ckeditor5-typing": "^34.0.0",
-    "@ckeditor/ckeditor5-ui": "^34.0.0",
-    "@ckeditor/ckeditor5-undo": "^34.0.0",
-    "@ckeditor/ckeditor5-utils": "^34.0.0",
-    "@ckeditor/ckeditor5-widget": "^34.0.0",
-    "@ckeditor/ckeditor5-source-editing": "^34.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^35.0.0",
+    "@ckeditor/ckeditor5-engine": "^35.0.0",
+    "@ckeditor/ckeditor5-highlight": "^35.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^35.0.0",
+    "@ckeditor/ckeditor5-html-support": "^35.0.0",
+    "@ckeditor/ckeditor5-image": "^35.0.0",
+    "@ckeditor/ckeditor5-indent": "^35.0.0",
+    "@ckeditor/ckeditor5-link": "^35.0.0",
+    "@ckeditor/ckeditor5-list": "^35.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^35.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^35.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^35.0.0",
+    "@ckeditor/ckeditor5-typing": "^35.0.0",
+    "@ckeditor/ckeditor5-ui": "^35.0.0",
+    "@ckeditor/ckeditor5-undo": "^35.0.0",
+    "@ckeditor/ckeditor5-utils": "^35.0.0",
+    "@ckeditor/ckeditor5-widget": "^35.0.0",
+    "@ckeditor/ckeditor5-source-editing": "^35.0.0",
     "json-diff": "^0.5.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
@@ -59,7 +62,8 @@
     "src",
     "theme",
     "build",
-    "ckeditor5-metadata.json"
+    "ckeditor5-metadata.json",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "dll:build": "webpack"

package/src/index.js

@@ -26,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/tablecellproperties/ui/tablecellpropertiesview.js

@@ -247,7 +247,7 @@ export default class TableCellPropertiesView extends View {
 		 * A toolbar with buttons that allow changing the horizontal text alignment in a table cell.
 		 *
 		 * @readonly
-		 * @member {module:ui/toolbar/toolbar~ToolbarView}
+		 * @member {module:ui/toolbar/toolbarview~ToolbarView}
 		 */
 		this.horizontalAlignmentToolbar = horizontalAlignmentToolbar;
 
@@ -255,7 +255,7 @@ export default class TableCellPropertiesView extends View {
 		 * A toolbar with buttons that allow changing the vertical text alignment in a table cell.
 		 *
 		 * @readonly
-		 * @member {module:ui/toolbar/toolbar~ToolbarView}
+		 * @member {module:ui/toolbar/toolbarview~ToolbarView}
 		 */
 		this.verticalAlignmentToolbar = verticalAlignmentToolbar;
 

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