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
Loading preview...
import { EditorContent, EditorRoot, createEditorConfig, defaultExtensionNodes,} from "@typix-editor/react";import { DraggableBlockExtension } from "@typix-editor/extension-draggable-block";import { theme } from "./theme";import "./style.css";const config = createEditorConfig({ extensionNodes: defaultExtensionNodes, theme,});export default function DraggableBlockExample() { return ( <EditorRoot config={config}> <EditorContent placeholder="Type paragraphs and drag to reorder..." /> <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