Skip to content

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}
        </>
      },
    }}
  />
}

Source

SourceDocs

Contributors

Changelog

v0.2.6 on 3/21/2025
b4914 - feat: extention draw
v0.0.56 on 10/25/2024
fcd95 - feat: image inline, refactor video upload
v0.0.51 on 10/20/2024
48ed5 - feat: add extension mermaid

Made with ❤️