When only using block level images, insertcontent-invalid-insertion-position in console on paste of HTML

[Joel-Levi]

📝 Provide detailed reproduction steps (if any)

Reproduction repo

1. Have an editor with only the folowing plugins:
   [
   Essentials,
   ImageBlock,
   Paragraph,
   Undo
   ]

2. Paste html looking like:
   <img><br><img>
   or
   <img>CK<img>

Clipboard contents on moment of pasting:

<meta http-equiv="content-type" content="text/html; charset=utf-8"><img src="http://127.0.0.1:5501/sample/repro.png"> <br> <img src="http://127.0.0.1:5501/sample/repro.png">%

✔️ Expected result

HTML gets pasted and is rendered properly

❌ Actual result

nothing is pasted, insertcontent-invalid-insertion-position error in the console, coming from here :

ckeditor5/packages/ckeditor5-engine/src/model/utils/insertcontent.ts

Line 362 in 04a8c63

throw new CKEditorError( 'insertcontent-invalid-insertion-position', this );

❓ Possible solution

unfocusing the editor after this reproduction fixes the rendering somehow.

📃 Other details

• Browser: Latest Chrome, Latest Firefox
• OS: Linux Ubuntu
• First affected CKEditor version: ?
• Installed CKEditor plugins: [
  Essentials,
  ImageBlock,
  Paragraph,
  Undo
  ]

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Dumluregn]

Hello, thank you for reporting and providing a sample repo. Unfortunately, I wasn't able to reproduce the issue - see the recording below.

Screen.Recording.2024-05-20.at.13.38.55.mov

It would be best if you are able to also send a recording showing the exact use case, so showing the source you are copying the content from, and the editor state when you are pasting it.

[Joel-Levi]

recording.webm

I am dragging the content that is in the reproduction page into the editor.
You can see nothing is rendered, until I press a button

[Dumluregn]

Thank you, I can reproduce the problem and will investigate it.

[Dumluregn]

Issue details:

1. It reproduces for any content with the following pattern: block element + non-paragraph element that needs autoparagraphing (soft break, text etc) + block element.
2. When such content is pasted/dropped into the editor, only the middle part is autoparagraphed, which later causes a positions mismatch inside

   ckeditor5/packages/ckeditor5-engine/src/model/utils/insertcontent.ts

   Lines 349 to 368 in 39a7791

   	private _updateLastNodeFromAutoParagraph( node: Node ): void {
   	const positionAfterLastNode = this.writer.createPositionAfter( this._lastNode! );
   	const positionAfterNode = this.writer.createPositionAfter( node );
   	// If the real end was after the last auto paragraph then update relevant properties.
   	if ( positionAfterNode.isAfter( positionAfterLastNode ) ) {
   	this._lastNode = node;
   	/* istanbul ignore if -- @preserve */
   	if ( this.position.parent != node || !this.position.isAtEnd ) {
   	// Algorithm's correctness check. We should never end up here but it's good to know that we did.
   	// At this point the insertion position should be at the end of the last auto paragraph.
   	// Note: This error is documented in other place in this file.
   	throw new CKEditorError( 'insertcontent-invalid-insertion-position', this );
   	}
   	this.position = positionAfterNode;
   	this._setAffectedBoundaries( this.position );
   	}
   	}

   .
3. If ImageInline plugin is loaded, pasted image becomes <imageInline> instead. Then the whole content goes into an autoparagraph so the positions are correct and the issue does not occur.

I added a failing unit test and images to the imageBlock manual test for easy issue reproduction at ck/16321-invalid-insert-content branch.