ianstormtaylor / slate

A completely customizable framework for building rich text editors. (Currently in beta.)
http://slatejs.org
MIT License
29.96k stars 3.25k forks source link

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

Open stevemarksd opened 2 years ago

stevemarksd commented 2 years ago

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

nrochatvc commented 1 year ago

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