@8btc/mditor 0.0.25 → 0.0.26

package/src/ts/markdown/customRender.ts

@@ -0,0 +1,203 @@
+/**
+ * 自定义组件渲染模块
+ * 支持将 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);
+}

package/src/ts/markdown/previewRender.ts

@@ -25,6 +25,7 @@ import { setLute } from "./setLute";
 import { speechRender } from "./speechRender";
 import { selectionRender } from "./selectionRender";
 import { bindMathSelectionListener } from "../util/mathSelection";
+import customRender from "./customRender";
 
 const mergeOptions = (options?: IPreviewOptions) => {
     const defaultOption: IPreviewOptions = {
@@ -173,6 +174,10 @@ export const previewRender = async (
         );
     }
 
+    console.log(previewElement, "previewElement");
+
+    customRender(previewElement, mergedOptions.customComponents || {});
+
     setContentTheme(mergedOptions.theme.current, mergedOptions.theme.path);
     if (mergedOptions.anchor === 1) {
         previewElement.classList.add("vditor-reset--anchor");

package/src/ts/preview/index.ts

@@ -102,7 +102,9 @@ export class Preview {
         this.element.appendChild(this.previewElement);
 
         // 绑定数学公式选中高亮监听
-        this.mathSelectionCleanup = bindMathSelectionListener(this.previewElement);
+        this.mathSelectionCleanup = bindMathSelectionListener(
+            this.previewElement
+        );
     }
 
     public unbindListener() {

package/src/ts/util/Options.ts

@@ -28,6 +28,7 @@ export class Options {
             type: "markdown",
         },
         customRenders: [],
+        customComponents: {},
         debugger: false,
         fullscreen: {
             index: 90,