807a1e87-d3b1-42e0-818f-814095f68d29

Committed 08 Sep 2023 12:24PM UTC coverage: 100.0%. Remained the same

Build # 807a1e87-d3b1-42e0-818f-814095f68d29

Build Type

push

circleci

Committed by

illia-stv

Commit Message

Fix (ckbox): remove focus helper

Run Details

12401 of 12401 branches covered (100.0%)

Branch coverage included in aggregate %.

32590 of 32590 relevant lines covered (100.0%)

11872.08 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

100.0

/packages/ckeditor5-alignment/src/alignmentui.ts

/**
 * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

/**
 * @module alignment/alignmentui
 */

import { Plugin, icons } from 'ckeditor5/src/core';
import { ButtonView, createDropdown, addToolbarToDropdown } from 'ckeditor5/src/ui';

import { isSupported, normalizeAlignmentOptions } from './utils';
import type { SupportedOption } from './alignmentconfig';
import type AlignmentCommand from './alignmentcommand';

const iconsMap = new Map( [
        [ 'left', icons.alignLeft ],
        [ 'right', icons.alignRight ],
        [ 'center', icons.alignCenter ],
        [ 'justify', icons.alignJustify ]
] );

/**
 * The default alignment UI plugin.
 *
 * It introduces the `'alignment:left'`, `'alignment:right'`, `'alignment:center'` and `'alignment:justify'` buttons
 * and the `'alignment'` dropdown.
 */
export default class AlignmentUI extends Plugin {
        /**
         * Returns the localized option titles provided by the plugin.
         *
         * The following localized titles corresponding with
         * {@link module:alignment/alignmentconfig~AlignmentConfig#options} are available:
         *
         * * `'left'`,
         * * `'right'`,
         * * `'center'`,
         * * `'justify'`.
         *
         * @readonly
         */
        public get localizedOptionTitles(): Record<SupportedOption, string> {
                const t = this.editor.t;

                return {
                        'left': t( 'Align left' ),
                        'right': t( 'Align right' ),
                        'center': t( 'Align center' ),
                        'justify': t( 'Justify' )
                };
        }

        /**
         * @inheritDoc
         */
        public static get pluginName() {
                return 'AlignmentUI' as const;
        }

        /**
         * @inheritDoc
         */
        public init(): void {
                const editor = this.editor;
                const componentFactory = editor.ui.componentFactory;
                const t = editor.t;
                const options = normalizeAlignmentOptions( editor.config.get( 'alignment.options' )! );

                options
                        .map( option => option.name )
                        .filter( isSupported )
                        .forEach( option => this._addButton( option ) );

                componentFactory.add( 'alignment', locale => {
                        const dropdownView = createDropdown( locale );

                        // Add existing alignment buttons to dropdown's toolbar.
                        addToolbarToDropdown(
                                dropdownView,
                                () => options.map( option => componentFactory.create( `alignment:${ option.name }` ) ) as Array<ButtonView>,
                                {
                                        enableActiveItemFocusOnDropdownOpen: true,
                                        isVertical: true,
                                        ariaLabel: t( 'Text alignment toolbar' )
                                }
                        );

                        // Configure dropdown properties an behavior.
                        dropdownView.buttonView.set( {
                                label: t( 'Text alignment' ),
                                tooltip: true
                        } );

                        dropdownView.extendTemplate( {
                                attributes: {
                                        class: 'ck-alignment-dropdown'
                                }
                        } );

                        // The default icon depends on the direction of the content.
                        const defaultIcon = locale.contentLanguageDirection === 'rtl' ? iconsMap.get( 'right' ) : iconsMap.get( 'left' );
                        const command: AlignmentCommand = editor.commands.get( 'alignment' )!;

                        // Change icon to reflect current selection's alignment.
                        dropdownView.buttonView.bind( 'icon' ).to( command, 'value', value => iconsMap.get( value ) || defaultIcon );

                        // Enable button if any of the buttons is enabled.
                        dropdownView.bind( 'isEnabled' ).to( command, 'isEnabled' );

                        // Focus the editable after executing the command.
                        // Overrides a default behaviour where the focus is moved to the dropdown button (#12125).
                        this.listenTo( dropdownView, 'execute', () => {
                                editor.editing.view.focus();
                        } );

                        return dropdownView;
                } );
        }

        /**
         * Helper method for initializing the button and linking it with an appropriate command.
         *
         * @param option The name of the alignment option for which the button is added.
         */
        private _addButton( option: SupportedOption ): void {
                const editor = this.editor;

                editor.ui.componentFactory.add( `alignment:${ option }`, locale => {
                        const command: AlignmentCommand = editor.commands.get( 'alignment' )!;
                        const buttonView = new ButtonView( locale );

                        buttonView.set( {
                                label: this.localizedOptionTitles[ option ],
                                icon: iconsMap.get( option ),
                                tooltip: true,
                                isToggleable: true
                        } );

                        // Bind button model to command.
                        buttonView.bind( 'isEnabled' ).to( command );
                        buttonView.bind( 'isOn' ).to( command, 'value', value => value === option );

                        // Execute command.
                        this.listenTo( buttonView, 'execute', () => {
                                editor.execute( 'alignment', { value: option } );
                                editor.editing.view.focus();
                        } );

                        return buttonView;
                } );
        }
}

1	/**
2	* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3	* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4	*/
5
6	/**
7	* @module alignment/alignmentui
8	*/
9
10	import { Plugin, icons } from 'ckeditor5/src/core';
11	import { ButtonView, createDropdown, addToolbarToDropdown } from 'ckeditor5/src/ui';
12
13	import { isSupported, normalizeAlignmentOptions } from './utils';
14	import type { SupportedOption } from './alignmentconfig';
15	import type AlignmentCommand from './alignmentcommand';
16
17	const iconsMap = new Map( [	1✔
18	[ 'left', icons.alignLeft ],
19	[ 'right', icons.alignRight ],
20	[ 'center', icons.alignCenter ],
21	[ 'justify', icons.alignJustify ]
22	] );
23
24	/**
25	* The default alignment UI plugin.
26	*
27	* It introduces the `'alignment:left'`, `'alignment:right'`, `'alignment:center'` and `'alignment:justify'` buttons
28	* and the `'alignment'` dropdown.
29	*/
30	export default class AlignmentUI extends Plugin {
31	/**
32	* Returns the localized option titles provided by the plugin.
33	*
34	* The following localized titles corresponding with
35	* {@link module:alignment/alignmentconfig~AlignmentConfig#options} are available:
36	*
37	* * `'left'`,
38	* * `'right'`,
39	* * `'center'`,
40	* * `'justify'`.
41	*
42	* @readonly
43	*/
44	public get localizedOptionTitles(): Record<SupportedOption, string> {
45	const t = this.editor.t;	47✔
46
47	return {	47✔
48	'left': t( 'Align left' ),
49	'right': t( 'Align right' ),
50	'center': t( 'Align center' ),
51	'justify': t( 'Justify' )
52	};
53	}
54
55	/**
56	* @inheritDoc
57	*/
58	public static get pluginName() {
59	return 'AlignmentUI' as const;	160✔
60	}
61
62	/**
63	* @inheritDoc
64	*/
65	public init(): void {
66	const editor = this.editor;	40✔
67	const componentFactory = editor.ui.componentFactory;	40✔
68	const t = editor.t;	40✔
69	const options = normalizeAlignmentOptions( editor.config.get( 'alignment.options' )! );	40✔
70
71	options	40✔
72	.map( option => option.name )	150✔
73	.filter( isSupported )
74	.forEach( option => this._addButton( option ) );	150✔
75
76	componentFactory.add( 'alignment', locale => {	40✔
77	const dropdownView = createDropdown( locale );	17✔
78
79	// Add existing alignment buttons to dropdown's toolbar.
80	addToolbarToDropdown(	17✔
81	dropdownView,
82	() => options.map( option => componentFactory.create( `alignment:${ option.name }` ) ) as Array<ButtonView>,	26✔
83	{
84	enableActiveItemFocusOnDropdownOpen: true,
85	isVertical: true,
86	ariaLabel: t( 'Text alignment toolbar' )
87	}
88	);
89
90	// Configure dropdown properties an behavior.
91	dropdownView.buttonView.set( {	17✔
92	label: t( 'Text alignment' ),
93	tooltip: true
94	} );
95
96	dropdownView.extendTemplate( {	17✔
97	attributes: {
98	class: 'ck-alignment-dropdown'
99	}
100	} );
101
102	// The default icon depends on the direction of the content.
103	const defaultIcon = locale.contentLanguageDirection === 'rtl' ? iconsMap.get( 'right' ) : iconsMap.get( 'left' );	17✔
104	const command: AlignmentCommand = editor.commands.get( 'alignment' )!;	17✔
105
106	// Change icon to reflect current selection's alignment.
107	dropdownView.buttonView.bind( 'icon' ).to( command, 'value', value => iconsMap.get( value ) \|\| defaultIcon );	21✔
108
109	// Enable button if any of the buttons is enabled.
110	dropdownView.bind( 'isEnabled' ).to( command, 'isEnabled' );	17✔
111
112	// Focus the editable after executing the command.
113	// Overrides a default behaviour where the focus is moved to the dropdown button (#12125).
114	this.listenTo( dropdownView, 'execute', () => {	17✔
115	editor.editing.view.focus();	1✔
116	} );
117
118	return dropdownView;	17✔
119	} );
120	}
121
122	/**
123	* Helper method for initializing the button and linking it with an appropriate command.
124	*
125	* @param option The name of the alignment option for which the button is added.
126	*/
127	private _addButton( option: SupportedOption ): void {
128	const editor = this.editor;	150✔
129
130	editor.ui.componentFactory.add( `alignment:${ option }`, locale => {	150✔
131	const command: AlignmentCommand = editor.commands.get( 'alignment' )!;	46✔
132	const buttonView = new ButtonView( locale );	46✔
133
134	buttonView.set( {	46✔
135	label: this.localizedOptionTitles[ option ],
136	icon: iconsMap.get( option ),
137	tooltip: true,
138	isToggleable: true
139	} );
140
141	// Bind button model to command.
142	buttonView.bind( 'isEnabled' ).to( command );	46✔
143	buttonView.bind( 'isOn' ).to( command, 'value', value => value === option );	65✔
144
145	// Execute command.
146	this.listenTo( buttonView, 'execute', () => {	46✔
147	editor.execute( 'alignment', { value: option } );	5✔
148	editor.editing.view.focus();	5✔
149	} );
150
151	return buttonView;	46✔
152	} );
153	}
154	}

ckeditor / ckeditor5 / 807a1e87-d3b1-42e0-818f-814095f68d29

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous