Make `onDropIntoEditor` api public

[Prinzhorn]

It appears 0.34.0 added enableDropIntoEditor but there is no documentation for onDropIntoEditor on https://microsoft.github.io/monaco-editor/api/index.html

E.g. how do I prevent the default behavior? This doesn't work (I think dataTransfer can only be changed in dragstart)

editor.onDropIntoEditor((drop) => {
  let { event: e } = drop;
  e.dataTransfer.clearData();
  e.dataTransfer.setData('text/plain', 'updated');
});

I'm currently implementing a markdown editor and want file drag & drop like GitHub. So I need to be able to override the default behavior so that I can instead insert something like (that's what GitHub does, I want it slightly different)

![Uploading image.jpg…]()

Playground is also behaving weird and tries to navigate when you drop an URL:

let editor = monaco.editor.create(document.getElementById('container'), {
    value: "function hello() {\n\talert('Hello world!');\n}",
    language: 'javascript',
    enableDropIntoEditor: true
});

editor.onDropIntoEditor((drop) => {
  let { event: e } = drop;
  e.dataTransfer.clearData();
  e.dataTransfer.setData('text/plain', 'updated');
});

Screencast from 11.10.2022 11:04:35.webm

It did insert /monaco-editor/playground.html (not the full dropped thing) into the editor though.

Even better, dropping files will just trigger a download :smile: . But not always, sometimes it drops the path instead. But not always. This is so weird to see in my Electron app. Most of the times dropping a file seemingly does not (because download/navigation is prevented) but sometimes it drops the file path. In the cases where seemingly nothing happened I also don't get the onDropIntoEditor event. Idk if this code is also in Monaco, but this looks crazy? Almost like having race conditions on purpose? https://github.com/microsoft/vscode/blob/e531b8e963806dfadbd73b10c02785c75ffb8cab/src/vs/editor/contrib/dropIntoEditor/browser/dropIntoEditorContribution.ts#L69-L108 Without fully understanding what it does this would definitely explain the inconsistent behavior I'm seeing.

Looks like this turned into bug reports now

[mjbvz]

This is an internal API. I looked a the docs here but don't see it showing up (as expected since it is internal)

Updating issue to make it clear that this is a feature request to make this API official

[Prinzhorn]

The dropIntoEditor option mentions it, so this means it's currently asymmetric. The option is useless without the event.

[vitonsky]

@mjbvz hey, is this project maintained?

I'm here from google, i've tried to use Monaco Editor for my project and i need to handle dropped files too, but as i see this issue posted 1 year ago and nothing changed.

Do you will make this feature public or not?

[mjbvz]

Do you will make this feature public or not?

If there's enough interest, we would consider a PR exposing this

[vitonsky]

This is an internal API. I looked a the docs here but don't see it showing up (as expected since it is internal)

Updating issue to make it clear that this is a feature request to make this API official

As you claimed above, this API is not public, because it is internal API. I suppose, it means this API may not be ready to wide use.

As a man who see this project first time, i don't know whats potential problems we have with this API, so please explain it and tell me how i can contribute to make it public. Should i just change this modifier to public and add doc block with description? If no, please refer me to a contributing guideline or draw me todo list i should close to make this change.

[guanboo-yang]

Hello @mjbvz and all,

I'm working on a project where I heavily use Monaco Editor and have also faced a similar issue. I am very interested in having the onDropIntoEditor API feature made public and more flexible for developers.

Drag and drop functionalities are essential in many modern apps and the ability to override the default behavior and handle dropped files can significantly enhance the UX. Not having this feature public seems like an untapped potential for Monaco Editor.

Given the community's growing interest, it seems worth considering wider development and inclusion in the main library. Please let us know how we can contribute and make this API public.

Thanks!

[ben519]

I'm also looking for this, as I'm trying to implement an image drag-n-drop feature, just like what's possible here on GitHub.

In my case, I'm using react-dropzone, so I really just need to access the marker position in the image below. Is there a way to do this?

[Stainless2k]

Any updates on this? Right now we just use editor.onDropIntoEditor() since its available at runtime anyway.