UNPKG

reactjs-tiptap-editor-ivr2

Version:

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

linkedin.com/in/indravardhanreddy

72 lines (59 loc) ā€¢ 2.93 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
šŸ–‹ļø 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