ReactJS Tiptap Editor Skill

When to use

• Building admin content editors (posts, projects, pages).
• Implementing WYSIWYG editing with Markdown output.
• Adding rich text capabilities to forms.

Guardrails

• Admin-only: This editor is for authenticated admin users only.
• Markdown output: Always export as Markdown to store in DB (content_md column).
• Sanitize on render: When displaying content, parse Markdown → safe HTML (see content-format doc).
• Size: This is a heavy component (~200KB); lazy-load on admin routes.

Workflow checklist

1. Install if not present: bun add reactjs-tiptap-editor
2. Import editor component in admin route/component.
3. Configure extensions (bold, italic, headings, lists, code blocks, links, images).
4. Set output="markdown" to get Markdown strings.
5. Store Markdown in DB; render with unified/remark/rehype on public pages.