@ckeditor/ckeditor5-alignment 35.3.2 → 36.0.0

package/src/alignmentediting.js

@@ -1,188 +1,147 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/alignmentediting
  */
-
 import { Plugin } from 'ckeditor5/src/core';
-
 import AlignmentCommand from './alignmentcommand';
 import { isDefault, isSupported, normalizeAlignmentOptions, supportedOptions } from './utils';
-
 /**
  * The alignment editing feature. It introduces the {@link module:alignment/alignmentcommand~AlignmentCommand command} and adds
  * the `alignment` attribute for block elements in the {@link module:engine/model/model~Model model}.
- * @extends module:core/plugin~Plugin
  */
 export default class AlignmentEditing extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'AlignmentEditing';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	constructor( editor ) {
-		super( editor );
-
-		editor.config.define( 'alignment', {
-			options: [ ...supportedOptions.map( option => ( { name: option } ) ) ]
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const locale = editor.locale;
-		const schema = editor.model.schema;
-
-		const options = normalizeAlignmentOptions( editor.config.get( 'alignment.options' ) );
-
-		// Filter out unsupported options and those that are redundant, e.g. `left` in LTR / `right` in RTL mode.
-		const optionsToConvert = options.filter(
-			option => isSupported( option.name ) && !isDefault( option.name, locale )
-		);
-
-		// Once there is at least one `className` defined, we switch to alignment with classes.
-		const shouldUseClasses = optionsToConvert.some( option => !!option.className );
-
-		// Allow alignment attribute on all blocks.
-		schema.extend( '$block', { allowAttributes: 'alignment' } );
-		editor.model.schema.setAttributeProperties( 'alignment', { isFormatting: true } );
-
-		if ( shouldUseClasses ) {
-			editor.conversion.attributeToAttribute( buildClassDefinition( optionsToConvert ) );
-		} else {
-			// Downcast inline styles.
-			editor.conversion.for( 'downcast' ).attributeToAttribute( buildDowncastInlineDefinition( optionsToConvert ) );
-		}
-
-		const upcastInlineDefinitions = buildUpcastInlineDefinitions( optionsToConvert );
-
-		// Always upcast from inline styles.
-		for ( const definition of upcastInlineDefinitions ) {
-			editor.conversion.for( 'upcast' ).attributeToAttribute( definition );
-		}
-
-		const upcastCompatibilityDefinitions = buildUpcastCompatibilityDefinitions( optionsToConvert );
-
-		// Always upcast from deprecated `align` attribute.
-		for ( const definition of upcastCompatibilityDefinitions ) {
-			editor.conversion.for( 'upcast' ).attributeToAttribute( definition );
-		}
-
-		editor.commands.add( 'alignment', new AlignmentCommand( editor ) );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'AlignmentEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        editor.config.define('alignment', {
+            options: supportedOptions.map(option => ({ name: option }))
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const locale = editor.locale;
+        const schema = editor.model.schema;
+        const options = normalizeAlignmentOptions(editor.config.get('alignment.options'));
+        // Filter out unsupported options and those that are redundant, e.g. `left` in LTR / `right` in RTL mode.
+        const optionsToConvert = options.filter(option => isSupported(option.name) && !isDefault(option.name, locale));
+        // Once there is at least one `className` defined, we switch to alignment with classes.
+        const shouldUseClasses = optionsToConvert.some(option => !!option.className);
+        // Allow alignment attribute on all blocks.
+        schema.extend('$block', { allowAttributes: 'alignment' });
+        editor.model.schema.setAttributeProperties('alignment', { isFormatting: true });
+        if (shouldUseClasses) {
+            editor.conversion.attributeToAttribute(buildClassDefinition(optionsToConvert));
+        }
+        else {
+            // Downcast inline styles.
+            editor.conversion.for('downcast').attributeToAttribute(buildDowncastInlineDefinition(optionsToConvert));
+        }
+        const upcastInlineDefinitions = buildUpcastInlineDefinitions(optionsToConvert);
+        // Always upcast from inline styles.
+        for (const definition of upcastInlineDefinitions) {
+            editor.conversion.for('upcast').attributeToAttribute(definition);
+        }
+        const upcastCompatibilityDefinitions = buildUpcastCompatibilityDefinitions(optionsToConvert);
+        // Always upcast from deprecated `align` attribute.
+        for (const definition of upcastCompatibilityDefinitions) {
+            editor.conversion.for('upcast').attributeToAttribute(definition);
+        }
+        editor.commands.add('alignment', new AlignmentCommand(editor));
+    }
 }
-
-// Prepare downcast conversion definition for inline alignment styling.
-// @private
-function buildDowncastInlineDefinition( options ) {
-	const definition = {
-		model: {
-			key: 'alignment',
-			values: options.map( option => option.name )
-		},
-		view: {}
-	};
-
-	for ( const { name } of options ) {
-		definition.view[ name ] = {
-			key: 'style',
-			value: {
-				'text-align': name
-			}
-		};
-	}
-
-	return definition;
-}
-
-// Prepare upcast definitions for inline alignment styles.
-// @private
-function buildUpcastInlineDefinitions( options ) {
-	const definitions = [];
-
-	for ( const { name } of options ) {
-		definitions.push( {
-			view: {
-				key: 'style',
-				value: {
-					'text-align': name
-				}
-			},
-			model: {
-				key: 'alignment',
-				value: name
-			}
-		} );
-	}
-
-	return definitions;
+/**
+ * Prepare downcast conversion definition for inline alignment styling.
+ */
+function buildDowncastInlineDefinition(options) {
+    const view = {};
+    for (const { name } of options) {
+        view[name] = {
+            key: 'style',
+            value: {
+                'text-align': name
+            }
+        };
+    }
+    const definition = {
+        model: {
+            key: 'alignment',
+            values: options.map(option => option.name)
+        },
+        view
+    };
+    return definition;
 }
-
-// Prepare upcast definitions for deprecated `align` attribute.
-// @private
-function buildUpcastCompatibilityDefinitions( options ) {
-	const definitions = [];
-
-	for ( const { name } of options ) {
-		definitions.push( {
-			view: {
-				key: 'align',
-				value: name
-			},
-			model: {
-				key: 'alignment',
-				value: name
-			}
-		} );
-	}
-
-	return definitions;
+/**
+ * Prepare upcast definitions for inline alignment styles.
+ */
+function buildUpcastInlineDefinitions(options) {
+    const definitions = [];
+    for (const { name } of options) {
+        definitions.push({
+            view: {
+                key: 'style',
+                value: {
+                    'text-align': name
+                }
+            },
+            model: {
+                key: 'alignment',
+                value: name
+            }
+        });
+    }
+    return definitions;
 }
-
-// Prepare conversion definitions for upcast and downcast alignment with classes.
-// @private
-function buildClassDefinition( options ) {
-	const definition = {
-		model: {
-			key: 'alignment',
-			values: options.map( option => option.name )
-		},
-		view: {}
-	};
-
-	for ( const option of options ) {
-		definition.view[ option.name ] = {
-			key: 'class',
-			value: option.className
-		};
-	}
-
-	return definition;
+/**
+ * Prepare upcast definitions for deprecated `align` attribute.
+ */
+function buildUpcastCompatibilityDefinitions(options) {
+    const definitions = [];
+    for (const { name } of options) {
+        definitions.push({
+            view: {
+                key: 'align',
+                value: name
+            },
+            model: {
+                key: 'alignment',
+                value: name
+            }
+        });
+    }
+    return definitions;
 }
-
 /**
- * The alignment configuration format descriptor.
- *
- *		const alignmentFormat = {
- *			name: 'right',
- *			className: 'my-align-right-class'
- *		}
- *
- * @typedef {Object} module:alignment/alignmentediting~AlignmentFormat
- *
- * @property {'left'|'right'|'center'|'justify'} name One of the alignment names options.
- *
- * @property {String} className The CSS class used to represent the style in the view.
- * Used to override default, inline styling for alignment.
+ * Prepare conversion definitions for upcast and downcast alignment with classes.
  */
+function buildClassDefinition(options) {
+    const view = {};
+    for (const option of options) {
+        view[option.name] = {
+            key: 'class',
+            value: option.className
+        };
+    }
+    const definition = {
+        model: {
+            key: 'alignment',
+            values: options.map(option => option.name)
+        },
+        view
+    };
+    return definition;
+}

package/src/alignmentui.js

@@ -1,162 +1,124 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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';
-
-const iconsMap = new Map( [
-	[ 'left', icons.alignLeft ],
-	[ 'right', icons.alignRight ],
-	[ 'center', icons.alignCenter ],
-	[ 'justify', icons.alignJustify ]
-] );
-
+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.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class AlignmentUI extends Plugin {
-	/**
-	 * Returns the localized option titles provided by the plugin.
-	 *
-	 * The following localized titles corresponding with
-	 * {@link module:alignment/alignment~AlignmentConfig#options} are available:
-	 *
-	 * * `'left'`,
-	 * * `'right'`,
-	 * * `'center'`,
-	 * * `'justify'`.
-	 *
-	 * @readonly
-	 * @type {Object.<String,String>}
-	 */
-	get localizedOptionTitles() {
-		const t = this.editor.t;
-
-		return {
-			'left': t( 'Align left' ),
-			'right': t( 'Align right' ),
-			'center': t( 'Align center' ),
-			'justify': t( 'Justify' )
-		};
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'AlignmentUI';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		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.
-			const buttons = options.map( option => componentFactory.create( `alignment:${ option.name }` ) );
-			addToolbarToDropdown( dropdownView, buttons, { enableActiveItemFocusOnDropdownOpen: true } );
-
-			// Configure dropdown properties an behavior.
-			dropdownView.buttonView.set( {
-				label: t( 'Text alignment' ),
-				tooltip: true
-			} );
-
-			dropdownView.toolbarView.isVertical = true;
-			dropdownView.toolbarView.ariaLabel = t( 'Text alignment toolbar' );
-
-			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' );
-
-			// Change icon to reflect current selection's alignment.
-			dropdownView.buttonView.bind( 'icon' ).toMany( buttons, 'isOn', ( ...areActive ) => {
-				// Get the index of an active button.
-				const index = areActive.findIndex( value => value );
-
-				// If none of the commands is active, display either defaultIcon or the first button's icon.
-				if ( index < 0 ) {
-					return defaultIcon;
-				}
-
-				// Return active button's icon.
-				return buttons[ index ].icon;
-			} );
-
-			// Enable button if any of the buttons is enabled.
-			dropdownView.bind( 'isEnabled' ).toMany( buttons, 'isEnabled', ( ...areEnabled ) => areEnabled.some( isEnabled => 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.
-	 *
-	 * @private
-	 * @param {String} option The name of the alignment option for which the button is added.
-	 */
-	_addButton( option ) {
-		const editor = this.editor;
-
-		editor.ui.componentFactory.add( `alignment:${ option }`, locale => {
-			const command = 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;
-		} );
-	}
+    /**
+     * Returns the localized option titles provided by the plugin.
+     *
+     * The following localized titles corresponding with
+     * {@link module:alignment/alignment~AlignmentConfig#options} are available:
+     *
+     * * `'left'`,
+     * * `'right'`,
+     * * `'center'`,
+     * * `'justify'`.
+     *
+     * @readonly
+     */
+    get localizedOptionTitles() {
+        const t = this.editor.t;
+        return {
+            'left': t('Align left'),
+            'right': t('Align right'),
+            'center': t('Align center'),
+            'justify': t('Justify')
+        };
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'AlignmentUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        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}`)), {
+                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 = 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.
+     */
+    _addButton(option) {
+        const editor = this.editor;
+        editor.ui.componentFactory.add(`alignment:${option}`, locale => {
+            const command = 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;
+        });
+    }
 }

package/src/index.js

@@ -1,12 +1,10 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
-
 export { default as Alignment } from './alignment';
 export { default as AlignmentEditing } from './alignmentediting';
 export { default as AlignmentUI } from './alignmentui';