Revert "Cleaned up LinkToolbarController, FloatingComposerController, and FloatingThreadController"

This reverts commit 7d223de.

Author: matthewlipski

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, useMemo } from "react";
+import { ComponentProps, FC, useEffect, useMemo, useState } from "react";
 
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useEditorState } from "../../hooks/useEditorState.js";
@@ -25,6 +25,8 @@ 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);
@@ -33,6 +35,9 @@ export default function FloatingComposerController<
     editor,
     selector: (state) => state.pendingComment,
   });
+  useEffect(() => {
+    setOpen(pendingComment);
+  }, [pendingComment]);
 
   const position = useEditorState({
     editor,
@@ -48,14 +53,16 @@ export default function FloatingComposerController<
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
       useFloatingOptions: {
-        open: !!pendingComment,
+        open,
         // 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()],
@@ -67,7 +74,7 @@ export default function FloatingComposerController<
       },
       ...props.floatingUIOptions,
     }),
-    [comments, editor, pendingComment, props.floatingUIOptions],
+    [comments, editor, open, 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, useMemo } from "react";
+import { ComponentProps, FC, useEffect, useMemo, useState } from "react";
 
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
@@ -19,6 +19,8 @@ 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,
@@ -30,6 +32,9 @@ export default function FloatingThreadController(props: {
           }
         : undefined,
   });
+  useEffect(() => {
+    setOpen(!!selectedThread);
+  }, [selectedThread]);
 
   const threads = useThreads();
 
@@ -41,7 +46,7 @@ export default function FloatingThreadController(props: {
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
       useFloatingOptions: {
-        open: !!selectedThread,
+        open,
         // Needed as hooks like `useDismiss` call `onOpenChange` to change the
         // open state.
         onOpenChange: (open, _event, reason) => {
@@ -52,6 +57,8 @@ export default function FloatingThreadController(props: {
           if (!open) {
             comments.selectThread(undefined);
           }
+
+          setOpen(open);
         },
         placement: "bottom",
         middleware: [offset(10), shift(), flip()],
@@ -63,7 +70,7 @@ export default function FloatingThreadController(props: {
       },
       ...props.floatingUIOptions,
     }),
-    [comments, editor, props.floatingUIOptions, selectedThread],
+    [comments, editor, open, props.floatingUIOptions],
   );
 
   // nice to have improvements:

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

@@ -6,16 +6,14 @@ import { LinkToolbarProps } from "../LinkToolbarProps.js";
 export const EditLinkButton = (
   props: Pick<
     LinkToolbarProps,
-    "url" | "text" | "range" | "setToolbarOpen" | "setToolbarPositionFrozen"
+    "url" | "text" | "range" | "setToolbarFrozen" | "setToolbarOpen"
   >,
 ) => {
   const Components = useComponentsContext()!;
   const dict = useDictionary();
 
   return (
-    <Components.Generic.Popover.Root
-      onOpenChange={props.setToolbarPositionFrozen}
-    >
+    <Components.Generic.Popover.Root onOpenChange={props.setToolbarFrozen}>
       <Components.Generic.Popover.Trigger>
         <Components.LinkToolbar.Button
           className={"bn-button"}
@@ -34,7 +32,7 @@ export const EditLinkButton = (
           text={props.text}
           range={props.range}
           setToolbarOpen={props.setToolbarOpen}
-          setToolbarPositionFrozen={props.setToolbarPositionFrozen}
+          setToolbarFrozen={props.setToolbarFrozen}
         />
       </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" | "setToolbarPositionFrozen"
+    "url" | "text" | "range" | "setToolbarOpen" | "setToolbarFrozen"
   > & {
     showTextField?: boolean;
   },
@@ -55,7 +55,7 @@ export const EditLinkMenuItems = (
         event.preventDefault();
         editLink(validateUrl(currentUrl), currentText, props.range.from);
         props.setToolbarOpen?.(false);
-        props.setToolbarPositionFrozen?.(false);
+        props.setToolbarFrozen?.(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.setToolbarPositionFrozen?.(false);
+    props.setToolbarFrozen?.(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