Extensions
Draggable Block
Drag handle that appears next to blocks for reordering
Adds a grab handle to the left of each block on hover. Drag to reorder paragraphs, headings, lists, quotes, code blocks, anything block-level.
Install
pnpm add @typix-editor/extension-draggable-blockLive demo
Custom class names
import type { DraggableBlockClassNames } from "@typix-editor/extension-draggable-block";
const classNames: DraggableBlockClassNames = {
handle: "my-handle",
handleActive: "my-handle-active",
targetLine: "my-drop-line",
};
<DraggableBlock classNames={classNames} />Vendor the UI
npx typix ui add draggable-block