ExamplesBasicDisplaying Selected Blocks

Displaying Selected Blocks

In this example, the JSON representation of blocks spanned by the user's selection, is displayed below the editor.

Try it out: Select different blocks in the editor and see the JSON update!

Relevant Docs:

GitHub
StackBlitz
import { Block } from "@blocknote/core";import "@blocknote/core/fonts/inter.css";import { useCreateBlockNote } from "@blocknote/react";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import { useState } from "react";import "./styles.css";export default function App() {  // Stores the selected blocks as an array of Block objects.  const [blocks, setBlocks] = useState<Block[]>([]);  // Creates a new editor instance.  const editor = useCreateBlockNote({    initialContent: [      {        type: "paragraph",        content: "Welcome to this demo!",      },      {        type: "paragraph",        content: "Select different blocks to see the JSON change below",      },      {        type: "paragraph",      },    ],  });  // Renders the editor instance.  return (    <div className={"wrapper"}>      <div>BlockNote Editor:</div>      <div className={"item"}>        <BlockNoteView          editor={editor}          onSelectionChange={() => {            const selection = editor.getSelection();            // Get the blocks in the current selection and store on the state. If            // the selection is empty, store the block containing the text cursor            // instead.            if (selection !== undefined) {              setBlocks(selection.blocks);            } else {              setBlocks([editor.getTextCursorPosition().block]);            }          }}        />      </div>      <div>Selection JSON:</div>      <div className={"item bordered"}>        <pre>          <code>{JSON.stringify(blocks, null, 2)}</code>        </pre>      </div>    </div>  );}