Unable to remove an image placed inside of an editable field in restricted editing mode

[mabryl]

📝 Provide detailed reproduction steps (if any)

1. Create some content in which you specify editable and non-editable areas via restricted editing
2. Enable the 'insertImage' and/or 'uploadImage' commands in restrictedEditing
3. Turn on restricted editing mode
4. Place the caret at the beginning or end of the editable field
5. Insert an inline image in this position
6. Try removing the image once it's inserted

✔️ Expected result

You should be able to remove the image, as is the case when it's inserted somewhere in the middle of the editable field:

restricted-image-middle.mov

❌ Actual result

If the caret is at the beginning or end of the editable field, the image cannot be removed:

restricted-image-beginning.mov

❓ Possible solution

When the caret is placed at the beginning or end of the editable field, the image gets inserted outside of the span with the restricted-editing-exception class. In this case, the markup can look like this:

<p>Non-editable</p><p><picture><source srcset="https://ckbox.cloud/4NCAhHInx1m9uHJjNYDz/assets/ZD-j86KZtZQ8/images/80.webp 80w,https://ckbox.cloud/4NCAhHInx1m9uHJjNYDz/assets/ZD-j86KZtZQ8/images/160.webp 160w,https://ckbox.cloud/4NCAhHInx1m9uHJjNYDz/assets/ZD-j86KZtZQ8/images/240.webp 240w,https://ckbox.cloud/4NCAhHInx1m9uHJjNYDz/assets/ZD-j86KZtZQ8/images/256.webp 256w" sizes="(max-width: 256px) 100vw, 256px" type="image/webp"><img data-ckbox-resource-id="ZD-j86KZtZQ8" src="https://ckbox.cloud/4NCAhHInx1m9uHJjNYDz/assets/ZD-j86KZtZQ8/images/256.png" width="256" height="256"></picture><span class="restricted-editing-exception">Editable content here</span></p><p>Non-editable</p>

When the caret is placed somewhere in the middle of the editable field, the image is placed inside of the span and the markup can look like this:

<p>Non-editable</p><p><span class="restricted-editing-exception">Editable content&nbsp;</span><picture><source srcset="https://ckbox.cloud/4NCAhHInx1m9uHJjNYDz/assets/5wtlAcRPSgai/images/80.webp 80w,https://ckbox.cloud/4NCAhHInx1m9uHJjNYDz/assets/5wtlAcRPSgai/images/160.webp 160w,https://ckbox.cloud/4NCAhHInx1m9uHJjNYDz/assets/5wtlAcRPSgai/images/240.webp 240w,https://ckbox.cloud/4NCAhHInx1m9uHJjNYDz/assets/5wtlAcRPSgai/images/256.webp 256w" sizes="(max-width: 256px) 100vw, 256px" type="image/webp"><img data-ckbox-resource-id="5wtlAcRPSgai" src="https://ckbox.cloud/4NCAhHInx1m9uHJjNYDz/assets/5wtlAcRPSgai/images/256.png" width="256" height="256"></picture><span class="restricted-editing-exception">here</span></p><p>Non-editable</p>

📃 Other details

• Browser: cross-browser
• OS: cross-OS
• First affected CKEditor version: N/A
• Installed CKEditor plugins: N/A

---

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

[stevenrai]

Do we have any updates or work arounds for this? its a critical issue for people trying to insert images to restricted documents. It essentially breaks the document if someone inserts an image (beacuse they can't remove or do anything with it)

[niegowski]

Looks like we need to update this post-fixer:

ckeditor5/packages/ckeditor5-restricted-editing/src/restrictededitingmode/converters.ts

Lines 105 to 119 in 44deaa1

	export function extendMarkerOnTypingPostFixer( editor: Editor ): ModelPostFixer {
	// This post-fixer shouldn't be necessary after https://github.com/ckeditor/ckeditor5/issues/5778.
	return writer => {
	let changeApplied = false;
	for ( const change of editor.model.document.differ.getChanges() ) {
	if ( change.type == 'insert' && change.name == '$text' ) {
	changeApplied = _tryExtendMarkerStart( editor, change.position, change.length, writer ) || changeApplied;
	changeApplied = _tryExtendMarkedEnd( editor, change.position, change.length, writer ) || changeApplied;
	}
	}
	return changeApplied;
	};
	}

It should extend the marker range on inline elements (not only text nodes).

This may need a stylesheet update to mark the inline object marked as inside an editable area.

What I noticed is that we do not restrict block vs inline images. I could insert a block image and it should not be possible.