{
  "slug": "richtext",
  "title": "Richtext Editor",
  "description": "TipTap-based rich text editor with embedded media, callouts, tables, code blocks, inline AI proofreading, and more.",
  "category": "guides",
  "order": 5,
  "locale": "en",
  "translationGroup": "d38c7b08-bebb-4ac4-92b4-a438813690e3",
  "helpCardId": null,
  "content": "## Overview\n\nEvery `richtext` field uses a built-in TipTap v3 editor with full media embedding, structured content nodes, and AI assistance.\n\n## Embedded media types\n\n| Node | Description |\n|------|-------------|\n| **Image** | Upload or paste. Supports resize handles and alignment. |\n| **Video embed** | YouTube or Vimeo URL → responsive iframe. |\n| **Audio embed** | Upload mp3/wav/ogg → inline `<audio>` player. |\n| **File attachment** | Upload any file → download-link card. |\n| **Callout** | Styled info/warning/tip/danger box with editable text. |\n| **Table** | Structured data table with header row, context toolbar. |\n| **Code block** | Fenced code block with syntax highlighting. |\n| **Interactive embed** | Embed an Interactive from the Interactives manager. |\n\n## Controlling available features\n\nUse the `features` array to control which toolbar items are shown:\n\n```typescript\n// Full-featured (default — all tools available)\n{ name: 'content', type: 'richtext' }\n\n// Restricted — only basic formatting + images\n{\n  name: 'content',\n  type: 'richtext',\n  features: ['bold', 'italic', 'heading', 'link', 'image', 'bulletList', 'orderedList']\n}\n\n// Minimal — text only, no media\n{\n  name: 'bio',\n  type: 'richtext',\n  features: ['bold', 'italic', 'link']\n}\n```\n\n## All available features\n\n| Feature | Toolbar item | Shortcut |\n|---------|-------------|----------|\n| `bold` | Bold text | Cmd+B |\n| `italic` | Italic text | Cmd+I |\n| `underline` | Underline | Cmd+U |\n| `strike` | Strikethrough | Cmd+Shift+S |\n| `code` | Inline code | |\n| `superscript` | Superscript (x²) | Cmd+. |\n| `subscript` | Subscript (x₂) | Cmd+, |\n| `heading` | Heading selector (H1-H3) | |\n| `bulletList` | Bullet list | |\n| `orderedList` | Numbered list | |\n| `blockquote` | Blockquote | |\n| `horizontalRule` | Horizontal line | |\n| `textAlign` | Text alignment | |\n| `highlight` | Highlight with color picker | |\n| `link` | Hyperlink | Cmd+K |\n| `table` | Data table | |\n| `image` | Image upload/embed | |\n| `video` | Video embed | |\n| `audio` | Audio file upload | |\n| `file` | File attachment | |\n| `callout` | Info/warning/tip callout | |\n| `interactive` | Interactive embed | |\n\n## Markdown storage\n\nRichtext fields store **markdown**. Standard formatting uses native markdown syntax. Features that markdown doesn't support use inline HTML:\n\n| Feature | Stored as |\n|---------|-----------|\n| Underline | `<u>text</u>` |\n| Superscript | `<sup>text</sup>` |\n| Subscript | `<sub>text</sub>` |\n| Highlight | `<mark style=\"background-color:#fde68a\">text</mark>` |\n| Text alignment | `<p style=\"text-align:center\">text</p>` |\n| Interactive embed | `!!INTERACTIVE[id|title|align:left]` |\n\n## Rendering in Next.js\n\nUse `react-markdown` with `remark-gfm`:\n\n```typescript\nimport ReactMarkdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\n\nfunction ArticleBody({ content }: { content: string }) {\n  return (\n    <ReactMarkdown remarkPlugins={[remarkGfm]}>\n      {content}\n    </ReactMarkdown>\n  );\n}\n```\n\n> **Never use `dangerouslySetInnerHTML`** with a regex-based parser — it breaks images with sizing, tables, and embedded media.\n\n## Inline Proofreading\n\nThe richtext editor has built-in AI proofreading that shows corrections directly inline — no toast notifications or popups.\n\n### How it works\n\n1. Click the **Proofread** button in the toolbar (or use the AI menu)\n2. The AI scans your text and returns corrections with character offsets\n3. **Errors** appear as red underlined text (spelling mistakes, grammar issues)\n4. **Suggestions** appear as green inline widgets (style improvements, word choice)\n\n### Correction toolbar\n\nA sticky toolbar appears at the bottom of the editor showing:\n\n- **Navigation** — ← 1/9 → to step through corrections one by one\n- **Accept / Reject** — apply or dismiss the current correction\n- **Accept All / Reject All** — batch-apply or dismiss all corrections at once\n\nNavigating highlights the current correction in the editor so you can see the context.\n\n### Technical details\n\n- Corrections are rendered as ProseMirror Decorations — they don't modify your content until you accept them\n- The API returns character offsets; the editor maps these to ProseMirror positions\n- Server-side validation fallback ensures offsets are correct even if the AI response is slightly off\n- Language is auto-detected — no configuration needed\n\n## AI features\n\n- **AI Proofread** — inline corrections with navigation toolbar (see above)\n- **AI Bubble Menu** — select text for rewrite options (shorter, longer, formal, casual, translate)\n- **Zoom** — scale editor content 50%-200%",
  "excerpt": "Overview\n\nEvery richtext field uses a built-in TipTap v3 editor with full media embedding, structured content nodes, and AI assistance.\n\n Embedded media types\n\n| Node | Description |\n|------|-------------|\n| Image | Upload or paste. Supports resize handles and alignment. |\n| Video embed | YouTube or",
  "seo": {
    "metaTitle": "Richtext Editor — webhouse.app Docs",
    "metaDescription": "TipTap-based rich text editor with inline AI proofreading, embedded media, callouts, tables, and code blocks.",
    "keywords": [
      "webhouse",
      "cms",
      "richtext",
      "proofreading",
      "inline-corrections",
      "tiptap",
      "editor"
    ]
  },
  "createdAt": "2026-03-29T21:56:59.898Z",
  "updatedAt": "2026-03-29T22:00:00.000Z"
}