[WiP] Skip level lists

packages/ckeditor5-indent/src/integrations/indentblocklistintegration.ts

@@ -242,7 +242,11 @@ export class IndentBlockListIntegration extends Plugin {
 		const indentCommand = editor.commands.get( 'indent' ) as MultiCommand;
 		const outdentCommand = editor.commands.get( 'outdent' ) as MultiCommand;
 
-		indentCommand.registerChildCommand( editor.commands.get( 'indentBlockList' )! );
+		// Priority is highest so that block indent takes precedence over list indent (`indentList` is registered
+		// at `high`). When the selection is at the start of the first list item at indent 0, the block indent
+		// command adds margin instead of increasing the list indent level. For items at higher indent levels,
+		// this command is disabled and falls through to `indentList`.
+		indentCommand.registerChildCommand( editor.commands.get( 'indentBlockList' )!, { priority: 'highest' } );
 		outdentCommand.registerChildCommand( editor.commands.get( 'outdentBlockList' )! );
 
 		indentCommand.registerChildCommand( editor.commands.get( 'indentBlockListItem' )! );

packages/ckeditor5-indent/tests/integrations/Indentblocklistcommand.js → packages/ckeditor5-indent/tests/integrations/indentblocklistcommand.js

@@ -195,6 +195,65 @@ describe( 'IndentBlockListCommand', () => {
 						expect( command.isEnabled ).to.be.true;
 					} );
 				} );
+
+				describe( 'adjacent lists of different types', () => {
+					it( 'should be true when selection is at start of first bulleted item after numbered list', () => {
+						_setModelData( model, modelList( [
+							'# foo',
+							'# bar',
+							'* []baz'
+						] ) );
+
+						expect( command.isEnabled ).to.be.true;
+					} );
+
+					it( 'should be false when selection is at start of second item in bulleted list after numbered list', () => {
+						_setModelData( model, modelList( [
+							'# foo',
+							'* bar',
+							'* []baz'
+						] ) );
+
+						expect( command.isEnabled ).to.be.false;
+					} );
+				} );
+
+				describe( 'skip-level list items (listIndent > 0)', () => {
+					it( 'should be false when selection is at start of a skip-level list item preceded by a paragraph', () => {
+						_setModelData( model, modelList( [
+							'foo',
+							'  * []bar'
+						] ) );
+
+						expect( command.isEnabled ).to.be.false;
+					} );
+
+					it( 'should be false when skip-level list item is the first element in the document', () => {
+						_setModelData( model, modelList( [
+							'  * []bar'
+						] ) );
+
+						expect( command.isEnabled ).to.be.false;
+					} );
+
+					it( 'should be false for a sublist item (has parent list item)', () => {
+						_setModelData( model, modelList( [
+							'* foo',
+							'    * []bar'
+						] ) );
+
+						expect( command.isEnabled ).to.be.false;
+					} );
+
+					it( 'should be false for a skip-level list item preceded by a list item of another type', () => {
+						_setModelData( model, modelList( [
+							'# foo',
+							'    * []bar'
+						] ) );
+
+						expect( command.isEnabled ).to.be.false;
+					} );
+				} );
 			} );
 
 			describe( 'execute', () => {
@@ -649,6 +708,65 @@ describe( 'IndentBlockListCommand', () => {
 						expect( command.isEnabled ).to.be.false;
 					} );
 				} );
+
+				describe( 'adjacent lists of different types', () => {
+					it( 'should be true when selection is at start of first bulleted item after numbered list', () => {
+						_setModelData( model, modelList( [
+							'# foo',
+							'# bar',
+							'* []baz'
+						] ) );
+
+						expect( command.isEnabled ).to.be.true;
+					} );
+
+					it( 'should be false when selection is at start of second item in bulleted list after numbered list', () => {
+						_setModelData( model, modelList( [
+							'# foo',
+							'* bar',
+							'* []baz'
+						] ) );
+
+						expect( command.isEnabled ).to.be.false;
+					} );
+				} );
+
+				describe( 'skip-level list items (listIndent > 0)', () => {
+					it( 'should be false when selection is at start of a skip-level list item preceded by a paragraph', () => {
+						_setModelData( model, modelList( [
+							'foo',
+							'  * []bar'
+						] ) );
+
+						expect( command.isEnabled ).to.be.false;
+					} );
+
+					it( 'should be false when skip-level list item is the first element in the document', () => {
+						_setModelData( model, modelList( [
+							'  * []bar'
+						] ) );
+
+						expect( command.isEnabled ).to.be.false;
+					} );
+
+					it( 'should be false for a sublist item (has parent list item)', () => {
+						_setModelData( model, modelList( [
+							'* foo',
+							'    * []bar'
+						] ) );
+
+						expect( command.isEnabled ).to.be.false;
+					} );
+
+					it( 'should be false for a skip-level list item preceded by a list item of another type', () => {
+						_setModelData( model, modelList( [
+							'# foo',
+							'    * []bar'
+						] ) );
+
+						expect( command.isEnabled ).to.be.false;
+					} );
+				} );
 			} );
 
 			describe( 'execute', () => {

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

@@ -327,15 +327,21 @@ export function reconvertItemsOnDataChange(
 				continue;
 			}
 
-			const eventName = `checkAttributes:${ isListItemElement ? 'item' : 'list' }` as const;
-			const needsRefresh = listEditing.fire<ListEditingCheckAttributesEvent>( eventName, {
-				viewElement: element as ViewElement,
-				modelAttributes: stack[ indent ].modelAttributes,
-				modelReferenceElement: stack[ indent ].modelElement
-			} );
-
-			if ( needsRefresh ) {
-				break;
+			// The stack is indexed by listIndent, so with skip-level lists it may have empty slots
+			// for skipped indent levels. Skip attribute checking for those but still track the indent
+			// level below. Without skip-level lists, the post-fixer ensures sequential indents, so the
+			// stack is always fully populated and this guard has no effect.
+			if ( stack[ indent ] ) {
+				const eventName = `checkAttributes:${ isListItemElement ? 'item' : 'list' }` as const;
+				const needsRefresh = listEditing.fire<ListEditingCheckAttributesEvent>( eventName, {
+					viewElement: element as ViewElement,
+					modelAttributes: stack[ indent ].modelAttributes,
+					modelReferenceElement: stack[ indent ].modelElement
+				} );
+
+				if ( needsRefresh ) {
+					break;
+				}
 			}
 
 			if ( isListElement ) {
@@ -364,7 +370,7 @@ export function listItemDowncastConverter(
 	attributeNames: Array<string>,
 	strategies: Array<ListDowncastStrategy>,
 	model: Model,
-	{ dataPipeline }: { dataPipeline?: boolean } = {}
+	{ dataPipeline, allowSkipLevels }: { dataPipeline?: boolean; allowSkipLevels?: boolean }
 ): GetCallback<DowncastAttributeEvent<ListElement>> {
 	const consumer = createAttributesConsumer( attributeNames, strategies );
 
@@ -384,7 +390,8 @@ export function listItemDowncastConverter(
 
 		const options = {
 			...conversionApi.options,
-			dataPipeline
+			dataPipeline,
+			allowSkipLevels
 		};
 
 		// Use positions mapping instead of mapper.toViewElement( listItem ) to find outermost view element.
@@ -675,6 +682,10 @@ function unwrapListItemBlock( viewElement: ViewElement, viewWriter: ViewDowncast
 
 /**
  * Wraps the given list item with appropriate attribute elements for ul, ol, and li.
+ *
+ * For skip-level lists (where indent gaps exist, e.g. indent 0 → indent 2), this function
+ * generates intermediate wrapper pairs (ul/ol + li) at each missing level. These intermediate
+ * wrappers are invisible (`list-style-type: none` on the li) and carry no model-backed attributes.
  */
 function wrapListItemBlock(
 	listItem: ListElement,
@@ -688,40 +699,83 @@ function wrapListItemBlock(
 	}
 
 	const listItemIndent = listItem.getAttribute( 'listIndent' );
+	const allowSkipLevels = options.allowSkipLevels;
 	let currentListItem: ListElement | null = listItem;
 
 	for ( let indent = listItemIndent; indent >= 0; indent-- ) {
-		const listItemViewElement = createListItemElement( writer, indent, currentListItem.getAttribute( 'listItemId' ) );
-		const listViewElement = createListElement( writer, indent, currentListItem.getAttribute( 'listType' ) );
-
-		for ( const strategy of strategies ) {
-			if (
-				( strategy.scope == 'list' || strategy.scope == 'item' ) &&
-				currentListItem.hasAttribute( strategy.attributeName )
-			) {
-				strategy.setAttributeOnDowncast(
-					writer,
-					currentListItem.getAttribute( strategy.attributeName ),
-					strategy.scope == 'list' ? listViewElement : listItemViewElement,
-					options,
-					currentListItem
-				);
+		// When ListWalker jumps over indent levels (e.g. from indent 2 to indent 0, either because
+		// allowSkipLevels is enabled or because the item is at the start of a fragment and its
+		// nearest ancestor is further up), the levels in between have no corresponding model element.
+		// We detect these "intermediate" levels by checking if currentListItem's indent doesn't match
+		// the current loop indent. Handling this regardless of the allowSkipLevels config makes the
+		// downcast resilient to unexpected skip-level states in the model.
+		const isIntermediate = currentListItem.getAttribute( 'listIndent' ) !== indent;
+
+		if ( isIntermediate ) {
+			// Intermediate levels get invisible wrappers: list-style-type:none hides the marker on <li>,
+			// and no strategies are applied (no data-list-item-id, listStyle, etc.) since there is no
+			// model element backing this level.
+			//
+			// The <li> uses a fixed ID per indent (`list-item-skip-N`) so that sibling items sharing
+			// the same skipped level merge into one <li> (e.g. two items at indent 1 with no parent
+			// at indent 0 share one intermediate <li> at indent 0).
+			//
+			// The <ul/ol> uses the default real ID (list-type-indent) so it can merge with real list
+			// elements from other items at the same indent (e.g. a skip-level item at indent 2 followed
+			// by a real item at indent 0 — their <ul> at indent 0 must merge into one list).
+			const listType = currentListItem.getAttribute( 'listType' );
+
+			const listItemViewElement = createListItemElement( writer, indent, `list-item-skip-${ indent }` );
+			const listViewElement = createListElement( writer, indent, listType );
+
+			writer.setStyle( 'list-style-type', 'none', listItemViewElement );
+
+			viewRange = writer.wrap( viewRange, listItemViewElement );
+			viewRange = writer.wrap( viewRange, listViewElement );
+		} else {
+			const listItemViewElement = createListItemElement( writer, indent, currentListItem.getAttribute( 'listItemId' ) );
+			const listViewElement = createListElement( writer, indent, currentListItem.getAttribute( 'listType' ) );
+
+			for ( const strategy of strategies ) {
+				if (
+					( strategy.scope == 'list' || strategy.scope == 'item' ) &&
+					currentListItem.hasAttribute( strategy.attributeName )
+				) {
+					strategy.setAttributeOnDowncast(
+						writer,
+						currentListItem.getAttribute( strategy.attributeName ),
+						strategy.scope == 'list' ? listViewElement : listItemViewElement,
+						options,
+						currentListItem
+					);
+				}
 			}
-		}
 
-		viewRange = writer.wrap( viewRange, listItemViewElement );
-		viewRange = writer.wrap( viewRange, listViewElement );
+			viewRange = writer.wrap( viewRange, listItemViewElement );
+			viewRange = writer.wrap( viewRange, listViewElement );
+		}
 
 		if ( indent == 0 ) {
 			break;
 		}
 
-		currentListItem = ListWalker.first( currentListItem, { lowerIndent: true } );
-
-		// 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;
+		// Only look for a parent when at a real (non-intermediate) level. At intermediate levels
+		// currentListItem already points to the nearest found ancestor and won't change.
+		if ( !isIntermediate ) {
+			const nextListItem = ListWalker.first( currentListItem, { lowerIndent: true } );
+
+			if ( nextListItem ) {
+				currentListItem = nextListItem;
+			} else if ( !allowSkipLevels ) {
+				// 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.
+				//
+				// When allowSkipLevels is enabled, the loop continues to indent 0 producing
+				// intermediate wrappers at every remaining level to ensure a complete HTML structure
+				// regardless of whether the item has a preceding parent.
+				break;
+			}
 		}
 	}
 }

packages/ckeditor5-list/src/list/listediting.ts

@@ -481,9 +481,16 @@ export class ListEditing extends Plugin {
 				converterPriority: 'high'
 			} )
 			.add( dispatcher => {
+				const allowSkipLevels = !!editor.config.get( 'list.allowSkipLevels' );
+
 				dispatcher.on<DowncastAttributeEvent<ListElement>>(
 					'attribute',
-					listItemDowncastConverter( attributeNames, this._downcastStrategies, model )
+					listItemDowncastConverter(
+						attributeNames,
+						this._downcastStrategies,
+						model,
+						{ allowSkipLevels }
+					)
 				);
 
 				dispatcher.on<DowncastRemoveEvent>( 'remove', listItemDowncastRemoveConverter( model.schema ) );
@@ -496,9 +503,13 @@ export class ListEditing extends Plugin {
 				converterPriority: 'high'
 			} )
 			.add( dispatcher => {
+				const allowSkipLevels = !!editor.config.get( 'list.allowSkipLevels' );
+
 				dispatcher.on<DowncastAttributeEvent<ListElement>>(
 					'attribute',
-					listItemDowncastConverter( attributeNames, this._downcastStrategies, model, { dataPipeline: true } )
+					listItemDowncastConverter( attributeNames, this._downcastStrategies, model, {
+						dataPipeline: true, allowSkipLevels
+					} )
 				);
 			} );
 
@@ -540,16 +551,17 @@ export class ListEditing extends Plugin {
 	private _setupModelPostFixing() {
 		const model = this.editor.model;
 		const attributeNames = this.getListAttributeNames();
-
 		// Register list fixing.
 		// First the low level handler.
 		model.document.registerPostFixer( writer => modelChangePostFixer( model, writer, attributeNames, this ) );
 
 		// Then the callbacks for the specific lists.
-		// The indentation fixing must be the first one...
-		this.on<ListEditingPostFixerEvent>( 'postFixer', ( evt, { listNodes, writer } ) => {
-			evt.return = fixListIndents( listNodes, writer ) || evt.return;
-		}, { priority: 'high' } );
+		// The indentation fixing must be the first one (but only when skip levels are not allowed)...
+		if ( !this.editor.config.get( 'list.allowSkipLevels' ) ) {
+			this.on<ListEditingPostFixerEvent>( 'postFixer', ( evt, { listNodes, writer } ) => {
+				evt.return = fixListIndents( listNodes, writer ) || evt.return;
+			}, { priority: 'high' } );
+		}
 
 		// ...then the item ids... and after that other fixers that rely on the correct indentation and ids.
 		this.on<ListEditingPostFixerEvent>( 'postFixer', ( evt, { listNodes, writer, seenIds } ) => {

packages/ckeditor5-list/src/list/listindentcommand.ts

@@ -142,6 +142,11 @@ export class ListIndentCommand extends Command {
 			return true;
 		}
 
+		// When skip levels are allowed, any list item can always be indented further.
+		if ( this.editor.config.get( 'list.allowSkipLevels' ) ) {
+			return true;
+		}
+
 		blocks = expandListBlocksToCompleteItems( blocks );
 		firstBlock = blocks[ 0 ];
 

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

@@ -376,7 +376,11 @@ export function outdentBlocksWithMerge(
 		}
 
 		// Merge with parent list item while outdenting and indent matches reference indent.
-		if ( block.getAttribute( 'listIndent' ) == referenceIndent ) {
+		// The parent block may be null if the block has no ancestor with a lower indent (e.g. when skip-level
+		// lists are enabled and the first item starts at indent > 0). In that case, skip the merge and just
+		// decrease the indent. Without skip-level lists, the post-fixer guarantees sequential indents, so
+		// a parent with a lower indent always exists and this guard has no effect.
+		if ( block.getAttribute( 'listIndent' ) == referenceIndent && parentBlocks.get( block ) ) {
 			const mergedBlocks = mergeListItemIfNotLast( block, parentBlocks.get( block ), writer );
 
 			// All list item blocks are updated while merging so add those to visited set.