To-do lists in document lists

packages/ckeditor5-html-support/src/datafilter.ts

@@ -132,17 +132,11 @@ export default class DataFilter extends Plugin {
 		super( editor );
 
 		this._dataSchema = editor.plugins.get( 'DataSchema' );
-
 		this._allowedAttributes = new Matcher();
-
 		this._disallowedAttributes = new Matcher();
-
 		this._allowedElements = new Set();
-
 		this._disallowedElements = new Set();
-
 		this._dataInitialized = false;
-
 		this._coupledAttributes = null;
 
 		this._registerElementsAfterInit();

packages/ckeditor5-html-support/src/integrations/documentlist.ts

@@ -107,36 +107,8 @@ export default class DocumentListElementSupport extends Plugin {
 		} );
 
 		// Make sure that all items in a single list (items at the same level & listType) have the same properties.
-		// Note: This is almost an exact copy from DocumentListPropertiesEditing.
 		documentListEditing.on<DocumentListEditingPostFixerEvent>( 'postFixer', ( evt, { listNodes, writer } ) => {
-			const previousNodesByIndent = []; // Last seen nodes of lower indented lists.
-
-			for ( const { node, previous } of listNodes ) {
-				// For the first list block there is nothing to compare with.
-				if ( !previous ) {
-					continue;
-				}
-
-				const nodeIndent = node.getAttribute( 'listIndent' );
-				const previousNodeIndent = previous.getAttribute( 'listIndent' );
-
-				let previousNodeInList = null; // It's like `previous` but has the same indent as current node.
-
-				// Let's find previous node for the same indent.
-				// We're going to need that when we get back to previous indent.
-				if ( nodeIndent > previousNodeIndent ) {
-					previousNodesByIndent[ previousNodeIndent ] = previous;
-				}
-				// Restore the one for given indent.
-				else if ( nodeIndent < previousNodeIndent ) {
-					previousNodeInList = previousNodesByIndent[ nodeIndent ];
-					previousNodesByIndent.length = nodeIndent;
-				}
-				// Same indent.
-				else {
-					previousNodeInList = previous;
-				}
-
+			for ( const { node, previousNodeInList } of listNodes ) {
 				// This is a first item of a nested list.
 				if ( !previousNodeInList ) {
 					continue;
@@ -174,7 +146,7 @@ export default class DocumentListElementSupport extends Plugin {
 			for ( const { node } of listNodes ) {
 				const listType = node.getAttribute( 'listType' );
 
-				if ( listType === 'bulleted' && node.getAttribute( 'htmlOlAttributes' ) ) {
+				if ( listType !== 'numbered' && node.getAttribute( 'htmlOlAttributes' ) ) {
 					writer.removeAttribute( 'htmlOlAttributes', node );
 					evt.return = true;
 				}
@@ -256,8 +228,8 @@ function viewToModelListAttributeConverter( attributeName: string, dataFilter: D
 /**
  * Returns HTML attribute name based on provided list type.
  */
-function getAttributeFromListType( listType: 'bulleted' | 'numbered' ) {
-	return listType === 'bulleted' ?
-		'htmlUlAttributes' :
-		'htmlOlAttributes';
+function getAttributeFromListType( listType: 'bulleted' | 'numbered' | 'todo' ) {
+	return listType === 'numbered' ?
+		'htmlOlAttributes' :
+		'htmlUlAttributes';
 }

packages/ckeditor5-list/src/augmentation.ts

@@ -23,6 +23,8 @@ import type {
 	TodoList,
 	TodoListEditing,
 	TodoListUI,
+	TodoDocumentList,
+	TodoDocumentListEditing,
 
 	ListCommand,
 	DocumentListCommand,
@@ -36,7 +38,8 @@ import type {
 	DocumentListStartCommand,
 	ListReversedCommand,
 	DocumentListReversedCommand,
-	CheckTodoListCommand
+	CheckTodoListCommand,
+	CheckTodoDocumentListCommand
 } from '.';
 
 declare module '@ckeditor/ckeditor5-core' {
@@ -69,6 +72,8 @@ declare module '@ckeditor/ckeditor5-core' {
 		[ TodoList.pluginName ]: TodoList;
 		[ TodoListEditing.pluginName ]: TodoListEditing;
 		[ TodoListUI.pluginName ]: TodoListUI;
+		[ TodoDocumentList.pluginName ]: TodoDocumentList;
+		[ TodoDocumentListEditing.pluginName ]: TodoDocumentListEditing;
 	}
 
   interface CommandsMap {
@@ -83,7 +88,7 @@ declare module '@ckeditor/ckeditor5-core' {
 		listStyle: ListStyleCommand | DocumentListStyleCommand;
 		listStart: ListStartCommand | DocumentListStartCommand;
 		listReversed: ListReversedCommand | DocumentListReversedCommand;
-		todoList: ListCommand;
-		checkTodoList: CheckTodoListCommand;
+		todoList: ListCommand | DocumentListCommand;
+		checkTodoList: CheckTodoListCommand | CheckTodoDocumentListCommand;
 	}
 }

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

@@ -30,6 +30,7 @@ import {
 	getAllListItemBlocks,
 	getListItemBlocks,
 	isListItemBlock,
+	isFirstBlockOfListItem,
 	ListItemUid,
 	type ListElement
 } from './utils/model';
@@ -48,8 +49,8 @@ import { findAndAddListHeadToMap } from './utils/postfixers';
 import type {
 	default as DocumentListEditing,
 	DocumentListEditingCheckAttributesEvent,
-	DowncastStrategy,
-	ListItemAttributesMap
+	ListItemAttributesMap,
+	DowncastStrategy
 } from './documentlistediting';
 
 /**
@@ -72,15 +73,26 @@ export function listItemUpcastConverter(): GetCallback<UpcastElementEvent> {
 			return;
 		}
 
+		const listItemId = ListItemUid.next();
+		const listIndent = getIndent( data.viewItem );
+		let listType = data.viewItem.parent && data.viewItem.parent.is( 'element', 'ol' ) ? 'numbered' : 'bulleted';
+
+		// Preserve list type if was already set (for example by to-do list feature).
+		const firstItemListType = items[ 0 ].getAttribute( 'listType' ) as string;
+
+		if ( firstItemListType ) {
+			listType = firstItemListType;
+		}
+
 		const attributes = {
-			listItemId: ListItemUid.next(),
-			listIndent: getIndent( data.viewItem ),
-			listType: data.viewItem.parent && data.viewItem.parent.is( 'element', 'ol' ) ? 'numbered' : 'bulleted'
+			listItemId,
+			listIndent,
+			listType
 		};
 
 		for ( const item of items ) {
 			// Set list attributes only on same level items, those nested deeper are already handled by the recursive conversion.
-			if ( !isListItemBlock( item ) ) {
+			if ( !item.hasAttribute( 'listItemId' ) ) {
 				writer.setAttributes( attributes, item );
 			}
 		}
@@ -323,7 +335,8 @@ export function reconvertItemsOnDataChange(
 export function listItemDowncastConverter(
 	attributeNames: Array<string>,
 	strategies: Array<DowncastStrategy>,
-	model: Model
+	model: Model,
+	{ dataPipeline }: { dataPipeline?: boolean } = {}
 ): GetCallback<DowncastAttributeEvent<ListElement>> {
 	const consumer = createAttributesConsumer( attributeNames );
 
@@ -345,11 +358,51 @@ export function listItemDowncastConverter(
 		// This is for cases when mapping is using inner view element like in the code blocks (pre > code).
 		const viewElement = findMappedViewElement( listItem, mapper, model )!;
 
+		// Remove custom item markers.
+		let previousSibling = viewElement.previousSibling;
+
+		while ( previousSibling ) {
+			if ( !previousSibling.is( 'element' ) || !previousSibling.getCustomProperty( 'listItemMarker' ) ) {
+				break;
+			}
+
+			writer.remove( previousSibling );
+			previousSibling = viewElement.previousSibling;
+		}
+
 		// Unwrap element from current list wrappers.
 		unwrapListItemBlock( viewElement, writer );
 
+		let viewRange = writer.createRangeOn( viewElement );
+
+		// Insert custom item markers.
+		if ( isFirstBlockOfListItem( listItem ) ) {
+			for ( const strategy of strategies ) {
+				if ( strategy.scope == 'itemMarker' && listItem.hasAttribute( strategy.attributeName ) ) {
+					const markerElement = strategy.createElement(
+						writer,
+						listItem.getAttribute( strategy.attributeName ),
+						listItem,
+						{ dataPipeline }
+					);
+
+					if ( !markerElement ) {
+						continue;
+					}
+
+					writer.setCustomProperty( 'listItemMarker', true, markerElement );
+					writer.insert( viewRange.start, markerElement );
+
+					viewRange = writer.createRange(
+						writer.createPositionBefore( markerElement ),
+						writer.createPositionAfter( viewElement )
+					);
+				}
+			}
+		}
+
 		// Then wrap them with the new list wrappers.
-		wrapListItemBlock( listItem, writer.createRangeOn( viewElement ), strategies, writer );
+		wrapListItemBlock( listItem, viewRange, strategies, writer );
 	};
 }
 
@@ -395,7 +448,7 @@ export function findMappedViewElement( element: Element, mapper: Mapper, model:
 	const modelRange = model.createRangeOn( element );
 	const viewRange = mapper.toViewRange( modelRange ).getTrimmed();
 
-	return viewRange.getContainedElement();
+	return viewRange.end.nodeBefore as ViewElement | null;
 }
 
 // Unwraps all ol, ul, and li attribute elements that are wrapping the provided view element.
@@ -430,7 +483,10 @@ function wrapListItemBlock(
 		const listViewElement = createListElement( writer, indent, currentListItem.getAttribute( 'listType' ) );
 
 		for ( const strategy of strategies ) {
-			if ( currentListItem.hasAttribute( strategy.attributeName ) ) {
+			if (
+				( strategy.scope == 'list' || strategy.scope == 'item' ) &&
+				currentListItem.hasAttribute( strategy.attributeName )
+			) {
 				strategy.setAttributeOnDowncast(
 					writer,
 					currentListItem.getAttribute( strategy.attributeName ),

packages/ckeditor5-list/src/documentlist/documentlistcommand.ts

@@ -29,7 +29,7 @@ export default class DocumentListCommand extends Command {
 	/**
 	 * The type of the list created by the command.
 	 */
-	public readonly type: 'numbered' | 'bulleted';
+	public readonly type: 'numbered' | 'bulleted' | 'todo';
 
 	/**
 	 * A flag indicating whether the command is active, which means that the selection starts in a list of the same type.
@@ -45,7 +45,7 @@ export default class DocumentListCommand extends Command {
 	 * @param editor The editor instance.
 	 * @param type List type that will be handled by this command.
 	 */
-	constructor( editor: Editor, type: 'numbered' | 'bulleted' ) {
+	constructor( editor: Editor, type: 'numbered' | 'bulleted' | 'todo' ) {
 		super( editor );
 
 		this.type = type;
@@ -100,7 +100,7 @@ export default class DocumentListCommand extends Command {
 
 				this._fireAfterExecute( changedBlocks );
 			}
-			// Turning on the list items for a collapsed selection inside a list item.
+			// Changing type of list items for a collapsed selection inside a list item.
 			else if ( ( selectedBlockObject || document.selection.isCollapsed ) && isListItemBlock( blocks[ 0 ] ) ) {
 				const changedBlocks = getListItems( selectedBlockObject || blocks[ 0 ] );
 
@@ -178,8 +178,10 @@ export default class DocumentListCommand extends Command {
 	 * @returns Whether the command should be enabled.
 	 */
 	private _checkEnabled(): boolean {
-		const selection = this.editor.model.document.selection;
-		const schema = this.editor.model.schema;
+		const model = this.editor.model;
+		const schema = model.schema;
+		const selection = model.document.selection;
+
 		const blocks = Array.from( selection.getSelectedBlocks() );
 
 		if ( !blocks.length ) {