✨ Drag and Drop Selected Text

[austincondiff]

Description

This feature enables users to drag and drop selected text within the editor, enhancing the flexibility and ease of text manipulation. Users can quickly rearrange, duplicate, or relocate content without relying solely on traditional cut, copy, and paste commands.

Behavior on Drag

• Text Selection (Range):

  • When dragging a selected text range, the cursor updates dynamically to indicate where the text will be placed upon release.
  • If hovering between two lines for about half a second, the selected text will be treated as a line-based move, and the target lines will animate to provide visual feedback for the drop location.

• Line Selection:

  • Dragging one or more selected lines will animate the surrounding lines to indicate where the dragged lines will be placed.

• Modifier Key:

  • Holding the ⌥ (Option) key while dragging creates a copy of the text instead of moving it. The cursor will display a “plus” symbol to indicate duplication.

• Cancel Action:

  • Pressing the esc key during the drag operation cancels the action, leaving the text unchanged.

Behavior on Drop

• Drop Inside the Editor:

  • Without ⌥ key: Moves the selection to the target location, effectively performing a cut-and-paste operation.
  • With ⌥ key: Duplicates the selection at the target location (copy-and-paste).

• Drop Outside the Editor:

  • Automatically copies the selection, leaving the original text unchanged.

• Invalid Drop Locations:

  • Dropping on an invalid location (e.g., a read-only view or disabled field) does nothing, and the original selection remains unaffected.

• Cancel with esc:

  • The drag operation is aborted, and the selection is not moved or copied.
  • Drag contents should animate back to the original location.

Additional Considerations

• Visual Feedback:

  • The cursor icon dynamically updates based on the operation (e.g., standard drag, copy with ⌥, or no-drop indicator for invalid targets).
  • Line animations provide clear guidance during line-based moves.

• Error Handling:

  • Edge cases, such as dragging an invalid or unsupported selection, should be handled gracefully without disrupting the user experience.

Screenshots

Screen.Recording.2024-09-30.at.3.48.50.PM.mov

1. Dragging a range within a single line to a new position in the same line
2. Dragging a line to a new position

Screen.Recording.2024-09-30.at.3.51.30.PM.mov

1. Dragging a range within a single line to another line
2. Dragging a range within a single line to create a new line
3. Copying text with the ⌥ key

[thecoolwinter]

Screen.Recording.2024-11-25.at.9.31.42.AM.mov

I have a new implementation getting going. Here's the initial drag interaction updated from the existing one. Needs a few adjustments for the drop animation and I'd like to add a little plus symbol on the cursor while dragging

For the drop I still need to implement the drop interaction on the textview but that is next.

An interesting thing to note: the drag and drop interaction will need to cut the contents of the drag when dragging inside the editor, but just copy the contents when dragging outside the view.

[austincondiff]

Nice work so far and good observation one the cut vs copy! The cursor plus symbol should probably only appear when holding ⌥ while dragging to duplicate the selection when dropped. Which adds another piece of criteria...

Upon dragging selected text...

• cut the selection when
  • dropping inside the editor
• copy the selection when
  • dropping outside the view
  • ⌥ key is held
• nothing when
  • esc key is pressed
  • dragging to an invalid location

I will update the issue description with this.

[thecoolwinter]

I've got an open PR ready for this, including a demo!

#80