[Feature] contenteditable="false" Inline Elements

[gratzl-dev]

Hello!

I'm implementing placeholders in my application, but encountered minor issues using Squire:

1. Backspace doesn't delete Inline Elements as it would with Block Types.
2. The cursor sometimes gets placed inside the readonly element, causing unusual behavior.

firefox_DyL6rOmqVu.mp4

As seen in this video, when adding a character, in this example a whitespace , it's correctly added outside the contenteditable=false span. However, upon deleting it again, the cursor jumps inside the readonly span, causing unwanted behvaiour, like when pressing Enter, the element gets split up into two separate elements.

Regarding 1: There's existing logic for similar behavior with block elements, but not for inline elements.

Squire/source/keyboard/Backspace.ts

Lines 44 to 47 in cbd8881

	if (!(previous as HTMLElement).isContentEditable) {
	detachUneditableNode(previous, root);
	return;
	}

I'm still looking for a solution to the second issue. Could you perhaps point me in the right direction?

If you're open to adding this feature to the editor, I can create a CodeSandbox and potentially even a Pull Request.

[neilj]

I don't have any immediate ideas, as this is not something we've needed to handle. I'd consider a PR if it didn't require extensive changes.

[gratzl-dev]

I already created a pull request that fixes the most glaring issues with non editable inline elements.
Can you take a look? :)

#473