[Bug]: Text selection doesn't work in React node views

holdenmatt commented 1 year ago

Which packages did you experience the bug in?

core, react

What Tiptap version are you using?

2.0.3

What’s the bug you are facing?

I'm rendering a table in a React node view, and would like to enable text in table cells to be selectable by users (i.e. user-select: auto), e.g. so they can copy/paste text to their clipboards.

It seems text cannot be selected by default in any React node view (see CodeSandbox for a minimal repro).

I suspect this is because a draggable="true" HTML attr is being added to a node when you start trying to select text, even though I have draggable: false on my node spec (seems odd - probably added by Prosemirror?).

If I set selectable: false on the node, it works (but this isn't desirable - I want the node to be selectable).

Text selection also works (but node selection doesn't) if I override stopEvent to stop all events:

stopEvent(e) {
  return true;
}

How can I enable text selection, without blocking node selection?

What browser are you using?

Chrome

Code example

https://codesandbox.io/s/tiptap-react-text-selection-bug-lvhk0e

What did you expect to happen?

I would expect text can be selected in interactive Node views (at least if the node isn't draggable). This seems like the most natural default (matching user-select: auto in the browser). A dev could set user-select: none if this isn't desired.

Or at least, there would be some workaround to enable text selection without disabling node selection completely.

Anything to add? (optional)

This part of stopEvent looks possibly related: https://github.com/ueberdosis/tiptap/blob/164eebf07ced16e29e38f13909322ce301575355/packages/core/src/NodeView.ts#L134-L139

Did you update your dependencies?

[X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

[ ] Yes, I’m a sponsor. 💖

holdenmatt commented 1 year ago

Another possible clue.

If a different node is selected, then you mousedown in a React node and drag, text is selectable (great!)
However, if you click/mouseup to select the React node first, then text can't be selected.

I see draggable="true" being added in case 2 but not case 1:

Nantris commented 1 year ago

Possibly related #2534.

jsjoeio commented 1 year ago

Unsure if related but I believe Beehiiv is using tiptap under the hood and there is a similar bug in their editor. When I select text, I cannot see that is selected. Digging into the CSS though, I see ::selection is being set to transparent:

I can overwrite the CSS but it's buggy

https://github.com/ueberdosis/tiptap/assets/3806031/7fb2ff3f-2dad-4cae-bd38-3de88f9780a7

ueberdosis / tiptap