vue-stream-markdown 0.1.2 → 0.1.3

package/README.md

@@ -66,6 +66,14 @@ This project also uses and benefits from:
 - [KaTeX](https://katex.org/) - Fast math typesetting library for the web
 - [Remend](https://github.com/vercel/streamdown/tree/main/packages/remend) - Intelligently parses and styles incomplete Markdown blocks
 
+### 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
+
+## 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.
+
 ## Troubleshooting
 
 The playground supports generating shareable links and provides streaming controls (forward/backward navigation) for debugging streaming rendering issues.

package/dist/button-2wMU7qkH.js

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

package/dist/{button-vKhxUL3C.js → button-CJyeXWq2.js}

@@ -1,4 +1,4 @@
-import { t as tooltip_default } from "./tooltip-KcTe6tBF.js";
+import { t as tooltip_default } from "./tooltip-gxsqaBNg.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

package/dist/{code-_dL6Qk0F.js → code-CJ4tMt6L.js}

@@ -1,10 +1,10 @@
-import "./previewers-CMreQ4TA.js";
-import { i as useShiki } from "./composables-CZ7YmjNl.js";
-import "./tooltip-KcTe6tBF.js";
-import "./button-vKhxUL3C.js";
+import "./previewers-qHMi6xZ3.js";
+import { i as useShiki } from "./composables-Cj6_jbwr.js";
+import "./tooltip-gxsqaBNg.js";
+import "./button-CJyeXWq2.js";
 import "./modal-CuQR21UD.js";
-import { t as code_block_default } from "./code-block-wYeMwBck.js";
-import "./segmented-RoWxDIP3.js";
+import { t as code_block_default } from "./code-block-CQ4lgva1.js";
+import "./segmented-CF6exjdD.js";
 import { computed, createBlock, createCommentVNode, defineAsyncComponent, defineComponent, mergeProps, normalizeProps, openBlock, resolveDynamicComponent, withCtx } from "vue";
 
 //#region src/components/renderers/code/index.vue?vue&type=script&setup=true&lang.ts
@@ -82,8 +82,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-CA9QO96X.js")),
-			shiki: defineAsyncComponent(() => import("./shiki-4529WbJJ.js"))
+			vanilla: defineAsyncComponent(() => import("./vanilla-CKj7EQLx.js")),
+			shiki: defineAsyncComponent(() => import("./shiki-BlfngIRi.js"))
 		};
 		const component = computed(() => {
 			if (hasShiki.value) return components.shiki;

package/dist/code-block-BucFZooo.js

@@ -0,0 +1,9 @@
+import "./previewers-qHMi6xZ3.js";
+import "./composables-Cj6_jbwr.js";
+import "./tooltip-gxsqaBNg.js";
+import "./button-CJyeXWq2.js";
+import "./modal-CuQR21UD.js";
+import { t as code_block_default } from "./code-block-CQ4lgva1.js";
+import "./segmented-CF6exjdD.js";
+
+export { code_block_default as default };

package/dist/{code-block-wYeMwBck.js → code-block-CQ4lgva1.js}

@@ -1,8 +1,8 @@
-import { t as CODE_PREVIEWERS } from "./previewers-CMreQ4TA.js";
-import { B as useContext, I as LANGUAGE_ALIAS, L as LANGUAGE_EXTENSIONS, M as ICONS, O as save, R as LANGUAGE_ICONS, a as useMermaid, u as useI18n, z as useControls } from "./composables-CZ7YmjNl.js";
-import { t as button_default } from "./button-vKhxUL3C.js";
+import { t as CODE_PREVIEWERS } from "./previewers-qHMi6xZ3.js";
+import { B as useContext, I as LANGUAGE_ALIAS, L as LANGUAGE_EXTENSIONS, M as ICONS, O as save, R as LANGUAGE_ICONS, V as useCodeOptions, a as useMermaid, u as useI18n, z as useControls } from "./composables-Cj6_jbwr.js";
+import { t as button_default } from "./button-CJyeXWq2.js";
 import { t as modal_default } from "./modal-CuQR21UD.js";
-import { t as segmented_default } from "./segmented-RoWxDIP3.js";
+import { t as segmented_default } from "./segmented-CF6exjdD.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";
 
@@ -204,11 +204,11 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 	},
 	setup(__props) {
 		const props = __props;
-		const { controls, previewers } = toRefs(props);
+		const { controls, previewers, codeOptions } = toRefs(props);
 		const { t } = useI18n();
 		const { isControlEnabled } = useControls({ controls });
 		const { installed: hasMermaid } = useMermaid();
-		const CodeNode = defineAsyncComponent(() => import("./code-_dL6Qk0F.js"));
+		const CodeNode = defineAsyncComponent(() => import("./code-CJ4tMt6L.js"));
 		const { onCopied } = useContext();
 		const { copy, copied } = useClipboard({ legacy: true });
 		const { saveMermaid } = useMermaid();
@@ -221,13 +221,9 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			if (LANGUAGE_ALIAS[lang]) return LANGUAGE_ALIAS[lang];
 			return lang;
 		});
-		const showLanguageIcon = computed(() => {
-			var _props$codeOptions;
-			return typeof ((_props$codeOptions = props.codeOptions) === null || _props$codeOptions === void 0 ? void 0 : _props$codeOptions.languageIcon) === "boolean" ? props.codeOptions.languageIcon : true;
-		});
-		const showLanguageName = computed(() => {
-			var _props$codeOptions2;
-			return typeof ((_props$codeOptions2 = props.codeOptions) === null || _props$codeOptions2 === void 0 ? void 0 : _props$codeOptions2.languageName) === "boolean" ? props.codeOptions.languageName : true;
+		const { showLanguageIcon, showLanguageName } = useCodeOptions({
+			codeOptions,
+			language
 		});
 		const showLanguageTitle = computed(() => showLanguageIcon.value || showLanguageName.value);
 		const showCollapse = computed(() => isControlEnabled("code.collapse"));
@@ -337,8 +333,8 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						key: 0,
 						icon: icon.value,
 						language: language.value,
-						"show-icon": showLanguageIcon.value,
-						"show-name": showLanguageName.value
+						"show-icon": unref(showLanguageIcon),
+						"show-name": unref(showLanguageName)
 					}, null, 8, [
 						"icon",
 						"language",
@@ -370,8 +366,8 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						key: 0,
 						icon: icon.value,
 						language: language.value,
-						"show-icon": showLanguageIcon.value,
-						"show-name": showLanguageName.value
+						"show-icon": unref(showLanguageIcon),
+						"show-name": unref(showLanguageName)
 					}, null, 8, [
 						"icon",
 						"language",

package/dist/{composables-CZ7YmjNl.js → composables-Cj6_jbwr.js}

@@ -6,6 +6,32 @@ import "tippy.js/themes/light.css";
 import "tippy.js/dist/border.css";
 import "tippy.js/dist/svg-arrow.css";
 
+//#region src/composables/use-code-options.ts
+function useCodeOptions(options) {
+	const language = computed(() => unref(options.language) || "");
+	const codeOptions = computed(() => unref(options.codeOptions));
+	const languageCodeOptions = computed(() => {
+		var _codeOptions$value;
+		return ((_codeOptions$value = codeOptions.value) === null || _codeOptions$value === void 0 || (_codeOptions$value = _codeOptions$value.language) === null || _codeOptions$value === void 0 ? void 0 : _codeOptions$value[language.value]) ?? codeOptions.value;
+	});
+	return {
+		languageCodeOptions,
+		showLanguageIcon: computed(() => {
+			var _languageCodeOptions$;
+			return typeof ((_languageCodeOptions$ = languageCodeOptions.value) === null || _languageCodeOptions$ === void 0 ? void 0 : _languageCodeOptions$.languageIcon) === "boolean" ? languageCodeOptions.value.languageIcon : true;
+		}),
+		showLanguageName: computed(() => {
+			var _languageCodeOptions$2;
+			return typeof ((_languageCodeOptions$2 = languageCodeOptions.value) === null || _languageCodeOptions$2 === void 0 ? void 0 : _languageCodeOptions$2.languageName) === "boolean" ? languageCodeOptions.value.languageName : true;
+		}),
+		showLineNumbers: computed(() => {
+			var _languageCodeOptions$3;
+			return typeof ((_languageCodeOptions$3 = languageCodeOptions.value) === null || _languageCodeOptions$3 === void 0 ? void 0 : _languageCodeOptions$3.lineNumbers) === "boolean" ? languageCodeOptions.value.lineNumbers : true;
+		})
+	};
+}
+
+//#endregion
 //#region src/composables/use-context.ts
 const CONTEXT_KEY = Symbol("stream-markdown-context");
 function useContext() {
@@ -624,21 +650,6 @@ const SHADCN_SCHEMAS = [
 
 //#endregion
 //#region src/utils/harden.ts
-const safeProtocols = new Set([
-	"https:",
-	"http:",
-	"irc:",
-	"ircs:",
-	"mailto:",
-	"xmpp:",
-	"blob:"
-]);
-const blockedProtocols = new Set([
-	"javascript:",
-	"data:",
-	"file:",
-	"vbscript:"
-]);
 function parseUrl(url, defaultOrigin) {
 	if (typeof url !== "string") return null;
 	try {
@@ -649,13 +660,33 @@ function parseUrl(url, defaultOrigin) {
 		} catch {
 			return null;
 		}
+		if (url.startsWith("/") || url.startsWith("./") || url.startsWith("../")) try {
+			return new URL(url, "http://example.com");
+		} catch {
+			return null;
+		}
 		return null;
 	}
 }
 function isPathRelativeUrl(url) {
 	if (typeof url !== "string") return false;
-	return url.startsWith("/");
+	return url.startsWith("/") || url.startsWith("./") || url.startsWith("../");
 }
+const safeProtocols = new Set([
+	"https:",
+	"http:",
+	"irc:",
+	"ircs:",
+	"mailto:",
+	"xmpp:",
+	"blob:"
+]);
+const blockedProtocols = new Set([
+	"javascript:",
+	"data:",
+	"file:",
+	"vbscript:"
+]);
 function transformUrl(url, allowedPrefixes, defaultOrigin, allowDataImages = false, isImage = false, allowedProtocols = []) {
 	if (!url) return null;
 	if (typeof url === "string" && url.startsWith("#") && !isImage) try {
@@ -1647,4 +1678,4 @@ function useZoom(options = {}) {
 }
 
 //#endregion
-export { transformUrl as A, useContext as B, findNodeParent as C, flow as D, hasShiki as E, DEFAULT_LIGHT_THEME as F, LANGUAGE_ALIAS as I, LANGUAGE_EXTENSIONS as L, ICONS as M, DEFAULT_HARDEN_OPTIONS as N, save as O, DEFAULT_DARK_THEME as P, LANGUAGE_ICONS as R, findLastLeafNode as S, hasMermaid as T, escapeMarkdownTableCell as _, useMermaid as a, tableDataToMarkdown as b, _defineProperty as c, SUPPORT_LANGUAGES as d, currentLocale as f, useHardenSanitizers as g, localesGlob as h, useShiki as i, SHADCN_SCHEMAS as j, svgToPngBlob as k, useKatex as l, localeMessages as m, useTippy as n, useMathRenderer as o, loadLocaleMessages as p, useTailwindV3Theme as r, throttle as s, useZoom as t, useI18n as u, extractTableDataFromElement as v, hasKatex as w, tableDataToTSV as x, tableDataToCSV as y, useControls as z };
+export { transformUrl as A, useContext as B, findNodeParent as C, flow as D, hasShiki as E, DEFAULT_LIGHT_THEME as F, LANGUAGE_ALIAS as I, LANGUAGE_EXTENSIONS as L, ICONS as M, DEFAULT_HARDEN_OPTIONS as N, save as O, DEFAULT_DARK_THEME as P, LANGUAGE_ICONS as R, findLastLeafNode as S, hasMermaid as T, useCodeOptions as V, escapeMarkdownTableCell as _, useMermaid as a, tableDataToMarkdown as b, _defineProperty as c, SUPPORT_LANGUAGES as d, currentLocale as f, useHardenSanitizers as g, localesGlob as h, useShiki as i, SHADCN_SCHEMAS as j, svgToPngBlob as k, useKatex as l, localeMessages as m, useTippy as n, useMathRenderer as o, loadLocaleMessages as p, useTailwindV3Theme as r, throttle as s, useZoom as t, useI18n as u, extractTableDataFromElement as v, hasKatex as w, tableDataToTSV as x, tableDataToCSV as y, useControls as z };

package/dist/dropdown-dsCfq0Hl.js

@@ -0,0 +1,5 @@
+import "./composables-Cj6_jbwr.js";
+import "./tooltip-gxsqaBNg.js";
+import { n as dropdown_default } from "./button-CJyeXWq2.js";
+
+export { dropdown_default as default };

package/dist/error-component-B0mmLhh6.js

@@ -0,0 +1,4 @@
+import "./composables-Cj6_jbwr.js";
+import { t as error_component_default } from "./error-component-ClGLfmwy.js";
+
+export { error_component_default as default };

package/dist/{error-component-ChEpOmSX.js → error-component-ClGLfmwy.js}

@@ -1,4 +1,4 @@
-import { M as ICONS, u as useI18n } from "./composables-CZ7YmjNl.js";
+import { M as ICONS, u as useI18n } from "./composables-Cj6_jbwr.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, openBlock, renderSlot, resolveDynamicComponent, toDisplayString } from "vue";
 
 //#region src/components/error-component.vue?vue&type=script&setup=true&lang.ts

package/dist/{image-DB-4Sv8R.js → image-xeiC5YFM.js}

@@ -1,7 +1,7 @@
-import { M as ICONS, O as save, g as useHardenSanitizers, u as useI18n, z as useControls } from "./composables-CZ7YmjNl.js";
-import "./tooltip-KcTe6tBF.js";
-import { t as button_default } from "./button-vKhxUL3C.js";
-import { t as error_component_default } from "./error-component-ChEpOmSX.js";
+import { M as ICONS, O as save, g as useHardenSanitizers, u as useI18n, z as useControls } from "./composables-Cj6_jbwr.js";
+import "./tooltip-gxsqaBNg.js";
+import { t as button_default } from "./button-CJyeXWq2.js";
+import { t as error_component_default } from "./error-component-ClGLfmwy.js";
 import { t as spin_default } from "./spin-Ds5W7qC_.js";
 import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeStyle, openBlock, ref, resolveDynamicComponent, toDisplayString, toRefs, unref, withCtx } from "vue";
 

package/dist/index.css

@@ -24,20 +24,6 @@
   padding: 0;
 }
 
-.stream-markdown .tippy-box {
-  background: var(--popover);
-  color: var(--popover-foreground);
-  border: 1px solid var(--border);
-}
-
-.stream-markdown .tippy-arrow {
-  color: var(--popover);
-}
-
-.stream-markdown .tippy-box > .tippy-svg-arrow {
-  border-top-color: var(--popover);
-}
-
 .stream-markdown ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -57,6 +43,20 @@
   opacity: 0.5;
 }
 
+.stream-markdown .tippy-box {
+  background: var(--popover);
+  color: var(--popover-foreground);
+  border: 1px solid var(--border);
+}
+
+.stream-markdown .tippy-arrow {
+  color: var(--popover);
+}
+
+.stream-markdown .tippy-box > .tippy-svg-arrow {
+  border-top-color: var(--popover);
+}
+
 .stream-markdown [data-stream-markdown='button'] {
   display: flex;
   align-items: center;
@@ -160,15 +160,6 @@
   overflow: auto;
 }
 
-.stream-markdown .modal-enter-from,
-.stream-markdown .modal-leave-to {
-  opacity: 0;
-}
-.stream-markdown .modal-enter-active,
-.stream-markdown .modal-leave-active {
-  transition: opacity var(--default-transition-duration) ease;
-}
-
 .stream-markdown [data-stream-markdown='modal-header'] > :first-child {
   flex: 1;
 }
@@ -215,15 +206,6 @@
   animation: spin 1s linear infinite;
 }
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .stream-markdown [data-stream-markdown='table'] {
   width: 100%;
   border-collapse: collapse;
@@ -335,7 +317,7 @@
 
 @media (max-width: 1024px) {
   .stream-markdown [data-stream-markdown='code-block-header'] {
-    padding-inline: 0.5rem;
+    padding-inline: 0.75rem;
   }
 }
 
@@ -488,23 +470,6 @@
   right: 0.5rem;
 }
 
-.stream-markdown .img-switch-enter-active,
-.stream-markdown .img-switch-leave-active {
-  transition:
-    opacity var(--default-transition-duration) ease,
-    transform var(--default-transition-duration) ease;
-}
-.stream-markdown .img-switch-enter-from,
-.stream-markdown .img-switch-leave-to {
-  opacity: 0;
-  transform: translateY(6px);
-}
-.stream-markdown .img-switch-enter-to,
-.stream-markdown .img-switch-leave-from {
-  opacity: 1;
-  transform: translateY(0);
-}
-
 .stream-markdown [data-stream-markdown='inline-code'] {
   background-color: var(--muted);
   border-radius: 0.25rem;
@@ -517,16 +482,6 @@
   overflow-wrap: break-word;
 }
 
-.stream-markdown .inline-math-enter-active,
-.stream-markdown .inline-math-leave-active {
-  transition: opacity var (--default-transition-duration) ease;
-}
-
-.stream-markdown .inline-math-enter-from,
-.stream-markdown .inline-math-leave-to {
-  opacity: 0;
-}
-
 .stream-markdown [data-stream-markdown='link'] {
   color: var(--primary);
   text-decoration: underline;
@@ -579,16 +534,6 @@
   margin-block: 1rem;
 }
 
-.stream-markdown .math-enter-active,
-.stream-markdown .math-leave-active {
-  transition: opacity var (--default-transition-duration) ease;
-}
-
-.stream-markdown .math-enter-from,
-.stream-markdown .math-leave-to {
-  opacity: 0;
-}
-
 .stream-markdown [data-stream-markdown='paragraph'] {
   margin-bottom: 1rem;
   vertical-align: middle;
@@ -639,14 +584,17 @@
 .stream-markdown [data-stream-markdown='code'],
 .stream-markdown [data-stream-markdown='code'] code {
   font-family: var(--font-mono);
+  font-size: 0.875rem;
 }
 
-.stream-markdown [data-stream-markdown='code'] .line {
+.stream-markdown [data-stream-markdown='code'] [data-stream-markdown='code-line'] {
   display: block;
   position: relative;
+  font-size: 0.875rem;
+  min-height: 1rem;
 }
 
-.stream-markdown [data-stream-markdown='code'] .line::before {
+.stream-markdown [data-stream-markdown='code'] [data-stream-markdown='code-line']::before {
   display: inline-block;
   width: 1rem;
   margin-right: 1rem;
@@ -659,10 +607,47 @@
   user-select: none;
 }
 
-.stream-markdown [data-stream-markdown='code'][data-show-line-numbers='false'] .line::before {
+.stream-markdown
+  [data-stream-markdown='code'][data-show-line-numbers='false']
+  [data-stream-markdown='code-line']::before {
   display: none;
 }
 
 .stream-markdown [data-stream-markdown='code'] {
   padding: 1rem;
 }
+
+.stream-markdown .modal-enter-from,
+.stream-markdown .modal-leave-to {
+  opacity: 0;
+}
+.stream-markdown .modal-enter-active,
+.stream-markdown .modal-leave-active {
+  transition: opacity var(--default-transition-duration) ease;
+}
+
+.stream-markdown .img-switch-enter-active,
+.stream-markdown .img-switch-leave-active {
+  transition:
+    opacity var(--default-transition-duration) ease,
+    transform var(--default-transition-duration) ease;
+}
+.stream-markdown .img-switch-enter-from,
+.stream-markdown .img-switch-leave-to {
+  opacity: 0;
+  transform: translateY(6px);
+}
+.stream-markdown .img-switch-enter-to,
+.stream-markdown .img-switch-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}