sandbox iframe and use ts-page

build/configure/src/web.rs

@@ -228,6 +228,17 @@ fn build_and_check_pages(build: &mut Build) -> Result<()> {
             ":sveltekit"
         ],
     )?;
+    build_page(
+        "reviewer-inner",
+        true,
+        inputs![
+            //
+            ":ts:lib",
+            ":ts:components",
+            ":sass",
+            ":sveltekit"
+        ],
+    )?;
 
     Ok(())
 }

qt/aqt/mediasrv.py

@@ -335,7 +335,6 @@ def is_sveltekit_page(path: str) -> bool:
         "import-page",
         "image-occlusion",
         "reviewer",
-        "reviewer-inner",
     ]
 
 

ts/routes/reviewer-inner/+page.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-    import "../../reviewer/reviewer.scss";
-
-    addEventListener("message", (e) => {
-        switch (e.data.type) {
-            case "html":
-                document.body.innerHTML = e.data.value;
-                break;
-            case "nightMode":
-                // This method currently "Flashbangs" the user if they have nightmode on and is a placeholder
-                // I will probably use #night-mode in the url.
-                const root = document.querySelector("html")!;
-                const nightMode = e.data.value;
-                if (e.data.value) {
-                    root.classList.add("night-mode");
-                } else {
-                    root.classList.remove("night-mode");
-                }
-                document.body.className = nightMode ? "nightMode card" : "card";
-                root.className = nightMode ? "night-mode" : "";
-                root.setAttribute("data-bs-theme", nightMode ? "dark" : "light");
-                break;
-            default:
-                console.warn(`Unknown message type: ${e.data.type}`);
-                break;
-        }
-    });
-
-    window.parent.postMessage({ type: "ready" });
-</script>

ts/routes/reviewer-inner/index.ts

@@ -0,0 +1,26 @@
+import "../../reviewer/reviewer.scss"
+
+addEventListener("message", (e) => {
+    switch (e.data.type) {
+        case "html":
+            document.body.innerHTML = e.data.value;
+            break;
+        case "nightMode":
+            // This method currently "Flashbangs" the user if they have nightmode on and is a placeholder
+            // I will probably use #night-mode in the url.
+            const root = document.querySelector("html")!;
+            const nightMode = e.data.value;
+            if (e.data.value) {
+                root.classList.add("night-mode");
+            } else {
+                root.classList.remove("night-mode");
+            }
+            document.body.className = nightMode ? "nightMode card" : "card";
+            root.className = nightMode ? "night-mode" : "";
+            root.setAttribute("data-bs-theme", nightMode ? "dark" : "light");
+            break;
+        default:
+            console.warn(`Unknown message type: ${e.data.type}`);
+            break;
+    }
+});

ts/routes/reviewer/Reviewer.svelte

@@ -8,10 +8,11 @@
 
 <div id="qa" class={$cardClass}>
     <iframe
-        src="/reviewer-inner"
+        src="/_anki/pages/reviewer-inner.html"
         bind:this={iframe}
         title="card"
         frameborder="0"
+        sandbox="allow-scripts"
     ></iframe>
 </div>
 

ts/routes/reviewer/reviewer.ts

@@ -6,7 +6,7 @@ export function setupReviewer(iframe: HTMLIFrameElement) {
     const cardClass = writable("");
 
     function updateHtml(htmlString) {
-        iframe.contentWindow?.postMessage({ type: "html", value: htmlString });
+        iframe.contentWindow?.postMessage({ type: "html", value: htmlString }, "*");
     }
 
     function showQuestion(q, a, cc) {
@@ -16,7 +16,14 @@ export function setupReviewer(iframe: HTMLIFrameElement) {
         preloadAnswerImages(a);
     }
 
-    addEventListener("message", (e) => {
+    function onReady() {
+        bridgeCommand("bottomReady");
+        iframe.contentWindow?.postMessage({ type: "nightMode", value: true }, "*");
+    }
+
+    iframe?.addEventListener("load", onReady)
+
+    /* addEventListener("message", (e) => {
         switch (e.data.type) {
             case "ready":
                 // TODO This should probably be a "ready" command now that it is part of the actual reviewer,
@@ -29,7 +36,7 @@ export function setupReviewer(iframe: HTMLIFrameElement) {
                 console.warn(`Unknown message type: ${e.data.type}`);
                 break;
         }
-    });
+    }); */
 
     globalThis._showAnswer = updateHtml;
     globalThis._showQuestion = showQuestion;