@antdv-next/x-markdown 0.1.4 → 0.3.0

package/dist/XMarkdown/composables/useTypewriter.js

@@ -0,0 +1,378 @@
+import { computed, onScopeDispose, ref, watch } from "vue";
+//#region src/XMarkdown/composables/useTypewriter.ts
+/**
+* Paces a growing string so it is revealed character by character (or
+* sentence by sentence) at a rate that follows the incoming chunks: content
+* that arrives in bursts is smoothed out instead of appearing as blocks.
+*
+* The output is always a prefix of the input, so downstream prefix caches
+* (useStreaming) keep working. When `active` is false the input is passed
+* through untouched, which also makes the composable a no-op outside the
+* browser.
+*/
+var DEFAULT_MIN_CPS = 24;
+var DEFAULT_MAX_CPS = 3e3;
+var DEFAULT_DELIMITERS = [
+	"。",
+	"！",
+	"？",
+	".",
+	"!",
+	"?",
+	"\n"
+];
+var DEFAULT_MAX_SENTENCE_CHARS = 120;
+var DEFAULT_CHUNK_INTERVAL_MS = 140;
+var MIN_HORIZON_MS = 80;
+var MAX_HORIZON_MS = 260;
+var EWMA_ALPHA = .28;
+var clamp = (value, min, max) => value < min ? min : value > max ? max : value;
+var isHighSurrogate = (text, index) => {
+	const code = text.charCodeAt(index);
+	return code >= 55296 && code <= 56319;
+};
+/** Never cut between the two halves of a surrogate pair. */
+var alignToCodePoint = (text, length) => length > 0 && length < text.length && isHighSurrogate(text, length - 1) ? length + 1 : length;
+var ZWJ = 8205;
+var isVariationSelector = (cp) => cp === 65038 || cp === 65039;
+var isSkinTone = (cp) => cp >= 127995 && cp <= 127999;
+var isCombiningMark = (cp) => cp >= 768 && cp <= 879 || cp >= 6832 && cp <= 6911 || cp >= 8400 && cp <= 8447;
+var isRegionalIndicator = (cp) => cp >= 127462 && cp <= 127487;
+var isTagCharacter = (cp) => cp >= 917536 && cp <= 917631;
+var KEYCAP = 8419;
+/** Code point starting at `index`, and the index right after it. */
+var codePointAt = (text, index) => {
+	const cp = text.codePointAt(index);
+	return [cp, index + (cp > 65535 ? 2 : 1)];
+};
+var codePointBefore = (text, index) => {
+	const start = index >= 2 && isHighSurrogate(text, index - 2) ? index - 2 : index - 1;
+	return [text.codePointAt(start), start];
+};
+var alignToClusterFallback = (text, length) => {
+	let end = alignToCodePoint(text, length);
+	let indicators = 0;
+	for (let i = end; i > 0;) {
+		const [cp, start] = codePointBefore(text, i);
+		if (!isRegionalIndicator(cp)) break;
+		indicators += 1;
+		i = start;
+	}
+	for (;;) {
+		if (end >= text.length) return text.length;
+		const [prev] = codePointBefore(text, end);
+		const [next, after] = codePointAt(text, end);
+		if (next === ZWJ || prev === ZWJ || isVariationSelector(next) || isSkinTone(next) || isCombiningMark(next) || next === KEYCAP || isTagCharacter(next)) {
+			end = after;
+			continue;
+		}
+		if (isRegionalIndicator(next) && isRegionalIndicator(prev) && indicators % 2 === 1) {
+			end = after;
+			indicators += 1;
+			continue;
+		}
+		return end;
+	}
+};
+var segmenter;
+var getSegmenter = () => {
+	if (segmenter === void 0) {
+		const Segmenter = typeof Intl !== "undefined" ? Intl.Segmenter : void 0;
+		segmenter = typeof Segmenter === "function" ? new Segmenter(void 0, { granularity: "grapheme" }) : null;
+	}
+	return segmenter;
+};
+var CLUSTER_WINDOW = 32;
+var CLUSTER_CONTINUER = /^(?:\p{Grapheme_Extend}|\p{Regional_Indicator}|‍)$/u;
+/** Index of the code point that ends at `pos`. */
+var prevCodePointStart = (text, pos) => {
+	const code = text.charCodeAt(pos - 1);
+	return code >= 56320 && code <= 57343 && pos > 1 ? pos - 2 : pos - 1;
+};
+/**
+* Move the window start back to a position the segmenter can treat as a real
+* cluster start. Starting the window mid-cluster (e.g. between the two
+* regional indicators of a flag, or before a combining mark) would make the
+* segmenter report a boundary that does not exist in the full string.
+*/
+var safeWindowStart = (text, from) => {
+	let pos = Math.max(0, alignToCodePoint(text, from));
+	while (pos > 0) {
+		const prevStart = prevCodePointStart(text, pos);
+		const prev = text.codePointAt(prevStart);
+		const current = text.codePointAt(pos);
+		if (prev !== ZWJ && !CLUSTER_CONTINUER.test(String.fromCodePoint(current))) break;
+		pos = prevStart;
+	}
+	return pos;
+};
+/**
+* Never cut inside a user-perceived character: a cut is moved forward to the
+* next grapheme-cluster boundary so an emoji, a flag or an accented letter
+* is never shown half-built (or as a replacement glyph) for a frame.
+*/
+var alignToGrapheme = (text, length) => {
+	if (length <= 0 || length >= text.length) return length;
+	const seg = getSegmenter();
+	if (!seg) return alignToClusterFallback(text, length);
+	const start = safeWindowStart(text, length - CLUSTER_WINDOW);
+	const windowEnd = Math.min(text.length, alignToCodePoint(text, length + CLUSTER_WINDOW));
+	for (const { index, segment } of seg.segment(text.slice(start, windowEnd))) {
+		const clusterStart = start + index;
+		const clusterEnd = clusterStart + segment.length;
+		if (clusterStart >= length) return clusterStart;
+		if (clusterEnd >= length) return clusterEnd;
+	}
+	return windowEnd;
+};
+/**
+* The furthest position that may be revealed while the stream is still going:
+* a trailing high surrogate would render as U+FFFD until its other half
+* arrives, and a trailing ZWJ leaves a half-joined cluster on screen, so both
+* are held back by one code unit. At stream end `enabled` is false and the
+* full text is shown as-is.
+*/
+var streamSafeEnd = (text) => {
+	const length = text.length;
+	if (length === 0) return 0;
+	const last = text.charCodeAt(length - 1);
+	if (isHighSurrogate(text, length - 1) || last === ZWJ) return length - 1;
+	return length;
+};
+var initialScan = () => ({
+	scanned: 0,
+	boundaries: [],
+	inFence: false,
+	fenceChar: "",
+	fenceLen: 0,
+	atLineStart: true,
+	lineIndent: 0,
+	lineFenceChar: "",
+	lineFenceLen: 0,
+	lineTailBlank: true,
+	inInlineCode: false,
+	inlineCodeLen: 0,
+	backtickRun: 0
+});
+/**
+* Settle the run of backticks that just ended. Outside code a run opens a
+* span that only a run of the same length closes again: a span opened with
+* two backticks is not ended by a single backtick inside it.
+*/
+var settleBacktickRun = (scan) => {
+	const run = scan.backtickRun;
+	scan.backtickRun = 0;
+	if (run === 0) return;
+	if (scan.inInlineCode) {
+		if (run === scan.inlineCodeLen) {
+			scan.inInlineCode = false;
+			scan.inlineCodeLen = 0;
+		}
+	} else {
+		scan.inInlineCode = true;
+		scan.inlineCodeLen = run;
+	}
+};
+/**
+* Extend the sentence-boundary scan to cover `text`. Delimiters inside fenced
+* or inline code are not boundaries (`a.b.c`, `foo();`), newlines always are.
+* Incremental: only the characters appended since the last call are visited.
+*/
+var scanBoundaries = (scan, text, delimiters) => {
+	for (let i = scan.scanned; i < text.length; i++) {
+		const char = text[i];
+		if (char === "\n") {
+			if (scan.lineFenceLen >= 3) {
+				if (!scan.inFence) {
+					scan.inFence = true;
+					scan.fenceChar = scan.lineFenceChar;
+					scan.fenceLen = scan.lineFenceLen;
+				} else if (scan.lineFenceChar === scan.fenceChar && scan.lineFenceLen >= scan.fenceLen && scan.lineTailBlank) {
+					scan.inFence = false;
+					scan.fenceChar = "";
+					scan.fenceLen = 0;
+				}
+			}
+			scan.lineFenceChar = "";
+			scan.lineFenceLen = 0;
+			scan.lineIndent = 0;
+			scan.lineTailBlank = true;
+			scan.atLineStart = true;
+			scan.inInlineCode = false;
+			scan.inlineCodeLen = 0;
+			scan.backtickRun = 0;
+			scan.boundaries.push(i + 1);
+			continue;
+		}
+		if (scan.atLineStart) {
+			if (char === " " && scan.lineFenceLen === 0 && scan.lineIndent < 3) {
+				scan.lineIndent += 1;
+				continue;
+			}
+			if ((char === "`" || char === "~") && (scan.lineFenceLen === 0 || scan.lineFenceChar === char)) {
+				scan.lineFenceChar = char;
+				scan.lineFenceLen += 1;
+				continue;
+			}
+			scan.atLineStart = false;
+			scan.lineTailBlank = /\s/.test(char);
+			if (scan.lineFenceChar === "`" && scan.lineFenceLen < 3) {
+				scan.inInlineCode = true;
+				scan.inlineCodeLen = scan.lineFenceLen;
+			}
+		} else scan.lineTailBlank = scan.lineTailBlank && /\s/.test(char);
+		if (scan.inFence) continue;
+		if (char === "`") {
+			scan.backtickRun += 1;
+			continue;
+		}
+		settleBacktickRun(scan);
+		if (!scan.inInlineCode && delimiters.has(char)) scan.boundaries.push(i + 1);
+	}
+	scan.scanned = text.length;
+};
+/** Largest boundary that is <= `length`, or 0. */
+var floorToBoundary = (boundaries, length) => {
+	let lo = 0;
+	let hi = boundaries.length - 1;
+	let best = 0;
+	while (lo <= hi) {
+		const mid = lo + hi >> 1;
+		if (boundaries[mid] <= length) {
+			best = boundaries[mid];
+			lo = mid + 1;
+		} else hi = mid - 1;
+	}
+	return best;
+};
+var resolveConfig = (typewriter) => {
+	const config = typeof typewriter === "object" ? typewriter : {};
+	return {
+		unit: config.unit ?? "char",
+		delimiters: config.delimiters ?? DEFAULT_DELIMITERS,
+		minCps: config.minCps ?? DEFAULT_MIN_CPS,
+		maxCps: config.maxCps ?? DEFAULT_MAX_CPS,
+		pauseMs: config.pauseMs ?? 0,
+		maxSentenceChars: config.maxSentenceChars ?? DEFAULT_MAX_SENTENCE_CHARS
+	};
+};
+var canAnimate = () => typeof window !== "undefined" && typeof window.requestAnimationFrame === "function";
+function useTypewriter(input, typewriter, active) {
+	const enabled = computed(() => !!typewriter.value && active.value && canAnimate());
+	const config = computed(() => resolveConfig(typewriter.value));
+	const delimiterSet = computed(() => new Set(config.value.delimiters));
+	const displayLength = ref(input.value.length);
+	let cursor = input.value.length;
+	let lastChunkAt = null;
+	let chunkInterval = DEFAULT_CHUNK_INTERVAL_MS;
+	let raf = null;
+	let lastFrameAt = null;
+	let pauseUntil = 0;
+	let scan = initialScan();
+	let wasEnabled = enabled.value;
+	const stop = () => {
+		if (raf != null) {
+			window.cancelAnimationFrame(raf);
+			raf = null;
+		}
+		lastFrameAt = null;
+	};
+	const commit = (length) => {
+		if (length !== displayLength.value) displayLength.value = length;
+	};
+	const tick = (now) => {
+		raf = null;
+		const text = input.value;
+		const target = enabled.value ? streamSafeEnd(text) : text.length;
+		if (!enabled.value || displayLength.value >= target) {
+			stop();
+			return;
+		}
+		const deltaMs = Math.max(8, now - (lastFrameAt ?? now));
+		lastFrameAt = now;
+		const { unit, minCps, maxCps, pauseMs, maxSentenceChars } = config.value;
+		if (now >= pauseUntil) {
+			const cps = clamp((target - cursor) / clamp(chunkInterval, MIN_HORIZON_MS, MAX_HORIZON_MS) * 1e3, minCps, maxCps);
+			cursor = Math.min(target, cursor + cps * deltaMs / 1e3);
+			let next;
+			if (unit === "sentence") {
+				scanBoundaries(scan, text, delimiterSet.value);
+				const { boundaries } = scan;
+				const shown = displayLength.value;
+				const cursorFloor = Math.floor(cursor);
+				const boundary = floorToBoundary(boundaries, cursorFloor);
+				if (cursorFloor >= target) next = target;
+				else if (boundary > shown) next = boundary;
+				else if (cursorFloor - floorToBoundary(boundaries, shown) > maxSentenceChars) next = Math.min(target, alignToGrapheme(text, Math.max(shown + 1, cursorFloor)));
+				else next = shown;
+			} else {
+				next = Math.max(displayLength.value + 1, Math.floor(cursor));
+				next = Math.min(target, alignToGrapheme(text, next));
+				if (pauseMs > 0 && next > displayLength.value) {
+					scanBoundaries(scan, text, delimiterSet.value);
+					const boundary = floorToBoundary(scan.boundaries, next);
+					if (boundary > displayLength.value) {
+						next = boundary;
+						cursor = boundary;
+						pauseUntil = now + pauseMs;
+					}
+				}
+			}
+			commit(next);
+		}
+		if (displayLength.value < target) raf = window.requestAnimationFrame(tick);
+		else stop();
+	};
+	const schedule = () => {
+		if (raf != null || !enabled.value) return;
+		if (displayLength.value >= input.value.length) return;
+		lastFrameAt = null;
+		raf = window.requestAnimationFrame(tick);
+	};
+	watch([input, enabled], ([text, on], [previous]) => {
+		if (!on) {
+			stop();
+			wasEnabled = false;
+			return;
+		}
+		if (!wasEnabled) {
+			wasEnabled = true;
+			scan = initialScan();
+			cursor = text.length;
+			commit(text.length);
+			lastChunkAt = null;
+			chunkInterval = DEFAULT_CHUNK_INTERVAL_MS;
+			return;
+		}
+		if (!text.startsWith(previous.slice(0, displayLength.value))) {
+			stop();
+			scan = initialScan();
+			cursor = text.length;
+			commit(text.length);
+			lastChunkAt = null;
+			chunkInterval = DEFAULT_CHUNK_INTERVAL_MS;
+			return;
+		}
+		if (!text.startsWith(previous)) {
+			scan = initialScan();
+			cursor = Math.min(cursor, text.length);
+		}
+		if (text.length > previous.length) {
+			const now = performance.now();
+			if (lastChunkAt != null) {
+				const interval = clamp(now - lastChunkAt, 30, 500);
+				chunkInterval = clamp((1 - EWMA_ALPHA) * chunkInterval + EWMA_ALPHA * interval, MIN_HORIZON_MS, MAX_HORIZON_MS);
+			}
+			lastChunkAt = now;
+		}
+		schedule();
+	});
+	onScopeDispose(stop);
+	return computed(() => {
+		const text = input.value;
+		if (!enabled.value) return text;
+		return displayLength.value >= text.length ? text : text.slice(0, displayLength.value);
+	});
+}
+//#endregion
+export { alignToClusterFallback, alignToGrapheme, useTypewriter as default, useTypewriter };

package/dist/XMarkdown/core/Parser.d.ts

@@ -1,3 +1,4 @@
+import { Token } from 'marked';
 import { ParserOptions } from '../interface';
 export declare function escapeHtml(html: string): string;
 export declare class Parser {
@@ -13,9 +14,23 @@ export declare class Parser {
     private prepareCodeBlockStates;
     private consumeCodeBlockState;
     private getCodeBlockState;
+    /**
+     * Block-lex `markdown` with the same marked configuration this parser
+     * renders with **and the same preprocessing** — the streaming section
+     * splitter uses it to decide whether a `#` line really starts a new
+     * top-level block, so the splitter and the renderer can never disagree.
+     * Lexing the raw source instead would ask the two about different documents:
+     * `protectCustomTags` deletes whole regions the renderer never sees, and
+     * `escapeRawHtml` turns tags into text, either of which moves a heading or a
+     * definition across a boundary. `config.extensions` (the bundled LaTeX
+     * plugin's `$$` rule) come along through `markdownInstance`.
+     */
+    lex(markdown: string): readonly Token[];
     parse(markdown: string, parseOptions?: {
         injectTail?: boolean;
     }): string;
+    /** Everything `parse` does to the source before marked sees it. */
+    private preprocess;
     private markedParse;
     private protectCustomTags;
     private escapeRawHtml;

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>`;
 			}
 		} });
 	}
@@ -98,16 +107,35 @@ var Parser = class Parser {
 	getCodeBlockState(lang) {
 		return this.options.codeBlockStatus[lang] ?? this.options.streamStatus;
 	}
+	/**
+	* Block-lex `markdown` with the same marked configuration this parser
+	* renders with **and the same preprocessing** — the streaming section
+	* splitter uses it to decide whether a `#` line really starts a new
+	* top-level block, so the splitter and the renderer can never disagree.
+	* Lexing the raw source instead would ask the two about different documents:
+	* `protectCustomTags` deletes whole regions the renderer never sees, and
+	* `escapeRawHtml` turns tags into text, either of which moves a heading or a
+	* definition across a boundary. `config.extensions` (the bundled LaTeX
+	* plugin's `$$` rule) come along through `markdownInstance`.
+	*/
+	lex(markdown) {
+		return this.markdownInstance.lexer(this.preprocess(markdown));
+	}
 	parse(markdown, parseOptions) {
 		this.injectTail = parseOptions?.injectTail ?? false;
-		let processed = markdown;
-		if (this.options.protectCustomTags) processed = this.protectCustomTags(processed);
-		if (this.options.escapeRawHtml) processed = this.escapeRawHtml(processed);
+		const processed = this.preprocess(markdown);
 		this.prepareCodeBlockStates(processed);
 		const html = this.markedParse(processed);
 		if (this.injectTail) return this.injectTailMarker(html);
 		return html;
 	}
+	/** Everything `parse` does to the source before marked sees it. */
+	preprocess(markdown) {
+		let processed = markdown;
+		if (this.options.protectCustomTags) processed = this.protectCustomTags(processed);
+		if (this.options.escapeRawHtml) processed = this.escapeRawHtml(processed);
+		return processed;
+	}
 	markedParse(markdown) {
 		return this.markdownInstance.parse(markdown);
 	}

package/dist/XMarkdown/core/VueRenderer.js

@@ -58,16 +58,18 @@ var VueRenderer = class {
 			componentsProps: options.componentsProps ?? {},
 			enableAnimation: options.enableAnimation ?? true,
 			animationConfig: {
+				...options.animationConfig,
 				fadeDuration: options.animationConfig?.fadeDuration ?? DEFAULT_ANIMATION_DURATION,
 				easing: options.animationConfig?.easing ?? "ease-in-out"
 			}
 		};
 	}
 	render(html) {
+		if (!html) return h(Fragment);
 		const unclosedTags = detectUnclosedComponentTags(html, Object.keys(this.options.components));
 		const sanitized = this.sanitize(html);
 		const nodes = this.parseToVNodes(sanitized, unclosedTags);
-		if (nodes.length === 0) return h("span", "");
+		if (nodes.length === 0) return h(Fragment);
 		if (nodes.length === 1) return nodes[0];
 		return h(Fragment, nodes);
 	}
@@ -134,12 +136,12 @@ var VueRenderer = class {
 		});
 	}
 	parseToVNodes(html, unclosedTags) {
-		const template = `<div>${html}</div>`;
 		const container = document.createElement("div");
-		container.innerHTML = template;
+		container.innerHTML = `<div>${html}</div>`;
 		const cidRef = { tagIndexes: {} };
 		const nodes = [];
-		Array.from(container.childNodes).forEach((node) => {
+		const contentParent = container.firstElementChild ?? container;
+		Array.from(contentParent.childNodes).forEach((node) => {
 			const vnode = this.convertNode(node, unclosedTags, cidRef);
 			if (vnode) nodes.push(vnode);
 		});
@@ -212,10 +214,14 @@ var VueRenderer = class {
 		return props;
 	}
 	wrapWithAnimation(text) {
+		const { fadeDuration, easing, splitBy, delimiters, maxSentenceChars } = this.options.animationConfig;
 		return h(AnimationText_default, {
 			text,
-			fadeDuration: this.options.animationConfig.fadeDuration,
-			easing: this.options.animationConfig.easing
+			fadeDuration,
+			easing,
+			splitBy,
+			delimiters,
+			maxSentenceChars
 		});
 	}
 	setOptions(options) {
@@ -228,9 +234,10 @@ var VueRenderer = class {
 			...options.componentsProps
 		};
 		if (options.enableAnimation !== void 0) this.options.enableAnimation = options.enableAnimation;
-		if (options.animationConfig) this.options.animationConfig = {
-			...this.options.animationConfig,
-			...options.animationConfig
+		if ("animationConfig" in options) this.options.animationConfig = {
+			...options.animationConfig,
+			fadeDuration: options.animationConfig?.fadeDuration ?? DEFAULT_ANIMATION_DURATION,
+			easing: options.animationConfig?.easing ?? "ease-in-out"
 		};
 	}
 };

package/dist/XMarkdown/core/detectUnclosedComponentTags.d.ts

@@ -1,2 +1,14 @@
 export declare const getTagInstanceId: (tagName: string, instance: number) => string;
 export declare function detectUnclosedComponentTags(html: string, componentNames: Iterable<string>): Set<string>;
+/**
+ * Whether `text` (a section's worth of Markdown source) leaves a raw HTML
+ * container open. CommonMark ends an HTML block at a blank line, but the
+ * browser keeps nesting into an unclosed `<div>`/`<details>`/`<table>`/…
+ * until its closing tag — so a section split placed before the next heading
+ * would auto-close the container at the section end and produce a different
+ * DOM from the whole-document render. An open `<p>` is the one exception:
+ * the HTML parser closes it when a heading starts, so both parses nest the
+ * heading identically. (Downstream-only guard; upstream ant-design/x#2061
+ * only checks registered custom component tags here.)
+ */
+export declare function hasUnclosedRawTags(text: string): boolean;