| Decide if Tiptap is right for my project |
Tiptap Overview |
| Compare Tiptap vs Lexical vs Slate |
Editor Comparison |
| Install Tiptap in a Next.js project |
Installation |
| Set up the editor with React |
React Integration |
| Avoid SSR hydration errors in Next.js |
React Integration, Next.js Setup |
| Understand the ProseMirror foundation |
ProseMirror Foundation |
| Define custom document schemas |
Schema Architecture |
| Configure the editor instance |
Editor Configuration |
| Choose content format (HTML vs JSON) |
Content Formats |
| Add paragraph, heading, and other content nodes |
Document Structure Nodes, Content Nodes |
| Add images and media nodes |
Media Nodes |
| Add bold, italic, and basic marks |
Basic Mark Extensions |
| Add link marks |
Link Mark Extension |
| Add advanced marks (highlight, code) |
Advanced Mark Extensions |
| Enable history, placeholder, character count |
StarterKit Extensions, Utility Extensions |
| Add dropCursor, gapCursor |
UI Extensions |
| Work with history and undo/redo |
History Extension |
| Create a custom extension |
Custom Extension Architecture |
| Add markdown-style input rules |
Input Rules |
| Create custom node views with React |
Node Views |
| Execute editor commands |
Commands API |
| Create custom commands |
Custom Commands |
| Handle editor events (onUpdate, onFocus) |
Editor Events |
| Optimize event handling |
Event Optimization |
| Store content as HTML or JSON |
Serialization Patterns |
| Build a bubble menu |
Bubble Menu |
| Build a floating menu |
Floating Menu |
| Build a toolbar |
Toolbar |
| Integrate with Next.js App Router |
Next.js Setup |
| Handle Next.js API routes |
Next.js API Integration |
| Connect to Drupal JSON API |
Drupal JSON API |
| Enable collaborative editing with Y.js |
Collaboration Architecture |
| Set up Hocuspocus collaboration server |
Hocuspocus Server |
| Style the editor with CSS |
Styling Approach |
| Implement dark mode |
Dark Mode |
| Optimize React performance |
React Performance |
| Optimize NodeView performance |
NodeView Performance |
| Prevent XSS attacks |
Security Model |
| Test custom extensions |
Testing Strategy |
| Avoid common mistakes |
Anti-Patterns |
| Find code examples and references |
Code Reference |
| Access official documentation |
Sources and Maintenance |