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 { EditorContent, EditorRoot, createEditorConfig, defaultExtensionNodes,} from "@typix-editor/react";import { ContextMenuExtension } from "@typix-editor/extension-context-menu";import { theme } from "./theme";import "./style.css";const config = createEditorConfig({ extensionNodes: defaultExtensionNodes, theme,});export default function ContextMenuExample() { return ( <EditorRoot config={config}> <EditorContent placeholder="Right-click to see the context menu..." /> <ContextMenuExtension options={[ { type: "item", key: "cut", label: "Cut", onSelect: () => document.execCommand("cut"), }, { type: "item", key: "copy", label: "Copy", onSelect: () => document.execCommand("copy"), }, { type: "item", key: "paste", label: "Paste", onSelect: () => document.execCommand("paste"), }, { type: "separator", key: "sep1" }, { type: "item", key: "delete", label: "Delete", onSelect: () => document.execCommand("delete"), }, ]} /> </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 |