Rich Text Editor Expert

---
name: rich-text-editor-expert
description: "Expert guide for rich text editor integration (Tiptap, Lexical, ProseMirror), collaborative editing, and custom extensions / Panduan ahli integrasi editor rich text (Tiptap, Lexical, ProseMirror), editing kolaboratif, dan ekstensi kustom."
author: "Roedy Rustam"

version: "4.2.0"
---

# Rich Text Editor Expert (2026 Edition)

[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

---

<a name="english"></a>
## English

### Orchestration & Integration
- **`realtime-collaboration-expert`**: Yjs/Automerge CRDTs for collaborative editing.
- **`form-validation-expert`**: Form integration patterns for editor content.
- **`headless-cms-expert`**: CMS schema integration for rich text fields.
- **`file-upload-media-expert`**: Image/video embedding within editor content.
- **`senior-frontend`**: React component patterns for editor wrappers.

### Description
Expert guide for integrating production-quality rich text editors into web applications. Covers Tiptap v2 (ProseMirror-based, extensible), Lexical (Meta's framework, high-performance), and ProseMirror (low-level, maximum control). Includes custom node/mark creation, collaborative editing with Yjs, slash commands, mention systems, image/video embedding, Portable Text output, and accessibility compliance.

### Trigger Conditions
- Adding a WYSIWYG or rich text editor to an application.
- Building collaborative document editing features.
- Creating custom editor extensions (mentions, slash commands, embeds).
- Choosing between Tiptap, Lexical, or ProseMirror.
- Implementing content serialization (HTML, JSON, Markdown, Portable Text).

---

### Editor Selection Guide

| Criteria | Tiptap v2 | Lexical (Meta) | ProseMirror |
|----------|-----------|----------------|-------------|
| Abstraction Level | High | Medium | Low |
| Framework | React, Vue, vanilla | React (primary) | Vanilla JS |
| Extension Ecosystem | ★★★★★ (50+ extensions) | ★★★ (growing) | ★★★★ (community) |
| Collaboration | Yjs built-in | Yjs plugin | Yjs via prosemirror-collab |
| Performance | ★★★★ | ★★★★★ | ★★★★ |
| Learning Curve | Low-Medium | Medium-High | High |
| **Best For** | Most apps, CMS | High-scale, messaging | Custom editors |

**Recommendation:** Use **Tiptap v2** for 90% of use cases. Use **Lexical** for high-performance messaging apps. Use **ProseMirror** only when you need full low-level control.

### Core Patterns

#### 1. Tiptap v2 Setup (React)

```tsx
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Placeholder from '@tiptap/extension-placeholder';
import Image from '@tiptap/extension-image';
import Link from '@tiptap/extension-link';
import Collaboration from '@tiptap/extension-collaboration';
import * as Y from 'yjs';

const ydoc = new Y.Doc();

function RichEditor({ onUpdate }: { onUpdate: (json: object) => void }) {
  const editor = useEditor({
    extensions: [
      StarterKit.configure({ history: false }), // Disable history for collab
      Placeholder.configure({ placeholder: 'Start writing...' }),
      Image.configure({ inline: true, allowBase64: false }),
      Link.configure({ openOnClick: false, autolink: true }),
      Collaboration.configure({ document: ydoc }),
    ],
    onUpdate: ({ editor }) => onUpdate(editor.getJSON()),
  });

  return (
    <div className="editor-wrapper">
      <MenuBar editor={editor} />
      <EditorContent editor={editor} className="prose max-w-none" />
    </div>
  );
}
```

#### 2. Custom Slash Command Extension (Tiptap)

```typescript
import { Extension } from '@tiptap/core';
import Suggestion from '@tiptap/suggestion';

export const SlashCommands = Extension.create({
  name: 'slashCommands',
  addOptions() {
    return {
      suggestion: {
        char: '/',
        items: ({ query }) => [
          { title: 'Heading 1', command: ({ editor }) => editor.chain().focus().toggleHeading({ level: 1 }).run() },
          { title: 'Bullet List', command: ({ editor }) => editor.chain().focus().toggleBulletList().run() },
          { title: 'Code Block', command: ({ editor }) => editor.chain().focus().toggleCodeBlock().run() },
          { title: 'Image', command: ({ editor }) => { /* open upload dialog */ } },
        ].filter((item) => item.title.toLowerCase().includes(query.toLowerCase())),
      },
    };
  },
  addProseMirrorPlugins() {
    return [Suggestion({ editor: this.editor, ...this.options.suggestion })];
  },
});
```

#### 3. Lexical Setup (React)

```tsx
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
import { HeadingNode, QuoteNode } from '@lexical/rich-text';
import { ListNode, ListItemNode } from '@lexical/list';
import { CodeNode } from '@lexical/code';

const editorConfig = {
  namespace: 'MyEditor',
  nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, CodeNode],
  onError: (error: Error) => console.error(error),
  theme: { /* custom theme classes */ },
};

function LexicalEditor() {
  return (
    <LexicalComposer initialConfig={editorConfig}>
      <RichTextPlugin
        contentEditable={<ContentEditable className="prose" />}
        placeholder={<div className="text-gray-400">Start writing...</div>}
        ErrorBoundary={LexicalErrorBoundary}
      />
      <HistoryPlugin />
      <AutoFocusPlugin />
    </LexicalComposer>
  );
}
```

#### 4. Content Serialization Patterns
- **JSON** (Tiptap/Lexical): Store editor state as JSON for exact restoration.
- **HTML**: Use `editor.getHTML()` for rendering in non-editor contexts.
- **Markdown**: Convert with `@tiptap/extension-markdown` for developer-facing content.
- **Portable Text** (Sanity): Map Tiptap nodes to Portable Text blocks for CMS storage.

### Production Checklist
- [ ] Content sanitization (DOMPurify) before rendering user HTML.
- [ ] Image upload with presigned URLs (not base64 in content).
- [ ] Keyboard shortcuts documented and accessible.
- [ ] Mobile-responsive toolbar (sticky or floating).
- [ ] Autosave with debounce (500ms) and conflict resolution.
- [ ] Max content length validation.

---

<a name="bahasa-indonesia"></a>
## Bahasa Indonesia

### Integrasi Orkestrasi
- **`realtime-collaboration-expert`**: CRDT Yjs/Automerge untuk editing kolaboratif.
- **`form-validation-expert`**: Pola integrasi form untuk konten editor.
- **`headless-cms-expert`**: Integrasi skema CMS untuk field rich text.

### Deskripsi
Panduan ahli untuk mengintegrasikan editor rich text berkualitas produksi ke dalam aplikasi web. Mencakup Tiptap v2, Lexical (Meta), dan ProseMirror. Termasuk pembuatan node/mark kustom, editing kolaboratif dengan Yjs, slash commands, sistem mention, embedding gambar/video, dan output Portable Text.

### Kondisi Pemicu
- Menambahkan editor WYSIWYG atau rich text ke aplikasi.
- Membangun fitur editing dokumen kolaboratif.
- Membuat ekstensi editor kustom (mention, slash commands, embed).
- Memilih antara Tiptap, Lexical, atau ProseMirror.