update some comments and start test of an immortal html component with key to solve some subtle problems with the jupyter html plugin architecture, windowing, splitting frames, etc.

Author: williamstein

src/packages/frontend/editors/slate/elements/codemirror.tsx

@@ -94,7 +94,7 @@ export const SlateCodeMirror: React.FC<Props> = React.memo(
         } else {
           // everything selected, so now select all editor content.
           // NOTE that this only makes sense if we change focus
-          // to the enclosing select editor, thus loosing the
+          // to the enclosing select editor, thus losing the
           // cm editor focus, which is a bit weird.
           ReactEditor.focus(editor);
           selectAll(editor);

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

@@ -1,12 +1,18 @@
 /*
 
-It is completely impossible in modern times to move an iframe in the DOM without loosing state,
-as explained here:
-   https://stackoverflow.com/questions/8318264/how-to-move-an-iframe-in-the-dom-without-losing-its-state
+It is completely impossible in modern times to move an iframe's position in the DOM *tree*
+without losing state, as explained here:
 
-An annoying issue is that if you do shift+tab to get docs or hit the TimeTravel button or anything to
-split the Jupyter frame, then the iframes of course get reset.  That was a problem before this though,
-i.e., it's not special to using windowing.
+https://stackoverflow.com/questions/8318264/how-to-move-an-iframe-in-the-dom-without-losing-its-state
+
+That's what we instead use position absolute, and literally move the iframe's position on the screen.
+We never move it in the dom.
+
+Another unsolved issue is that if you do shift+tab to get docs or hit the TimeTravel button
+or anything to split the Jupyter frame, then the iframes of course get reset.  That was
+a problem before this though, i.e., it's not special to using windowing.  However, it
+is a problem we intend to solve, e.g., maybe we put the iframes somewhere else in the
+DOM and can reuse when rendering the notebook after the frame split happens.
 */
 
 import { Button, Tooltip } from "antd";
@@ -18,7 +24,8 @@ import { delay } from "awaiting";
 import useIsMountedRef from "@cocalc/frontend/app-framework/is-mounted-hook";
 import useResizeObserver from "use-resize-observer";
 
-// This is just an initial default height; the actual height of the iframe resizes to the content.
+// This is just an initial default height; the actual height of the iframe should
+// resize to the content.
 const HEIGHT = "70vh";
 
 interface Props {

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

@@ -29,7 +29,8 @@ interface Props {
 }
 
 export default function IFrame(props: Props) {
-  const iframeContext = useIFrameContext(); // we only use cached iframe if the iframecontext is setup, e.g., it is in Jupyter notebooks, but not in whiteboards.
+  // we only use cached iframe if the iframecontext is setup, e.g., it is in Jupyter notebooks, but not in whiteboards.
+  const iframeContext = useIFrameContext();
   return iframeContext.iframeDivRef == null || props.cacheId == null ? (
     <NonCachedIFrame {...props} />
   ) : (

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

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useRef } from "react";
+import $ from "jquery";
+
+// This is just an initial default height; the actual height of the iframe should
+// resize to the content.
+const HEIGHT = "70vh";
+
+interface Props {
+  key: string;
+  html: string;
+}
+
+const immortals: { [key: string]: any } = {};
+
+export default function Immortal({ key, html }: Props) {
+  const divRef = useRef<any>(null);
+  const eltRef = useRef<any>(null);
+  const intervalRef = useRef<any>(null);
+
+  const position = useCallback(() => {
+    // make it so eltRef.current is exactly positioned on top of divRef.current using CSS
+    if (eltRef.current == null || divRef.current == null) {
+      return;
+    }
+    const eltRect = eltRef.current.getBoundingClientRect();
+    const divRect = divRef.current.getBoundingClientRect();
+    let deltaTop = divRect.top - eltRect.top;
+    if (deltaTop) {
+      if (eltRef.current.style.top) {
+        deltaTop += parseFloat(eltRef.current.style.top.slice(0, -2));
+      }
+      eltRef.current.style.top = `${deltaTop}px`;
+    }
+    let deltaLeft = divRect.left - eltRect.left;
+    if (deltaLeft) {
+      if (eltRef.current.style.left) {
+        deltaLeft += parseFloat(eltRef.current.style.left.slice(0, -2));
+      }
+      eltRef.current.style.left = `${deltaLeft}px`;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (divRef.current == null) {
+      return;
+    }
+    let elt;
+    if (immortals[key] == null) {
+      elt = immortals[key] = $(
+        `<div style="border:0;overflow:hidden;width:100%;height:${HEIGHT};position:absolute;left:130px"/>${html}</div>`,
+      );
+      $("body").append(elt);
+    } else {
+      elt = immortals[key];
+      elt.show();
+    }
+    eltRef.current = elt[0];
+    intervalRef.current = setInterval(position, 500);
+
+    return () => {
+      // unmounting so hide
+      elt.hide();
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+
+  return <div ref={divRef} />;
+}