fix(react): update latest-ref callbacks at layout-effect timing

Review finding: the refs behind useEditorChange, useEditorSelectionChange
and useEditorFocusChange were updated in a passive effect, so a layout
effect firing an editor event right after commit could still reach the
previous render's callback. The refs now update in an isomorphic layout
effect — extracted from useEditorState, which already had the SSR-safe
variant inline.

Author: YousefED

packages/react/src/hooks/useEditorChange.ts

@@ -1,5 +1,6 @@
 import type { BlockNoteEditor } from "@blocknote/core";
 import { useEffect, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../util/useIsomorphicLayoutEffect.js";
 import { useBlockNoteContext } from "../editor/BlockNoteContext.js";
 
 /**
@@ -23,7 +24,10 @@ export function useEditorChange(
   // Latest-ref pattern: the subscription lives as long as the editor does,
   // while the callback stays current without resubscribing on re-renders.
   const callbackRef = useRef(callback);
-  useEffect(() => {
+  // Layout-effect timing, not passive: a layout effect elsewhere can
+  // trigger an editor event right after commit, and the subscription must
+  // not invoke the previous render's callback then.
+  useIsomorphicLayoutEffect(() => {
     callbackRef.current = callback;
   });
 

packages/react/src/hooks/useEditorFocusChange.ts

@@ -1,5 +1,6 @@
 import type { BlockNoteEditor } from "@blocknote/core";
 import { useEffect, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../util/useIsomorphicLayoutEffect.js";
 import { useBlockNoteContext } from "../editor/BlockNoteContext.js";
 
 /**
@@ -29,7 +30,10 @@ export function useEditorFocusChange(
   // Latest-ref pattern: the subscription lives as long as the editor does,
   // while the callback stays current without retriggering the effect.
   const callbackRef = useRef(callback);
-  useEffect(() => {
+  // Layout-effect timing, not passive: a layout effect elsewhere can
+  // trigger an editor event right after commit, and the subscription must
+  // not invoke the previous render's callback then.
+  useIsomorphicLayoutEffect(() => {
     callbackRef.current = callback;
   });
 

packages/react/src/hooks/useEditorSelectionChange.ts

@@ -1,5 +1,6 @@
 import type { BlockNoteEditor } from "@blocknote/core";
 import { useEffect, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../util/useIsomorphicLayoutEffect.js";
 import { useBlockNoteContext } from "../editor/BlockNoteContext.js";
 
 /**
@@ -26,7 +27,10 @@ export function useEditorSelectionChange(
   // Latest-ref pattern: the subscription lives as long as the editor does,
   // while the callback stays current without resubscribing on re-renders.
   const callbackRef = useRef(callback);
-  useEffect(() => {
+  // Layout-effect timing, not passive: a layout effect elsewhere can
+  // trigger an editor event right after commit, and the subscription must
+  // not invoke the previous render's callback then.
+  useIsomorphicLayoutEffect(() => {
     callbackRef.current = callback;
   });
 

packages/react/src/hooks/useEditorState.ts

@@ -1,11 +1,9 @@
 import type { BlockNoteEditor } from "@blocknote/core";
 import deepEqual from "fast-deep-equal/es6/react.js";
-import { useDebugValue, useEffect, useLayoutEffect, useState } from "react";
+import { useDebugValue, useState } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 import { useBlockNoteContext } from "../editor/BlockNoteContext.js";
-
-const useIsomorphicLayoutEffect =
-  typeof window !== "undefined" ? useLayoutEffect : useEffect;
+import { useIsomorphicLayoutEffect } from "../util/useIsomorphicLayoutEffect.js";
 
 export type EditorStateSnapshot<
   TEditor extends BlockNoteEditor<any, any, any> | null = BlockNoteEditor<

packages/react/src/util/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,12 @@
+import { useEffect, useLayoutEffect } from "react";
+
+/**
+ * `useLayoutEffect` in the browser, `useEffect` under SSR — where
+ * `useLayoutEffect` cannot run and React warns.
+ *
+ * Used for latest-ref updates: the ref must be current before any layout
+ * effect can trigger an editor event, or a subscription could still invoke
+ * the previous render's callback.
+ */
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;