Toggleable Custom Blocks

This example shows how to create custom blocks with a toggle button to show/hide their children, like with the default toggle heading and list item blocks. This is done by setting meta.collapsible on the block spec, which CollapsibleExtension picks up.

Relevant Docs:

GitHub

StackBlitz

import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core";
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";

import { ToggleBlock } from "./Toggle";

// Our schema with block specs, which contain the configs and implementations for
// blocks that we want our editor to use.
const schema = BlockNoteSchema.create({
  blockSpecs: {
    // Adds all default blocks.
    ...defaultBlockSpecs,
    // Adds the Toggle block.
    toggle: ToggleBlock(),
  },
});

export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    schema,
    initialContent: [
      {
        type: "paragraph",
        content: "Welcome to this demo!",
      },
      {
        // We set a persistent ID so that the toggled state is preserved
        // on reload.
        id: "toggle",
        type: "toggle",
        content: "This is an example toggle",
        children: [
          {
            type: "paragraph",
            content: "This is the first child of the toggle block.",
          },
          {
            type: "paragraph",
            content: "This is the second child of the toggle block.",
          },
        ],
      },
      {
        type: "paragraph",
        content: "Click the '>' icon to show/hide its children",
      },
    ],
  });

  // Renders the editor instance.
  return <BlockNoteView editor={editor} />;
}

import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core";import "@blocknote/core/fonts/inter.css";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import { useCreateBlockNote } from "@blocknote/react";import { ToggleBlock } from "./Toggle";// Our schema with block specs, which contain the configs and implementations for// blocks that we want our editor to use.const schema = BlockNoteSchema.create({  blockSpecs: {    // Adds all default blocks.    ...defaultBlockSpecs,    // Adds the Toggle block.    toggle: ToggleBlock(),  },});export default function App() {  // Creates a new editor instance.  const editor = useCreateBlockNote({    schema,    initialContent: [      {        type: "paragraph",        content: "Welcome to this demo!",      },      {        // We set a persistent ID so that the toggled state is preserved        // on reload.        id: "toggle",        type: "toggle",        content: "This is an example toggle",        children: [          {            type: "paragraph",            content: "This is the first child of the toggle block.",          },          {            type: "paragraph",            content: "This is the second child of the toggle block.",          },        ],      },      {        type: "paragraph",        content: "Click the '>' icon to show/hide its children",      },    ],  });  // Renders the editor instance.  return <BlockNoteView editor={editor} />;}

import { defaultProps } from "@blocknote/core";
import { createReactBlockSpec } from "@blocknote/react";

// The Toggle block that we want to add to our editor.
export const ToggleBlock = createReactBlockSpec(
  {
    type: "toggle",
    propSchema: {
      ...defaultProps,
    },
    content: "inline",
  },
  {
    // `meta.collapsible` is all it takes: `CollapsibleExtension` adds the
    // chevron that hides the block's children, and remembers the state per
    // block ID in local storage.
    meta: {
      collapsible: true,
    },
    render: (props) => <p ref={props.contentRef} />,
  },
);

import { defaultProps } from "@blocknote/core";import { createReactBlockSpec } from "@blocknote/react";// The Toggle block that we want to add to our editor.export const ToggleBlock = createReactBlockSpec(  {    type: "toggle",    propSchema: {      ...defaultProps,    },    content: "inline",  },  {    // `meta.collapsible` is all it takes: `CollapsibleExtension` adds the    // chevron that hides the block's children, and remembers the state per    // block ID in local storage.    meta: {      collapsible: true,    },    render: (props) => <p ref={props.contentRef} />,  },);

/// <reference types="vite-plus/client" />

/// <reference types="vite-plus/client" />

Toggleable Custom Blocks

Learn

Collaborate

Community

Legal & Theme