Mui Tiptap
A Material UI (MUI) styled WYSIWYG rich text editor, using Tiptap
Overview
The mui-tiptap is a rich text editor component built on powerful Tiptap and ProseMirror foundations. It allows for easy customization and styling based on your own MUI theme, making it suitable for various applications. With its extensive set of features and modular components, mui-tiptap provides a convenient solution for implementing rich text editing capabilities.
Features
- Styled based on your own MUI theme: Customize the colors, fonts, light vs dark mode, and more to match your own visual identity.
- Built on powerful Tiptap and ProseMirror foundations: Utilize the extensibility and real-time collaborative editing capabilities of Tiptap and ProseMirror.
- An all-in-one RichTextEditor component: Start using the editor immediately without the need for additional components or hooks.
- Built-in styles for Tiptap's extensions: Benefit from pre-defined styles for text formatting, lists, tables, collaboration cursors, and more.
- Composable and extendable menu buttons and controls: Customize and extend the standard Tiptap extensions with modular menu buttons and controls.
- ResizableImage extension: Easily add and resize images directly in the editor.
- HeadingWithAnchor extension: Create dynamic GitHub-like anchor links for each heading added.
- LinkBubbleMenu: Simplify adding and editing links with a built-in menu.
- FontSize extension: Control the size of the text within the editor.
- TableImproved extension: Resolve issues in the underlying Tiptap Table extension for better table editing.
- TableBubbleMenu: Interactively edit rich text tables with a dedicated menu.
- General-purpose ControlledBubbleMenu: Build your own custom menus to suit your specific requirements.
- And more!
Summary
mui-tiptap is a feature-rich and customizable rich text editor component built on the Tiptap and ProseMirror frameworks. It offers a wide range of extensions and modular components, making it easy to integrate and tailor to your specific needs. With support for custom styling based on your MUI theme, mui-tiptap provides a convenient solution for implementing rich text editing functionality in your applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Material UI
material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.