Within an web app I am using an editorjs instance to let the user type in some styled text. Therefore I am using some InlineTools from editorjs.

In the end, it is a contenteditable with some inline tags like mark.

My problem is now that different browsers handle the cursor position differently. In Firefox I can use the arrow keys to goto each position before, inside, last and direct outside the inline tag.

Like here:

When I browse the same page with Chrome, the cursor can not be placed to position 0 in the inline tag and also not directly behind the inline tag.

Then I experimented with ZeroWidthSpace characters. I put one U+200B to position 0 in the gap and one U+200B directly behind the inline gap. This is working within chrome but firefox steps these characters also that you need to use the arrow key twice to get over the ZeroWidthSpace character.

Is there a way to unify this cursor behavior? I want the user to use the arrow keys to go to every position before and inside the inline tag - like the Firefox default behavior other the chrome version with using ZeroWidthSpaces.

Is there a way to do this?

Here is an example.

[contenteditable] {
padding: 1em;
border: 1px dashed black;
}

[contenteditable] mark {
padding: 0.2em;
border: 1px solid gray;
}

<h1>Works in Firefox - but not in Chrome</h1>

<div contenteditable>Here is some <mark>Text</mark> for testing.</div>

<h1>Works in Chrome (with ZeroWidthSpace) - but not in Firefox</h1>

<div contenteditable>Here is some <mark>&ZeroWidthSpace;Text</mark>&ZeroWidthSpace; for testing.</div>