diff --git a/src/components/CodeEmbed/frame.tsx b/src/components/CodeEmbed/frame.tsx index 5119efad58..3880d93b63 100644 --- a/src/components/CodeEmbed/frame.tsx +++ b/src/components/CodeEmbed/frame.tsx @@ -1,4 +1,4 @@ -import { useRef, useLayoutEffect } from 'preact/hooks'; +import { useRef, useLayoutEffect, useEffect } from "preact/hooks"; import { p5VersionForEmbeds } from "@/src/globals/globals"; /* @@ -33,7 +33,20 @@ ${code.css || ""} ${code.htmlBody || ""} - + `.replace(/\u00A0/g, " "); export interface CodeFrameProps { @@ -52,6 +65,7 @@ export interface CodeFrameProps { export const CodeFrame = (props: CodeFrameProps) => { const iframeRef = useRef(null); const containerRef = useRef(null); + const p5ScriptTag = document.getElementById('p5ScriptTag') as HTMLScriptElement; // For performance, set the iframe to display:none when // not visible on the page. This will stop the browser @@ -78,6 +92,31 @@ export const CodeFrame = (props: CodeFrameProps) => { return () => observer.disconnect(); }, []); + useEffect(() => { + (async () => { + if (!p5ScriptTag || !iframeRef.current) return; + + /* + * Uses postMessage to receive the text content of p5.min.js, to be included + * in a script so p5.js functions can be called. + * + * Rather than including the script with