@pixui-dev/pixui-richtext-helper 0.2.1 → 0.2.2

package/dist/richtext/RichTextCore.d.ts

@@ -18,6 +18,8 @@ export interface LinkClickParams {
 export declare class RichTextCore {
     private static linkNodes;
     private static hrefIdCnt;
+    /** 所有链接节点统一的 class 名 */
+    private static readonly LINK_NODE_CLASS;
     /**
      * 富文本转换为 PixUI innerHTML 兼容格式
      * @param str 原始富文本 HTML

package/dist/richtext/RichTextCore.js

@@ -141,21 +141,30 @@ var RichTextCore = /** @class */ (function () {
      * 绑定链接点击事件
      */
     RichTextCore.bindLinkClickEvents = function (linkClickHandler) {
-        RichTextCore.linkNodes.forEach(function (nodeInfo) {
-            var element = document.getElementById(nodeInfo.id);
-            if (element) {
-                element.onclick = function (e) {
+        // 直接查询统一的 class
+        setTimeout(function () {
+            var elements = Array.from(document.querySelectorAll(".".concat(RichTextCore.LINK_NODE_CLASS)));
+            elements.forEach(function (el) {
+                var hrefEncoded = el.getAttribute("data-link-href") || "";
+                var href = decodeURIComponent(hrefEncoded);
+                var typeStr = el.getAttribute("data-link-type");
+                var type = typeStr === LinkNodeType.IMG ? LinkNodeType.IMG : LinkNodeType.DIV;
+                // 避免重复绑定
+                if (el._pixui_link_bound)
+                    return;
+                el._pixui_link_bound = true;
+                el.onclick = function (e) {
                     e.stopPropagation();
                     e.preventDefault();
                     linkClickHandler({
-                        type: nodeInfo.type,
-                        href: nodeInfo.href,
-                        id: nodeInfo.id,
+                        type: type,
+                        href: href,
+                        id: el.id,
                     });
                     return false;
                 };
-            }
-        });
+            });
+        }, 100);
     };
     /*****************************************************
      *  内部流程函数
@@ -365,7 +374,7 @@ var RichTextCore = /** @class */ (function () {
                     "width: 100%",
                     "flex-direction: row",
                     "display: flex"], false)), "\" data-list-item=\"true\">") +
-                    "<text style=\"".concat(mergeStyles("flex-shrink: 0", "width: 100%", "line-height: 1", "display: flex", "flex-direction: row"), "\">") +
+                    "<text style=\"".concat(mergeStyles("flex-shrink: 0", "width: 100%", "display: flex", "flex-direction: row"), "\">") +
                     "<div style=\"".concat(mergeStyles("word-break: break-word", "flex-shrink: 0", "padding-right: 0.5em"), "\">").concat(it.marker, "</div>") +
                     "<div style=\"".concat(mergeStyles("word-break: break-word", "flex-shrink: 0", "flex: 1"), "\">").concat(it.textContent, "</div>") +
                     "</text></div>");
@@ -407,10 +416,11 @@ var RichTextCore = /** @class */ (function () {
                     mergedStyles.push(innerStyle);
             });
             var finalStyle = mergeStyles.apply(void 0, __spreadArray([originalStyle], mergedStyles, false));
+            var encodedHref = href ? encodeURIComponent(href) : "";
             if (href) {
                 self.linkNodes.push({ type: LinkNodeType.DIV, href: href, id: id });
             }
-            $(this).replaceWith("<div style=\"".concat(finalStyle, "\" id=\"").concat(id, "\" class=\"PA_RichTextHref_ATag\">").concat(textContent, "</div>"));
+            $(this).replaceWith("<div style=\"".concat(finalStyle, "\" id=\"").concat(id, "\" class=\"").concat(RichTextCore.LINK_NODE_CLASS, " PA_RichTextHref_ATag\" data-link-type=\"div\" data-link-href=\"").concat(encodedHref, "\">").concat(textContent, "</div>"));
         });
     };
     /** 用 text 标签包裹纯文本节点 */
@@ -489,11 +499,16 @@ var RichTextCore = /** @class */ (function () {
             if (href) {
                 self.linkNodes.push({ type: LinkNodeType.IMG, href: href, id: id });
             }
+            // 将链接信息以转义形式保存在 data- 属性中，避免默认跳转
+            var encodedHref = href ? encodeURIComponent(href) : "";
+            $(this).attr("data-link-type", "img");
+            $(this).attr("data-link-href", encodedHref);
             $(this).attr("href", "");
             var prevClass = $(this).attr("class") || "";
             var newClasses = new Set(prevClass.split(/\s+/).filter(Boolean));
             newClasses.add("PA_RichTextHref_ImgTag"); // 超链接专用标记（保持原有逻辑）
             newClasses.add("PA_RichTextImgTag"); // 富文本图片通用标记
+            newClasses.add(RichTextCore.LINK_NODE_CLASS); // 统一链接标记
             $(this).attr("class", Array.from(newClasses).join(" "));
         });
     };
@@ -578,7 +593,7 @@ var RichTextCore = /** @class */ (function () {
                     }
                 }
                 // 保证外层tag的style不合并子div的style
-                $(node).replaceWith("<".concat(tag, " style=\"").concat(mergeStyles(tagStyle, "flex-direction: row"), "\"").concat(idAttr).concat(customAttrs, "><text style=\"").concat(mergeStyles("flex-shrink: 0", "width: 100%", "line-height: 1"), "\">").concat(tagHtml, "</text></").concat(tag, ">"));
+                $(node).replaceWith("<".concat(tag, " style=\"").concat(mergeStyles(tagStyle, "flex-direction: row"), "\"").concat(idAttr).concat(customAttrs, "><text style=\"").concat(mergeStyles("flex-shrink: 0", "width: 100%"), "\">").concat(tagHtml, "</text></").concat(tag, ">"));
             }
         });
     };
@@ -674,6 +689,8 @@ var RichTextCore = /** @class */ (function () {
     // 存储需要绑定点击事件的节点
     RichTextCore.linkNodes = [];
     RichTextCore.hrefIdCnt = 0;
+    /** 所有链接节点统一的 class 名 */
+    RichTextCore.LINK_NODE_CLASS = "PA_RichTextLinkNode";
     return RichTextCore;
 }());
 exports.RichTextCore = RichTextCore;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pixui-dev/pixui-richtext-helper",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "description": "pixui richtext helper",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -11,7 +11,7 @@
     ],
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "build": "tsc"
+        "build": "rm -rf dist && tsc"
     },
     "publishConfig": {
         "access": "public"

package/readme.md

@@ -79,3 +79,7 @@ componentDidMount() { // 在节点渲染后绑定点击事件
 
 0.2.1
 1. 组件代码结构调整
+
+0.2.2
+1. 去掉某些节点默认的lineheight:1
+2. 超链接改为直接在节点中记录数据，方便预加载流程在不同的环境调用convert和bind