Refactored remaining uses of hooks with useEditorState where possible (excl. BlockTypeSelect)

matthewlipski · matthewlipski · commit 06fa6f70eb67 · 2025-11-03T13:33:23.000+01:00
diff --git a/packages/react/src/blocks/ToggleWrapper/ToggleWrapper.tsx b/packages/react/src/blocks/ToggleWrapper/ToggleWrapper.tsx
@@ -1,12 +1,13 @@
 import {
   Block,
+  blockHasType,
   defaultToggledState,
   UnreachableCaseError,
 } from "@blocknote/core";
-import { ReactNode, useReducer, useState } from "react";
+import { ReactNode, useReducer } from "react";
 
 import { ReactCustomBlockRenderProps } from "../../schema/ReactBlockSpec.js";
-import { useEditorChange } from "../../hooks/useEditorChange.js";
+import { useEditorState } from "../../hooks/useEditorState.js";
 
 const showChildrenReducer = (
   showChildren: boolean,
@@ -51,7 +52,6 @@ export const ToggleWrapper = (
     showChildrenReducer,
     (toggledState || defaultToggledState).get(block),
   );
-  const [childCount, setChildCount] = useState(block.children.length);
 
   const handleToggle = (block: Block<any, any, any>) => {
     (toggledState || defaultToggledState).set(
@@ -77,28 +77,34 @@ export const ToggleWrapper = (
     });
   };
 
-  useEditorChange(() => {
-    if ("isToggleable" in block.props && !block.props.isToggleable) {
-      return;
-    }
-
-    const newBlock = editor.getBlock(block)!;
-    const newChildCount = newBlock.children.length ?? 0;
-
-    if (newChildCount > childCount) {
-      // If a child block is added while children are hidden, show children.
-      if (!showChildren) {
-        handleChildAdded(newBlock);
+  const childCount = useEditorState({
+    editor,
+    selector: ({ editor }) => {
+      if (
+        !blockHasType(block, editor, block.type, { isToggleable: "boolean" }) &&
+        !block.props.isToggleable
+      ) {
+        return 0;
       }
-    } else if (newChildCount === 0 && newChildCount < childCount) {
-      // If the last child block is removed while children are shown, hide
-      // children.
-      if (showChildren) {
-        handleLastChildRemoved(newBlock);
+
+      const newBlock = editor.getBlock(block)!;
+      const newChildCount = newBlock.children.length || 0;
+
+      if (newChildCount > childCount) {
+        // If a child block is added while children are hidden, show children.
+        if (!showChildren) {
+          handleChildAdded(newBlock);
+        }
+      } else if (newChildCount === 0 && newChildCount < childCount) {
+        // If the last child block is removed while children are shown, hide
+        // children.
+        if (showChildren) {
+          handleLastChildRemoved(newBlock);
+        }
       }
-    }
 
-    setChildCount(newChildCount);
+      return newChildCount;
+    },
   });
 
   if ("isToggleable" in block.props && !block.props.isToggleable) {
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDeleteButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDeleteButton.tsx
@@ -4,7 +4,7 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import { useCallback, useMemo } from "react";
+import { useCallback } from "react";
 import { RiDeleteBin7Line } from "react-icons/ri";
 
 import { useComponentsContext } from "../../../editor/ComponentsContext.js";
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FilePreviewButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FilePreviewButton.tsx
@@ -5,7 +5,7 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import { useCallback, useMemo } from "react";
+import { useCallback } from "react";
 import { RiImageAddFill } from "react-icons/ri";
 
 import { useComponentsContext } from "../../../editor/ComponentsContext.js";
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx
@@ -5,13 +5,7 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import {
-  ChangeEvent,
-  KeyboardEvent,
-  useCallback,
-  useMemo,
-  useState,
-} from "react";
+import { ChangeEvent, KeyboardEvent, useCallback, useState } from "react";
 import { RiFontFamily } from "react-icons/ri";
 
 import { useComponentsContext } from "../../../editor/ComponentsContext.js";
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx
@@ -9,7 +9,7 @@ import {
   StyleSchema,
   TableContent,
 } from "@blocknote/core";
-import { useCallback, useMemo } from "react";
+import { useCallback } from "react";
 import { IconType } from "react-icons";
 import {
   RiAlignCenter,
@@ -20,7 +20,7 @@ import {
 
 import { useComponentsContext } from "../../../editor/ComponentsContext.js";
 import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor.js";
-import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks.js";
+import { useEditorState } from "../../../hooks/useEditorState.js";
 import { useDictionary } from "../../../i18n/dictionary.js";
 
 type TextAlignment = DefaultProps["textAlignment"];
@@ -42,44 +42,60 @@ export const TextAlignButton = (props: { textAlignment: TextAlignment }) => {
     StyleSchema
   >();
 
-  const selectedBlocks = useSelectedBlocks(editor);
-
-  const textAlignment = useMemo(() => {
-    const block = selectedBlocks[0];
-
-    if (
-      blockHasType(block, editor, block.type, {
-        textAlignment: defaultProps.textAlignment,
-      })
-    ) {
-      return block.props.textAlignment;
-    }
-    if (block.type === "table") {
-      const cellSelection = editor.tableHandles?.getCellSelection();
-      if (!cellSelection) {
-        return;
+  const state = useEditorState({
+    editor,
+    selector: ({ editor }) => {
+      if (!editor.isEditable) {
+        return undefined;
       }
-      const allCellsInTable = cellSelection.cells.map(
-        ({ row, col }) =>
-          mapTableCell(
-            (block.content as TableContent<any, any>).rows[row].cells[col],
-          ).props.textAlignment,
-      );
-      const firstAlignment = allCellsInTable[0];
 
-      if (allCellsInTable.every((alignment) => alignment === firstAlignment)) {
-        return firstAlignment;
+      const selectedBlocks = editor.getSelection()?.blocks || [
+        editor.getTextCursorPosition().block,
+      ];
+
+      const firstBlock = selectedBlocks[0];
+
+      if (
+        blockHasType(firstBlock, editor, firstBlock.type, {
+          textAlignment: defaultProps.textAlignment,
+        })
+      ) {
+        return {
+          textAlignment: firstBlock.props.textAlignment,
+          blocks: selectedBlocks,
+        };
+      }
+
+      if (
+        selectedBlocks.length === 1 &&
+        blockHasType(firstBlock, editor, "table")
+      ) {
+        const cellSelection = editor.tableHandles?.getCellSelection();
+        if (!cellSelection) {
+          return undefined;
+        }
+
+        return {
+          textAlignment: mapTableCell(
+            (firstBlock.content as TableContent<any, any>).rows[0].cells[0],
+          ).props.textAlignment,
+          blocks: [firstBlock],
+        };
       }
-    }
 
-    return;
-  }, [editor, selectedBlocks]);
+      return undefined;
+    },
+  });
 
   const setTextAlignment = useCallback(
     (textAlignment: TextAlignment) => {
+      if (state === undefined) {
+        return;
+      }
+
       editor.focus();
 
-      for (const block of selectedBlocks) {
+      for (const block of state.blocks) {
         if (
           blockHasType(block, editor, block.type, {
             textAlignment: defaultProps.textAlignment,
@@ -128,20 +144,10 @@ export const TextAlignButton = (props: { textAlignment: TextAlignment }) => {
         }
       }
     },
-    [editor, selectedBlocks],
+    [editor, state],
   );
 
-  const show = useMemo(() => {
-    return !!selectedBlocks.find(
-      (block) =>
-        blockHasType(block, editor, block.type, {
-          textAlignment: defaultProps.textAlignment,
-        }) ||
-        (block.type === "table" && block.children),
-    );
-  }, [editor, selectedBlocks]);
-
-  if (!show || !editor.isEditable) {
+  if (state === undefined) {
     return null;
   }
 
@@ -154,7 +160,7 @@ export const TextAlignButton = (props: { textAlignment: TextAlignment }) => {
         props.textAlignment.slice(1)
       }`}
       onClick={() => setTextAlignment(props.textAlignment)}
-      isSelected={textAlignment === props.textAlignment}
+      isSelected={state.textAlignment === props.textAlignment}
       label={dict.formatting_toolbar[`align_${props.textAlignment}`].tooltip}
       mainTooltip={
         dict.formatting_toolbar[`align_${props.textAlignment}`].tooltip
diff --git a/packages/react/src/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx b/packages/react/src/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx
@@ -28,7 +28,7 @@ import {
 } from "../../../editor/ComponentsContext.js";
 import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor.js";
 import { useEditorContentOrSelectionChange } from "../../../hooks/useEditorContentOrSelectionChange.js";
-import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks.js";
+import { useEditorState } from "../../../hooks/useEditorState.js";
 import { useDictionary } from "../../../i18n/dictionary.js";
 
 export type BlockTypeSelectItem = {
@@ -188,7 +188,11 @@ export const BlockTypeSelect = (props: { items?: BlockTypeSelectItem[] }) => {
     StyleSchema
   >();
 
-  const selectedBlocks = useSelectedBlocks(editor);
+  const selectedBlocks = useEditorState({
+    editor,
+    selector: ({ editor }) =>
+      editor.getSelection()?.blocks || [editor.getTextCursorPosition().block],
+  });
 
   const [block, setBlock] = useState(editor.getTextCursorPosition().block);
 
diff --git a/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
@@ -1,15 +1,17 @@
 import {
+  blockHasType,
   BlockSchema,
+  defaultProps,
   DefaultProps,
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
 import { UseFloatingOptions, flip, offset, shift } from "@floating-ui/react";
 import { isEventTargetWithin } from "@floating-ui/react/utils";
-import { FC, useMemo, useRef, useState } from "react";
+import { FC, useMemo, useRef } from "react";
 
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
-import { useEditorContentOrSelectionChange } from "../../hooks/useEditorContentOrSelectionChange.js";
+import { useEditorState } from "../../hooks/useEditorState.js";
 import { useUIElementPositioning } from "../../hooks/useUIElementPositioning.js";
 import { useUIPluginState } from "../../hooks/useUIPluginState.js";
 import { mergeRefs } from "../../util/mergeRefs.js";
@@ -43,33 +45,22 @@ export const FormattingToolbarController = (props: {
     StyleSchema
   >();
 
-  const [placement, setPlacement] = useState<"top-start" | "top" | "top-end">(
-    () => {
+  const placement = useEditorState({
+    editor,
+    selector: ({ editor }) => {
       const block = editor.getTextCursorPosition().block;
 
-      if (!("textAlignment" in block.props)) {
+      if (
+        !blockHasType(block, editor, block.type, {
+          textAlignment: defaultProps.textAlignment,
+        })
+      ) {
         return "top-start";
+      } else {
+        return textAlignmentToPlacement(block.props.textAlignment);
       }
-
-      return textAlignmentToPlacement(
-        block.props.textAlignment as DefaultProps["textAlignment"],
-      );
     },
-  );
-
-  useEditorContentOrSelectionChange(() => {
-    const block = editor.getTextCursorPosition().block;
-
-    if (!("textAlignment" in block.props)) {
-      setPlacement("top-start");
-    } else {
-      setPlacement(
-        textAlignmentToPlacement(
-          block.props.textAlignment as DefaultProps["textAlignment"],
-        ),
-      );
-    }
-  }, editor);
+  });
 
   // TODO refactor this to actually use the new extension & a hook for positioning to a selection
 
