Drag Handle Extension

Rearrange content blocks, select full lines, apply formatting, and invoke block-level commands via hover handles.

Overview

The drag handle hover container is powered by @tiptap/extension-drag-handle. Edra encapsulates this with a custom dropdown menu that follows the cursor as you hover over paragraphs, headings, code blocks, lists, and tables.

Setup

To enable the drag handle interface, simply place the <Edra.DragHandle /> element inside the main <Edra> wrapping block:

Key Actions in Hover Dropdown

• Block Movement: Press, hold, and drag the handle icon to physically reposition paragraphs, list items, or blocks anywhere else in the document.
• Content Switcher: Click the plus (+) menu to add new blocks or convert the current line into a Heading, Checklist, Bullet List, or Blockquote.
• Node Actions: Quickly duplicate block content, copy text, delete elements, align text blocks, or remove inline styling formats.
• AI Integration: If an AI provider is active, run custom prompt transformations directly on the hovered block.