Mermaid
Mermaid is a node extension that allows you to add an Mermaid to your editor.
Usage
tsx
import { Mermaid } from 'reactjs-tiptap-editor/mermaid';
const extensions = [
...,
// Import Extensions Here
Mermaid.configure({
upload: (file: any) => {
// upload file to server return url
},
}),
];
Configuration bubble menu
tsx
import { BubbleMenuMermaid } from 'reactjs-tiptap-editor/bubble-extra';
const App = () => {
return <RichTextEditor
bubbleMenu={{
render({ extensionsNames, editor, disabled }, bubbleDefaultDom) {
return <>
{bubbleDefaultDom}
{extensionsNames.includes('mermaid') ? <BubbleMenuMermaid disabled={disabled}
editor={editor}
key="mermaid"
/> : null}
</>
},
}}
/>
}