@ckeditor/ckeditor5-list 0.0.0-internal-20241017.0

package/src/listproperties/listpropertiesediting.js

@@ -0,0 +1,275 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module list/listproperties/listpropertiesediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ListEditing from '../list/listediting.js';
+import ListStartCommand from './liststartcommand.js';
+import ListStyleCommand from './liststylecommand.js';
+import ListReversedCommand from './listreversedcommand.js';
+import { listPropertiesUpcastConverter } from './converters.js';
+import { getAllSupportedStyleTypes, getListTypeFromListStyleType, getListStyleTypeFromTypeAttribute, getTypeAttributeFromListStyleType } from './utils/style.js';
+import ListPropertiesUtils from './listpropertiesutils.js';
+import { isNumberedListType } from '../list/utils/model.js';
+import { getNormalizedConfig } from './utils/config.js';
+const DEFAULT_LIST_TYPE = 'default';
+/**
+ * The document list properties engine feature.
+ *
+ * It registers the `'listStyle'`, `'listReversed'` and `'listStart'` commands if they are enabled in the configuration.
+ * Read more in {@link module:list/listconfig~ListPropertiesConfig}.
+ */
+export default class ListPropertiesEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ListEditing, ListPropertiesUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ListPropertiesEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        editor.config.define('list.properties', {
+            styles: true,
+            startIndex: false,
+            reversed: false
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const model = editor.model;
+        const listEditing = editor.plugins.get(ListEditing);
+        const enabledProperties = editor.config.get('list.properties');
+        const strategies = createAttributeStrategies(enabledProperties);
+        for (const strategy of strategies) {
+            strategy.addCommand(editor);
+            model.schema.extend('$listItem', { allowAttributes: strategy.attributeName });
+            // Register downcast strategy.
+            listEditing.registerDowncastStrategy({
+                scope: 'list',
+                attributeName: strategy.attributeName,
+                setAttributeOnDowncast(writer, attributeValue, viewElement) {
+                    strategy.setAttributeOnDowncast(writer, attributeValue, viewElement);
+                }
+            });
+        }
+        // Set up conversion.
+        editor.conversion.for('upcast').add(dispatcher => {
+            for (const strategy of strategies) {
+                dispatcher.on('element:ol', listPropertiesUpcastConverter(strategy));
+                dispatcher.on('element:ul', listPropertiesUpcastConverter(strategy));
+            }
+        });
+        // Verify if the list view element (ul or ol) requires refreshing.
+        listEditing.on('checkAttributes:list', (evt, { viewElement, modelAttributes }) => {
+            for (const strategy of strategies) {
+                if (strategy.getAttributeOnUpcast(viewElement) != modelAttributes[strategy.attributeName]) {
+                    evt.return = true;
+                    evt.stop();
+                }
+            }
+        });
+        // Reset list properties after indenting list items.
+        this.listenTo(editor.commands.get('indentList'), 'afterExecute', (evt, changedBlocks) => {
+            model.change(writer => {
+                for (const node of changedBlocks) {
+                    for (const strategy of strategies) {
+                        if (strategy.appliesToListItem(node)) {
+                            // Just reset the attribute.
+                            // If there is a previous indented list that this node should be merged into,
+                            // the postfixer will unify all the attributes of both sub-lists.
+                            writer.setAttribute(strategy.attributeName, strategy.defaultValue, node);
+                        }
+                    }
+                }
+            });
+        });
+        // Add or remove list properties attributes depending on the list type.
+        listEditing.on('postFixer', (evt, { listNodes, writer }) => {
+            for (const { node } of listNodes) {
+                for (const strategy of strategies) {
+                    // Check if attribute is valid.
+                    if (strategy.hasValidAttribute(node)) {
+                        continue;
+                    }
+                    // Add missing default property attributes...
+                    if (strategy.appliesToListItem(node)) {
+                        writer.setAttribute(strategy.attributeName, strategy.defaultValue, node);
+                    }
+                    // ...or remove invalid property attributes.
+                    else {
+                        writer.removeAttribute(strategy.attributeName, node);
+                    }
+                    evt.return = true;
+                }
+            }
+        });
+        // Make sure that all items in a single list (items at the same level & listType) have the same properties.
+        listEditing.on('postFixer', (evt, { listNodes, writer }) => {
+            for (const { node, previousNodeInList } of listNodes) {
+                // This is a first item of a nested list.
+                if (!previousNodeInList) {
+                    continue;
+                }
+                // This is a first block of a list of a different type.
+                if (previousNodeInList.getAttribute('listType') != node.getAttribute('listType')) {
+                    continue;
+                }
+                // Copy properties from the previous one.
+                for (const strategy of strategies) {
+                    const { attributeName } = strategy;
+                    if (!strategy.appliesToListItem(node)) {
+                        continue;
+                    }
+                    const value = previousNodeInList.getAttribute(attributeName);
+                    if (node.getAttribute(attributeName) != value) {
+                        writer.setAttribute(attributeName, value, node);
+                        evt.return = true;
+                    }
+                }
+            }
+        });
+    }
+}
+/**
+ * Creates an array of strategies for dealing with enabled listItem attributes.
+ */
+function createAttributeStrategies(enabledProperties) {
+    const strategies = [];
+    const normalizedConfig = getNormalizedConfig(enabledProperties);
+    if (enabledProperties.styles) {
+        const useAttribute = normalizedConfig.styles.useAttribute;
+        strategies.push({
+            attributeName: 'listStyle',
+            defaultValue: DEFAULT_LIST_TYPE,
+            viewConsumables: { styles: 'list-style-type' },
+            addCommand(editor) {
+                let supportedTypes = getAllSupportedStyleTypes();
+                if (useAttribute) {
+                    supportedTypes = supportedTypes.filter(styleType => !!getTypeAttributeFromListStyleType(styleType));
+                }
+                editor.commands.add('listStyle', new ListStyleCommand(editor, DEFAULT_LIST_TYPE, supportedTypes));
+            },
+            appliesToListItem(item) {
+                return item.getAttribute('listType') == 'numbered' || item.getAttribute('listType') == 'bulleted';
+            },
+            hasValidAttribute(item) {
+                if (!this.appliesToListItem(item)) {
+                    return !item.hasAttribute('listStyle');
+                }
+                if (!item.hasAttribute('listStyle')) {
+                    return false;
+                }
+                const value = item.getAttribute('listStyle');
+                if (value == DEFAULT_LIST_TYPE) {
+                    return true;
+                }
+                return getListTypeFromListStyleType(value) == item.getAttribute('listType');
+            },
+            setAttributeOnDowncast(writer, listStyle, element) {
+                if (listStyle && listStyle !== DEFAULT_LIST_TYPE) {
+                    if (useAttribute) {
+                        const value = getTypeAttributeFromListStyleType(listStyle);
+                        if (value) {
+                            writer.setAttribute('type', value, element);
+                            return;
+                        }
+                    }
+                    else {
+                        writer.setStyle('list-style-type', listStyle, element);
+                        return;
+                    }
+                }
+                writer.removeStyle('list-style-type', element);
+                writer.removeAttribute('type', element);
+            },
+            getAttributeOnUpcast(listParent) {
+                const style = listParent.getStyle('list-style-type');
+                if (style) {
+                    return style;
+                }
+                const attribute = listParent.getAttribute('type');
+                if (attribute) {
+                    return getListStyleTypeFromTypeAttribute(attribute);
+                }
+                return DEFAULT_LIST_TYPE;
+            }
+        });
+    }
+    if (enabledProperties.reversed) {
+        strategies.push({
+            attributeName: 'listReversed',
+            defaultValue: false,
+            viewConsumables: { attributes: 'reversed' },
+            addCommand(editor) {
+                editor.commands.add('listReversed', new ListReversedCommand(editor));
+            },
+            appliesToListItem(item) {
+                return item.getAttribute('listType') == 'numbered';
+            },
+            hasValidAttribute(item) {
+                return this.appliesToListItem(item) == item.hasAttribute('listReversed');
+            },
+            setAttributeOnDowncast(writer, listReversed, element) {
+                if (listReversed) {
+                    writer.setAttribute('reversed', 'reversed', element);
+                }
+                else {
+                    writer.removeAttribute('reversed', element);
+                }
+            },
+            getAttributeOnUpcast(listParent) {
+                return listParent.hasAttribute('reversed');
+            }
+        });
+    }
+    if (enabledProperties.startIndex) {
+        strategies.push({
+            attributeName: 'listStart',
+            defaultValue: 1,
+            viewConsumables: { attributes: 'start' },
+            addCommand(editor) {
+                editor.commands.add('listStart', new ListStartCommand(editor));
+            },
+            appliesToListItem(item) {
+                return isNumberedListType(item.getAttribute('listType'));
+            },
+            hasValidAttribute(item) {
+                return this.appliesToListItem(item) == item.hasAttribute('listStart');
+            },
+            setAttributeOnDowncast(writer, listStart, element) {
+                if (listStart == 0 || listStart > 1) {
+                    writer.setAttribute('start', listStart, element);
+                }
+                else {
+                    writer.removeAttribute('start', element);
+                }
+            },
+            getAttributeOnUpcast(listParent) {
+                const startAttributeValue = listParent.getAttribute('start');
+                return startAttributeValue >= 0 ? startAttributeValue : 1;
+            }
+        });
+    }
+    return strategies;
+}

package/src/listproperties/listpropertiesui.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module list/listproperties/listpropertiesui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import '../../theme/liststyles.css';
+/**
+ * The list properties UI plugin. It introduces the extended `'bulletedList'` and `'numberedList'` toolbar
+ * buttons that allow users to control such aspects of list as the marker, start index or order.
+ *
+ * **Note**: Buttons introduced by this plugin override implementations from the {@link module:list/list/listui~ListUI}
+ * (because they share the same names).
+ */
+export default class ListPropertiesUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ListPropertiesUI";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    init(): void;
+}

package/src/listproperties/listpropertiesui.js

@@ -0,0 +1,371 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module list/listproperties/listpropertiesui
+ */
+import { icons, Plugin } from 'ckeditor5/src/core.js';
+import { ButtonView, SplitButtonView, createDropdown, focusChildOnDropdownOpen, MenuBarMenuView } from 'ckeditor5/src/ui.js';
+import ListPropertiesView from './ui/listpropertiesview.js';
+import { getNormalizedConfig } from './utils/config.js';
+import listStyleDiscIcon from '../../theme/icons/liststyledisc.svg';
+import listStyleCircleIcon from '../../theme/icons/liststylecircle.svg';
+import listStyleSquareIcon from '../../theme/icons/liststylesquare.svg';
+import listStyleDecimalIcon from '../../theme/icons/liststyledecimal.svg';
+import listStyleDecimalWithLeadingZeroIcon from '../../theme/icons/liststyledecimalleadingzero.svg';
+import listStyleLowerRomanIcon from '../../theme/icons/liststylelowerroman.svg';
+import listStyleUpperRomanIcon from '../../theme/icons/liststyleupperroman.svg';
+import listStyleLowerLatinIcon from '../../theme/icons/liststylelowerlatin.svg';
+import listStyleUpperLatinIcon from '../../theme/icons/liststyleupperlatin.svg';
+import '../../theme/liststyles.css';
+/**
+ * The list properties UI plugin. It introduces the extended `'bulletedList'` and `'numberedList'` toolbar
+ * buttons that allow users to control such aspects of list as the marker, start index or order.
+ *
+ * **Note**: Buttons introduced by this plugin override implementations from the {@link module:list/list/listui~ListUI}
+ * (because they share the same names).
+ */
+export default class ListPropertiesUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ListPropertiesUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    init() {
+        const editor = this.editor;
+        const t = editor.locale.t;
+        const propertiesConfig = editor.config.get('list.properties');
+        const normalizedConfig = getNormalizedConfig(propertiesConfig);
+        const stylesListTypes = normalizedConfig.styles.listTypes;
+        // Note: When this plugin does not register the "bulletedList" dropdown due to properties configuration,
+        // a simple button will be still registered under the same name by ListUI as a fallback. This should happen
+        // in most editor configuration because the List plugin automatically requires ListUI.
+        if (stylesListTypes.includes('bulleted')) {
+            const styleDefinitions = [
+                {
+                    label: t('Toggle the disc list style'),
+                    tooltip: t('Disc'),
+                    type: 'disc',
+                    icon: listStyleDiscIcon
+                },
+                {
+                    label: t('Toggle the circle list style'),
+                    tooltip: t('Circle'),
+                    type: 'circle',
+                    icon: listStyleCircleIcon
+                },
+                {
+                    label: t('Toggle the square list style'),
+                    tooltip: t('Square'),
+                    type: 'square',
+                    icon: listStyleSquareIcon
+                }
+            ];
+            const buttonLabel = t('Bulleted List');
+            const styleGridAriaLabel = t('Bulleted list styles toolbar');
+            const commandName = 'bulletedList';
+            editor.ui.componentFactory.add(commandName, getDropdownViewCreator({
+                editor,
+                normalizedConfig,
+                parentCommandName: commandName,
+                buttonLabel,
+                buttonIcon: icons.bulletedList,
+                styleGridAriaLabel,
+                styleDefinitions
+            }));
+            // Add the menu bar item for bulleted list.
+            editor.ui.componentFactory.add(`menuBar:${commandName}`, getMenuBarStylesMenuCreator({
+                editor,
+                normalizedConfig,
+                parentCommandName: commandName,
+                buttonLabel,
+                styleGridAriaLabel,
+                styleDefinitions
+            }));
+        }
+        // Note: When this plugin does not register the "numberedList" dropdown due to properties configuration,
+        // a simple button will be still registered under the same name by ListUI as a fallback. This should happen
+        // in most editor configuration because the List plugin automatically requires ListUI.
+        if (stylesListTypes.includes('numbered') || propertiesConfig.startIndex || propertiesConfig.reversed) {
+            const styleDefinitions = [
+                {
+                    label: t('Toggle the decimal list style'),
+                    tooltip: t('Decimal'),
+                    type: 'decimal',
+                    icon: listStyleDecimalIcon
+                },
+                {
+                    label: t('Toggle the decimal with leading zero list style'),
+                    tooltip: t('Decimal with leading zero'),
+                    type: 'decimal-leading-zero',
+                    icon: listStyleDecimalWithLeadingZeroIcon
+                },
+                {
+                    label: t('Toggle the lower–roman list style'),
+                    tooltip: t('Lower–roman'),
+                    type: 'lower-roman',
+                    icon: listStyleLowerRomanIcon
+                },
+                {
+                    label: t('Toggle the upper–roman list style'),
+                    tooltip: t('Upper-roman'),
+                    type: 'upper-roman',
+                    icon: listStyleUpperRomanIcon
+                },
+                {
+                    label: t('Toggle the lower–latin list style'),
+                    tooltip: t('Lower-latin'),
+                    type: 'lower-latin',
+                    icon: listStyleLowerLatinIcon
+                },
+                {
+                    label: t('Toggle the upper–latin list style'),
+                    tooltip: t('Upper-latin'),
+                    type: 'upper-latin',
+                    icon: listStyleUpperLatinIcon
+                }
+            ];
+            const buttonLabel = t('Numbered List');
+            const styleGridAriaLabel = t('Numbered list styles toolbar');
+            const commandName = 'numberedList';
+            editor.ui.componentFactory.add(commandName, getDropdownViewCreator({
+                editor,
+                normalizedConfig,
+                parentCommandName: commandName,
+                buttonLabel,
+                buttonIcon: icons.numberedList,
+                styleGridAriaLabel,
+                styleDefinitions
+            }));
+            // Menu bar menu does not display list start index or reverse UI. If there are no styles enabled,
+            // the menu makes no sense and should be omitted.
+            if (stylesListTypes.includes('numbered')) {
+                editor.ui.componentFactory.add(`menuBar:${commandName}`, getMenuBarStylesMenuCreator({
+                    editor,
+                    normalizedConfig,
+                    parentCommandName: commandName,
+                    buttonLabel,
+                    styleGridAriaLabel,
+                    styleDefinitions
+                }));
+            }
+        }
+    }
+}
+/**
+ * A helper that returns a function that creates a split button with a toolbar in the dropdown,
+ * which in turn contains buttons allowing users to change list styles in the context of the current selection.
+ *
+ * @param options.editor
+ * @param options.normalizedConfig List properties configuration.
+ * @param options.parentCommandName The name of the higher-order editor command associated with
+ * the set of particular list styles (e.g. "bulletedList" for "disc", "circle", and "square" styles).
+ * @param options.buttonLabel Label of the main part of the split button.
+ * @param options.buttonIcon The SVG string of an icon for the main part of the split button.
+ * @param options.styleGridAriaLabel The ARIA label for the styles grid in the split button dropdown.
+ * @param options.styleDefinitions Definitions of the style buttons.
+ * @returns A function that can be passed straight into {@link module:ui/componentfactory~ComponentFactory#add}.
+ */
+function getDropdownViewCreator({ editor, normalizedConfig, parentCommandName, buttonLabel, buttonIcon, styleGridAriaLabel, styleDefinitions }) {
+    const parentCommand = editor.commands.get(parentCommandName);
+    return (locale) => {
+        const dropdownView = createDropdown(locale, SplitButtonView);
+        const mainButtonView = dropdownView.buttonView;
+        dropdownView.bind('isEnabled').to(parentCommand);
+        dropdownView.class = 'ck-list-styles-dropdown';
+        // Main button was clicked.
+        mainButtonView.on('execute', () => {
+            editor.execute(parentCommandName);
+            editor.editing.view.focus();
+        });
+        mainButtonView.set({
+            label: buttonLabel,
+            icon: buttonIcon,
+            tooltip: true,
+            isToggleable: true
+        });
+        mainButtonView.bind('isOn').to(parentCommand, 'value', value => !!value);
+        dropdownView.once('change:isOpen', () => {
+            const listPropertiesView = createListPropertiesView({
+                editor,
+                normalizedConfig,
+                dropdownView,
+                parentCommandName,
+                styleGridAriaLabel,
+                styleDefinitions
+            });
+            dropdownView.panelView.children.add(listPropertiesView);
+        });
+        // Focus the editable after executing the command.
+        // Overrides a default behaviour where the focus is moved to the dropdown button (#12125).
+        dropdownView.on('execute', () => {
+            editor.editing.view.focus();
+        });
+        return dropdownView;
+    };
+}
+/**
+ * A helper that returns a function (factory) that creates individual buttons used by users to change styles
+ * of lists.
+ *
+ * @param options.editor
+ * @param options.listStyleCommand The instance of the `ListStylesCommand` class.
+ * @param options.parentCommandName The name of the higher-order command associated with a
+ * particular list style (e.g. "bulletedList" is associated with "square" and "numberedList" is associated with "roman").
+ * @returns A function that can be passed straight into {@link module:ui/componentfactory~ComponentFactory#add}.
+ */
+function getStyleButtonCreator({ editor, listStyleCommand, parentCommandName }) {
+    const locale = editor.locale;
+    const parentCommand = editor.commands.get(parentCommandName);
+    return ({ label, type, icon, tooltip }) => {
+        const button = new ButtonView(locale);
+        button.set({ label, icon, tooltip });
+        listStyleCommand.on('change:value', () => {
+            button.isOn = listStyleCommand.value === type;
+        });
+        button.on('execute', () => {
+            // If the content the selection is anchored to is a list, let's change its style.
+            if (parentCommand.value) {
+                // Remove the list when the current list style is the same as the one that would normally be applied.
+                if (listStyleCommand.value === type) {
+                    editor.execute(parentCommandName);
+                }
+                // If the current list style is not set in the model or the style is different than the
+                // one to be applied, simply apply the new style.
+                else if (listStyleCommand.value !== type) {
+                    editor.execute('listStyle', { type });
+                }
+            }
+            // Otherwise, leave the creation of the styled list to the `ListStyleCommand`.
+            else {
+                editor.model.change(() => {
+                    editor.execute('listStyle', { type });
+                });
+            }
+        });
+        return button;
+    };
+}
+/**
+ * A helper that creates the properties view for the individual style dropdown.
+ *
+ * @param options.editor Editor instance.
+ * @param options.normalizedConfig List properties configuration.
+ * @param options.dropdownView Styles dropdown view that hosts the properties view.
+ * @param options.parentCommandName The name of the higher-order editor command associated with
+ * the set of particular list styles (e.g. "bulletedList" for "disc", "circle", and "square" styles).
+ * @param options.styleDefinitions Definitions of the style buttons.
+ * @param options.styleGridAriaLabel An assistive technologies label set on the grid of styles (if the grid is rendered).
+ */
+function createListPropertiesView({ editor, normalizedConfig, dropdownView, parentCommandName, styleDefinitions, styleGridAriaLabel }) {
+    const locale = editor.locale;
+    const enabledProperties = {
+        ...normalizedConfig,
+        ...(parentCommandName != 'numberedList' ? {
+            startIndex: false,
+            reversed: false
+        } : null)
+    };
+    const listType = parentCommandName.replace('List', '');
+    let styleButtonViews = null;
+    if (normalizedConfig.styles.listTypes.includes(listType)) {
+        const listStyleCommand = editor.commands.get('listStyle');
+        const styleButtonCreator = getStyleButtonCreator({
+            editor,
+            parentCommandName,
+            listStyleCommand
+        });
+        // The command can be ListStyleCommand or DocumentListStyleCommand.
+        const isStyleTypeSupported = getStyleTypeSupportChecker(listStyleCommand);
+        styleButtonViews = styleDefinitions.filter(isStyleTypeSupported).map(styleButtonCreator);
+    }
+    const listPropertiesView = new ListPropertiesView(locale, {
+        styleGridAriaLabel,
+        enabledProperties,
+        styleButtonViews
+    });
+    if (normalizedConfig.styles.listTypes.includes(listType)) {
+        // Accessibility: focus the first active style when opening the dropdown.
+        focusChildOnDropdownOpen(dropdownView, () => {
+            return listPropertiesView.stylesView.children.find((child) => child.isOn);
+        });
+    }
+    if (enabledProperties.startIndex) {
+        const listStartCommand = editor.commands.get('listStart');
+        listPropertiesView.startIndexFieldView.bind('isEnabled').to(listStartCommand);
+        listPropertiesView.startIndexFieldView.fieldView.bind('value').to(listStartCommand);
+        listPropertiesView.on('listStart', (evt, data) => editor.execute('listStart', data));
+    }
+    if (enabledProperties.reversed) {
+        const listReversedCommand = editor.commands.get('listReversed');
+        listPropertiesView.reversedSwitchButtonView.bind('isEnabled').to(listReversedCommand);
+        listPropertiesView.reversedSwitchButtonView.bind('isOn').to(listReversedCommand, 'value', value => !!value);
+        listPropertiesView.on('listReversed', () => {
+            const isReversed = listReversedCommand.value;
+            editor.execute('listReversed', { reversed: !isReversed });
+        });
+    }
+    // Make sure applying styles closes the dropdown.
+    listPropertiesView.delegate('execute').to(dropdownView);
+    return listPropertiesView;
+}
+/**
+ * A helper that creates the list style submenu for menu bar.
+ *
+ * @param editor Editor instance.
+ * @param normalizedConfig List properties configuration.
+ * @param parentCommandName Name of the list command.
+ * @param buttonLabel Label of the menu button.
+ * @param styleGridAriaLabel ARIA label of the styles grid.
+ */
+function getMenuBarStylesMenuCreator({ editor, normalizedConfig, parentCommandName, buttonLabel, styleGridAriaLabel, styleDefinitions }) {
+    return (locale) => {
+        const menuView = new MenuBarMenuView(locale);
+        const listCommand = editor.commands.get(parentCommandName);
+        const listStyleCommand = editor.commands.get('listStyle');
+        const isStyleTypeSupported = getStyleTypeSupportChecker(listStyleCommand);
+        const styleButtonCreator = getStyleButtonCreator({
+            editor,
+            parentCommandName,
+            listStyleCommand
+        });
+        const styleButtonViews = styleDefinitions.filter(isStyleTypeSupported).map(styleButtonCreator);
+        const listPropertiesView = new ListPropertiesView(locale, {
+            styleGridAriaLabel,
+            enabledProperties: {
+                ...normalizedConfig,
+                // Disable list start index and reversed in the menu bar.
+                startIndex: false,
+                reversed: false
+            },
+            styleButtonViews
+        });
+        listPropertiesView.delegate('execute').to(menuView);
+        menuView.buttonView.set({
+            label: buttonLabel,
+            icon: icons[parentCommandName]
+        });
+        menuView.panelView.children.add(listPropertiesView);
+        menuView.bind('isEnabled').to(listCommand, 'isEnabled');
+        menuView.on('execute', () => {
+            editor.editing.view.focus();
+        });
+        return menuView;
+    };
+}
+function getStyleTypeSupportChecker(listStyleCommand) {
+    if (typeof listStyleCommand.isStyleTypeSupported == 'function') {
+        return (styleDefinition) => listStyleCommand.isStyleTypeSupported(styleDefinition.type);
+    }
+    else {
+        return () => true;
+    }
+}