Add resize table column balloon editor

packages/ckeditor5-table/lang/contexts.json

@@ -4,6 +4,7 @@
 	"Insert column left": "Label for the insert table column to the left of the current one button.",
 	"Insert column right": "Label for the insert table column to the right of the current one button.",
 	"Delete column": "Label for the delete table column button.",
+	"Resize column": "Label for the resize table column button.",
 	"Select column": "Label for the select the entire table column button.",
 	"Column": "Label for the table column dropdown button.",
 	"Header row": "Label for the set/unset table header row button.",
@@ -63,5 +64,8 @@
 	"Move the selection to the previous cell": "Keystroke description for assistive technologies: keystroke for moving the selection to the previous cell.",
 	"Insert a new table row (when in the last cell of a table)": "Keystroke description for assistive technologies: keystroke for inserting a new table row.",
 	"Navigate through the table": "Keystroke description for assistive technologies: keystroke for navigating through the table.",
-	"Table": "The accessible label of the menu bar button that displays a user interface to insert a table into editor content."
+	"Table": "The accessible label of the menu bar button that displays a user interface to insert a table into editor content.",
+	"Column width in pixels": "The label for the column width input.",
+	"Column width must not be empty.": "Text used as error label when user submitted resize table column form with blank value.",
+	"Incorrect column width value.": "Text used as error label when user submitted resize table column form with incorrect value."
 }

packages/ckeditor5-table/package.json

@@ -14,6 +14,7 @@
   "main": "src/index.ts",
   "dependencies": {
     "ckeditor5": "41.3.1",
+    "@ckeditor/ckeditor5-ui": "41.3.1",
     "lodash-es": "4.17.21"
   },
   "devDependencies": {
@@ -36,7 +37,6 @@
     "@ckeditor/ckeditor5-paragraph": "41.3.1",
     "@ckeditor/ckeditor5-theme-lark": "41.3.1",
     "@ckeditor/ckeditor5-typing": "41.3.1",
-    "@ckeditor/ckeditor5-ui": "41.3.1",
     "@ckeditor/ckeditor5-undo": "41.3.1",
     "@ckeditor/ckeditor5-utils": "41.3.1",
     "@ckeditor/ckeditor5-widget": "41.3.1",

packages/ckeditor5-table/src/augmentation.ts

@@ -19,6 +19,7 @@ import type {
 	TableClipboard,
 	TableColumnResize,
 	TableColumnResizeEditing,
+	TableColumnResizeUI,
 	TableEditing,
 	TableKeyboard,
 	TableMouse,
@@ -29,6 +30,7 @@ import type {
 	TableToolbar,
 	TableUI,
 	TableUtils,
+	TableColumnResizeUtils,
 	PlainTableOutput,
 
 	// Commands
@@ -56,6 +58,7 @@ import type {
 	TableCellWidthCommand,
 	TableAlignmentCommand,
 	TableBackgroundColorCommand,
+	TableColumnResizeCommand,
 	TableBorderColorCommand,
 	TableBorderStyleCommand,
 	TableBorderWidthCommand,
@@ -85,6 +88,8 @@ declare module '@ckeditor/ckeditor5-core' {
 		[ TableCellWidthEditing.pluginName ]: TableCellWidthEditing;
 		[ TableClipboard.pluginName ]: TableClipboard;
 		[ TableColumnResize.pluginName ]: TableColumnResize;
+		[ TableColumnResizeUtils.pluginName ]: TableColumnResizeUtils;
+		[ TableColumnResizeUI.pluginName ]: TableColumnResizeUI;
 		[ TableColumnResizeEditing.pluginName ]: TableColumnResizeEditing;
 		[ TableEditing.pluginName ]: TableEditing;
 		[ TableKeyboard.pluginName ]: TableKeyboard;
@@ -135,5 +140,6 @@ declare module '@ckeditor/ckeditor5-core' {
 		tableBorderWidth: TableBorderWidthCommand;
 		tableHeight: TableHeightCommand;
 		tableWidth: TableWidthCommand;
+		resizeTableColumn: TableColumnResizeCommand;
 	}
 }

packages/ckeditor5-table/src/index.ts

@@ -28,7 +28,9 @@ export { default as TableKeyboard } from './tablekeyboard.js';
 export { default as TableSelection } from './tableselection.js';
 export { default as TableUtils } from './tableutils.js';
 export { default as TableColumnResize } from './tablecolumnresize.js';
+export { default as TableColumnResizeUtils } from './tablecolumnresize/tablecolumnresizeutils.js';
 export { default as TableColumnResizeEditing } from './tablecolumnresize/tablecolumnresizeediting.js';
+export { default as TableColumnResizeUI } from './tablecolumnresize/tablecolumnresizeui.js';
 
 export type { TableConfig } from './tableconfig.js';
 export type { default as InsertColumnCommand } from './commands/insertcolumncommand.js';
@@ -60,5 +62,6 @@ export type { default as TableBorderStyleCommand } from './tableproperties/comma
 export type { default as TableBorderWidthCommand } from './tableproperties/commands/tableborderwidthcommand.js';
 export type { default as TableHeightCommand } from './tableproperties/commands/tableheightcommand.js';
 export type { default as TableWidthCommand } from './tableproperties/commands/tablewidthcommand.js';
+export type { default as TableColumnResizeCommand } from './tablecolumnresize/commands/tablecolumnresizecommand.js';
 
 import './augmentation.js';

packages/ckeditor5-table/src/tablecolumnresize.ts

@@ -10,6 +10,7 @@
 import { Plugin } from 'ckeditor5/src/core.js';
 import TableColumnResizeEditing from './tablecolumnresize/tablecolumnresizeediting.js';
 import TableCellWidthEditing from './tablecellwidth/tablecellwidthediting.js';
+import TableColumnResizeUI from './tablecolumnresize/tablecolumnresizeui.js';
 
 import '../theme/tablecolumnresize.css';
 
@@ -23,7 +24,7 @@ export default class TableColumnResize extends Plugin {
 	 * @inheritDoc
  	 */
 	public static get requires() {
-		return [ TableColumnResizeEditing, TableCellWidthEditing ] as const;
+		return [ TableColumnResizeEditing, TableColumnResizeUI, TableCellWidthEditing ] as const;
 	}
 
 	/**

packages/ckeditor5-table/src/tablecolumnresize/commands/tablecolumnresizecommand.ts

@@ -0,0 +1,100 @@
+/**
+ * @license Copyright (c) 2003-2024, 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/commands/tablecolumnresizecommand
+ */
+
+import { Command, type Editor } from 'ckeditor5/src/core.js';
+import type { DowncastInsertEvent } from 'ckeditor5/src/engine.js';
+import type { PossibleResizeColumnRange } from '../tablecolumnresizeutils.js';
+
+/**
+ * The resize table column command.
+ *
+ * The command is registered by {@link module:table/tablecolumnresize/tablecolumnresizeui~TableColumnResizeUI}
+ * as the `'resizeTableColumn'` editor command.
+ *
+ * To resize currently selected column, execute the command:
+ *
+ * ```ts
+ * editor.execute( 'resizeTableColumn', { newColumnWidth: 250 } );
+ * ```
+ */
+export default class TableColumnResizeCommand extends Command {
+	/**
+	 * The command value: Current size of column (in pixels) and possible resize range of such column..
+	 *
+	 * @readonly
+	 * @observable
+	 */
+	declare public possibleRange: PossibleResizeColumnRange | null;
+
+	constructor( editor: Editor ) {
+		super( editor );
+
+		// After inserting a table, the Resizer column elements are added to the document.
+		// However, the plugin remains disabled because none of the column resizers have been mounted in the DOM yet.
+		// To ensure that the resize option is enabled, refresh the plugin after rendering the table.
+		this.editor.conversion.for( 'editingDowncast' ).add( dispatcher => {
+			dispatcher.on<DowncastInsertEvent>( 'insert:table', () => {
+				editor.editing.view.once( 'render', this.refresh.bind( this ) );
+			} );
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public override refresh(): void {
+		const { plugins } = this.editor;
+
+		const resizeUtils = plugins.get( 'TableColumnResizeUtils' );
+		const tableUtils = plugins.get( 'TableUtils' );
+
+		const smallestResizer = resizeUtils.getSmallestSelectedColumnResizer();
+
+		if ( smallestResizer ) {
+			const { last, first } = tableUtils.getColumnIndexes(
+				tableUtils.getSelectionAffectedTableCells( this.editor.model.document.selection )
+			);
+
+			if ( last === first ) {
+				this.isEnabled = true;
+				this.possibleRange = resizeUtils.getPossibleResizeColumnRange( smallestResizer );
+				return;
+			}
+		}
+
+		this.isEnabled = false;
+		this.possibleRange = null;
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * Resizes selected column to new size.
+	 *
+	 * @param options.newColumnWidth New column size in pixels.
+	 * @fires execute
+	 */
+	public override execute( { newColumnWidth }: TableColumnResizeCommandOptions ): void {
+		const resizeUtils = this.editor.plugins.get( 'TableColumnResizeUtils' );
+		const resizer = resizeUtils.getSmallestSelectedColumnResizer();
+
+		resizeUtils.resizeColumnUsingResizer( resizer!, newColumnWidth );
+	}
+}
+
+export interface TableColumnResizeCommandOptions {
+
+	/**
+	 * Represents the width of a new table column in pixels.
+	 *
+	 *  * The width is automatically clamped if it's too large or too small.
+	 *  * The width corresponds to the inner cell content width (excluding borders).
+	 */
+	newColumnWidth: number;
+}

packages/ckeditor5-table/src/tablecolumnresize/tablewidthscommand.ts → packages/ckeditor5-table/src/tablecolumnresize/commands/tablewidthscommand.ts

@@ -4,12 +4,12 @@
  */
 
 /**
- * @module table/tablecolumnresize/tablewidthscommand
+ * @module table/tablecolumnresize/commands/tablewidthscommand
  */
 
 import type { Element } from 'ckeditor5/src/engine.js';
 import { Command } from 'ckeditor5/src/core.js';
-import { normalizeColumnWidths } from './utils.js';
+import { normalizeColumnWidths } from '../utils.js';
 
 /**
  * Command used by the {@link module:table/tablecolumnresize~TableColumnResize Table column resize feature} that