@ckeditor/ckeditor5-list 33.0.0 → 34.1.0

package/src/documentlist/documentlistindentcommand.js

@@ -0,0 +1,182 @@
+/**
+ * @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/documentlist/documentlistindentcommand
+ */
+
+import { Command } from 'ckeditor5/src/core';
+import {
+	expandListBlocksToCompleteItems,
+	indentBlocks,
+	isFirstBlockOfListItem,
+	isListItemBlock,
+	isSingleListItem,
+	outdentBlocksWithMerge,
+	sortBlocks,
+	splitListItemBefore
+} from './utils/model';
+import ListWalker from './utils/listwalker';
+
+/**
+ * The document list indent command. It is used by the {@link module:list/documentlist~DocumentList list feature}.
+ *
+ * @extends module:core/command~Command
+ */
+export default class DocumentListIndentCommand extends Command {
+	/**
+	 * Creates an instance of the command.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor The editor instance.
+	 * @param {'forward'|'backward'} indentDirection The direction of indent. If it is equal to `backward`, the command
+	 * will outdent a list item.
+	 */
+	constructor( editor, indentDirection ) {
+		super( editor );
+
+		/**
+		 * Determines by how much the command will change the list item's indent attribute.
+		 *
+		 * @readonly
+		 * @private
+		 * @member {'forward'|'backward'}
+		 */
+		this._direction = indentDirection;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		this.isEnabled = this._checkEnabled();
+	}
+
+	/**
+	 * Indents or outdents (depending on the {@link #constructor}'s `indentDirection` parameter) selected list items.
+	 *
+	 * @fires execute
+	 * @fires afterExecute
+	 */
+	execute() {
+		const model = this.editor.model;
+		const blocks = getSelectedListBlocks( model.document.selection );
+
+		model.change( writer => {
+			const changedBlocks = [];
+
+			// Handle selection contained in the single list item and starting in the following blocks.
+			if ( isSingleListItem( blocks ) && !isFirstBlockOfListItem( blocks[ 0 ] ) ) {
+				// Allow increasing indent of following list item blocks.
+				if ( this._direction == 'forward' ) {
+					changedBlocks.push( ...indentBlocks( blocks, writer ) );
+				}
+
+				// For indent make sure that indented blocks have a new ID.
+				// For outdent just split blocks from the list item (give them a new IDs).
+				changedBlocks.push( ...splitListItemBefore( blocks[ 0 ], writer ) );
+			}
+			// More than a single list item is selected, or the first block of list item is selected.
+			else {
+				// Now just update the attributes of blocks.
+				if ( this._direction == 'forward' ) {
+					changedBlocks.push( ...indentBlocks( blocks, writer, { expand: true } ) );
+				} else {
+					changedBlocks.push( ...outdentBlocksWithMerge( blocks, writer ) );
+				}
+			}
+
+			// Align the list item type to match the previous list item (from the same list).
+			for ( const block of changedBlocks ) {
+				// This block become a plain block (for example a paragraph).
+				if ( !block.hasAttribute( 'listType' ) ) {
+					continue;
+				}
+
+				const previousItemBlock = ListWalker.first( block, { sameIndent: true } );
+
+				if ( previousItemBlock ) {
+					writer.setAttribute( 'listType', previousItemBlock.getAttribute( 'listType' ), block );
+				}
+			}
+
+			this._fireAfterExecute( changedBlocks );
+		} );
+	}
+
+	/**
+	 * Fires the `afterExecute` event.
+	 *
+	 * @private
+	 * @param {Array.<module:engine/model/element~Element>} changedBlocks The changed list elements.
+	 */
+	_fireAfterExecute( changedBlocks ) {
+		/**
+		 * Event fired by the {@link #execute} method.
+		 *
+		 * It allows to execute an action after executing the {@link ~DocumentListIndentCommand#execute} method,
+		 * for example adjusting attributes of changed list items.
+		 *
+		 * @protected
+		 * @event afterExecute
+		 */
+		this.fire( 'afterExecute', sortBlocks( new Set( changedBlocks ) ) );
+	}
+
+	/**
+	 * Checks whether the command can be enabled in the current context.
+	 *
+	 * @private
+	 * @returns {Boolean} Whether the command should be enabled.
+	 */
+	_checkEnabled() {
+		// Check whether any of position's ancestor is a list item.
+		let blocks = getSelectedListBlocks( this.editor.model.document.selection );
+		let firstBlock = blocks[ 0 ];
+
+		// If selection is not in a list item, the command is disabled.
+		if ( !firstBlock ) {
+			return false;
+		}
+
+		// If we are outdenting it is enough to be in list item. Every list item can always be outdented.
+		if ( this._direction == 'backward' ) {
+			return true;
+		}
+
+		// A single block of a list item is selected, so it could be indented as a sublist.
+		if ( isSingleListItem( blocks ) && !isFirstBlockOfListItem( blocks[ 0 ] ) ) {
+			return true;
+		}
+
+		blocks = expandListBlocksToCompleteItems( blocks );
+		firstBlock = blocks[ 0 ];
+
+		// Check if there is any list item before selected items that could become a parent of selected items.
+		const siblingItem = ListWalker.first( firstBlock, { sameIndent: true } );
+
+		if ( !siblingItem ) {
+			return false;
+		}
+
+		if ( siblingItem.getAttribute( 'listType' ) == firstBlock.getAttribute( 'listType' ) ) {
+			return true;
+		}
+
+		return false;
+	}
+}
+
+// Returns an array of selected blocks truncated to the first non list block element.
+function getSelectedListBlocks( selection ) {
+	const blocks = Array.from( selection.getSelectedBlocks() );
+	const firstNonListBlockIndex = blocks.findIndex( block => !isListItemBlock( block ) );
+
+	if ( firstNonListBlockIndex != -1 ) {
+		blocks.length = firstNonListBlockIndex;
+	}
+
+	return blocks;
+}
+

package/src/documentlist/documentlistmergecommand.js

@@ -0,0 +1,235 @@
+/**
+ * @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/documentlist/documentlistmergecommand
+ */
+
+import { Command } from 'ckeditor5/src/core';
+import {
+	getNestedListBlocks,
+	indentBlocks,
+	sortBlocks,
+	isFirstBlockOfListItem,
+	mergeListItemBefore,
+	isSingleListItem,
+	getSelectedBlockObject,
+	isListItemBlock
+} from './utils/model';
+import ListWalker from './utils/listwalker';
+
+/**
+ * The document list merge command. It is used by the {@link module:list/documentlist~DocumentList list feature}.
+ *
+ * @extends module:core/command~Command
+ */
+export default class DocumentListMergeCommand extends Command {
+	/**
+	 * Creates an instance of the command.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor The editor instance.
+	 * @param {'backward'|'forward'} direction Whether list item should be merged before or after the selected block.
+	 */
+	constructor( editor, direction ) {
+		super( editor );
+
+		/**
+		 * Whether list item should be merged before or after the selected block.
+		 *
+		 * @readonly
+		 * @private
+		 * @member {'backward'|'forward'}
+		 */
+		this._direction = direction;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		this.isEnabled = this._checkEnabled();
+	}
+
+	/**
+	 * Merges list blocks together (depending on the {@link #constructor}'s `direction` parameter).
+	 *
+	 * @fires execute
+	 * @fires afterExecute
+	 * @param {Object} [options] Command options.
+	 * @param {String|Boolean} [options.shouldMergeOnBlocksContentLevel=false] When set `true`, merging will be performed together
+	 * with {@link module:engine/model/model~Model#deleteContent} to get rid of the inline content in the selection or take advantage
+	 * of the heuristics in `deleteContent()` that helps convert lists into paragraphs in certain cases.
+	 */
+	execute( { shouldMergeOnBlocksContentLevel = false } = {} ) {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+		const changedBlocks = [];
+
+		model.change( writer => {
+			const { firstElement, lastElement } = this._getMergeSubjectElements( selection, shouldMergeOnBlocksContentLevel );
+
+			const firstIndent = firstElement.getAttribute( 'listIndent' ) || 0;
+			const lastIndent = lastElement.getAttribute( 'listIndent' );
+			const lastElementId = lastElement.getAttribute( 'listItemId' );
+
+			if ( firstIndent != lastIndent ) {
+				const nestedLastElementBlocks = getNestedListBlocks( lastElement );
+
+				changedBlocks.push( ...indentBlocks( [ lastElement, ...nestedLastElementBlocks ], writer, {
+					indentBy: firstIndent - lastIndent,
+
+					// If outdenting, the entire sub-tree that follows must be included.
+					expand: firstIndent < lastIndent
+				} ) );
+			}
+
+			if ( shouldMergeOnBlocksContentLevel ) {
+				let sel = selection;
+
+				if ( selection.isCollapsed ) {
+					sel = writer.createSelection( writer.createRange(
+						writer.createPositionAt( firstElement, 'end' ),
+						writer.createPositionAt( lastElement, 0 )
+					) );
+				}
+
+				// Delete selected content. Replace entire content only for non-collapsed selection.
+				model.deleteContent( sel, { doNotResetEntireContent: selection.isCollapsed } );
+
+				// Get the last "touched" element after deleteContent call (can't use the lastElement because
+				// it could get merged into the firstElement while deleting content).
+				const lastElementAfterDelete = sel.getLastPosition().parent;
+
+				// Check if the element after it was in the same list item and adjust it if needed.
+				const nextSibling = lastElementAfterDelete.nextSibling;
+
+				changedBlocks.push( lastElementAfterDelete );
+
+				if ( nextSibling && nextSibling !== lastElement && nextSibling.getAttribute( 'listItemId' ) == lastElementId ) {
+					changedBlocks.push( ...mergeListItemBefore( nextSibling, lastElementAfterDelete, writer ) );
+				}
+			} else {
+				changedBlocks.push( ...mergeListItemBefore( lastElement, firstElement, writer ) );
+			}
+
+			this._fireAfterExecute( changedBlocks );
+		} );
+	}
+
+	/**
+	 * Fires the `afterExecute` event.
+	 *
+	 * @private
+	 * @param {Array.<module:engine/model/element~Element>} changedBlocks The changed list elements.
+	 */
+	_fireAfterExecute( changedBlocks ) {
+		/**
+		 * Event fired by the {@link #execute} method.
+		 *
+		 * It allows to execute an action after executing the {@link ~DocumentListMergeCommand#execute} method,
+		 * for example adjusting attributes of changed list items.
+		 *
+		 * @protected
+		 * @event afterExecute
+		 */
+		this.fire( 'afterExecute', sortBlocks( new Set( changedBlocks ) ) );
+	}
+
+	/**
+	 * Checks whether the command can be enabled in the current context.
+	 *
+	 * @private
+	 * @returns {Boolean} Whether the command should be enabled.
+	 */
+	_checkEnabled() {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+		const selectedBlockObject = getSelectedBlockObject( model );
+
+		if ( selection.isCollapsed || selectedBlockObject ) {
+			const positionParent = selectedBlockObject || selection.getFirstPosition().parent;
+
+			if ( !isListItemBlock( positionParent ) ) {
+				return false;
+			}
+
+			const siblingNode = this._direction == 'backward' ?
+				positionParent.previousSibling :
+				positionParent.nextSibling;
+
+			if ( !siblingNode ) {
+				return false;
+			}
+
+			if ( isSingleListItem( [ positionParent, siblingNode ] ) ) {
+				return false;
+			}
+		} else {
+			const lastPosition = selection.getLastPosition();
+			const firstPosition = selection.getFirstPosition();
+
+			// If deleting within a single block of a list item, there's no need to merge anything.
+			// The default delete should be executed instead.
+			if ( lastPosition.parent === firstPosition.parent ) {
+				return false;
+			}
+
+			if ( !isListItemBlock( lastPosition.parent ) ) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	/**
+	 * Returns the boundary elements the merge should be executed for. These are not necessarily selection's first
+	 * and last position parents but sometimes sibling or even further blocks depending on the context.
+	 *
+	 * @param {module:engine/model/selection~Selection} selection The selection the merge is executed for.
+	 * @param {Boolean} shouldMergeOnBlocksContentLevel When `true`, merge is performed together with
+	 * {@link module:engine/model/model~Model#deleteContent} to remove the inline content within the selection.
+	 * @returns {Object} elements
+	 * @returns {module:engine/model/element~Element} elements.firstElement
+	 * @returns {module:engine/model/element~Element} elements.lastElement
+	 */
+	_getMergeSubjectElements( selection, shouldMergeOnBlocksContentLevel ) {
+		const model = this.editor.model;
+		const selectedBlockObject = getSelectedBlockObject( model );
+		let firstElement, lastElement;
+
+		if ( selection.isCollapsed || selectedBlockObject ) {
+			const positionParent = selectedBlockObject || selection.getFirstPosition().parent;
+			const isFirstBlock = isFirstBlockOfListItem( positionParent );
+
+			if ( this._direction == 'backward' ) {
+				lastElement = positionParent;
+
+				if ( isFirstBlock && !shouldMergeOnBlocksContentLevel ) {
+					// For the "c" as an anchorElement:
+					//  * a
+					//    * b
+					//  * [c]  <-- this block should be merged with "a"
+					// It should find "a" element to merge with:
+					//  * a
+					//    * b
+					//    c
+					firstElement = ListWalker.first( positionParent, { sameIndent: true, lowerIndent: true } );
+				} else {
+					firstElement = positionParent.previousSibling;
+				}
+			} else {
+				// In case of the forward merge there is no case as above, just merge with next sibling.
+				firstElement = positionParent;
+				lastElement = positionParent.nextSibling;
+			}
+		} else {
+			firstElement = selection.getFirstPosition().parent;
+			lastElement = selection.getLastPosition().parent;
+		}
+
+		return { firstElement, lastElement };
+	}
+}

package/src/documentlist/documentlistsplitcommand.js

@@ -0,0 +1,114 @@
+/**
+ * @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/documentlist/documentlistsplitcommand
+ */
+
+import { Command } from 'ckeditor5/src/core';
+import {
+	isFirstBlockOfListItem,
+	isListItemBlock,
+	sortBlocks,
+	splitListItemBefore
+} from './utils/model';
+
+/**
+ * The document list split command that splits the list item at the selection.
+ *
+ * It is used by the {@link module:list/documentlist~DocumentList document list feature}.
+ *
+ * @extends module:core/command~Command
+ */
+export default class DocumentListSplitCommand extends Command {
+	/**
+	 * Creates an instance of the command.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor The editor instance.
+	 * @param {'before'|'after'} direction Whether list item should be split before or after the selected block.
+	 */
+	constructor( editor, direction ) {
+		super( editor );
+
+		/**
+		 * Whether list item should be split before or after the selected block.
+		 *
+		 * @readonly
+		 * @private
+		 * @member {'before'|'after'}
+		 */
+		this._direction = direction;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		this.isEnabled = this._checkEnabled();
+	}
+
+	/**
+	 * Splits the list item at the selection.
+	 *
+	 * @fires execute
+	 * @fires afterExecute
+	 */
+	execute() {
+		const editor = this.editor;
+
+		editor.model.change( writer => {
+			const changedBlocks = splitListItemBefore( this._getStartBlock(), writer );
+
+			this._fireAfterExecute( changedBlocks );
+		} );
+	}
+
+	/**
+	 * Fires the `afterExecute` event.
+	 *
+	 * @private
+	 * @param {Array.<module:engine/model/element~Element>} changedBlocks The changed list elements.
+	 */
+	_fireAfterExecute( changedBlocks ) {
+		/**
+		 * Event fired by the {@link #execute} method.
+		 *
+		 * It allows to execute an action after executing the {@link ~DocumentListSplitCommand#execute} method,
+		 * for example adjusting attributes of changed list items.
+		 *
+		 * @protected
+		 * @event afterExecute
+		 */
+		this.fire( 'afterExecute', sortBlocks( new Set( changedBlocks ) ) );
+	}
+
+	/**
+	 * Checks whether the command can be enabled in the current context.
+	 *
+	 * @private
+	 * @returns {Boolean} Whether the command should be enabled.
+	 */
+	_checkEnabled() {
+		const selection = this.editor.model.document.selection;
+		const block = this._getStartBlock();
+
+		return selection.isCollapsed &&
+			isListItemBlock( block ) &&
+			!isFirstBlockOfListItem( block );
+	}
+
+	/**
+	 * Returns the model element that is the main focus of the command (according to the current selection and command direction).
+	 *
+	 * @private
+	 * @returns {module:engine/model/element~Element}
+	 */
+	_getStartBlock() {
+		const doc = this.editor.model.document;
+		const positionParent = doc.selection.getFirstPosition().parent;
+
+		return this._direction == 'before' ? positionParent : positionParent.nextSibling;
+	}
+}