To-do lists in document lists

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

@@ -109,7 +109,7 @@ export default class DataFilter extends Plugin {
 	/**
 	 * Allowed element definitions by {@link module:html-support/datafilter~DataFilter#allowElement} method.
 	*/
-	private readonly _allowedElements: Set<DataSchemaDefinition & { coupledAttribute?: string }>;
+	private readonly _allowedElements: Set<DataSchemaBlockElementDefinition | DataSchemaInlineElementDefinition>;
 
 	/**
 	 * Disallowed element names by {@link module:html-support/datafilter~DataFilter#disallowElement} method.
@@ -128,22 +128,22 @@ export default class DataFilter extends Plugin {
 	 */
 	private _coupledAttributes: Map<string, Array<string>> | null;
 
+	/**
+	 * TODO
+	 */
+	private _coupledGHSAttributes: Map<string, string> | null;
+
 	constructor( editor: Editor ) {
 		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._coupledGHSAttributes = null;
 
 		this._registerElementsAfterInit();
 		this._registerElementHandlers();
@@ -449,27 +449,44 @@ export default class DataFilter extends Plugin {
 			const changes = model.document.differ.getChanges();
 			let changed = false;
 
-			const coupledAttributes = this._getCoupledAttributesMap();
+			const [ coupledAttributes, coupledGHSAttributes ] = this._getCoupledAttributesMaps();
 
 			for ( const change of changes ) {
-				// Handle only attribute removals.
-				if ( change.type != 'attribute' || change.attributeNewValue !== null ) {
-					continue;
-				}
+				// Handle attribute removals.
+				if ( change.type == 'attribute' && change.attributeNewValue === null ) {
+					// Find a list of coupled GHS attributes.
+					const attributeKeys = coupledAttributes.get( change.attributeKey );
 
-				// Find a list of coupled GHS attributes.
-				const attributeKeys = coupledAttributes.get( change.attributeKey );
+					if ( !attributeKeys ) {
+						continue;
+					}
 
-				if ( !attributeKeys ) {
-					continue;
+					// Remove the coupled GHS attributes on the same range as the feature attribute was removed.
+					for ( const { item } of change.range.getWalker( { shallow: true } ) ) {
+						for ( const attributeKey of attributeKeys ) {
+							if ( item.hasAttribute( attributeKey ) ) {
+								writer.removeAttribute( attributeKey, item );
+								changed = true;
+							}
+						}
+					}
 				}
+				// Handle element rename (and attribute remove on it).
+				// Example: <paragraph htmlLiAttributes listItemId> -> <heading1>
+				// The GHS element attributes can't exist without coupled feature attribute (for example in lists).
+				else if ( change.type == 'insert' && change.name != '$text' ) {
+					for ( const { item } of writer.createRangeOn( change.position.nodeAfter! ) ) {
+						if ( !item.is( 'element' ) ) {
+							continue;
+						}
+
+						for ( const [ key ] of item.getAttributes() ) {
+							const coupledAttribute = coupledGHSAttributes.get( key );
 
-				// Remove the coupled GHS attributes on the same range as the feature attribute was removed.
-				for ( const { item } of change.range.getWalker( { shallow: true } ) ) {
-					for ( const attributeKey of attributeKeys ) {
-						if ( item.hasAttribute( attributeKey ) ) {
-							writer.removeAttribute( attributeKey, item );
-							changed = true;
+							if ( coupledAttribute && !item.hasAttribute( coupledAttribute ) ) {
+								writer.removeAttribute( key, item );
+								changed = true;
+							}
 						}
 					}
 				}
@@ -540,26 +557,37 @@ export default class DataFilter extends Plugin {
 	 * Collects the map of coupled attributes. The returned map is keyed by the feature attribute name
 	 * and coupled GHS attribute names are stored in the value array.
 	 */
-	private _getCoupledAttributesMap(): Map<string, Array<string>> {
-		if ( this._coupledAttributes ) {
-			return this._coupledAttributes;
+	private _getCoupledAttributesMaps(): [ Map<string, Array<string>>, Map<string, string> ] {
+		if ( this._coupledAttributes && this._coupledGHSAttributes ) {
+			return [ this._coupledAttributes, this._coupledGHSAttributes ];
 		}
 
 		this._coupledAttributes = new Map<string, Array<string>>();
+		this._coupledGHSAttributes = new Map<string, string>();
 
 		for ( const definition of this._allowedElements ) {
-			if ( definition.coupledAttribute && definition.model ) {
-				const attributeNames = this._coupledAttributes.get( definition.coupledAttribute );
+			if ( !definition.isInline ) {
+				continue;
+			}
+
+			const inlineDefinition = definition as DataSchemaInlineElementDefinition;
+
+			if ( inlineDefinition.coupledAttribute && inlineDefinition.model ) {
+				const attributeNames = this._coupledAttributes.get( inlineDefinition.coupledAttribute );
 
 				if ( attributeNames ) {
-					attributeNames.push( definition.model );
+					attributeNames.push( inlineDefinition.model );
 				} else {
-					this._coupledAttributes.set( definition.coupledAttribute, [ definition.model ] );
+					this._coupledAttributes.set( inlineDefinition.coupledAttribute, [ inlineDefinition.model ] );
+				}
+
+				if ( inlineDefinition.appliesToBlock ) {
+					this._coupledGHSAttributes.set( inlineDefinition.model, inlineDefinition.coupledAttribute );
 				}
 			}
 		}
 
-		return this._coupledAttributes;
+		return [ this._coupledAttributes, this._coupledGHSAttributes ];
 	}
 
 	/**

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

@@ -174,7 +174,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 +256,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: string ) {
+	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

@@ -80,8 +80,13 @@ export function listItemUpcastConverter(): GetCallback<UpcastElementEvent> {
 
 		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 ) ) {
-				writer.setAttributes( attributes, item );
+			if ( !item.hasAttribute( 'listItemId' ) ) {
+				// Preserve list type if was already set (for example by to-do list feature).
+				if ( item.getAttribute( 'listType' ) ) {
+					writer.setAttributes( { ...attributes, listType: item.getAttribute( 'listType' ) }, item );
+				} else {
+					writer.setAttributes( attributes, item );
+				}
 			}
 		}
 

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

@@ -19,7 +19,8 @@ import {
 	ListItemUid,
 	sortBlocks,
 	getSelectedBlockObject,
-	isListItemBlock
+	isListItemBlock,
+	checkCanBeRenamed
 } from './utils/model';
 
 /**
@@ -29,7 +30,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.
@@ -39,16 +40,22 @@ export default class DocumentListCommand extends Command {
 	 */
 	public declare value: boolean;
 
+	/**
+	 * TODO
+	 */
+	private _requiredElementName?: string;
+
 	/**
 	 * Creates an instance of the 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', requiredElementName?: string ) {
 		super( editor );
 
 		this.type = type;
+		this._requiredElementName = requiredElementName;
 	}
 
 	/**
@@ -75,7 +82,10 @@ export default class DocumentListCommand extends Command {
 		const selectedBlockObject = getSelectedBlockObject( model );
 
 		const blocks = Array.from( document.selection.getSelectedBlocks() )
-			.filter( block => model.schema.checkAttribute( block, 'listType' ) );
+			.filter( block => (
+				model.schema.checkAttribute( block, 'listType' ) ||
+				this._requiredElementName && checkCanBeRenamed( block, model.schema, this._requiredElementName )
+			) );
 
 		// Whether we are turning off some items.
 		const turnOff = options.forceValue !== undefined ? !options.forceValue : this.value;
@@ -100,7 +110,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 ] );
 
@@ -115,6 +125,16 @@ export default class DocumentListCommand extends Command {
 				const changedBlocks = [];
 
 				for ( const block of blocks ) {
+					// Rename block to a required element name if type of the list requires it.
+					if (
+						this._requiredElementName &&
+						!block.is( 'element', this._requiredElementName ) &&
+						checkCanBeRenamed( block, model.schema, this._requiredElementName )
+					) {
+						writer.rename( block, this._requiredElementName );
+						changedBlocks.push( block );
+					}
+
 					// Promote the given block to the list item.
 					if ( !block.hasAttribute( 'listType' ) ) {
 						writer.setAttributes( {

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

@@ -79,7 +79,7 @@ const LIST_BASE_ATTRIBUTES = [ 'listType', 'listIndent', 'listItemId' ];
  * Map of model attributes applicable to list blocks.
  */
 export interface ListItemAttributesMap {
-	listType?: 'numbered' | 'bulleted';
+	listType?: 'numbered' | 'bulleted' | string;
 	listIndent?: number;
 	listItemId?: string;
 }
@@ -391,7 +391,28 @@ export default class DocumentListEditing extends Plugin {
 		const attributeNames = this._getListAttributeNames();
 
 		editor.conversion.for( 'upcast' )
-			.elementToElement( { view: 'li', model: 'paragraph' } )
+			// Convert <li> to a generic paragraph so the content of <li> is always inside a block.
+			// Setting the listType attribute to let other features (to-do list) know that this is part of a list item.
+			.elementToElement( {
+				view: 'li',
+				model: ( viewElement, { writer } ) => writer.createElement( 'paragraph', { listType: '' } )
+			} )
+			// Convert paragraph to the list block (without list type defined yet).
+			// This is important to properly handle bogus paragraph and to-do lists.
+			// Most of the time the bogus paragraph should not appear in the data of to-do list,
+			// but if there is any marker or an attribute on the paragraph then the bogus paragraph
+			// is preserved in the data, and we need to be able to detect this case.
+			.elementToElement( {
+				view: 'p',
+				model: ( viewElement, { writer } ) => {
+					if ( viewElement.parent && viewElement.parent.is( 'element', 'li' ) ) {
+						return writer.createElement( 'paragraph', { listType: '' } );
+					}
+
+					return null;
+				},
+				converterPriority: 'high'
+			} )
 			.add( dispatcher => {
 				dispatcher.on<UpcastElementEvent>( 'element:li', listItemUpcastConverter() );
 				dispatcher.on<UpcastElementEvent>( 'element:ul', listUpcastCleanList(), { priority: 'high' } );

packages/ckeditor5-list/src/documentlist/utils/model.ts

@@ -13,7 +13,8 @@ import type {
 	Model,
 	Node,
 	Writer,
-	Item
+	Item,
+	Schema
 } from 'ckeditor5/src/engine';
 
 import { uid, toArray, type ArrayOrItem } from 'ckeditor5/src/utils';
@@ -45,7 +46,7 @@ export class ListItemUid {
 export interface ListElement extends Element {
 	getAttribute( key: 'listItemId' ): string;
 	getAttribute( key: 'listIndent' ): number;
-	getAttribute( key: 'listType' ): 'numbered' | 'bulleted';
+	getAttribute( key: 'listType' ): 'numbered' | 'bulleted' | string;
 	getAttribute( key: string ): unknown;
 }
 
@@ -545,6 +546,16 @@ export function getSelectedBlockObject( model: Model ): Element | null {
 	return null;
 }
 
+/**
+ * Checks whether the given block can be replaced by a paragraph.
+ *
+ * @param block A block to be tested.
+ * @param schema The schema of the document.
+ */
+export function checkCanBeRenamed( block: Element, schema: Schema, elementName: string ): boolean {
+	return schema.checkChild( block.parent as Element, elementName ) && !schema.isObject( block );
+}
+
 // Merges a given block to the given parent block if parent is a list item and there is no more blocks in the same item.
 function mergeListItemIfNotLast(
 	block: ListElement,

packages/ckeditor5-list/src/documentlist/utils/postfixers.ts

@@ -135,6 +135,17 @@ export function fixListItemIds(
 
 		seenIds.add( listItemId );
 
+		// Make sure that all items in a to-do list have unique IDs.
+		if ( listType == 'todo' ) {
+			if ( node.getAttribute( 'listItemId' ) != listItemId ) {
+				writer.setAttribute( 'listItemId', listItemId, node );
+
+				applied = true;
+			}
+
+			continue;
+		}
+
 		for ( const block of getListItemBlocks( node, { direction: 'forward' } ) ) {
 			visited.add( block );