Document Editor

A Docs-style workspace: a title bar with star, location and save status, a File / Edit / View / Insert / Format / Tools / Help menu bar with a searchable command list, a full toolbar (zoom, text style, font, font size, paint format, colors, comments, alignment and formatting marks), a collapsible heading outline, and a comments panel. Insert adds images, tables, checklists, syntax-highlighted code blocks and callouts, and pastes from Google Docs, Word or Notion come in clean. Comments anchor to the selected text and support replies, reactions and resolving. Edits autosave through onSave, and every save adds an entry to version history.

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @editorcn-pro/document-editor
Copy

The CLI also installs the Image Placeholder and Table extensions.

Usage

Copyimport { DocumentEditor } from "@/components/templates/document-editor";
 
export const Doc = ({ doc, user }) => (
  <DocumentEditor
    currentUser={user}
    initialTitle={doc.title}
    initialContent={doc.content}
    initialComments={doc.comments}
    onSave={({ title, content }) => saveDocument(doc.id, { title, content })}
    onCommentsChange={(comments) => saveComments(doc.id, comments)}
    onShare={() => openShareDialog(doc.id)}
  />
);

onSave runs 800ms after the last edit. Return a promise to keep the status on "Saving…" until it resolves; a rejected promise shows "Couldn't save". Comment anchors are stored in the document as <span data-comment-id="…">, so save the content and the comments together.

Each thread's highlight color can be changed from its ⋯ menu. The choice is stored on the comment as color, so it comes back through onCommentsChange. Threads without a color use commentColor, which accepts any CSS color.

Props