Rich text / block editor

Edits content as blocks. Text blocks (paragraphs, headings, lists, quotes, code, tables, images, dividers) are edited inline; page blocks such as a hero or a pricing table render as the very component the site uses, configured in an inspector generated from the block's schema. Reads and writes VamosDoc, so the site renders the same content with @vamos-ui/react/render and never loads the editor. A compact RichTextEditor covers notes, comments and announcements.

Installation

Usage

import { BlockEditor, RichTextEditor } from "@vamos-ui/react/editor";
import { siteBlocks } from "@/blocks/registry"; // createRegistry([heroBlock, pricingBlock, …])

// Posts and pages: text + page blocks, "/" menu, drag handle, inserter
<BlockEditor value={doc} onChange={(next) => save(next)} registry={siteBlocks} variant="document" />

// A note field in a form (RichDoc in and out)
<Field label="Summary"><RichTextEditor value={note} onChange={setNote} size="sm" /></Field>

// The site (server component, no editor code)
import { renderDoc } from "@vamos-ui/react/render";
renderDoc(doc, { registry: siteBlocks, locale: "en" });

Keyboard: Esc selects the current block. In block selection, ↑/↓ move between blocks, Alt+Shift+↑/↓ moves the block, ⌘/Ctrl+Shift+D duplicates, Alt+Shift+Z deletes, Enter goes back to the text. Insertions, moves and deletes are announced.

Markdown shortcuts while typing: # to ####, - or *, 1., >, ``` and ---.

Storage: image blocks are { type: "image", props: { src, alt, width, height, caption, assetId, focal } }; tables are table → table-row → table-cell (props.header, colspan, rowspan) with inline content.

Unknown block types (a disabled module) show a placeholder and are saved back exactly as they were loaded.

Examples

{
  "title": "Simple *pricing*",
  "plans": [
    {
      "name": "Solo",
      "price": "$29",
      "period": "month",
      "features": [
        "1 practitioner",
        "SMS reminders"
      ]
    },
    {
      "name": "Clinic",
      "price": "$89",
      "period": "month",
      "features": [
        "Up to 8 chairs",
        "Waitlist autofill",
        "Online payments"
      ],
      "featured": true
    },
    {
      "name": "Group",
      "price": "$240",
      "period": "month",
      "features": [
        "Unlimited locations",
        "SSO and audit log"
      ]
    }
  ]
}

## Spring opening hours

We now open **an hour earlier** on weekdays.

- Monday to Friday: 08:00–19:00
- Saturday: 09:00–14:00

> Bookings made before 1 March keep their time.

API