@8btc/mditor 0.0.26 → 0.0.28

package/dist/ts/markdown/customRender.d.ts

@@ -1,73 +0,0 @@
-/**
- * 自定义组件渲染模块
- * 支持将 HTML 标签（如 <read-button label="文献解读">）转换为自定义 HTML
- */
-/**
- * 解析 HTML 属性字符串
- * @param str 属性字符串，如 'label="文献解读" id="test"'
- * @returns 属性对象
- */
-export declare function parseAttributes(str: string): Record<string, string>;
-/**
- * 从 HTML 字符串中提取自定义标签
- * @param html HTML 字符串
- * @param tagName 标签名称，如 'read-button'
- * @returns 匹配的标签信息数组
- */
-export declare function extractCustomTags(html: string, tagName: string): Array<{
-    fullTag: string;
-    attributes: Record<string, string>;
-    content: string;
-}>;
-/**
- * 自定义组件配置类型
- */
-export interface ICustomComponent {
-    /**
-     * HTML 渲染函数 - 用于生成 HTML 字符串
-     * @param props 组件属性对象
-     * @returns HTML 字符串
-     */
-    renderHTML: (props: Record<string, any>) => string;
-    /**
-     * 组件显示名称
-     */
-    displayName?: string;
-}
-/**
- * 自定义组件集合
- */
-export type ICustomComponents = Record<string, ICustomComponent>;
-/**
- * 使用 HTML 字符串渲染自定义标签
- * @param html HTML 字符串
- * @param tagName 标签名称
- * @param component 自定义组件配置
- * @returns 修改后的 HTML 字符串
- */
-export declare function renderCustomComponentHTML(html: string, tagName: string, component: ICustomComponent): string;
-/**
- * 在 DOM 元素中查找并渲染自定义组件
- * @param element DOM 元素
- * @param customComponents 自定义组件集合
- */
-export declare function renderCustomComponents(element: HTMLElement, customComponents: ICustomComponents): void;
-/**
- * 批量处理自定义组件 - 用于预处理 HTML 字符串
- * @param html HTML 字符串
- * @param customComponents 自定义组件集合
- * @returns 处理后的 HTML 字符串
- */
-export declare function processCustomComponents(html: string, customComponents: ICustomComponents): string;
-/**
- * 处理 markdown 中的自定义组件
- * 将 markdown 中的自定义标签转换为对应的 HTML
- * @param markdown markdown 字符串
- * @param customComponents 自定义组件集合
- * @returns 处理后的 markdown 字符串
- */
-export declare function processMarkdownCustomComponents(markdown: string, customComponents: ICustomComponents): string;
-/**
- * 导出默认函数和其他公共 API
- */
-export default function customRender(element: HTMLElement, customComponents: ICustomComponents): void;

package/src/ts/markdown/customRender.ts

@@ -1,203 +0,0 @@
-/**
- * 自定义组件渲染模块
- * 支持将 HTML 标签（如 <read-button label="文献解读">）转换为自定义 HTML
- */
-
-/**
- * 解析 HTML 属性字符串
- * @param str 属性字符串，如 'label="文献解读" id="test"'
- * @returns 属性对象
- */
-export function parseAttributes(str: string): Record<string, string> {
-    const attributes: Record<string, string> = {};
-    if (!str) return attributes;
-
-    const attrRegex = /(\w+)="([^"]*)"/g;
-    let match;
-    while ((match = attrRegex.exec(str)) !== null) {
-        attributes[match[1]] = match[2];
-    }
-    return attributes;
-}
-
-/**
- * 从 HTML 字符串中提取自定义标签
- * @param html HTML 字符串
- * @param tagName 标签名称，如 'read-button'
- * @returns 匹配的标签信息数组
- */
-export function extractCustomTags(
-    html: string,
-    tagName: string
-): Array<{
-    fullTag: string;
-    attributes: Record<string, string>;
-    content: string;
-}> {
-    const results: Array<{
-        fullTag: string;
-        attributes: Record<string, string>;
-        content: string;
-    }> = [];
-
-    // 匹配自闭合标签和非自闭合标签
-    const selfClosingRegex = new RegExp(`<${tagName}\\s+([^>]*)\\s*/>`, "g");
-    const openCloseRegex = new RegExp(
-        `<${tagName}\\s+([^>]*)>([^<]*)</${tagName}>`,
-        "g"
-    );
-
-    let match;
-
-    // 处理自闭合标签
-    while ((match = selfClosingRegex.exec(html)) !== null) {
-        results.push({
-            fullTag: match[0],
-            attributes: parseAttributes(match[1]),
-            content: "",
-        });
-    }
-
-    // 处理开闭合标签
-    while ((match = openCloseRegex.exec(html)) !== null) {
-        results.push({
-            fullTag: match[0],
-            attributes: parseAttributes(match[1]),
-            content: match[2],
-        });
-    }
-
-    return results;
-}
-
-/**
- * 自定义组件配置类型
- */
-export interface ICustomComponent {
-    /**
-     * HTML 渲染函数 - 用于生成 HTML 字符串
-     * @param props 组件属性对象
-     * @returns HTML 字符串
-     */
-    renderHTML: (props: Record<string, any>) => string;
-
-    /**
-     * 组件显示名称
-     */
-    displayName?: string;
-}
-
-/**
- * 自定义组件集合
- */
-export type ICustomComponents = Record<string, ICustomComponent>;
-
-/**
- * 使用 HTML 字符串渲染自定义标签
- * @param html HTML 字符串
- * @param tagName 标签名称
- * @param component 自定义组件配置
- * @returns 修改后的 HTML 字符串
- */
-export function renderCustomComponentHTML(
-    html: string,
-    tagName: string,
-    component: ICustomComponent
-): string {
-    const tags = extractCustomTags(html, tagName);
-    let result = html;
-
-    // 反向遍历以保持位置正确性
-    for (let i = tags.length - 1; i >= 0; i--) {
-        const tag = tags[i];
-        const htmlString = component.renderHTML(tag.attributes);
-        result = result.replace(tag.fullTag, htmlString);
-    }
-
-    return result;
-}
-
-/**
- * 在 DOM 元素中查找并渲染自定义组件
- * @param element DOM 元素
- * @param customComponents 自定义组件集合
- */
-export function renderCustomComponents(
-    element: HTMLElement,
-    customComponents: ICustomComponents
-): void {
-    Object.keys(customComponents).forEach((tagName) => {
-        const component = customComponents[tagName];
-        const customElements = element.querySelectorAll(tagName);
-        console.log(element, customComponents, "customComponents");
-        // 反向遍历以避免 DOM 修改时的索引问题
-        Array.from(customElements)
-            .reverse()
-            .forEach((el) => {
-                const attributes: Record<string, string> = {};
-                el.getAttributeNames().forEach((name) => {
-                    attributes[name] = el.getAttribute(name) || "";
-                });
-                // 使用 innerHTML 保留内部 HTML 内容，而不仅仅是纯文本
-                const content = el.innerHTML || "";
-
-                // 使用 HTML 渲染
-                const htmlString = component.renderHTML({
-                    ...attributes,
-                    children: content,
-                });
-                el.outerHTML = htmlString;
-            });
-    });
-}
-
-/**
- * 批量处理自定义组件 - 用于预处理 HTML 字符串
- * @param html HTML 字符串
- * @param customComponents 自定义组件集合
- * @returns 处理后的 HTML 字符串
- */
-export function processCustomComponents(
-    html: string,
-    customComponents: ICustomComponents
-): string {
-    let result = html;
-
-    Object.keys(customComponents).forEach((tagName) => {
-        const component = customComponents[tagName];
-        result = renderCustomComponentHTML(result, tagName, component);
-    });
-
-    return result;
-}
-
-/**
- * 处理 markdown 中的自定义组件
- * 将 markdown 中的自定义标签转换为对应的 HTML
- * @param markdown markdown 字符串
- * @param customComponents 自定义组件集合
- * @returns 处理后的 markdown 字符串
- */
-export function processMarkdownCustomComponents(
-    markdown: string,
-    customComponents: ICustomComponents
-): string {
-    let result = markdown;
-
-    Object.keys(customComponents).forEach((tagName) => {
-        const component = customComponents[tagName];
-        result = renderCustomComponentHTML(result, tagName, component);
-    });
-
-    return result;
-}
-
-/**
- * 导出默认函数和其他公共 API
- */
-export default function customRender(
-    element: HTMLElement,
-    customComponents: ICustomComponents
-): void {
-    renderCustomComponents(element, customComponents);
-}