From aacaca53b29460473bd30b861527dee097a4e49b Mon Sep 17 00:00:00 2001 From: Jason Siefken Date: Thu, 1 Aug 2024 14:23:53 -0400 Subject: [PATCH] Fix `window undefined` issue (#227) --- .../components/iframe-doenetml.tsx | 83 +------------------ packages/docs-nextra/package.json | 1 + packages/docs-nextra/pages/reference/_meta.ts | 2 - .../introdTutorial/iT1-9-sliders.mdx | 6 +- .../pages/tutorials/quickStart.mdx | 6 +- packages/docs-nextra/tsconfig.json | 2 +- .../vite.config-iframe-editor.ts | 3 +- .../vite.config-iframe-viewer.ts | 3 +- .../src/virtual-keyboard/keyboard-tray.tsx | 4 +- .../virtual-keyboard/unique-keyboard-tray.tsx | 18 ++-- 10 files changed, 27 insertions(+), 101 deletions(-) diff --git a/packages/docs-nextra/components/iframe-doenetml.tsx b/packages/docs-nextra/components/iframe-doenetml.tsx index 8ec9bf311..7677965fc 100644 --- a/packages/docs-nextra/components/iframe-doenetml.tsx +++ b/packages/docs-nextra/components/iframe-doenetml.tsx @@ -1,51 +1,11 @@ import React from "react"; +import { DoenetViewer } from "@doenet/doenetml-iframe"; +import "@doenet/virtual-keyboard/style.css"; /** * Render DoenetML in an iframe so that its styling/state is completely isolated from the page. */ export function IframeDoenetML({ children }: React.PropsWithChildren<{}>) { - const ref = React.useRef(null); - const [height, setHeight] = React.useState("0px"); - - const onLoad = () => { - const iframe = - ref.current?.contentWindow?.document?.body?.parentElement; - if (!iframe) { - return; - } - setHeight(iframe.scrollHeight + "px"); - - const updateHeight = () => { - const iframe = - ref.current?.contentWindow?.document?.body?.parentElement; - if (!iframe) { - return; - } - const newHeight = iframe.scrollHeight + "px"; - if (newHeight !== height) { - setHeight(newHeight); - } - }; - - const observer = new MutationObserver(updateHeight); - observer.observe(iframe, { - attributes: true, - childList: true, - subtree: true, - }); - - // The mutation observer might not catch all resize changes, so we poll as well. - const interval = setInterval(updateHeight, 500); - - return () => { - observer.disconnect(); - clearInterval(interval); - }; - }; - React.useEffect(() => { - return onLoad(); - }, []); - if (typeof children !== "string") { console.error( "Error with DoenetML component. Expected a string child containing DoenetML source code, but found", @@ -59,42 +19,5 @@ export function IframeDoenetML({ children }: React.PropsWithChildren<{}>) { ); } - return ( -