From 7a132225c83e2bd5cfa1e5a8fc2a270b3d64781a Mon Sep 17 00:00:00 2001
From: Aditya Vaishnav <firehudson@gmail.com>
Date: Thu, 24 Aug 2023 13:41:40 +0000
Subject: [PATCH] Hide inapplicable plugins from bubble-menu

---
 ui/editor/components/bubble-menu.tsx | 72 +++++++++++++++-------------
 1 file changed, 39 insertions(+), 33 deletions(-)

diff --git a/ui/editor/components/bubble-menu.tsx b/ui/editor/components/bubble-menu.tsx
index 6e354a6a6..474ef0c91 100644
--- a/ui/editor/components/bubble-menu.tsx
+++ b/ui/editor/components/bubble-menu.tsx
@@ -78,6 +78,8 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
   const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
   const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
+  const isCodeActive = props.editor.isActive("code");
+  const isCodeBlockActive = props.editor.isActive("codeBlock");
 
   return (
     <BubbleMenu
@@ -93,39 +95,43 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           setIsLinkSelectorOpen(false);
         }}
       />
-      <LinkSelector
-        editor={props.editor}
-        isOpen={isLinkSelectorOpen}
-        setIsOpen={() => {
-          setIsLinkSelectorOpen(!isLinkSelectorOpen);
-          setIsColorSelectorOpen(false);
-          setIsNodeSelectorOpen(false);
-        }}
-      />
-      <div className="flex">
-        {items.map((item, index) => (
-          <button
-            key={index}
-            onClick={item.command}
-            className="p-2 text-stone-600 hover:bg-stone-100 active:bg-stone-200"
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-blue-500": item.isActive(),
-              })}
-            />
-          </button>
-        ))}
-      </div>
-      <ColorSelector
-        editor={props.editor}
-        isOpen={isColorSelectorOpen}
-        setIsOpen={() => {
-          setIsColorSelectorOpen(!isColorSelectorOpen);
-          setIsNodeSelectorOpen(false);
-          setIsLinkSelectorOpen(false);
-        }}
-      />
+      {!(isCodeActive || isCodeBlockActive) && (
+        <>
+          <LinkSelector
+            editor={props.editor}
+            isOpen={isLinkSelectorOpen}
+            setIsOpen={() => {
+              setIsLinkSelectorOpen(!isLinkSelectorOpen);
+              setIsColorSelectorOpen(false);
+              setIsNodeSelectorOpen(false);
+            }}
+          />
+          <div className="flex">
+            {items.map((item, index) => (
+              <button
+                key={index}
+                onClick={item.command}
+                className="p-2 text-stone-600 hover:bg-stone-100 active:bg-stone-200"
+              >
+                <item.icon
+                  className={cn("h-4 w-4", {
+                    "text-blue-500": item.isActive(),
+                  })}
+                />
+              </button>
+            ))}
+          </div>
+          <ColorSelector
+            editor={props.editor}
+            isOpen={isColorSelectorOpen}
+            setIsOpen={() => {
+              setIsColorSelectorOpen(!isColorSelectorOpen);
+              setIsNodeSelectorOpen(false);
+              setIsLinkSelectorOpen(false);
+            }}
+          />
+        </>
+      )}
     </BubbleMenu>
   );
 };