slate icon indicating copy to clipboard operation
slate copied to clipboard

onDrop inside a void, is still handled by slate and calls insertData

Open stevemarksd opened this issue 2 years ago • 1 comments

Description

I noticed on drag start, we check if we dragging inside a void and we ignore. But we don't do the same on onDrop.

I had to add a custom onDrop to react slate like this:

  // When we drop inside a void, we want slatejs to ignore it.
  const onDrop = React.useCallback<DragEventHandler<DOMNode>>((event) => {
    if (event.target) return;
    const node = ReactEditor.toSlateNode(editor, event.target);
    const path = ReactEditor.findPath(editor, node);
    const voidMatch = Editor.isVoid(editor, node) || Editor.void(editor, {
      at: path,
      voids: true
    });
    const disableSlateOnDrop = voidMatch ? true : null;
    return disableSlateOnDrop;
  }, [])

Use case: I have an image void block that allows drag and drop. When we drop files, it drops once inside the void, and once inside the editor. I have a plugin that overrides editor.insertData and catches that drop. onDrop calls editor.insertData.

Recording n/a

Sandbox n/a

Steps n/a

Expectation

I expected to avoid drops on void elements.

Environment n/a

Context n/a

stevemarksd avatar Mar 13 '22 02:03 stevemarksd

Hi there!! Where did you add the custom onDrop?

nrochatvc avatar Apr 26 '23 00:04 nrochatvc