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

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 标签包裹纯文本节点 */
@@ -432,6 +442,9 @@ var RichTextCore = /** @class */ (function () {
                 var listParent = $(this).closest("[data-list-item='true']");
                 if (listParent.length > 0)
                     return;
+                var brParent = $(this).closest(".pixui-richtext-br-placeholder");
+                if (brParent.length > 0)
+                    return;
                 if (this.type === "text") {
                     var text = this.data.trim();
                     if (text.length > 0) {
@@ -489,11 +502,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 +596,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, ">"));
             }
         });
     };
@@ -606,15 +624,29 @@ var RichTextCore = /** @class */ (function () {
     RichTextCore.adjustLineHeightAndLetterSpacing = function ($, config) {
         $("text").each(function () {
             var $text = $(this);
-            var maxLineHeight = 0;
+            var maxLineHeightVal = 0;
+            var lineHeightUnit = "";
             $text.children("div").each(function () {
-                var lh = parseInt($(this).css("line-height") || "1");
-                maxLineHeight = Math.max(maxLineHeight, lh);
+                var lhRaw = ($(this).css("line-height") || "").trim();
+                var match = lhRaw.match(/^([0-9.]+)([a-z%]*)$/i);
+                if (match) {
+                    var val = parseFloat(match[1]);
+                    if (!isNaN(val)) {
+                        maxLineHeightVal = Math.max(maxLineHeightVal, val);
+                    }
+                    if (!lineHeightUnit && match[2])
+                        lineHeightUnit = match[2];
+                }
+                if (lhRaw) {
+                    var styleObj = parseStyleString($(this).attr("style") || "");
+                    delete styleObj["line-height"];
+                    $(this).attr("style", serializeStyleObject(styleObj));
+                }
             });
             var scale = (config === null || config === void 0 ? void 0 : config.lineHeightScale) || 1;
-            if (maxLineHeight > 0) {
+            if (maxLineHeightVal > 0) {
                 var currentStyle = $text.attr("style") || "";
-                $text.attr("style", mergeStyles(currentStyle, "line-height: ".concat(maxLineHeight * scale)));
+                $text.attr("style", mergeStyles(currentStyle, "line-height: ".concat(maxLineHeightVal * scale).concat(lineHeightUnit)));
             }
         });
         $("text").each(function () {
@@ -674,6 +706,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.3",
     "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

@@ -27,6 +27,9 @@ componentDidMount() { // 在节点渲染后绑定点击事件
 }
 ```
 
+## 注意
+组件在转换长富文本（节点数量较多，参考节点数量大于100）的时候可能会比较慢阻塞活动显示，如果需要转换很长的富文本，建议询问管理端是否可以提供预转换服务，或者活动在前置虚拟机中预先转换以后保存到本地，活动中直接使用转换以后的结果。
+
 ### 自定义节点样式
 
 `convertRichTextToPixuiStyle` 在转换过程中会为特定节点增加 class 或 data-attribute，方便业务侧按需覆盖样式：
@@ -79,3 +82,10 @@ componentDidMount() { // 在节点渲染后绑定点击事件
 
 0.2.1
 1. 组件代码结构调整
+
+0.2.2
+1. 去掉某些节点默认的lineheight:1
+2. 超链接改为直接在节点中记录数据，方便预加载流程在不同的环境调用convert和bind
+
+0.2.3
+1. line-height 的单位支持浮点数