Drag and drop lines of text

v6
1

Summary

I’m trying to get drag and drop to work with selections in CodeMirror 6.

Here’s what I would like to happen: When I select some text, then drag it, I should be able to drop it in another part of the editor or another application (like with a textarea or contenteditable div).

In the reference manual, I see references to moving content via drag and drop here (the userEvent source of state.Transaction) and in dragMovesSelection.

What I’ve tried

  • An editor created with minimalSetup
  • Passing EditorView.dragMovesSelection.of(_event => true) as an editor extension (and minimalSetup)
  • Repeating with basicSetup and EditorView.dragMovesSelection.of(_event => true)
  • Removing the mousedown event listener from the CodeMirror content element with the F12 developer tools. This allows dragging selected content (but of course breaks things like selection).

Sample

See this example on codemirror.net/try that creates a contenteditable div, a textarea, and a minimal CodeMirror 6 editor. In my browser (Firefox on MacOS), I can drag and drop lines of text in both the div and textarea, but not the CodeMirror editor.

Thank you for working on this excellent project!

2

That seems to have been broken by a recent patch. This one should fix it again.

1 Like