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