diff --git a/packages/ckeditor5-highlight/src/highlightui.js b/packages/ckeditor5-highlight/src/highlightui.js index 0c6a545f635..408a9f7b4ba 100644 --- 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 index 2f13dd2399d..00a4a73738e 100644 --- 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; + } ); + } ); + } ); } );