Overview

Every richtext field uses a built-in TipTap v3 editor with full media embedding, structured content nodes, and AI assistance.

Embedded media types

Controlling available features

Use the features array to control which toolbar items are shown:

// Full-featured (default — all tools available)
{ name: 'content', type: 'richtext' }

// Restricted — only basic formatting + images
{
  name: 'content',
  type: 'richtext',
  features: ['bold', 'italic', 'heading', 'link', 'image', 'bulletList', 'orderedList']
}

// Minimal — text only, no media
{
  name: 'bio',
  type: 'richtext',
  features: ['bold', 'italic', 'link']
}

All available features

Markdown storage

Richtext fields store markdown. Standard formatting uses native markdown syntax. Features that markdown doesn't support use inline HTML:

Rendering in Next.js

Use react-markdown with remark-gfm:

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

function ArticleBody({ content }: { content: string }) {
  return (
    <ReactMarkdown remarkPlugins={[remarkGfm]}>
      {content}
    </ReactMarkdown>
  );
}

Never use dangerouslySetInnerHTML with a regex-based parser — it breaks images with sizing, tables, and embedded media.

Inline Proofreading

The richtext editor has built-in AI proofreading that shows corrections directly inline — no toast notifications or popups.

How it works

1. Click the Proofread button in the toolbar (or use the AI menu)
2. The AI scans your text and returns corrections with character offsets
3. Errors appear as red underlined text (spelling mistakes, grammar issues)
4. Suggestions appear as green inline widgets (style improvements, word choice)

Correction toolbar

A sticky toolbar appears at the bottom of the editor showing:

• Navigation — ← 1/9 → to step through corrections one by one
• Accept / Reject — apply or dismiss the current correction
• Accept All / Reject All — batch-apply or dismiss all corrections at once

Navigating highlights the current correction in the editor so you can see the context.

Technical details

• Corrections are rendered as ProseMirror Decorations — they don't modify your content until you accept them
• The API returns character offsets; the editor maps these to ProseMirror positions
• Server-side validation fallback ensures offsets are correct even if the AI response is slightly off
• Language is auto-detected — no configuration needed

AI features

• AI Proofread — inline corrections with navigation toolbar (see above)
• AI Bubble Menu — select text for rewrite options (shorter, longer, formal, casual, translate)
• Zoom — scale editor content 50%-200%