Drawer

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

• Drawer

Usage

import { Drawer } from 'reactjs-tiptap-editor/drawer'; 
import 'easydrawer/styles.css'; 

const extensions = [
  ...,
  // Import Extensions Here
  Drawer.configure({
    upload: (file: any) => {
      // upload file to server return url
    },
  }),
];

Configuration bubble menu

import { BubbleMenuDrawer } from 'reactjs-tiptap-editor/bubble-extra'; 

const App = () => {

  return  <RichTextEditor
    bubbleMenu={{
      render({ extensionsNames, editor, disabled }, bubbleDefaultDom) {
        return <>
          {bubbleDefaultDom}

          {extensionsNames.includes('drawer')  ? <BubbleMenuDrawer disabled={disabled}
            editor={editor}
            key="drawer"
          /> : null}
        </>
      },
    }}
  />
}

Source

Source • Docs

Contributors

Hung Hoang

Changelog

v0.2.6 on 3/21/2025

b4914 - feat: extention draw