Working with TipTap rich text editor extensions, content types, and serialization. Use when creating or modifying TipTap extensions, editor features, or content rendering.
This project uses a three-layer extension architecture:
libs/shared/src/tiptap/extensions/) — Core Node.create() / Mark.create() definitions with parseHTML, renderHTML, addAttributesapps/frontend/src/entities/tiptap-editor/extensions/) — Extend shared with addCommands(), addNodeView() (React), keyboard shortcutsapps/publishing/components/) — Server-side HTML rendering of stored content| File | Purpose |
|---|---|
libs/shared/src/tiptap/extensions/index.ts | Extension registration and sharedMainEditorExtensions array |
apps/frontend/src/entities/tiptap-editor/mainEditorExtensions.ts |
| Frontend extension list (extends shared) |
apps/collaboration/src/yDocOperations.ts | TipTap <-> Y.Doc via @hocuspocus/transformer |
Use the templates in this skill:
After creating an extension:
libs/shared/src/tiptap/extensions/index.ts and add to sharedMainEditorExtensionsapps/frontend/src/entities/tiptap-editor/extensions/<Name>/getMainEditorExtensions() in mainEditorExtensions.tsTiptapTransformer.toYdoc() / fromYdoc()