I have these uneditable “tokens” inlined in my document represented as spans with special
data-* attributes and some display text, e.g.
<span data-token="token.id">Display Name</span>. In the dino example, if I sandwich text between two dinos (e.g.
<img />text<img />, then double-click “text,” only the text is selected (and replaced when I start typing). In my case, doing the same thing results in both adjacent nodes being included as part of the selection. I’ve tried all the different booleans that seem potentially relevant (
atom: true), but the behavior remains unchanged (unsurprisingly, since the dino example didn’t use any of those). Is there some other way to indicate to the browser/ProseMirror that it should treat the tag as a word boundary?
This is a rather common annoyance—browsers don’t consider boundaries between uneditable and editable text to be very significant, so they treat text across them as being a single word. This can also cause all kinds of weirdness with Android text input (it’ll include the whole word in the composition, even though half of it isn’t even editable).
Sometimes setting the uneditable elements to
display: inline-block helps. Have you tried that?
Yeah, they’re already
inline-block for styling purposes. I think I’m going to try including a space on either side, like
<span data-token="token.id"> Display Name </span> and see if that helps. Separate question… when the cursor is placed immediately after a token (this can be observed the dino example as well), it top-aligns with the token, in the case of the images I think because of the height, in my case because of padding (the tokens are styled as high border-radiused pills). Is there some way to offset the cursor position in that case?
Not that I know of, no. Firefox doesn’t have this problem, but I haven’t found a way to turn off Chrome’s weird alignment (which doesn’t mean there isn’t some obscure CSS property that might influence this, I just haven’t found it).