@antdv-next/x-markdown 0.1.2 → 0.1.4

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/components/AnimationText.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { Fragment, computed, createElementBlock, defineComponent, normalizeStyle, openBlock, ref, renderList, toDisplayString, watch } from "vue";
 //#region src/XMarkdown/components/AnimationText.vue?vue&type=script&setup=true&lang.ts
-var AnimationText_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var AnimationText_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "AnimationText",
 	props: {
 		text: {},

package/dist/XMarkdown/components/DebugPanel.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,7 @@ var _hoisted_4 = {
 };
 var _hoisted_5 = ["d"];
 var maxSnapshots = 60;
-var DebugPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DebugPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "DebugPanel",
 	props: { className: {} },
 	setup(__props) {

package/dist/XMarkdown/components/TailIndicator.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { createElementBlock, defineComponent, openBlock, toDisplayString } from "vue";
 //#region src/XMarkdown/components/TailIndicator.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "xmd-tail" };
-var TailIndicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var TailIndicator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "TailIndicator",
 	props: { content: { default: "▋" } },
 	setup(__props) {

package/dist/XMarkdown/composables/useStreaming.js

@@ -82,11 +82,21 @@ var recognize = (cache, tokenType) => {
 	}
 };
 var recognizeHandlers = Object.values(tokenRecognizerMap).filter((recognizer) => Boolean(recognizer));
+var getInitialFenceState = () => ({
+	inFenced: false,
+	fenceChar: "",
+	fenceLen: 0,
+	lineFenceChar: "",
+	lineFenceLen: 0,
+	lineFenceRunEnded: false,
+	lineTailBlank: true
+});
 var getInitialCache = () => ({
 	pending: "",
 	token: StreamCacheTokenType.Text,
 	processedLength: 0,
-	completeMarkdown: ""
+	completeMarkdown: "",
+	fence: getInitialFenceState()
 });
 var commitCache = (cache) => {
 	if (cache.pending) {
@@ -95,33 +105,42 @@ var commitCache = (cache) => {
 	}
 	cache.token = StreamCacheTokenType.Text;
 };
-var isInCodeBlock = (text, isFinalChunk = false) => {
-	const lines = text.split("\n");
-	let inFenced = false;
-	let fenceChar = "";
-	let fenceLen = 0;
-	for (let i = 0; i < lines.length; i++) {
-		const rawLine = lines[i];
-		const match = (rawLine.endsWith("\r") ? rawLine.slice(0, -1) : rawLine).match(/^(`{3,}|~{3,})(.*)$/);
-		if (!match) continue;
-		const fence = match[1];
-		const after = match[2];
-		const char = fence[0];
-		const len = fence.length;
-		if (!inFenced) {
-			inFenced = true;
-			fenceChar = char;
-			fenceLen = len;
-			continue;
-		}
-		if (char === fenceChar && len >= fenceLen && /^\s*$/.test(after) && (isFinalChunk || i < lines.length - 1)) {
-			inFenced = false;
-			fenceChar = "";
-			fenceLen = 0;
+/**
+* Incremental fenced-code-block state over the processed text, updated in O(1)
+* per character. Recomputing over the full accumulated text on every character
+* is O(N²) and freezes the page on long single-line content such as base64
+* image data URIs.
+*/
+var feedFenceState = (fence, char) => {
+	if (char === "\n") {
+		if (fence.lineFenceLen >= 3) {
+			if (!fence.inFenced) {
+				fence.inFenced = true;
+				fence.fenceChar = fence.lineFenceChar;
+				fence.fenceLen = fence.lineFenceLen;
+			} else if (fence.lineFenceChar === fence.fenceChar && fence.lineFenceLen >= fence.fenceLen && fence.lineTailBlank) {
+				fence.inFenced = false;
+				fence.fenceChar = "";
+				fence.fenceLen = 0;
+			}
 		}
+		fence.lineFenceChar = "";
+		fence.lineFenceLen = 0;
+		fence.lineFenceRunEnded = false;
+		fence.lineTailBlank = true;
+		return;
+	}
+	if (!fence.lineFenceRunEnded) if (fence.lineFenceLen === 0 && (char === "`" || char === "~")) {
+		fence.lineFenceChar = char;
+		fence.lineFenceLen = 1;
+	} else if (fence.lineFenceLen > 0 && char === fence.lineFenceChar) fence.lineFenceLen += 1;
+	else {
+		fence.lineFenceRunEnded = true;
+		fence.lineTailBlank = fence.lineTailBlank && /\s/.test(char);
 	}
-	return inFenced;
+	else fence.lineTailBlank = fence.lineTailBlank && /\s/.test(char);
 };
+var isInCodeBlock = (fence) => fence.inFenced || fence.lineFenceLen >= 3;
 var sanitizeForURIComponent = (input) => {
 	let result = "";
 	for (let i = 0; i < input.length; i++) {
@@ -144,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;
@@ -158,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);
@@ -173,7 +192,8 @@ function useStreaming(content, streaming, components) {
 		cache.processedLength += chunk.length;
 		for (const char of chunk) {
 			cache.pending += char;
-			if (isInCodeBlock(cache.completeMarkdown + cache.pending)) {
+			feedFenceState(cache.fence, char);
+			if (isInCodeBlock(cache.fence)) {
 				commitCache(cache);
 				continue;
 			}
@@ -189,18 +209,19 @@ 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,
-				completeMarkdown: newContent
+				completeMarkdown: newContent,
+				fence: getInitialFenceState()
 			};
 			return;
 		}

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,
@@ -71,7 +72,7 @@ var VueRenderer = class {
 		return h(Fragment, nodes);
 	}
 	sanitize(html) {
-		const allowedTags = [...new Set([
+		const allowedTags = [.../* @__PURE__ */ new Set([
 			...Object.keys(this.options.components),
 			"p",
 			"br",
@@ -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/core/detectUnclosedComponentTags.js

@@ -1,7 +1,7 @@
 //#region src/XMarkdown/core/detectUnclosedComponentTags.ts
 var WHITESPACE_REGEX = /\s/;
 var TAG_NAME_CHAR_REGEX = /[a-zA-Z0-9-]/;
-var VOID_ELEMENTS = new Set([
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
 	"area",
 	"base",
 	"br",

package/dist/XMarkdown/index.vue_vue_type_script_setup_true_lang.js

@@ -6,11 +6,12 @@ import { VueRenderer } from "./core/VueRenderer.js";
 import { useTail } from "./composables/useTail.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, h, normalizeClass, normalizeStyle, openBlock, ref, shallowRef, unref, watch } from "vue";
 //#region src/XMarkdown/index.vue?vue&type=script&setup=true&lang.ts
-var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "index",
 	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__ */ defineCo
 		}));
 		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__ */ defineCo
 			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

@@ -10,11 +10,24 @@ export declare enum StreamCacheTokenType {
     Table = "table",
     InlineCode = "inline-code"
 }
+export interface FenceState {
+    /** Inside an open fence, considering completed lines only */
+    inFenced: boolean;
+    fenceChar: string;
+    fenceLen: number;
+    /** Leading `` ` ``/`~` run of the current (possibly incomplete) line */
+    lineFenceChar: string;
+    lineFenceLen: number;
+    lineFenceRunEnded: boolean;
+    /** Whether every char after the leading run is whitespace (closing fences allow only whitespace) */
+    lineTailBlank: boolean;
+}
 export interface StreamCache {
     pending: string;
     token: StreamCacheTokenType;
     processedLength: number;
     completeMarkdown: string;
+    fence: FenceState;
 }
 export interface StreamingOption {
     hasNextChunk: boolean;
@@ -32,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;
@@ -78,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.2",
+  "version": "0.1.4",
   "license": "MIT",
   "files": [
     "dist",

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],