diff --git a/packages/ckeditor5-highlight/src/highlightui.js b/packages/ckeditor5-highlight/src/highlightui.js index b4859843a0c..ef662aabb60 100644 --- a/packages/ckeditor5-highlight/src/highlightui.js +++ b/packages/ckeditor5-highlight/src/highlightui.js @@ -227,10 +227,13 @@ export default class HighlightUI extends Plugin { dropdownView.toolbarView.ariaLabel = t( 'Text highlight toolbar' ); // Execute current action from dropdown's split button action button. - // Also focus the editable after executing the command. + splitButtonView.on( 'execute', () => { + editor.execute( 'highlight', { value: splitButtonView.commandValue } ); + } ); + + // Focus the editable after executing the command. // It overrides a default behaviour where the focus is moved to the dropdown button (#12125). this.listenTo( dropdownView, 'execute', () => { - editor.execute( 'highlight', { value: splitButtonView.commandValue } ); editor.editing.view.focus(); } ); diff --git a/packages/ckeditor5-highlight/tests/highlightui.js b/packages/ckeditor5-highlight/tests/highlightui.js index c60b230442a..be24e1903ec 100644 --- a/packages/ckeditor5-highlight/tests/highlightui.js +++ b/packages/ckeditor5-highlight/tests/highlightui.js @@ -189,6 +189,15 @@ describe( 'HighlightUI', () => { validateButton( 5 ); } ); + it( 'should execute the command only once', () => { + const executeSpy = sinon.spy( command, 'execute' ); + + buttons[ 5 ].fire( 'execute' ); + + sinon.assert.calledOnce( executeSpy ); + sinon.assert.calledWith( executeSpy, { value: 'greenPen' } ); + } ); + it( 'should focus view after command execution', () => { const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' ); @@ -271,6 +280,15 @@ describe( 'HighlightUI', () => { expect( removeHighlightButton ).to.have.property( 'icon', eraserIcon ); } ); + it( 'should execute the command only once', () => { + const executeSpy = sinon.spy( command, 'execute' ); + + removeHighlightButton.fire( 'execute' ); + + sinon.assert.calledOnce( executeSpy ); + sinon.assert.calledWith( executeSpy, { value: null } ); + } ); + describe( 'model to command binding', () => { it( 'isEnabled', () => { command.isEnabled = false;