Highlighted Text Drag-and-Drop & I-Beam Interaction

Highlighted Text Drag-and-Drop & I-Beam Interaction

Direct text manipulation is the hallmark of modern desktop publishing and word processing applications (such as Microsoft Word, Microsoft Publisher, and Google Docs). Prior to version 5.4.5, clicking and dragging highlighted text inside a text box inadvertently activated the element dragging engine, accidentally moving the entire text box across the canvas. Version 5.4.5 introduced native drag-and-drop text chunk manipulation within and across text boxes, while restoring the standard I-beam cursor and browser spellcheck underlines.

Native Drag-and-Drop Text Manipulation

The dedicated text drag engine in canvas/text-drag.js disambiguates element drags from text drags:

• In-Place Text Move: Highlighting words or sentences and dragging them drops the text at the target caret location, moving the text cleanly without touching clipboard buffers.

• Ctrl-Key Duplicate / Copy: Holding Ctrl (or Cmd on macOS) while dragging duplicates the highlighted text to the target position while keeping the original text in place.

• Cross-Box Text Dragging: Text can be dragged out of one text box and dropped directly into a different text box across the publication canvas.

• Visual Insertion Caret: A high-visibility vertical insertion caret (#op-text-drag-caret) tracks the mouse cursor, showing the exact character insertion point in real time.

• Floating Ghost Badge: A semi-transparent badge (#op-text-drag-badge) follows the pointer with a truncated preview of the dragged text and a plus icon (+) during copy operations.

Disambiguation & Selection Detection

To prevent accidental element dragging, Open Publisher evaluates mouse coordinates:

• Point-in-Selection Check: TextDragSystem.isPointInSelection(x, y) verifies whether a click lands inside an active text selection. If true, canvas element dragging is bypassed.

• Click-to-Collapse: Clicking on highlighted text without moving the mouse collapses the selection caret to the clicked position without altering content.

• Immediate History Flushing: Captures an undo snapshot immediately before the drag starts and flushes a snapshot upon drop, allowing instant undo with Ctrl + Z.

I-Beam Cursor & Spellcheck Restoration

Version 5.4.5 also addressed two key interface polish items:

• Text Interact "I" Icon (I-Beam): Moving the cursor over text inside any text box immediately displays the text interaction I-beam cursor (cursor: text), while the outer 15px bounding edge retains the move cursor (cursor: move) for easy element repositioning.

• Spellcheck Red Squiggly Underlines: Corrected post-render editing sweeps in ui-interactions.js so browser-native red wavy underlines appear under misspelled words as you type, fully synchronized with the Options proofing toggle.

Tip: Hold Ctrl while dragging a highlighted phrase to instantly duplicate it into another column or callout box.