Dropping image over the page break crashes the editor

[niegowski]

📝 Provide detailed reproduction steps (if any)

1. https://ckeditor.com/docs/ckeditor5/latest/features/page-break.html
2. Drag and drop some image over the page break widget

✔️ Expected result

An image should be properly dropped to the editor.

❌ Actual result

Uncaught CKEditorError: model-nodelist-offset-out-of-bounds {"offset":9,"nodeList":[]}
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-model-nodelist-offset-out-of-bounds
    at offsetToIndex (https://ckeditor.com/docs/ckeditor5/latest/snippets/features/page-break/snippet.js:4:141138)
    at c.offsetToIndex (https://ckeditor.com/docs/ckeditor5/latest/snippets/features/page-break/snippet.js:4:44806)
    at a (https://ckeditor.com/docs/ckeditor5/latest/snippets/features/page-break/snippet.js:4:15894)
    at r.get textNode [as textNode] (https://ckeditor.com/docs/ckeditor5/latest/snippets/features/page-break/snippet.js:4:10039)
    at $e (https://ckeditor.com/docs/ckeditor5/latest/snippets/features/page-break/snippet.js:4:426548)
    at qe._validateSelectionRange (https://ckeditor.com/docs/ckeditor5/latest/snippets/features/page-break/snippet.js:4:426384)
    at m.<anonymous> (https://ckeditor.com/docs/ckeditor5/latest/snippets/features/page-break/snippet.js:4:94898)
    at m.fire (https://ckeditor.com/docs/ckeditor5/latest/snippets/features/page-break/snippet.js:4:28590)
    at m._setRanges (https://ckeditor.com/docs/ckeditor5/latest/snippets/features/page-break/snippet.js:4:143980)
    at m.setTo (https://ckeditor.com/docs/ckeditor5/latest/snippets/features/page-break/snippet.js:4:143626)

📃 Other details

• Browser: …
• OS: …
• First affected CKEditor version: …
• Installed CKEditor plugins: …

---

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

[niegowski]

This is because the page break feature is converted to container and text elements instead of UI Element

ckeditor5/packages/ckeditor5-page-break/src/pagebreakediting.js

Lines 64 to 82 in ca58a3b

	conversion.for( 'editingDowncast' ).elementToElement( {
	model: 'pageBreak',
	view: ( modelElement, { writer } ) => {
	const label = t( 'Page break' );
	const viewWrapper = writer.createContainerElement( 'div' );
	const viewLabelElement = writer.createContainerElement( 'span' );
	const innerText = writer.createText( t( 'Page break' ) );
	writer.addClass( 'page-break', viewWrapper );
	writer.setCustomProperty( 'pageBreak', true, viewWrapper );
	writer.addClass( 'page-break__label', viewLabelElement );
	writer.insert( writer.createPositionAt( viewWrapper, 0 ), viewLabelElement );
	writer.insert( writer.createPositionAt( viewLabelElement, 0 ), innerText );
	return toPageBreakWidget( viewWrapper, writer, label );
	}
	} );

And there is no text positions mapping between view and model.

This could be easily fixed like this:

conversion.for( 'editingDowncast' ).elementToElement( {
	model: 'pageBreak',
	view: ( modelElement, { writer } ) => {
		const label = t( 'Page break' );
		const viewWrapper = writer.createContainerElement( 'div' );
		const viewLabelElement = writer.createUIElement( 'span', { class: 'page-break__label' }, function( domDocument ) {
			const domElement = this.toDomElement( domDocument );

			domElement.innerText = t( 'Page break' );

			return domElement;
		} );

		writer.addClass( 'page-break', viewWrapper );
		writer.setCustomProperty( 'pageBreak', true, viewWrapper );

		writer.insert( writer.createPositionAt( viewWrapper, 0 ), viewLabelElement );

		return toPageBreakWidget( viewWrapper, writer, label );
	}