When to use

A WYSIWYG rich-text editor + read-only viewer for long-form article bodies — news, blog posts, doc pages, knowledge-base entries. Built on Plate (platejs), pro-ui's WYSIWYG substrate.

Two exports from one folder: RichTextEditor is a "use client" editor (~150KB gzip); RichTextVieweris server-renderable (~30KB gzip). Storage format is JSON — Plate's docs warn against HTML round-trips.

Editor

"use client"

import {
  RichTextEditor,
  type RichTextValue,
} from "@/components/rich-text-editor"

export function ArticleEditPage({ initial }: { initial: RichTextValue }) {
  const [value, setValue] = useState(initial)

  return (
    <RichTextEditor
      value={value}
      onChange={setValue}
      onSave={async (v) => {
        await fetch("/api/articles/save", { method: "POST", body: JSON.stringify(v) })
      }}
      onImageUpload={async (file) => {
        const fd = new FormData()
        fd.append("file", file)
        const res = await fetch("/api/upload", { method: "POST", body: fd })
        return res.json()    // { src, alt?, width?, height? }
      }}
    />
  )
}

Viewer (RSC)

The viewer is a server component — no "use client" boundary needed. It uses platejs/static to render the JSON without instantiating an editor.

import { RichTextViewer } from "@/components/rich-text-editor"

export default async function NewsArticle({ params }: { params: { id: string } }) {
  const article = await fetchArticle(params.id)
  return (
    <article>
      <h1>{article.title}</h1>
      <RichTextViewer value={article.body} />
    </article>
  )
}

Composed with the news-domain article column

<article className="lg:col-span-8">
  <h1>{article.title}</h1>

  <ArticleMeta divider items={metaItems} />

  <RichTextViewer value={article.body} />

  <ShareBar targets={[...]} title={article.title} headingAs="h4" divider />
</article>

Image upload contract

The component never talks to a backend directly. Pass onImageUpload — a function that takes a File and resolves to { src, alt?, width?, height? }. Without this prop, the editor falls back to a URL prompt.

Toolbar

Marks: bold, italic, underline, strikethrough, inline code, highlight, subscript, superscript. Blocks: H1–H3, blockquote, code block, horizontal rule. Lists: bullet, ordered. Insert: link, image, table. Styles: font family, font size, text color.

Notes

• Storage format is the Plate Valuetype (an array of element nodes). Don't round-trip through HTML — keep JSON authoritative; serialize to HTML only at export boundaries (RSS, email, etc.).
• The viewer renders bare HTML with Plate's data-slate-* attributes stripped — no editor instance, no client hooks. Safe in Server Components.
• Press Cmd/Ctrl+S to fire onSave with the current document. Override autoFocus to focus the editor on mount.
• The editor is echo-guarded on the value prop: external updates flow in via setValue on the editor without triggering an extra onChange emit.
• Toolbar buttons are onMouseDown-driven so the editor selection isn't lost when clicking a button.
• Plate ships a brand-recognizable suite of plugins under @platejs/*. This component pins to v53. When bumping Plate, re-verify SSR, image upload, and the JSON shape.