Changing `view.dom.classList` changes the selection

1

Hello :wave:,

I’ve found a strange a problem that I can’t seem to reproduce on a minimal CodeSandbox, and the purpose of this topic is to describe the issue I’m having with my app, to see if someone has any idea why this is happening.

For context, I’m using Tiptap, and this issue happens when clicking one of the formatting buttons in a popover that appears when selecting some text (this makes use of the BubbleMenu extension. But this issue only happens when I’m also using the prosemirror-codemark plugin.

I’ve tried to reproduce the issue I’m having on this CodeSandbox, to no avail. On the sandbox, everything is working as expected. After some debugging, I realized that commenting this line, fixed the issue (but the extension stopped working as expected, of course).

In the previous line to that, I’m logging the view.state.selection.anchor, and you can see that the anchor point never changes when you select some text, and press any of the formatting buttons in the popover:

But when I tried to do the exact same thing on my local application, here’s what I get:

A few observations:

  • My application entry point is pretty much what you see in the Playground.jsx file in the CodeSandbox (I tried to keep the examples minimal and as close as possible to each other)
  • Removing the CodemarkPlugin extension from the Tiptap editor extensions option (thus removing the prosemirror-codemark plugin) fixes the issue, so I’m assuming that this plugin is the one causing the selection changes when clicking the formatting buttons
  • If I comment the view.dom.classList[state?.active ? 'add' : 'remove']('no-cursor') line in the plugin view update method, the issue no longer occurs, so, changing the classList is somehow updating the selection (but why this only happens on my app, and not the sandbox, I don’t know)

This doesn’t feel like a bug from ProseMirror, Tiptap, or even the extension, because it only happens on my local app, and not the sandbox. I’ve tried to reduce as many side effects as possible on my app, there’s barely any code loaded but the minimal example. The major difference being that CodeSandbox uses react-scripts for building, and I’m using Webpack with Babel. As you can imagine, this is something I simply cannot change, it’s a big app that depends on a complex Webpack setup. But does it even make sense that this issue is being caused by the build tools on my side?

Anyway, I’m looking for any possible insight on why this is happening on my app, and not on the sandbox, so that I can figure out if there’s anything I can do to fix this issue on my side. If anyone knows of anything else I can test on my side, please do come forward with your ideas.

Thank you for reading :slight_smile:

2

A useful data point here might be that directly mutating the editor’s class is not supported by the library, and the proper way to do that would be go through the attributes prop.

1 Like
3

is not supported by the library

When you say “by the library” here, you’re referring to ProseMirror or to the plugin?

and the proper way to do that would be go through the attributes prop.

But aren’t attributes for nodes and marks? How would one update the editor’s class through attributes?

4

ProseMirror.

With the prop I linked.

1 Like
5

That seems to have fixed the issue, and kept the prosemirror-codemark plugin working as expected. Thank you so much @marijn :pray:

1 Like
6

The fix to prosemirror-codemark is deployed as 0.3.6!

Thanks @rfgamaral and @marijn for the help. :slight_smile:

1 Like