@8btc/mditor 0.0.24 → 0.0.26

package/dist/js/lute/lute.min.js

@@ -254591,6 +254591,31 @@
         });
         return md
     }
+    
+    function __vditorPreprocessCustomTags(md) {
+        if (!md || typeof md !== "string") return md;
+
+        // 第二步：处理自闭合标签 <tag attr="value" /> → <tag attr="value"></tag>
+        // 匹配所有合法自定义标签（小写字母开头，含字母/数字/短横线）
+        const selfClosingRegex = /<([a-z][a-z0-9-]*)\s+([^>]*?)\s*\/>/gi;
+        md = md.replace(selfClosingRegex, function(match, tagName, attrs) {
+            return `<${tagName} ${attrs}></${tagName}>`;
+        });
+
+        // 第三步：处理纯开标签 <tag attr="value"> → <tag attr="value"></tag>
+        // 精准匹配：非自闭合、无后续闭合标签的合法自定义标签
+        const unclosedTagRegex = /<([a-z][a-z0-9-]*)\s+([^>]*?)>(?<!\/)\s*(?!<\/\1\s*>)/gi;
+        md = md.replace(unclosedTagRegex, function(match, tagName, attrs) {
+            // 兜底过滤：避免已闭合标签被重复处理
+            if (match.includes('/>') || match.endsWith(`></${tagName}>`)) {
+                return match;
+            }
+            return `<${tagName} ${attrs}></${tagName}>`;
+        });
+
+        return md;
+    }
+    
     if (typeof window !== "undefined" && window.Lute && typeof window.Lute.New === "function") {
         var __origNew = window.Lute.New;
         window.Lute.New = function() {
@@ -254600,7 +254625,10 @@
                 var orig = inst && inst[name];
                 if (typeof orig === "function") {
                     inst[name] = function(text) {
-                        return orig.call(inst, __vditorPreprocessBackslashMath(text))
+                        text = __vditorPreprocessBackslashMath(text);
+                        text = __vditorPreprocessCustomTags(text);
+                        console.log(text)
+                        return orig.call(inst, text)
                     }
                 }
             }

package/dist/method.js

@@ -1,5 +1,5 @@
 /*!
- * Vditor v0.0.24 - A markdown editor written in TypeScript.
+ * Vditor v0.0.26 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -45,7 +45,7 @@ return /******/ (() => { // webpackBootstrap
 /* harmony export */   "g": () => (/* binding */ Constants)
 /* harmony export */ });
 /* unused harmony export VDITOR_VERSION */
-var _VDITOR_VERSION = (/* unused pure expression or super */ null && ("0.0.24"));
+var _VDITOR_VERSION = (/* unused pure expression or super */ null && ("0.0.26"));
 
 var Constants = /** @class */ (function () {
     function Constants() {
@@ -347,7 +347,7 @@ var Constants = /** @class */ (function () {
         "c#",
         "bat",
     ];
-    Constants.CDN = "https://webcdn.wujieai.com/vditor@".concat("0.0.24");
+    Constants.CDN = "https://webcdn.wujieai.com/vditor@".concat("0.0.26");
     Constants.MARKDOWN_OPTIONS = {
         autoSpace: false,
         gfmAutoLink: true,
@@ -4314,7 +4314,8 @@ var getTopList = function (element) {
     var topUlElement = hasTopClosestByTag(element, "UL");
     var topOlElement = hasTopClosestByTag(element, "OL");
     var topListElement = topUlElement;
-    if (topOlElement && (!topUlElement || (topUlElement && topOlElement.contains(topUlElement)))) {
+    if (topOlElement &&
+        (!topUlElement || (topUlElement && topOlElement.contains(topUlElement)))) {
         topListElement = topOlElement;
     }
     return topListElement;
@@ -4454,6 +4455,65 @@ var hasClosestByHeadings = function (element) {
 };
 
 
+/***/ }),
+
+/***/ 35:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "I": () => (/* binding */ bindMathSelectionListener)
+/* harmony export */ });
+/* unused harmony export updateMathSelection */
+/**
+ * 数学公式选中高亮工具
+ * 监听选区变化，为选中的数学公式添加高亮样式
+ */
+var MATH_SELECTED_CLASS = "vditor-math--selected";
+/**
+ * 检查并更新数学公式的选中高亮状态
+ * @param container 容器元素（编辑器或预览区域）
+ */
+var updateMathSelection = function (container) {
+    var selection = window.getSelection();
+    // 获取所有数学公式元素
+    var mathElements = container.querySelectorAll(".language-math");
+    // 移除所有旧的高亮
+    mathElements.forEach(function (el) { return el.classList.remove(MATH_SELECTED_CLASS); });
+    // 无选中内容则返回
+    if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+        return;
+    }
+    // 检测选中的公式节点并添加高亮
+    mathElements.forEach(function (element) {
+        if (selection.containsNode(element, true)) {
+            element.classList.add(MATH_SELECTED_CLASS);
+        }
+    });
+};
+/**
+ * 为容器绑定数学公式选中高亮监听
+ * @param container 容器元素（编辑器或预览区域）
+ */
+var bindMathSelectionListener = function (container) {
+    var updateHandler = function () { return updateMathSelection(container); };
+    // 监听选区变化
+    document.addEventListener("selectionchange", updateHandler);
+    // 监听鼠标抬起（处理拖拽选择）
+    container.addEventListener("mouseup", updateHandler);
+    // 监听键盘选择（Shift + 方向键）
+    container.addEventListener("keyup", function (e) {
+        if (e.shiftKey && ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) {
+            updateHandler();
+        }
+    });
+    // 返回清理函数
+    return function () {
+        document.removeEventListener("selectionchange", updateHandler);
+        container.removeEventListener("mouseup", updateHandler);
+    };
+};
+
+
 /***/ }),
 
 /***/ 673:
@@ -5074,6 +5134,150 @@ var speechRender = function (element, lang) {
 
 // EXTERNAL MODULE: ./src/ts/markdown/selectionRender.ts
 var selectionRender = __webpack_require__(616);
+// EXTERNAL MODULE: ./src/ts/util/mathSelection.ts
+var mathSelection = __webpack_require__(35);
+;// CONCATENATED MODULE: ./src/ts/markdown/customRender.ts
+/**
+ * 自定义组件渲染模块
+ * 支持将 HTML 标签（如 <read-button label="文献解读">）转换为自定义 HTML
+ */
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/**
+ * 解析 HTML 属性字符串
+ * @param str 属性字符串，如 'label="文献解读" id="test"'
+ * @returns 属性对象
+ */
+function parseAttributes(str) {
+    var attributes = {};
+    if (!str)
+        return attributes;
+    var attrRegex = /(\w+)="([^"]*)"/g;
+    var match;
+    while ((match = attrRegex.exec(str)) !== null) {
+        attributes[match[1]] = match[2];
+    }
+    return attributes;
+}
+/**
+ * 从 HTML 字符串中提取自定义标签
+ * @param html HTML 字符串
+ * @param tagName 标签名称，如 'read-button'
+ * @returns 匹配的标签信息数组
+ */
+function extractCustomTags(html, tagName) {
+    var results = [];
+    // 匹配自闭合标签和非自闭合标签
+    var selfClosingRegex = new RegExp("<".concat(tagName, "\\s+([^>]*)\\s*/>"), "g");
+    var openCloseRegex = new RegExp("<".concat(tagName, "\\s+([^>]*)>([^<]*)</").concat(tagName, ">"), "g");
+    var 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;
+}
+/**
+ * 使用 HTML 字符串渲染自定义标签
+ * @param html HTML 字符串
+ * @param tagName 标签名称
+ * @param component 自定义组件配置
+ * @returns 修改后的 HTML 字符串
+ */
+function renderCustomComponentHTML(html, tagName, component) {
+    var tags = extractCustomTags(html, tagName);
+    var result = html;
+    // 反向遍历以保持位置正确性
+    for (var i = tags.length - 1; i >= 0; i--) {
+        var tag = tags[i];
+        var htmlString = component.renderHTML(tag.attributes);
+        result = result.replace(tag.fullTag, htmlString);
+    }
+    return result;
+}
+/**
+ * 在 DOM 元素中查找并渲染自定义组件
+ * @param element DOM 元素
+ * @param customComponents 自定义组件集合
+ */
+function renderCustomComponents(element, customComponents) {
+    Object.keys(customComponents).forEach(function (tagName) {
+        var component = customComponents[tagName];
+        var customElements = element.querySelectorAll(tagName);
+        console.log(element, customComponents, "customComponents");
+        // 反向遍历以避免 DOM 修改时的索引问题
+        Array.from(customElements)
+            .reverse()
+            .forEach(function (el) {
+            var attributes = {};
+            el.getAttributeNames().forEach(function (name) {
+                attributes[name] = el.getAttribute(name) || "";
+            });
+            // 使用 innerHTML 保留内部 HTML 内容，而不仅仅是纯文本
+            var content = el.innerHTML || "";
+            // 使用 HTML 渲染
+            var htmlString = component.renderHTML(__assign(__assign({}, attributes), { children: content }));
+            el.outerHTML = htmlString;
+        });
+    });
+}
+/**
+ * 批量处理自定义组件 - 用于预处理 HTML 字符串
+ * @param html HTML 字符串
+ * @param customComponents 自定义组件集合
+ * @returns 处理后的 HTML 字符串
+ */
+function processCustomComponents(html, customComponents) {
+    var result = html;
+    Object.keys(customComponents).forEach(function (tagName) {
+        var component = customComponents[tagName];
+        result = renderCustomComponentHTML(result, tagName, component);
+    });
+    return result;
+}
+/**
+ * 处理 markdown 中的自定义组件
+ * 将 markdown 中的自定义标签转换为对应的 HTML
+ * @param markdown markdown 字符串
+ * @param customComponents 自定义组件集合
+ * @returns 处理后的 markdown 字符串
+ */
+function processMarkdownCustomComponents(markdown, customComponents) {
+    var result = markdown;
+    Object.keys(customComponents).forEach(function (tagName) {
+        var component = customComponents[tagName];
+        result = renderCustomComponentHTML(result, tagName, component);
+    });
+    return result;
+}
+/**
+ * 导出默认函数和其他公共 API
+ */
+function customRender(element, customComponents) {
+    renderCustomComponents(element, customComponents);
+}
+
 ;// CONCATENATED MODULE: ./src/ts/markdown/previewRender.ts
 var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -5131,6 +5335,8 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
 
 
 
+
+
 
 
 
@@ -5272,6 +5478,8 @@ var previewRender = function (previewElement, markdown, options) { return __awai
                 _a.sent();
                 _a.label = 8;
             case 8:
+                console.log(previewElement, "previewElement");
+                customRender(previewElement, mergedOptions.customComponents || {});
                 (0,setContentTheme/* setContentTheme */.Z)(mergedOptions.theme.current, mergedOptions.theme.path);
                 if (mergedOptions.anchor === 1) {
                     previewElement.classList.add("vditor-reset--anchor");
@@ -5307,6 +5515,61 @@ var previewRender = function (previewElement, markdown, options) { return __awai
                 if (mergedOptions.lazyLoadImage) {
                     lazyLoadImageRender(previewElement);
                 }
+                // 绑定数学公式选中高亮监听
+                (0,mathSelection/* bindMathSelectionListener */.I)(previewElement);
+                // 绑定复制事件，处理数学公式源码复制
+                previewElement.addEventListener("copy", function (event) {
+                    var selection = window.getSelection();
+                    if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+                        return;
+                    }
+                    var range = selection.getRangeAt(0);
+                    // 检查选区是否只包含单个数学公式
+                    var mathElement = (0,hasClosest/* hasClosestByClassName */.fb)(range.startContainer, "language-math");
+                    var mathEndElement = (0,hasClosest/* hasClosestByClassName */.fb)(range.endContainer, "language-math");
+                    // 如果选区的起点和终点都在同一个数学公式元素内，复制源码
+                    if (mathElement &&
+                        mathEndElement &&
+                        mathElement.isSameNode(mathEndElement)) {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        var mathSource = mathElement.getAttribute("data-math") || range.toString();
+                        event.clipboardData.setData("text/plain", mathSource);
+                        event.clipboardData.setData("text/html", "");
+                        return;
+                    }
+                    // 处理包含多个公式的混合内容
+                    var fragment = range.cloneContents();
+                    var mathElements = fragment.querySelectorAll(".language-math");
+                    if (mathElements.length > 0) {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        // 创建临时容器来处理内容
+                        var tempDiv = document.createElement("div");
+                        tempDiv.appendChild(fragment);
+                        // 替换所有数学公式为源码
+                        tempDiv
+                            .querySelectorAll(".language-math")
+                            .forEach(function (mathEl) {
+                            var mathSource = mathEl.getAttribute("data-math");
+                            console.log(mathEl.tagName, "mathEl");
+                            if (mathSource) {
+                                if (mathEl.tagName === "SPAN") {
+                                    var textNode = document.createTextNode("$".concat(mathSource, "$"));
+                                    mathEl.parentNode.replaceChild(textNode, mathEl);
+                                }
+                                else {
+                                    var textNode = document.createTextNode("$$".concat(mathSource, "$$"));
+                                    mathEl.parentNode.replaceChild(textNode, mathEl);
+                                }
+                            }
+                        });
+                        // 获取纯文本内容
+                        var plainText = tempDiv.textContent || tempDiv.innerText || "";
+                        event.clipboardData.setData("text/plain", plainText);
+                        event.clipboardData.setData("text/html", "");
+                    }
+                });
                 previewElement.addEventListener("click", function (event) {
                     var _a, _b;
                     var spanElement = (0,hasClosest/* hasClosestByMatchTag */.lG)(event.target, "SPAN");