From d004ae25dd3b0fde72a06ae29859dd7d271c3047 Mon Sep 17 00:00:00 2001 From: Dan Levy Date: Mon, 7 Jul 2025 12:49:01 -0600 Subject: [PATCH] refactor: optimize context value creation and useCallback in hooks --- packages/react/src/editor/BlockNoteView.tsx | 35 ++++++++++++------- packages/react/src/hooks/useActiveStyles.ts | 14 ++++---- packages/react/src/hooks/useSelectedBlocks.ts | 8 +++-- 3 files changed, 34 insertions(+), 23 deletions(-) diff --git a/packages/react/src/editor/BlockNoteView.tsx b/packages/react/src/editor/BlockNoteView.tsx index 8fba028132..0bb159ae4e 100644 --- a/packages/react/src/editor/BlockNoteView.tsx +++ b/packages/react/src/editor/BlockNoteView.tsx @@ -152,7 +152,26 @@ function BlockNoteViewComponent< // We set defaultUIProps and editorProps on a different context, the BlockNoteViewContext. // This BlockNoteViewContext is used to render the editor and the default UI. - const defaultUIProps = { + const blockNoteViewContextValue = useMemo(() => { + return { + editorProps: { + autoFocus, + contentEditableProps, + }, + defaultUIProps: { + formattingToolbar, + linkToolbar, + slashMenu, + emojiPicker, + sideMenu, + filePanel, + tableHandles, + comments, + }, + }; + }, [ + autoFocus, + contentEditableProps, formattingToolbar, linkToolbar, slashMenu, @@ -161,21 +180,11 @@ function BlockNoteViewComponent< filePanel, tableHandles, comments, - }; - - const editorProps = { - autoFocus, - contentEditableProps, - }; + ]); return ( - + ( const [styles, setStyles] = useState(() => e.getActiveStyles()); - // Updates state on editor content change. - useEditorChange(() => { + const updateStyles = useCallback(() => { setStyles(e.getActiveStyles()); - }, e); + }, [e]); + + // Updates state on editor content change. + useEditorChange(updateStyles, e); // Updates state on selection change. - useEditorSelectionChange(() => { - setStyles(e.getActiveStyles()); - }, e); + useEditorSelectionChange(updateStyles, e); return styles; } diff --git a/packages/react/src/hooks/useSelectedBlocks.ts b/packages/react/src/hooks/useSelectedBlocks.ts index 3d26523255..85b4ddfcfd 100644 --- a/packages/react/src/hooks/useSelectedBlocks.ts +++ b/packages/react/src/hooks/useSelectedBlocks.ts @@ -5,7 +5,7 @@ import { InlineContentSchema, StyleSchema, } from "@blocknote/core"; -import { useState } from "react"; +import { useCallback, useState } from "react"; import { useBlockNoteContext } from "../editor/BlockNoteContext.js"; import { useEditorContentOrSelectionChange } from "./useEditorContentOrSelectionChange.js"; @@ -31,13 +31,15 @@ export function useSelectedBlocks< Block[] >(() => e.getSelection()?.blocks || [e.getTextCursorPosition().block]); - useEditorContentOrSelectionChange( + const updateSelectedBlocks = useCallback( () => setSelectedBlocks( e.getSelection()?.blocks || [e.getTextCursorPosition().block], ), - e, + [e], ); + useEditorContentOrSelectionChange(updateSelectedBlocks, e); + return selectedBlocks; }