Drawing Canvas for Blocknote

Code block for Blocknote.

Installation

Install via YARN

Get the package

$ yarn add blocknote-draw

Usage

Include module at your application

import { Draw, insertDraw } from "blocknote-draw";

Create schema with code block.

const schema = BlockNoteSchema.create({
  blockSpecs: {
    ...defaultBlockSpecs,
    draw: Draw,
  },
});

Add slash menu item.

<BlockNoteView editor={editor} slashMenu={false}>
  <SuggestionMenuController
    triggerCharacter={"/"}
    getItems={async (query) =>
      filterSuggestionItems(
        [...getDefaultReactSlashMenuItems(editor), insertDraw()],
        query
      )
    }
  />
</BlockNoteView>