Extensions
Context Menu
Custom right-click context menu for editor nodes
The Context Menu extension provides a right-click context menu with customizable actions for editor nodes.
Demo
import { createEditorConfig, defaultExtensionNodes, defaultTheme, EditorContent, EditorRoot, useActiveFormats, useBlockType, useTypixEditor,} from "@typix-editor/react";import { ContextMenuExtension, type TypixContextMenuItem,} from "@typix-editor/extension-context-menu";import { Bold, Italic, Underline, Code, Heading1, Heading2, Quote, Undo, Redo,} from "lucide-react";import { Toolbar } from "./Toolbar";const config = createEditorConfig({ extensionNodes: defaultExtensionNodes, theme: defaultTheme,});// Options live inside the component so `disabled` reflects current state.function EditorWithContextMenu() { const editor = useTypixEditor(); const { isActive } = useActiveFormats({ formats: ["bold", "italic", "underline", "code"], }); const blockType = useBlockType(); const options: TypixContextMenuItem[] = [ { type: "item", label: "Bold", icon: <Bold size={14} />, disabled: isActive("bold"), onSelect: (ed) => ed.toggleBold(), }, { type: "item", label: "Italic", icon: <Italic size={14} />, disabled: isActive("italic"), onSelect: (ed) => ed.toggleItalic(), }, { type: "item", label: "Inline Code", icon: <Code size={14} />, disabled: isActive("code"), onSelect: (ed) => ed.toggleCode(), }, { type: "separator" }, { type: "item", label: "Heading 1", icon: <Heading1 size={14} />, disabled: blockType === "h1", onSelect: (ed) => ed.toggleHeading({ level: 1 }), }, { type: "item", label: "Quote", icon: <Quote size={14} />, disabled: blockType === "quote", onSelect: (ed) => ed.toggleQuote(), }, { type: "separator" }, { type: "item", label: "Undo", icon: <Undo size={14} />, onSelect: (ed) => ed.undo(), }, { type: "item", label: "Redo", icon: <Redo size={14} />, onSelect: (ed) => ed.redo(), }, ]; return <ContextMenuExtension options={options} />;}export default function ContextMenuExample() { return ( <EditorRoot config={config}> <div className="editor-container"> <Toolbar /> <EditorContent placeholder="Right-click to see the context menu..." /> </div> <EditorWithContextMenu /> </EditorRoot> );}Installation
pnpm add @typix-editor/extension-context-menunpm install @typix-editor/extension-context-menuyarn add @typix-editor/extension-context-menuSetup
import {
ContextMenuExtension,
NodeContextMenuOption,
NodeContextMenuSeparator,
} from '@typix-editor/extension-context-menu';
const menuOptions = [
new NodeContextMenuOption('Cut', () => {
document.execCommand('cut');
}),
new NodeContextMenuOption('Copy', () => {
document.execCommand('copy');
}),
new NodeContextMenuOption('Paste', () => {
document.execCommand('paste');
}),
new NodeContextMenuSeparator(),
new NodeContextMenuOption('Delete', (node) => {
node.remove();
}),
];
function MyEditor() {
return (
<EditorRoot>
<EditorContent />
<ContextMenuExtension options={menuOptions} />
</EditorRoot>
);
}Exports
| Export | Type | Description |
|---|---|---|
ContextMenuExtension | Component | The context menu plugin |
ContextMenuExtensionProps | Type | Props for the extension |
NodeContextMenuOption | Class | A menu item option |
NodeContextMenuSeparator | Class | A visual separator between menu items |