|
| 1 | +--- |
| 2 | +name: tiptap |
| 3 | +description: Helps coding agents integrate and work with the Tiptap rich text editor. Use when building or modifying a rich text editor with Tiptap, installing Tiptap extensions, or implementing features like collaboration, comments, AI, or document conversion. |
| 4 | +compatibility: Requires git |
| 5 | +metadata: |
| 6 | + author: tiptap |
| 7 | + version: '1.0' |
| 8 | +--- |
| 9 | + |
| 10 | +# Tiptap Integration Skill |
| 11 | + |
| 12 | +Instructions for coding agents integrating the Tiptap rich text editor |
| 13 | + |
| 14 | +## Reference Repositories |
| 15 | + |
| 16 | +Clone the tiptap and tiptap-docs repositories so you can search the source code and documentation. |
| 17 | + |
| 18 | +- https://github.com/ueberdosis/tiptap |
| 19 | +- https://github.com/ueberdosis/tiptap-docs |
| 20 | + |
| 21 | +If the workspace already has a reference folder with other repositories, clone them there. |
| 22 | + |
| 23 | +Otherwise, clone the repositories in a new `.reference` folder. The reference folder should be git-ignored. |
| 24 | + |
| 25 | +Before you start a task, make sure the repositories are updated to the latest version. |
| 26 | + |
| 27 | +## Best Practices |
| 28 | + |
| 29 | +### General |
| 30 | + |
| 31 | +- Use the latest stable version of **Tiptap 3**. |
| 32 | +- All packages that start with `@tiptap/` must have the **same version number**. |
| 33 | +- When integrating Tiptap for the first time, read the corresponding installation guide in tiptap-docs. |
| 34 | +- When server-side rendering (e.g. Next.js), set the `immediatelyRender: false` option when initializing the editor. Otherwise, the editor will crash. Learn more about this in tiptap-docs. |
| 35 | + |
| 36 | +### React |
| 37 | + |
| 38 | +- Prefer using the React Composable API. See `tiptap-docs/src/content/guides/react-composable-api.mdx` |
| 39 | + |
| 40 | +## Implementing Editor Features |
| 41 | + |
| 42 | +When the user asks you to implement one of these features, read the corresponding section in tiptap-docs for guidance. |
| 43 | + |
| 44 | +- **Real-time collaboration** — Multiple users editing a document simultaneously. See `tiptap-docs/src/content/collaboration/`. |
| 45 | +- **Comments** — Thread-based inline and document comments. See `tiptap-docs/src/content/comments/`. |
| 46 | +- **Tracked changes** — Track, accept, and reject document edits. See `tiptap-docs/src/content/tracked-changes/`. |
| 47 | +- **Import/Export** — Convert documents to and from DOCX, PDF, Markdown, and other formats. See `tiptap-docs/src/content/conversion/`. |
| 48 | +- **AI content generation** — Generate text content into the document using AI. See `tiptap-docs/src/content/content-ai/capabilities/ai-toolkit/workflows/insert-content.mdx`. |
| 49 | +- **AI agent document editing** — Give an AI agent the ability to edit Tiptap documents. See `tiptap-docs/src/content/content-ai/capabilities/ai-toolkit/`. |
| 50 | +- **AI review and proofreading** — Review, proofread, and suggest style improvements. See `tiptap-docs/src/content/content-ai/capabilities/ai-toolkit/workflows/proofreader.mdx`. |
| 51 | +- **AI server-side processing** — Run AI workflows that edit rich text documents on the server. See `tiptap-docs/src/content/content-ai/capabilities/server-ai-toolkit/`. |
| 52 | +- **Version history** — Save and restore document snapshots. See `tiptap-docs/src/content/collaboration/documents/snapshot.mdx`. |
| 53 | +- **Snapshot compare** — Highlight differences between document versions. See `tiptap-docs/src/content/collaboration/documents/snapshot-compare.mdx`. |
| 54 | +- **Pages** — Print-ready page layout with headers, footers, and page breaks. See `tiptap-docs/src/content/pages/`. |
| 55 | + |
| 56 | +## Pro Extensions |
| 57 | + |
| 58 | +Some Tiptap extensions are distributed through a private npm registry. To install pro packages, see `tiptap-docs/src/content/guides/pro-extensions.mdx` for setup instructions. |
0 commit comments