vue-stream-markdown 0.0.0-alpha.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jing Haihan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,96 @@
+# vue-stream-markdown
+
+[![npm version][npm-version-src]][npm-version-href]
+[![License][license-src]][license-href]
+
+A markdown renderer specially optimized for streaming scenarios, inspired by [streamdown](https://streamdown.ai/). Designed to achieve smoother streaming rendering through syntax inference and highly customizable rendering elements.
+
+<br>
+
+<p align="center">
+<a href="#">📚 Documentation</a> |
+<a href="#">🤹‍♂️ Playground</a>
+</p>
+
+<br>
+
+```sh
+pnpm add vue-stream-markdown
+```
+
+<p align='center'>
+<img src='./assets/screenshot.png' />
+</p>
+
+## Features
+
+- 🚀 **Streaming-optimized rendering** - Incomplete node completion with loading states for images, tables, and code blocks to prevent visual jitter
+- ⚡ **Incremental rendering** - Leverages [Shiki](https://shiki.style/)'s `codeToTokens` API for token-level updates, reducing DOM recreation overhead
+- 📊 **Progressive Mermaid rendering** - Throttled, streaming-friendly diagram rendering with loading states
+- 📐 **Beautiful LaTeX equations** - Render beautiful LaTeX equations with KaTeX support
+- 🎯 **Interactive controls** - Copy and download buttons for images, tables, and code blocks
+- 🎨 **Fully customizable** - Replace any AST node with your own Vue components
+- ✨ **Beautiful built-in typography** - No atomic CSS required (Tailwind/UnoCSS), self-contained styles
+- 🎨 **Theme-aware scoped styles** - Scoped styles under `.stream-markdown` with semantic `data-stream-markdown` attributes, following [shadcn/ui](https://ui.shadcn.com/) design system
+- 🌏 **CJK language support** - Following `streamdown` design, handles emphasis with ideographic punctuation
+- 🛡️ **Content hardening & security** - Built-in protection against malicious Markdown with URL validation and protocol blocking
+- 🔒 **TypeScript type safety** - Comprehensive type definitions with full IntelliSense support
+
+## Usage
+
+For detailed usage and API documentation, please refer to the [Documentation](#).
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Markdown } from 'vue-stream-markdown'
+// If you don't have shadcn CSS variables globally, import the theme
+import 'vue-stream-markdown/theme.css'
+
+const content = ref('# Hello World\n\nThis is a markdown content.')
+</script>
+
+<template>
+  <Markdown :content="content" />
+</template>
+```
+
+## Credit
+
+This project is inspired by [streamdown](https://streamdown.ai/) and even uses substantial source code from it.
+
+This project also uses and benefits from:
+
+- [mdast](https://github.com/syntax-tree/mdast) - Markdown Abstract Syntax Tree format
+- [Shiki](https://shiki.style/) - Beautiful syntax highlighting
+- [Mermaid](https://mermaid.js.org/) - Diagramming and charting tool
+- [KaTeX](https://katex.org/) - Fast math typesetting library for the web
+
+## Troubleshooting
+
+The playground supports generating shareable links and provides streaming controls (forward/backward navigation) for debugging streaming rendering issues.
+
+If you encounter any problems, please:
+
+1. Use the **Generate Share Links** button in the playground to create a shareable link with your current content
+2. Enable the **AST Result** toggle to view the parsed AST syntax tree
+3. Copy the markdown content and AST syntax tree at the time of the issue
+
+Please provide the shareable link, markdown content, and AST syntax tree when creating an issue. This will help me reproduce and diagnose the problem more effectively.
+
+## License
+
+[MIT](./LICENSE) License © [jinghaihan](https://github.com/jinghaihan)
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/vue-stream-markdown?style=flat&colorA=080f12&colorB=1fa669
+[npm-version-href]: https://npmjs.com/package/vue-stream-markdown
+[npm-downloads-src]: https://img.shields.io/npm/dm/vue-stream-markdown?style=flat&colorA=080f12&colorB=1fa669
+[npm-downloads-href]: https://npmjs.com/package/vue-stream-markdown
+[bundle-src]: https://img.shields.io/bundlephobia/minzip/vue-stream-markdown?style=flat&colorA=080f12&colorB=1fa669&label=minzip
+[bundle-href]: https://bundlephobia.com/result?p=vue-stream-markdown
+[license-src]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat&colorA=080f12&colorB=1fa669
+[license-href]: https://github.com/jinghaihan/vue-stream-markdown/LICENSE
+[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
+[jsdocs-href]: https://www.jsdocs.io/package/vue-stream-markdown

package/dist/angular-Chs-UKBr.js

@@ -0,0 +1,29 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/catppuccin/angular
+const _hoisted_1 = {
+	viewBox: "0 0 16 16",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		"fill-rule": "evenodd",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	}, [createElementVNode("path", {
+		stroke: "#ed8796",
+		d: "m8 1l6.5 2l-1 9.5L8 15l-5.5-2.5l-1-9.5z"
+	}), createElementVNode("path", {
+		stroke: "#cad3f5",
+		d: "m4.5 10.5l3.5-7l3.5 7m-5.796-2h4.635"
+	})], -1)])]);
+}
+var angular_default = markRaw({
+	name: "catppuccin-angular",
+	render
+});
+
+//#endregion
+export { angular_default as default };

package/dist/angular-component-Cc_FANXU.js

@@ -0,0 +1,29 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/catppuccin/angular-component
+const _hoisted_1 = {
+	viewBox: "0 0 16 16",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		"fill-rule": "evenodd",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	}, [createElementVNode("path", {
+		stroke: "#8aadf4",
+		d: "m8 1l6.5 2l-1 9.5L8 15l-5.5-2.5l-1-9.5z"
+	}), createElementVNode("path", {
+		stroke: "#cad3f5",
+		d: "m4.5 10.5l3.5-7l3.5 7m-5.796-2h4.635"
+	})], -1)])]);
+}
+var angular_component_default = markRaw({
+	name: "catppuccin-angular-component",
+	render
+});
+
+//#endregion
+export { angular_component_default as default };

package/dist/apache-COYnc6xR.js

@@ -0,0 +1,35 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/catppuccin/apache
+const _hoisted_1 = {
+	viewBox: "0 0 16 16",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	}, [
+		createElementVNode("path", {
+			stroke: "#ed8796",
+			d: "M2.5 14.5a24.3 24.3 0 0 1 1.63-4.36c.21-.42.45-.84.7-1.26c2.75-4.61 6.63-6.8 8.67-7.38c-.8 3.52-3.91 10.46-10.15 10.4"
+		}),
+		createElementVNode("path", {
+			stroke: "#f5a97f",
+			d: "M6.14 6.96C8.7 3.64 11.76 1.99 13.5 1.5a18.5 18.5 0 0 1-2.27 5.46"
+		}),
+		createElementVNode("path", {
+			stroke: "#ed8796",
+			d: "M6.5 9.5h-2m1.25-2h2.71"
+		})
+	], -1)])]);
+}
+var apache_default = markRaw({
+	name: "catppuccin-apache",
+	render
+});
+
+//#endregion
+export { apache_default as default };

package/dist/asciidoc-BabXBDAL.js

@@ -0,0 +1,24 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/catppuccin/asciidoc
+const _hoisted_1 = {
+	viewBox: "0 0 16 16",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "#ed8796",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		d: "m3 15l1.714-4M5.78 8.5L9 1l6 14M1 8.5h7M1 11h6"
+	}, null, -1)])]);
+}
+var asciidoc_default = markRaw({
+	name: "catppuccin-asciidoc",
+	render
+});
+
+//#endregion
+export { asciidoc_default as default };

package/dist/assembly-CDqKhexW.js

@@ -0,0 +1,35 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/catppuccin/assembly
+const _hoisted_1 = {
+	viewBox: "0 0 16 16",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("rect", {
+		width: "8",
+		height: "13.001",
+		x: "4",
+		y: "1.499",
+		fill: "none",
+		stroke: "#cad3f5",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		rx: "2.286",
+		ry: "2.286"
+	}, null, -1), createElementVNode("path", {
+		fill: "none",
+		stroke: "#cad3f5",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		d: "M4 4.5H1.5M4 8H1.5M4 11.5H1.5m13-7H12M14.5 8H12m2.5 3.5H12"
+	}, null, -1)])]);
+}
+var assembly_default = markRaw({
+	name: "catppuccin-assembly",
+	render
+});
+
+//#endregion
+export { assembly_default as default };

package/dist/astro-C9kftzFG.js

@@ -0,0 +1,28 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/catppuccin/astro
+const _hoisted_1 = {
+	viewBox: "0 0 16 16",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	}, [createElementVNode("path", {
+		stroke: "#cad3f5",
+		d: "M10.561 1.61L13.5 10.5c-.995-.517-2.395-1.298-3.5-1.493L8 3.5L6 9.007c-1.11.194-2.5.974-3.5 1.493l3.163-8.891c.121-.398.182-.597.302-.745A1 1 0 0 1 6.36.57c.176-.07.384-.07.8-.07h1.902c.416 0 .625 0 .801.071a1 1 0 0 1 .396.293c.12.148.18.347.301.746"
+	}), createElementVNode("path", {
+		stroke: "#c6a0f6",
+		d: "M10.411 11.266c-.43.365-1.292.613-2.283.613c-1.217 0-2.237-.374-2.508-.879a2.8 2.8 0 0 0-.119.831s-.063 1.038.666 1.76c0-.374.307-.679.686-.679c.648 0 .648.561.647 1.016v.04c0 .691.426 1.282 1.032 1.532a1.4 1.4 0 0 1-.141-.61c0-.658.39-.903.845-1.188c.36-.227.761-.479 1.038-.985a1.84 1.84 0 0 0 .137-1.451"
+	})], -1)])]);
+}
+var astro_default = markRaw({
+	name: "catppuccin-astro",
+	render
+});
+
+//#endregion
+export { astro_default as default };

package/dist/bash-Ce4pNIkV.js

@@ -0,0 +1,27 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/catppuccin/bash
+const _hoisted_1 = {
+	viewBox: "0 0 16 16",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "#a6da95",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	}, [
+		createElementVNode("path", { d: "M2 15.5c-.7 0-1.5-.8-1.5-1.5V5c0-.7.8-1.5 1.5-1.5h9c.7 0 1.5.8 1.5 1.5v9c0 .7-.8 1.5-1.5 1.5z" }),
+		createElementVNode("path", { d: "m1.2 3.8l3.04-2.5S5.17.5 5.7.5h8.4c.66 0 1.4.73 1.4 1.4v7.73a2.7 2.7 0 0 1-.7 1.75l-2.68 3.51" }),
+		createElementVNode("path", { d: "M6 8.75c0-.69-.54-1.25-1.2-1.25h-.6c-.66 0-1.2.56-1.2 1.25S3.54 10 4.2 10h.6c.66 0 1.2.56 1.2 1.25s-.54 1.25-1.2 1.25h-.6c-.66 0-1.2-.56-1.2-1.25M4.5 6.5v1m0 5v1" })
+	], -1)])]);
+}
+var bash_default = markRaw({
+	name: "catppuccin-bash",
+	render
+});
+
+//#endregion
+export { bash_default as default };

package/dist/batch-CHQBRjFL.js

@@ -0,0 +1,23 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/catppuccin/batch
+const _hoisted_1 = {
+	viewBox: "0 0 16 16",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "#8aadf4",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	}, [createElementVNode("path", { d: "M2 15.5c-.7 0-1.5-.8-1.5-1.5V5c0-.7.8-1.5 1.5-1.5h9c.7 0 1.5.8 1.5 1.5v9c0 .7-.8 1.5-1.5 1.5z" }), createElementVNode("path", { d: "m1.2 3.8l3.04-2.5S5.17.5 5.7.5h8.4c.66 0 1.4.73 1.4 1.4v7.73a2.7 2.7 0 0 1-.7 1.75l-2.68 3.51M3 8.5l3 2l-3 2" })], -1)])]);
+}
+var batch_default = markRaw({
+	name: "catppuccin-batch",
+	render
+});
+
+//#endregion
+export { batch_default as default };

package/dist/bicep-8jxWtuBF.js

@@ -0,0 +1,46 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/catppuccin/bicep
+const _hoisted_1 = {
+	viewBox: "0 0 16 16",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
+		createElementVNode("ellipse", {
+			cx: "12.07",
+			cy: "12.842",
+			fill: "none",
+			stroke: "#8aadf4",
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			rx: "2.667",
+			ry: "2.658"
+		}, null, -1),
+		createElementVNode("ellipse", {
+			cx: "3.159",
+			cy: "12.074",
+			fill: "none",
+			stroke: "#8aadf4",
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			rx: "1.895",
+			ry: "1.889"
+		}, null, -1),
+		createElementVNode("path", {
+			fill: "none",
+			stroke: "#8aadf4",
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			d: "m3.05 10.191l8.837-.005m-9.057 3.74l8.767 1.533M8.43.5L7.246 1.726l-.36 1.862l1.346 1.237l1.81-.532l1.172-1.272m-9.11 7.483L6.922 3.75m-.894 6.164l1.718-5.181"
+		}, null, -1)
+	])]);
+}
+var bicep_default = markRaw({
+	name: "catppuccin-bicep",
+	render
+});
+
+//#endregion
+export { bicep_default as default };

package/dist/blockquote-DFANmQEB.css

@@ -0,0 +1,13 @@
+.stream-markdown [data-stream-markdown="blockquote"] {
+  border-left: 4px solid color-mix(in oklab, var(--muted-foreground) 30%, transparent);
+  color: var(--muted-foreground);
+  margin-block: 1rem;
+  margin-inline: 0;
+  padding-left: 1rem;
+  font-style: italic;
+  position: relative;
+}
+.stream-markdown [data-stream-markdown="blockquote"] p {
+  margin-bottom: 0;
+}
+

package/dist/blockquote-DdEg2gww.js

@@ -0,0 +1,83 @@
+import { t as node_list_default } from "./node-list-CGr_EVtn.js";
+import { createElementBlock, createVNode, defineComponent, mergeProps, openBlock } from "vue";
+
+//#region src/components/renderers/blockquote.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { "data-stream-markdown": "blockquote" };
+var blockquote_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "blockquote",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		markdownParser: {
+			type: Object,
+			required: true
+		},
+		nodeRenderers: {
+			type: Object,
+			required: true
+		},
+		mediumZoom: {
+			type: Object,
+			required: true
+		},
+		indexKey: {
+			type: [Number, String],
+			required: true
+		},
+		getContainer: {
+			type: Function,
+			required: true
+		},
+		controls: {
+			type: [Boolean, Object],
+			required: false
+		},
+		previewers: {
+			type: [Boolean, Object],
+			required: false
+		},
+		shikiOptions: {
+			type: Object,
+			required: false
+		},
+		mermaidOptions: {
+			type: Object,
+			required: false
+		},
+		katexOptions: {
+			type: Object,
+			required: false
+		},
+		hardenOptions: {
+			type: Object,
+			required: false
+		},
+		codeOptions: {
+			type: Object,
+			required: false
+		},
+		imageOptions: {
+			type: Object,
+			required: false
+		},
+		isDark: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("blockquote", _hoisted_1, [createVNode(node_list_default, mergeProps(props, { nodes: __props.node.children }), null, 16, ["nodes"])]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/renderers/blockquote.vue
+var blockquote_default = blockquote_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { blockquote_default as default };

package/dist/button-BClRCjnc.js

@@ -0,0 +1,5 @@
+import "./composables-qhB1h_ed.js";
+import "./tooltip-RiXixMIt.js";
+import { t as button_default } from "./button-D8xx1WIP.js";
+
+export { button_default as default };

package/dist/button-C12sn_G5.css

@@ -0,0 +1,24 @@
+.stream-markdown [data-stream-markdown="dropdown-overlay"] {
+  padding: .25rem;
+}
+
+.stream-markdown [data-stream-markdown="button"] {
+  cursor: pointer;
+  color: var(--muted-foreground);
+  transition-duration: var(--default-transition-duration);
+  background-color: #0000;
+  border: none;
+  border-radius: .375rem;
+  justify-content: center;
+  align-items: center;
+  gap: .25rem;
+  padding: .5rem;
+  font-size: .75rem;
+  line-height: 1rem;
+  display: flex;
+}
+.stream-markdown [data-stream-markdown="button"]:hover {
+  color: var(--foreground);
+  background-color: var(--accent);
+}
+