Cursor issues with marks rendered as not editable


I am building an editor using PM and I ran into following issue/problem which I am struggling with.

We have a schema with marks, which are rendered as a span (or b in the fiddle below). The marks have contentEditable=false. The usecase is that some text is marked as not editable. I have ran into the following issues:

a) when navigating (with arrows) from left to right across the mark, everything behaves almost nice, pressing right arrow right before the read-only mark skips the whole mark (as is visible in the fiddle) and the selection is updated accordingly, only issue is that the caret becomes visible only after one more right arrow press.

b) when navigating from right to left (with left arrow), the behavior is very different, the caret is hidden for all the time the selection is inside the mark, and the selection is updated only one-char-for-one-left-arrow-press. I would expect for the whole mark to be skipped, rather than having to press left arrow the same number of times as the length of the text + 1 (without visible caret).

For various reasons, mark is the right logical model for us; one being that with Node based implementation of this read-only mechanism, one “doc” has multiple valid representations. I also have toyed with a Node-based implementation as well and contentEditable=false inline nodes do not have these cursor issues (but have other problems, e.g. need for many custom rules, …)

I would appreciate suggestions on:

Q1) how can I best solve this, custom arrow handling && set the selection to skip the mark manually?

Q2) the caret is visible right-before the mark. Is it possible to show it also right after the mark (e.g. so that newly written text would be prepended to the text following the read-only mark)? I could not find a simple way to do this…

EDIT: In another setup (different contentEditable hierarchy), pm selection is not updated on mouse-click, but behaves correctly with arrows:

Thx & kind regards

1 Like