vue-stream-markdown 0.1.5 → 0.2.0

package/README.md

@@ -33,6 +33,7 @@ pnpm add vue-stream-markdown
 - **Theme-aware scoped styles** - Scoped styles under `.stream-markdown` with semantic `data-stream-markdown` attributes, following [shadcn/ui](https://ui.shadcn.com/) design system
 - **Beautiful built-in typography** - No atomic CSS required (Tailwind/UnoCSS), self-contained styles
 - **Content hardening & security** - Built-in protection against malicious Markdown with URL validation and protocol blocking
+- **SSR support** - Full server-side rendering compatibility with environment detection utilities
 
 ## Usage
 

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

@@ -1,4 +1,5 @@
-import { t as node_list_default } from "./node-list-YhpHXdM_.js";
+import "./composables-DuQ72m6O.js";
+import { t as node_list_default } from "./node-list-D7eKaZGS.js";
 import { createElementBlock, createVNode, defineComponent, mergeProps, openBlock } from "vue";
 
 //#region src/components/renderers/blockquote.vue?vue&type=script&setup=true&lang.ts
@@ -18,8 +19,8 @@ var blockquote_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			type: Object,
 			required: true
 		},
-		indexKey: {
-			type: [Number, String],
+		nodeKey: {
+			type: String,
 			required: true
 		},
 		controls: {

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

@@ -1,5 +1,7 @@
-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";
+import { t as tooltip_default } from "./tooltip-CnO7OPL1.js";
+import { t as icon_default } from "./icon-PEivHbuv.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";
 
 //#region src/components/dropdown.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = { "data-stream-markdown": "dropdown-overlay" };
@@ -69,6 +71,7 @@ var dropdown_default = dropdown_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 //#region src/components/button.vue?vue&type=script&setup=true&lang.ts
 var button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
 	__name: "button",
 	props: {
 		variant: {
@@ -130,6 +133,7 @@ var button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emits = __emit;
+		const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
 		const isDropdown = computed(() => props.options.length > 0);
 		function onClick(event) {
 			if (isDropdown.value) return;
@@ -138,57 +142,61 @@ var button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		function onDropdownClick(event, item) {
 			if (item) emits("click", event, item);
 		}
-		const Icon = computed(() => {
-			if (!props.icon) return null;
-			return h(props.icon, {
-				width: props.iconWidth,
-				height: props.iconHeight,
-				class: props.iconClass,
-				style: props.iconStyle
-			});
-		});
 		return (_ctx, _cache) => {
-			return __props.variant === "icon" ? (openBlock(), createBlock(resolveDynamicComponent(isDropdown.value ? dropdown_default : tooltip_default), {
-				key: 0,
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineTemplate), null, {
+				default: withCtx(() => [__props.icon ? (openBlock(), createBlock(icon_default, {
+					key: 0,
+					icon: __props.icon,
+					width: __props.iconWidth,
+					height: __props.iconHeight,
+					class: normalizeClass(__props.iconClass),
+					style: normalizeStyle(__props.iconStyle)
+				}, null, 8, [
+					"icon",
+					"width",
+					"height",
+					"class",
+					"style"
+				])) : createCommentVNode("v-if", true)]),
+				_: 1
+			}), __props.variant === "icon" ? (openBlock(), createBlock(resolveDynamicComponent(isDropdown.value ? dropdown_default : tooltip_default), mergeProps({ key: 0 }, _ctx.$attrs, {
 				content: isDropdown.value ? void 0 : __props.name,
 				title: __props.name,
 				options: __props.options,
 				onClick: onDropdownClick
-			}, {
-				default: withCtx(() => [createElementVNode("button", {
+			}), {
+				default: withCtx(() => [createElementVNode("button", mergeProps(_ctx.$attrs, {
 					"data-stream-markdown": "button",
 					type: "button",
-					class: normalizeClass(__props.buttonClass),
-					style: normalizeStyle(__props.buttonStyle),
+					class: __props.buttonClass,
+					style: __props.buttonStyle,
 					onClick
-				}, [(openBlock(), createBlock(resolveDynamicComponent(Icon.value)))], 6)]),
+				}), [createVNode(unref(ReuseTemplate))], 16)]),
 				_: 1
-			}, 8, [
+			}, 16, [
 				"content",
 				"title",
 				"options"
-			])) : __props.variant === "text" && !isDropdown.value ? (openBlock(), createElementBlock("button", {
-				key: 1,
+			])) : __props.variant === "text" && !isDropdown.value ? (openBlock(), createElementBlock("button", mergeProps({ key: 1 }, _ctx.$attrs, {
 				"data-stream-markdown": "button",
 				type: "button",
-				class: normalizeClass(__props.buttonClass),
-				style: normalizeStyle(__props.buttonStyle),
+				class: __props.buttonClass,
+				style: __props.buttonStyle,
 				onClick
-			}, [(openBlock(), createBlock(resolveDynamicComponent(Icon.value))), createTextVNode(" " + toDisplayString(__props.name), 1)], 6)) : (openBlock(), createBlock(dropdown_default, {
-				key: 2,
+			}), [createVNode(unref(ReuseTemplate)), createTextVNode(" " + toDisplayString(__props.name), 1)], 16)) : (openBlock(), createBlock(dropdown_default, mergeProps({ key: 2 }, _ctx.$attrs, {
 				title: __props.name,
 				options: __props.options,
 				onClick: onDropdownClick
-			}, {
+			}), {
 				default: withCtx(() => [createElementVNode("button", {
 					"data-stream-markdown": "button",
 					type: "button",
 					class: normalizeClass(__props.buttonClass),
 					style: normalizeStyle(__props.buttonStyle),
 					onClick
-				}, [(openBlock(), createBlock(resolveDynamicComponent(Icon.value))), createTextVNode(" " + toDisplayString(__props.name), 1)], 6)]),
+				}, [createVNode(unref(ReuseTemplate)), createTextVNode(" " + toDisplayString(__props.name), 1)], 6)]),
 				_: 1
-			}, 8, ["title", "options"]));
+			}, 16, ["title", "options"]))], 64);
 		};
 	}
 });

package/dist/button-CdUyT8T_.js

@@ -0,0 +1,6 @@
+import "./composables-DuQ72m6O.js";
+import "./tooltip-CnO7OPL1.js";
+import { t as button_default } from "./button-BDO3n0n_.js";
+import "./icon-PEivHbuv.js";
+
+export { button_default as default };

package/dist/{code-DF8PTNol.js → code-2Dd0EGfm.js}

@@ -1,10 +1,11 @@
-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 "./previewers-DYnyVv4Y.js";
+import { r as useShiki } from "./composables-DuQ72m6O.js";
+import "./tooltip-CnO7OPL1.js";
+import "./button-BDO3n0n_.js";
+import "./icon-PEivHbuv.js";
+import "./modal-DrPdD2g1.js";
+import { t as code_block_default } from "./code-block-hQLDeAmP.js";
+import "./segmented-CeLXMLZa.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
@@ -23,8 +24,8 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: Object,
 			required: true
 		},
-		indexKey: {
-			type: [Number, String],
+		nodeKey: {
+			type: String,
 			required: true
 		},
 		controls: {
@@ -74,8 +75,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-DA5bwIkr.js")),
-			shiki: defineAsyncComponent(() => import("./shiki-sJNZTn1K.js"))
+			vanilla: defineAsyncComponent(() => import("./vanilla-BZ1fQWZQ.js")),
+			shiki: defineAsyncComponent(() => import("./shiki-Dgoch7Q6.js"))
 		};
 		const component = computed(() => {
 			if (hasShiki.value) return components.shiki;

package/dist/code-block-Co2UoPPS.js

@@ -0,0 +1,10 @@
+import "./previewers-DYnyVv4Y.js";
+import "./composables-DuQ72m6O.js";
+import "./tooltip-CnO7OPL1.js";
+import "./button-BDO3n0n_.js";
+import "./icon-PEivHbuv.js";
+import "./modal-DrPdD2g1.js";
+import { t as code_block_default } from "./code-block-hQLDeAmP.js";
+import "./segmented-CeLXMLZa.js";
+
+export { code_block_default as default };

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

@@ -1,8 +1,8 @@
-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 { t as CODE_PREVIEWERS } from "./previewers-DYnyVv4Y.js";
+import { G as useCodeOptions, U as useControls, W as useContext, d as LANGUAGE_EXTENSIONS, f as LANGUAGE_ICONS, p as useMermaid, u as LANGUAGE_ALIAS, y as useI18n, z as save } from "./composables-DuQ72m6O.js";
+import { t as button_default } from "./button-BDO3n0n_.js";
+import { t as modal_default } from "./modal-DrPdD2g1.js";
+import { t as segmented_default } from "./segmented-CeLXMLZa.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";
 
@@ -17,21 +17,11 @@ var actions_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 	} },
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.actions, (action) => {
-				return openBlock(), createBlock(button_default, {
-					key: action.key,
-					name: action.name,
-					icon: action.icon,
-					"icon-style": action.iconStyle,
-					options: action.options,
-					onClick: action.onClick
-				}, null, 8, [
-					"name",
-					"icon",
-					"icon-style",
-					"options",
-					"onClick"
-				]);
+			return openBlock(), createElementBlock("div", _hoisted_1$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.actions, (item) => {
+				return openBlock(), createBlock(button_default, mergeProps({ ref_for: true }, item, {
+					key: item.key,
+					onClick: item.onClick
+				}), null, 16, ["onClick"]);
 			}), 128))]);
 		};
 	}
@@ -104,15 +94,14 @@ var preview_segmented_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const mode = useModel(__props, "mode");
 		const collapsed = useModel(__props, "collapsed");
 		const { t } = useI18n();
-		const { icons } = useContext();
 		const SEGMENTED_OPTIONS = computed(() => [{
 			label: t("button.preview"),
 			value: "preview",
-			icon: icons.value.preview
+			icon: "preview"
 		}, {
 			label: t("button.source"),
 			value: "source",
-			icon: icons.value.code
+			icon: "code"
 		}]);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(segmented_default, {
@@ -152,8 +141,8 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: Object,
 			required: true
 		},
-		indexKey: {
-			type: [Number, String],
+		nodeKey: {
+			type: String,
 			required: true
 		},
 		controls: {
@@ -195,12 +184,11 @@ 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 CodeNode = defineAsyncComponent(() => import("./code-2Dd0EGfm.js"));
 		const { controls, previewers, codeOptions } = toRefs(props);
 		const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
 		const { t } = useI18n();
-		const { icons } = useContext();
-		const { isControlEnabled } = useControls({ controls });
+		const { isControlEnabled, resolveControls } = useControls({ controls });
 		const { installed: hasMermaid } = useMermaid();
 		const { onCopied } = useContext();
 		const { copy, copied } = useClipboard({ legacy: true });
@@ -249,11 +237,12 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			return false;
 		});
 		const PreviewComponent = computed(() => {
-			if (!previewers.value || typeof previewers.value === "boolean") return CODE_PREVIEWERS[language.value];
+			const previewer = CODE_PREVIEWERS[language.value];
+			if (!previewers.value || typeof previewers.value === "boolean") return previewer;
 			const data = previewers.value[language.value];
-			if (data === false) return CODE_PREVIEWERS[language.value];
+			if (data === false) return previewer;
 			if (data && typeof data !== "boolean") return data;
-			return CODE_PREVIEWERS[language.value];
+			return previewer;
 		});
 		function normalizeHeight(height) {
 			return typeof height === "number" ? `${height}px` : height;
@@ -283,56 +272,55 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				}
 			];
 		});
-		const actions = computed(() => {
-			return [
-				{
-					name: t("button.collapse"),
-					key: "collapse",
-					icon: icons.value.collapse,
-					iconStyle: {
-						transform: collapsed.value ? "rotate(180deg)" : void 0,
-						transition: "transform var(--default-transition-duration)"
-					},
-					visible: () => showCollapse.value,
-					onClick: () => collapsed.value = !collapsed.value
-				},
-				{
-					name: t("button.copy"),
-					key: "copy",
-					icon: copied.value ? icons.value.check : icons.value.copy,
-					visible: () => showCopy.value,
-					onClick: () => {
-						if (!props.node.value) return;
-						copy(props.node.value);
-						onCopied(props.node.value);
-					}
+		const builtinControls = computed(() => [
+			{
+				name: t("button.collapse"),
+				key: "collapse",
+				icon: "collapse",
+				iconStyle: {
+					transform: collapsed.value ? "rotate(180deg)" : void 0,
+					transition: "transform var(--default-transition-duration)"
 				},
-				{
-					name: t("button.download"),
-					key: "download",
-					icon: icons.value.download,
-					options: downloadOptions.value.length > 0 ? downloadOptions.value : void 0,
-					visible: () => showDownload.value && !!LANGUAGE_EXTENSIONS[language.value],
-					onClick: (_event, item) => {
-						if (props.node.loading) return;
-						if (!item || item.value === "code") {
-							const extension = LANGUAGE_EXTENSIONS[language.value];
-							save(`file.${extension}`, props.node.value, "text/plain");
-							return;
-						}
-						if ((item === null || item === void 0 ? void 0 : item.value) === "svg" || (item === null || item === void 0 ? void 0 : item.value) === "png") saveMermaid(item === null || item === void 0 ? void 0 : item.value, props.node.value);
+				visible: () => showCollapse.value,
+				onClick: () => collapsed.value = !collapsed.value
+			},
+			{
+				name: t("button.copy"),
+				key: "copy",
+				icon: copied.value ? "check" : "copy",
+				visible: () => showCopy.value,
+				onClick: () => {
+					if (!props.node.value) return;
+					copy(props.node.value);
+					onCopied(props.node.value);
+				}
+			},
+			{
+				name: t("button.download"),
+				key: "download",
+				icon: "download",
+				options: downloadOptions.value.length > 0 ? downloadOptions.value : void 0,
+				visible: () => showDownload.value && !!LANGUAGE_EXTENSIONS[language.value],
+				onClick: (_event, item) => {
+					if (props.node.loading) return;
+					if (!item || item.value === "code") {
+						const extension = LANGUAGE_EXTENSIONS[language.value];
+						save(`file.${extension}`, props.node.value, "text/plain");
+						return;
 					}
-				},
-				{
-					name: fullscreen.value ? t("button.minimize") : t("button.maximize"),
-					key: "fullscreen",
-					icon: fullscreen.value ? icons.value.minimize : icons.value.maximize,
-					visible: () => showFullscreen.value,
-					onClick: () => fullscreen.value = !fullscreen.value
+					if ((item === null || item === void 0 ? void 0 : item.value) === "svg" || (item === null || item === void 0 ? void 0 : item.value) === "png") saveMermaid(item === null || item === void 0 ? void 0 : item.value, props.node.value);
 				}
-			].filter((button) => !button.visible || button.visible());
-		});
-		const ModalActions = computed(() => actions.value.filter((i) => i.key !== "collapse"));
+			},
+			{
+				name: fullscreen.value ? t("button.minimize") : t("button.maximize"),
+				key: "fullscreen",
+				icon: fullscreen.value ? "minimize" : "maximize",
+				visible: () => showFullscreen.value,
+				onClick: () => fullscreen.value = !fullscreen.value
+			}
+		]);
+		const headerControls = computed(() => resolveControls("code", builtinControls.value, props));
+		const modalControls = computed(() => resolveControls("code", headerControls.value, props).filter((i) => i.key !== "collapse"));
 		watch(() => previewable.value, () => {
 			if (previewable.value) mode.value = "preview";
 		}, { immediate: true });
@@ -374,7 +362,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						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: actions.value }, null, 8, ["actions"])])
+					renderSlot(_ctx.$slots, "actions", {}, () => [createVNode(actions_default, { actions: headerControls.value }, null, 8, ["actions"])])
 				]),
 				withDirectives(createElementVNode("main", {
 					"data-stream-markdown": "code-block-content",
@@ -397,7 +385,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						collapsed: collapsed.value,
 						"onUpdate:collapsed": _cache[5] || (_cache[5] = ($event) => collapsed.value = $event)
 					}, null, 8, ["mode", "collapsed"])) : createCommentVNode("v-if", true)]),
-					actions: withCtx(() => [createVNode(actions_default, { actions: ModalActions.value }, null, 8, ["actions"])]),
+					actions: withCtx(() => [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"])