Add menu bar integration to all basic styles.

packages/ckeditor5-basic-styles/src/bold/boldui.ts

@@ -9,7 +9,7 @@
 
 import { Plugin, icons } from 'ckeditor5/src/core.js';
 import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
-import type AttributeCommand from '../attributecommand.js';
+import { getButtonCreator } from '../utils.js';
 
 const BOLD = 'bold';
 
@@ -29,11 +29,20 @@ export default class BoldUI extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
-		const command: AttributeCommand = editor.commands.get( BOLD )!;
+		const t = editor.locale.t;
+		const command = editor.commands.get( BOLD )!;
+		const createButton = getButtonCreator( {
+			editor,
+			commandName: BOLD,
+			plugin: this,
+			icon: icons.bold,
+			label: t( 'Bold' ),
+			keystroke: 'CTRL+B'
+		} );
 
 		// Add bold button to feature components.
 		editor.ui.componentFactory.add( BOLD, () => {
-			const buttonView = this._createButton( ButtonView );
+			const buttonView = createButton( ButtonView );
 
 			buttonView.set( {
 				tooltip: true
@@ -45,35 +54,7 @@ export default class BoldUI extends Plugin {
 		} );
 
 		editor.ui.componentFactory.add( 'menuBar:' + BOLD, () => {
-			return this._createButton( MenuBarMenuListItemButtonView );
-		} );
-	}
-
-	/**
-	 * TODO
-	 */
-	private _createButton<T extends typeof ButtonView | typeof MenuBarMenuListItemButtonView>( ButtonClass: T ): InstanceType<T> {
-		const editor = this.editor;
-		const locale = editor.locale;
-		const command: AttributeCommand = editor.commands.get( BOLD )!;
-		const view = new ButtonClass( editor.locale ) as InstanceType<T>;
-		const t = locale.t;
-
-		view.set( {
-			label: t( 'Bold' ),
-			icon: icons.bold,
-			keystroke: 'CTRL+B',
-			isToggleable: true
+			return createButton( MenuBarMenuListItemButtonView );
 		} );
-
-		view.bind( 'isEnabled' ).to( command, 'isEnabled' );
-
-		// Execute the command.
-		this.listenTo( view, 'execute', () => {
-			editor.execute( BOLD );
-			editor.editing.view.focus();
-		} );
-
-		return view;
 	}
 }

packages/ckeditor5-basic-styles/src/code/codeui.ts

@@ -8,9 +8,8 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core.js';
-import { ButtonView } from 'ckeditor5/src/ui.js';
-
-import type AttributeCommand from '../attributecommand.js';
+import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import { getButtonCreator } from '../utils.js';
 
 import codeIcon from '../../theme/icons/code.svg';
 
@@ -34,29 +33,32 @@ export default class CodeUI extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
-		const t = editor.t;
+		const t = editor.locale.t;
+		const createButton = getButtonCreator( {
+			editor,
+			commandName: CODE,
+			plugin: this,
+			icon: codeIcon,
+			label: t( 'Code' )
+		} );
 
 		// Add code button to feature components.
-		editor.ui.componentFactory.add( CODE, locale => {
-			const command: AttributeCommand = editor.commands.get( CODE )!;
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: t( 'Code' ),
-				icon: codeIcon,
-				tooltip: true,
-				isToggleable: true
+		editor.ui.componentFactory.add( CODE, () => {
+			const buttonView = createButton( ButtonView );
+			const command = editor.commands.get( CODE )!;
+
+			buttonView.set( {
+				tooltip: true
 			} );
 
-			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+			// Bind button model to command.
+			buttonView.bind( 'isOn' ).to( command, 'value' );
 
-			// Execute command.
-			this.listenTo( view, 'execute', () => {
-				editor.execute( CODE );
-				editor.editing.view.focus();
-			} );
+			return buttonView;
+		} );
 
-			return view;
+		editor.ui.componentFactory.add( 'menuBar:' + CODE, () => {
+			return createButton( MenuBarMenuListItemButtonView );
 		} );
 	}
 }

packages/ckeditor5-basic-styles/src/italic/italicui.ts

@@ -9,7 +9,7 @@
 
 import { Plugin } from 'ckeditor5/src/core.js';
 import { MenuBarMenuListItemButtonView, ButtonView } from 'ckeditor5/src/ui.js';
-import type AttributeCommand from '../attributecommand.js';
+import { getButtonCreator } from '../utils.js';
 
 import italicIcon from '../../theme/icons/italic.svg';
 
@@ -31,11 +31,20 @@ export default class ItalicUI extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
-		const command: AttributeCommand = editor.commands.get( ITALIC )!;
+		const command = editor.commands.get( ITALIC )!;
+		const t = editor.locale.t;
+		const createButton = getButtonCreator( {
+			editor,
+			commandName: ITALIC,
+			plugin: this,
+			icon: italicIcon,
+			keystroke: 'CTRL+I',
+			label: t( 'Italic' )
+		} );
 
 		// Add bold button to feature components.
 		editor.ui.componentFactory.add( ITALIC, () => {
-			const buttonView = this._createButton( ButtonView );
+			const buttonView = createButton( ButtonView );
 
 			buttonView.set( {
 				tooltip: true
@@ -47,35 +56,7 @@ export default class ItalicUI extends Plugin {
 		} );
 
 		editor.ui.componentFactory.add( 'menuBar:' + ITALIC, () => {
-			return this._createButton( MenuBarMenuListItemButtonView );
-		} );
-	}
-
-	/**
-	 * TODO
-	 */
-	private _createButton<T extends typeof ButtonView | typeof MenuBarMenuListItemButtonView>( ButtonClass: T ): InstanceType<T> {
-		const editor = this.editor;
-		const locale = editor.locale;
-		const command: AttributeCommand = editor.commands.get( ITALIC )!;
-		const view = new ButtonClass( editor.locale ) as InstanceType<T>;
-		const t = locale.t;
-
-		view.set( {
-			label: t( 'Italic' ),
-			icon: italicIcon,
-			keystroke: 'CTRL+I',
-			isToggleable: true
+			return createButton( MenuBarMenuListItemButtonView );
 		} );
-
-		view.bind( 'isEnabled' ).to( command, 'isEnabled' );
-
-		// Execute the command.
-		this.listenTo( view, 'execute', () => {
-			editor.execute( ITALIC );
-			editor.editing.view.focus();
-		} );
-
-		return view;
 	}
 }

packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.ts

@@ -8,8 +8,8 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core.js';
-import { ButtonView } from 'ckeditor5/src/ui.js';
-import type AttributeCommand from '../attributecommand.js';
+import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import { getButtonCreator } from '../utils.js';
 
 import strikethroughIcon from '../../theme/icons/strikethrough.svg';
 
@@ -31,30 +31,33 @@ export default class StrikethroughUI extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
-		const t = editor.t;
+		const t = editor.locale.t;
+		const createButton = getButtonCreator( {
+			editor,
+			commandName: STRIKETHROUGH,
+			plugin: this,
+			icon: strikethroughIcon,
+			keystroke: 'CTRL+SHIFT+X',
+			label: t( 'Strikethrough' )
+		} );
 
 		// Add strikethrough button to feature components.
-		editor.ui.componentFactory.add( STRIKETHROUGH, locale => {
-			const command: AttributeCommand = editor.commands.get( STRIKETHROUGH )!;
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: t( 'Strikethrough' ),
-				icon: strikethroughIcon,
-				keystroke: 'CTRL+SHIFT+X',
-				tooltip: true,
-				isToggleable: true
+		editor.ui.componentFactory.add( STRIKETHROUGH, () => {
+			const buttonView = createButton( ButtonView );
+			const command = editor.commands.get( STRIKETHROUGH )!;
+
+			buttonView.set( {
+				tooltip: true
 			} );
 
-			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+			// Bind button model to command.
+			buttonView.bind( 'isOn' ).to( command, 'value' );
 
-			// Execute command.
-			this.listenTo( view, 'execute', () => {
-				editor.execute( STRIKETHROUGH );
-				editor.editing.view.focus();
-			} );
+			return buttonView;
+		} );
 
-			return view;
+		editor.ui.componentFactory.add( 'menuBar:' + STRIKETHROUGH, () => {
+			return createButton( MenuBarMenuListItemButtonView );
 		} );
 	}
 }

packages/ckeditor5-basic-styles/src/subscript/subscriptui.ts

@@ -8,8 +8,8 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core.js';
-import { ButtonView } from 'ckeditor5/src/ui.js';
-import type AttributeCommand from '../attributecommand.js';
+import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import { getButtonCreator } from '../utils.js';
 
 import subscriptIcon from '../../theme/icons/subscript.svg';
 
@@ -31,29 +31,32 @@ export default class SubscriptUI extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
-		const t = editor.t;
+		const t = editor.locale.t;
+		const createButton = getButtonCreator( {
+			editor,
+			commandName: SUBSCRIPT,
+			plugin: this,
+			icon: subscriptIcon,
+			label: t( 'Subscript' )
+		} );
 
 		// Add subscript button to feature components.
-		editor.ui.componentFactory.add( SUBSCRIPT, locale => {
-			const command: AttributeCommand = editor.commands.get( SUBSCRIPT )!;
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: t( 'Subscript' ),
-				icon: subscriptIcon,
-				tooltip: true,
-				isToggleable: true
+		editor.ui.componentFactory.add( SUBSCRIPT, () => {
+			const buttonView = createButton( ButtonView );
+			const command = editor.commands.get( SUBSCRIPT )!;
+
+			buttonView.set( {
+				tooltip: true
 			} );
 
-			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+			// Bind button model to command.
+			buttonView.bind( 'isOn' ).to( command, 'value' );
 
-			// Execute command.
-			this.listenTo( view, 'execute', () => {
-				editor.execute( SUBSCRIPT );
-				editor.editing.view.focus();
-			} );
+			return buttonView;
+		} );
 
-			return view;
+		editor.ui.componentFactory.add( 'menuBar:' + SUBSCRIPT, () => {
+			return createButton( MenuBarMenuListItemButtonView );
 		} );
 	}
 }

packages/ckeditor5-basic-styles/src/superscript/superscriptui.ts

@@ -8,8 +8,8 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core.js';
-import { ButtonView } from 'ckeditor5/src/ui.js';
-import type AttributeCommand from '../attributecommand.js';
+import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import { getButtonCreator } from '../utils.js';
 
 import superscriptIcon from '../../theme/icons/superscript.svg';
 
@@ -31,29 +31,32 @@ export default class SuperscriptUI extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
-		const t = editor.t;
+		const t = editor.locale.t;
+		const createButton = getButtonCreator( {
+			editor,
+			commandName: SUPERSCRIPT,
+			plugin: this,
+			icon: superscriptIcon,
+			label: t( 'Superscript' )
+		} );
 
 		// Add superscript button to feature components.
-		editor.ui.componentFactory.add( SUPERSCRIPT, locale => {
-			const command: AttributeCommand = editor.commands.get( SUPERSCRIPT )!;
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: t( 'Superscript' ),
-				icon: superscriptIcon,
-				tooltip: true,
-				isToggleable: true
+		editor.ui.componentFactory.add( SUPERSCRIPT, () => {
+			const buttonView = createButton( ButtonView );
+			const command = editor.commands.get( SUPERSCRIPT )!;
+
+			buttonView.set( {
+				tooltip: true
 			} );
 
-			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+			// Bind button model to command.
+			buttonView.bind( 'isOn' ).to( command, 'value' );
 
-			// Execute command.
-			this.listenTo( view, 'execute', () => {
-				editor.execute( SUPERSCRIPT );
-				editor.editing.view.focus();
-			} );
+			return buttonView;
+		} );
 
-			return view;
+		editor.ui.componentFactory.add( 'menuBar:' + SUPERSCRIPT, () => {
+			return createButton( MenuBarMenuListItemButtonView );
 		} );
 	}
 }