Changelog

Both editors previously hardcoded lucide-react icons. If your components.json sets iconLibrary to phosphor, tabler, hugeicons, or remixicon, you now get a matching icon set — and no lucide-react dependency forced onto every shadcn add.

Highlights

• Per-library registry items — eight new items (editor-icons-{phosphor,tabler,hugeicons,remixicon} and the block-editor-icons-* equivalents) each install only that library's package and overwrite the editor's icons.tsx. Installing the editor first, then its icon set, switches the whole toolbar over:

  bunnpmpnpmyarn
  $ pnpm dlx shadcn@latest add "https://editorcn.vercel.app/r/editor.json"
  npx shadcn@latest add "https://editorcn.vercel.app/r/editor-icons-phosphor.json"
  Copy

  iconLibrary	Install
  lucide (default)	nothing — already included
  phosphor	npx shadcn@latest add "https://editorcn.vercel.app/r/editor-icons-phosphor.json"
  tabler	npx shadcn@latest add "https://editorcn.vercel.app/r/editor-icons-tabler.json"
  hugeicons	npx shadcn@latest add "https://editorcn.vercel.app/r/editor-icons-hugeicons.json"
  remixicon	npx shadcn@latest add "https://editorcn.vercel.app/r/editor-icons-remixicon.json"

• One library per install — each item declares only its own dependencies (@phosphor-icons/react, @tabler/icons-react, @hugeicons/react + @hugeicons/core-free-icons, @remixicon/react), so no project ends up with all five libraries installed.

• Language icons split out — DEFAULT_LANGUAGE_ICONS moved to its own language-icons.tsx in both packages, so each icon set reuses the same code block language icons instead of redefining them. Still exported from each package's index.

• Library metadata — EditorIconLibrary / BlockEditorIconLibrary types and the EDITOR_ICON_LIBRARY_PACKAGES / BLOCK_EDITOR_ICON_LIBRARY_PACKAGES maps, mirroring the libraries the shadcn CLI supports.

• Backward compatible — lucide remains the default, the icons prop is unchanged, and languageIcons behavior is identical.

Not included

Extension toolbars (table, image placeholder) still import lucide directly, since they take no icons prop and aren't covered by the icon set items. Use npx shadcn@latest migrate icons --from lucide --to phosphor "src/components/editor/**" to convert them.

See the Customization docs for the per-library commands for both editors.

A UX-focused pass over the editors and extensions:

Table

• The hover handles now show a three-dot menu (⋮ / ⋯) instead of the grip strokes — hover a handle to reveal it, click to open the row or column actions.
• The propose-a-range hover highlight was removed in favor of the cleaner three-dot handles.
• Column resize feedback now tints to --primary while dragging, and the shared Separator vertical variant renders at a fixed height (fixing an invisible divider in the image action bar).

Color & highlight

• The bubble menu of both editors now has a single color control that opens one dropdown with two stacked grids — Text color (requires @tiptap/extension-text-style + @tiptap/extension-color) and Highlight (requires @tiptap/extension-highlight with multicolor: true). Each section shows an 8-color palette plus a remove action, and sections appear only when the matching extension is registered.
• The old highlight extension was removed from the extensions package; every reference (exports, manifest, docs page, registry entry, landing snippets) was cleaned up.

Rich text editor UI primitives

• @editorcn/editor now ships reusable bubble-menu primitives (RteButton, RteIcon, RteSeparator, RteOverlay, RteDropdown, RteDropdownItem, RteDropdownDivider, RteDropdownIcon) exported from @editorcn/editor/ui, matching the block editor's component API. The language and color selectors were refactored to use them instead of raw HTML.

Shared

• Code snippets on the landing page now match the current previews — the rich text editor shows the table toolbar, hover overlay, resizable image and placeholder toolbar; the block editor shows the extension-based table and image placeholder slash commands.

See the Table and Image Placeholder docs.

@editorcn/static-renderer v0.2.0 now renders saved Tiptap JSON documents, not just the HTML string the editors serialize. Pass an HTML string, a JSONContent document, or a Tiptap Node directly to content.

Highlights

• JSON content support — <StaticRenderer content={json} /> renders a saved JSON document read-only. The same extensions used in the editor are reused for the static renderer, so nothing is lost in the round trip.
• Custom node mapping — the options prop accepts nodeMapping, letting you replace any node (such as image) with your own React component instead of the default HTML output.
• Existing HTML path unchanged — passing content as a plain HTML string keeps rendering through the same stylesheet as before.
• Changeable demo image — the docs demo toolbar now opens a prompt to insert or replace the preview image by URL or by picking a file from your device. The file option ships in the shared image prompt, so it is also available in the block editor slash command and the home page demo.

See the Static Renderer docs for installation, the props table, and the custom nodes walkthrough.

We shipped @editorcn/static-renderer — a small package that renders content produced by @editorcn/editor or @editorcn/block-editor as read-only, fully styled HTML. Perfect for blog posts, preview panes, emails, and chat history.

Highlights

• Read-only rendering — <StaticRenderer content={html} /> styles the exact HTML the editors serialize, so no markdown or typeset.css conversions are needed.
• Dedicated stylesheet — style.css scopes itself to .rte-static-renderer and covers headings, lists, blockquotes, inline code, code blocks with .hljs-* highlighting, tables, task lists, links, images, horizontal rules, and YouTube/Twitter embed placeholders. It follows your shadcn theme variables and adapts to dark mode automatically.
• Two install methods — install via the shadcn registry (recommended; copies the source into components/static-renderer) or as a regular npm dependency, same as the editors.
• Live docs demo — the static renderer docs include an editable editor whose output is rendered read-only beside it, updating as you type.

See the Static Renderer docs for installation options, the component API, and the full list of supported output.

The Block Editor now uses polished, consistent icons from lucide-react instead of hand-drawn SVGs, and code-block language names are displayed capitalized.

Highlights

• Lucide icons — all default toolbar, bubble menu, slash menu, and drag handle icons now come from lucide-react. They render with currentColor, so they automatically match your shadcn theme. The icons prop remains fully customizable.
• Heading icons — the node selector and slash menu now show real H1/H2/H3 glyphs (Heading1, Heading2, Heading3).
• Capitalized language labels — the code block language selector now shows proper names (TypeScript, C++, JSON, Plain Text) instead of lowercase codes.
• lucide-react is now a dependency of @editorcn/block-editor (range >=0.400.0 <1.0.0), so it is installed automatically and stays compatible with whatever version you already have.