vue-stream-markdown 0.1.4 → 0.1.5

package/README.md

@@ -69,7 +69,9 @@ This project also uses and benefits from:
 ### Code Sources
 - [markstream-vue](https://github.com/Simon-He95/markstream-vue) - The original inspiration for learning AST-based custom markdown rendering, and the source of the animation implementation used in this project
 - [ast-explorer](https://github.com/sxzz/ast-explorer) - Learned AST knowledge from this project, and the playground layout inspiration and AST syntax tree filtering code are derived from it
-
+- [medium-zoom](https://github.com/francoischalifour/medium-zoom) - Inspired the custom image zoom implementation
+- [markdown-sanitizers](https://github.com/vercel-labs/markdown-sanitizers) - URL validation and security hardening logic in `src/utils/harden.ts` is ported from `rehype-harden`
+- [Dify](https://github.com/langgenius/dify) - LaTeX preprocessing logic in `src/preprocess/vendored/markdown-utils.ts` is ported from Dify
 ## Acknowledgments
 
 I would like to express my sincere gratitude to those who provided guidance and support during the project selection phase and promotion phase of this project. Without their encouragement and support, I would not have been able to complete this work. In particular, the [streamdown](https://streamdown.ai/) community provided excellent code guidance and even helped fix several issues.

package/dist/arrow-left-C5s0Sn8o.js

@@ -0,0 +1,25 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/lucide/arrow-left
+const _hoisted_1 = {
+	viewBox: "0 0 24 24",
+	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: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "m12 19l-7-7l7-7m7 7H5"
+	}, null, -1)])]);
+}
+var arrow_left_default = markRaw({
+	name: "lucide-arrow-left",
+	render
+});
+
+//#endregion
+export { arrow_left_default as default };

package/dist/{blockquote-DdEg2gww.js → blockquote-bkADuiGm.js}

@@ -1,4 +1,4 @@
-import { t as node_list_default } from "./node-list-CGr_EVtn.js";
+import { t as node_list_default } from "./node-list-YhpHXdM_.js";
 import { createElementBlock, createVNode, defineComponent, mergeProps, openBlock } from "vue";
 
 //#region src/components/renderers/blockquote.vue?vue&type=script&setup=true&lang.ts
@@ -18,18 +18,10 @@ var blockquote_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			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

package/dist/{button-jFTF378X.js → button-BQhuT7wh.js}

@@ -1,4 +1,4 @@
-import { t as tooltip_default } from "./tooltip-3UDC9mw-.js";
+import { t as tooltip_default } from "./tooltip-Bgbzbk4Q.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, h, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, withCtx } from "vue";
 
 //#region src/components/dropdown.vue?vue&type=script&setup=true&lang.ts
@@ -38,8 +38,7 @@ var dropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				ref_key: "tooltipRef",
 				ref: tooltipRef,
 				trigger: "click",
-				placement: "bottom",
-				interactive: true,
+				placement: "bottom-end",
 				"data-stream-markdown": "dropdown"
 			}, {
 				content: withCtx(() => [createElementVNode("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {

package/dist/button-JYC8d-B-.js

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

package/dist/{code-BxWvKFxG.js → code-DF8PTNol.js}

@@ -1,11 +1,11 @@
-import "./previewers-ByaS2Ksa.js";
-import { i as useShiki } from "./composables-Cx0nvyHl.js";
-import "./tooltip-3UDC9mw-.js";
-import "./button-jFTF378X.js";
-import "./modal-CuQR21UD.js";
-import { t as code_block_default } from "./code-block-uZcUI59D.js";
-import "./segmented-DBW9ignu.js";
-import { computed, createBlock, createCommentVNode, defineAsyncComponent, defineComponent, mergeProps, normalizeProps, openBlock, resolveDynamicComponent, withCtx } from "vue";
+import "./previewers-D0VVcdjL.js";
+import { r as useShiki } from "./composables-yny5gJo3.js";
+import "./tooltip-Bgbzbk4Q.js";
+import "./button-BQhuT7wh.js";
+import "./modal-Rc_RoeYA.js";
+import { t as code_block_default } from "./code-block-Dm2wl0cb.js";
+import "./segmented-CaC54iz_.js";
+import { computed, createBlock, createCommentVNode, defineAsyncComponent, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, resolveDynamicComponent, withCtx } from "vue";
 
 //#region src/components/renderers/code/index.vue?vue&type=script&setup=true&lang.ts
 var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -23,18 +23,10 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			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
@@ -82,8 +74,8 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		const languageClass = computed(() => `language-${props.node.lang}`);
 		const { installed: hasShiki } = useShiki();
 		const components = {
-			vanilla: defineAsyncComponent(() => import("./vanilla-De7W3PpS.js")),
-			shiki: defineAsyncComponent(() => import("./shiki-bQYWLdW3.js"))
+			vanilla: defineAsyncComponent(() => import("./vanilla-DA5bwIkr.js")),
+			shiki: defineAsyncComponent(() => import("./shiki-sJNZTn1K.js"))
 		};
 		const component = computed(() => {
 			if (hasShiki.value) return components.shiki;

package/dist/code-block-BhMDz2ZL.js

@@ -0,0 +1,9 @@
+import "./previewers-D0VVcdjL.js";
+import "./composables-yny5gJo3.js";
+import "./tooltip-Bgbzbk4Q.js";
+import "./button-BQhuT7wh.js";
+import "./modal-Rc_RoeYA.js";
+import { t as code_block_default } from "./code-block-Dm2wl0cb.js";
+import "./segmented-CaC54iz_.js";
+
+export { code_block_default as default };

package/dist/{code-block-uZcUI59D.js → code-block-Dm2wl0cb.js}

@@ -1,10 +1,10 @@
-import { t as CODE_PREVIEWERS } from "./previewers-ByaS2Ksa.js";
-import { B as useContext, I as LANGUAGE_ALIAS, L as LANGUAGE_EXTENSIONS, O as save, R as LANGUAGE_ICONS, V as useCodeOptions, a as useMermaid, u as useI18n, z as useControls } from "./composables-Cx0nvyHl.js";
-import { t as button_default } from "./button-jFTF378X.js";
-import { t as modal_default } from "./modal-CuQR21UD.js";
-import { t as segmented_default } from "./segmented-DBW9ignu.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineAsyncComponent, defineComponent, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRefs, unref, useModel, vShow, watch, withCtx, withDirectives } from "vue";
-import { useClipboard } from "@vueuse/core";
+import { t as CODE_PREVIEWERS } from "./previewers-D0VVcdjL.js";
+import { H as useContext, L as LANGUAGE_ALIAS, O as save, R as LANGUAGE_EXTENSIONS, U as useCodeOptions, V as useControls, i as useMermaid, u as useI18n, z as LANGUAGE_ICONS } from "./composables-yny5gJo3.js";
+import { t as button_default } from "./button-BQhuT7wh.js";
+import { t as modal_default } from "./modal-Rc_RoeYA.js";
+import { t as segmented_default } from "./segmented-CaC54iz_.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineAsyncComponent, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRefs, unref, useModel, vShow, watch, withCtx, withDirectives } from "vue";
+import { createReusableTemplate, useClipboard } from "@vueuse/core";
 
 //#region src/components/code-block/actions.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1$2 = { "data-stream-markdown": "actions" };
@@ -132,12 +132,10 @@ var preview_segmented_default = preview_segmented_vue_vue_type_script_setup_true
 
 //#endregion
 //#region src/components/code-block/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = ["data-collapsed"];
-const _hoisted_2 = { "data-stream-markdown": "code-block-header" };
-const _hoisted_3 = { key: 2 };
+const _hoisted_1 = { key: 2 };
+const _hoisted_2 = ["data-collapsed"];
+const _hoisted_3 = { "data-stream-markdown": "code-block-header" };
 const _hoisted_4 = { key: 1 };
-const _hoisted_5 = { "data-stream-markdown": "code-block-content" };
-const _hoisted_6 = { key: 2 };
 var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "index",
@@ -154,18 +152,10 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			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
@@ -205,12 +195,13 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 	},
 	setup(__props) {
 		const props = __props;
+		const CodeNode = defineAsyncComponent(() => import("./code-DF8PTNol.js"));
 		const { controls, previewers, codeOptions } = toRefs(props);
+		const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
 		const { t } = useI18n();
 		const { icons } = useContext();
 		const { isControlEnabled } = useControls({ controls });
 		const { installed: hasMermaid } = useMermaid();
-		const CodeNode = defineAsyncComponent(() => import("./code-BxWvKFxG.js"));
 		const { onCopied } = useContext();
 		const { copy, copied } = useClipboard({ legacy: true });
 		const { saveMermaid } = useMermaid();
@@ -264,6 +255,17 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			if (data && typeof data !== "boolean") return data;
 			return CODE_PREVIEWERS[language.value];
 		});
+		function normalizeHeight(height) {
+			return typeof height === "number" ? `${height}px` : height;
+		}
+		const maxHeight = computed(() => {
+			var _codeOptions$value2, _codeOptions$value3;
+			if (mode.value === "preview") return void 0;
+			const specific = (_codeOptions$value2 = codeOptions.value) === null || _codeOptions$value2 === void 0 || (_codeOptions$value2 = _codeOptions$value2.language) === null || _codeOptions$value2 === void 0 || (_codeOptions$value2 = _codeOptions$value2[language.value]) === null || _codeOptions$value2 === void 0 ? void 0 : _codeOptions$value2.maxHeight;
+			if (specific) return normalizeHeight(specific);
+			const height = (_codeOptions$value3 = codeOptions.value) === null || _codeOptions$value3 === void 0 ? void 0 : _codeOptions$value3.maxHeight;
+			if (height) return normalizeHeight(height);
+		});
 		const downloadOptions = computed(() => {
 			if (language.value !== "mermaid" || !hasMermaid.value) return [];
 			return [
@@ -335,7 +337,27 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			if (previewable.value) mode.value = "preview";
 		}, { immediate: true });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineTemplate), null, {
+				default: withCtx(() => [showLanguageTitle.value ? (openBlock(), createBlock(language_title_default, {
+					key: 0,
+					icon: icon.value,
+					language: language.value,
+					"show-icon": unref(showLanguageIcon),
+					"show-name": unref(showLanguageName)
+				}, null, 8, [
+					"icon",
+					"language",
+					"show-icon",
+					"show-name"
+				])) : previewable.value ? (openBlock(), createBlock(preview_segmented_default, {
+					key: 1,
+					mode: mode.value,
+					"onUpdate:mode": _cache[0] || (_cache[0] = ($event) => mode.value = $event),
+					collapsed: collapsed.value,
+					"onUpdate:collapsed": _cache[1] || (_cache[1] = ($event) => collapsed.value = $event)
+				}, null, 8, ["mode", "collapsed"])) : (openBlock(), createElementBlock("div", _hoisted_1))]),
+				_: 1
+			}), createElementVNode("div", {
 				"data-stream-markdown": "code-block",
 				"data-collapsed": collapsed.value,
 				class: normalizeClass({
@@ -343,25 +365,8 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					"dark": props.isDark
 				})
 			}, [
-				createElementVNode("header", _hoisted_2, [
-					renderSlot(_ctx.$slots, "title", {}, () => [showLanguageTitle.value ? (openBlock(), createBlock(language_title_default, {
-						key: 0,
-						icon: icon.value,
-						language: language.value,
-						"show-icon": unref(showLanguageIcon),
-						"show-name": unref(showLanguageName)
-					}, null, 8, [
-						"icon",
-						"language",
-						"show-icon",
-						"show-name"
-					])) : previewable.value ? (openBlock(), createBlock(preview_segmented_default, {
-						key: 1,
-						mode: mode.value,
-						"onUpdate:mode": _cache[0] || (_cache[0] = ($event) => mode.value = $event),
-						collapsed: collapsed.value,
-						"onUpdate:collapsed": _cache[1] || (_cache[1] = ($event) => collapsed.value = $event)
-					}, null, 8, ["mode", "collapsed"])) : (openBlock(), createElementBlock("div", _hoisted_3))]),
+				createElementVNode("header", _hoisted_3, [
+					renderSlot(_ctx.$slots, "title", {}, () => [createVNode(unref(ReuseTemplate))]),
 					renderSlot(_ctx.$slots, "header-center", {}, () => [previewable.value && showLanguageTitle.value ? (openBlock(), createBlock(preview_segmented_default, {
 						key: 0,
 						mode: mode.value,
@@ -371,42 +376,32 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					}, null, 8, ["mode", "collapsed"])) : (openBlock(), createElementBlock("div", _hoisted_4))]),
 					renderSlot(_ctx.$slots, "actions", {}, () => [createVNode(actions_default, { actions: actions.value }, null, 8, ["actions"])])
 				]),
-				withDirectives(createElementVNode("main", _hoisted_5, [previewable.value ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(PreviewComponent.value), normalizeProps(mergeProps({ key: 0 }, props)), null, 16)), [[vShow, mode.value === "preview"]]) : createCommentVNode("v-if", true), withDirectives(createElementVNode("main", null, [renderSlot(_ctx.$slots, "default")], 512), [[vShow, mode.value === "source"]])], 512), [[vShow, !collapsed.value]]),
+				withDirectives(createElementVNode("main", {
+					"data-stream-markdown": "code-block-content",
+					style: normalizeStyle({ maxHeight: maxHeight.value })
+				}, [previewable.value ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(PreviewComponent.value), normalizeProps(mergeProps({ key: 0 }, props)), null, 16)), [[vShow, mode.value === "preview"]]) : createCommentVNode("v-if", true), withDirectives(createElementVNode("main", null, [renderSlot(_ctx.$slots, "default")], 512), [[vShow, mode.value === "source"]])], 4), [[vShow, !collapsed.value]]),
 				createVNode(modal_default, {
 					open: fullscreen.value,
-					"onUpdate:open": _cache[8] || (_cache[8] = ($event) => fullscreen.value = $event),
-					"get-container": props.getContainer
+					"onUpdate:open": _cache[6] || (_cache[6] = ($event) => fullscreen.value = $event),
+					"header-style": {
+						backgroundColor: "color-mix(in oklab, var(--muted) 80%, transparent)",
+						color: "var(--muted-foreground)",
+						borderBottom: "1px solid var(--border)"
+					}
 				}, {
-					title: withCtx(() => [showLanguageTitle.value ? (openBlock(), createBlock(language_title_default, {
+					title: withCtx(() => [createVNode(unref(ReuseTemplate))]),
+					"header-center": withCtx(() => [previewable.value && showLanguageTitle.value ? (openBlock(), createBlock(preview_segmented_default, {
 						key: 0,
-						icon: icon.value,
-						language: language.value,
-						"show-icon": unref(showLanguageIcon),
-						"show-name": unref(showLanguageName)
-					}, null, 8, [
-						"icon",
-						"language",
-						"show-icon",
-						"show-name"
-					])) : previewable.value ? (openBlock(), createBlock(preview_segmented_default, {
-						key: 1,
 						mode: mode.value,
 						"onUpdate:mode": _cache[4] || (_cache[4] = ($event) => mode.value = $event),
 						collapsed: collapsed.value,
 						"onUpdate:collapsed": _cache[5] || (_cache[5] = ($event) => collapsed.value = $event)
-					}, null, 8, ["mode", "collapsed"])) : (openBlock(), createElementBlock("div", _hoisted_6))]),
-					"header-center": withCtx(() => [previewable.value && showLanguageTitle.value ? (openBlock(), createBlock(preview_segmented_default, {
-						key: 0,
-						mode: mode.value,
-						"onUpdate:mode": _cache[6] || (_cache[6] = ($event) => mode.value = $event),
-						collapsed: collapsed.value,
-						"onUpdate:collapsed": _cache[7] || (_cache[7] = ($event) => collapsed.value = $event)
 					}, null, 8, ["mode", "collapsed"])) : createCommentVNode("v-if", true)]),
 					actions: withCtx(() => [createVNode(actions_default, { actions: ModalActions.value }, null, 8, ["actions"])]),
 					default: withCtx(() => [previewable.value ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(PreviewComponent.value), mergeProps({ key: 0 }, props, { "container-height": "100%" }), null, 16)), [[vShow, mode.value === "preview"]]) : createCommentVNode("v-if", true), withDirectives(createVNode(unref(CodeNode), mergeProps(props, { "show-header": false }), null, 16), [[vShow, mode.value === "source"]])]),
 					_: 1
-				}, 8, ["open", "get-container"])
-			], 10, _hoisted_1);
+				}, 8, ["open"])
+			], 10, _hoisted_2)], 64);
 		};
 	}
 });