Features:

• :toolbox: An all-in-one RichTextEditor component to get started immediately (no other components or hooks needed!), or individual modular components to customize to your needs
• :sunglasses: Built-in styles for Tiptap’s extensions (text formatting, lists, tables, Google Docs-like collaboration cursors; you name it!)
• :arrow_forward: Composable and extendable menu buttons and controls for the standard Tiptap extensions
• :framed_picture: ResizableImage extension for adding and resizing images directly in the editor
• :anchor: HeadingWithAnchor extension for dynamic GitHub-like anchor links for every heading you add
• :link: LinkBubbleMenu so adding and editing links is a breeze
• :1234: FontSize extension for controlling text sizes
• :white_square_button: TableImproved extension that fixes problems in the underlying Tiptap Table extension
• :pencil: TableBubbleMenu for interactively editing your rich text tables
• :speech_balloon: General-purpose ControlledBubbleMenu for building your own custom menus, solving some shortcomings of the Tiptap BubbleMenu
• And more!

• Demo
• Installation
• Get started
  • Use the all-in-one component
  • Create and provide the editor yourself
  • Render read-only rich text content
• tiptap-mui-editor extensions and components
  • Tiptap extensions
    • HeadingWithAnchor
    • FontSize
    • LinkBubbleMenuHandler
    • ResizableImage
    • TableImproved
  • Components
    • Controls components
• Localization
• Tips and suggestions
  • Choosing your editor extensions
    • Extension precedence and ordering
    • Other extension tips
  • Drag-and-drop and paste for images
  • Re-rendering RichTextEditor when content changes
• Contributing

Demo

Try it yourself in this CodeSandbox live demo!

Installation

npm install tiptap-mui-editor

or

yarn add tiptap-mui-editor

There are peer dependencies on @mui/material and @mui/icons-material (and their @emotion/ peers), and @tiptap/ packages. These should be installed automatically by default if you’re using npm 7+ or pnpm. Otherwise, if your project doesn’t already use those, you can install them with:

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled @tiptap/react @tiptap/extension-heading @tiptap/extension-image @tiptap/extension-table @tiptap/pm @tiptap/core

or

yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled @tiptap/react @tiptap/extension-heading @tiptap/extension-image @tiptap/extension-table @tiptap/pm @tiptap/core
``` -->