Set UI buttons as toggleable

src/highlightui.js

@@ -120,6 +120,7 @@ export default class HighlightUI extends Plugin {
 			button.bind( 'isEnabled' ).to( command, 'isEnabled' );
 			button.bind( 'isOn' ).to( command, 'value', value => value === option.model );
 			button.iconView.fillColor = option.color;
+			button.isToggleable = true;
 		}
 	}
 
@@ -187,7 +188,8 @@ export default class HighlightUI extends Plugin {
 				// Holds last executed highlighter.
 				lastExecuted: startingHighlighter.model,
 				// Holds current highlighter to execute (might be different then last used).
-				commandValue: startingHighlighter.model
+				commandValue: startingHighlighter.model,
+				isToggleable: true
 			} );
 
 			// Dropdown button changes to selection (command.value):

tests/highlightui.js

@@ -80,6 +80,7 @@ describe( 'HighlightUI', () => {
 
 			expect( button ).to.have.property( 'tooltip', 'Highlight' );
 			expect( button ).to.have.property( 'icon', markerIcon );
+			expect( button ).to.have.property( 'isToggleable', true );
 		} );
 
 		it( 'should have proper icons in dropdown', () => {
@@ -124,6 +125,13 @@ describe( 'HighlightUI', () => {
 				.to.deep.equal( [ false, true, false, false, false, false, undefined, false ] );
 		} );
 
+		it( 'should mark as toggleable all markers and pens', () => {
+			const toolbar = dropdown.toolbarView;
+
+			expect( toolbar.items.map( item => item.isToggleable ) )
+				.to.deep.equal( [ true, true, true, true, true, true, undefined, false ] );
+		} );
+
 		describe( 'toolbar button behavior', () => {
 			let button, buttons, options;