Text selection cannot escape from a mark with tailing text

1

I have a link mark with a custom toDOM implementation. When I press the right arrow key at the end of the link text, the cursor won’t move past the link. You can see this behavior in this video:

toDOM: (mark: Mark) => {
  const href = mark.attrs.href as string
  return [
    'a',
    { href, class: 'border-pink-500 border-solid py-1 px-1 gap-1 inline-flex' },
    [ 'span', { class: 'border-yellow-500 border-solid px-1' }, 0 ],
    [ 'span', { class: 'border-lime-500 border-solid px-1' }, '(tail)' ],
  ]
},

Source code and online demo: Issueset - Prosemirror Nested Link Selection - StackBlitz

This toDOM approach is useful for adding decorative elements before/after links, similar to what Discourse does:

CleanShot 2024-12-14 at 16.57.39@2x
CleanShot 2024-12-14 at 16.57.39@2x1042×210 13.6 KB

I probably can work around this using CSS content or Decoration.widget(), but I want to know if this cursor behavior is intentional or a bug.

2

This is expected behavior. Putting content that’s not actually part of the document in such a position will cause the browser’s native cursor motion to fail.

3

Thanks for your reply.