Cursor appears inside inline node when at end of preceding text node

1

Hey, can I just say first that ProseMirror is amazing – the code, the community, the documentation. On my current project I have gone from Trix to Quill to Slate and finally to ProseMirror and the latter is by far and away the most robust and well-documented. And the number of times a problem I’ve had has been resolved already by a helpful reply posted on this forum is just wonderful (and totally validates using Discourse over Slack, btw).

Anyway, my question is, in the following screenshot you can see the cursor appearing to be inside my custom inline node type (called “wikilink”). In reality the cursor is not actually inside the node, it’s just before it at the end of the preceding text block (there is no space character there either, btw, that is padding on the wikilink node). So is there a way to make the cursor appear before the node where you would expect for that position?

Screenshot 2020-02-16 at 18.12.59

One way is to remove the padding on the node, then it looks right, but I like the padding on these links and want to keep that.

Here’s what it looks like when I type from this position, and you can see how weird it seems – even though it works right:

Screen Recording 2020-02-16 at 06.17 pm

The wikilink node is atomic in the schema and has contenteditable set to false on the dom element, so it’s impossible to edit the content of the node, despite what the cursor position implies (if you cursor right from this position, the node is highlighted entire, and then further right pressed move you straight past it).

Here’s the relevant section of the schema:


  wikilink: {
    attrs: { ... },
    inline: true,
    group: "inline",
    atom: true,
    draggable: true,
    selectable: true,
    content: "inline+",
...

And the NodeView for this type sets this.dom to an a tag and the contentDOM to the same tag, and contenteditable to false as mentioned. It’s interior text node is created in getContent in the schema with Fragment.from(schema.text(linkTitle))

I’m sure I’m missing something obvious, but I’ve been off and on looking for a solution and trying different NodeSpec options for quite some time now so any help would be appreciated.

thanks – Dan

2

Setting display: inline-block on the node’s DOM representation might help. Unfortunately, ProseMirror itself can’t do much about this. I assume this is happening Chrome? That browser appears to think boundaries between inline nodes are irrelevant for cursor placement (even when one side isn’t even editable).

1 Like
3

Thank you, this worked!

I’m actually a bit confused, because I definitely tried inline-block before, but perhaps not with the exact combination of options in the schema spec or the html options in the NodeView…

Still, it’s working now :slight_smile:

PS. It was happening before in Chrome and Safari, but not Firefox.

4

If you have such two nodes next to each other, can you place your cursor between them?

5

I couldn’t, until I gave the nodes a small right margin. Now there is enough space between abutting wikilinks to place a cursor.

6

Nice trick.

But in my case, when I place the cursor between the two nodes, the cursor shows not between but at the end of the last node. However, if I input something then, the text shows up in between.

So I think the cursor is at the right place, but shows wrong, which could bother a lot to users.

But in my case, I do not use contentDom in the NodeView. And the dom for the two NodeView is an icon (instead of text tag in your case). I am testing out what causes the issue.