Ck/10975 document list commands

packages/ckeditor5-list/src/documentlist.js

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module list/documentlist
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import DocumentListEditing from './documentlist/documentlistediting';
+import ListUI from './list/listui';
+
+/**
+ * The document list feature.
+ *
+ * This is a "glue" plugin that loads the {@link module:list/documentlist/documentlistediting~DocumentListEditing document list
+ * editing feature} and {@link module:list/list/listui~ListUI list UI feature}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class DocumentList extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ DocumentListEditing, ListUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'DocumentList';
+	}
+}

packages/ckeditor5-list/src/documentlist/converters.js

@@ -3,24 +3,28 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+/**
+ * @module list/documentlist/converters
+ */
+
+import {
+	getAllListItemBlocks,
+	getListItemBlocks,
+	ListItemUid
+} from './utils/model';
 import {
 	createListElement,
 	createListItemElement,
-	getAllListItemElements,
 	getIndent,
-	getSiblingListItem,
 	isListView,
 	isListItemView,
-	getListItemElements,
-	findAndAddListHeadToMap,
-	getViewElementNameForListType
-} from './utils';
-import { uid } from 'ckeditor5/src/utils';
-import { UpcastWriter } from 'ckeditor5/src/engine';
+	getViewElementNameForListType,
+	getViewElementIdForListType
+} from './utils/view';
+import ListWalker, { iterateSiblingListBlocks } from './utils/listwalker';
+import { findAndAddListHeadToMap } from './utils/postfixers';
 
-/**
- * @module list/documentlist/converters
- */
+import { UpcastWriter } from 'ckeditor5/src/engine';
 
 /**
  * Returns the upcast converter for list items. It's supposed to work after the block converters (content inside list items) is converted.
@@ -44,7 +48,7 @@ export function listItemUpcastConverter() {
 		}
 
 		const attributes = {
-			listItemId: uid(),
+			listItemId: ListItemUid.next(),
 			listIndent: getIndent( data.viewItem ),
 			listType: data.viewItem.parent && data.viewItem.parent.name == 'ol' ? 'numbered' : 'bulleted'
 		};
@@ -108,7 +112,7 @@ export function listUpcastCleanList() {
 export function reconvertItemsOnDataChange( model, editing ) {
 	return () => {
 		const changes = model.document.differ.getChanges();
-		const itemsToRefresh = new Set();
+		const itemsToRefresh = [];
 		const itemToListHead = new Map();
 		const changedItems = new Set();
 
@@ -136,116 +140,142 @@ export function reconvertItemsOnDataChange( model, editing ) {
 
 					if ( entry.attributeNewValue === null ) {
 						findAndAddListHeadToMap( entry.range.start.getShiftedBy( 1 ), itemToListHead );
-						refreshItemParagraphIfNeeded( item, [] );
+
+						// Check if paragraph should be converted from bogus to plain paragraph.
+						// Passing empty array to not look for other blocks because it's already gone from the model.
+						if ( doesItemParagraphRequiresRefresh( item, [] ) ) {
+							itemsToRefresh.push( item );
+						}
 					} else {
 						changedItems.add( item );
 					}
 				} else if ( item.hasAttribute( 'listItemId' ) ) {
-					refreshItemParagraphIfNeeded( item );
+					// Some other attribute was changed on the list item,
+					// check if paragraph does not need to be converted to bogus or back.
+					if ( doesItemParagraphRequiresRefresh( item ) ) {
+						itemsToRefresh.push( item );
+					}
 				}
 			}
 		}
 
 		for ( const listHead of itemToListHead.values() ) {
-			checkList( listHead );
+			itemsToRefresh.push( ...collectListItemsToRefresh( listHead, changedItems ) );
 		}
 
-		for ( const item of itemsToRefresh ) {
+		for ( const item of new Set( itemsToRefresh ) ) {
 			editing.reconvertItem( item );
 		}
+	};
 
-		function checkList( listHead ) {
-			const visited = new Set();
-			const stack = [];
-
-			for (
-				let prev = null, item = listHead;
-				item && item.hasAttribute( 'listItemId' );
-				prev = item, item = item.nextSibling
-			) {
-				if ( visited.has( item ) ) {
-					continue;
-				}
+	function collectListItemsToRefresh( listHead, changedItems ) {
+		const itemsToRefresh = [];
+		const visited = new Set();
+		const stack = [];
+
+		for ( const { node, previous } of iterateSiblingListBlocks( listHead, 'forward' ) ) {
+			if ( visited.has( node ) ) {
+				continue;
+			}
 
-				const itemIndent = item.getAttribute( 'listIndent' );
+			const itemIndent = node.getAttribute( 'listIndent' );
 
-				if ( prev && itemIndent < prev.getAttribute( 'listIndent' ) ) {
-					stack.length = itemIndent + 1;
-				}
+			// Current node is at the lower indent so trim the stack.
+			if ( previous && itemIndent < previous.getAttribute( 'listIndent' ) ) {
+				stack.length = itemIndent + 1;
+			}
 
-				stack[ itemIndent ] = {
-					id: item.getAttribute( 'listItemId' ),
-					type: item.getAttribute( 'listType' )
-				};
+			// Update the stack for the current indent level.
+			stack[ itemIndent ] = {
+				id: node.getAttribute( 'listItemId' ),
+				type: node.getAttribute( 'listType' )
+			};
 
-				const blocks = getListItemElements( item, 'forward' );
+			// Find all blocks of the current node.
+			const blocks = getListItemBlocks( node, { direction: 'forward' } );
 
-				for ( const block of blocks ) {
-					visited.add( block );
+			for ( const block of blocks ) {
+				visited.add( block );
 
-					refreshItemParagraphIfNeeded( block, blocks );
-					refreshItemWrappingIfNeeded( block, stack );
+				// Check if bogus vs plain paragraph needs refresh.
+				if ( doesItemParagraphRequiresRefresh( block, blocks ) ) {
+					itemsToRefresh.push( block );
+				}
+				// Check if wrapping with UL, OL, LIs needs refresh.
+				else if ( doesItemWrappingRequiresRefresh( block, stack, changedItems ) ) {
+					itemsToRefresh.push( block );
 				}
 			}
 		}
 
-		function refreshItemParagraphIfNeeded( item, blocks ) {
-			if ( !item.is( 'element', 'paragraph' ) ) {
-				return;
-			}
+		return itemsToRefresh;
+	}
 
-			const viewElement = editing.mapper.toViewElement( item );
+	function doesItemParagraphRequiresRefresh( item, blocks ) {
+		if ( !item.is( 'element', 'paragraph' ) ) {
+			return false;
+		}
 
-			if ( !viewElement ) {
-				return;
-			}
+		const viewElement = editing.mapper.toViewElement( item );
 
-			const useBogus = shouldUseBogusParagraph( item, blocks );
+		if ( !viewElement ) {
+			return false;
+		}
 
-			if ( useBogus && viewElement.is( 'element', 'p' ) ) {
-				itemsToRefresh.add( item );
-			} else if ( !useBogus && viewElement.is( 'element', 'span' ) ) {
-				itemsToRefresh.add( item );
-			}
+		const useBogus = shouldUseBogusParagraph( item, blocks );
+
+		if ( useBogus && viewElement.is( 'element', 'p' ) ) {
+			return true;
+		} else if ( !useBogus && viewElement.is( 'element', 'span' ) ) {
+			return true;
 		}
 
-		function refreshItemWrappingIfNeeded( item, stack ) {
-			// Items directly affected by some "change" don't need a refresh, they will be converted by their own changes.
-			if ( changedItems.has( item ) ) {
-				return;
-			}
+		return false;
+	}
 
-			const viewElement = editing.mapper.toViewElement( item );
-			let stackIdx = stack.length - 1;
-
-			for (
-				let element = viewElement.parent;
-				!element.is( 'editableElement' );
-				element = element.parent
-			) {
-				if ( isListItemView( element ) ) {
-					if ( element.id != stack[ stackIdx ].id ) {
-						break;
-					}
-				} else if ( isListView( element ) ) {
-					const expectedElementName = getViewElementNameForListType( stack[ stackIdx ].type );
+	function doesItemWrappingRequiresRefresh( item, stack, changedItems ) {
+		// Items directly affected by some "change" don't need a refresh, they will be converted by their own changes.
+		if ( changedItems.has( item ) ) {
+			return false;
+		}
 
-					if ( element.name != expectedElementName ) {
-						break;
-					}
+		const viewElement = editing.mapper.toViewElement( item );
+		let indent = stack.length - 1;
+
+		// Traverse down the stack to the root to verify if all ULs, OLs, and LIs are as expected.
+		for (
+			let element = viewElement.parent;
+			!element.is( 'editableElement' );
+			element = element.parent
+		) {
+			if ( isListItemView( element ) ) {
+				const expectedElementId = stack[ indent ].id;
+
+				// For LI verify if an ID of the attribute element is correct.
+				if ( element.id != expectedElementId ) {
+					break;
+				}
+			} else if ( isListView( element ) ) {
+				const type = stack[ indent ].type;
+				const expectedElementName = getViewElementNameForListType( type );
+				const expectedElementId = getViewElementIdForListType( type, indent );
+
+				// For UL and OL check if the name and ID of element is correct.
+				if ( element.name != expectedElementName || element.id != expectedElementId ) {
+					break;
+				}
 
-					stackIdx--;
+				indent--;
 
-					// Don't need to iterate further if we already know that the item is wrapped appropriately.
-					if ( stackIdx < 0 ) {
-						return;
-					}
+				// Don't need to iterate further if we already know that the item is wrapped appropriately.
+				if ( indent < 0 ) {
+					return false;
 				}
 			}
-
-			itemsToRefresh.add( item );
 		}
-	};
+
+		return true;
+	}
 }
 
 /**
@@ -380,14 +410,15 @@ export function listItemParagraphDowncastConverter( attributes, model, { dataPip
 		// Find the range over the bogus paragraph (or just an inline content in the data pipeline).
 		let viewRange;
 
-		if ( !dataPipeline ) {
-			viewRange = writer.createRangeOn( paragraphElement );
-		} else {
+		if ( dataPipeline ) {
 			// Unwrap paragraph content from bogus paragraph.
 			viewRange = writer.move( writer.createRangeIn( paragraphElement ), viewPosition );
 
 			writer.remove( paragraphElement );
 			mapper.unbindViewElement( paragraphElement );
+		} else {
+			// Use range on the bogus paragraph to wrap it with ULs and LIs.
+			viewRange = writer.createRangeOn( paragraphElement );
 		}
 
 		// Then wrap it with the list wrappers.
@@ -448,9 +479,9 @@ function wrapListItemBlock( listItem, viewRange, writer ) {
 			break;
 		}
 
-		currentListItem = getSiblingListItem( currentListItem, { smallerIndent: true, listIndent: indent } );
+		currentListItem = ListWalker.first( currentListItem, { lowerIndent: true } );
 
-		// There is no list item with smaller indent, this means this is a document fragment containing
+		// There is no list item with lower indent, this means this is a document fragment containing
 		// only a part of nested list (like copy to clipboard) so we don't need to try to wrap it further.
 		if ( !currentListItem ) {
 			break;
@@ -500,7 +531,7 @@ function getListItemFillerOffset() {
 }
 
 // Whether the given item should be rendered as a bogus paragraph.
-function shouldUseBogusParagraph( item, blocks = getAllListItemElements( item ) ) {
+function shouldUseBogusParagraph( item, blocks = getAllListItemBlocks( item ) ) {
 	if ( !item.hasAttribute( 'listItemId' ) ) {
 		return false;
 	}