Rich Text Editor

import * as React from "react";
import { RichTextEditor } from "@/components/ui/rich-text-editor-toolbar";
import { Check, FileText, Share2 } from "lucide-react";

/* A proposal being written in the workspace. Select text and press Bold, or
   ⌘B; "Add link" opens an inline address field, not a browser prompt. The
   toolbar is one Tab stop: arrow keys move inside it. The counter shows up
   as the draft nears its 600-character limit. */

const START =
  "<h2>Scope of work</h2>" +
  "<p>Northwind will redesign the <strong>Vela Labs</strong> client portal over six weeks, starting <em>6 October</em>. The full brief is in the <a href=\"https://northwind.studio/briefs/vela\">shared folder</a>.</p>" +
  "<h3>Deliverables</h3>" +
  "<ol><li>Research and a journey map for the three core tasks</li><li>A design system in Figma, with tokens exported as <code>theme.json</code></li><li>Production-ready screens for signing, billing and members</li></ol>" +
  "<blockquote>We start once the deposit invoice (INV-2026-0927) is paid.</blockquote>" +
  "<p>Weekly reviews happen on Thursdays. Anything outside this scope is quoted separately.</p>";

const PEOPLE = [
  { initials: "MC", name: "Maya Chen" },
  { initials: "DW", name: "Daniel Wilson" },
  { initials: "OM", name: "Olivia Martinez" },
];

export default function RichTextEditorDemo() {
  const [chars, setChars] = React.useState(0);
  const [saved, setSaved] = React.useState(true);
  const timer = React.useRef<ReturnType<typeof setTimeout>>();

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <div className="w-full max-w-[780px] min-w-0 overflow-hidden rounded-[18px] [corner-shape:squircle] bg-card shadow-sm ring-1 ring-border">
        <header className="flex items-center gap-3 border-b border-border px-5 py-3">
          <FileText aria-hidden className="size-4 text-muted-foreground" />
          <p className="min-w-0 truncate text-[12.5px] text-muted-foreground">
            Proposals <span aria-hidden>/</span> <span className="text-foreground">Vela Labs, portal redesign</span>
          </p>
          <span className="ml-auto flex items-center gap-1 text-[12px] text-muted-foreground" aria-live="polite">
            {saved ? <><Check aria-hidden className="size-3.5" /> Saved</> : "Saving…"}
          </span>
          <span className="hidden -space-x-1.5 sm:flex" aria-label={`Editing: ${PEOPLE.map((p) => p.name).join(", ")}`}>
            {PEOPLE.map((p) => (
              <span key={p.initials} title={p.name} className="grid size-7 place-items-center rounded-full bg-muted text-[10.5px] font-semibold ring-2 ring-card">
                {p.initials}
              </span>
            ))}
          </span>
          <button
            type="button"
            className="inline-flex h-8 items-center gap-1.5 rounded-[10px] [corner-shape:squircle] bg-primary px-3 text-[12.5px] font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
          >
            <Share2 aria-hidden className="size-3.5" /> Share
          </button>
        </header>

        <div className="p-5">
          <RichTextEditor
            label="Proposal"
            maxLength={600}
            minHeight={320}
            defaultValue={START}
            onChange={(_, editor) => {
              setChars(editor.storage.characterCount.characters());
              setSaved(false);
              clearTimeout(timer.current);
              timer.current = setTimeout(() => setSaved(true), 900);
            }}
          />
          <p className="mt-2.5 text-[12px] text-muted-foreground">
            Last edited by Maya Chen · {chars ? `${chars} characters` : "just now"}
          </p>
        </div>
      </div>
    </div>
  );
}