✨ Drag and Drop Selected Text #42

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

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

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