feat: update markdown renderer

Replace svelte-markdown with svelte-exmarkdown, with custom tauri link renderer and code highlight support

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kksh/desktop",
-	"version": "0.1.33",
+	"version": "0.1.34",
 	"description": "",
 	"type": "module",
 	"scripts": {

packages/extensions/demo-worker-template-ext/src/index.ts

@@ -86,42 +86,22 @@ class ExtensionTemplate extends TemplateUiCommand {
 	}
 
 	async load() {
+		return ui.render(
+			new Markdown(`
+# Hello World
+
+[GitHub HuakunShen](https://github.com/HuakunShen)
+
+![](https://github.com/huakunshen.png)
+
+<img src="https://github.com/huakunshen.png" />
+
+			`)
+		)
 		ui.setSearchBarPlaceholder("Search for items")
 		const sections = getSections(2)
 		const items = getItems(5)
-		return ui.render(
-			new List.List({
-				items: items.map(
-					(item) =>
-						new List.Item({
-							title: item.name,
-							value: item.id
-							// icon: new Icon({
-							// 	type: IconType.enum.Iconify,
-							// 	value: "mingcute:appstore-fill"
-							// })
-						})
-				),
-				sections: sections.map(
-					(section) =>
-						new List.Section({
-							title: section.name,
-							items: section.items.map(
-								(item) =>
-									new List.Item({
-										title: item.name,
-										value: item.id
-									})
-							)
-						})
-				)
-			})
-		)
 		ui.showLoadingBar(true)
-		setTimeout(() => {
-			ui.showLoadingBar(false)
-			clipboard.paste()
-		}, 2000)
 		const extPath = await path.extensionDir()
 		const cmd = shell.createCommand("deno", ["run", "/Users/hk/Dev/kunkun/deno.ts"])
 		cmd.stdout.on("data", (data) => {
@@ -189,9 +169,13 @@ class ExtensionTemplate extends TemplateUiCommand {
 					]),
 					new Markdown(`
 # Hello World
+
+[GitHub HuakunShen](https://github.com/HuakunShen)
+
+![](https://github.com/huakunshen.png)
+
 <img src="https://github.com/huakunshen.png" />
-<img src="https://github.com/huakunshen.png" />
+
-<img src="https://github.com/huakunshen.png" />
 `)
 				],
 				width: 50

packages/tauri-plugins/jarvis/permissions/autogenerated/reference.md

@@ -1,3 +1,4 @@
+
 ## Permission Table
 
 <table>
@@ -6,6 +7,7 @@
 <th>Description</th>
 </tr>
 
+
 <tr>
 <td>
 

packages/ui/package.json

@@ -93,11 +93,11 @@
 		"pretty-bytes": "^6.1.1",
 		"rehype-class-names": "^2.0.0",
 		"rehype-katex": "^7.0.1",
+		"rehype-raw": "^7.0.0",
 		"remark-math": "^6.0.0",
 		"shiki-magic-move": "^0.5.2",
 		"svelte-exmarkdown": "^4.0.3",
 		"svelte-inspect-value": "^0.3.0",
-		"svelte-markdown": "^0.4.1",
 		"svelte-motion": "^0.12.2",
 		"valibot": "1.0.0-beta.12"
 	}

packages/ui/src/components/common/TauriLink.svelte

@@ -5,36 +5,46 @@
 	import type { HTMLAttributes } from "svelte/elements"
 	import { open } from "tauri-plugin-shellx-api"
 
-	const {
+	let {
 		href,
 		class: className = "",
-		children
+		style,
+		children,
+		ref = $bindable(null)
 	}: {
-		href: string
+		href?: string
+		style?: HTMLAttributes<HTMLAnchorElement>["style"]
 		class?: HTMLAttributes<HTMLAnchorElement>["class"]
 		children: Snippet
+		ref: HTMLAnchorElement | HTMLButtonElement | null
 	} = $props()
 
 	// @ts-expect-error window.__TAURI_INTERNALS__ is not defined in the browser
 	const isInTauri = browser ? !!window.__TAURI_INTERNALS__ : false
 	function handleClick() {
+		if (href) {
 			open(href)
 		}
+	}
 </script>
 
 {#if isInTauri}
 	<button
+		bind:this={ref}
 		class={cn(
 			"text-left font-medium text-blue-600 hover:cursor-pointer hover:underline dark:text-blue-500",
 			className
 		)}
+		{style}
 		onclick={handleClick}
 	>
 		{@render children?.()}
 	</button>
 {:else}
 	<a
+		bind:this={ref}
 		{href}
+		{style}
 		target="_blank"
 		class={cn(
 			"text-left font-medium text-blue-600 hover:cursor-pointer hover:underline dark:text-blue-500",

packages/ui/src/components/extension/templates/Markdown.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { cn } from "@kksh/ui/utils"
-	import SvelteMarkdown from "svelte-markdown"
+	import Markdown from "../../markdown/Markdown.svelte"
 
 	const { markdown, class: className }: { markdown: string; class?: string } = $props()
 </script>
 
 <div class={cn("prose dark:prose-invert", className)}>
-	<SvelteMarkdown source={markdown} />
+	<Markdown md={markdown} />
 </div>

packages/ui/src/components/markdown/A.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Button } from "@kksh/svelte5"
+	import { CopyIcon } from "lucide-svelte"
+	import type { Snippet } from "svelte"
+	import TauriLink from "../common/TauriLink.svelte"
+
+	let a: HTMLAnchorElement | HTMLButtonElement | null = $state(null)
+
+	let {
+		children,
+		class: className,
+		href,
+		style,
+		...rest
+	}: { children: Snippet; href?: string; class?: string; style?: string } = $props()
+</script>
+
+<TauriLink {href} class={className} {style} bind:ref={a}>{@render children()}</TauriLink>

packages/ui/src/components/markdown/Markdown.svelte

@@ -2,6 +2,7 @@
 	import rehypeShikiFromHighlighter from "@shikijs/rehype/core"
 	import rehypeClassNames from "rehype-class-names"
 	import rehypeKatex from "rehype-katex"
+	import rehypeRaw from "rehype-raw"
 	import remarkMath from "remark-math"
 	import { createHighlighterCoreSync } from "shiki/core"
 	import { createJavaScriptRegexEngine } from "shiki/engine/javascript"
@@ -26,6 +27,8 @@
 	import githubDarkDefault from "shiki/themes/github-dark-default.mjs"
 	import Markdown from "svelte-exmarkdown"
 	import type { Plugin } from "svelte-exmarkdown"
+	import { gfmPlugin } from "svelte-exmarkdown/gfm"
+	import A from "./A.svelte"
 	import Pre from "./Pre.svelte"
 
 	const addClass: Plugin = {
@@ -72,9 +75,11 @@
 
 	const plugins: Plugin[] = [
 		shikiPlugin,
+		gfmPlugin(),
+		{ rehypePlugin: [rehypeRaw] },
 		{ remarkPlugin: [remarkMath], rehypePlugin: [rehypeKatex] },
 		addClass,
-		{ renderer: { pre: Pre } }
+		{ renderer: { pre: Pre, a: A } }
 	]
 
 	let { md }: { md: string } = $props()

pnpm-lock.yaml

@@ -1259,6 +1259,9 @@ importers:
       rehype-katex:
         specifier: ^7.0.1
         version: 7.0.1
+      rehype-raw:
+        specifier: ^7.0.0
+        version: 7.0.0
       remark-math:
         specifier: ^6.0.0
         version: 6.0.0
@@ -1274,9 +1277,6 @@ importers:
       svelte-inspect-value:
         specifier: ^0.3.0
         version: 0.3.0(svelte@5.20.5)
-      svelte-markdown:
-        specifier: ^0.4.1
-        version: 0.4.1(svelte@5.20.5)
       svelte-motion:
         specifier: ^0.12.2
         version: 0.12.2(svelte@5.20.5)
@@ -5525,9 +5525,6 @@ packages:
   '@types/mapbox__vector-tile@1.3.4':
     resolution: {integrity: sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==}
 
-  '@types/marked@5.0.2':
-    resolution: {integrity: sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg==}
-
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -8222,6 +8219,9 @@ packages:
   hast-util-parse-selector@4.0.0:
     resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
 
+  hast-util-raw@9.1.0:
+    resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}
+
   hast-util-select@6.0.4:
     resolution: {integrity: sha512-RqGS1ZgI0MwxLaKLDxjprynNzINEkRHY2i8ln4DDjgv9ZhcYVIHN9rlpiYsqtFwrgpYU361SyWDQcGNIBVu3lw==}
 
@@ -8231,6 +8231,9 @@ packages:
   hast-util-to-html@9.0.5:
     resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
 
+  hast-util-to-parse5@8.0.0:
+    resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
+
   hast-util-to-string@3.0.1:
     resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
 
@@ -9052,11 +9055,6 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
-  marked@5.1.2:
-    resolution: {integrity: sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==}
-    engines: {node: '>= 16'}
-    hasBin: true
-
   mdast-util-find-and-replace@3.0.2:
     resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
@@ -10620,6 +10618,9 @@ packages:
   rehype-katex@7.0.1:
     resolution: {integrity: sha512-OiM2wrZ/wuhKkigASodFoo8wimG3H12LWQaH8qSPVJn9apWKFSH3YOCtbKpBorTVw/eI7cuT21XBbvwEswbIOA==}
 
+  rehype-raw@7.0.0:
+    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
@@ -11230,11 +11231,6 @@ packages:
     peerDependencies:
       svelte: ^5.19.0
 
-  svelte-markdown@0.4.1:
-    resolution: {integrity: sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==}
-    peerDependencies:
-      svelte: ^4.0.0
-
   svelte-motion@0.12.2:
     resolution: {integrity: sha512-7RrdRz9iVP55B9HT/C0hYW3pyrKlF61kAby/AkDtOAP0uHFQDrfd0qQetDC81cEsK9b40jt+jfcqSAXcA7LPEw==}
     peerDependencies:
@@ -13819,7 +13815,7 @@ snapshots:
   '@eslint/config-array@0.19.2':
     dependencies:
       '@eslint/object-schema': 2.1.6
-      debug: 4.4.0(supports-color@9.4.0)
+      debug: 4.4.0
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -13861,7 +13857,7 @@ snapshots:
   '@eslint/eslintrc@3.3.0':
     dependencies:
       ajv: 6.12.6
-      debug: 4.4.0(supports-color@9.4.0)
+      debug: 4.4.0
       espree: 10.3.0
       globals: 14.0.0
       ignore: 5.3.2
@@ -14227,7 +14223,7 @@ snapshots:
       '@lix-js/client': 2.2.1
       '@lix-js/fs': 2.2.0
       '@sinclair/typebox': 0.31.28
-      debug: 4.4.0(supports-color@9.4.0)
+      debug: 4.4.0
       dedent: 1.5.1(babel-plugin-macros@3.1.0)
       deepmerge-ts: 5.1.0
       murmurhash3js: 3.0.1
@@ -14251,7 +14247,7 @@ snapshots:
       '@lix-js/client': 2.2.1
       '@lix-js/fs': 2.2.0
       '@sinclair/typebox': 0.31.28
-      debug: 4.4.0(supports-color@9.4.0)
+      debug: 4.4.0
       dedent: 1.5.1(babel-plugin-macros@3.1.0)
       deepmerge-ts: 5.1.0
       murmurhash3js: 3.0.1
@@ -14275,7 +14271,7 @@ snapshots:
       '@lix-js/client': 2.2.1
       '@lix-js/fs': 2.2.0
       '@sinclair/typebox': 0.31.28
-      debug: 4.4.0(supports-color@9.4.0)
+      debug: 4.4.0
       dedent: 1.5.1(babel-plugin-macros@3.1.0)
       deepmerge-ts: 5.1.0
       murmurhash3js: 3.0.1
@@ -17140,7 +17136,7 @@ snapshots:
   '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.5)(vite@6.2.0(@types/node@22.13.1)(jiti@2.4.0)(terser@5.36.0)(yaml@2.6.1)))(svelte@5.20.5)(vite@6.2.0(@types/node@22.13.1)(jiti@2.4.0)(terser@5.36.0)(yaml@2.6.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.20.5)(vite@6.2.0(@types/node@22.13.1)(jiti@2.4.0)(terser@5.36.0)(yaml@2.6.1))
-      debug: 4.4.0(supports-color@9.4.0)
+      debug: 4.4.0
       svelte: 5.20.5
       vite: 6.2.0(@types/node@22.13.1)(jiti@2.4.0)(terser@5.36.0)(yaml@2.6.1)
     transitivePeerDependencies:
@@ -17162,7 +17158,7 @@ snapshots:
   '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.5)(vite@6.2.0(@types/node@22.13.1)(jiti@2.4.0)(terser@5.36.0)(yaml@2.6.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.5)(vite@6.2.0(@types/node@22.13.1)(jiti@2.4.0)(terser@5.36.0)(yaml@2.6.1)))(svelte@5.20.5)(vite@6.2.0(@types/node@22.13.1)(jiti@2.4.0)(terser@5.36.0)(yaml@2.6.1))
-      debug: 4.4.0(supports-color@9.4.0)
+      debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
@@ -17677,8 +17673,6 @@ snapshots:
       '@types/mapbox__point-geometry': 0.1.4
       '@types/pbf': 3.0.5
 
-  '@types/marked@5.0.2': {}
-
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -17916,7 +17910,7 @@ snapshots:
       '@typescript-eslint/types': 8.20.0
       '@typescript-eslint/typescript-estree': 8.20.0(typescript@5.7.3)
       '@typescript-eslint/visitor-keys': 8.20.0
-      debug: 4.4.0(supports-color@9.4.0)
+      debug: 4.4.0
       eslint: 9.21.0(jiti@2.4.0)
       typescript: 5.7.3
     transitivePeerDependencies:
@@ -17993,7 +17987,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 8.20.0(typescript@5.7.3)
       '@typescript-eslint/utils': 8.20.0(eslint@9.21.0(jiti@2.4.0))(typescript@5.7.3)
-      debug: 4.4.0(supports-color@9.4.0)
+      debug: 4.4.0
       eslint: 9.21.0(jiti@2.4.0)
       ts-api-utils: 2.0.0(typescript@5.7.3)
       typescript: 5.7.3
@@ -18078,7 +18072,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 8.20.0
       '@typescript-eslint/visitor-keys': 8.20.0
-      debug: 4.4.0(supports-color@9.4.0)
+      debug: 4.4.0
       fast-glob: 3.3.2
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -18466,7 +18460,7 @@ snapshots:
       '@vue/shared': 3.5.13
       estree-walker: 2.0.2
       magic-string: 0.30.17
-      postcss: 8.4.49
+      postcss: 8.5.3
       source-map-js: 1.2.1
 
   '@vue/compiler-ssr@3.5.13':
@@ -19681,6 +19675,10 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  debug@4.4.0:
+    dependencies:
+      ms: 2.1.3
+
   debug@4.4.0(supports-color@8.1.1):
     dependencies:
       ms: 2.1.3
@@ -20566,7 +20564,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.0(supports-color@9.4.0)
+      debug: 4.4.0
       escape-string-regexp: 4.0.0
       eslint-scope: 8.2.0
       eslint-visitor-keys: 4.2.0
@@ -21213,6 +21211,22 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
 
+  hast-util-raw@9.1.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      '@ungap/structured-clone': 1.2.0
+      hast-util-from-parse5: 8.0.3
+      hast-util-to-parse5: 8.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      parse5: 7.2.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
   hast-util-select@6.0.4:
     dependencies:
       '@types/hast': 3.0.4
@@ -21259,6 +21273,16 @@ snapshots:
       stringify-entities: 4.0.4
       zwitch: 2.0.4
 
+  hast-util-to-parse5@8.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      property-information: 6.5.0
+      space-separated-tokens: 2.0.2
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
   hast-util-to-string@3.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -22120,8 +22144,6 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
-  marked@5.1.2: {}
-
   mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4
@@ -22446,7 +22468,7 @@ snapshots:
   micromark@4.0.2:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.4.0(supports-color@9.4.0)
+      debug: 4.4.0
       decode-named-character-reference: 1.1.0
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.3
@@ -23898,6 +23920,12 @@ snapshots:
       unist-util-visit-parents: 6.0.1
       vfile: 6.0.3
 
+  rehype-raw@7.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-raw: 9.1.0
+      vfile: 6.0.3
+
   remark-gfm@4.0.1:
     dependencies:
       '@types/mdast': 4.0.4
@@ -24698,12 +24726,6 @@ snapshots:
       highlight.js: 11.11.1
       svelte: 5.20.5
 
-  svelte-markdown@0.4.1(svelte@5.20.5):
-    dependencies:
-      '@types/marked': 5.0.2
-      marked: 5.1.2
-      svelte: 5.20.5
-
   svelte-motion@0.12.2(svelte@5.20.5):
     dependencies:
       '@types/react': 18.3.12