Toggleable Custom Blocks

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",  },  {  type: "paragraph",  },  ],  });   // Renders the editor instance.  return <BlockNoteView editor={editor} />; } 

import { defaultProps } from "@blocknote/core"; import { createReactBlockSpec, ToggleWrapper } from "@blocknote/react";  // The Toggle block that we want to add to our editor. export const ToggleBlock = createReactBlockSpec(  {  type: "toggle",  propSchema: {  ...defaultProps,  },  content: "inline",  },  {  render: (props) => (  // The `ToggleWrapper` component renders a button on the left which  // toggles the visibility of the block's children. It also adds a button  // to add child blocks if there are none. By default, it uses local  // storage to remember the toggled state based on the block ID, but you can pass a custom  // `toggledState` prop to use a different storage mechanism.  <ToggleWrapper block={props.block} editor={props.editor}>  <p ref={props.contentRef} />  </ToggleWrapper>  ),  }, );