TipTap Editor Patterns

Quick Guide: TipTap is a headless, framework-agnostic rich text editor built on ProseMirror. Everything is an extension -- nodes define block/inline content, marks define formatting, extensions add functionality. Use useEditor hook (React/Vue) or the Editor class directly. Prefer JSON serialization over HTML. Set immediatelyRender: false for SSR. Current: v3.x -- Floating UI replaces Tippy.js, menus import from /menus sub-path, StarterKit includes Link/Underline by default.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST set immediatelyRender: false in useEditor when using SSR/SSG frameworks -- TipTap must never render on the server)

(You MUST import BubbleMenu and FloatingMenu from the /menus sub-path -- e.g. @tiptap/react/menus in v3)

(You MUST define name, group, parseHTML, and renderHTML on every custom Node -- missing any breaks schema resolution)

(You MUST use editor.chain().focus()...run() for chained commands -- forgetting .focus() loses cursor position, forgetting .run() silently does nothing)