Factor out markdown widget rendering

web/cm_plugins/fenced_code.ts

@@ -1,13 +1,13 @@
 import { WidgetContent } from "../../plug-api/app_event.ts";
 import { Decoration, EditorState, syntaxTree, WidgetType } from "../deps.ts";
 import type { Client } from "../client.ts";
-import { CodeWidgetCallback } from "../hooks/code_widget.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;

web/hooks/code_widget.ts

@@ -1,14 +1,11 @@
 import { Hook, Manifest } from "../../plugos/types.ts";
 import { System } from "../../plugos/system.ts";
+import { CodeWidgetCallback } from "$sb/types.ts";
 
 export type CodeWidgetT = {
   codeWidget?: string;
 };
 
-export type CodeWidgetCallback = (
-  bodyText: string,
-) => Promise<{ html: string; script: string }>;
-
 export class CodeWidgetHook implements Hook<CodeWidgetT> {
   codeWidgetCallbacks = new Map<string, CodeWidgetCallback>();
 

web/styles/colors.scss

@@ -216,15 +216,13 @@
     color: var(--editor-line-meta-color);
   }
 
-  .sb-table-widget {
-    thead tr {
-      background-color: var(--editor-table-head-background-color);
-      color: var(--editor-table-head-color);
-    }
+  thead tr {
+    background-color: var(--editor-table-head-background-color);
+    color: var(--editor-table-head-color);
+  }
 
-    tbody tr:nth-of-type(even) {
-      background-color: var(--editor-table-even-background-color);
-    }
+  tbody tr:nth-of-type(even) {
+    background-color: var(--editor-table-even-background-color);
   }
 
   .sb-line-blockquote {

web/styles/editor.scss

@@ -393,22 +393,24 @@
     margin-bottom: -3rem;
     overflow: auto;
 
-    table {
-      width: 100%;
-      border-spacing: 0;
-    }
-
-    thead tr {
-      font-weight: bold;
-    }
-
-    th,
-    td {
-      padding: 8px;
-      white-space: nowrap;
-    }
   }
 
+  table {
+    width: 100%;
+    border-spacing: 0;
+  }
+
+  thead tr {
+    font-weight: bold;
+  }
+
+  th,
+  td {
+    padding: 8px;
+    white-space: nowrap;
+  }
+
+
   // dont apply background color twice for (fenced) code blocks
   .sb-line-code .sb-code {
     background-color: transparent;

web/syscalls/widget.ts

@@ -1,3 +1,4 @@
+import { CodeWidgetContent } from "$sb/types.ts";
 import { SysCallMapping } from "../../plugos/system.ts";
 import { Client } from "../client.ts";
 
@@ -9,7 +10,7 @@ export function widgetSyscalls(
       _ctx,
       lang: string,
       body: string,
-    ): Promise<{ html: string; script: string }> => {
+    ): Promise<CodeWidgetContent> => {
       const langCallback = client.system.codeWidgetHook.codeWidgetCallbacks.get(
         lang,
       );