@rokkit/ui 1.0.0-next.148 → 1.0.0-next.149

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.148",
+  "version": "1.0.0-next.149",
   "description": "Data driven UI components for Rokkit applications",
   "repository": {
     "type": "git",
@@ -46,7 +46,9 @@
     "@rokkit/core": "latest",
     "@rokkit/data": "latest",
     "@rokkit/states": "latest",
-    "@rokkit/actions": "latest"
+    "@rokkit/actions": "latest",
+    "marked": "^15.0.0",
+    "isomorphic-dompurify": "^2.0.0"
   },
   "peerDependencies": {
     "shiki": "^3.23.0",

package/src/MarkdownRenderer.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { marked } from 'marked'
+  import type { Token } from 'marked'
+  import DOMPurify from 'isomorphic-dompurify'
+  import type { MarkdownPlugin } from './markdown-plugin.js'
+
+  interface Props {
+    markdown: string
+    plugins?: MarkdownPlugin[]
+  }
+
+  let { markdown, plugins = [] }: Props = $props()
+
+  const pluginMap = $derived(
+    Object.fromEntries(plugins.map((p) => [p.language.toLowerCase(), p.component]))
+  )
+
+  const tokens = $derived(marked.lexer(markdown))
+
+  function tokenToSafeHtml(token: Token): string {
+    const tokenList = Object.assign([token], { links: (tokens as any).links ?? {} })
+    const raw = marked.parser(tokenList as any)
+    return DOMPurify.sanitize(raw)
+  }
+</script>
+
+<div class="markdown-renderer" data-markdown>
+  {#each tokens as token, i (i)}
+    {#if token.type === 'code'}
+      {@const lang = (token.lang ?? '').toLowerCase()}
+      {@const Plugin = pluginMap[lang]}
+      {#if Plugin}
+        <Plugin code={token.text} />
+      {:else}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html tokenToSafeHtml(token)}
+      {/if}
+    {:else}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+      {@html tokenToSafeHtml(token)}
+    {/if}
+  {/each}
+</div>

package/src/index.ts

@@ -43,6 +43,9 @@ export {
 	AlertList
 } from './components/index.js'
 
+export { default as MarkdownRenderer } from './MarkdownRenderer.svelte'
+export type { MarkdownPlugin } from './markdown-plugin.js'
+
 // Utilities
 export { highlightCode, preloadHighlighter, getSupportedLanguages } from './utils/shiki.js'
 export * from './utils/palette.js'

package/src/markdown-plugin.ts

@@ -0,0 +1,12 @@
+import type { Component } from 'svelte'
+
+/**
+ * A plugin that renders a fenced code block as a Svelte component.
+ * The component receives { code: string } as props.
+ */
+export interface MarkdownPlugin {
+  /** Fenced code block language to match (e.g. 'plot', 'table', 'sparkline') */
+  language: string
+  /** Svelte component to render the block. Receives { code: string } */
+  component: Component<{ code: string }>
+}