Merge pull request #9250 from ckeditor/i/9174

Fixed (highlight): The remove highlight button now also gets disabled along with the main highlight command. Closes #9174.
ckeditor · Mar 16, 2021 · 04acdfe · 04acdfe
2 parents bdb49c5 + c6f5288
commit 04acdfe
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/packages/ckeditor5-highlight/src/highlightui.js b/packages/ckeditor5-highlight/src/highlightui.js
@@ -94,8 +94,11 @@ export default class HighlightUI extends Plugin {
 	 */
 	_addRemoveHighlightButton() {
 		const t = this.editor.t;
+		const command = this.editor.commands.get( 'highlight' );
 
-		this._addButton( 'removeHighlight', t( 'Remove highlight' ), icons.eraser );
+		this._addButton( 'removeHighlight', t( 'Remove highlight' ), icons.eraser, null, button => {
+			button.bind( 'isEnabled' ).to( command, 'isEnabled' );
+		} );
 	}
 
 	/**
@@ -124,10 +127,11 @@ export default class HighlightUI extends Plugin {
 	 * @param {String} name The name of the button.
 	 * @param {String} label The label for the button.
 	 * @param {String} icon The button icon.
-	 * @param {Function} [decorateButton=()=>{}] Additional method for extending the button.
+	 * @param {*} value The `value` property passed to the executed command.
+	 * @param {Function} decorateButton A callback getting ButtonView instance so that it can be further customized.
 	 * @private
 	 */
-	_addButton( name, label, icon, value, decorateButton = () => {} ) {
+	_addButton( name, label, icon, value, decorateButton ) {
 		const editor = this.editor;
 
 		editor.ui.componentFactory.add( name, locale => {

diff --git a/packages/ckeditor5-highlight/tests/highlightui.js b/packages/ckeditor5-highlight/tests/highlightui.js
@@ -58,6 +58,7 @@ describe( 'HighlightUI', () => {
 			} )
 			.then( newEditor => {
 				editor = newEditor;
+				command = editor.commands.get( 'highlight' );
 			} );
 	} );
 
@@ -67,11 +68,10 @@ describe( 'HighlightUI', () => {
 		return editor.destroy();
 	} );
 
-	describe( 'highlight Dropdown', () => {
+	describe( 'highlight dropdown', () => {
 		let dropdown;
 
 		beforeEach( () => {
-			command = editor.commands.get( 'highlight' );
 			dropdown = editor.ui.componentFactory.create( 'highlight' );
 		} );
 
@@ -246,4 +246,29 @@ describe( 'HighlightUI', () => {
 			}
 		} );
 	} );
+
+	describe( 'highlight remove', () => {
+		let removeHighlightButton;
+
+		beforeEach( () => {
+			removeHighlightButton = editor.ui.componentFactory.create( 'removeHighlight' );
+		} );
+
+		it( 'removeButton has the base properties', () => {
+			expect( editor.ui.componentFactory.has( 'removeHighlight' ) ).to.be.true;
+			expect( removeHighlightButton ).to.have.property( 'tooltip', true );
+			expect( removeHighlightButton ).to.have.property( 'label', 'Remove highlight' );
+			expect( removeHighlightButton ).to.have.property( 'icon', eraserIcon );
+		} );
+
+		describe( 'model to command binding', () => {
+			it( 'isEnabled', () => {
+				command.isEnabled = false;
+				expect( removeHighlightButton.isEnabled ).to.be.false;
+
+				command.isEnabled = true;
+				expect( removeHighlightButton.isEnabled ).to.be.true;
+			} );
+		} );
+	} );
 } );