@ckeditor/ckeditor5-alignment 40.0.0 → 40.1.0

package/src/alignmentediting.js

@@ -1,147 +1,147 @@
-/**
- * @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}.
- */
-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));
-    }
-}
-/**
- * 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 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 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;
-}
-/**
- * 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;
-}
+/**
+ * @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}.
+ */
+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));
+    }
+}
+/**
+ * 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 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 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;
+}
+/**
+ * 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.d.ts

@@ -1,45 +1,45 @@
-/**
- * @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 } from 'ckeditor5/src/core';
-import type { SupportedOption } from './alignmentconfig';
-/**
- * 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
-     */
-    get localizedOptionTitles(): Record<SupportedOption, string>;
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "AlignmentUI";
-    /**
-     * @inheritDoc
-     */
-    init(): void;
-    /**
-     * 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;
-}
+/**
+ * @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 } from 'ckeditor5/src/core';
+import type { SupportedOption } from './alignmentconfig';
+/**
+ * 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
+     */
+    get localizedOptionTitles(): Record<SupportedOption, string>;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "AlignmentUI";
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * 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;
+}

package/src/alignmentui.js

@@ -1,124 +1,124 @@
-/**
- * @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]
-]);
-/**
- * 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
-     */
-    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;
-        });
-    }
-}
+/**
+ * @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]
+]);
+/**
+ * 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
+     */
+    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;
+        });
+    }
+}