From de8db6095c146a635eb5d158ab9e5bc474c5ad21 Mon Sep 17 00:00:00 2001
From: jbpenrath <jb.penrath@gmail.com>
Date: Tue, 23 Dec 2025 17:31:43 +0100
Subject: [PATCH 1/3] fix: update CreateLinkButton to be able to toggle popover
 visibility

Resolve #2313
---
 .../DefaultButtons/CreateLinkButton.tsx             | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
index b90ff25bad..8df110a05d 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
@@ -19,6 +19,7 @@ import { useEditorState } from "../../../hooks/useEditorState.js";
 import { useExtension } from "../../../hooks/useExtension.js";
 import { useDictionary } from "../../../i18n/dictionary.js";
 import { EditLinkMenuItems } from "../../LinkToolbar/EditLinkMenuItems.js";
+import { useEditorChange } from "../../../hooks/useEditorChange.js";
 
 function checkLinkInSchema(
   editor: BlockNoteEditor<BlockSchema, any, StyleSchema>,
@@ -53,6 +54,11 @@ export const CreateLinkButton = () => {
     return () => showSelection(false);
   }, [showPopover, showSelection]);
 
+  useEditorChange(() => {
+    // Close the popover when the editor is updated after a link has been created
+    setShowPopover(false);
+  }, editor);
+
   const state = useEditorState({
     editor,
     selector: ({ editor }) => {
@@ -106,7 +112,10 @@ export const CreateLinkButton = () => {
   }
 
   return (
-    <Components.Generic.Popover.Root open={showPopover}>
+    <Components.Generic.Popover.Root
+      open={showPopover}
+      onOpenChange={setShowPopover}
+    >
       <Components.Generic.Popover.Trigger>
         {/* TODO: hide tooltip on click */}
         <Components.FormattingToolbar.Button
@@ -119,7 +128,7 @@ export const CreateLinkButton = () => {
             dict.generic.ctrl_shortcut,
           )}
           icon={<RiLink />}
-          onClick={() => setShowPopover(true)}
+          onClick={() => setShowPopover(open => !open)}
         />
       </Components.Generic.Popover.Trigger>
       <Components.Generic.Popover.Content

From 83f48af13992fff6fb5b44092d83ccde0b52b96b Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Tue, 27 Jan 2026 00:38:19 +0100
Subject: [PATCH 2/3] Small fix

---
 .../DefaultButtons/CreateLinkButton.tsx             | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
index 160d4e97c2..2b53ddd95f 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
@@ -19,7 +19,6 @@ import { useEditorState } from "../../../hooks/useEditorState.js";
 import { useExtension } from "../../../hooks/useExtension.js";
 import { useDictionary } from "../../../i18n/dictionary.js";
 import { EditLinkMenuItems } from "../../LinkToolbar/EditLinkMenuItems.js";
-import { useEditorChange } from "../../../hooks/useEditorChange.js";
 
 function checkLinkInSchema(
   editor: BlockNoteEditor<BlockSchema, any, StyleSchema>,
@@ -54,11 +53,6 @@ export const CreateLinkButton = () => {
     return () => showSelection(false, "createLinkButton");
   }, [showPopover, showSelection]);
 
-  useEditorChange(() => {
-    // Close the popover when the editor is updated after a link has been created
-    setShowPopover(false);
-  }, editor);
-
   const state = useEditorState({
     editor,
     selector: ({ editor }) => {
@@ -90,6 +84,11 @@ export const CreateLinkButton = () => {
       };
     },
   });
+  useEffect(() => {
+    if (state?.url === undefined) {
+      setShowPopover(false);
+    }
+  }, [state?.url]);
 
   // Makes Ctrl+K/Meta+K open link creation popover.
   useEffect(() => {
@@ -129,7 +128,7 @@ export const CreateLinkButton = () => {
             dict.generic.ctrl_shortcut,
           )}
           icon={<RiLink />}
-          onClick={() => setShowPopover(open => !open)}
+          onClick={() => setShowPopover((open) => !open)}
         />
       </Components.Generic.Popover.Trigger>
       <Components.Generic.Popover.Content

From 14f0dd7a46c91f79df5504ec1c54d57e8eba4c97 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Tue, 27 Jan 2026 18:14:53 +0100
Subject: [PATCH 3/3] Made popover close whenever `state` changes

---
 .../FormattingToolbar/DefaultButtons/CreateLinkButton.tsx   | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
index 2b53ddd95f..925c6b7d12 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
@@ -85,10 +85,8 @@ export const CreateLinkButton = () => {
     },
   });
   useEffect(() => {
-    if (state?.url === undefined) {
-      setShowPopover(false);
-    }
-  }, [state?.url]);
+    setShowPopover(false);
+  }, [state]);
 
   // Makes Ctrl+K/Meta+K open link creation popover.
   useEffect(() => {