chore: Minor clean-up for some Controller components (#2220)

* Cleaned up `LinkToolbarController`, `FloatingComposerController`, and `FloatingThreadController`

* Fixed build

Author: matthewlipski

examples/03-ui-components/16-link-toolbar-buttons/src/App.tsx

@@ -57,7 +57,7 @@ export default function App() {
               text={props.text}
               range={props.range}
               setToolbarOpen={props.setToolbarOpen}
-              setToolbarFrozen={props.setToolbarFrozen}
+              setToolbarPositionFrozen={props.setToolbarPositionFrozen}
             />
             <OpenLinkButton url={props.url} />
             <DeleteLinkButton

packages/react/src/components/Comments/FloatingComposerController.tsx

@@ -8,7 +8,7 @@ import {
 } from "@blocknote/core";
 import { CommentsExtension } from "@blocknote/core/comments";
 import { flip, offset, shift } from "@floating-ui/react";
-import { ComponentProps, FC, useEffect, useMemo, useState } from "react";
+import { ComponentProps, FC, useMemo } from "react";
 
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useEditorState } from "../../hooks/useEditorState.js";
@@ -25,8 +25,6 @@ export default function FloatingComposerController<
   floatingComposer?: FC<ComponentProps<typeof FloatingComposer>>;
   floatingUIOptions?: FloatingUIOptions;
 }) {
-  const [open, setOpen] = useState(false);
-
   const editor = useBlockNoteEditor<B, I, S>();
 
   const comments = useExtension(CommentsExtension);
@@ -35,9 +33,6 @@ export default function FloatingComposerController<
     editor,
     selector: (state) => state.pendingComment,
   });
-  useEffect(() => {
-    setOpen(pendingComment);
-  }, [pendingComment]);
 
   const position = useEditorState({
     editor,
@@ -53,16 +48,14 @@ export default function FloatingComposerController<
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
       useFloatingOptions: {
-        open,
+        open: !!pendingComment,
         // Needed as hooks like `useDismiss` call `onOpenChange` to change the
         // open state.
         onOpenChange: (open) => {
           if (!open) {
             comments.stopPendingComment();
             editor.focus();
           }
-
-          setOpen(open);
         },
         placement: "bottom",
         middleware: [offset(10), shift(), flip()],
@@ -74,7 +67,7 @@ export default function FloatingComposerController<
       },
       ...props.floatingUIOptions,
     }),
-    [comments, editor, open, props.floatingUIOptions],
+    [comments, editor, pendingComment, props.floatingUIOptions],
   );
 
   // nice to have improvements would be:

packages/react/src/components/Comments/FloatingThreadController.tsx

@@ -1,6 +1,6 @@
 import { CommentsExtension } from "@blocknote/core/comments";
 import { flip, offset, shift } from "@floating-ui/react";
-import { ComponentProps, FC, useEffect, useMemo, useState } from "react";
+import { ComponentProps, FC, useMemo } from "react";
 
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
@@ -19,8 +19,6 @@ export default function FloatingThreadController(props: {
 }) {
   const editor = useBlockNoteEditor<any, any, any>();
 
-  const [open, setOpen] = useState(false);
-
   const comments = useExtension(CommentsExtension);
   const selectedThread = useExtensionState(CommentsExtension, {
     editor,
@@ -32,9 +30,6 @@ export default function FloatingThreadController(props: {
           }
         : undefined,
   });
-  useEffect(() => {
-    setOpen(!!selectedThread);
-  }, [selectedThread]);
 
   const threads = useThreads();
 
@@ -46,7 +41,7 @@ export default function FloatingThreadController(props: {
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
       useFloatingOptions: {
-        open,
+        open: !!selectedThread,
         // Needed as hooks like `useDismiss` call `onOpenChange` to change the
         // open state.
         onOpenChange: (open, _event, reason) => {
@@ -57,8 +52,6 @@ export default function FloatingThreadController(props: {
           if (!open) {
             comments.selectThread(undefined);
           }
-
-          setOpen(open);
         },
         placement: "bottom",
         middleware: [offset(10), shift(), flip()],
@@ -70,7 +63,7 @@ export default function FloatingThreadController(props: {
       },
       ...props.floatingUIOptions,
     }),
-    [comments, editor, open, props.floatingUIOptions],
+    [comments, editor, props.floatingUIOptions, selectedThread],
   );
 
   // nice to have improvements:

packages/react/src/components/LinkToolbar/DefaultButtons/EditLinkButton.tsx

@@ -6,14 +6,16 @@ import { LinkToolbarProps } from "../LinkToolbarProps.js";
 export const EditLinkButton = (
   props: Pick<
     LinkToolbarProps,
-    "url" | "text" | "range" | "setToolbarFrozen" | "setToolbarOpen"
+    "url" | "text" | "range" | "setToolbarOpen" | "setToolbarPositionFrozen"
   >,
 ) => {
   const Components = useComponentsContext()!;
   const dict = useDictionary();
 
   return (
-    <Components.Generic.Popover.Root onOpenChange={props.setToolbarFrozen}>
+    <Components.Generic.Popover.Root
+      onOpenChange={props.setToolbarPositionFrozen}
+    >
       <Components.Generic.Popover.Trigger>
         <Components.LinkToolbar.Button
           className={"bn-button"}
@@ -32,7 +34,7 @@ export const EditLinkButton = (
           text={props.text}
           range={props.range}
           setToolbarOpen={props.setToolbarOpen}
-          setToolbarFrozen={props.setToolbarFrozen}
+          setToolbarPositionFrozen={props.setToolbarPositionFrozen}
         />
       </Components.Generic.Popover.Content>
     </Components.Generic.Popover.Root>

packages/react/src/components/LinkToolbar/EditLinkMenuItems.tsx

@@ -29,7 +29,7 @@ const validateUrl = (url: string) => {
 export const EditLinkMenuItems = (
   props: Pick<
     LinkToolbarProps,
-    "url" | "text" | "range" | "setToolbarOpen" | "setToolbarFrozen"
+    "url" | "text" | "range" | "setToolbarOpen" | "setToolbarPositionFrozen"
   > & {
     showTextField?: boolean;
   },
@@ -55,7 +55,7 @@ export const EditLinkMenuItems = (
         event.preventDefault();
         editLink(validateUrl(currentUrl), currentText, props.range.from);
         props.setToolbarOpen?.(false);
-        props.setToolbarFrozen?.(false);
+        props.setToolbarPositionFrozen?.(false);
       }
     },
     [editLink, currentUrl, currentText, props],
@@ -76,7 +76,7 @@ export const EditLinkMenuItems = (
   const handleSubmit = useCallback(() => {
     editLink(validateUrl(currentUrl), currentText, props.range.from);
     props.setToolbarOpen?.(false);
-    props.setToolbarFrozen?.(false);
+    props.setToolbarPositionFrozen?.(false);
   }, [editLink, currentUrl, currentText, props]);
 
   return (

packages/react/src/components/LinkToolbar/LinkToolbar.tsx

@@ -26,8 +26,8 @@ export const LinkToolbar = (props: LinkToolbarProps) => {
             url={props.url}
             text={props.text}
             range={props.range}
-            setToolbarFrozen={props.setToolbarFrozen}
             setToolbarOpen={props.setToolbarOpen}
+            setToolbarPositionFrozen={props.setToolbarPositionFrozen}
           />
           <OpenLinkButton url={props.url} />
           <DeleteLinkButton