🖋️ React TipTap Editor IVR2

📝 Overview A modern, feature-rich WYSIWYG editor for React applications, built on top of TipTap and shadcn UI. Crafted with attention to detail by Indravardhan Reddy, this editor combines elegant design with powerful functionality.

Editor Preview

✨ Features 📝 Rich Text Editing - Format text with bold, italic, underline, strikethrough, and more 🔤 Typography Controls - Headings, paragraph styles, and flexible font options 📋 Lists & Tables - Ordered/unordered lists and comprehensive table support 🖼️ Media Embedding - Seamlessly insert images, attachments, videos, and other media 🔗 Link Management - Create, edit, and manage hyperlinks with rich preview 📐 Advanced Formatting - Code blocks with syntax highlighting, math formulas with KaTeX, and more 📊 Diagrams & Drawings - Support for Mermaid diagrams and Excalidraw sketches 📱 Responsive Design - Works flawlessly across desktop and mobile devices 🎨 Customizable - Easily theme to match your application's design 🧩 Extensible - Add your own custom extensions through the robust extension API 🔌 Modern Architecture - Built with React, TypeScript, and Tailwind CSS 🚀 Installation ::: Install with your favorite package manager :::

📖 Basic Usage 🛠️ Customization Options

1. Extensions Enhance your editor with various extensions:

2. Editor Options Configure editor behavior with the useEditorOptions property:

3. Accessing the Editor Instance Use useRef or useEditorState to interact with the editor:

📱 Available Extensions The editor comes with a rich set of extensions including:

Text formatting: Bold, Italic, Underline, Strike, etc. Block elements: Headings, Paragraphs, Blockquotes, etc. Lists: Bullet lists, Ordered lists, Task lists Media: Images, Attachments, Videos, Embeds Special elements: Tables, Code blocks, Math formulas Visual tools: Mermaid diagrams, Excalidraw drawings And many more! 🌐 Documentation For comprehensive documentation, visit our documentation site.

⚙️ Props Prop Type Required Description content string Yes Initial content for the editor output 'html' | 'json' Yes Output format for the content extensions Extension[] Yes Array of extensions to use onChangeContent (content: string) => void No Callback when content changes useEditorOptions UseEditorOptions No Options for the editor ref RefObject No Ref to access the editor instance 🤝 Contributing Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📜 License This project is MIT licensed.

👨‍💻 Author Indravardhan Reddy

Website: [Your website] GitHub: [@indravardhanreddy] 🙏 Acknowledgments Based on the amazing TipTap editor framework UI components from shadcn UI Thanks to all contributors who have helped make this project better! Made with ❤️ by Indravardhan Reddy

Similar code found with 2 license types - View matches