#6679: The table properties button should not be enabled if all cell properties commands are disabled

packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js

@@ -32,6 +32,19 @@ import { debounce } from 'lodash-es';
 
 const ERROR_TEXT_TIMEOUT = 500;
 
+// Map of view properties and related commands.
+const propertyToCommandMap = {
+	borderStyle: 'tableCellBorderStyle',
+	borderColor: 'tableCellBorderColor',
+	borderWidth: 'tableCellBorderWidth',
+	width: 'tableCellWidth',
+	height: 'tableCellHeight',
+	padding: 'tableCellPadding',
+	backgroundColor: 'tableCellBackgroundColor',
+	horizontalAlignment: 'tableCellHorizontalAlignment',
+	verticalAlignment: 'tableCellVerticalAlignment'
+};
+
 /**
  * The table cell properties UI plugin. It introduces the `'tableCellProperties'` button
  * that opens a form allowing to specify the visual styling of a table cell.
@@ -110,6 +123,13 @@ export default class TableCellPropertiesUI extends Plugin {
 
 			this.listenTo( view, 'execute', () => this._showView() );
 
+			const commands = Object.values( propertyToCommandMap )
+				.map( commandName => editor.commands.get( commandName ) );
+
+			view.bind( 'isEnabled' ).toMany( commands, 'isEnabled', ( ...areEnabled ) => (
+				areEnabled.some( isCommandEnabled => isCommandEnabled )
+			) );
+
 			return view;
 		} );
 	}
@@ -256,17 +276,9 @@ export default class TableCellPropertiesUI extends Plugin {
 	_fillViewFormFromCommandValues() {
 		const commands = this.editor.commands;
 
-		this.view.set( {
-			borderStyle: commands.get( 'tableCellBorderStyle' ).value || '',
-			borderColor: commands.get( 'tableCellBorderColor' ).value || '',
-			borderWidth: commands.get( 'tableCellBorderWidth' ).value || '',
-			width: commands.get( 'tableCellWidth' ).value || '',
-			height: commands.get( 'tableCellHeight' ).value || '',
-			padding: commands.get( 'tableCellPadding' ).value || '',
-			backgroundColor: commands.get( 'tableCellBackgroundColor' ).value || '',
-			horizontalAlignment: commands.get( 'tableCellHorizontalAlignment' ).value || '',
-			verticalAlignment: commands.get( 'tableCellVerticalAlignment' ).value || ''
-		} );
+		Object.entries( propertyToCommandMap )
+			.map( ( [ property, commandName ] ) => [ property, commands.get( commandName ).value || '' ] )
+			.forEach( ( [ property, value ] ) => this.view.set( property, value ) );
 	}
 
 	/**

packages/ckeditor5-table/src/tableproperties/tablepropertiesui.js

@@ -32,6 +32,17 @@ import { debounce } from 'lodash-es';
 
 const ERROR_TEXT_TIMEOUT = 500;
 
+// Map of view properties and related commands.
+const propertyToCommandMap = {
+	borderStyle: 'tableBorderStyle',
+	borderColor: 'tableBorderColor',
+	borderWidth: 'tableBorderWidth',
+	backgroundColor: 'tableBackgroundColor',
+	width: 'tableWidth',
+	height: 'tableHeight',
+	alignment: 'tableAlignment'
+};
+
 /**
  * The table properties UI plugin. It introduces the `'tableProperties'` button
  * that opens a form allowing to specify visual styling of an entire table.
@@ -110,6 +121,13 @@ export default class TablePropertiesUI extends Plugin {
 
 			this.listenTo( view, 'execute', () => this._showView() );
 
+			const commands = Object.values( propertyToCommandMap )
+				.map( commandName => editor.commands.get( commandName ) );
+
+			view.bind( 'isEnabled' ).toMany( commands, 'isEnabled', ( ...areEnabled ) => (
+				areEnabled.some( isCommandEnabled => isCommandEnabled )
+			) );
+
 			return view;
 		} );
 	}
@@ -248,15 +266,9 @@ export default class TablePropertiesUI extends Plugin {
 	_fillViewFormFromCommandValues() {
 		const commands = this.editor.commands;
 
-		this.view.set( {
-			borderStyle: commands.get( 'tableBorderStyle' ).value || '',
-			borderColor: commands.get( 'tableBorderColor' ).value || '',
-			borderWidth: commands.get( 'tableBorderWidth' ).value || '',
-			backgroundColor: commands.get( 'tableBackgroundColor' ).value || '',
-			width: commands.get( 'tableWidth' ).value || '',
-			height: commands.get( 'tableHeight' ).value || '',
-			alignment: commands.get( 'tableAlignment' ).value || ''
-		} );
+		Object.entries( propertyToCommandMap )
+			.map( ( [ property, commandName ] ) => [ property, commands.get( commandName ).value || '' ] )
+			.forEach( ( [ property, value ] ) => this.view.set( property, value ) );
 	}
 
 	/**

packages/ckeditor5-table/tests/tablecellproperties/tablecellpropertiesui.js

@@ -121,6 +121,28 @@ describe( 'table cell properties', () => {
 					tableCellPropertiesButton.fire( 'execute' );
 					sinon.assert.calledOnce( spy );
 				} );
+
+				it( 'should be disabled if all of the table cell properties commands are disabled', () => {
+					[
+						'tableCellBorderStyle',
+						'tableCellBorderColor',
+						'tableCellBorderWidth',
+						'tableCellWidth',
+						'tableCellHeight',
+						'tableCellPadding',
+						'tableCellBackgroundColor',
+						'tableCellHorizontalAlignment',
+						'tableCellVerticalAlignment'
+					].forEach( command => {
+						editor.commands.get( command ).isEnabled = false;
+					} );
+
+					expect( tableCellPropertiesButton.isEnabled ).to.be.false;
+
+					editor.commands.get( 'tableCellBackgroundColor' ).isEnabled = true;
+
+					expect( tableCellPropertiesButton.isEnabled ).to.be.true;
+				} );
 			} );
 		} );
 

packages/ckeditor5-table/tests/tableproperties/tablepropertiesui.js

@@ -120,6 +120,26 @@ describe( 'table properties', () => {
 					tablePropertiesButton.fire( 'execute' );
 					sinon.assert.calledOnce( spy );
 				} );
+
+				it( 'should be disabled if all of the table properties commands are disabled', () => {
+					[
+						'tableBorderStyle',
+						'tableBorderColor',
+						'tableBorderWidth',
+						'tableBackgroundColor',
+						'tableWidth',
+						'tableHeight',
+						'tableAlignment'
+					].forEach( command => {
+						editor.commands.get( command ).isEnabled = false;
+					} );
+
+					expect( tablePropertiesButton.isEnabled ).to.be.false;
+
+					editor.commands.get( 'tableBackgroundColor' ).isEnabled = true;
+
+					expect( tablePropertiesButton.isEnabled ).to.be.true;
+				} );
 			} );
 		} );