@ckeditor/ckeditor5-list 40.0.0 → 40.1.0

package/src/listproperties/liststylecommand.js

@@ -1,99 +1,99 @@
-/**
- * @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 list/listproperties/liststylecommand
- */
-import { Command } from 'ckeditor5/src/core';
-import { getListTypeFromListStyleType, getSelectedListItems } from '../list/utils';
-/**
- * The list style command. It changes the `listStyle` attribute of the selected list items.
- *
- * If the list type (numbered or bulleted) can be inferred from the passed style type,
- * the command tries to convert selected items to a list of that type.
- * It is used by the {@link module:list/listproperties~ListProperties list properties feature}.
- */
-export default class ListStyleCommand extends Command {
-    /**
-     * Creates an instance of the command.
-     *
-     * @param editor The editor instance.
-     * @param defaultType The list type that will be used by default if the value was not specified during
-     * the command execution.
-     */
-    constructor(editor, defaultType) {
-        super(editor);
-        this.defaultType = defaultType;
-    }
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        this.value = this._getValue();
-        this.isEnabled = this._checkEnabled();
-    }
-    /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @param options.type The type of the list style, e.g. `'disc'` or `'square'`. If `null` is specified, the default
-     * style will be applied.
-     */
-    execute(options = {}) {
-        this._tryToConvertItemsToList(options);
-        const model = this.editor.model;
-        const listItems = getSelectedListItems(model);
-        if (!listItems.length) {
-            return;
-        }
-        model.change(writer => {
-            for (const item of listItems) {
-                writer.setAttribute('listStyle', options.type || this.defaultType, item);
-            }
-        });
-    }
-    /**
-     * Checks the command's {@link #value}.
-     *
-     * @returns The current value.
-     */
-    _getValue() {
-        const listItem = this.editor.model.document.selection.getFirstPosition().parent;
-        if (listItem && listItem.is('element', 'listItem')) {
-            return listItem.getAttribute('listStyle');
-        }
-        return null;
-    }
-    /**
-     * Checks whether the command can be enabled in the current context.
-     *
-     * @returns Whether the command should be enabled.
-     */
-    _checkEnabled() {
-        const editor = this.editor;
-        const numberedList = editor.commands.get('numberedList');
-        const bulletedList = editor.commands.get('bulletedList');
-        return numberedList.isEnabled || bulletedList.isEnabled;
-    }
-    /**
-     * Checks if the provided list style is valid. Also changes the selection to a list if it's not set yet.
-     *
-     * @param The type of the list style. If `null` is specified, the function does nothing.
-    */
-    _tryToConvertItemsToList(options) {
-        if (!options.type) {
-            return;
-        }
-        const listType = getListTypeFromListStyleType(options.type);
-        if (!listType) {
-            return;
-        }
-        const editor = this.editor;
-        const commandName = `${listType}List`;
-        const command = editor.commands.get(commandName);
-        if (!command.value) {
-            editor.execute(commandName);
-        }
-    }
-}
+/**
+ * @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 list/listproperties/liststylecommand
+ */
+import { Command } from 'ckeditor5/src/core';
+import { getListTypeFromListStyleType, getSelectedListItems } from '../list/utils';
+/**
+ * The list style command. It changes the `listStyle` attribute of the selected list items.
+ *
+ * If the list type (numbered or bulleted) can be inferred from the passed style type,
+ * the command tries to convert selected items to a list of that type.
+ * It is used by the {@link module:list/listproperties~ListProperties list properties feature}.
+ */
+export default class ListStyleCommand extends Command {
+    /**
+     * Creates an instance of the command.
+     *
+     * @param editor The editor instance.
+     * @param defaultType The list type that will be used by default if the value was not specified during
+     * the command execution.
+     */
+    constructor(editor, defaultType) {
+        super(editor);
+        this.defaultType = defaultType;
+    }
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        this.value = this._getValue();
+        this.isEnabled = this._checkEnabled();
+    }
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options.type The type of the list style, e.g. `'disc'` or `'square'`. If `null` is specified, the default
+     * style will be applied.
+     */
+    execute(options = {}) {
+        this._tryToConvertItemsToList(options);
+        const model = this.editor.model;
+        const listItems = getSelectedListItems(model);
+        if (!listItems.length) {
+            return;
+        }
+        model.change(writer => {
+            for (const item of listItems) {
+                writer.setAttribute('listStyle', options.type || this.defaultType, item);
+            }
+        });
+    }
+    /**
+     * Checks the command's {@link #value}.
+     *
+     * @returns The current value.
+     */
+    _getValue() {
+        const listItem = this.editor.model.document.selection.getFirstPosition().parent;
+        if (listItem && listItem.is('element', 'listItem')) {
+            return listItem.getAttribute('listStyle');
+        }
+        return null;
+    }
+    /**
+     * Checks whether the command can be enabled in the current context.
+     *
+     * @returns Whether the command should be enabled.
+     */
+    _checkEnabled() {
+        const editor = this.editor;
+        const numberedList = editor.commands.get('numberedList');
+        const bulletedList = editor.commands.get('bulletedList');
+        return numberedList.isEnabled || bulletedList.isEnabled;
+    }
+    /**
+     * Checks if the provided list style is valid. Also changes the selection to a list if it's not set yet.
+     *
+     * @param The type of the list style. If `null` is specified, the function does nothing.
+    */
+    _tryToConvertItemsToList(options) {
+        if (!options.type) {
+            return;
+        }
+        const listType = getListTypeFromListStyleType(options.type);
+        if (!listType) {
+            return;
+        }
+        const editor = this.editor;
+        const commandName = `${listType}List`;
+        const command = editor.commands.get(commandName);
+        if (!command.value) {
+            editor.execute(commandName);
+        }
+    }
+}

package/src/listproperties/ui/collapsibleview.d.ts

@@ -1,63 +1,63 @@
-/**
- * @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 list/listproperties/ui/collapsibleview
- */
-import type { Locale } from 'ckeditor5/src/utils';
-import { View, ButtonView, type ViewCollection } from 'ckeditor5/src/ui';
-import '../../../theme/collapsible.css';
-/**
- * A collapsible UI component. Consists of a labeled button and a container which can be collapsed
- * by clicking the button. The collapsible container can be a host to other UI views.
- *
- * @internal
- */
-export default class CollapsibleView extends View {
-    /**
-     * `true` when the container with {@link #children} is collapsed. `false` otherwise.
-     *
-     * @observable
-     */
-    isCollapsed: boolean;
-    /**
-     * The text label of the {@link #buttonView}.
-     *
-     * @observable
-     * @default 'Show more'
-     */
-    label: string;
-    /**
-     * The ID of the label inside the {@link #buttonView} that describes the collapsible
-     * container for assistive technologies. Set after the button was {@link #render rendered}.
-     *
-     * @internal
-     * @readonly
-     * @observable
-     */
-    _collapsibleAriaLabelUid: string | undefined;
-    /**
-     * The main button that, when clicked, collapses or expands the container with {@link #children}.
-     */
-    readonly buttonView: ButtonView;
-    /**
-     * A collection of the child views that can be collapsed by clicking the {@link #buttonView}.
-     */
-    readonly children: ViewCollection;
-    /**
-     * Creates an instance of the collapsible view.
-     *
-     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-     * @param childViews An optional array of initial child views to be inserted into the collapsible.
-     */
-    constructor(locale: Locale, childViews?: Array<View>);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * Creates the main {@link #buttonView} of the collapsible.
-     */
-    private _createButtonView;
-}
+/**
+ * @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 list/listproperties/ui/collapsibleview
+ */
+import type { Locale } from 'ckeditor5/src/utils';
+import { View, ButtonView, type ViewCollection } from 'ckeditor5/src/ui';
+import '../../../theme/collapsible.css';
+/**
+ * A collapsible UI component. Consists of a labeled button and a container which can be collapsed
+ * by clicking the button. The collapsible container can be a host to other UI views.
+ *
+ * @internal
+ */
+export default class CollapsibleView extends View {
+    /**
+     * `true` when the container with {@link #children} is collapsed. `false` otherwise.
+     *
+     * @observable
+     */
+    isCollapsed: boolean;
+    /**
+     * The text label of the {@link #buttonView}.
+     *
+     * @observable
+     * @default 'Show more'
+     */
+    label: string;
+    /**
+     * The ID of the label inside the {@link #buttonView} that describes the collapsible
+     * container for assistive technologies. Set after the button was {@link #render rendered}.
+     *
+     * @internal
+     * @readonly
+     * @observable
+     */
+    _collapsibleAriaLabelUid: string | undefined;
+    /**
+     * The main button that, when clicked, collapses or expands the container with {@link #children}.
+     */
+    readonly buttonView: ButtonView;
+    /**
+     * A collection of the child views that can be collapsed by clicking the {@link #buttonView}.
+     */
+    readonly children: ViewCollection;
+    /**
+     * Creates an instance of the collapsible view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param childViews An optional array of initial child views to be inserted into the collapsible.
+     */
+    constructor(locale: Locale, childViews?: Array<View>);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Creates the main {@link #buttonView} of the collapsible.
+     */
+    private _createButtonView;
+}

package/src/listproperties/ui/collapsibleview.js

@@ -1,89 +1,89 @@
-/**
- * @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
- */
-import { View, ButtonView } from 'ckeditor5/src/ui';
-// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
-import dropdownArrowIcon from '@ckeditor/ckeditor5-ui/theme/icons/dropdown-arrow.svg';
-import '../../../theme/collapsible.css';
-/**
- * A collapsible UI component. Consists of a labeled button and a container which can be collapsed
- * by clicking the button. The collapsible container can be a host to other UI views.
- *
- * @internal
- */
-export default class CollapsibleView extends View {
-    /**
-     * Creates an instance of the collapsible view.
-     *
-     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-     * @param childViews An optional array of initial child views to be inserted into the collapsible.
-     */
-    constructor(locale, childViews) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('isCollapsed', false);
-        this.set('label', '');
-        this.buttonView = this._createButtonView();
-        this.children = this.createCollection();
-        this.set('_collapsibleAriaLabelUid', undefined);
-        if (childViews) {
-            this.children.addMany(childViews);
-        }
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-collapsible',
-                    bind.if('isCollapsed', 'ck-collapsible_collapsed')
-                ]
-            },
-            children: [
-                this.buttonView,
-                {
-                    tag: 'div',
-                    attributes: {
-                        class: [
-                            'ck',
-                            'ck-collapsible__children'
-                        ],
-                        role: 'region',
-                        hidden: bind.if('isCollapsed', 'hidden'),
-                        'aria-labelledby': bind.to('_collapsibleAriaLabelUid')
-                    },
-                    children: this.children
-                }
-            ]
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this._collapsibleAriaLabelUid = this.buttonView.labelView.element.id;
-    }
-    /**
-     * Creates the main {@link #buttonView} of the collapsible.
-     */
-    _createButtonView() {
-        const buttonView = new ButtonView(this.locale);
-        const bind = buttonView.bindTemplate;
-        buttonView.set({
-            withText: true,
-            icon: dropdownArrowIcon
-        });
-        buttonView.extendTemplate({
-            attributes: {
-                'aria-expanded': bind.to('isOn', value => String(value))
-            }
-        });
-        buttonView.bind('label').to(this);
-        buttonView.bind('isOn').to(this, 'isCollapsed', isCollapsed => !isCollapsed);
-        buttonView.on('execute', () => {
-            this.isCollapsed = !this.isCollapsed;
-        });
-        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
+ */
+import { View, ButtonView } from 'ckeditor5/src/ui';
+// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
+import dropdownArrowIcon from '@ckeditor/ckeditor5-ui/theme/icons/dropdown-arrow.svg';
+import '../../../theme/collapsible.css';
+/**
+ * A collapsible UI component. Consists of a labeled button and a container which can be collapsed
+ * by clicking the button. The collapsible container can be a host to other UI views.
+ *
+ * @internal
+ */
+export default class CollapsibleView extends View {
+    /**
+     * Creates an instance of the collapsible view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param childViews An optional array of initial child views to be inserted into the collapsible.
+     */
+    constructor(locale, childViews) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('isCollapsed', false);
+        this.set('label', '');
+        this.buttonView = this._createButtonView();
+        this.children = this.createCollection();
+        this.set('_collapsibleAriaLabelUid', undefined);
+        if (childViews) {
+            this.children.addMany(childViews);
+        }
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-collapsible',
+                    bind.if('isCollapsed', 'ck-collapsible_collapsed')
+                ]
+            },
+            children: [
+                this.buttonView,
+                {
+                    tag: 'div',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-collapsible__children'
+                        ],
+                        role: 'region',
+                        hidden: bind.if('isCollapsed', 'hidden'),
+                        'aria-labelledby': bind.to('_collapsibleAriaLabelUid')
+                    },
+                    children: this.children
+                }
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this._collapsibleAriaLabelUid = this.buttonView.labelView.element.id;
+    }
+    /**
+     * Creates the main {@link #buttonView} of the collapsible.
+     */
+    _createButtonView() {
+        const buttonView = new ButtonView(this.locale);
+        const bind = buttonView.bindTemplate;
+        buttonView.set({
+            withText: true,
+            icon: dropdownArrowIcon
+        });
+        buttonView.extendTemplate({
+            attributes: {
+                'aria-expanded': bind.to('isOn', value => String(value))
+            }
+        });
+        buttonView.bind('label').to(this);
+        buttonView.bind('isOn').to(this, 'isCollapsed', isCollapsed => !isCollapsed);
+        buttonView.on('execute', () => {
+            this.isCollapsed = !this.isCollapsed;
+        });
+        return buttonView;
+    }
+}