How can I make the drop event take effect

v6
1

Example: nostalgic-sky-7wssh6 - CodeSandbox

I tried dragging a file into input area.
But only the dragenter and dragover events were triggered

2

You don’t seem to have a handler for drop events. When I add that I can see them just fine.

3

I found a related topic, the example in it is as follows

  view.scrollDOM.addEventListener('drop', (event) => {
    event.preventDefault();
    event.stopPropagation();
  });

It works.

But wouldn’t it work as an extension like this

const view = new EditorView({
    doc: '',
    parent: inputWrapperRef.value,
    extensions: [
      EditorView.domEventHandlers({
        drag: (e) => {
          console.log('drag', e);
        },
      }),
    ],
  });
4

You’re still adding a drag handler, not a drop handler.

5

Sorry, my fault. Thanks for your response

6

Seems useful to add my Q here instead of starting a new thread.

Any issues with drag/drop on MacOS? In case it matters: old Intel MacBook, still on 12.7.1 Monterey.

With initial attempt: dragging selected text actually dragged entire contents of doc!

With next attempt, below, the other events show up in console.log but ‘drop’ does not. Thoughts?

const dragAndDropExt = EditorView.domEventHandlers({
  dragstart(e, _) {
    let s = getCurrentSelection();
    let data = { from: Math.min(s.from, s.to) };
    console.log('dragstart', data);
    e.dataTransfer.setData("text/object", JSON.stringify(data));
  },
  dragover(e, _) {
    console.log('dragover');
    e.preventDefault();
  },
  dragenter(e, _) {
    console.log('dragenter');
    e.preventDefault();
  },
  drop(e, _) {
    console.log('drop: BEFORE getData');
    let data = JSON.parse(e.dataTransfer.getData("text/object"));
    console.log('drop', data);
  },
});
7

@marijn It looks like ‘drop’ isn’t reaching my code.

Any thoughts? Maybe a recent regression? Or something specific to my setup?

8

I can’t reproduce what you’re seeing here. But also, the editor already has a drag/stop setup, so there is definitely no need to register all these drag events yourself.