A whole lot of enhancements

2022-04-04 15:25:07 +02:00
parent 16577c8ea2
commit a7cd3ea7e0
26 changed files with 322 additions and 181 deletions
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link href="panel.scss" rel="stylesheet" />
+    <base target="_top">
+    <script type="module">
+        window.addEventListener("message", (message) => {
+            const data = message.data;
+            switch(data.type) {
+                case "html":
+                    document.body.innerHTML = data.html;
+                    break;
+            }
+        })
+    </script>
+</head>
+<body>
+Send me HTML
+</body>
+</html>
@@ -0,0 +1,4 @@
+body {
+  background: white;
+  font-family: "Menlo";
+}
@@ -1,12 +1,32 @@
-import { useRef } from "react";
+import {useEffect, useRef} from "react";
+// @ts-ignore
+import iframeHtml from "bundle-text:./panel.html";
+import {Simulate} from "react-dom/test-utils";

 export function Panel({ html }: { html: string }) {
  const iFrameRef = useRef<HTMLIFrameElement>(null);
-  // @ts-ignore
-  window.iframeRef = iFrameRef;
+  useEffect(() => {
+    function loadContent() {
+      if (iFrameRef.current?.contentWindow) {
+        iFrameRef.current.contentWindow.postMessage({
+          type: "html",
+          html: html,
+        });
+      }
+    }
+    if (!iFrameRef.current) {
+      return;
+    }
+    let iframe = iFrameRef.current;
+    iframe.onload = loadContent;
+    loadContent();
+    return () => {
+      iframe.onload = null;
+    };
+  }, [html]);
  return (
    <div className="panel">
-      <iframe srcDoc={html} ref={iFrameRef} />
+      <iframe srcDoc={iframeHtml} ref={iFrameRef} />
    </div>
  );
 }
@@ -1,4 +1,4 @@
-import { EditorView } from "@codemirror/view";
+import {EditorView} from "@codemirror/view";
 import * as util from "../util";

 export function StatusBar({ editorView }: { editorView?: EditorView }) {
@@ -11,7 +11,9 @@ export function StatusBar({ editorView }: { editorView?: EditorView }) {
  }
  return (
    <div id="bottom">
-      {wordCount} words | {readingTime} min
+      <div className="inner">
+        {wordCount} words | {readingTime} min
+      </div>
    </div>
  );
 }