rename the context used for stable html (it's not special to iframes anymore)

Author: williamstein

src/packages/frontend/jupyter/cell-list.tsx

@@ -37,14 +37,14 @@ import { LLMTools, NotebookMode, Scroll } from "@cocalc/jupyter/types";
 import { JupyterActions } from "./browser-actions";
 import { Cell } from "./cell";
 import HeadingTagComponent from "./heading-tag";
-interface IFrameContextType {
+interface StableHtmlContextType {
   iframeDivRef?: MutableRefObject<any>;
   cellListDivRef?: MutableRefObject<any>;
   iframeOnScrolls?: { [key: string]: () => void };
 }
-const IFrameContext = createContext<IFrameContextType>({});
-export const useIFrameContext: () => IFrameContextType = () => {
-  return useContext(IFrameContext);
+const StableHtmlContext = createContext<StableHtmlContextType>({});
+export const useStableHtmlContext: () => StableHtmlContextType = () => {
+  return useContext(StableHtmlContext);
 };
 
 // 3 extra cells:
@@ -602,7 +602,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
   const virtuosoHeightsRef = useRef<{ [index: number]: number }>({});
   if (use_windowed_list) {
     body = (
-      <IFrameContext.Provider
+      <StableHtmlContext.Provider
         value={{ iframeDivRef, cellListDivRef, iframeOnScrolls }}
       >
         <div ref={cellListDivRef} className="smc-vfill">
@@ -682,7 +682,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
             {...virtuosoScroll}
           />
         </div>
-      </IFrameContext.Provider>
+      </StableHtmlContext.Provider>
     );
   } else {
     // This is needed for **the share server**, which hasn't had

src/packages/frontend/jupyter/output-messages/iframe.tsx

@@ -13,7 +13,7 @@ import ReactDOM from "react-dom";
 import useIsMountedRef from "@cocalc/frontend/app-framework/is-mounted-hook";
 import useCounter from "@cocalc/frontend/app-framework/counter-hook";
 import { get_blob_url } from "../server-urls";
-import { useIFrameContext } from "@cocalc/frontend/jupyter/cell-list";
+import { useStableHtmlContext } from "@cocalc/frontend/jupyter/cell-list";
 import HTML from "./mime-types/html";
 
 // This impact loading the iframe data from the backend project (via the sha1 hash).
@@ -35,9 +35,9 @@ interface Props {
 
 export default function IFrame(props: Props) {
   // we only use cached iframe if the iframecontext is setup, e.g., it is in Jupyter notebooks, but not in whiteboards.
-  const iframeContext = useIFrameContext();
+  const stableHtmlContext = useStableHtmlContext();
   if (
-    iframeContext.iframeDivRef == null ||
+    stableHtmlContext.iframeDivRef == null ||
     props.cacheId == null ||
     !props.trust
   ) {

src/packages/frontend/jupyter/output-messages/stable-unsafe-html.tsx

@@ -27,7 +27,7 @@ the idle timeout is reset.
 import { useCallback, useEffect, useRef } from "react";
 import $ from "jquery";
 import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
-import { useIFrameContext } from "@cocalc/frontend/jupyter/cell-list";
+import { useStableHtmlContext } from "@cocalc/frontend/jupyter/cell-list";
 import { sha1 } from "@cocalc/util/misc";
 import TTL from "@isaacs/ttlcache";
 
@@ -81,7 +81,7 @@ export default function StableUnsafeHtml({
   const divRef = useRef<any>(null);
   const intervalRef = useRef<any>(null);
   const { isVisible, project_id, path, id } = useFrameContext();
-  const iframeContext = useIFrameContext();
+  const stableHtmlContext = useStableHtmlContext();
 
   const globalKey = sha1(`${project_id}-${id}-${docId}-${path}-${html}`);
 
@@ -120,7 +120,7 @@ export default function StableUnsafeHtml({
     //     }px`;
 
     // clip our immortal html so it isn't visible outside the parent
-    const parent = $(iframeContext.cellListDivRef?.current)[0];
+    const parent = $(stableHtmlContext.cellListDivRef?.current)[0];
     if (parent != null) {
       const parentRect = parent.getBoundingClientRect();
       // Calculate the overlap area
@@ -138,7 +138,7 @@ export default function StableUnsafeHtml({
       // scroll work in there though -- if you want to see the whole thing, you
       // must not collapse it.
       const containerRect = $(divRef.current)
-        .closest(".cocalc-jupyter-rendered")[0]
+        .closest(".cocalc-output-div")[0]
         ?.getBoundingClientRect();
       const bottom = Math.max(
         top,
@@ -216,13 +216,13 @@ export default function StableUnsafeHtml({
 
   useEffect(() => {
     // TOOD: can we get rid of interval by using a resize observer on
-    // this iframeContext.cellListDivRef?
+    // this stableHtmlContext.cellListDivRef?
     intervalRef.current = setInterval(
       position,
       POSITION_WHEN_MOUNTED_INTERVAL_MS,
     );
-    if (iframeContext.iframeOnScrolls != null) {
-      iframeContext.iframeOnScrolls[globalKey] = async () => {
+    if (stableHtmlContext.iframeOnScrolls != null) {
+      stableHtmlContext.iframeOnScrolls[globalKey] = async () => {
         position();
         await new Promise(requestAnimationFrame);
         position();
@@ -232,7 +232,7 @@ export default function StableUnsafeHtml({
     setTimeout(position, 0);
 
     return () => {
-      delete iframeContext.iframeOnScrolls?.[globalKey];
+      delete stableHtmlContext.iframeOnScrolls?.[globalKey];
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
       }