Rebuilt frontmatter templates as template widgets

web/cm_plugins/fenced_code.ts

@@ -8,6 +8,7 @@ import {
 } from "./util.ts";
 import { MarkdownWidget } from "./markdown_widget.ts";
 import { IFrameWidget } from "./iframe_widget.ts";
+import { isTemplate } from "$sb/lib/cheap_yaml.ts";
 
 export function fencedCodePlugin(editor: Client) {
   return decoratorStateField((state: EditorState) => {
@@ -27,7 +28,8 @@ export function fencedCodePlugin(editor: Client) {
           const renderMode = editor.system.codeWidgetHook.codeWidgetModes.get(
             lang,
           );
-          if (codeWidgetCallback) {
+          // Only custom render when we have a custom renderer, and the current page is not a template
+          if (codeWidgetCallback && !isTemplate(state.sliceDoc(0, from))) {
             // We got a custom renderer!
             const lineStrings = text.split("\n");
 

web/cm_plugins/iframe_widget.ts

@@ -35,14 +35,23 @@ export class IFrameWidget extends WidgetType {
           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,
-                  });
+                (widgetContent: WidgetContent | null) => {
+                  if (widgetContent === null) {
+                    iframe.contentWindow!.postMessage({
+                      type: "html",
+                      html: "",
+                      theme:
+                        document.getElementsByTagName("html")[0].dataset.theme,
+                    });
+                  } else {
+                    iframe.contentWindow!.postMessage({
+                      type: "html",
+                      html: widgetContent.html,
+                      script: widgetContent.script,
+                      theme:
+                        document.getElementsByTagName("html")[0].dataset.theme,
+                    });
+                  }
                 },
               );
             break;

web/cm_plugins/markdown_widget.ts

@@ -27,12 +27,10 @@ export class MarkdownWidget extends WidgetType {
     div.className = this.className;
     const cacheItem = this.client.getWidgetCache(this.cacheKey);
     if (cacheItem) {
-      div.innerHTML = this.wrapHtml(
-        cacheItem.html,
-        cacheItem.buttons || [],
-        cacheItem.banner,
-      );
-      this.attachListeners(div, cacheItem.buttons);
+      div.innerHTML = this.wrapHtml(cacheItem.html, cacheItem.buttons);
+      if (cacheItem.html) {
+        this.attachListeners(div, cacheItem.buttons);
+      }
     }
 
     // Async kick-off of content renderer
@@ -90,6 +88,7 @@ export class MarkdownWidget extends WidgetType {
       },
       preserveAttributes: true,
     });
+    // console.log("Got html", html);
 
     if (cachedHtml === html) {
       // HTML still same as in cache, no need to re-render
@@ -97,10 +96,11 @@ export class MarkdownWidget extends WidgetType {
     }
     div.innerHTML = this.wrapHtml(
       html,
-      widgetContent.buttons || [],
-      widgetContent.banner,
+      widgetContent.buttons,
     );
-    this.attachListeners(div, widgetContent.buttons);
+    if (html) {
+      this.attachListeners(div, widgetContent.buttons);
+    }
 
     // Let's give it a tick, then measure and cache
     setTimeout(() => {
@@ -110,7 +110,6 @@ export class MarkdownWidget extends WidgetType {
           height: div.offsetHeight,
           html,
           buttons: widgetContent.buttons,
-          banner: widgetContent.banner,
         },
       );
       // Because of the rejiggering of the DOM, we need to do a no-op cursor move to make sure it's positioned correctly
@@ -124,8 +123,7 @@ export class MarkdownWidget extends WidgetType {
 
   private wrapHtml(
     html: string,
-    buttons: CodeWidgetButton[],
-    banner?: string,
+    buttons: CodeWidgetButton[] = [],
   ) {
     if (!html) {
       return "";
@@ -134,9 +132,7 @@ export class MarkdownWidget extends WidgetType {
       buttons.filter((button) => !button.widgetTarget).map((button, idx) =>
         `<button data-button="${idx}" title="${button.description}">${button.svg}</button> `
       ).join("")
-    }</div>${
-      banner ? `<div class="sb-banner">${escapeHtml(banner)}</div>` : ""
-    }${html}`;
+    }</div>${html}`;
   }
 
   private attachListeners(div: HTMLElement, buttons?: CodeWidgetButton[]) {
@@ -255,10 +251,3 @@ function garbageCollectWidgets() {
 }
 
 setInterval(garbageCollectWidgets, 5000);
-
-function escapeHtml(text: string) {
-  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(
-    />/g,
-    "&gt;",
-  );
-}

web/cm_plugins/top_bottom_panels.ts

@@ -17,7 +17,7 @@ export function postScriptPrefacePlugin(
             undefined,
             editor,
             `top:${editor.currentPage}`,
-            "",
+            "top",
             topCallback,
             "sb-markdown-top-widget",
           ),
@@ -34,7 +34,7 @@ export function postScriptPrefacePlugin(
             undefined,
             editor,
             `bottom:${editor.currentPage}`,
-            "",
+            "bottom",
             bottomCallback,
             "sb-markdown-bottom-widget",
           ),