Shadcn Minimal Tiptap

Minimal Tiptap Editor: Enhanced Rich Text for Shadcn UI & React

The Minimal Tiptap Editor is a lean, adaptable rich text editing component crafted for smooth integration with Shadcn UI. It empowers developers with an intuitive interface for comprehensive text formatting and advanced editing functionalities, while maintaining high performance. This tool simplifies embedding rich text capabilities into React applications, enhancing content creation workflows for developers seeking efficient and powerful editing solutions.

Features:

• Lightweight Design: A minimal yet powerful rich text editor focused on performance.
• Shadcn UI Compatibility: Specifically designed for seamless integration with the Shadcn UI ecosystem.
• Intuitive Editing Experience: Provides a user-friendly interface for common text formatting tasks.
• Performance Optimization: Includes configurable re-rendering (shouldRerenderOnTransaction) for optimal speed.
• Automatic Formatting Removal: Cleans formatting styles when users press Enter or create new content blocks.
• Comprehensive Image Handling: Supports image uploads, configurable MIME types, maximum file sizes, and custom upload functions (uploadFn).
• Base64 Image Fallback: Allows allowBase64 for images if a custom upload function is not provided.
• Image Action Callbacks: Offers onActionSuccess, onActionError, and onImageRemove for managing image events.
• Image Validation Handling: Provides onValidationError for addressing image validation issues.
• Customizable Toolbar: Allows flexible configuration of toolbar sections (e.g., SectionOne, SectionTwo) and their respective actions.
• Multiple Output Formats: Supports content output as 'html', 'json', or 'text'.
• Editor Placeholder: Customizable placeholder text for the editing area.
• Editor State Control: Includes props for autofocus and editable states.
• Extensible Core: Built upon Tiptap and its extensions like CodeBlockLowlight, Color, Heading, Image, Link, and Typography.
• Tailwind 4 & React 19 Branch: An experimental branch is available for users migrating to Tailwind CSS v4 and React 19.

Summary:

The Minimal Tiptap Editor offers a robust and performant solution for integrating rich text editing into React applications, particularly those leveraging Shadcn UI. It balances a minimal footprint with essential features like advanced image handling, a customizable toolbar, and multiple output formats. This makes it an excellent choice for developers needing an efficient and adaptable editor for content creation and management within modern web projects.