Atomic nodes that can't be edited but allow cursor placement

1

I’m working on implementing some mentions functionality. We’re using Tiptap; originally we tried their first-party plugin, but found that composition events on mobile played havoc with the atomic nodes.

As a workaround, I’m writing a prosemirror plugin to provide “atomic-ish” nodes, which still allow normal text cursor behavior on mobile, with these behaviors:

  • if a character gets added to the start or end of a atomic-ish node, move it to be an adjacent text node instead
  • if a character gets added in the middle, revert the atomic-ish node to plain text
  • when a transaction sees the cursor land at the start or end of an atomic-ish node, nudge it to the nearest position in an adjacent node (cursor placement in the middle is allowed)

We’re hoping this will get us most of the way to mentions that feel atomic to the user, while still playing nice on mobile. Does this approach raise any obvious red flags? (and if you know of any already-existing plugins that achieve this please let me know.)

Thanks!

2

No, this sounds like a reasonable direction. If these are automatically inserted while the user is typing, I can see some potential gotchas around interrupting composition and/or accidentally moving the cursor out too early there, but I guess you’ve thought about that too.

1 Like