@8btc/mditor 0.0.24 → 0.0.26

package/dist/ts/wysiwyg/index.d.ts

@@ -14,6 +14,7 @@ declare class WYSIWYG {
     commentIds: string[];
     private vditor;
     private scrollListener;
+    private mathSelectionCleanup;
     constructor(vditor: IVditor);
     getComments(vditor: IVditor, getData?: boolean): ICommentsData[];
     triggerRemoveComment(vditor: IVditor): void;
@@ -39,7 +40,7 @@ declare class WYSIWYG {
     /**
      * 复制事件处理
      * - 代码块与链接：按原有规则格式化复制
-     * - 数学公式选区：仅复制可见文本内容（不转换为 Markdown/TeX/MathML）
+     * - 数学公式选区：复制公式源码（与 sv 模式一致）
      * - 其他内容：转换为 Markdown 文本复制
      */
     private copy;

package/dist/types/index.d.ts

@@ -610,6 +610,13 @@ interface IPreviewOptions {
     theme?: IPreviewTheme;
     icon?: "ant" | "material" | undefined;
     render?: IPreviewRender;
+    /** 自定义组件配置 */
+    customComponents?: {
+        [key: string]: {
+            renderHTML: (props: Record<string, any>) => string;
+            displayName?: string;
+        };
+    };
 
     transform?(html: string): string;
 
@@ -836,6 +843,15 @@ interface IOptions {
         language: string;
         render: (element: HTMLElement, vditor: IVditor) => void;
     }[];
+    /** 自定义组件配置，用于渲染自定义标签如 <read-button label="文献解读"> */
+    customComponents?: {
+        [key: string]: {
+            /** HTML 渲染函数，用于生成 HTML 字符串 */
+            renderHTML: (props: Record<string, any>) => string;
+            /** 组件显示名称 */
+            displayName?: string;
+        };
+    };
 
     /** 编辑器异步渲染完成后的回调方法 */
     after?(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@8btc/mditor",
-    "version": "0.0.24",
+    "version": "0.0.26",
     "description": "mditor, Md编辑器",
     "author": "wujie-vditor",
     "jsdelivr": "dist/index.min.js",

package/src/assets/less/_content.less

@@ -58,6 +58,18 @@
     img:not(.emoji) {
       cursor: pointer;
     }
+
+    // 数学公式选中高亮样式
+    .language-math {
+      user-select: all;
+      cursor: text;
+      transition: background-color 0.1s ease;
+
+      &.vditor-math--selected {
+        background-color: highlight !important;
+        color: highlighttext !important;
+      }
+    }
   }
 
   &-devtools {

package/src/assets/less/_ir.less

@@ -263,6 +263,18 @@
   .vditor-reset > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, code, pre):has(+ .vditor-ir__node[data-type="math-block"]) {
     margin-bottom: 0 !important;
   }
+
+  // 数学公式选中高亮样式
+  .language-math {
+    user-select: all;
+    cursor: text;
+    transition: background-color 0.1s ease;
+
+    &.vditor-math--selected {
+      background-color: highlight !important;
+      color: highlighttext !important;
+    }
+  }
 }
 
 @media screen and (max-width: @max-width) {

package/src/assets/less/_sv.less

@@ -129,4 +129,16 @@
       font-weight: bold;
     }
   }
+
+  // 数学公式选中高亮样式
+  .language-math {
+    user-select: all;
+    cursor: text;
+    transition: background-color 0.1s ease;
+
+    &.vditor-math--selected {
+      background-color: highlight !important;
+      color: highlighttext !important;
+    }
+  }
 }

package/src/assets/less/_wysiwyg.less

@@ -90,6 +90,18 @@
     font-size: 100% !important;
   }
 
+  // 数学公式选中高亮样式
+  .language-math {
+    user-select: all;
+    cursor: text;
+    transition: background-color 0.1s ease;
+
+    &.vditor-math--selected {
+      background-color: highlight !important;
+      color: highlighttext !important;
+    }
+  }
+
   & > .vditor-reset > h1:before,
   & > .vditor-reset > h2:before,
   & > .vditor-reset > h3:before,

package/src/assets/less/index.less

@@ -99,4 +99,9 @@ details>summary {
 
 details>summary::-webkit-details-marker {
   display: none;
+}
+
+::selection {
+  background: highlight; /* 系统原生高亮背景色 */
+  color: highlighttext;   /* 系统原生高亮文本色 */
 }

package/src/ts/ir/index.ts

@@ -21,6 +21,7 @@ import { highlightToolbarIR } from "./highlightToolbarIR";
 import { input } from "./input";
 import { processAfterRender, processHint } from "./process";
 import { hidePanel } from "../toolbar/setToolbar";
+import { bindMathSelectionListener } from "../util/mathSelection";
 
 class IR {
     public range: Range;
@@ -29,6 +30,7 @@ class IR {
     public hlToolbarTimeoutId: number;
     public composingLock: boolean = false;
     public preventInput: boolean;
+    private mathSelectionCleanup: () => void;
 
     constructor(vditor: IVditor) {
         const divElement = document.createElement("div");
@@ -52,6 +54,16 @@ class IR {
         dropEvent(vditor, this.element);
         copyEvent(vditor, this.element, this.copy);
         cutEvent(vditor, this.element, this.copy);
+
+        // 绑定数学公式选中高亮监听
+        this.mathSelectionCleanup = bindMathSelectionListener(this.element);
+    }
+
+    public unbindListener() {
+        // 清理数学公式选中监听
+        if (this.mathSelectionCleanup) {
+            this.mathSelectionCleanup();
+        }
     }
 
     private copy(event: ClipboardEvent, vditor: IVditor) {
@@ -62,8 +74,39 @@ class IR {
         event.stopPropagation();
         event.preventDefault();
 
+        // 检查选区是否在数学公式元素内
+        let mathElement = hasClosestByClassName(
+            range.startContainer,
+            "language-math"
+        ) as HTMLElement;
+        const mathEndElement = hasClosestByClassName(
+            range.endContainer,
+            "language-math"
+        ) as HTMLElement;
+        
+        // 如果选区的起点和终点都在同一个数学公式元素内，复制源码
+        if (mathElement && mathEndElement && mathElement.isSameNode(mathEndElement)) {
+            const mathSource = mathElement.getAttribute("data-math") || range.toString();
+            event.clipboardData.setData("text/plain", mathSource);
+            event.clipboardData.setData("text/html", "");
+            return;
+        }
+
+        // 处理包含多个公式的混合内容
         const tempElement = document.createElement("div");
         tempElement.appendChild(range.cloneContents());
+        
+        const mathElements = tempElement.querySelectorAll(".language-math");
+        if (mathElements.length > 0) {
+            // 替换所有数学公式为源码
+            mathElements.forEach((mathEl: HTMLElement) => {
+                const mathSource = mathEl.getAttribute("data-math");
+                if (mathSource) {
+                    const textNode = document.createTextNode(mathSource);
+                    mathEl.parentNode.replaceChild(textNode, mathEl);
+                }
+            });
+        }
 
         event.clipboardData.setData("text/plain", vditor.lute.VditorIRDOM2Md(tempElement.innerHTML).trim());
         event.clipboardData.setData("text/html", "");

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

@@ -24,6 +24,8 @@ import { plantumlRender } from "./plantumlRender";
 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 = {
@@ -172,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");
@@ -207,6 +213,82 @@ export const previewRender = async (
     if (mergedOptions.lazyLoadImage) {
         lazyLoadImageRender(previewElement);
     }
+    // 绑定数学公式选中高亮监听
+    bindMathSelectionListener(previewElement);
+
+    // 绑定复制事件，处理数学公式源码复制
+    previewElement.addEventListener("copy", (event: ClipboardEvent) => {
+        const selection = window.getSelection();
+        if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+            return;
+        }
+
+        const range = selection.getRangeAt(0);
+
+        // 检查选区是否只包含单个数学公式
+        let mathElement = hasClosestByClassName(
+            range.startContainer,
+            "language-math"
+        ) as HTMLElement;
+        const mathEndElement = hasClosestByClassName(
+            range.endContainer,
+            "language-math"
+        ) as HTMLElement;
+
+        // 如果选区的起点和终点都在同一个数学公式元素内，复制源码
+        if (
+            mathElement &&
+            mathEndElement &&
+            mathElement.isSameNode(mathEndElement)
+        ) {
+            event.stopPropagation();
+            event.preventDefault();
+            const mathSource =
+                mathElement.getAttribute("data-math") || range.toString();
+            event.clipboardData.setData("text/plain", mathSource);
+            event.clipboardData.setData("text/html", "");
+            return;
+        }
+
+        // 处理包含多个公式的混合内容
+        const fragment = range.cloneContents();
+        const mathElements = fragment.querySelectorAll(".language-math");
+
+        if (mathElements.length > 0) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            // 创建临时容器来处理内容
+            const tempDiv = document.createElement("div");
+            tempDiv.appendChild(fragment);
+
+            // 替换所有数学公式为源码
+            tempDiv
+                .querySelectorAll(".language-math")
+                .forEach((mathEl: HTMLElement) => {
+                    const mathSource = mathEl.getAttribute("data-math");
+                    console.log(mathEl.tagName, "mathEl");
+                    if (mathSource) {
+                        if (mathEl.tagName === "SPAN") {
+                            const textNode = document.createTextNode(
+                                `$${mathSource}$`
+                            );
+                            mathEl.parentNode.replaceChild(textNode, mathEl);
+                        } else {
+                            const textNode = document.createTextNode(
+                                `$$${mathSource}$$`
+                            );
+                            mathEl.parentNode.replaceChild(textNode, mathEl);
+                        }
+                    }
+                });
+
+            // 获取纯文本内容
+            const plainText = tempDiv.textContent || tempDiv.innerText || "";
+            event.clipboardData.setData("text/plain", plainText);
+            event.clipboardData.setData("text/html", "");
+        }
+    });
 
     previewElement.addEventListener(
         "click",

package/src/ts/preview/index.ts

@@ -19,11 +19,13 @@ import {
 import { setSelectionFocus } from "../util/selection";
 import { selectionRender } from "../markdown/selectionRender";
 import { previewImage } from "./image";
+import { bindMathSelectionListener } from "../util/mathSelection";
 
 export class Preview {
     public element: HTMLElement;
     public previewElement: HTMLElement;
     private mdTimeoutId: number;
+    private mathSelectionCleanup: () => void;
 
     /**
      * 构造预览区域容器，注册复制与点击事件。
@@ -98,6 +100,18 @@ export class Preview {
             }
         );
         this.element.appendChild(this.previewElement);
+
+        // 绑定数学公式选中高亮监听
+        this.mathSelectionCleanup = bindMathSelectionListener(
+            this.previewElement
+        );
+    }
+
+    public unbindListener() {
+        // 清理数学公式选中监听
+        if (this.mathSelectionCleanup) {
+            this.mathSelectionCleanup();
+        }
     }
 
     /**

package/src/ts/sv/index.ts

@@ -12,6 +12,7 @@ import { paste } from "../util/fixBrowserBehavior";
 import { getSelectText } from "../util/getSelectText";
 import { inputEvent } from "./inputEvent";
 import { processAfterRender } from "./process";
+import { bindMathSelectionListener } from "../util/mathSelection";
 
 class Editor {
     public range: Range;
@@ -20,6 +21,7 @@ class Editor {
     public processTimeoutId: number;
     public hlToolbarTimeoutId: number;
     public preventInput: boolean;
+    private mathSelectionCleanup: () => void;
 
     constructor(vditor: IVditor) {
         this.element = document.createElement("pre");
@@ -40,6 +42,16 @@ class Editor {
         dropEvent(vditor, this.element);
         copyEvent(vditor, this.element, this.copy);
         cutEvent(vditor, this.element, this.copy);
+
+        // 绑定数学公式选中高亮监听
+        this.mathSelectionCleanup = bindMathSelectionListener(this.element);
+    }
+
+    public unbindListener() {
+        // 清理数学公式选中监听
+        if (this.mathSelectionCleanup) {
+            this.mathSelectionCleanup();
+        }
     }
 
     private copy(event: ClipboardEvent, vditor: IVditor) {

package/src/ts/util/Options.ts

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

package/src/ts/util/hasClosest.ts

@@ -1,4 +1,4 @@
-import {hasClosestByTag} from "./hasClosestByHeadings";
+import { hasClosestByTag } from "./hasClosestByHeadings";
 
 export const hasTopClosestByClassName = (element: Node, className: string) => {
     let closest = hasClosestByClassName(element, className);
@@ -15,12 +15,20 @@ export const hasTopClosestByClassName = (element: Node, className: string) => {
     return closest || false;
 };
 
-export const hasTopClosestByAttribute = (element: Node, attr: string, value: string) => {
+export const hasTopClosestByAttribute = (
+    element: Node,
+    attr: string,
+    value: string
+) => {
     let closest = hasClosestByAttribute(element, attr, value);
     let parentClosest: boolean | HTMLElement = false;
     let findTop = false;
     while (closest && !closest.classList.contains("vditor-reset") && !findTop) {
-        parentClosest = hasClosestByAttribute(closest.parentElement, attr, value);
+        parentClosest = hasClosestByAttribute(
+            closest.parentElement,
+            attr,
+            value
+        );
         if (parentClosest) {
             closest = parentClosest;
         } else {
@@ -49,13 +57,20 @@ export const getTopList = (element: Node) => {
     const topUlElement = hasTopClosestByTag(element, "UL");
     const topOlElement = hasTopClosestByTag(element, "OL");
     let topListElement = topUlElement;
-    if (topOlElement && (!topUlElement || (topUlElement && topOlElement.contains(topUlElement)))) {
+    if (
+        topOlElement &&
+        (!topUlElement || (topUlElement && topOlElement.contains(topUlElement)))
+    ) {
         topListElement = topOlElement;
     }
     return topListElement;
 };
 
-export const hasClosestByAttribute = (element: Node, attr: string, value: string) => {
+export const hasClosestByAttribute = (
+    element: Node,
+    attr: string,
+    value: string
+) => {
     if (!element) {
         return false;
     }
@@ -84,13 +99,18 @@ export const hasClosestBlock = (element: Node) => {
     let e = element as HTMLElement;
     let isClosest = false;
 
-    const blockElement = hasClosestByAttribute(element as HTMLElement, "data-block", "0");
+    const blockElement = hasClosestByAttribute(
+        element as HTMLElement,
+        "data-block",
+        "0"
+    );
     if (blockElement) {
         return blockElement;
     }
 
     while (e && !isClosest && !e.classList.contains("vditor-reset")) {
-        if (e.tagName === "H1" ||
+        if (
+            e.tagName === "H1" ||
             e.tagName === "H2" ||
             e.tagName === "H3" ||
             e.tagName === "H4" ||
@@ -99,7 +119,8 @@ export const hasClosestBlock = (element: Node) => {
             e.tagName === "P" ||
             e.tagName === "BLOCKQUOTE" ||
             e.tagName === "OL" ||
-            e.tagName === "UL") {
+            e.tagName === "UL"
+        ) {
             isClosest = true;
         } else {
             e = e.parentElement;