Refactor live preview and make it work on safari

articles/static/live-preview.js

@@ -1,34 +1,29 @@
-// Returns a function, that, as long as it continues to be invoked, will not
-// be triggered. The function will be called after it stops being called for
-// N milliseconds. If `immediate` is passed, trigger the function on the
-// leading edge, instead of the trailing.
-function debounce(func, wait, immediate) {
-    var timeout;
-    return function () {
-        var context = this, args = arguments;
-        var later = function () {
-            timeout = null;
-            if (!immediate) func.apply(context, args);
-        };
-        var callNow = immediate && !timeout;
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-        if (callNow) func.apply(context, args);
-    };
-}
-
-let preview = null;
 window.onload = function () {
     const previewButton = document.querySelector("input#_live_preview");
-    previewButton.addEventListener("click", event => {
+    previewButton.addEventListener("click", openPreviewPopup);
+};
+window.onbeforeunload = function () {
+    if (preview !== null) {
+        preview.close();
+    }
+};
+
+let preview = null;
+
+function openPreviewPopup(event) {
     event.preventDefault();
     const params = "width=800,height=1000,menubar=no,toolbar=no,location=no,status=no,resizable=yes,scrollbars=yes";
     if (preview !== null) {
         preview.close();
     }
     preview = window.open("about:blank", "Preview", params);
+
+    setTimeout(loadPreview, 1000);
+    setupLivePreview();
+}
+
+function loadPreview() {
     const id = Number(window.location.pathname.match(/\d+/)[0]);
-        const loadPreview = debounce(function () {
     const body = new FormData();
     const articleContent = document.getElementById("id_content").value;
     body.set("content", articleContent);
@@ -37,20 +32,36 @@ window.onload = function () {
     fetch(`/api/render/${id}/`, {method: "POST", body: body})
         .then(function (response) {
             response.text().then(value => {
-                        preview.document.querySelector("html").innerHTML = value
+                preview.document.open("text/html", "replace");
+                preview.document.write(value);
+                preview.document.close();
             });
         })
-        }, 500);
-        preview.onload = loadPreview;
+}
+
+function setupLivePreview() {
+    const debouncedLoadPreview = debounce(loadPreview, 500);
     const content = document.getElementById("id_content");
     content.addEventListener("input", event => {
         event.preventDefault();
-            loadPreview();
+        debouncedLoadPreview();
     });
-    })
-};
-window.onbeforeunload = function () {
-    if (preview !== null) {
-        preview.close();
 }
+
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * `wait` milliseconds.
+ */
+function debounce(func, wait) {
+    let timeout;
+    return function () {
+        const context = this, args = arguments;
+        const later = function () {
+            timeout = null;
+            func.apply(context, args);
         };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}