Examples
Cursors & selections
Text Cursor Block

Highlighting Block with the Text Cursor

TODO: remove. I don't really see a scenario where this example makes sense in an application (selection related info should never be stored in the document; as this would also be saved in database, multiplayer, etc.)

Let's replace with an example similar to "basic/block-objects" that just outputs the relevant info

import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
import "@blocknote/react/style.css";
 
import "@blocknote/react/style.css";
import { useCallback } from "react";
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote();
 
  const onSelectionChange = useCallback(() => {
    // Gets the block currently hovered by the text cursor.
    const hoveredBlock = editor.getTextCursorPosition().block;
 
    // Traverses all blocks.
    editor.forEachBlock((block) => {
      if (
        block.id === hoveredBlock.id &&
        block.props.backgroundColor !== "blue"
      ) {
        // If the block is currently hovered by the text cursor, makes its
        // background blue if it isn't already.
        editor.updateBlock(block, {
          props: { backgroundColor: "blue" },
        });
      } else if (
        block.id !== hoveredBlock.id &&
        block.props.backgroundColor === "blue"
      ) {
        // If the block is not currently hovered by the text cursor, resets
        // its background if it's blue.
        editor.updateBlock(block, {
          props: { backgroundColor: "default" },
        });
      }
 
      return true;
    });
  }, [editor]);
 
  // Renders the editor instance.
  return (
    <BlockNoteView editor={editor} onSelectionChange={onSelectionChange} />
  );
}
Selection BlocksAlert Block