How does this skill prevent SSR hydration errors?

The skill automatically configures 'immediatelyRender: false' in the useEditor hook, which is essential for preventing hydration mismatches in Next.js and other SSR environments.

Does it support image uploads instead of base64?

Yes, it provides a specific pattern and template for background image uploads to Cloudflare R2, preventing database bloat caused by large base64 strings.

Can I use this with shadcn/ui?

Yes, the skill includes a specific setup path for shadcn/ui and provides templates that integrate seamlessly with shadcn components and Tailwind v4.

Is Markdown supported by this Tiptap skill?

Yes, the skill includes patterns for the Tiptap Markdown extension, allowing you to store, insert, and export content in Markdown format.

Does it work with Tailwind v4?

Yes, all styling templates and prose configurations are optimized for Tailwind CSS v4 and include dark mode support.

Tiptap Rich Text Editor

Name: Tiptap Rich Text Editor
Author: jezweb

byjezweb

•

117

콘텐츠 관리

Builds high-performance, headless rich text editors with Tiptap, React, and Tailwind v4 integration.

소개

The Tiptap Rich Text Editor skill provides a comprehensive framework for implementing headless editors in React applications, featuring seamless integration with Tailwind v4 and shadcn/ui. It streamlines the development of complex editing interfaces by providing pre-configured extensions, SSR-safe rendering patterns, and robust image upload workflows to Cloudflare R2. Whether you are building a blog platform, a collaborative documentation tool, or a simple comment system, this skill automates the configuration of essential features like markdown support, real-time collaboration, and typography styling while proactively preventing common pitfalls like hydration mismatches.

주요 기능

SSR-safe configuration for Next.js and React 19+
Native Markdown support and content conversion
Real-time collaborative editing with Y.js integration
Optimized image upload handlers for Cloudflare R2
Built-in Tailwind v4 typography and prose styling
117 GitHub stars

사용 사례

Developing blog editors and CMS interfaces
Building collaborative documentation and Notion-like apps
Implementing rich text comment systems with image support

소개

주요 기능

SSR-safe configuration for Next.js and React 19+
Native Markdown support and content conversion
Real-time collaborative editing with Y.js integration
Optimized image upload handlers for Cloudflare R2
Built-in Tailwind v4 typography and prose styling
117 GitHub stars

사용 사례

Developing blog editors and CMS interfaces
Building collaborative documentation and Notion-like apps
Implementing rich text comment systems with image support