@ckeditor/ckeditor5-table 27.1.0 → 29.2.0

package/src/tableproperties/commands/tablepropertycommand.js

@@ -22,11 +22,27 @@ export default class TablePropertyCommand extends Command {
 	 *
 	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 * @param {String} attributeName Table cell attribute name.
+	 * @param {String} defaultValue The default value of the attribute.
 	 */
-	constructor( editor, attributeName ) {
+	constructor( editor, attributeName, defaultValue ) {
 		super( editor );
 
+		/**
+		 * The attribute that will be set by the command.
+		 *
+		 * @readonly
+		 * @member {String}
+		 */
 		this.attributeName = attributeName;
+
+		/**
+		 * The default value for the attribute.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {String}
+		 */
+		this._defaultValue = defaultValue;
 	}
 
 	/**
@@ -82,7 +98,13 @@ export default class TablePropertyCommand extends Command {
 			return;
 		}
 
-		return table.getAttribute( this.attributeName );
+		const value = table.getAttribute( this.attributeName );
+
+		if ( value === this._defaultValue ) {
+			return;
+		}
+
+		return value;
 	}
 
 	/**
@@ -93,6 +115,10 @@ export default class TablePropertyCommand extends Command {
 	 * @returns {*}
 	 */
 	_getValueToSet( value ) {
+		if ( value === this._defaultValue ) {
+			return;
+		}
+
 		return value;
 	}
 }

package/src/tableproperties/commands/tablewidthcommand.js

@@ -37,15 +37,22 @@ export default class TableWidthCommand extends TablePropertyCommand {
 	 * Creates a new `TableWidthCommand` instance.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 * @param {String} defaultValue The default value of the attribute.
 	 */
-	constructor( editor ) {
-		super( editor, 'width' );
+	constructor( editor, defaultValue ) {
+		super( editor, 'width', defaultValue );
 	}
 
 	/**
 	 * @inheritDoc
 	 */
 	_getValueToSet( value ) {
-		return addDefaultUnitToNumericValue( value, 'px' );
+		value = addDefaultUnitToNumericValue( value, 'px' );
+
+		if ( value === this._defaultValue ) {
+			return;
+		}
+
+		return value;
 	}
 }

package/src/tableproperties/tablepropertiesediting.js

@@ -24,8 +24,10 @@ import TableBorderWidthCommand from './commands/tableborderwidthcommand';
 import TableWidthCommand from './commands/tablewidthcommand';
 import TableHeightCommand from './commands/tableheightcommand';
 import TableAlignmentCommand from './commands/tablealignmentcommand';
+import { getNormalizedDefaultProperties } from '../utils/table-properties';
 
-const ALIGN_VALUES_REG_EXP = /^(left|right)$/;
+const ALIGN_VALUES_REG_EXP = /^(left|center|right)$/;
+const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
 
 /**
  * The table properties editing feature.
@@ -69,24 +71,49 @@ export default class TablePropertiesEditing extends Plugin {
 		const schema = editor.model.schema;
 		const conversion = editor.conversion;
 
+		editor.config.define( 'table.tableProperties.defaultProperties', {} );
+
+		const defaultTableProperties = getNormalizedDefaultProperties( editor.config.get( 'table.tableProperties.defaultProperties' ), {
+			includeAlignmentProperty: true
+		} );
+
 		editor.data.addStyleProcessorRules( addBorderRules );
-		enableBorderProperties( schema, conversion );
-		editor.commands.add( 'tableBorderColor', new TableBorderColorCommand( editor ) );
-		editor.commands.add( 'tableBorderStyle', new TableBorderStyleCommand( editor ) );
-		editor.commands.add( 'tableBorderWidth', new TableBorderWidthCommand( editor ) );
+		enableBorderProperties( schema, conversion, {
+			color: defaultTableProperties.borderColor,
+			style: defaultTableProperties.borderStyle,
+			width: defaultTableProperties.borderWidth
+		} );
+		editor.commands.add( 'tableBorderColor', new TableBorderColorCommand( editor, defaultTableProperties.borderColor ) );
+		editor.commands.add( 'tableBorderStyle', new TableBorderStyleCommand( editor, defaultTableProperties.borderStyle ) );
+		editor.commands.add( 'tableBorderWidth', new TableBorderWidthCommand( editor, defaultTableProperties.borderWidth ) );
 
-		enableAlignmentProperty( schema, conversion );
-		editor.commands.add( 'tableAlignment', new TableAlignmentCommand( editor ) );
+		enableAlignmentProperty( schema, conversion, defaultTableProperties.alignment );
+		editor.commands.add( 'tableAlignment', new TableAlignmentCommand( editor, defaultTableProperties.alignment ) );
 
-		enableTableToFigureProperty( schema, conversion, 'width', 'width' );
-		editor.commands.add( 'tableWidth', new TableWidthCommand( editor ) );
+		enableTableToFigureProperty( schema, conversion, {
+			modelAttribute: 'width',
+			styleName: 'width',
+			defaultValue: defaultTableProperties.width
+		} );
+		editor.commands.add( 'tableWidth', new TableWidthCommand( editor, defaultTableProperties.width ) );
 
-		enableTableToFigureProperty( schema, conversion, 'height', 'height' );
-		editor.commands.add( 'tableHeight', new TableHeightCommand( editor ) );
+		enableTableToFigureProperty( schema, conversion, {
+			modelAttribute: 'height',
+			styleName: 'height',
+			defaultValue: defaultTableProperties.height
+		} );
+		editor.commands.add( 'tableHeight', new TableHeightCommand( editor, defaultTableProperties.height ) );
 
 		editor.data.addStyleProcessorRules( addBackgroundRules );
-		enableProperty( schema, conversion, 'backgroundColor', 'background-color' );
-		editor.commands.add( 'tableBackgroundColor', new TableBackgroundColorCommand( editor ) );
+		enableProperty( schema, conversion, {
+			modelAttribute: 'backgroundColor',
+			styleName: 'background-color',
+			defaultValue: defaultTableProperties.backgroundColor
+		} );
+		editor.commands.add(
+			'tableBackgroundColor',
+			new TableBackgroundColorCommand( editor, defaultTableProperties.backgroundColor )
+		);
 	}
 }
 
@@ -94,51 +121,70 @@ export default class TablePropertiesEditing extends Plugin {
 //
 // @param {module:engine/model/schema~Schema} schema
 // @param {module:engine/conversion/conversion~Conversion} conversion
-function enableBorderProperties( schema, conversion ) {
+// @param {Object} defaultBorder The default border values.
+// @param {String} defaultBorder.color The default `borderColor` value.
+// @param {String} defaultBorder.style The default `borderStyle` value.
+// @param {String} defaultBorder.width The default `borderWidth` value.
+function enableBorderProperties( schema, conversion, defaultBorder ) {
 	schema.extend( 'table', {
 		allowAttributes: [ 'borderWidth', 'borderColor', 'borderStyle' ]
 	} );
-	upcastBorderStyles( conversion, 'table' );
-	downcastTableAttribute( conversion, 'borderColor', 'border-color' );
-	downcastTableAttribute( conversion, 'borderStyle', 'border-style' );
-	downcastTableAttribute( conversion, 'borderWidth', 'border-width' );
+	upcastBorderStyles( conversion, 'table', defaultBorder );
+	downcastTableAttribute( conversion, { modelAttribute: 'borderColor', styleName: 'border-color' } );
+	downcastTableAttribute( conversion, { modelAttribute: 'borderStyle', styleName: 'border-style' } );
+	downcastTableAttribute( conversion, { modelAttribute: 'borderWidth', styleName: 'border-width' } );
 }
 
 // Enables the `'alignment'` attribute for table.
 //
 // @param {module:engine/model/schema~Schema} schema
 // @param {module:engine/conversion/conversion~Conversion} conversion
-function enableAlignmentProperty( schema, conversion ) {
+// @param {String} defaultValue The default alignment value.
+function enableAlignmentProperty( schema, conversion, defaultValue ) {
 	schema.extend( 'table', {
 		allowAttributes: [ 'alignment' ]
 	} );
 
-	conversion
+	conversion.for( 'downcast' )
 		.attributeToAttribute( {
 			model: {
 				name: 'table',
-				key: 'alignment',
-				values: [ 'left', 'right' ]
+				key: 'alignment'
 			},
-			view: {
-				left: {
-					key: 'style',
-					value: {
-						float: 'left'
-					}
-				},
-				right: {
-					key: 'style',
-					value: {
-						float: 'right'
-					}
+			view: alignment => ( {
+				key: 'style',
+				value: {
+					// Model: `alignment:center` => CSS: `float:none`.
+					float: alignment === 'center' ? 'none' : alignment
 				}
-			},
+			} ),
 			converterPriority: 'high'
 		} );
 
 	conversion.for( 'upcast' )
-		// Support for backwards compatibility and pasting from other sources.
+		// Support for the `float:*;` CSS definition for the table alignment.
+		.attributeToAttribute( {
+			view: {
+				name: /^(table|figure)$/,
+				styles: {
+					float: FLOAT_VALUES_REG_EXP
+				}
+			},
+			model: {
+				key: 'alignment',
+				value: viewElement => {
+					let align = viewElement.getStyle( 'float' );
+
+					// CSS: `float:none` => Model: `alignment:center`.
+					if ( align === 'none' ) {
+						align = 'center';
+					}
+
+					return align === defaultValue ? null : align;
+				}
+			}
+		} )
+		// Support for the `align` attribute as the backward compatibility while pasting from other sources.
 		.attributeToAttribute( {
 			view: {
 				attributes: {
@@ -148,35 +194,46 @@ function enableAlignmentProperty( schema, conversion ) {
 			model: {
 				name: 'table',
 				key: 'alignment',
-				value: viewElement => viewElement.getAttribute( 'align' )
+				value: viewElement => {
+					const align = viewElement.getAttribute( 'align' );
+
+					return align === defaultValue ? null : align;
+				}
 			}
 		} );
 }
 
 // Enables conversion for an attribute for simple view-model mappings.
 //
-// @param {String} modelAttribute
-// @param {String} styleName
 // @param {module:engine/model/schema~Schema} schema
 // @param {module:engine/conversion/conversion~Conversion} conversion
-function enableProperty( schema, conversion, modelAttribute, styleName ) {
+// @param {Object} options
+// @param {String} options.modelAttribute
+// @param {String} options.styleName
+// @param {String} options.defaultValue The default value for the specified `modelAttribute`.
+function enableProperty( schema, conversion, options ) {
+	const { modelAttribute } = options;
+
 	schema.extend( 'table', {
 		allowAttributes: [ modelAttribute ]
 	} );
-	upcastStyleToAttribute( conversion, 'table', modelAttribute, styleName );
-	downcastTableAttribute( conversion, modelAttribute, styleName );
+	upcastStyleToAttribute( conversion, { viewElement: 'table', ...options } );
+	downcastTableAttribute( conversion, options );
 }
 
 // Enables conversion for an attribute for simple view (figure) to model (table) mappings.
 //
-// @param {String} modelAttribute
-// @param {String} styleName
 // @param {module:engine/model/schema~Schema} schema
 // @param {module:engine/conversion/conversion~Conversion} conversion
-function enableTableToFigureProperty( schema, conversion, modelAttribute, styleName ) {
+// @param {Object} options
+// @param {String} options.modelAttribute
+// @param {String} options.styleName
+function enableTableToFigureProperty( schema, conversion, options ) {
+	const { modelAttribute } = options;
+
 	schema.extend( 'table', {
 		allowAttributes: [ modelAttribute ]
 	} );
-	upcastStyleToAttribute( conversion, 'table', modelAttribute, styleName );
-	downcastAttributeToStyle( conversion, 'table', modelAttribute, styleName );
+	upcastStyleToAttribute( conversion, { viewElement: /^(table|figure)$/, ...options } );
+	downcastAttributeToStyle( conversion, { modelElement: 'table', ...options } );
 }

package/src/tableproperties/tablepropertiesui.js

@@ -24,6 +24,7 @@ import {
 } from '../utils/ui/table-properties';
 import { getTableWidgetAncestor } from '../utils/ui/widget';
 import { getBalloonTablePositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon';
+import { getNormalizedDefaultProperties } from '../utils/table-properties';
 
 const ERROR_TEXT_TIMEOUT = 500;
 
@@ -81,6 +82,16 @@ export default class TablePropertiesUI extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 
+		/**
+		 * The default table properties.
+		 *
+		 * @protected
+		 * @member {module:table/tableproperties~TablePropertiesOptions}
+		 */
+		this._defaultTableProperties = getNormalizedDefaultProperties( editor.config.get( 'table.tableProperties.defaultProperties' ), {
+			includeAlignmentProperty: true
+		} );
+
 		/**
 		 * The contextual balloon plugin instance.
 		 *
@@ -152,9 +163,11 @@ export default class TablePropertiesUI extends Plugin {
 		const localizedBorderColors = getLocalizedColorOptions( editor.locale, borderColorsConfig );
 		const backgroundColorsConfig = normalizeColorOptions( config.backgroundColors );
 		const localizedBackgroundColors = getLocalizedColorOptions( editor.locale, backgroundColorsConfig );
+
 		const view = new TablePropertiesView( editor.locale, {
 			borderColors: localizedBorderColors,
-			backgroundColors: localizedBackgroundColors
+			backgroundColors: localizedBackgroundColors,
+			defaultTableProperties: this._defaultTableProperties
 		} );
 		const t = editor.t;
 
@@ -196,44 +209,55 @@ export default class TablePropertiesUI extends Plugin {
 		// property of the view has changed. They also validate the value and display errors in the UI
 		// when necessary. This makes the view live, which means the changes are
 		// visible in the editing as soon as the user types or changes fields' values.
-		view.on( 'change:borderStyle', this._getPropertyChangeCallback( 'tableBorderStyle' ) );
+		view.on(
+			'change:borderStyle',
+			this._getPropertyChangeCallback( 'tableBorderStyle', this._defaultTableProperties.borderStyle )
+		);
 
 		view.on( 'change:borderColor', this._getValidatedPropertyChangeCallback( {
 			viewField: view.borderColorInput,
 			commandName: 'tableBorderColor',
 			errorText: colorErrorText,
-			validator: colorFieldValidator
+			validator: colorFieldValidator,
+			defaultValue: this._defaultTableProperties.borderColor
 		} ) );
 
 		view.on( 'change:borderWidth', this._getValidatedPropertyChangeCallback( {
 			viewField: view.borderWidthInput,
 			commandName: 'tableBorderWidth',
 			errorText: lengthErrorText,
-			validator: lineWidthFieldValidator
+			validator: lineWidthFieldValidator,
+			defaultValue: this._defaultTableProperties.borderWidth
 		} ) );
 
 		view.on( 'change:backgroundColor', this._getValidatedPropertyChangeCallback( {
 			viewField: view.backgroundInput,
 			commandName: 'tableBackgroundColor',
 			errorText: colorErrorText,
-			validator: colorFieldValidator
+			validator: colorFieldValidator,
+			defaultValue: this._defaultTableProperties.backgroundColor
 		} ) );
 
 		view.on( 'change:width', this._getValidatedPropertyChangeCallback( {
 			viewField: view.widthInput,
 			commandName: 'tableWidth',
 			errorText: lengthErrorText,
-			validator: lengthFieldValidator
+			validator: lengthFieldValidator,
+			defaultValue: this._defaultTableProperties.width
 		} ) );
 
 		view.on( 'change:height', this._getValidatedPropertyChangeCallback( {
 			viewField: view.heightInput,
 			commandName: 'tableHeight',
 			errorText: lengthErrorText,
-			validator: lengthFieldValidator
+			validator: lengthFieldValidator,
+			defaultValue: this._defaultTableProperties.height
 		} ) );
 
-		view.on( 'change:alignment', this._getPropertyChangeCallback( 'tableAlignment' ) );
+		view.on(
+			'change:alignment',
+			this._getPropertyChangeCallback( 'tableAlignment', this._defaultTableProperties.alignment )
+		);
 
 		return view;
 	}
@@ -250,10 +274,22 @@ export default class TablePropertiesUI extends Plugin {
 	 */
 	_fillViewFormFromCommandValues() {
 		const commands = this.editor.commands;
+		const borderStyleCommand = commands.get( 'tableBorderStyle' );
 
 		Object.entries( propertyToCommandMap )
-			.map( ( [ property, commandName ] ) => [ property, commands.get( commandName ).value || '' ] )
-			.forEach( ( [ property, value ] ) => this.view.set( property, value ) );
+			.map( ( [ property, commandName ] ) => {
+				const defaultValue = this._defaultTableProperties[ property ] || '';
+
+				return [ property, commands.get( commandName ).value || defaultValue ];
+			} )
+			.forEach( ( [ property, value ] ) => {
+				// Do not set the `border-color` and `border-width` fields if `border-style:none`.
+				if ( ( property === 'borderColor' || property === 'borderWidth' ) && borderStyleCommand.value === 'none' ) {
+					return;
+				}
+
+				this.view.set( property, value );
+			} );
 	}
 
 	/**
@@ -348,12 +384,21 @@ export default class TablePropertiesUI extends Plugin {
 	 * Creates a callback that when executed upon {@link #view view's} property change
 	 * executes a related editor command with the new property value.
 	 *
+	 * If new value will be set to the default value, the command will not be executed.
+	 *
 	 * @private
-	 * @param {String} commandName
+	 * @param {String} commandName The command that will be executed.
+	 * @param {String} defaultValue The default value of the command.
 	 * @returns {Function}
 	 */
-	_getPropertyChangeCallback( commandName ) {
-		return ( evt, propertyName, newValue ) => {
+	_getPropertyChangeCallback( commandName, defaultValue ) {
+		return ( evt, propertyName, newValue, oldValue ) => {
+			// If the "oldValue" is missing and "newValue" is set to the default value, do not execute the command.
+			// It is an initial call (when opening the table properties view).
+			if ( !oldValue && defaultValue === newValue ) {
+				return;
+			}
+
 			this.editor.execute( commandName, {
 				value: newValue,
 				batch: this._undoStepBatch
@@ -372,16 +417,24 @@ export default class TablePropertiesUI extends Plugin {
 	 * @param {module:ui/view~View} options.viewField
 	 * @param {Function} options.validator
 	 * @param {String} options.errorText
+	 * @param {String} options.defaultValue
 	 * @returns {Function}
 	 */
-	_getValidatedPropertyChangeCallback( { commandName, viewField, validator, errorText } ) {
+	_getValidatedPropertyChangeCallback( options ) {
+		const { commandName, viewField, validator, errorText, defaultValue } = options;
 		const setErrorTextDebounced = debounce( () => {
 			viewField.errorText = errorText;
 		}, ERROR_TEXT_TIMEOUT );
 
-		return ( evt, propertyName, newValue ) => {
+		return ( evt, propertyName, newValue, oldValue ) => {
 			setErrorTextDebounced.cancel();
 
+			// If the "oldValue" is missing and "newValue" is set to the default value, do not execute the command.
+			// It is an initial call (when opening the table properties view).
+			if ( !oldValue && defaultValue === newValue ) {
+				return;
+			}
+
 			if ( validator( newValue ) ) {
 				this.editor.execute( commandName, {
 					value: newValue,

package/src/tableproperties/ui/tablepropertiesview.js

@@ -58,6 +58,7 @@ export default class TablePropertiesView extends View {
 	 * @param {module:table/table~TableColorConfig} options.backgroundColors A configuration of the background
 	 * color palette used by the
 	 * {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView#backgroundInput}.
+	 * @param {module:table/tableproperties~TablePropertiesOptions} options.defaultTableProperties The default table properties.
 	 */
 	constructor( locale, options ) {
 		super( locale );
@@ -396,9 +397,17 @@ export default class TablePropertiesView extends View {
 	 * @returns {Object.<String,module:ui/view~View>}
 	 */
 	_createBorderFields() {
+		const defaultTableProperties = this.options.defaultTableProperties;
+		const defaultBorder = {
+			style: defaultTableProperties.borderStyle,
+			width: defaultTableProperties.borderWidth,
+			color: defaultTableProperties.borderColor
+		};
+
 		const colorInputCreator = getLabeledColorInputCreator( {
 			colorConfig: this.options.borderColors,
-			columns: 5
+			columns: 5,
+			defaultColorValue: defaultBorder.color
 		} );
 		const locale = this.locale;
 		const t = this.t;
@@ -433,7 +442,7 @@ export default class TablePropertiesView extends View {
 
 		borderStyleDropdown.bind( 'isEmpty' ).to( this, 'borderStyle', value => !value );
 
-		addListToDropdown( borderStyleDropdown.fieldView, getBorderStyleDefinitions( this ) );
+		addListToDropdown( borderStyleDropdown.fieldView, getBorderStyleDefinitions( this, defaultBorder.style ) );
 
 		// -- Width ---------------------------------------------------
 
@@ -466,13 +475,20 @@ export default class TablePropertiesView extends View {
 			this.borderColor = borderColorInput.fieldView.value;
 		} );
 
-		// Reset the border color and width fields when style is "none".
-		// https://github.com/ckeditor/ckeditor5/issues/6227
-		this.on( 'change:borderStyle', ( evt, name, value ) => {
-			if ( !isBorderStyleSet( value ) ) {
+		// Reset the border color and width fields depending on the `border-style` value.
+		this.on( 'change:borderStyle', ( evt, name, newValue, oldValue ) => {
+			// When removing the border (`border-style:none`), clear the remaining `border-*` properties.
+			// See: https://github.com/ckeditor/ckeditor5/issues/6227.
+			if ( !isBorderStyleSet( newValue ) ) {
 				this.borderColor = '';
 				this.borderWidth = '';
 			}
+
+			// When setting the `border-style` from `none`, set the default `border-color` and `border-width` properties.
+			if ( !isBorderStyleSet( oldValue ) ) {
+				this.borderColor = defaultBorder.color;
+				this.borderWidth = defaultBorder.width;
+			}
 		} );
 
 		return {
@@ -504,7 +520,8 @@ export default class TablePropertiesView extends View {
 
 		const backgroundInputCreator = getLabeledColorInputCreator( {
 			colorConfig: this.options.backgroundColors,
-			columns: 5
+			columns: 5,
+			defaultColorValue: this.options.defaultTableProperties.backgroundColor
 		} );
 
 		const backgroundInput = new LabeledFieldView( locale, backgroundInputCreator );
@@ -625,9 +642,7 @@ export default class TablePropertiesView extends View {
 			toolbar: alignmentToolbar,
 			labels: this._alignmentLabels,
 			propertyName: 'alignment',
-			nameToValue: name => {
-				return name === 'center' ? '' : name;
-			}
+			defaultValue: this.options.defaultTableProperties.alignment
 		} );
 
 		return {
@@ -710,5 +725,5 @@ export default class TablePropertiesView extends View {
 }
 
 function isBorderStyleSet( value ) {
-	return !!value;
+	return value !== 'none';
 }

package/src/tableproperties.js

@@ -65,9 +65,25 @@ export default class TableProperties extends Plugin {
  *			}
  *		};
  *
- * **Note**: The configurations do not impact the data loaded into the editor,
+ * * The default styles for tables (`tableProperties.defaultProperties`):
+ *
+ *		const tableConfig = {
+ *			tableProperties: {
+ *				defaultProperties: {
+ *					borderStyle: 'dashed',
+ *					borderColor: 'hsl(0, 0%, 90%)',
+ *					borderWidth: '3px',
+ *					alignment: 'left'
+ *				}
+ *			}
+ *		}
+ *
+ * 	 {@link module:table/tableproperties~TablePropertiesOptions Read more about the supported properties.}
+ *
+ * **Note**: The `borderColors` and `backgroundColors` options do not impact the data loaded into the editor,
  * i.e. they do not limit or filter the colors in the data. They are used only in the user interface
- * allowing users to pick colors in a more convenient way.
+ * allowing users to pick colors in a more convenient way. The `defaultProperties` option does impact the data.
+ * Default values will not be kept in the editor model.
  *
  * The default color palettes for the table background and the table border are the same
  * ({@link module:table/utils/ui/table-properties~defaultColors check out their content}).
@@ -79,3 +95,23 @@ export default class TableProperties extends Plugin {
  *
  * @member {Object} module:table/table~TableConfig#tableProperties
  */
+
+/**
+ * The configuration of the table default properties feature.
+ *
+ * @typedef {Object} module:table/tableproperties~TablePropertiesOptions
+ *
+ * @property {String} width The default `width` of the table.
+ *
+ * @property {String} height The default `height` of the table.
+ *
+ * @property {String} backgroundColor The default `background-color` of the table.
+ *
+ * @property {String} borderColor The default `border-color` of the table.
+ *
+ * @property {String} borderWidth The default `border-width` of the table.
+ *
+ * @property {String} [borderStyle='none'] The default `border-style` of the table.
+ *
+ * @property {String} [alignment='center'] The default `alignment` of the table.
+ */

package/src/tableui.js

@@ -278,7 +278,11 @@ export default class TableUI extends Plugin {
 		const dropdownView = createDropdown( locale, SplitButtonView );
 		const mergeCommandName = 'mergeTableCells';
 
-		this._fillDropdownWithListOptions( dropdownView, options );
+		// Main command.
+		const mergeCommand = editor.commands.get( mergeCommandName );
+
+		// Subcommands in the dropdown.
+		const commands = this._fillDropdownWithListOptions( dropdownView, options );
 
 		dropdownView.buttonView.set( {
 			label,
@@ -287,6 +291,11 @@ export default class TableUI extends Plugin {
 			isEnabled: true
 		} );
 
+		// Make dropdown button disabled when all options are disabled together with the main command.
+		dropdownView.bind( 'isEnabled' ).toMany( [ mergeCommand, ...commands ], 'isEnabled', ( ...areEnabled ) => {
+			return areEnabled.some( isEnabled => isEnabled );
+		} );
+
 		// Merge selected table cells when the main part of the split button is clicked.
 		this.listenTo( dropdownView.buttonView, 'execute', () => {
 			editor.execute( mergeCommandName );