Move live query and template rendering outside of iframe

web/cm_plugins/fenced_code.ts

@@ -1,79 +1,12 @@
-import { WidgetContent } from "../../plug-api/app_event.ts";
-import { Decoration, EditorState, syntaxTree, WidgetType } from "../deps.ts";
+import { Decoration, EditorState, syntaxTree } from "../deps.ts";
 import type { Client } from "../client.ts";
 import {
   decoratorStateField,
   invisibleDecoration,
   isCursorInRange,
 } from "./util.ts";
-import { createWidgetSandboxIFrame } from "../components/widget_sandbox_iframe.ts";
-import type { CodeWidgetCallback } from "$sb/types.ts";
-
-class IFrameWidget extends WidgetType {
-  iframe?: HTMLIFrameElement;
-
-  constructor(
-    readonly from: number,
-    readonly to: number,
-    readonly client: Client,
-    readonly bodyText: string,
-    readonly codeWidgetCallback: CodeWidgetCallback,
-  ) {
-    super();
-  }
-
-  toDOM(): HTMLElement {
-    const from = this.from;
-    const iframe = createWidgetSandboxIFrame(
-      this.client,
-      this.bodyText,
-      this.codeWidgetCallback(this.bodyText, this.client.currentPage!),
-      (message) => {
-        switch (message.type) {
-          case "blur":
-            this.client.editorView.dispatch({
-              selection: { anchor: from },
-            });
-            this.client.focus();
-
-            break;
-          case "reload":
-            this.codeWidgetCallback(this.bodyText, this.client.currentPage!)
-              .then(
-                (widgetContent: WidgetContent) => {
-                  iframe.contentWindow!.postMessage({
-                    type: "html",
-                    html: widgetContent.html,
-                    script: widgetContent.script,
-                    theme:
-                      document.getElementsByTagName("html")[0].dataset.theme,
-                  });
-                },
-              );
-            break;
-        }
-      },
-    );
-
-    const estimatedHeight = this.estimatedHeight;
-    iframe.height = `${estimatedHeight}px`;
-
-    return iframe;
-  }
-
-  get estimatedHeight(): number {
-    const cachedHeight = this.client.space.getCachedWidgetHeight(this.bodyText);
-    // console.log("Calling estimated height", cachedHeight);
-    return cachedHeight > 0 ? cachedHeight : 150;
-  }
-
-  eq(other: WidgetType): boolean {
-    return (
-      other instanceof IFrameWidget &&
-      other.bodyText === this.bodyText
-    );
-  }
-}
+import { MarkdownWidget } from "./markdown_widget.ts";
+import { IFrameWidget } from "./iframe_widget.ts";
 
 export function fencedCodePlugin(editor: Client) {
   return decoratorStateField((state: EditorState) => {
@@ -87,6 +20,9 @@ export function fencedCodePlugin(editor: Client) {
           const codeWidgetCallback = editor.system.codeWidgetHook
             .codeWidgetCallbacks
             .get(lang);
+          const renderMode = editor.system.codeWidgetHook.codeWidgetModes.get(
+            lang,
+          );
           if (codeWidgetCallback) {
             // We got a custom renderer!
             const lineStrings = text.split("\n");
@@ -131,15 +67,24 @@ export function fencedCodePlugin(editor: Client) {
               );
             });
 
+            const widget = renderMode === "markdown"
+              ? new MarkdownWidget(
+                from + lineStrings[0].length + 1,
+                to - lineStrings[lineStrings.length - 1].length - 1,
+                editor,
+                lineStrings.slice(1, lineStrings.length - 1).join("\n"),
+                codeWidgetCallback,
+              )
+              : new IFrameWidget(
+                from + lineStrings[0].length + 1,
+                to - lineStrings[lineStrings.length - 1].length - 1,
+                editor,
+                lineStrings.slice(1, lineStrings.length - 1).join("\n"),
+                codeWidgetCallback,
+              );
             widgets.push(
               Decoration.widget({
-                widget: new IFrameWidget(
-                  from + lineStrings[0].length + 1,
-                  to - lineStrings[lineStrings.length - 1].length - 1,
-                  editor,
-                  lineStrings.slice(1, lineStrings.length - 1).join("\n"),
-                  codeWidgetCallback,
-                ),
+                widget: widget,
               }).range(from),
             );
             return false;