Code block for Blocknote

Code block for Blocknote.

Demo

A demo is worth a thousand words

Installation

Install via YARN

Get the package

$ yarn add @defensestation/blocknote-code

Usage

Include module at your application

import { CodeBlock, insertCode } from "@defensestation/blocknote-code";

Create schema with code block.

const schema = BlockNoteSchema.create({
   blockSpecs: {
    ...defaultBlockSpecs,
    procode: CodeBlock,
  },
});

Add slash menu item.

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