{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "code-drawing-docs",
"title": "Code Drawing",
"description": "Documentation for Code Drawing",
"files": [
{
"path": "../../content/docs/(plugins)/(elements)/code-drawing.mdx",
"content": "---\ntitle: Code Drawing\ndocs:\n - route: /docs/components/code-drawing-node\n title: Code Drawing Node\n---\n\n\n\n\n\n## Features\n\n- Support for multiple diagram types: PlantUml, Graphviz, Flowchart, and Mermaid\n- Inline code editing with code-block-like styling\n- Real-time preview with debounced rendering (500ms)\n- Multiple view modes: Both (code and preview), Code only, Image only\n- Responsive layout: horizontal on desktop (code left, preview right), vertical on mobile (preview top, code bottom)\n- Border separator between code editor and preview in Both mode\n- Toolbar controls: language selector and view mode selector (always visible on mobile, hover to show on desktop)\n- Download rendered diagrams as images\n- Floating toolbar with delete and download actions\n\n\n\n## Kit Usage\n\n\n\n### Installation\n\nThe fastest way to add code drawing functionality is with the `CodeDrawingKit`, which includes the pre-configured `CodeDrawingPlugin` with its [Plate UI](/docs/installation/plate-ui) components.\n\n\n\n- [`CodeDrawingElement`](/docs/components/code-drawing-node): Renders code drawing elements with inline editing and preview.\n\n### Add Kit\n\nAdd the kit to your plugins:\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\nimport { CodeDrawingKit } from '@/components/editor/plugins/code-drawing-kit';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n ...CodeDrawingKit,\n ],\n});\n```\n\n\n\n## Manual Usage\n\n\n\n### Installation\n\n```bash\nnpm install @platejs/code-drawing\n```\n\n### Add Plugin\n\nInclude `CodeDrawingPlugin` in your Plate plugins array when creating the editor.\n\n```tsx\nimport { CodeDrawingPlugin } from '@platejs/code-drawing/react';\nimport { createPlateEditor } from 'platejs/react';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n CodeDrawingPlugin,\n ],\n});\n```\n\n### Configure Plugin\n\nConfigure the code drawing plugin with custom components.\n\n```tsx\nimport { CodeDrawingPlugin } from '@platejs/code-drawing/react';\nimport { createPlateEditor } from 'platejs/react';\nimport { CodeDrawingElement } from '@/components/ui/code-drawing-node';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n CodeDrawingPlugin.withComponent(CodeDrawingElement),\n ],\n});\n```\n\n- `withComponent`: Assigns [`CodeDrawingElement`](/docs/components/code-drawing-node) to render code drawing elements.\n\n### Add Toolbar Button\n\nYou can add a toolbar button to insert code drawing elements. Add this item to the [Insert Toolbar Button](/docs/toolbar#insert-toolbar-button):\n\n```tsx\n{\n icon: ,\n label: 'Code Drawing',\n value: KEYS.codeDrawing,\n}\n```\n\n\n\n## Plugins\n\n### CodeDrawingPlugin\n\nPlugin for rendering code drawings (PlantUml, Graphviz, Flowchart, Mermaid) with inline editing and preview capabilities.\n\n## API\n\n### editor.tf.insert.codeDrawing\n\nInserts a code drawing element at the current selection.\n\n\n\n\" optional>\nProps for the code drawing element.\n\n\nThe data for the code drawing element.\n\n\nThe type of diagram to render.\n\n- **Default:** `'Mermaid'`\n\n- **Options:** `'PlantUml'`, `'Graphviz'`, `'Flowchart'`, `'Mermaid'`\n\n\n\nThe view mode for the code drawing.\n\n- **Default:** `'Both'`\n\n- **Options:** `'Both'`, `'Code'`, `'Image'`\n\n\n\nThe code content for the diagram.\n\n- **Default:** `''`\n\n\n\n\n\n\n\nThe options for inserting the code drawing node.\n\n\n\n\n## Transforms\n\n### `tf.insert.codeDrawing`\n\nInserts a code drawing element at the current selection.\n\n\n\n\" optional>\nProps for the code drawing element.\n\n\nThe options for inserting the code drawing node.\n\n\n\n\n## Hooks\n\n### `useCodeDrawingElement`\n\nA hook for a code drawing element that handles rendering and state management.\n\n\n\n\nThe code drawing element.\n\n\n\n\n\nWhether the diagram is currently being rendered.\n\n\nThe error message if rendering failed, or `null` if there's no error.\n\n\nThe rendered image data URL.\n\n) => void\">\nFunction to update the code drawing element's data.\n\n void\">\nFunction to remove the code drawing element.\n\n\n\n\n## Types\n\n### `TCodeDrawingElement`\n\nThe code drawing element type.\n\n\n\n\nThe element type. Always `KEYS.codeDrawing`.\n\n\nThe data for the code drawing element.\n\n\n\n\n### `CodeDrawingData`\n\nThe data structure for code drawing elements.\n\n\n\n\nThe type of diagram to render.\n\n- **Options:** `'PlantUml'`, `'Graphviz'`, `'Flowchart'`, `'Mermaid'`\n\n\n\nThe view mode for the code drawing.\n\n- **Options:** `'Both'`, `'Code'`, `'Image'`\n\n\n\nThe code content for the diagram.\n\n\n\n\n### `CodeDrawingType`\n\nThe type of diagram supported.\n\n\n\n\nThe diagram type.\n\n\n\n\n### `ViewMode`\n\nThe view mode for code drawing elements.\n\n\n\n\nThe view mode.\n\n- `'Both'`: Shows both code editor and preview side by side (horizontal on desktop, vertical on mobile with preview on top)\n- `'Code'`: Shows only the code editor\n- `'Image'`: Shows only the rendered preview\n\n\n\n\n\n## Utilities\n\n### `renderCodeDrawing`\n\nRenders a diagram from code based on the drawing type.\n\n\n\n\nThe type of diagram to render.\n\n\nThe code content for the diagram.\n\n\n\n\n\">\nA promise that resolves to the rendered image data URL.\n\n\n\n\n### `downloadImage`\n\nDownloads an image from a data URL.\n\n\n\n\nThe image data URL to download.\n\n\nThe filename for the downloaded image.\n\n- **Default:** `'code-drawing.png'`\n\n\n\n\n",
"type": "registry:file",
"target": "content/docs/plate/(plugins)/(elements)/code-drawing.mdx"
}
],
"type": "registry:file"
}