Remove html writable

qt/aqt/reviewer.py

@@ -1270,7 +1270,7 @@ class SvelteReviewer(Reviewer):
         else:
             maxTime = 0
         self._remaining()
-        self.bottom.web.eval("showQuestion(\"\",%d);" % (maxTime))
+        self.bottom.web.eval('showQuestion("",%d);' % (maxTime))
 
     def _linkHandler(self, url: str) -> None:
         if url == "bottomReady":

ts/routes/reviewer/+page.svelte

@@ -1,10 +1,10 @@
 <script>
     import ReviewerBottomOuter from "./reviewer-bottom/ReviewerBottomOuter.svelte";
-    import ReviewerOuter from "./reviewerOuter.svelte";
+    import Reviewer from "./reviewer.svelte";
 </script>
 
 <div>
-    <ReviewerOuter></ReviewerOuter>
+    <Reviewer></Reviewer>
     <ReviewerBottomOuter></ReviewerBottomOuter>
 </div>
 

ts/routes/reviewer/reviewer.svelte

@@ -1,27 +1,9 @@
 <script lang="ts">
-    import { bridgeCommand } from "@tslib/bridgecommand";
-    import type { Writable } from "svelte/store";
-    import { isNightMode } from "../../html-filter/helpers";
-
-    export let html: Writable<string>;
-    export let cardClass: Writable<string>;
+    import { setupReviewer } from "./reviewer";
 
     let iframe: HTMLIFrameElement;
 
-    html.subscribe(($html) => {
-        if (iframe?.contentDocument) {
-            iframe.contentDocument.body.innerHTML = $html;
-            iframe.contentDocument.head.innerHTML = document.head.innerHTML;
-            iframe.contentDocument.body.className = isNightMode()
-                ? "nightMode card"
-                : "card";
-            iframe.contentDocument.querySelector("html")!.className = isNightMode()
-                ? "night-mode"
-                : "";
-            //@ts-ignore
-            iframe.contentDocument.pycmd = bridgeCommand;
-        }
-    });
+    $: ({ cardClass } = setupReviewer(iframe));
 </script>
 
 <div id="qa" class={$cardClass}>

ts/routes/reviewer/reviewer.ts

@@ -1,18 +1,37 @@
 import { writable } from "svelte/store";
+import { isNightMode } from "../../html-filter/helpers";
 import { preloadAnswerImages } from "../../reviewer/images";
 
-export function setupReviewer() {
-    const html = writable("");
+export function setupReviewer(iframe: HTMLIFrameElement) {
     const cardClass = writable("");
 
+    function updateHtml(htmlString) {
+        if (iframe?.contentDocument) {
+            const nightMode = isNightMode();
+            iframe.contentDocument.body.innerHTML = htmlString;
+            iframe.contentDocument.head.innerHTML = document.head.innerHTML;
+            iframe.contentDocument.body.className = nightMode
+                ? "nightMode card"
+                : "card";
+            const root = iframe.contentDocument.querySelector("html")!;
+            root.className = nightMode
+                ? "night-mode"
+                : "";
+            root.setAttribute("data-bs-theme", nightMode ? "dark" : "light");
+            // @ts-ignore
+            iframe.contentDocument.pycmd = bridgeCommand;
+        }
+    }
+
     function showQuestion(q, a, cc) {
-        html.set(q);
+        updateHtml(q);
+        // html.set(q);
         cardClass.set(cc);
         preloadAnswerImages(a);
     }
 
-    globalThis._showAnswer = html.set;
+    globalThis._showAnswer = updateHtml;
     globalThis._showQuestion = showQuestion;
 
-    return { html, cardClass };
+    return { cardClass };
 }

ts/routes/reviewer/reviewerOuter.svelte

@@ -1,21 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import { onMount } from "svelte";
-    import { setupReviewer } from "./reviewer";
-    import Reviewer from "./reviewer.svelte";
-
-    import "../../reviewer/reviewer.scss";
-
-    let reviewerInfo: null | ReturnType<typeof setupReviewer> = null;
-
-    onMount(() => {
-        reviewerInfo = setupReviewer();
-    });
-</script>
-
-{#if reviewerInfo}
-    <Reviewer {...reviewerInfo}></Reviewer>
-{/if}