@antdv-next/x-markdown 0.1.3 → 0.2.0

package/README.md

@@ -105,19 +105,51 @@ import "@antdv-next/x-markdown/themes/light.css";
 
 ### Props
 
-| Property                 | Description                             | Type                        | Default         |
-| ------------------------ | --------------------------------------- | --------------------------- | --------------- |
-| content                  | Markdown content to render              | `string`                    | -               |
-| components               | Map HTML nodes to custom Vue components | `Record<string, Component>` | -               |
-| streaming                | Streaming behavior config               | `StreamingOption`           | -               |
-| config                   | Marked parse config                     | `MarkedConfig`              | `{ gfm: true }` |
-| className                | Extra CSS class for root container      | `string`                    | -               |
-| style                    | Inline styles for root container        | `Record<string, string>`    | -               |
-| paragraphTag             | HTML tag for paragraphs                 | `string`                    | `'p'`           |
-| openLinksInNewTab        | Add `target="_blank"` to all links      | `boolean`                   | `true`          |
-| protectCustomTagNewlines | Preserve newlines inside custom tags    | `boolean`                   | `true`          |
-| escapeRawHtml            | Escape raw HTML as plain text           | `boolean`                   | `false`         |
-| debug                    | Enable debug mode                       | `boolean`                   | `false`         |
+| Property                 | Description                                         | Type                                      | Default         |
+| ------------------------ | --------------------------------------------------- | ----------------------------------------- | --------------- |
+| content                  | Markdown content to render                          | `string`                                  | -               |
+| components               | Map HTML nodes to custom Vue components             | `Record<string, Component>`               | -               |
+| componentsProps          | Extra props passed to custom components by tag name | `Record<string, Record<string, unknown>>` | -               |
+| streaming                | Streaming behavior config                           | `StreamingOption`                         | -               |
+| config                   | Marked parse config                                 | `MarkedConfig`                            | `{ gfm: true }` |
+| className                | Extra CSS class for root container                  | `string`                                  | -               |
+| style                    | Inline styles for root container                    | `Record<string, string>`                  | -               |
+| paragraphTag             | HTML tag for paragraphs                             | `string`                                  | `'p'`           |
+| openLinksInNewTab        | Add `target="_blank"` to all links                  | `boolean`                                 | `true`          |
+| protectCustomTagNewlines | Preserve newlines inside custom tags                | `boolean`                                 | `true`          |
+| escapeRawHtml            | Escape raw HTML as plain text                       | `boolean`                                 | `false`         |
+| debug                    | Enable debug mode                                   | `boolean`                                 | `false`         |
+
+### Passing extra props to custom components
+
+Custom components often need business data (theme, callbacks, etc.). Passing it via an inline wrapper function creates a new component on every render and forces the subtree to be re-created, losing internal state and hurting performance in streaming scenarios. Use `componentsProps` to pass extra props while keeping component references stable:
+
+```vue
+<script setup>
+import { computed, ref } from "vue";
+import { XMarkdown } from "@antdv-next/x-markdown";
+
+const theme = ref("dark");
+const components = { "custom-chart": CustomChart };
+// Keep the reference stable — an inline object literal invalidates the render
+// cache and re-parses the whole tree on every render.
+const componentsProps = computed(() => ({
+  "custom-chart": { theme: theme.value, onSelect },
+}));
+</script>
+
+<template>
+  <XMarkdown :components="components" :componentsProps="componentsProps" />
+</template>
+```
+
+`componentsProps` is keyed by tag name. Its props are merged with the parsed HTML attributes and passed to the component:
+
+- On conflict `componentsProps` wins — a `title` in `componentsProps` overrides `title="..."` from the HTML.
+- `class` / `className` is the exception: both sides are concatenated, with the `componentsProps` class name first (merged into `class`).
+- Internally computed props — `streamStatus`, `domNode`, `children` (plus `lang` and `block` for `code`) — cannot be overridden and are ignored if present in `componentsProps`.
+
+When `componentsProps` changes, the component receives a normal props update without being remounted. Like `components`, it takes part in the render cache, so passing an inline object literal invalidates that cache on every render and re-parses the whole tree — keep the reference stable (e.g. with `computed`) as shown above.
 
 ### StreamingOption
 

package/dist/XMarkdown/composables/useStreaming.js

@@ -163,7 +163,7 @@ var safeEncodeURIComponent = (str) => {
 	}
 };
 function useStreaming(content, streaming, components) {
-	const streamCache = ref(getInitialCache());
+	let streamCache = getInitialCache();
 	const processedContent = ref("");
 	function handleIncompleteMarkdown(cache, opts) {
 		const { token, pending } = cache;
@@ -177,12 +177,12 @@ function useStreaming(content, streaming, components) {
 	function processStreaming(text, opts) {
 		if (!text) {
 			processedContent.value = "";
-			streamCache.value = getInitialCache();
+			streamCache = getInitialCache();
 			return;
 		}
-		const expectedPrefix = streamCache.value.completeMarkdown + streamCache.value.pending;
-		if (!text.startsWith(expectedPrefix)) streamCache.value = getInitialCache();
-		const cache = streamCache.value;
+		const expectedPrefix = streamCache.completeMarkdown + streamCache.pending;
+		if (!text.startsWith(expectedPrefix)) streamCache = getInitialCache();
+		const cache = streamCache;
 		const chunk = text.slice(cache.processedLength);
 		if (!chunk) {
 			const incompletePlaceholder = handleIncompleteMarkdown(cache, opts);
@@ -209,14 +209,14 @@ function useStreaming(content, streaming, components) {
 		processedContent.value = cache.completeMarkdown + (incompletePlaceholder || "");
 	}
 	function reset() {
-		streamCache.value = getInitialCache();
+		streamCache = getInitialCache();
 		processedContent.value = "";
 	}
 	watch([content, () => streaming.value?.hasNextChunk], ([newContent, hasNextChunk]) => {
 		const opts = streaming.value;
 		if (!Boolean(hasNextChunk)) {
 			processedContent.value = newContent;
-			streamCache.value = {
+			streamCache = {
 				pending: "",
 				token: StreamCacheTokenType.Text,
 				processedLength: newContent.length,

package/dist/XMarkdown/core/Parser.js

@@ -45,21 +45,30 @@ var Parser = class Parser {
 		this.configureRenderers();
 	}
 	configureRenderers() {
+		const options = this.options;
+		const consumeCodeBlockState = (lang) => this.consumeCodeBlockState(lang);
+		const markedParseInline = (renderer, tokens) => {
+			const parser = renderer.parser;
+			return parser ? parser.parseInline(tokens ?? []) : "";
+		};
 		this.markdownInstance.use({ renderer: {
-			html: (html) => {
-				if (this.options.escapeRawHtml) return escapeHtml(html);
-				return html;
+			html(token) {
+				if (options.escapeRawHtml) return escapeHtml(token.text);
+				return token.text;
 			},
-			link: (href, title, text) => {
-				return `<a href="${href}"${title ? ` title="${title}"` : ""}${this.options.openLinksInNewTab ? ` target="_blank" rel="noopener noreferrer"` : ""}>${text}</a>`;
+			link(token) {
+				const titleAttr = token.title ? ` title="${token.title}"` : "";
+				const targetAttr = options.openLinksInNewTab ? ` target="_blank" rel="noopener noreferrer"` : "";
+				return `<a href="${token.href}"${titleAttr}${targetAttr}>${markedParseInline(this, token.tokens)}</a>`;
 			},
-			paragraph: (text) => {
-				if (this.options.paragraphTag === "p") return `<p>${text}</p>`;
-				return `<${this.options.paragraphTag}>${text}</${this.options.paragraphTag}>`;
+			paragraph(token) {
+				const text = markedParseInline(this, token.tokens);
+				if (options.paragraphTag === "p") return `<p>${text}</p>`;
+				return `<${options.paragraphTag}>${text}</${options.paragraphTag}>`;
 			},
-			code: (code, infostring, escaped) => {
-				const lang = infostring || "";
-				return `<pre><code class="language-${lang}"${lang ? ` data-lang="${lang}"` : ""} data-block="true"${` data-state="${this.consumeCodeBlockState(lang)}"`}>${escaped ? code : escapeHtml(code)}</code></pre>`;
+			code(token) {
+				const lang = token.lang || "";
+				return `<pre><code class="language-${lang}"${lang ? ` data-lang="${lang}"` : ""} data-block="true"${` data-state="${consumeCodeBlockState(lang)}"`}>${escapeHtml(token.text)}</code></pre>`;
 			}
 		} });
 	}

package/dist/XMarkdown/core/VueRenderer.js

@@ -55,6 +55,7 @@ var VueRenderer = class {
 	constructor(options = {}) {
 		this.options = {
 			components: options.components ?? {},
+			componentsProps: options.componentsProps ?? {},
 			enableAnimation: options.enableAnimation ?? true,
 			animationConfig: {
 				fadeDuration: options.animationConfig?.fadeDuration ?? DEFAULT_ANIMATION_DURATION,
@@ -183,12 +184,17 @@ var VueRenderer = class {
 	}
 	extractComponentProps(element, tagName, unclosedTags, cidRef) {
 		const props = {};
-		cidRef.tagIndexes[tagName] = (cidRef.tagIndexes[tagName] ?? 0) + 1;
-		const instanceId = getTagInstanceId(tagName, cidRef.tagIndexes[tagName]);
-		props.streamStatus = unclosedTags.has(instanceId) ? "loading" : "done";
 		Array.from(element.attributes).forEach((attr) => {
 			props[attr.name] = attr.value;
 		});
+		const htmlClass = typeof props.class === "string" ? props.class : "";
+		const extraProps = this.options.componentsProps[tagName] ?? {};
+		Object.assign(props, extraProps);
+		cidRef.tagIndexes[tagName] = (cidRef.tagIndexes[tagName] ?? 0) + 1;
+		const instanceId = getTagInstanceId(tagName, cidRef.tagIndexes[tagName]);
+		props.streamStatus = unclosedTags.has(instanceId) ? "loading" : "done";
+		props.domNode = element;
+		delete props.children;
 		if (tagName === "code") {
 			props.block = element.getAttribute("data-block") === "true";
 			props.streamStatus = element.getAttribute("data-state") === "loading" ? "loading" : "done";
@@ -197,7 +203,12 @@ var VueRenderer = class {
 			const langFromClass = className.match(/(?:^|\s)language-([^\s]+)/)?.[1] ?? className.match(/(?:^|\s)lang-([^\s]+)/)?.[1] ?? "";
 			const lang = langFromData || langFromClass;
 			if (lang) props.lang = lang;
+			else delete props.lang;
 		}
+		const extraClass = extraProps.className ?? extraProps.classname ?? extraProps.class;
+		if (typeof extraClass === "string") props.class = [extraClass, htmlClass].filter(Boolean).join(" ").trim();
+		delete props.className;
+		delete props.classname;
 		return props;
 	}
 	wrapWithAnimation(text) {
@@ -212,6 +223,10 @@ var VueRenderer = class {
 			...this.options.components,
 			...options.components
 		};
+		if (options.componentsProps) this.options.componentsProps = {
+			...this.options.componentsProps,
+			...options.componentsProps
+		};
 		if (options.enableAnimation !== void 0) this.options.enableAnimation = options.enableAnimation;
 		if (options.animationConfig) this.options.animationConfig = {
 			...this.options.animationConfig,

package/dist/XMarkdown/index.vue_vue_type_script_setup_true_lang.js

@@ -11,6 +11,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 	props: {
 		content: { default: "" },
 		components: { default: () => ({}) },
+		componentsProps: {},
 		streaming: { default: void 0 },
 		config: { default: () => ({ gfm: true }) },
 		debug: {
@@ -75,6 +76,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		}));
 		const renderer = shallowRef(new VueRenderer({
 			components: mergedComponents.value,
+			componentsProps: props.componentsProps,
 			enableAnimation: props.streaming?.enableAnimation ?? true,
 			animationConfig: props.streaming?.animationConfig
 		}));
@@ -116,6 +118,10 @@ var index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			renderer.value.setOptions({ components: newComponents });
 			bumpOptionsVersion();
 		}, { deep: true });
+		watch(() => props.componentsProps, (newComponentsProps) => {
+			renderer.value.setOptions({ componentsProps: newComponentsProps });
+			bumpOptionsVersion();
+		}, { deep: true });
 		watch(() => props.streaming, (newStreaming) => {
 			renderer.value.setOptions({
 				enableAnimation: newStreaming?.enableAnimation ?? true,

package/dist/XMarkdown/interface.d.ts

@@ -45,6 +45,11 @@ export interface StreamingOption {
 export interface XMarkdownProps {
     content?: string;
     components?: Record<string, Component>;
+    /**
+     * 按标签名向 `components` 中的自定义组件传递额外的 props，使组件引用保持稳定，避免内联函数导致的重复挂载
+     * Extra props passed to custom components in `components` by tag name, keeping component references stable and avoiding remounts caused by inline functions
+     */
+    componentsProps?: Record<string, Record<string, unknown>>;
     streaming?: StreamingOption;
     config?: MarkedConfig;
     debug?: boolean;
@@ -91,6 +96,7 @@ export interface ParserOptions {
 }
 export interface RendererOptions {
     components?: Record<string, Component>;
+    componentsProps?: Record<string, Record<string, unknown>>;
     enableAnimation?: boolean;
     animationConfig?: {
         fadeDuration?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antdv-next/x-markdown",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "license": "MIT",
   "files": [
     "dist",
@@ -32,7 +32,7 @@
   "dependencies": {
     "dompurify": "^3.1.0",
     "katex": "^0.16.25",
-    "marked": "^12.0.0"
+    "marked": "^16.2.1"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5"

package/plugins/Latex/index.js

@@ -1,11 +1,17 @@
 import katex from "katex";
 import "katex/dist/katex.min.css";
 //#region src/plugins/Latex/index.ts
-var inlineRuleNonStandard = /^(?:\${1,2}([^$]{1,10000}?)\${1,2}|\\\(([\s\S]{1,10000}?)\\\)|\\\[((?:\\.|[^\\]){1,10000}?)\\\])/;
+var inlineDollarRule = /^(\${1,2})((?:\\.|[^\\$]){1,10000}?)\1/;
+var inlineRuleNonStandard = /^(?:\\\(([\s\S]{1,10000}?)\\\)|\\\[((?:\\.|[^\\]){1,10000}?)\\\])/;
 var blockRule = /^(\${1,2})\n([\s\S]{1,10000}?)\n\1(?:\s*(?:\n|$))|^\\\[((?:\\.|[^\\]){1,10000}?)\\\]/;
 function replaceAlign(text) {
 	return text ? text.replace(/\{align\*\}/g, "{aligned}") : text;
 }
+function isValidInlineDollarMatch(match, src) {
+	const [, delimiter, text] = match;
+	if (delimiter === "$$") return true;
+	return !/^\s|\s$/.test(text) && !/^\d/.test(src.slice(match[0].length));
+}
 function createRenderer(options, newlineAfter) {
 	return (token) => katex.renderToString(token.text, {
 		...options,
@@ -25,10 +31,13 @@ function inlineKatex(renderer, replaceAlignStart) {
 			return indices.length > 0 ? Math.min(...indices) : void 0;
 		},
 		tokenizer(src) {
-			const match = src.match(inlineRuleNonStandard);
+			const dollarMatch = src.match(inlineDollarRule);
+			if (dollarMatch && !isValidInlineDollarMatch(dollarMatch, src)) return;
+			const nonStandardMatch = src.match(inlineRuleNonStandard);
+			const match = dollarMatch || nonStandardMatch;
 			if (!match) return;
-			const rawText = (match[1] || match[2] || match[3] || "").trim();
-			const text = replaceAlignStart ? replaceAlign(rawText) : rawText;
+			const rawText = dollarMatch?.[2] || nonStandardMatch?.[1] || nonStandardMatch?.[2] || "";
+			const text = replaceAlignStart ? replaceAlign(rawText.trim()) : rawText.trim();
 			return {
 				type: "inlineKatex",
 				raw: match[0],

package/dist/XMarkdown/composables/__tests__/useStreaming.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/XMarkdown/composables/__tests__/useStreaming.test.js

@@ -1,118 +0,0 @@
-import { h as describe, m as it } from "../../../node_modules/.pnpm/@voidzero-dev_vite-plus-test@0.1.14_@types_node@24.12.0_@voidzero-dev_vite-plus-core@0._0c620f79340a656256b2ffe23b3e6dd1/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/chunk-artifact.js";
-import { g as globalExpect } from "../../../node_modules/.pnpm/@voidzero-dev_vite-plus-test@0.1.14_@types_node@24.12.0_@voidzero-dev_vite-plus-core@0._0c620f79340a656256b2ffe23b3e6dd1/node_modules/@voidzero-dev/vite-plus-test/dist/chunks/test.CBQUpOM3.js";
-import { useStreaming } from "../useStreaming.js";
-import { effectScope, nextTick, ref } from "vue";
-//#region src/XMarkdown/composables/__tests__/useStreaming.test.ts
-/**
-* Drive `useStreaming` with streaming enabled and return the latest
-* `processedContent` value after Vue flushes.
-*/
-async function stream(chunks, opts = {}) {
-	let result = "";
-	const scope = effectScope();
-	await scope.run(async () => {
-		const content = ref("");
-		const { processedContent } = useStreaming(content, ref({ hasNextChunk: opts.hasNextChunk ?? true }));
-		await nextTick();
-		let acc = "";
-		for (const chunk of chunks) {
-			acc += chunk;
-			content.value = acc;
-			await nextTick();
-		}
-		result = processedContent.value;
-	});
-	scope.stop();
-	return result;
-}
-describe("useStreaming fence correctness", () => {
-	it("streams plain text unchanged", async () => {
-		globalExpect(await stream(["Hello", " world"])).toBe("Hello world");
-	});
-	it("opens a fence on a partial last line immediately", async () => {
-		globalExpect(await stream(["```js\nconst a = 1;\n"])).toBe("```js\nconst a = 1;\n");
-	});
-	it("keeps an unclosed fence open for streaming continuation", async () => {
-		globalExpect(await stream(["```\ncode here"])).toBe("```\ncode here");
-	});
-	it("closes a fence once its line is completed by a newline", async () => {
-		globalExpect(await stream(["```\ncode\n```\nafter"])).toBe("```\ncode\n```\nafter");
-	});
-	it("requires the same fence char to close", async () => {
-		globalExpect(await stream(["~~~\ncode\n```\nstill in fence"])).toBe("~~~\ncode\n```\nstill in fence");
-	});
-	it("requires at least the opening run length to close", async () => {
-		globalExpect(await stream(["````\ncode\n```\nstill in fence"])).toBe("````\ncode\n```\nstill in fence");
-	});
-	it("allows a longer closing fence", async () => {
-		globalExpect(await stream(["```\ncode\n````\nafter"])).toBe("```\ncode\n````\nafter");
-	});
-	it("treats a closing fence with trailing whitespace as valid", async () => {
-		globalExpect(await stream(["```\ncode\n```   \nafter"])).toBe("```\ncode\n```   \nafter");
-	});
-	it("does not treat a closing fence with non-whitespace tail as close", async () => {
-		globalExpect(await stream(["```\ncode\n```js\nstill in fence"])).toBe("```\ncode\n```js\nstill in fence");
-	});
-});
-describe("useStreaming CRLF semantics", () => {
-	it("handles CRLF fence open and close", async () => {
-		globalExpect(await stream(["```\r\ncode\r\n```\r\nafter"])).toBe("```\r\ncode\r\n```\r\nafter");
-	});
-	it("handles a trailing CR", async () => {
-		globalExpect(await stream(["```\r"])).toBe("```\r");
-	});
-});
-describe("useStreaming long single-line content (base64 images)", () => {
-	it("streams a large base64 image without quadratic slowdown", async () => {
-		const full = `Here is an image:\n\n![chart](data:image/png;base64,${"A".repeat(3e5)})\n\nDone.`;
-		const chunkSize = 1e3;
-		let result = "";
-		const scope = effectScope();
-		const start = performance.now();
-		await scope.run(async () => {
-			const content = ref("");
-			const { processedContent } = useStreaming(content, ref({ hasNextChunk: true }));
-			await nextTick();
-			let acc = "";
-			for (let end = chunkSize; end < full.length + chunkSize; end += chunkSize) {
-				acc = full.slice(0, Math.min(end, full.length));
-				content.value = acc;
-				await nextTick();
-			}
-			result = processedContent.value;
-		});
-		const elapsed = performance.now() - start;
-		scope.stop();
-		globalExpect(result).toBe(full);
-		globalExpect(elapsed).toBeLessThan(1e4);
-	}, 12e4);
-	it("keeps fence state correct when a code block follows long content", async () => {
-		const full = `![img](data:image/png;base64,${"B".repeat(2e4)})\n\n\`\`\`js\nconst a = 1;\n`;
-		let result = "";
-		const scope = effectScope();
-		await scope.run(async () => {
-			const content = ref(full.slice(0, 100));
-			const { processedContent } = useStreaming(content, ref({ hasNextChunk: true }));
-			await nextTick();
-			content.value = full;
-			await nextTick();
-			result = processedContent.value;
-		});
-		scope.stop();
-		globalExpect(result).toBe(full);
-	});
-});
-describe("useStreaming non-streaming passthrough", () => {
-	it("returns content verbatim when hasNextChunk is false", async () => {
-		let result = "";
-		const scope = effectScope();
-		await scope.run(async () => {
-			const { processedContent } = useStreaming(ref("```\ncode\n```\ntext"), ref({ hasNextChunk: false }));
-			await nextTick();
-			result = processedContent.value;
-		});
-		scope.stop();
-		globalExpect(result).toBe("```\ncode\n```\ntext");
-	});
-});
-//#endregion