Merge pull request #14700 from ckeditor/ck/14663-to-do-lists-poc

Feature (list): Introducing the to-do lists compatible with the document list feature. Closes #14663.

packages/ckeditor5-code-block/package.json

@@ -22,9 +22,10 @@
     "@ckeditor/ckeditor5-clipboard": "39.0.2",
     "@ckeditor/ckeditor5-core": "39.0.2",
     "@ckeditor/ckeditor5-dev-utils": "^39.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "39.0.2",
     "@ckeditor/ckeditor5-engine": "39.0.2",
     "@ckeditor/ckeditor5-enter": "39.0.2",
-    "@ckeditor/ckeditor5-editor-classic": "39.0.2",
+    "@ckeditor/ckeditor5-html-support": "39.0.2",
     "@ckeditor/ckeditor5-image": "39.0.2",
     "@ckeditor/ckeditor5-indent": "39.0.2",
     "@ckeditor/ckeditor5-list": "39.0.2",

packages/ckeditor5-code-block/src/codeblockediting.ts

@@ -22,6 +22,8 @@ import {
 	type Element
 } from 'ckeditor5/src/engine';
 
+import type { DocumentListEditing } from '@ckeditor/ckeditor5-list';
+
 import CodeBlockCommand from './codeblockcommand';
 import IndentCodeBlockCommand from './indentcodeblockcommand';
 import OutdentCodeBlockCommand from './outdentcodeblockcommand';
@@ -97,7 +99,8 @@ export default class CodeBlockEditing extends Plugin {
 		const schema = editor.model.schema;
 		const model = editor.model;
 		const view = editor.editing.view;
-		const isDocumentListEditingLoaded = editor.plugins.has( 'DocumentListEditing' );
+		const documentListEditing: DocumentListEditing | null = editor.plugins.has( 'DocumentListEditing' ) ?
+			editor.plugins.get( 'DocumentListEditing' ) : null;
 
 		const normalizedLanguagesDefs = getNormalizedAndLocalizedLanguageDefinitions( editor );
 
@@ -133,11 +136,10 @@ export default class CodeBlockEditing extends Plugin {
 		// Allow all list* attributes on `codeBlock` (integration with DocumentList).
 		// Disallow all attributes on $text inside `codeBlock`.
 		schema.addAttributeCheck( ( context, attributeName ) => {
-			const isDocumentListAttributeOnCodeBlock = context.endsWith( 'codeBlock' ) &&
-				attributeName.startsWith( 'list' ) &&
-				attributeName !== 'list';
-
-			if ( isDocumentListEditingLoaded && isDocumentListAttributeOnCodeBlock ) {
+			if (
+				context.endsWith( 'codeBlock' ) &&
+				documentListEditing && documentListEditing.getListAttributeNames().includes( attributeName )
+			) {
 				return true;
 			}
 

packages/ckeditor5-code-block/tests/codeblock-integration.js

@@ -12,6 +12,8 @@ import GFMDataProcessor from '@ckeditor/ckeditor5-markdown-gfm/src/gfmdataproces
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ImageInlineEditing from '@ckeditor/ckeditor5-image/src/image/imageinlineediting';
 import DocumentListEditing from '@ckeditor/ckeditor5-list/src/documentlist/documentlistediting';
+import DocumentListPropertiesEditing from '@ckeditor/ckeditor5-list/src/documentlistproperties/documentlistpropertiesediting';
+import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport';
 import { setData, getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 import CodeBlockUI from '../src/codeblockui';
@@ -178,7 +180,14 @@ describe( 'CodeBlock - integration', () => {
 			beforeEach( async () => {
 				editor = await ClassicTestEditor
 					.create( '', {
-						plugins: [ CodeBlockEditing, DocumentListEditing, Enter, Paragraph ]
+						plugins: [
+							CodeBlockEditing, DocumentListEditing, DocumentListPropertiesEditing, Enter, Paragraph, GeneralHtmlSupport
+						],
+						htmlSupport: {
+							allow: [
+								{ name: /./, attributes: true, styles: true, classes: true }
+							]
+						}
 					} );
 
 				model = editor.model;
@@ -188,22 +197,26 @@ describe( 'CodeBlock - integration', () => {
 				await editor.destroy();
 			} );
 
-			it( 'should allow all attributes starting with list* in the schema', () => {
+			it( 'should allow all list attributes in the schema', () => {
 				setData( model, '<codeBlock language="plaintext">[]foo</codeBlock>' );
 
 				const codeBlock = model.document.getRoot().getChild( 0 );
 
 				expect( model.schema.checkAttribute( codeBlock, 'listItemId' ), 'listItemId' ).to.be.true;
 				expect( model.schema.checkAttribute( codeBlock, 'listType' ), 'listType' ).to.be.true;
-				expect( model.schema.checkAttribute( codeBlock, 'listStart' ), 'listStart' ).to.be.true;
-				expect( model.schema.checkAttribute( codeBlock, 'listFoo' ), 'listFoo' ).to.be.true;
+				expect( model.schema.checkAttribute( codeBlock, 'listStyle' ), 'listStyle' ).to.be.true;
+				expect( model.schema.checkAttribute( codeBlock, 'htmlLiAttributes' ), 'htmlLiAttributes' ).to.be.true;
+				expect( model.schema.checkAttribute( codeBlock, 'htmlUlAttributes' ), 'htmlUlAttributes' ).to.be.true;
+				expect( model.schema.checkAttribute( codeBlock, 'htmlOlAttributes' ), 'htmlOlAttributes' ).to.be.true;
 			} );
 
-			it( 'should disallow attributes that do not start with "list" in the schema but include the sequence', () => {
+			it( 'should disallow attributes that are not registered as list attributes', () => {
 				setData( model, '<codeBlock language="plaintext">[]foo</codeBlock>' );
 
 				const codeBlock = model.document.getRoot().getChild( 0 );
 
+				expect( model.schema.checkAttribute( codeBlock, 'listReversed' ), 'listReversed' ).to.be.false;
+				expect( model.schema.checkAttribute( codeBlock, 'listStart' ), 'listStart' ).to.be.false;
 				expect( model.schema.checkAttribute( codeBlock, 'list' ), 'list' ).to.be.false;
 				expect( model.schema.checkAttribute( codeBlock, 'fooList' ), 'fooList' ).to.be.false;
 				expect( model.schema.checkAttribute( codeBlock, 'alist' ), 'alist' ).to.be.false;

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;
 	}
 }