feat: add markdown widget

packages/viewer/package.json

@@ -39,6 +39,7 @@
     "@codemirror/lint": "^6.9.0",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-markdown": "6.5.0",
     "@codemirror/theme-one-dark": "^6.1.3",
     "codemirror-json-schema": "^0.8.1",
     "@huggingface/transformers": "^3.7.1",
@@ -47,6 +48,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/typography": "0.5.19",
     "@tsconfig/svelte": "^5.0.4",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",

packages/viewer/src/assets/chart_icons.ts

@@ -4,6 +4,7 @@ import chart_boxplot from "./chart-boxplot.svg?raw";
 import chart_embedding from "./chart-embedding.svg?raw";
 import chart_h_bar from "./chart-h-bar.svg?raw";
 import chart_heatmap from "./chart-heatmap.svg?raw";
+import chart_markdown from "./chart-markdown.svg?raw";
 import chart_predicates from "./chart-predicates.svg?raw";
 import chart_spec from "./chart-spec.svg?raw";
 import chart_stacked from "./chart-stacked.svg?raw";
@@ -18,4 +19,5 @@ export const chartIcons: Record<string, string> = {
   "chart-v-histogram": chart_v_histogram,
   "chart-spec": chart_spec,
   "chart-predicates": chart_predicates,
+  "chart-markdown": chart_markdown,
 };

packages/viewer/src/assets/icons.ts

@@ -2,19 +2,19 @@
 
 export { default as IconPlus } from "~icons/fluent/add-16-filled";
 export { default as IconReset } from "~icons/fluent/arrow-reset-24-filled";
+export { default as IconCheck } from "~icons/fluent/checkmark-16-filled";
 export { default as IconChevronDown, default as IconDown } from "~icons/fluent/chevron-down-16-filled";
 export { default as IconChevronUp, default as IconUp } from "~icons/fluent/chevron-up-16-filled";
 export { default as IconAnnotation } from "~icons/fluent/comment-text-16-filled";
 export { default as IconEmbeddingView } from "~icons/fluent/data-scatter-20-filled";
 export { default as IconClose } from "~icons/fluent/dismiss-16-filled";
 export { default as IconDownload, default as IconExport } from "~icons/fluent/document-arrow-down-16-filled";
 export { default as IconEdit } from "~icons/fluent/edit-16-filled";
+export { default as IconDashboardLayout } from "~icons/fluent/layout-dynamic-20-filled";
+export { default as IconListLayout } from "~icons/fluent/layout-row-four-20-filled";
 export { default as IconTable } from "~icons/fluent/panel-bottom-20-filled";
 export { default as IconMenu } from "~icons/fluent/panel-right-20-filled";
 export { default as IconSearch } from "~icons/fluent/search-16-filled";
 export { default as IconSettings } from "~icons/fluent/settings-16-filled";
 export { default as IconDarkMode } from "~icons/fluent/weather-moon-16-filled";
 export { default as IconLightMode } from "~icons/fluent/weather-sunny-16-filled";
-
-export { default as IconDashboardLayout } from "~icons/fluent/layout-dynamic-20-filled";
-export { default as IconListLayout } from "~icons/fluent/layout-row-four-20-filled";

packages/viewer/src/charts/basic/Markdown.svelte

@@ -0,0 +1,31 @@
+<!-- Copyright (c) 2025 Apple Inc. Licensed under MIT License. -->
+<script lang="ts">
+  import { marked } from "marked";
+
+  import CodeEditor from "../../widgets/CodeEditor.svelte";
+  import Input from "../../widgets/Input.svelte";
+  import Container from "../common/Container.svelte";
+
+  import type { ChartViewProps } from "../chart.js";
+  import type { MarkdownSpec } from "./types.js";
+
+  let { spec, width, height, mode, onSpecChange }: ChartViewProps<MarkdownSpec, {}> = $props();
+</script>
+
+{#if mode == "view"}
+  <Container width={width} height={height} scrollY={true} class="prose dark:prose-invert max-w-none">
+    {@html marked(spec.content ?? "", { async: false })}
+  </Container>
+{:else}
+  <Container width={width} height={height} class="flex flex-col gap-2">
+    <Input bind:value={() => spec.title ?? "", (value) => onSpecChange({ title: value })} />
+    <CodeEditor
+      value={spec.content}
+      class={height == null ? "h-64" : "flex-1"}
+      language="markdown"
+      onChange={(value) => {
+        onSpecChange({ content: value });
+      }}
+    />
+  </Container>
+{/if}

packages/viewer/src/charts/basic/types.ts

@@ -66,3 +66,9 @@ export interface PredicatesSpec {
   title?: string;
   items?: { name: string; predicate: string }[];
 }
+
+export interface MarkdownSpec {
+  type: "markdown";
+  title?: string;
+  content: string;
+}

packages/viewer/src/charts/builder/Builder.svelte

@@ -178,6 +178,7 @@
             spec={localChartSpec}
             state={localChartState ?? {}}
             width={"container"}
+            mode="view"
             onStateChange={(update, mode = "merge") => {
               applyUpdatesIfNeeded(localChartState ?? {}, update, mode, (r) => (localChartState = r));
             }}

packages/viewer/src/charts/chart.ts

@@ -130,6 +130,9 @@ export interface ChartViewProps<Spec = unknown, State = unknown> {
    */
   state: State;
 
+  /** The mode of the chart view. The view can decide how to interpret this. */
+  mode: "view" | "edit";
+
   /**
    * Callback for when the state changes.
    * The default update mode is "merge", where the new state is recursively merged into the existing state.