Will monaco support drag and drop option? Can anyone provide small example for that.

[reddys11]

monaco-editor version: 0.X.Y
Browser:
OS:
Steps or JS usage snippet reproducing the issue:

[alexdima]

There is built-in support for drag & drop of text within the editor.

There is no built-in support for drag & drop of text from or to the editor. To simulate dragging into the editor, one could register mouse listeners from the outside and use getTargetAtClientPoint to figure out what the drop target is within the editor.

[reddys11]

thanks a lot for the quick response.

[PavelGriza]

thanks a lot for the quick response.

@reddys11 Did you manage to implement text dropping into the editor?
Could you please provide some details regarding it?

@alexandrudima, I am not quite experience with moncao editor, could you please help or describe in more detailed way.

Thanks in advance.

[andrienko]

Hello. After some tinkering I wrote a little helper for that:
https://gist.github.com/andrienko/a754de7e615fa01435a526c8b6d238cd
It even displays the position of the drop.

(It is made with React in mind, so you might want to adjust something)

Usage is simple - for each instance you just create a new drag provider, which you pass your onDrop handler and a function that returns your monaco editor instance:

const dragProvider = new MonacoDragNDropProvider( onDrop , () => editorInstance );

and then you add its props to your component that wraps monaco:

<div {...dragProvider.props}>
  {/* Your monaco div/component goes here */}
</div>

Might be buggy, but you get the idea. For an example of onDrop:

export const insertTextAtPos = (
  instance: IStandaloneCodeEditor,
  text,
  coords: [number, number] = [0, 0],
  placeCursor: boolean = false
) => {
  const range = new Range(coords[0], coords[1], coords[0], coords[1]);
  if (placeCursor) {
    const selection = new Selection(coords[0], coords[1], coords[0], coords[1]);
    instance.executeEdits('insert', [{ range, text, forceMoveMarkers: true }], [selection]);
    instance.focus();
  } else {
    instance.executeEdits('insert', [{ range, text, forceMoveMarkers: true }]);
  }
  instance.pushUndoStop();
};

const onDrop = (e: React.DragEvent, target: IMouseTarget, instance) => {
  const text = e.dataTransfer.getData('text');
  if (text && instance) {
    insertTextAtPos(instance, text, [target.position.lineNumber, target.position.column], true);
  }
}

[PavelGriza]

Hi @andrienko

Thanks for the detailed explanation and help provided!

[abdurrahmanyildirim]

any update?

[afonsomatos]

@alexdima is this going to be tackled anytime soon?