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 ( -