@ckeditor/ckeditor5-list 35.3.2 → 36.0.0

package/src/listproperties/listreversedcommand.js

@@ -1,64 +1,52 @@
 /**
- * @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 list/listproperties/listreversedcommand
  */
-
 import { Command } from 'ckeditor5/src/core';
 import { getSelectedListItems } from '../list/utils';
-
 /**
  * The reversed list command. It changes the `listReversed` attribute of the selected list items. As a result, the list order will be
  * reversed.
  * It is used by the {@link module:list/listproperties~ListProperties list properties feature}.
- *
- * @extends module:core/command~Command
  */
 export default class ListReversedCommand extends Command {
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const value = this._getValue();
-		this.value = value;
-		this.isEnabled = value != null;
-	}
-
-	/**
-	 * Executes the command.
-	 *
-	 * @fires execute
-	 * @param {Object} options
-	 * @param {Boolean} [options.reversed=false] Whether the list should be reversed.
-	 */
-	execute( options = {} ) {
-		const model = this.editor.model;
-		const listItems = getSelectedListItems( model )
-			.filter( item => item.getAttribute( 'listType' ) == 'numbered' );
-
-		model.change( writer => {
-			for ( const item of listItems ) {
-				writer.setAttribute( 'listReversed', !!options.reversed, item );
-			}
-		} );
-	}
-
-	/**
-	 * Checks the command's {@link #value}.
-	 *
-	 * @private
-	 * @returns {Boolean|null} The current value.
-	 */
-	_getValue() {
-		const listItem = this.editor.model.document.selection.getFirstPosition().parent;
-
-		if ( listItem && listItem.is( 'element', 'listItem' ) && listItem.getAttribute( 'listType' ) == 'numbered' ) {
-			return listItem.getAttribute( 'listReversed' );
-		}
-
-		return null;
-	}
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const value = this._getValue();
+        this.value = value;
+        this.isEnabled = value != null;
+    }
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options.reversed Whether the list should be reversed.
+     */
+    execute(options = {}) {
+        const model = this.editor.model;
+        const listItems = getSelectedListItems(model)
+            .filter(item => item.getAttribute('listType') == 'numbered');
+        model.change(writer => {
+            for (const item of listItems) {
+                writer.setAttribute('listReversed', !!options.reversed, 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') && listItem.getAttribute('listType') == 'numbered') {
+            return listItem.getAttribute('listReversed');
+        }
+        return null;
+    }
 }

package/src/listproperties/liststartcommand.js

@@ -1,63 +1,51 @@
 /**
- * @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 list/listproperties/liststartcommand
  */
-
 import { Command } from 'ckeditor5/src/core';
 import { getSelectedListItems } from '../list/utils';
-
 /**
  * The list start index command. It changes the `listStart` attribute of the selected list items.
  * It is used by the {@link module:list/listproperties~ListProperties list properties feature}.
- *
- * @extends module:core/command~Command
  */
 export default class ListStartCommand extends Command {
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const value = this._getValue();
-		this.value = value;
-		this.isEnabled = value != null;
-	}
-
-	/**
-	 * Executes the command.
-	 *
-	 * @fires execute
-	 * @param {Object} options
-	 * @param {Number} [options.startIndex=1] The list start index.
-	 */
-	execute( options = {} ) {
-		const model = this.editor.model;
-		const listItems = getSelectedListItems( model )
-			.filter( item => item.getAttribute( 'listType' ) == 'numbered' );
-
-		model.change( writer => {
-			for ( const item of listItems ) {
-				writer.setAttribute( 'listStart', options.startIndex || 1, item );
-			}
-		} );
-	}
-
-	/**
-	 * Checks the command's {@link #value}.
-	 *
-	 * @private
-	 * @returns {Boolean|null} The current value.
-	 */
-	_getValue() {
-		const listItem = this.editor.model.document.selection.getFirstPosition().parent;
-
-		if ( listItem && listItem.is( 'element', 'listItem' ) && listItem.getAttribute( 'listType' ) == 'numbered' ) {
-			return listItem.getAttribute( 'listStart' );
-		}
-
-		return null;
-	}
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const value = this._getValue();
+        this.value = value;
+        this.isEnabled = value != null;
+    }
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options.startIndex The list start index.
+     */
+    execute({ startIndex = 1 } = {}) {
+        const model = this.editor.model;
+        const listItems = getSelectedListItems(model)
+            .filter(item => item.getAttribute('listType') == 'numbered');
+        model.change(writer => {
+            for (const item of listItems) {
+                writer.setAttribute('listStart', startIndex >= 0 ? startIndex : 1, 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') && listItem.getAttribute('listType') == 'numbered') {
+            return listItem.getAttribute('listStart');
+        }
+        return null;
+    }
 }

package/src/listproperties/liststylecommand.js

@@ -1,132 +1,99 @@
 /**
- * @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 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}.
- *
- * @extends module:core/command~Command
  */
 export default class ListStyleCommand extends Command {
-	/**
-	 * Creates an instance of the command.
-	 *
-	 * @param {module:core/editor/editor~Editor} editor The editor instance.
-	 * @param {String} 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 );
-
-		/**
-		 * The default type of the list style.
-		 *
-		 * @protected
-		 * @member {String}
-		 */
-		this._defaultType = defaultType;
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		this.value = this._getValue();
-		this.isEnabled = this._checkEnabled();
-	}
-
-	/**
-	 * Executes the command.
-	 *
-	 * @fires execute
-	 * @param {Object} options
-	 * @param {String|null} [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}.
-	 *
-	 * @private
-	 * @returns {String|null} 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.
-	 *
-	 * @private
-	 * @returns {Boolean} 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;
-	}
-
-	/**
-	 * Check if the provided list style is valid. Also change the selection to a list if it's not set yet.
-	 *
-	 * @param {Object} options
-	 * @param {String|null} [options.type] The type of the list style. If `null` is specified, the function does nothing.
-	 * @private
-	*/
-	_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 );
-		}
-	}
+    /**
+     * 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;
+    }
+    /**
+     * Check if the provided list style is valid. Also change 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.js

@@ -1,152 +1,89 @@
 /**
- * @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 list/ui/collapsibleview
- */
-
 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.
  *
- * @protected
- * @extends module:ui/view~View
+ * @internal
  */
 export default class CollapsibleView extends View {
-	/**
-	 * Creates an instance of the collapsible view.
-	 *
-	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
-	 * @param {Array.<module:ui/view~View>} [childViews] An optional array of initial child views to be inserted
-	 * into the collapsible.
-	 */
-	constructor( locale, childViews ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * `true` when the container with {@link #children} is collapsed. `false` otherwise.
-		 *
-		 * @observable
-		 * @member {Boolean} #isCollapsed
-		 */
-		this.set( 'isCollapsed', false );
-
-		/**
-		 * The text label of the {@link #buttonView}.
-		 *
-		 * @observable
-		 * @member {String} #label
-		 * @default 'Show more'
-		 */
-		this.set( 'label', '' );
-
-		/**
-		 * The main button that, when clicked, collapses or expands the container with {@link #children}.
-		 *
-		 * @readonly
-		 * @member {module:ui/button/buttonview~ButtonView} #buttonView
-		 */
-		this.buttonView = this._createButtonView();
-
-		/**
-		 * A collection of the child views that can be collapsed by clicking the {@link #buttonView}.
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection} #children
-		 */
-		this.children = this.createCollection();
-
-		/**
-		 * 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}.
-		 *
-		 * @private
-		 * @readonly
-		 * @observable
-		 * @member {String} #_collapsibleAriaLabelUid
-		 */
-		this.set( '_collapsibleAriaLabelUid' );
-
-		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.
-	 *
-	 * @private
-	 * @returns {module:ui/button/buttonview~ButtonView}
-	 */
-	_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;
-	}
+    /**
+     * 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;
+    }
 }