From b56f328a05a46280587cb2aecf4d2eef98bbb46c Mon Sep 17 00:00:00 2001
From: nickbar01234 <nickbar01234gmail.com>
Date: Fri, 10 Oct 2025 00:08:42 -0400
Subject: [PATCH] Mount monaco outside

---
 .../src/components/dialog/LeaveRoomDialog.tsx |   7 +-
 .../components/panel/editor/tab/CodeTab.tsx   |  52 ++++++++-
 .../panel/info/LeetCodeQuestions.tsx          |   8 +-
 .../src/components/panel/problem/index.tsx    |  23 ++--
 .../portals/CodeBuddyMonacoPortal.tsx         |  13 +++
 .../IFramePortal.tsx}                         |   6 +-
 extension/src/entrypoints/content.tsx         |   6 +-
 extension/src/hooks/store/index.ts            |  12 +-
 extension/src/store/htmlStore.ts              | 110 ++++++++----------
 9 files changed, 146 insertions(+), 91 deletions(-)
 create mode 100644 extension/src/components/portals/CodeBuddyMonacoPortal.tsx
 rename extension/src/components/{iframe/IframeContainer.tsx => portals/IFramePortal.tsx} (61%)

diff --git a/extension/src/components/dialog/LeaveRoomDialog.tsx b/extension/src/components/dialog/LeaveRoomDialog.tsx
index 08dbca42..9ad4aed3 100644
--- a/extension/src/components/dialog/LeaveRoomDialog.tsx
+++ b/extension/src/components/dialog/LeaveRoomDialog.tsx
@@ -1,4 +1,7 @@
-import { useHtmlActions, useRoomActions } from "@cb/hooks/store";
+import {
+  useLeetCodeProblemsHtmlActions,
+  useRoomActions,
+} from "@cb/hooks/store";
 import { Button } from "@cb/lib/components/ui/button";
 import { DialogClose } from "@cb/lib/components/ui/dialog";
 import { DialogOverlay } from "@radix-ui/react-dialog";
@@ -9,7 +12,7 @@ import { RoomDialog, baseButtonClassName } from "./RoomDialog";
 
 export function LeaveRoomDialog() {
   const { leave, closeSidebarTab } = useRoomActions();
-  const { blurHtml, unblurHtml } = useHtmlActions();
+  const { blurHtml, unblurHtml } = useLeetCodeProblemsHtmlActions();
 
   const leaveRoomThrottled = React.useMemo(() => {
     return throttle((event: React.MouseEvent<HTMLButtonElement>) => {
diff --git a/extension/src/components/panel/editor/tab/CodeTab.tsx b/extension/src/components/panel/editor/tab/CodeTab.tsx
index 5314ad98..cc854760 100644
--- a/extension/src/components/panel/editor/tab/CodeTab.tsx
+++ b/extension/src/components/panel/editor/tab/CodeTab.tsx
@@ -1,14 +1,56 @@
 import { SkeletonWrapper } from "@cb/components/ui/SkeletonWrapper";
-import { DOM } from "@cb/constants";
+import { useCodeBuddyMonacoHtmlActions } from "@cb/hooks/store";
 import React from "react";
 
+// note: This needs to match the sidepanel icons
+const MONACO_EDITOR_Z_INDEX = 1000;
+
 export const CodeTab: React.FC = () => {
+  const { showHtml } = useCodeBuddyMonacoHtmlActions();
+
+  const onContainerRefCallback = React.useCallback(
+    (node: HTMLElement | null) => {
+      if (!node) return;
+
+      let lastRect: DOMRect;
+      let animationFrameId: number;
+      const repositionIframeOnPositionChange = () => {
+        const rect = node.getBoundingClientRect();
+        if (
+          !lastRect ||
+          rect.top !== lastRect.top ||
+          rect.left !== lastRect.left
+        ) {
+          showHtml(node, MONACO_EDITOR_Z_INDEX);
+          lastRect = rect;
+        }
+        animationFrameId = requestAnimationFrame(
+          repositionIframeOnPositionChange
+        );
+      };
+
+      animationFrameId = requestAnimationFrame(
+        repositionIframeOnPositionChange
+      );
+
+      const repositionIframeOnWindowResize = () => {
+        lastRect = node.getBoundingClientRect();
+        showHtml(node, MONACO_EDITOR_Z_INDEX);
+      };
+
+      window.addEventListener("resize", repositionIframeOnPositionChange);
+
+      return () => {
+        cancelAnimationFrame(animationFrameId);
+        window.removeEventListener("resize", repositionIframeOnWindowResize);
+      };
+    },
+    [showHtml]
+  );
+
   return (
     <SkeletonWrapper loading={false} className="relative">
-      <div
-        id={DOM.CODEBUDDY_EDITOR_ID}
-        className="h-full w-full overflow-hidden"
-      />
+      <div ref={onContainerRefCallback} className="h-full w-full" />
     </SkeletonWrapper>
   );
 };
diff --git a/extension/src/components/panel/info/LeetCodeQuestions.tsx b/extension/src/components/panel/info/LeetCodeQuestions.tsx
index 0de52d1d..2e6fade7 100644
--- a/extension/src/components/panel/info/LeetCodeQuestions.tsx
+++ b/extension/src/components/panel/info/LeetCodeQuestions.tsx
@@ -1,5 +1,9 @@
 import { QuestionSelectorPanel } from "@cb/components/panel/problem";
-import { useHtmlActions, useRoomActions, useRoomData } from "@cb/hooks/store";
+import {
+  useLeetCodeProblemsHtmlActions,
+  useRoomActions,
+  useRoomData,
+} from "@cb/hooks/store";
 import { SidebarTabIdentifier } from "@cb/store";
 import { DialogTitle } from "@radix-ui/react-dialog";
 import React from "react";
@@ -8,7 +12,7 @@ import { SidebarTabHeader, SidebarTabLayout } from "./SidebarTabLayout";
 export const LeetCodeQuestions = () => {
   const { activeSidebarTab, questions } = useRoomData();
   const { addQuestion, closeSidebarTab } = useRoomActions();
-  const { hideHtml } = useHtmlActions();
+  const { hideHtml } = useLeetCodeProblemsHtmlActions();
 
   React.useEffect(() => {
     if (activeSidebarTab === undefined) hideHtml();
diff --git a/extension/src/components/panel/problem/index.tsx b/extension/src/components/panel/problem/index.tsx
index 673bf466..8a3ff27b 100644
--- a/extension/src/components/panel/problem/index.tsx
+++ b/extension/src/components/panel/problem/index.tsx
@@ -1,6 +1,6 @@
 import { SkeletonWrapper } from "@cb/components/ui/SkeletonWrapper";
 import { DOM, EXTENSION } from "@cb/constants";
-import { useHtmlActions } from "@cb/hooks/store";
+import { useLeetCodeProblemsHtmlActions } from "@cb/hooks/store";
 import useResource from "@cb/hooks/useResource";
 import { Question } from "@cb/types";
 import React, { useEffect } from "react";
@@ -8,6 +8,8 @@ import { toast } from "sonner";
 
 const INJECTED_ATTRIBUTE = "data-injected";
 
+const LEETCODE_PROBLEM_Z_INDEX = 3000;
+
 interface QuestionSelectorPanelProps {
   handleQuestionSelect: (link: string) => void;
   filterQuestions: Question[];
@@ -19,7 +21,7 @@ export const QuestionSelectorPanel = React.memo(
     const { register: registerObserver } = useResource<MutationObserver>({
       name: "observer",
     });
-    const iframeActions = useHtmlActions();
+    const iframeActions = useLeetCodeProblemsHtmlActions();
 
     const onContainerRefCallback = React.useCallback(
       (node: HTMLElement | null) => {
@@ -34,7 +36,7 @@ export const QuestionSelectorPanel = React.memo(
             rect.top !== lastRect.top ||
             rect.left !== lastRect.left
           ) {
-            iframeActions.showHtml(node);
+            iframeActions.showHtml(node, LEETCODE_PROBLEM_Z_INDEX);
             lastRect = rect;
           }
           animationFrameId = requestAnimationFrame(
@@ -48,7 +50,7 @@ export const QuestionSelectorPanel = React.memo(
 
         const repositionIframeOnWindowResize = () => {
           lastRect = node.getBoundingClientRect();
-          iframeActions.showHtml(node);
+          iframeActions.showHtml(node, LEETCODE_PROBLEM_Z_INDEX);
         };
 
         window.addEventListener("resize", repositionIframeOnPositionChange);
@@ -64,10 +66,6 @@ export const QuestionSelectorPanel = React.memo(
     useEffect(() => {
       setLoading(true);
 
-      if (iframeActions.isContentProcessed()) {
-        setLoading(false);
-      }
-
       const iframe = iframeActions.getHtmlElement();
       if (iframe) {
         const processIframe = async () => {
@@ -146,16 +144,13 @@ export const QuestionSelectorPanel = React.memo(
                 obs.disconnect()
               );
               observer.observe(rowContainer, { childList: true });
-              processQuestionLinks();
-
-              iframeActions.setContentProcessed(true);
+              await processQuestionLinks();
               setLoading(false);
             } catch (e) {
               console.error("Unable to mount Leetcode iframe", e);
               toast.error(
                 "Unable to show question selector, please try again later."
               );
-              setLoading(false);
             }
           };
 
@@ -171,7 +166,7 @@ export const QuestionSelectorPanel = React.memo(
             }
           };
 
-          if (iframeActions.isHtmlLoaded()) {
+          if (iframe.contentDocument?.readyState === "complete") {
             await processIframeDocument();
           } else {
             // Set up load event listener
@@ -186,8 +181,6 @@ export const QuestionSelectorPanel = React.memo(
 
         processIframe();
       }
-
-      return () => iframeActions.setContentProcessed(false);
     }, [
       handleQuestionSelect,
       filterQuestions,
diff --git a/extension/src/components/portals/CodeBuddyMonacoPortal.tsx b/extension/src/components/portals/CodeBuddyMonacoPortal.tsx
new file mode 100644
index 00000000..d3e0ed50
--- /dev/null
+++ b/extension/src/components/portals/CodeBuddyMonacoPortal.tsx
@@ -0,0 +1,13 @@
+import { DOM } from "@cb/constants";
+import { useCodeBuddyMonacoHtmlActions } from "@cb/hooks/store";
+
+export const CodeBuddyMonacoPortal = () => {
+  const { setHtmlElement } = useCodeBuddyMonacoHtmlActions();
+  return (
+    <div
+      id={DOM.CODEBUDDY_EDITOR_ID}
+      ref={(node) => setHtmlElement(node)}
+      className="hidden"
+    />
+  );
+};
diff --git a/extension/src/components/iframe/IframeContainer.tsx b/extension/src/components/portals/IFramePortal.tsx
similarity index 61%
rename from extension/src/components/iframe/IframeContainer.tsx
rename to extension/src/components/portals/IFramePortal.tsx
index 5667fa2e..be0116a3 100644
--- a/extension/src/components/iframe/IframeContainer.tsx
+++ b/extension/src/components/portals/IFramePortal.tsx
@@ -1,9 +1,9 @@
 import { URLS } from "@cb/constants";
-import { useHtmlActions } from "@cb/hooks/store";
+import { useLeetCodeProblemsHtmlActions } from "@cb/hooks/store";
 import React from "react";
 
-export const IframeContainer: React.FC = () => {
-  const { setHtmlElement } = useHtmlActions();
+export const IFramePortal: React.FC = () => {
+  const { setHtmlElement } = useLeetCodeProblemsHtmlActions();
 
   return (
     <iframe
diff --git a/extension/src/entrypoints/content.tsx b/extension/src/entrypoints/content.tsx
index 59020e37..b26bb3f0 100644
--- a/extension/src/entrypoints/content.tsx
+++ b/extension/src/entrypoints/content.tsx
@@ -1,5 +1,6 @@
 import { ContentScriptContext } from "#imports";
-import { IframeContainer } from "@cb/components/iframe/IframeContainer";
+import { CodeBuddyMonacoPortal } from "@cb/components/portals/CodeBuddyMonacoPortal";
+import { IFramePortal } from "@cb/components/portals/IFramePortal";
 import { ContentScript } from "@cb/components/root/ContentScript";
 import { DOM, URLS } from "@cb/constants";
 import { getOrCreateControllers } from "@cb/services";
@@ -45,7 +46,8 @@ const createUi = (ctx: ContentScriptContext) => {
 
       createRoot(extensionRoot).render(
         <>
-          <IframeContainer />
+          <IFramePortal />
+          <CodeBuddyMonacoPortal />
           <ContentScript leetCodeNode={leetCodeNode} />
         </>
       );
diff --git a/extension/src/hooks/store/index.ts b/extension/src/hooks/store/index.ts
index d663f8ab..e67c6776 100644
--- a/extension/src/hooks/store/index.ts
+++ b/extension/src/hooks/store/index.ts
@@ -1,6 +1,9 @@
 import { CSS } from "@cb/constants";
 import { useApp, useRoom } from "@cb/store";
-import { useHtml } from "@cb/store/htmlStore";
+import {
+  useCodeBuddyMonacoHtml,
+  useLeetCodeProblemsHtml,
+} from "@cb/store/htmlStore";
 import { useLeetCode } from "@cb/store/leetCodeStore";
 import { QuestionProgressStatus, User } from "@cb/types";
 import React from "react";
@@ -101,4 +104,9 @@ export const useAppActions = ({ panelRef }: any) => {
   return { collapseExtension, expandExtension, setAppWidth, handleDoubleClick };
 };
 
-export const useHtmlActions = () => useHtml((state) => state.actions);
+// todo(nickbar01234): Is there such thing as a hooks factory?
+export const useLeetCodeProblemsHtmlActions = () =>
+  useLeetCodeProblemsHtml((state) => state.actions);
+
+export const useCodeBuddyMonacoHtmlActions = () =>
+  useCodeBuddyMonacoHtml((state) => state.actions);
diff --git a/extension/src/store/htmlStore.ts b/extension/src/store/htmlStore.ts
index 233e2785..aa01192b 100644
--- a/extension/src/store/htmlStore.ts
+++ b/extension/src/store/htmlStore.ts
@@ -2,73 +2,63 @@ import { BoundStore } from "@cb/types";
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 
-interface HtmlState {
-  contentProcessed: boolean;
-  htmlElement: HTMLIFrameElement | null;
+interface HtmlState<T extends HTMLElement> {
+  htmlElement: T | null;
 }
 
-interface HtmlActions {
-  showHtml: (container: HTMLElement) => void;
+interface HtmlActions<T extends HTMLElement> {
+  showHtml: (container: HTMLElement, zIndex: number) => void;
   hideHtml: () => void;
   blurHtml: () => void;
   unblurHtml: () => void;
-  setContentProcessed: (processed: boolean) => void;
-  setHtmlElement: (element: HTMLIFrameElement | null) => void;
-  getHtmlElement: () => HTMLIFrameElement | null;
-  isContentProcessed: () => boolean;
-  isHtmlLoaded: () => boolean;
+  setHtmlElement: (element: T | null) => void;
+  getHtmlElement: () => T | null;
 }
 
-export const useHtml = create<BoundStore<HtmlState, HtmlActions>>()(
-  immer((set, get) => ({
-    contentProcessed: false,
-    htmlElement: null,
-    actions: {
-      showHtml: (container) => {
-        const { htmlElement } = get();
-        if (!htmlElement) return;
-        const containerRect = container.getBoundingClientRect();
+const createHtmlStore = <T extends HTMLElement>() => {
+  return create<BoundStore<HtmlState<T>, HtmlActions<T>>>()(
+    immer((set, get) => ({
+      htmlElement: null,
+      actions: {
+        showHtml: (container, zIndex) => {
+          const { htmlElement } = get();
+          if (!htmlElement) return;
+          const containerRect = container.getBoundingClientRect();
 
-        // static styles
-        htmlElement.className =
-          "block fixed z-[3000] pointer-events-auto w-full h-full transition";
-        // Runtime-calculated positions, doesn't work with Tailwind classes
-        htmlElement.style.top = `${containerRect.top}px`;
-        htmlElement.style.left = `${containerRect.left}px`;
-        htmlElement.style.width = `${containerRect.width}px`;
-        htmlElement.style.height = `${containerRect.height}px`;
+          // static styles
+          htmlElement.className = `block fixed z-[${zIndex}] pointer-events-auto w-full h-full transition isolate`;
+          // Runtime-calculated positions, doesn't work with Tailwind classes
+          htmlElement.style.top = `${containerRect.top}px`;
+          htmlElement.style.left = `${containerRect.left}px`;
+          htmlElement.style.width = `${containerRect.width}px`;
+          htmlElement.style.height = `${containerRect.height}px`;
+        },
+        blurHtml: () => {
+          const { htmlElement } = get();
+          if (!htmlElement) return;
+          appendClassIdempotent(htmlElement, ["blur-sm", "filter"]);
+        },
+        unblurHtml: () => {
+          const { htmlElement } = get();
+          if (!htmlElement) return;
+          htmlElement.classList.remove("blur-sm", "filter");
+        },
+        hideHtml: () => {
+          const { htmlElement } = get();
+          if (!htmlElement) return;
+          htmlElement.className = "hidden pointer-events-none fixed";
+        },
+        setHtmlElement: (element) => set({ htmlElement: element }),
+        getHtmlElement: () => {
+          return get().htmlElement;
+        },
       },
-      blurHtml: () => {
-        const { htmlElement } = get();
-        if (!htmlElement) return;
-        appendClassIdempotent(htmlElement, ["blur-sm", "filter"]);
-      },
-      unblurHtml: () => {
-        const { htmlElement } = get();
-        if (!htmlElement) return;
-        htmlElement.classList.remove("blur-sm", "filter");
-      },
-      hideHtml: () => {
-        const { htmlElement } = get();
-        if (!htmlElement) return;
-        htmlElement.className = "hidden pointer-events-none fixed";
-      },
-      setContentProcessed: (processed: boolean) => {
-        set((state) => {
-          state.contentProcessed = processed;
-        });
-      },
-      setHtmlElement: (element) => set({ htmlElement: element }),
-      getHtmlElement: () => {
-        return get().htmlElement;
-      },
-      isContentProcessed: () => {
-        return get().contentProcessed;
-      },
-      isHtmlLoaded: () =>
-        get().htmlElement?.contentDocument?.readyState === "complete",
-    },
-  }))
-);
+    }))
+  );
+};
+
+export const useLeetCodeProblemsHtml = createHtmlStore<HTMLIFrameElement>();
+
+export const useCodeBuddyMonacoHtml = createHtmlStore();
 
-export type HtmlStore = typeof useHtml;
+export type HtmlStore = ReturnType<typeof createHtmlStore>;