search

TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
6.69k stars 459 forks source link

Global Dragstart events might be interfering with text selection in custom block. #644

Open man-shar opened 8 months ago

man-shar commented 8 months ago

Describe the bug I have a custom React block that displays a table (I use antd's table component). I am unable to select text inside the table when the active block is clicked. Upon some debugging, wondering if this could be the global dragstart handlers?

Attaching a video showing the issue.

The exact bug description is:

  1. If I'm on a normal paragraph node, and select the table text without single clicking on the custom block, it works. (Notice that the placeholder "Enter text or type '/' for commands" text is still visible when I do it this way)
  2. But, if I click on the custom block, such that the placeholder text has disappeared, and then try to select text, it doesnt' work.

For some reason, the dragstart events are fired when I try to select the text in the second way.

Let me know if any ideas why this might be happening? I haven't created a repro yet, but could jic needed!

https://github.com/TypeCellOS/BlockNote/assets/12295494/4a831dac-2cda-4443-84d3-f13fa971d1ce

YousefED commented 7 months ago

Thanks. It would be very useful to have a reproducible example of this indeed.

I doubt it's related to the global dragstart. My first guess is it could be related to some TipTap internal code (https://github.com/ueberdosis/tiptap/blob/48935a2f26e3da2fa13c265773dfe259893829cc/packages/core/src/NodeView.ts#L121)

man-shar commented 7 months ago

Sure! here it is: https://codesandbox.io/p/devbox/blocknote-drag-select-events-example-y9g4n3?file=%2Fsrc%2FEditor.jsx%3A18%2C8&workspaceId=46d3967c-edd3-49c2-bfa2-da9e852ba600

Try adding the new block called "Custom Table" using the slash menu and you'll be able to replicate this issue

As an addendum, I managed to show a usecase for the a default prop being a function as well I mentioned in #394 (Note the customId creation inside CustomBlock.jsx)

YousefED commented 7 months ago

It seems that this event handler in TipTap is blocking the selection: https://github.com/ueberdosis/tiptap/blob/48935a2f26e3da2fa13c265773dfe259893829cc/packages/core/src/PasteRule.ts#L174

I'm not sure yet why, because there's no preventDefault or anything