ExamplesCustom SchemasConfiguring Default Blocks

Configuring Default Blocks

This example shows how you can configure the editor's default blocks. Specifically, heading blocks are made to only support levels 1-3, and cannot be toggleable.

Relevant Docs:

import { BlockNoteSchema, createHeadingBlockSpec } from "@blocknote/core";import "@blocknote/core/fonts/inter.css";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import { useCreateBlockNote } from "@blocknote/react";export default function App() {  // Creates a new editor instance.  const editor = useCreateBlockNote({    // Creates a default schema and extends it with a configured heading block.    schema: BlockNoteSchema.create().extend({      blockSpecs: {        heading: createHeadingBlockSpec({          // Disables toggleable headings.          allowToggleHeadings: false,          // Sets the allowed heading levels.          levels: [1, 2, 3],        }),      },    }),    initialContent: [      {        type: "paragraph",        content: "Welcome to this demo!",      },      {        type: "paragraph",        content: "Press the '/' key to open the Slash Menu",      },      {        type: "paragraph",        content:          "Notice how only heading levels 1-3 are available, and toggle headings are not shown.",      },      {        type: "paragraph",      },    ],  });  // Renders the editor instance using a React component.  return <BlockNoteView editor={editor} />;}