Text Edit

Install

pnpm dlx shadcn@latest add @vegastack/text-edit

Usage

import { TextEdit } from "@/components/ui/text-edit";

const [html, setHtml] = useState("<p>Hello</p>");

<TextEdit
  value={html}
  onValueChange={setHtml}
  placeholder="Write something…"
  aria-label="Body"
  aria-describedby="body-help"
/>;

TextEdit is controlled with value / onValueChange (HTML strings), or uncontrolled with defaultValue. It is built on Tiptap v3 StarterKit, which bundles undo/redo history, the bold / italic / strike / code marks, headings, bullet & ordered lists, blockquote, and markdown-ish input rules (type **bold**, # Heading, - for a list, > for a quote, `code`).

// Uncontrolled — seed initial content and read changes via onValueChange.
<TextEdit
  defaultValue="<p>Draft…</p>"
  onValueChange={(html) => save(html)}
  aria-label="Notes"
/>

Scope

TextEdit is the presentational base editor — a controlled HTML value, the StarterKit formatting set, the styled toolbar, the placeholder, read-only mode, a Cmd/Ctrl+Enter onSubmit affordance, and minHeight/maxHeight sizing. Heavier, app-coupled capabilities are intentionally out of this core (each needs app infrastructure or ships as a separate composed extension), mirroring the design system's G7 presentational/app-coupled rule:

This base ships no @tiptap/extension-collaboration and no yjs dependency — it is a self-contained single-user editor. For richer needs, compose the relevant extension on top or use the dedicated follow-up component.

Prose styling is not this component's to own: the editor surface wears the shared prose recipe from @vegastack/design, the same string MarkdownView puts on its root, so what a person types here and what the app renders from markdown are one typography.

Examples

Anatomy

TextEdit is a single self-contained component, but it composes three layered pieces internally:

<TextEdit>
  {" "}
  {/* data-slot="text-edit" — bordered container, focus-within border tint (no ring) */}
  <Toolbar />{" "}
  {/* data-slot="text-edit-toolbar" — role="toolbar", Toggle buttons */}
  <EditorContent />{" "}
  {/* Tiptap contenteditable, role="textbox" aria-multiline */}
</TextEdit>

• Container (data-slot="text-edit") — the bordered surface. Re-colors its border with the ring token on :focus-within and to destructive when it wraps an aria-invalid control (also setting data-invalid). Carries data-editable when editable.
• Toolbar (data-slot="text-edit-toolbar", role="toolbar") — a row of Toggle buttons (bold, italic, strike, heading, bullet list, ordered list, blockquote, inline code). Each button's pressed state is derived from editor.isActive(...) via Tiptap's useEditorState, so it stays in sync with the caret. Hidden when editable={false}.
• Editor surface (role="textbox", aria-multiline) — the Tiptap/ProseMirror contenteditable. Prose is styled entirely with semantic tokens (headings, lists, code, blockquote), so it tracks the active theme with no @tailwindcss/typography dependency.

Editing patterns

An empty editor with a placeholder, and a read-only editor (toolbar hidden) for rendering stored content.

Invalid

Pass aria-invalid to mark the editor invalid: it forwards to the contenteditable textbox and the container border turns destructive (has-aria-invalid:border-destructive/70, plus data-invalid). Connect the error text with aria-describedby so it is announced with the region. aria-invalid also accepts "grammar" and "spelling".

Submit on Cmd/Ctrl+Enter

Set onSubmit to get a keyboard submit affordance — pressing Cmd/Ctrl+Enter fires it with the current HTML. It's presentational only: the host decides what submitting means (save, send, …), and plain Enter still inserts a newline. Omit onSubmit to disable it.

Sized content area

minHeight sets a starting height and maxHeight caps it — content past the cap scrolls (overflow-y-auto) while the toolbar stays pinned. A number is treated as px; a string (e.g. '8rem') is used verbatim. Both are fed to the --te-min-h / --te-max-h CSS variables.

API Reference

Accessibility

• The editable surface is a role="textbox" with aria-multiline="true". Give it an aria-label (or associate a visible label) so the region is announced.
• Use aria-invalid and aria-describedby to connect validation state and helper/error text to the contenteditable textbox.
• The toolbar is a Base UI Toolbar labelled “Formatting” — a real APG toolbar, so the whole row is one tab stop and the arrow keys move between controls (wrapping at the ends) across the three Toolbar.Group clusters. Each button is an icon-only Toggle with an aria-label and aria-pressed reflecting the active mark or node.
• Editing keymaps come from Tiptap StarterKit — see the table below. Focus re-colors the container border with the ring token (focus-within:border-ring/(--alpha-tint-border)); never styled with outline: none.
• An invalid control (aria-invalid) re-colors the container border to destructive (has-aria-invalid:border-destructive-border/(--alpha-tint-border)) and sets data-invalid for downstream styling. Focus outranks invalid: while anything inside the editor holds focus the container carries the ring tint instead, and the destructive tint returns on blur — the contenteditable has no outline, so the container border is its only focus cue.
• editable={false} removes the toolbar and marks the surface read-only.

Do / Don't