microsoft / microsoft/monaco-editor

Make `onDropIntoEditor` api public

Open
#3,359 9 comments 6 reactions 1 assignee View on GitHub

@mjbvz is already working on this.

Since Mar 13, 2023.

feature-request
Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

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 😄 . 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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.