advanced-editor-react/README.md

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React

🖋️ 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: [https://www.linkedin.com/in/indravardhanreddy/]
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