mui-tiptap-editor: A customizable and easy to use Tiptap styled WYSIWYG rich text editor, using Material UI.
Try it yourself in this CodeSandbox live demo or see the Demo video
npm install mui-tiptap-editor
or
yarn add mui-tiptap-editor
Please note that @mui/material
(and their @emotion/
peers) are peer dependencies, meaning you should ensure they are installed before installing mui-tiptap-editor
.
npm install @mui/material @emotion/react @emotion/styled
or
yarn add @mui/material @emotion/react @emotion/styled
import { TextEditor, TextEditorReadOnly } from 'mui-tiptap-editor';
import { useState } from "react";
function App() {
const [value, setValue] = useState<string>("");
const handleChange = (newValue: string) => setValue(newValue);
return (
<div>
<TextEditor value={value} onChange={handleChange} />
{value && <TextEditorReadOnly value={value} />}
</div>
);
}
import { TextEditor, ITextEditorOption } from 'mui-tiptap-editor';
const mentions: ITextEditorOption[] = [
{ label: "Lea Thompson", value: "id1" },
{ label: "Cyndi Lauper", value: "id2" },
{ label: "Tom Cruise", value: "id13" },
];
const currentUser: ITextEditorOption = mentions[0];
function App() {
return (
<TextEditor mentions={mentions} user={currentUser} userPathname="/profile" />
);
}
See example/App.tsx
for a more thorough example of using TextEditor
.
Can display the menus as needed
<TextEditor toolbar={['bold', 'italic', 'underline']} />
import './index.css';
import { TextEditor } from 'mui-tiptap-editor';
function App () {
return (
<TextEditor
value="<p>Hello word!</p>"
rootClassName="root"
/>
)
}
/* ./index.css */
.root {
background-color: #fff;
}
.root .MuiTab-root.Mui-selected {
background-color: yellow !important;
}
import './index.css';
import { TextEditor } from 'mui-tiptap-editor';
function App () {
return (
<TextEditor
value="<p>Hello word!</p>"
label="Content"
tabClassName="my-tab"
labelClassName="my-label"
inputClassName="my-input"
toolbarClassName="my-toolbar"
/>
)
}
/* ./index.css */
.my-tab.MuiTab-root.Mui-selected {
background-color: pink !important;
}
.my-label {
color: blue !important;
}
.my-input {
border: 1px solid green;
}
.my-toolbar {
background-color: yellow;
}
props | type | Default value | Description |
---|---|---|---|
toolbar | string[] |
heading, bold, italic, strike, link, underline, image, code, orderedList, bulletList, align, codeBlock, blockquote, table, history, youtube, color, mention | The list of the menu buttons to be displayed |
placeholder | string |
empty | input placeholder |
label | string |
empty | input label |
error | string |
empty | Error message to display |
withFloatingMenu | boolean |
false | Show or hide the floating menu |
withBubbleMenu | boolean |
true | Show or hide the bubble menu |
inputClassName | string |
empty | Override input styles |
toolbarClassName | string |
empty | Override the toolbar menu styles |
tabsClassName | string |
empty | Override the tabs (preview , editor ) styles |
tabClassName | string |
empty | Override the tab (preview or editor ) styles |
errorClassName | string |
empty | Override the error message styles |
rootClassName | string |
empty | Override the main container styles |
labelClassName | string |
empty | Override the label styles |
bubbleMenuToolbar | string[] |
['bold', 'italic', 'underline', 'link'] |
Similar to toolbar props |
floatingMenuToolbar | string[] |
['bold', 'italic', 'underline', 'link'] |
Similar to toolbar props |
mentions | ITextEditorOption[] |
undefined | List of users to be mentioned when entering or selecting @ |
user | ITextEditorOption |
undefined | Current user |
value | string |
empty | Value of the input |
onChange | (value: string) => void |
- | Function to call when the input change |
userPathname | boolean |
/user | URL pathname for the mentioned user (eg: /user/user_id) |
...all tiptap features | EditorOptions | empty | Can access to all tiptap useEditor props |
Get started here.