vue-stream-markdown 0.2.1 → 0.2.3

package/README.md

@@ -37,6 +37,13 @@ pnpm add vue-stream-markdown
 
 ## Usage
 
+> [!IMPORTANT]
+> 🚧 **vue-stream-markdown** is currently in active feature development.
+>
+> Breaking changes are avoided as much as possible, but the project maintains a relatively high release frequency.
+>
+> If a version meets your needs, you don't need to always follow the latest version.
+
 For detailed usage and API documentation, please refer to the [Documentation](https://docs-vue-stream-markdown.netlify.app/).
 
 ```vue
@@ -89,6 +96,10 @@ If you encounter any problems, please:
 
 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.
 
+## Contributors
+
+[![Contributors](https://contrib.rocks/image?repo=jinghaihan/vue-stream-markdown)](https://github.com/jinghaihan/vue-stream-markdown/graphs/contributors)
+
 ## License
 
 [MIT](./LICENSE) License © [jinghaihan](https://github.com/jinghaihan)

package/dist/{blockquote-Bv0immvx.js → blockquote-Crr-D7fY.js}

@@ -1,5 +1,5 @@
-import "./composables-CL-BX9Ri.js";
-import { t as node_list_default } from "./node-list-3yGs9Kcx.js";
+import "./composables-CzUVrTt_.js";
+import { t as node_list_default } from "./node-list-7H-lIfUX.js";
 import { createElementBlock, createVNode, defineComponent, mergeProps, openBlock } from "vue";
 
 //#region src/components/renderers/blockquote.vue?vue&type=script&setup=true&lang.ts
@@ -55,6 +55,10 @@ var blockquote_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false

package/dist/break-DoDPjOA0.js

@@ -0,0 +1,77 @@
+import { createElementBlock, defineComponent, openBlock } from "vue";
+
+//#region src/components/renderers/break.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { "data-stream-markdown": "break" };
+var break_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "break",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		markdownParser: {
+			type: Object,
+			required: true
+		},
+		nodeRenderers: {
+			type: Object,
+			required: true
+		},
+		nodeKey: {
+			type: String,
+			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
+		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
+		isDark: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("br", _hoisted_1);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/renderers/break.vue
+var break_default = break_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { break_default as default };

package/dist/{button-CRnH8Rzt.js → button-DVWlhfQ9.js}

@@ -1,5 +1,5 @@
-import { t as tooltip_default } from "./tooltip-DkCGsj0S.js";
-import { t as icon_default } from "./icon-MRs2P5TP.js";
+import { t as tooltip_default } from "./tooltip-DarhJuZR.js";
+import { t as icon_default } from "./icon-DcLTFhFW.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
 import { createReusableTemplate } from "@vueuse/core";
 

package/dist/button-Dw4uJRaD.js

@@ -0,0 +1,6 @@
+import "./composables-CzUVrTt_.js";
+import "./tooltip-DarhJuZR.js";
+import { t as button_default } from "./button-DVWlhfQ9.js";
+import "./icon-DcLTFhFW.js";
+
+export { button_default as default };

package/dist/{code-BcAa_-2j.js → code-Bz8LM16H.js}

@@ -1,11 +1,11 @@
-import "./previewers-BUz7EQbB.js";
-import { r as useShiki } from "./composables-CL-BX9Ri.js";
-import "./tooltip-DkCGsj0S.js";
-import "./button-CRnH8Rzt.js";
-import "./icon-MRs2P5TP.js";
-import "./modal-vHG2jmSe.js";
-import { t as code_block_default } from "./code-block-mylXl6jG.js";
-import "./segmented-ChmGPy3i.js";
+import "./previewers-C7PKsIbc.js";
+import { r as useShiki } from "./composables-CzUVrTt_.js";
+import "./tooltip-DarhJuZR.js";
+import "./button-DVWlhfQ9.js";
+import "./icon-DcLTFhFW.js";
+import "./modal-C1riNMrs.js";
+import { t as code_block_default } from "./code-block-CmUZxKNr.js";
+import "./segmented-C9j-IIDc.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
@@ -60,6 +60,10 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false
@@ -75,8 +79,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-79xxpygI.js")),
-			shiki: defineAsyncComponent(() => import("./shiki-Dp1kiUyz.js"))
+			vanilla: defineAsyncComponent(() => import("./vanilla-CzQw2_b4.js")),
+			shiki: defineAsyncComponent(() => import("./shiki-BoBbCakv.js"))
 		};
 		const component = computed(() => {
 			if (hasShiki.value) return components.shiki;

package/dist/code-block-Bitp8x1w.js

@@ -0,0 +1,10 @@
+import "./previewers-C7PKsIbc.js";
+import "./composables-CzUVrTt_.js";
+import "./tooltip-DarhJuZR.js";
+import "./button-DVWlhfQ9.js";
+import "./icon-DcLTFhFW.js";
+import "./modal-C1riNMrs.js";
+import { t as code_block_default } from "./code-block-CmUZxKNr.js";
+import "./segmented-C9j-IIDc.js";
+
+export { code_block_default as default };

package/dist/{code-block-mylXl6jG.js → code-block-CmUZxKNr.js}

@@ -1,9 +1,9 @@
-import { t as CODE_PREVIEWERS } from "./previewers-BUz7EQbB.js";
-import { G as useControls, K as useContext, V as save, b as useI18n, d as LANGUAGE_ALIAS, f as LANGUAGE_EXTENSIONS, m as useMermaid, p as LANGUAGE_ICONS, q as useCodeOptions } from "./composables-CL-BX9Ri.js";
-import { t as button_default } from "./button-CRnH8Rzt.js";
-import { t as modal_default } from "./modal-vHG2jmSe.js";
-import { t as segmented_default } from "./segmented-ChmGPy3i.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 { t as CODE_PREVIEWERS } from "./previewers-C7PKsIbc.js";
+import { G as useControls, K as useContext, V as save, b as useI18n, d as LANGUAGE_ALIAS, f as LANGUAGE_EXTENSIONS, m as useMermaid, p as LANGUAGE_ICONS, q as useCodeOptions } from "./composables-CzUVrTt_.js";
+import { t as button_default } from "./button-DVWlhfQ9.js";
+import { t as modal_default } from "./modal-C1riNMrs.js";
+import { t as segmented_default } from "./segmented-C9j-IIDc.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineAsyncComponent, defineComponent, mergeProps, normalizeClass, 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
@@ -125,6 +125,8 @@ 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": "actions" };
+const _hoisted_6 = { "data-stream-markdown": "actions" };
 var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "index",
@@ -177,6 +179,10 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false
@@ -184,11 +190,11 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 	},
 	setup(__props) {
 		const props = __props;
-		const CodeNode = defineAsyncComponent(() => import("./code-BcAa_-2j.js"));
+		const CodeNode = defineAsyncComponent(() => import("./code-Bz8LM16H.js"));
 		const { controls, previewers, codeOptions } = toRefs(props);
 		const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
 		const { t } = useI18n();
-		const { isControlEnabled, resolveControls } = useControls({ controls });
+		const { isControlEnabled, getControlValue, resolveControls } = useControls({ controls });
 		const { installed: hasMermaid } = useMermaid();
 		const { onCopied } = useContext();
 		const { copy, copied } = useClipboard({ legacy: true });
@@ -217,8 +223,25 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			if (typeof custom === "object") return custom;
 			return LANGUAGE_ICONS[language.value] || LANGUAGE_ICONS.text;
 		});
+		const progressiveRender = computed(() => {
+			var _previewers$value;
+			if (typeof previewers.value === "boolean") {
+				if (language.value === "mermaid") return true;
+				return false;
+			}
+			const data = (_previewers$value = previewers.value) === null || _previewers$value === void 0 || (_previewers$value = _previewers$value.progressive) === null || _previewers$value === void 0 ? void 0 : _previewers$value[language.value];
+			if (typeof data === "boolean") return data;
+			if (language.value === "mermaid") return true;
+			return false;
+		});
+		const previewPlacement = computed(() => {
+			var _previewers$value2, _previewers$value3;
+			if (typeof previewers.value === "boolean" || !((_previewers$value2 = previewers.value) === null || _previewers$value2 === void 0 ? void 0 : _previewers$value2.placement) || ((_previewers$value3 = previewers.value) === null || _previewers$value3 === void 0 ? void 0 : _previewers$value3.placement) === "auto") return showLanguageTitle.value ? "center" : "left";
+			return previewers.value.placement;
+		});
 		const previewable = computed(() => {
 			if (previewers.value === false) return false;
+			if (!progressiveRender.value && props.node.loading) return false;
 			const html = language.value === "html" && !props.node.loading;
 			const mermaid = language.value === "mermaid" && hasMermaid.value;
 			if (previewers.value === true) {
@@ -227,23 +250,26 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				return false;
 			}
 			if (typeof previewers.value === "object") {
-				if (previewers.value[language.value] === false) return false;
+				var _previewers$value$com, _previewers$value$com2;
+				if (((_previewers$value$com = previewers.value.components) === null || _previewers$value$com === void 0 ? void 0 : _previewers$value$com[language.value]) === false) return false;
 				if (language.value === "html" && html) return true;
 				if (language.value === "mermaid" && mermaid) return true;
-				const component = previewers.value[language.value];
-				if (typeof component === "object" && !props.node.loading) return !!component;
+				const component = (_previewers$value$com2 = previewers.value.components) === null || _previewers$value$com2 === void 0 ? void 0 : _previewers$value$com2[language.value];
+				if (typeof component === "object" && (progressiveRender.value || !props.node.loading)) return !!component;
 				return false;
 			}
 			return false;
 		});
 		const PreviewComponent = computed(() => {
+			var _previewers$value$com3;
 			const previewer = CODE_PREVIEWERS[language.value];
 			if (!previewers.value || typeof previewers.value === "boolean") return previewer;
-			const data = previewers.value[language.value];
+			const data = (_previewers$value$com3 = previewers.value.components) === null || _previewers$value$com3 === void 0 ? void 0 : _previewers$value$com3[language.value];
 			if (data === false) return previewer;
 			if (data && typeof data !== "boolean") return data;
 			return previewer;
 		});
+		const inlineInteractive = computed(() => getControlValue("mermaid.inlineInteractive") ?? true);
 		function normalizeHeight(height) {
 			return typeof height === "number" ? `${height}px` : height;
 		}
@@ -326,7 +352,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		}, { immediate: true });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineTemplate), null, {
-				default: withCtx(() => [showLanguageTitle.value ? (openBlock(), createBlock(language_title_default, {
+				default: withCtx(({ showPreview }) => [showLanguageTitle.value ? (openBlock(), createBlock(language_title_default, {
 					key: 0,
 					icon: icon.value,
 					language: language.value,
@@ -337,7 +363,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					"language",
 					"show-icon",
 					"show-name"
-				])) : previewable.value ? (openBlock(), createBlock(preview_segmented_default, {
+				])) : previewable.value && showPreview ? (openBlock(), createBlock(preview_segmented_default, {
 					key: 1,
 					mode: mode.value,
 					"onUpdate:mode": _cache[0] || (_cache[0] = ($event) => mode.value = $event),
@@ -354,38 +380,50 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				})
 			}, [
 				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, {
+					renderSlot(_ctx.$slots, "title", {}, () => [createVNode(unref(ReuseTemplate), { "show-preview": previewPlacement.value === "left" }, null, 8, ["show-preview"])]),
+					renderSlot(_ctx.$slots, "header-center", {}, () => [previewable.value && previewPlacement.value === "center" ? (openBlock(), createBlock(preview_segmented_default, {
 						key: 0,
 						mode: mode.value,
 						"onUpdate:mode": _cache[2] || (_cache[2] = ($event) => mode.value = $event),
 						collapsed: collapsed.value,
 						"onUpdate:collapsed": _cache[3] || (_cache[3] = ($event) => collapsed.value = $event)
 					}, null, 8, ["mode", "collapsed"])) : (openBlock(), createElementBlock("div", _hoisted_4))]),
-					renderSlot(_ctx.$slots, "actions", {}, () => [createVNode(actions_default, { actions: headerControls.value }, null, 8, ["actions"])])
+					renderSlot(_ctx.$slots, "actions", {}, () => [createElementVNode("div", _hoisted_5, [previewable.value && previewPlacement.value === "right" ? (openBlock(), createBlock(preview_segmented_default, {
+						key: 0,
+						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"])) : createCommentVNode("v-if", true), createVNode(actions_default, { actions: headerControls.value }, null, 8, ["actions"])])])
 				]),
 				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]]),
+				}, [previewable.value ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(PreviewComponent.value), mergeProps({ key: 0 }, props, { interactive: inlineInteractive.value }), null, 16, ["interactive"])), [[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[6] || (_cache[6] = ($event) => fullscreen.value = $event),
+					"onUpdate:open": _cache[10] || (_cache[10] = ($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(() => [createVNode(unref(ReuseTemplate))]),
-					"header-center": withCtx(() => [previewable.value && showLanguageTitle.value ? (openBlock(), createBlock(preview_segmented_default, {
+					title: withCtx(() => [createVNode(unref(ReuseTemplate), { "show-preview": previewPlacement.value === "left" }, null, 8, ["show-preview"])]),
+					"header-center": withCtx(() => [previewable.value && previewPlacement.value === "center" ? (openBlock(), createBlock(preview_segmented_default, {
 						key: 0,
 						mode: mode.value,
-						"onUpdate:mode": _cache[4] || (_cache[4] = ($event) => mode.value = $event),
+						"onUpdate:mode": _cache[6] || (_cache[6] = ($event) => mode.value = $event),
 						collapsed: collapsed.value,
-						"onUpdate:collapsed": _cache[5] || (_cache[5] = ($event) => collapsed.value = $event)
+						"onUpdate:collapsed": _cache[7] || (_cache[7] = ($event) => collapsed.value = $event)
 					}, null, 8, ["mode", "collapsed"])) : createCommentVNode("v-if", true)]),
-					actions: withCtx(() => [createVNode(actions_default, { actions: modalControls.value }, null, 8, ["actions"])]),
+					actions: withCtx(() => [createElementVNode("div", _hoisted_6, [previewable.value && previewPlacement.value === "right" ? (openBlock(), createBlock(preview_segmented_default, {
+						key: 0,
+						mode: mode.value,
+						"onUpdate:mode": _cache[8] || (_cache[8] = ($event) => mode.value = $event),
+						collapsed: collapsed.value,
+						"onUpdate:collapsed": _cache[9] || (_cache[9] = ($event) => collapsed.value = $event)
+					}, null, 8, ["mode", "collapsed"])) : createCommentVNode("v-if", true), createVNode(actions_default, { actions: modalControls.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"])