@antdv-next/x-markdown 0.0.2 → 0.1.0-beta.1

package/dist/XMarkdown/core/Parser.js

@@ -0,0 +1,162 @@
+import { Marked } from "marked";
+//#region src/XMarkdown/core/Parser.ts
+var escapeReplacements = {
+	"&": "&",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
+};
+function escapeHtml(html) {
+	if (/[&<>"']/.test(html)) return html.replace(/[&<>"']/g, (ch) => escapeReplacements[ch] || ch);
+	return html;
+}
+var Parser = class Parser {
+	static COMPLETE_FENCED_CODE = /^ {0,3}(`{3,}|~{3,})([\s\S]*?)\n {0,3}\1[ \n\t]*$/;
+	options;
+	markdownInstance;
+	injectTail = false;
+	codeBlockStates = [];
+	codeBlockStateIndex = 0;
+	constructor(options = {}) {
+		this.options = {
+			openLinksInNewTab: options.openLinksInNewTab ?? true,
+			paragraphTag: options.paragraphTag ?? "p",
+			injectTail: options.injectTail ?? false,
+			protectCustomTags: options.protectCustomTags ?? true,
+			escapeRawHtml: options.escapeRawHtml ?? false,
+			config: {
+				gfm: true,
+				...options.config
+			},
+			components: options.components ?? {},
+			streamStatus: options.streamStatus ?? "done",
+			codeBlockStatus: options.codeBlockStatus ?? {}
+		};
+		this.markdownInstance = new Marked(this.options.config);
+		this.configureRenderers();
+	}
+	updateMarkedConfig(config) {
+		this.options.config = {
+			...this.options.config,
+			...config
+		};
+		this.markdownInstance = new Marked(this.options.config);
+		this.configureRenderers();
+	}
+	configureRenderers() {
+		this.markdownInstance.use({ renderer: {
+			html: (html) => {
+				if (this.options.escapeRawHtml) return escapeHtml(html);
+				return html;
+			},
+			link: (href, title, text) => {
+				return `<a href="${href}"${title ? ` title="${title}"` : ""}${this.options.openLinksInNewTab ? ` target="_blank" rel="noopener noreferrer"` : ""}>${text}</a>`;
+			},
+			paragraph: (text) => {
+				if (this.options.paragraphTag === "p") return `<p>${text}</p>`;
+				return `<${this.options.paragraphTag}>${text}</${this.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>`;
+			}
+		} });
+	}
+	prepareCodeBlockStates(markdown) {
+		this.codeBlockStates = [];
+		this.codeBlockStateIndex = 0;
+		const tokens = this.markdownInstance.lexer(markdown);
+		const walkTokens = (nodes) => {
+			for (const node of nodes) {
+				if (!node || typeof node !== "object") continue;
+				const token = node;
+				if (token.type === "code") {
+					const lang = typeof token.lang === "string" ? token.lang : "";
+					const codeBlockStyle = typeof token.codeBlockStyle === "string" ? token.codeBlockStyle : "";
+					const raw = typeof token.raw === "string" ? token.raw : "";
+					const inferredState = codeBlockStyle === "indented" || Parser.COMPLETE_FENCED_CODE.test(raw) ? "done" : "loading";
+					this.codeBlockStates.push(this.options.codeBlockStatus[lang] ?? inferredState);
+				}
+				const childTokens = token.tokens;
+				if (Array.isArray(childTokens)) walkTokens(childTokens);
+				const items = token.items;
+				if (Array.isArray(items)) for (const item of items) {
+					if (!item || typeof item !== "object") continue;
+					const itemTokens = item.tokens;
+					if (Array.isArray(itemTokens)) walkTokens(itemTokens);
+				}
+			}
+		};
+		walkTokens(tokens);
+	}
+	consumeCodeBlockState(lang) {
+		const nextState = this.codeBlockStates[this.codeBlockStateIndex];
+		this.codeBlockStateIndex += 1;
+		return nextState ?? this.getCodeBlockState(lang);
+	}
+	getCodeBlockState(lang) {
+		return this.options.codeBlockStatus[lang] ?? this.options.streamStatus;
+	}
+	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);
+		this.prepareCodeBlockStates(processed);
+		const html = this.markedParse(processed);
+		if (this.injectTail) return this.injectTailMarker(html);
+		return html;
+	}
+	markedParse(markdown) {
+		return this.markdownInstance.parse(markdown);
+	}
+	protectCustomTags(markdown) {
+		const customTagPattern = /<[A-Z][a-zA-Z0-9]*[^>]*>[\s\S]*?<\/[A-Z][a-zA-Z0-9]*>/g;
+		let result = markdown;
+		let placeholderIndex = 0;
+		result = result.replace(customTagPattern, () => {
+			const placeholder = `__CUSTOM_TAG_${placeholderIndex}__`;
+			placeholderIndex++;
+			return placeholder;
+		});
+		return result;
+	}
+	escapeRawHtml(markdown) {
+		return markdown.replace(/<[^>]+>/g, (match) => {
+			return escapeHtml(match);
+		});
+	}
+	injectTailMarker(html) {
+		if (html.includes("<xmd-tail></xmd-tail>")) return html;
+		const container = document.createElement("div");
+		container.innerHTML = html;
+		const findLastMeaningfulNode = (root) => {
+			const children = Array.from(root.childNodes);
+			for (let i = children.length - 1; i >= 0; i--) {
+				const node = children[i];
+				if (node.nodeType === Node.TEXT_NODE) {
+					if ((node.textContent || "").trim()) return node;
+					continue;
+				}
+				if (node.nodeType !== Node.ELEMENT_NODE) continue;
+				const nested = findLastMeaningfulNode(node);
+				if (nested) return nested;
+				return node;
+			}
+			return null;
+		};
+		const lastMeaningfulNode = findLastMeaningfulNode(container);
+		if (!lastMeaningfulNode || lastMeaningfulNode.nodeType !== Node.TEXT_NODE) return html;
+		const marker = document.createElement("xmd-tail");
+		lastMeaningfulNode.parentNode?.insertBefore(marker, lastMeaningfulNode.nextSibling);
+		return container.innerHTML;
+	}
+	setOptions(options) {
+		const { config, ...rest } = options;
+		Object.assign(this.options, rest);
+		if (config) this.updateMarkedConfig(config);
+	}
+};
+//#endregion
+export { Parser, escapeHtml };

package/dist/XMarkdown/core/VueRenderer.js

@@ -0,0 +1,223 @@
+import AnimationText_default from "../components/AnimationText.js";
+import { detectUnclosedComponentTags, getTagInstanceId } from "./detectUnclosedComponentTags.js";
+import { Fragment, createTextVNode, h } from "vue";
+import DOMPurify from "dompurify";
+//#region src/XMarkdown/core/VueRenderer.ts
+var DEFAULT_ANIMATION_DURATION = 200;
+var NON_WHITESPACE_REGEX = /[^\r\n\s]+/;
+var MATHML_TAGS = [
+	"math",
+	"maction",
+	"maligngroup",
+	"malignmark",
+	"menclose",
+	"merror",
+	"mfenced",
+	"mfrac",
+	"mglyph",
+	"mi",
+	"mlabeledtr",
+	"mlongdiv",
+	"mmultiscripts",
+	"mn",
+	"mo",
+	"mover",
+	"mpadded",
+	"mphantom",
+	"mprescripts",
+	"mroot",
+	"mrow",
+	"ms",
+	"mscarries",
+	"mscarry",
+	"msgroup",
+	"msline",
+	"mspace",
+	"msqrt",
+	"msrow",
+	"mstack",
+	"mstyle",
+	"msub",
+	"msup",
+	"msubsup",
+	"mtable",
+	"mtd",
+	"mtext",
+	"mtr",
+	"munder",
+	"munderover",
+	"semantics",
+	"annotation",
+	"annotation-xml"
+];
+var VueRenderer = class {
+	options;
+	constructor(options = {}) {
+		this.options = {
+			components: options.components ?? {},
+			enableAnimation: options.enableAnimation ?? true,
+			animationConfig: {
+				fadeDuration: options.animationConfig?.fadeDuration ?? DEFAULT_ANIMATION_DURATION,
+				easing: options.animationConfig?.easing ?? "ease-in-out"
+			}
+		};
+	}
+	render(html) {
+		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 === 1) return nodes[0];
+		return h(Fragment, nodes);
+	}
+	sanitize(html) {
+		const allowedTags = [...new Set([
+			...Object.keys(this.options.components),
+			"p",
+			"br",
+			"span",
+			"div",
+			"a",
+			"img",
+			"ul",
+			"ol",
+			"li",
+			"h1",
+			"h2",
+			"h3",
+			"h4",
+			"h5",
+			"h6",
+			"blockquote",
+			"pre",
+			"code",
+			"em",
+			"strong",
+			"del",
+			"ins",
+			"table",
+			"thead",
+			"tbody",
+			"tr",
+			"th",
+			"td",
+			"hr",
+			"xmd-tail",
+			...MATHML_TAGS
+		])];
+		return DOMPurify.sanitize(html, {
+			ALLOWED_TAGS: allowedTags,
+			ALLOWED_ATTR: [
+				"class",
+				"style",
+				"aria-hidden",
+				"aria-label",
+				"role",
+				"xmlns",
+				"encoding",
+				"href",
+				"src",
+				"title",
+				"alt",
+				"target",
+				"rel",
+				"data-lang",
+				"data-block",
+				"data-state",
+				"data-raw",
+				"data-icon",
+				"data-description",
+				"icon",
+				"description"
+			]
+		});
+	}
+	parseToVNodes(html, unclosedTags) {
+		const template = `<div>${html}</div>`;
+		const container = document.createElement("div");
+		container.innerHTML = template;
+		const cidRef = { tagIndexes: {} };
+		const nodes = [];
+		Array.from(container.childNodes).forEach((node) => {
+			const vnode = this.convertNode(node, unclosedTags, cidRef);
+			if (vnode) nodes.push(vnode);
+		});
+		return nodes;
+	}
+	convertNode(domNode, unclosedTags, cidRef) {
+		if (domNode.nodeType === Node.TEXT_NODE) {
+			const text = domNode.textContent || "";
+			const parentTagName = domNode.parentNode instanceof Element ? domNode.parentNode.tagName.toLowerCase() : "";
+			const isParentCustomComponent = Boolean(parentTagName && this.options.components[parentTagName]);
+			if (this.options.enableAnimation && NON_WHITESPACE_REGEX.test(text) && !isParentCustomComponent) return this.wrapWithAnimation(text);
+			return createTextVNode(text);
+		}
+		if (domNode.nodeType !== Node.ELEMENT_NODE) return null;
+		const element = domNode;
+		const tagName = element.tagName.toLowerCase();
+		const customComponent = this.options.components[tagName];
+		if (customComponent) {
+			const componentProps = this.extractComponentProps(element, tagName, unclosedTags, cidRef);
+			const children = [];
+			Array.from(element.childNodes).forEach((child) => {
+				const childVNode = this.convertNode(child, unclosedTags, cidRef);
+				if (childVNode) children.push(childVNode);
+			});
+			if (children.length === 0) return h(customComponent, componentProps);
+			return h(customComponent, componentProps, { default: () => children });
+		}
+		if (tagName === "xmd-tail") return h("span", { class: "xmd-tail" }, "▋");
+		return this.convertNativeElement(element, tagName, unclosedTags, cidRef);
+	}
+	convertNativeElement(element, tagName, unclosedTags, cidRef) {
+		const children = [];
+		const props = {};
+		Array.from(element.attributes).forEach((attr) => {
+			props[attr.name] = attr.value;
+		});
+		Array.from(element.childNodes).forEach((child) => {
+			const childVNode = this.convertNode(child, unclosedTags, cidRef);
+			if (childVNode) children.push(childVNode);
+		});
+		return h(tagName, props, children);
+	}
+	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;
+		});
+		if (tagName === "code") {
+			props.block = element.getAttribute("data-block") === "true";
+			props.streamStatus = element.getAttribute("data-state") === "loading" ? "loading" : "done";
+			const langFromData = element.getAttribute("data-lang") || "";
+			const className = element.getAttribute("class") || "";
+			const langFromClass = className.match(/(?:^|\s)language-([^\s]+)/)?.[1] ?? className.match(/(?:^|\s)lang-([^\s]+)/)?.[1] ?? "";
+			const lang = langFromData || langFromClass;
+			if (lang) props.lang = lang;
+		}
+		return props;
+	}
+	wrapWithAnimation(text) {
+		return h(AnimationText_default, {
+			text,
+			fadeDuration: this.options.animationConfig.fadeDuration,
+			easing: this.options.animationConfig.easing
+		});
+	}
+	setOptions(options) {
+		if (options.components) this.options.components = {
+			...this.options.components,
+			...options.components
+		};
+		if (options.enableAnimation !== void 0) this.options.enableAnimation = options.enableAnimation;
+		if (options.animationConfig) this.options.animationConfig = {
+			...this.options.animationConfig,
+			...options.animationConfig
+		};
+	}
+};
+//#endregion
+export { VueRenderer };

package/dist/XMarkdown/core/detectUnclosedComponentTags.js

@@ -0,0 +1,141 @@
+//#region src/XMarkdown/core/detectUnclosedComponentTags.ts
+var WHITESPACE_REGEX = /\s/;
+var TAG_NAME_CHAR_REGEX = /[a-zA-Z0-9-]/;
+var VOID_ELEMENTS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+var COMMENT_START = "<!--";
+var COMMENT_END = "-->";
+var CDATA_START = "<![CDATA[";
+var CDATA_END = "]]>";
+var getTagInstanceId = (tagName, instance) => `${tagName}-${instance}`;
+var skipComment = (html, pos) => {
+	if (!html.startsWith(COMMENT_START, pos)) return pos;
+	const endPos = html.indexOf(COMMENT_END, pos + 4);
+	return endPos === -1 ? html.length : endPos + 3;
+};
+var skipCDATA = (html, pos) => {
+	if (!html.startsWith(CDATA_START, pos)) return pos;
+	const endPos = html.indexOf(CDATA_END, pos + 9);
+	return endPos === -1 ? html.length : endPos + 3;
+};
+var parseClosingTag = (html, pos) => {
+	if (html[pos + 1] !== "/") return null;
+	let scanPos = pos + 2;
+	let tagName = "";
+	while (scanPos < html.length && WHITESPACE_REGEX.test(html[scanPos])) scanPos++;
+	while (scanPos < html.length && TAG_NAME_CHAR_REGEX.test(html[scanPos])) {
+		tagName += html[scanPos];
+		scanPos++;
+	}
+	while (scanPos < html.length && WHITESPACE_REGEX.test(html[scanPos])) scanPos++;
+	if (!tagName || html[scanPos] !== ">") return null;
+	return {
+		tagName: tagName.toLowerCase(),
+		endPos: scanPos + 1
+	};
+};
+var parseOpeningTag = (html, pos) => {
+	let scanPos = pos + 1;
+	let tagName = "";
+	while (scanPos < html.length && TAG_NAME_CHAR_REGEX.test(html[scanPos])) {
+		tagName += html[scanPos];
+		scanPos++;
+	}
+	if (!tagName) return null;
+	let foundEnd = false;
+	let isSelfClosing = false;
+	while (scanPos < html.length) {
+		if (html[scanPos] === ">") {
+			foundEnd = true;
+			isSelfClosing = html[scanPos - 1] === "/";
+			break;
+		}
+		if (html[scanPos] === "\"" || html[scanPos] === "'") {
+			const quoteChar = html[scanPos];
+			scanPos++;
+			while (scanPos < html.length) {
+				if (html[scanPos] === "\\" && scanPos + 1 < html.length) {
+					scanPos += 2;
+					continue;
+				}
+				if (html[scanPos] === quoteChar) {
+					scanPos++;
+					break;
+				}
+				scanPos++;
+			}
+			continue;
+		}
+		scanPos++;
+	}
+	return {
+		tagName: tagName.toLowerCase(),
+		endPos: foundEnd ? scanPos + 1 : html.length,
+		foundEnd,
+		isSelfClosing
+	};
+};
+function detectUnclosedComponentTags(html, componentNames) {
+	const trackedTags = new Set(Array.from(componentNames, (tagName) => tagName.toLowerCase()));
+	if (trackedTags.size === 0 || html.length === 0) return /* @__PURE__ */ new Set();
+	const unclosedTags = /* @__PURE__ */ new Set();
+	const tagCounts = {};
+	const openTagIndexes = {};
+	let pos = 0;
+	while (pos < html.length) {
+		const afterComment = skipComment(html, pos);
+		if (afterComment !== pos) {
+			pos = afterComment;
+			continue;
+		}
+		const afterCDATA = skipCDATA(html, pos);
+		if (afterCDATA !== pos) {
+			pos = afterCDATA;
+			continue;
+		}
+		if (html[pos] !== "<") {
+			pos++;
+			continue;
+		}
+		const closingTag = parseClosingTag(html, pos);
+		if (closingTag) {
+			const pendingIndexes = openTagIndexes[closingTag.tagName];
+			if (trackedTags.has(closingTag.tagName) && pendingIndexes?.length) pendingIndexes.pop();
+			pos = closingTag.endPos;
+			continue;
+		}
+		const openingTag = parseOpeningTag(html, pos);
+		if (!openingTag || !trackedTags.has(openingTag.tagName)) {
+			pos++;
+			continue;
+		}
+		tagCounts[openingTag.tagName] = (tagCounts[openingTag.tagName] ?? 0) + 1;
+		const instance = tagCounts[openingTag.tagName];
+		if (!openingTag.foundEnd) unclosedTags.add(getTagInstanceId(openingTag.tagName, instance));
+		else if (!openingTag.isSelfClosing && !VOID_ELEMENTS.has(openingTag.tagName)) {
+			openTagIndexes[openingTag.tagName] ??= [];
+			openTagIndexes[openingTag.tagName].push(instance);
+		}
+		pos = openingTag.endPos;
+	}
+	for (const [tagName, pendingIndexes] of Object.entries(openTagIndexes)) pendingIndexes.forEach((instance) => {
+		unclosedTags.add(getTagInstanceId(tagName, instance));
+	});
+	return unclosedTags;
+}
+//#endregion
+export { detectUnclosedComponentTags, getTagInstanceId };

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

@@ -0,0 +1,3 @@
+export { Parser } from './Parser';
+export { VueRenderer } from './VueRenderer';
+export { detectUnclosedComponentTags } from './detectUnclosedComponentTags';

package/dist/XMarkdown/core/index.js

@@ -0,0 +1,4 @@
+import { Parser } from "./Parser.js";
+import { detectUnclosedComponentTags } from "./detectUnclosedComponentTags.js";
+import { VueRenderer } from "./VueRenderer.js";
+export { Parser, VueRenderer, detectUnclosedComponentTags };

package/dist/XMarkdown/index.d.ts

@@ -0,0 +1,14 @@
+export { default as XMarkdown } from './index.vue';
+export type { XMarkdownProps } from './interface';
+export type { StreamingOption } from './interface';
+export type { MarkedConfig } from './interface';
+export type { ComponentProps } from './interface';
+export { Parser } from './core/Parser';
+export { VueRenderer } from './core/VueRenderer';
+export { detectUnclosedComponentTags } from './core/detectUnclosedComponentTags';
+export { useStreaming } from './composables/useStreaming';
+export { useParser } from './composables/useParser';
+export { useRenderer } from './composables/useRenderer';
+export { useTail } from './composables/useTail';
+export { AnimationText, DebugPanel, TailIndicator } from './components';
+export { resolveTailContent } from './utils/tail';

package/dist/XMarkdown/index.js

@@ -0,0 +1,13 @@
+import AnimationText_default from "./components/AnimationText.js";
+import DebugPanel_default from "./components/DebugPanel.js";
+import TailIndicator_default from "./components/TailIndicator.js";
+import { useStreaming } from "./composables/useStreaming.js";
+import { Parser } from "./core/Parser.js";
+import { useParser } from "./composables/useParser.js";
+import { detectUnclosedComponentTags } from "./core/detectUnclosedComponentTags.js";
+import { VueRenderer } from "./core/VueRenderer.js";
+import { useRenderer } from "./composables/useRenderer.js";
+import { useTail } from "./composables/useTail.js";
+import XMarkdown_default from "./index2.js";
+import { resolveTailContent } from "./utils/tail.js";
+export { AnimationText_default as AnimationText, DebugPanel_default as DebugPanel, Parser, TailIndicator_default as TailIndicator, VueRenderer, XMarkdown_default as XMarkdown, detectUnclosedComponentTags, resolveTailContent, useParser, useRenderer, useStreaming, useTail };