[wip]feat: add code-drawing node #4811

electroluxcode · 2026-01-11T17:33:56Z

Checklist

Design

Refer to the text drawing nodes in Feishu documents, but they include more library renderings than those.such as PlantUML , Graphviz, and Flowchart

Core Features

Multiple Drawing Types: Supports four diagram types
- Mermaid: Flowcharts, sequence diagrams, Gantt charts, and more
- PlantUML: UML diagrams, sequence diagrams, and other structured diagrams
- Graphviz: Graph visualization using DOT language
- Flowchart: Flowchart diagrams
Inline Editing Experience: Code editing area and preview area are displayed side-by-side (horizontal layout on desktop, vertical on mobile), allowing real-time preview without popups or dialogs
Multiple View Modes: Supports three view mode switches for flexible display
- Both: Display both code editor and preview simultaneously
- Code: Display only the code editor
- Image: Display only the rendered diagram result
Real-time Preview: Uses debouncing (500ms) to optimize rendering performance and avoid frequent API requests
Unified Data Structure: Stores drawingType, drawingMode, and code uniformly in element.data for consistent data management

ui

data example

{
    "children": [
        {
            "text": ""
        }
    ],
    data:{
        "drawingMode": "Both",
        "drawingType": "Mermaid",
        "code": `classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
        +String beakColor
        +swim()
        +quack()
      }
      class Fish{
        -int sizeInFeet
        -canEat()
      }
      class Zebra{
        +bool is_wild
        +run()
      } 
      `
      },
      "type": "code_drawing",
      
  },

Reference

The design is primarily inspired by Feishu (Lark) Document's text drawing component:

Inline editing without popups
Code and preview displayed side-by-side
Support for switching between multiple diagram types
Real-time preview updates

Technical Implementation

Uses lodash/debounce for debounced rendering
Reuses code-block's pre + code wrapper structure to maintain visual consistency with code editors
Toolbar appears on hover to reduce UI clutter
Supports SSR with static rendering component to avoid hydration mismatches

Add support for rendering PlantUML, Graphviz, Flowchart, and Mermaid diagrams in Plate editor. Includes: - Core plugin implementation with base plugin and transforms - React components for rendering and preview - Floating toolbar for diagram editing - Support for multiple view modes (code/preview) - Utilities for rendering different diagram types

- Add CodeDrawingKit to editor plugin configuration - Create custom CodeDrawingElement component with UI controls - Add code-drawing option to insert toolbar, slash menu, and block context menu - Add example code-drawing content to playground - Improve rendering performance with debounced updates in useCodeDrawingElement hook

…tion - Register code-drawing-node in registry-ui with static component - Add code-drawing-node-static.tsx for SSR support - Fix insertCodeDrawing transform to align with Plate insertion patterns - Add hcodedrawing JSX tag support in test-utils - Add code-drawing documentation and demo examples - Update registry configurations and build outputs

…ayout - Split CodeDrawingPreview into CodeDrawingTextarea, CodeDrawingPreviewArea, CodeDrawingToolbar - Mobile: preview on top, textarea on bottom - Add border separator in Both mode - Fix select background to bg-muted/50 - Toolbar: always visible on mobile, hover on desktop

codesandbox · 2026-01-11T17:33:59Z

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

changeset-bot · 2026-01-11T17:34:00Z

🦋 Changeset detected

Latest commit: dc3c963

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@platejs/code-drawing	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2026-01-11T17:34:01Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
plate	Ready	Preview, Comment	Jan 12, 2026 3:06am

zbeyens

Awesome PR! Left a few comments.

zbeyens · 2026-01-11T18:49:02Z

apps/www/src/registry/components/editor/plugins/code-drawing-base-kit.tsx

@@ -0,0 +1,11 @@
+'use client';


base-kits can't use client and React import. See another one for reference.

zbeyens · 2026-01-11T18:51:11Z

docs/(plugins)/(elements)/code-drawing.mdx

+    title: Code Drawing Node
+---
+
+<ComponentPreview name="code-drawing-demo" />


I think this doc is missing from the sidebar

zbeyens · 2026-01-11T18:53:21Z

packages/code-drawing/src/react/CodeDrawingElement.tsx

+  renderPopover?: (props: {
+    children: React.ReactNode;
+    onRemove: () => void;
+    onDownload?: () => void;
+    open: boolean;
+  }) => React.ReactNode;
+  renderDrawingTypeSelect?: (props: {
+    value: CodeDrawingType;
+    onChange: (value: CodeDrawingType) => void;
+  }) => React.ReactNode;
+  renderDrawingModeSelect?: (props: {
+    value: ViewMode;
+    onChange: (value: ViewMode) => void;
+    onOpenChange?: (open: boolean) => void;
+  }) => React.ReactNode;
+  renderTextarea?: (props: {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  }) => React.ReactNode;


This is an anti-pattern. We should have components defined directly in the registry without such props.

zbeyens · 2026-01-11T18:53:40Z

packages/code-drawing/src/react/components/CodeDrawingFloatingToolbar.tsx

+  }) => React.ReactNode;
+}
+
+export function CodeDrawingFloatingToolbar({


Same, to registry

zbeyens · 2026-01-11T18:53:51Z

packages/code-drawing/src/react/components/CodeDrawingPreview.tsx

+  }) => React.ReactNode;
+}
+
+export function CodeDrawingPreview({


Same, to registry

zbeyens · 2026-01-11T18:54:02Z

packages/code-drawing/src/react/components/CodeDrawingPreviewArea.tsx

+  toolbar?: React.ReactNode;
+}
+
+export function CodeDrawingPreviewArea({


Same, to registry

zbeyens · 2026-01-11T18:54:13Z

packages/code-drawing/src/react/components/CodeDrawingTextarea.tsx

+  toolbar?: React.ReactNode;
+}
+
+export function CodeDrawingTextarea({


Same, to registry

zbeyens · 2026-01-11T18:54:21Z

packages/code-drawing/src/react/components/CodeDrawingToolbar.tsx

+  }) => React.ReactNode;
+}
+
+export function CodeDrawingToolbar({


Same, to registry

zbeyens · 2026-01-11T18:55:31Z

apps/www/src/registry/ui/code-drawing-node.tsx

+import * as React from 'react';
+
+import {
+  CodeDrawingElement as BaseCodeDrawingElement,


To move to this component

felixfeng33 · 2026-01-11T23:58:17Z

Nice working!

electroluxcode added 9 commits January 11, 2026 22:17

add @platejs/code-drawing in apps

263e955

yarn brl in code-drawing

8b01a67

add changeset

0f6c90a

add change log

22be986

fix

8e4482a

dosubot bot added the size:XL This PR changes 500-999 lines, ignoring generated files. label Jan 11, 2026

dosubot bot added the feature request label Jan 11, 2026

electroluxcode marked this pull request as draft January 11, 2026 17:38

lint

dc3c963

vercel bot deployed to Preview January 11, 2026 17:40 View deployment

zbeyens requested changes Jan 11, 2026

View reviewed changes

electroluxcode changed the title ~~feat: add code-drawing node~~ [wip]feat: add code-drawing node Jan 12, 2026

vercel bot deployed to Preview January 12, 2026 03:06 View deployment

[wip]feat: add code-drawing node #4811

Are you sure you want to change the base?

[wip]feat: add code-drawing node #4811

Uh oh!

Conversation

electroluxcode commented Jan 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design

Core Features

ui

data example

Reference

Technical Implementation

Uh oh!

codesandbox bot commented Jan 11, 2026

Review or Edit in CodeSandbox

Uh oh!

changeset-bot bot commented Jan 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Jan 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zbeyens left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

felixfeng33 commented Jan 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

electroluxcode commented Jan 11, 2026 •

edited

Loading

changeset-bot bot commented Jan 11, 2026 •

edited

Loading

vercel bot commented Jan 11, 2026 •

edited

Loading