@ckeditor/ckeditor5-list 31.1.0 → 34.0.0

package/src/documentlistproperties/documentliststartcommand.js

@@ -0,0 +1,76 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module list/documentlistproperties/documentliststartcommand
+ */
+
+import { Command } from 'ckeditor5/src/core';
+import { first } from 'ckeditor5/src/utils';
+import {
+	expandListBlocksToCompleteList,
+	isListItemBlock
+} from '../documentlist/utils/model';
+
+/**
+ * The list start index command. It changes the `listStart` attribute of the selected list items,
+ * letting the user to choose the starting point of an ordered list.
+ * It is used by the {@link module:list/documentlistproperties~DocumentListProperties list properties feature}.
+ *
+ * @extends module:core/command~Command
+ */
+export default class DocumentListStartCommand 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 document = model.document;
+
+		let blocks = Array.from( document.selection.getSelectedBlocks() )
+			.filter( block => isListItemBlock( block ) && block.getAttribute( 'listType' ) == 'numbered' );
+
+		blocks = expandListBlocksToCompleteList( blocks );
+
+		model.change( writer => {
+			for ( const block of blocks ) {
+				writer.setAttribute( 'listStart', options.startIndex || 1, block );
+			}
+		} );
+	}
+
+	/**
+	 * Checks the command's {@link #value}.
+	 *
+	 * @private
+	 * @returns {Number|null} The current value.
+	 */
+	_getValue() {
+		const model = this.editor.model;
+		const document = model.document;
+
+		const block = first( document.selection.getSelectedBlocks() );
+
+		if ( block && isListItemBlock( block ) && block.getAttribute( 'listType' ) == 'numbered' ) {
+			return block.getAttribute( 'listStart' );
+		}
+
+		return null;
+	}
+}

package/src/documentlistproperties/documentliststylecommand.js

@@ -0,0 +1,140 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module list/documentlistproperties/documentliststylecommand
+ */
+
+import { Command } from 'ckeditor5/src/core';
+import { first } from 'ckeditor5/src/utils';
+import {
+	expandListBlocksToCompleteList,
+	isListItemBlock
+} from '../documentlist/utils/model';
+import { getListTypeFromListStyleType } from './utils/style';
+
+/**
+ * The list style command. It changes `listStyle` attribute of the selected list items,
+ * letting the user choose styles for the list item markers.
+ * It is used by the {@link module:list/documentlistproperties~DocumentListProperties list properties feature}.
+ *
+ * @extends module:core/command~Command
+ */
+export default class DocumentListStyleCommand 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 = {} ) {
+		const model = this.editor.model;
+		const document = model.document;
+
+		model.change( writer => {
+			this._tryToConvertItemsToList( options );
+
+			let blocks = Array.from( document.selection.getSelectedBlocks() )
+				.filter( block => block.hasAttribute( 'listType' ) );
+
+			if ( !blocks.length ) {
+				return;
+			}
+
+			blocks = expandListBlocksToCompleteList( blocks );
+
+			for ( const block of blocks ) {
+				writer.setAttribute( 'listStyle', options.type || this._defaultType, block );
+			}
+		} );
+	}
+
+	/**
+	 * Checks the command's {@link #value}.
+	 *
+	 * @private
+	 * @returns {String|null} The current value.
+	 */
+	_getValue() {
+		const listItem = first( this.editor.model.document.selection.getSelectedBlocks() );
+
+		if ( isListItemBlock( 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.
+	 *
+	 * @private
+	 * @param {Object} options
+	 * @param {String|null} [options.type] 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/documentlistproperties/utils/style.js

@@ -0,0 +1,41 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+* @module list/documentlistproperties/utils/style
+*/
+
+const BULLETED_LIST_STYLE_TYPES = [ 'disc', 'circle', 'square' ];
+
+// There's a lot of them (https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style).
+// Let's support only those that can be selected by ListPropertiesUI.
+const NUMBERED_LIST_STYLE_TYPES = [
+	'decimal',
+	'decimal-leading-zero',
+	'lower-roman',
+	'upper-roman',
+	'lower-latin',
+	'upper-latin',
+	'lower-alpha',
+	'upper-alpha'
+];
+
+/**
+* Checks whether the given list-style-type is supported by numbered or bulleted list.
+*
+* @param {String} listStyleType
+* @returns {'bulleted'|'numbered'|null}
+*/
+export function getListTypeFromListStyleType( listStyleType ) {
+	if ( BULLETED_LIST_STYLE_TYPES.includes( listStyleType ) ) {
+		return 'bulleted';
+	}
+
+	if ( NUMBERED_LIST_STYLE_TYPES.includes( listStyleType ) ) {
+		return 'numbered';
+	}
+
+	return null;
+}

package/src/documentlistproperties.js

@@ -0,0 +1,37 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module list/documentlistproperties
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import DocumentListPropertiesEditing from './documentlistproperties/documentlistpropertiesediting';
+import ListPropertiesUI from './listproperties/listpropertiesui';
+
+/**
+ * The document list properties feature.
+ *
+ * This is a "glue" plugin that loads the
+ * {@link module:list/documentlistproperties/documentlistpropertiesediting~DocumentListPropertiesEditing document list properties
+ * editing feature} and the {@link module:list/listproperties/listpropertiesui~ListPropertiesUI list properties UI feature}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class DocumentListProperties extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ DocumentListPropertiesEditing, ListPropertiesUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'DocumentListProperties';
+	}
+}

package/src/index.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -8,11 +8,11 @@
  */
 
 export { default as List } from './list';
-export { default as ListEditing } from './listediting';
-export { default as ListUI } from './listui';
-export { default as ListStyle } from './liststyle';
-export { default as ListStyleEditing } from './liststyleediting';
-export { default as ListStyleUI } from './liststyleui';
+export { default as ListEditing } from './list/listediting';
+export { default as ListUI } from './list/listui';
+export { default as ListProperties } from './listproperties';
+export { default as ListPropertiesEditing } from './listproperties/listpropertiesediting';
+export { default as ListPropertiesUI } from './listproperties/listpropertiesui';
 export { default as TodoList } from './todolist';
-export { default as TodoListEditing } from './todolistediting';
-export { default as TodoListUI } from './todolistui';
+export { default as TodoListEditing } from './todolist/todolistediting';
+export { default as TodoListUI } from './todolist/todolistui';

package/src/{converters.js → list/converters.js}

@@ -1,10 +1,10 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**
- * @module list/converters
+ * @module list/list/converters
  */
 
 import { TreeWalker } from 'ckeditor5/src/engine';
@@ -97,11 +97,11 @@ export function modelViewRemove( model ) {
  * A model-to-view converter for the `type` attribute change on the `listItem` model element.
  *
  * This change means that the `<li>` element parent changes from `<ul>` to `<ol>` (or vice versa). This is accomplished
- * by breaking view elements and changing their name. The next {@link module:list/converters~modelViewMergeAfterChangeType}
+ * by breaking view elements and changing their name. The next {@link module:list/list/converters~modelViewMergeAfterChangeType}
  * converter will attempt to merge split nodes.
  *
  * Splitting this conversion into 2 steps makes it possible to add an additional conversion in the middle.
- * Check {@link module:list/todolistconverters~modelViewChangeType} to see an example of it.
+ * Check {@link module:list/todolist/todolistconverters~modelViewChangeType} to see an example of it.
  *
  * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute
  * @param {module:utils/eventinfo~EventInfo} evt An object containing information about the fired event.
@@ -109,7 +109,7 @@ export function modelViewRemove( model ) {
  * @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi Conversion interface.
  */
 export function modelViewChangeType( evt, data, conversionApi ) {
-	if ( !conversionApi.consumable.consume( data.item, 'attribute:listType' ) ) {
+	if ( !conversionApi.consumable.test( data.item, evt.name ) ) {
 		return;
 	}
 
@@ -130,7 +130,7 @@ export function modelViewChangeType( evt, data, conversionApi ) {
 }
 
 /**
- * A model-to-view converter that attempts to merge nodes split by {@link module:list/converters~modelViewChangeType}.
+ * A model-to-view converter that attempts to merge nodes split by {@link module:list/list/converters~modelViewChangeType}.
  *
  * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute
  * @param {module:utils/eventinfo~EventInfo} evt An object containing information about the fired event.
@@ -138,6 +138,8 @@ export function modelViewChangeType( evt, data, conversionApi ) {
  * @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi Conversion interface.
  */
 export function modelViewMergeAfterChangeType( evt, data, conversionApi ) {
+	conversionApi.consumable.consume( data.item, evt.name );
+
 	const viewItem = conversionApi.mapper.toViewElement( data.item );
 	const viewList = viewItem.parent;
 	const viewWriter = conversionApi.writer;
@@ -145,11 +147,6 @@ export function modelViewMergeAfterChangeType( evt, data, conversionApi ) {
 	// Merge the changed view list with other lists, if possible.
 	mergeViewLists( viewWriter, viewList, viewList.nextSibling );
 	mergeViewLists( viewWriter, viewList.previousSibling, viewList );
-
-	// Consumable insertion of children inside the item. They are already handled by re-building the item in view.
-	for ( const child of data.item.getChildren() ) {
-		conversionApi.consumable.consume( child, 'insert' );
-	}
 }
 
 /**
@@ -221,6 +218,10 @@ export function modelViewChangeIndent( model ) {
  * @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi Conversion interface.
  */
 export function modelViewSplitOnInsert( evt, data, conversionApi ) {
+	if ( !conversionApi.consumable.test( data.item, evt.name ) ) {
+		return;
+	}
+
 	if ( data.item.name != 'listItem' ) {
 		let viewPosition = conversionApi.mapper.toViewPosition( data.range.start );
 
@@ -605,6 +606,18 @@ export function modelChangePostFixer( model, writer ) {
 					applied = true;
 				}
 
+				if ( item.hasAttribute( 'listReversed' ) ) {
+					writer.removeAttribute( 'listReversed', item );
+
+					applied = true;
+				}
+
+				if ( item.hasAttribute( 'listStart' ) ) {
+					writer.removeAttribute( 'listStart', item );
+
+					applied = true;
+				}
+
 				for ( const innerItem of Array.from( model.createRangeIn( item ) ).filter( e => e.item.is( 'element', 'listItem' ) ) ) {
 					_addListToFix( innerItem.previousPosition );
 				}

package/src/{indentcommand.js → list/indentcommand.js}

@@ -1,10 +1,10 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**
- * @module list/indentcommand
+ * @module list/list/indentcommand
  */
 
 import { Command } from 'ckeditor5/src/core';

package/src/{listcommand.js → list/listcommand.js}

@@ -1,10 +1,10 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**
- * @module list/listcommand
+ * @module list/list/listcommand
  */
 
 import { Command } from 'ckeditor5/src/core';
@@ -56,7 +56,7 @@ export default class ListCommand extends Command {
 	 * @fires execute
 	 * @param {Object} [options] Command options.
 	 * @param {Boolean} [options.forceValue] If set, it will force the command behavior. If `true`, the command will try to convert the
-	 * selected items and potentially the neighbor elements to the proper list items. If set to `false` it will convert selected elements
+	 * selected items and potentially the neighbor elements to the proper list items. If set to `false`, it will convert selected elements
 	 * to paragraphs. If not set, the command will toggle selected elements to list items or paragraphs, depending on the selection.
 	 */
 	execute( options = {} ) {

package/src/{listediting.js → list/listediting.js}

@@ -1,10 +1,10 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**
- * @module list/listediting
+ * @module list/list/listediting
  */
 
 import ListCommand from './listcommand';
@@ -171,19 +171,18 @@ export default class ListEditing extends Plugin {
 			evt.stop();
 		}, { context: 'li' } );
 
-		const getCommandExecuter = commandName => {
-			return ( data, cancel ) => {
-				const command = this.editor.commands.get( commandName );
+		this.listenTo( editor.editing.view.document, 'tab', ( evt, data ) => {
+			const commandName = data.shiftKey ? 'outdentList' : 'indentList';
+			const command = this.editor.commands.get( commandName );
 
-				if ( command.isEnabled ) {
-					this.editor.execute( commandName );
-					cancel();
-				}
-			};
-		};
+			if ( command.isEnabled ) {
+				editor.execute( commandName );
 
-		editor.keystrokes.set( 'Tab', getCommandExecuter( 'indentList' ) );
-		editor.keystrokes.set( 'Shift+Tab', getCommandExecuter( 'outdentList' ) );
+				data.stopPropagation();
+				data.preventDefault();
+				evt.stop();
+			}
+		}, { context: 'li' } );
 	}
 
 	/**

package/src/{listui.js → list/listui.js}

@@ -1,16 +1,16 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**
- * @module list/listui
+ * @module list/list/listui
  */
 
 import { createUIComponent } from './utils';
 
-import numberedListIcon from '../theme/icons/numberedlist.svg';
-import bulletedListIcon from '../theme/icons/bulletedlist.svg';
+import numberedListIcon from '../../theme/icons/numberedlist.svg';
+import bulletedListIcon from '../../theme/icons/bulletedlist.svg';
 
 import { Plugin } from 'ckeditor5/src/core';
 

package/src/{utils.js → list/utils.js}

@@ -1,10 +1,10 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**
- * @module list/utils
+ * @module list/list/utils
  */
 
 import { TreeWalker, getFillerOffset } from 'ckeditor5/src/engine';
@@ -285,9 +285,9 @@ export function findNestedList( viewElement ) {
 }
 
 /**
- * Returns an array with all `listItem` elements that represents the same list.
+ * Returns an array with all `listItem` elements that represent the same list.
  *
- * It means that values for `listIndent`, `listType`, and `listStyle` for all items are equal.
+ * It means that values of `listIndent`, `listType`, `listStyle`, `listReversed` and `listStart` for all items are equal.
  *
  * @param {module:engine/model/position~Position} position Starting position.
  * @param {'forward'|'backward'} direction Walking direction.
@@ -350,11 +350,21 @@ export function getSiblingNodes( position, direction ) {
 		// ○ List item 3.    [listType=bulleted]
 		// ○ List item 4.    [listType=bulleted]
 		//
-		// Abort searching when found a different list style.
+		// Abort searching when found a different list style,
 		if ( element.getAttribute( 'listStyle' ) !== listItem.getAttribute( 'listStyle' ) ) {
 			break;
 		}
 
+		// ... different direction
+		if ( element.getAttribute( 'listReversed' ) !== listItem.getAttribute( 'listReversed' ) ) {
+			break;
+		}
+
+		// ... and different start index
+		if ( element.getAttribute( 'listStart' ) !== listItem.getAttribute( 'listStart' ) ) {
+			break;
+		}
+
 		if ( direction === 'backward' ) {
 			items.unshift( element );
 		} else {
@@ -365,6 +375,72 @@ export function getSiblingNodes( position, direction ) {
 	return items;
 }
 
+/**
+ * Returns an array with all `listItem` elements in the model selection.
+ *
+ * It returns all the items even if only a part of the list is selected, including items that belong to nested lists.
+ * If no list is selected, it returns an empty array.
+ * The order of the elements is not specified.
+ *
+ * @protected
+ * @param {module:engine/model/model~Model} model
+ * @returns {Array.<module:engine/model/element~Element>}
+ */
+export function getSelectedListItems( model ) {
+	const document = model.document;
+
+	// For all selected blocks find all list items that are being selected
+	// and update the `listStyle` attribute in those lists.
+	let listItems = [ ...document.selection.getSelectedBlocks() ]
+		.filter( element => element.is( 'element', 'listItem' ) )
+		.map( element => {
+			const position = model.change( writer => writer.createPositionAt( element, 0 ) );
+
+			return [
+				...getSiblingNodes( position, 'backward' ),
+				...getSiblingNodes( position, 'forward' )
+			];
+		} )
+		.flat();
+
+	// Since `getSelectedBlocks()` can return items that belong to the same list, and
+	// `getSiblingNodes()` returns the entire list, we need to remove duplicated items.
+	listItems = [ ...new Set( listItems ) ];
+
+	return listItems;
+}
+
+const BULLETED_LIST_STYLE_TYPES = [ 'disc', 'circle', 'square' ];
+
+// There's a lot of them (https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style).
+// Let's support only those that can be selected by ListPropertiesUI.
+const NUMBERED_LIST_STYLE_TYPES = [
+	'decimal',
+	'decimal-leading-zero',
+	'lower-roman',
+	'upper-roman',
+	'lower-latin',
+	'upper-latin'
+];
+
+/**
+ * Checks whether the given list-style-type is supported by numbered or bulleted list.
+ *
+ * @param {String} listStyleType
+ * @returns {'bulleted'|'numbered'|null}
+ */
+export function getListTypeFromListStyleType( listStyleType ) {
+	if ( BULLETED_LIST_STYLE_TYPES.includes( listStyleType ) ) {
+		return 'bulleted';
+	}
+
+	if ( NUMBERED_LIST_STYLE_TYPES.includes( listStyleType ) ) {
+		return 'numbered';
+	}
+
+	return null;
+}
+
 // Implementation of getFillerOffset for view list item element.
 //
 // @returns {Number|null} Block filler offset or `null` if block filler is not needed.