reactjs-tiptap-editor
A modern WYSIWYG rich text editor based on tiptap and shadcn ui for Reactjs
Learn to manage TipTap editor state in React using Context. Access and control your editor instance easily with the useEditorInstance hook, avoiding prop-drilling.
How to Add Custom Keyboard Shortcuts for Tiptap Editor ActionsLearn how to add custom keyboard shortcuts for Tiptap editor actions using shortcutKeys and addKeyboardShortcuts in your extension configuration for seamless editing.
How to Implement Search and Replace Functionality in Tiptap EditorLearn to implement search and replace in Tiptap editor using the hunghg255/reactjs-tiptap-editor repository. This guide details its ProseMirror plugin, storage system, and React UI for a seamless experience.
How to Customize the Editor Theme and Dark Mode Using Shadcn UI in Reactjs-Tiptap-EditorCustomize your reactjs-tiptap-editor theme and dark mode with Shadcn UI. Learn how to update CSS custom properties using themeActions for a personalized look.
How to Add File Attachment Handling to Tiptap Editor: A Complete GuideLearn to add file attachment handling to your Tiptap editor with our guide. Utilize the built-in Attachment extension for streamlined uploads and styled nodes.
How to Configure Table Features (Merge Cells & Resize Columns) in reactjs-tiptap-editorLearn to merge cells and resize columns in reactjs-tiptap-editor. This guide shows how to enable table features and efficiently manage table content with simple code.
How to Add Callout/Note Boxes with Different Types in Tiptap: Complete Implementation GuideLearn to add callout note boxes in Tiptap easily. This guide covers implementation with different types using the built-in Callout extension and RichTextCallout component.
How to Create Collapsible Drawer/Accordion Blocks in ReactJS Tiptap EditorLearn how to build collapsible drawer and accordion blocks in ReactJS Tiptap Editor. Extend the Drawer node and add a toggle command for interactive content.
How to Add Custom Emoji Picker Support to Tiptap Editor in ReactLearn how to add custom emoji picker support to your Tiptap editor in React. Replace the default picker with your own React component to insert emojis seamlessly. Explore the example repository for guidance.
How to Implement @Mentions with Custom User Lists in the React Tiptap EditorLearn to add custom @mentions to your React Tiptap editor. Configure the Mention extension with a suggestion object and filter users from your list for a seamless experience.
How to Embed Twitter/X Tweets in Editor Content with reactjs-tiptap-editorEasily embed Twitter X tweets in your editor content using reactjs-tiptap-editor. Learn how the Twitter extension converts URLs and renders tweets with react-tweet.
How to Render LaTeX/KaTeX Math Equations in Tiptap: A Complete GuideLearn to render LaTeX KaTeX math equations in Tiptap with our complete guide. Discover client-side solutions for Tiptap using custom node views and real-time previews.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" 
Maintain an open-source project? Get it listed too →