Extensions
Draggable Block
Drag-and-drop block reordering in the editor
The Draggable Block extension adds drag handles to editor blocks, allowing users to reorder content by dragging.
Demo
import { createEditorConfig, defaultExtensionNodes, defaultTheme, EditorContent, EditorRoot,} from "@typix-editor/react";import { DraggableBlockExtension } from "@typix-editor/extension-draggable-block";import { Toolbar } from "./Toolbar";const config = createEditorConfig({ extensionNodes: defaultExtensionNodes, theme: defaultTheme,});export default function DraggableBlockExample() { return ( <EditorRoot config={config}> <div className="editor-container"> <Toolbar /> <EditorContent placeholder="Hover a block to reveal the drag handle..." /> </div> <DraggableBlockExtension /> </EditorRoot> );}Installation
pnpm add @typix-editor/extension-draggable-blocknpm install @typix-editor/extension-draggable-blockyarn add @typix-editor/extension-draggable-blockSetup
import { DraggableBlockExtension } from '@typix-editor/extension-draggable-block';
function MyEditor() {
return (
<EditorRoot>
<EditorContent />
<DraggableBlockExtension />
</EditorRoot>
);
}Exports
| Export | Type | Description |
|---|---|---|
DraggableBlockExtension | Component | The draggable block plugin |
DraggableBlockExtensionProps | Type | Props type |
DraggableBlockClassNames | Type | CSS class names for customization |
Behavior
- Adds a drag handle that appears on hover near block elements
- Users can drag blocks to reorder them within the editor
- Works with paragraphs, headings, lists, quotes, and other block-level elements