Skip to content

Commit

Permalink
Merge pull request #15909 from ckeditor/ck/app-menu-bar-basic-styles
Browse files Browse the repository at this point in the history 
Internal (basic-styles): Added menu bar integrations for the basic style features. Related to #15894.
  • Loading branch information
@oleq
oleq authored Mar 1, 2024
2 parents 54737db + ff81466 commit cce0db3
Show file tree
Hide file tree
Showing 9 changed files with 180 additions and 174 deletions.
45 changes: 13 additions & 32 deletions packages/ckeditor5-basic-styles/src/bold/boldui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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
Expand All @@ -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;
}
}
42 changes: 22 additions & 20 deletions packages/ckeditor5-basic-styles/src/code/codeui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 );
} );
}
}
45 changes: 13 additions & 32 deletions packages/ckeditor5-basic-styles/src/italic/italicui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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
Expand All @@ -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;
}
}
43 changes: 23 additions & 20 deletions packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 );
} );
}
}
41 changes: 22 additions & 19 deletions packages/ckeditor5-basic-styles/src/subscript/subscriptui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 );
} );
}
}
41 changes: 22 additions & 19 deletions packages/ckeditor5-basic-styles/src/superscript/superscriptui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 );
} );
}
}
Loading

0 comments on commit cce0db3

Please sign in to comment.