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

Created on 4 Sep 2018 · 6Comments · Source: microsoft/monaco-editor

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

feature-request

Source

reddys11

Most helpful comment

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);
  }
}

andrienko on 5 Jun 2019

👍5 🎉2

All 6 comments

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.

alexdima on 6 Sep 2018

thanks a lot for the quick response.

reddys11 on 6 Sep 2018

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.

PavelGriza on 22 Feb 2019

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);
  }
}

andrienko on 5 Jun 2019

👍5 🎉2

Hi @andrienko

Thanks for the detailed explanation and help provided!

PavelGriza on 5 Jun 2019

any update?