Mermaid

Mermaid is a node extension that allows you to add an Mermaid to your editor.

• Mermaid

Usage

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

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

Source • Docs

Contributors

Hung Hoang

Changelog

v0.2.6 on 3/21/2025

b4914 - feat: extention draw