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

package/dist/RichText.d.ts

@@ -1,4 +1,4 @@
-import { RichText_Refactor, LinkNodeType, LinkClickParams } from "./richtext/RichText_Refactor";
+import { RichTextCore, LinkNodeType, LinkClickParams } from "./richtext/RichTextCore";
 /**
  * 对外暴露的 RichText 组件。
  * 保持旧版使用方式不变，内部委托给 RichText_Refactor 实现。
@@ -8,14 +8,14 @@ export declare const RichText: {
     LinkNodeType: typeof LinkNodeType;
     /**
      * 将富文本转换为 PixUI innerHTML 兼容格式
-     * @see RichText_Refactor.convertRichTextToPixuiStyle
+     * @see RichTextCore.convertRichTextToPixuiStyle
      */
-    convertRichTextToPixuiStyle: typeof RichText_Refactor.convertRichTextToPixuiStyle;
+    convertRichTextToPixuiStyle: typeof RichTextCore.convertRichTextToPixuiStyle;
     /**
      * 绑定富文本中的链接点击事件
-     * @see RichText_Refactor.bindLinkClickEvents
+     * @see RichTextCore.bindLinkClickEvents
      */
-    bindLinkClickEvents: typeof RichText_Refactor.bindLinkClickEvents;
+    bindLinkClickEvents: typeof RichTextCore.bindLinkClickEvents;
 };
 export type { LinkClickParams };
 export { LinkNodeType };

package/dist/RichText.js

@@ -1,24 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkNodeType = exports.RichText = void 0;
-var RichText_Refactor_1 = require("./richtext/RichText_Refactor");
-Object.defineProperty(exports, "LinkNodeType", { enumerable: true, get: function () { return RichText_Refactor_1.LinkNodeType; } });
+var RichTextCore_1 = require("./richtext/RichTextCore");
+Object.defineProperty(exports, "LinkNodeType", { enumerable: true, get: function () { return RichTextCore_1.LinkNodeType; } });
 /**
  * 对外暴露的 RichText 组件。
  * 保持旧版使用方式不变，内部委托给 RichText_Refactor 实现。
  */
 exports.RichText = {
     /** 链接节点类型枚举 */
-    LinkNodeType: RichText_Refactor_1.LinkNodeType,
+    LinkNodeType: RichTextCore_1.LinkNodeType,
     /**
      * 将富文本转换为 PixUI innerHTML 兼容格式
-     * @see RichText_Refactor.convertRichTextToPixuiStyle
+     * @see RichTextCore.convertRichTextToPixuiStyle
      */
-    convertRichTextToPixuiStyle: RichText_Refactor_1.RichText_Refactor.convertRichTextToPixuiStyle,
+    convertRichTextToPixuiStyle: RichTextCore_1.RichTextCore.convertRichTextToPixuiStyle,
     /**
      * 绑定富文本中的链接点击事件
-     * @see RichText_Refactor.bindLinkClickEvents
+     * @see RichTextCore.bindLinkClickEvents
      */
-    bindLinkClickEvents: RichText_Refactor_1.RichText_Refactor.bindLinkClickEvents,
+    bindLinkClickEvents: RichTextCore_1.RichTextCore.bindLinkClickEvents,
 };
 exports.default = exports.RichText;

package/dist/richtext/{RichText_Refactor.d.ts → RichTextCore.d.ts}

@@ -13,11 +13,13 @@ export interface LinkClickParams {
     id: string;
 }
 /*****************************************************
- *  RichText_Refactor 主类
+ *  RichTextCore 主类
  *****************************************************/
-export declare class RichText_Refactor {
+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/{RichText_Refactor.js → RichTextCore.js}

@@ -42,7 +42,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichText_Refactor = exports.LinkNodeType = void 0;
+exports.RichTextCore = exports.LinkNodeType = void 0;
 var cheerio = __importStar(require("cheerio"));
 /*****************************************************
  *  类型、枚举定义
@@ -107,31 +107,31 @@ var mergeStyles = function () {
     return serializeStyleObject(mergedStyleObj);
 };
 /*****************************************************
- *  RichText_Refactor 主类
+ *  RichTextCore 主类
  *****************************************************/
-var RichText_Refactor = /** @class */ (function () {
-    function RichText_Refactor() {
+var RichTextCore = /** @class */ (function () {
+    function RichTextCore() {
     }
     /**
      * 富文本转换为 PixUI innerHTML 兼容格式
      * @param str 原始富文本 HTML
      * @param config 可选配置
      */
-    RichText_Refactor.convertRichTextToPixuiStyle = function (str, config) {
+    RichTextCore.convertRichTextToPixuiStyle = function (str, config) {
         // 重置全局状态
-        RichText_Refactor.linkNodes = [];
-        RichText_Refactor.hrefIdCnt = 0;
+        RichTextCore.linkNodes = [];
+        RichTextCore.hrefIdCnt = 0;
         var $1 = cheerio.load(str, null, false);
         //检查html，如果有text节点，说明是转换过的，直接返回
         if ($1("text").length > 0) {
             return str;
         }
         // ---------- 第 1 步：段落分割（基础实现：根节点切分） ----------
-        var segments = RichText_Refactor.splitIntoSegments($1);
+        var segments = RichTextCore.splitIntoSegments($1);
         // ---------- 第 2/3 步：遍历 + 展平 ----------
         // 为保证兼容性，我们直接对 HTML 进行逐段处理并在内部构建 PixUI 结构。
         // 这样既保持分段概念，又可复用旧逻辑的稳定性。
-        var processedSegments = segments.map(function (seg) { return RichText_Refactor.processSegment(seg, config); });
+        var processedSegments = segments.map(function (seg) { return RichTextCore.processSegment(seg, config); });
         // ---------- 第 4 步：拼装 ----------
         var Result = processedSegments.join("");
         // console.log(Result);
@@ -140,22 +140,31 @@ var RichText_Refactor = /** @class */ (function () {
     /**
      * 绑定链接点击事件
      */
-    RichText_Refactor.bindLinkClickEvents = function (linkClickHandler) {
-        RichText_Refactor.linkNodes.forEach(function (nodeInfo) {
-            var element = document.getElementById(nodeInfo.id);
-            if (element) {
-                element.onclick = function (e) {
+    RichTextCore.bindLinkClickEvents = function (linkClickHandler) {
+        // 直接查询统一的 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);
     };
     /*****************************************************
      *  内部流程函数
@@ -164,7 +173,7 @@ var RichText_Refactor = /** @class */ (function () {
      * 将 HTML 切分为基础段落片段。
      * 简易实现：以顶级节点为粒度切分，再根据最外层列表节点进行分割。
      */
-    RichText_Refactor.splitIntoSegments = function ($) {
+    RichTextCore.splitIntoSegments = function ($) {
         var segments = [];
         // 如果有 body，取其直接子节点；否则取根节点下的直接子节点
         var roots = $("body").length > 0 ? $("body").children() : $.root().children();
@@ -211,7 +220,7 @@ var RichText_Refactor = /** @class */ (function () {
     /**
      * 处理单个段落片段，返回转换后的片段 HTML
      */
-    RichText_Refactor.processSegment = function (segmentHtml, config) {
+    RichTextCore.processSegment = function (segmentHtml, config) {
         var $ = cheerio.load(segmentHtml, null, false);
         // 按旧实现顺序进行处理，但重构为独立函数划分
         this.preprocess($);
@@ -244,7 +253,7 @@ var RichText_Refactor = /** @class */ (function () {
     // ------------------------------
     // 各独立处理步骤实现
     // ------------------------------
-    RichText_Refactor.preprocess = function ($) {
+    RichTextCore.preprocess = function ($) {
         var _loop_1 = function (i) {
             var indent = "ql-indent-".concat(i);
             var extStyle = "padding-left: ".concat(i * 2, "em");
@@ -282,7 +291,7 @@ var RichText_Refactor = /** @class */ (function () {
             }
         });
     };
-    RichText_Refactor.fixImgSizeUnit = function ($) {
+    RichTextCore.fixImgSizeUnit = function ($) {
         $("img").each(function () {
             var width = $(this).attr("width");
             var height = $(this).attr("height");
@@ -295,7 +304,7 @@ var RichText_Refactor = /** @class */ (function () {
         });
     };
     /** 列表处理（将 ol/ul/li 替换为 div 结构） */
-    RichText_Refactor.handleLists = function ($, lineHeightScale) {
+    RichTextCore.handleLists = function ($, lineHeightScale) {
         if (lineHeightScale === void 0) { lineHeightScale = 1; }
         var topLevelLists = [];
         var collectListItems = function ($container, currentLevel) {
@@ -365,7 +374,7 @@ var RichText_Refactor = /** @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>");
@@ -376,13 +385,13 @@ var RichText_Refactor = /** @class */ (function () {
         });
     };
     /** 将连续 <br> 替换为透明占位文字，确保 PixUI 换行 */
-    RichText_Refactor.replaceBrWithPlaceholder = function ($) {
+    RichTextCore.replaceBrWithPlaceholder = function ($) {
         $("br").each(function () {
             $(this).replaceWith("<div style=\"".concat(mergeStyles("color: transparent", "flex-shrink: 0", "font-size: 20px"), "\" class='pixui-richtext-br-placeholder'>1</div>"));
         });
     };
     /** 处理 <a> 标签：转为 div、保留样式、记录链接 */
-    RichText_Refactor.handleAnchorTag = function ($) {
+    RichTextCore.handleAnchorTag = function ($) {
         var self = this;
         $("a").each(function () {
             var id = "PA_RichTextHrefId_".concat(self.hrefIdCnt++);
@@ -407,14 +416,15 @@ var RichText_Refactor = /** @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 标签包裹纯文本节点 */
-    RichText_Refactor.wrapTextNodes = function ($) {
+    RichTextCore.wrapTextNodes = function ($) {
         var self = this;
         $("*").each(function () {
             var nodeId = $(this).attr("id") || "";
@@ -442,7 +452,7 @@ var RichText_Refactor = /** @class */ (function () {
         });
     };
     /** strong / em / u / s / span 等标签替换成 text */
-    RichText_Refactor.replaceStyleTags = function ($) {
+    RichTextCore.replaceStyleTags = function ($) {
         var tagToStyle = {
             strong: "font-weight: bold",
             em: "font-style: italic",
@@ -472,7 +482,7 @@ var RichText_Refactor = /** @class */ (function () {
         }
     };
     /** p → div */
-    RichText_Refactor.replacePTag = function ($) {
+    RichTextCore.replacePTag = function ($) {
         $("p").each(function () {
             var html = $(this).html();
             var style = $(this).attr("style") || "";
@@ -480,7 +490,7 @@ var RichText_Refactor = /** @class */ (function () {
         });
     };
     /** img 的 href 转移处理 & 记录链接 */
-    RichText_Refactor.handleImgHref = function ($) {
+    RichTextCore.handleImgHref = function ($) {
         var self = this;
         $("img").each(function () {
             var id = "PA_RichTextHrefId_".concat(self.hrefIdCnt++);
@@ -489,16 +499,21 @@ var RichText_Refactor = /** @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(" "));
         });
     };
     /** 给指定标签补 flex-shrink:0 */
-    RichText_Refactor.addFlexShrink = function ($) {
+    RichTextCore.addFlexShrink = function ($) {
         ["h1", "h2", "h3", "h4", "h5", "h6", "a", "img", "div"].forEach(function (tag) {
             $(tag).each(function () {
                 var isListItem = $(this).attr("data-list-item") === "true";
@@ -511,7 +526,7 @@ var RichText_Refactor = /** @class */ (function () {
         });
     };
     /** 把嵌套的 text 展平 */
-    RichText_Refactor.flattenNestedText = function ($) {
+    RichTextCore.flattenNestedText = function ($) {
         while ($("text > text").length > 0) {
             $("text").each(function () {
                 var $this = $(this);
@@ -529,7 +544,7 @@ var RichText_Refactor = /** @class */ (function () {
         }
     };
     /** 将同一行的 text 节点转为 div 并外包一层 text */
-    RichText_Refactor.convertSiblingTextToDiv = function ($) {
+    RichTextCore.convertSiblingTextToDiv = function ($) {
         var nodeArr = [];
         ["h1", "h2", "h3", "h4", "h5", "h6", "div"].forEach(function (tag) {
             $(tag).each(function () {
@@ -578,12 +593,12 @@ var RichText_Refactor = /** @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, ">"));
             }
         });
     };
     /** text-indent 首行缩进处理 */
-    RichText_Refactor.handleTextIndent = function ($) {
+    RichTextCore.handleTextIndent = function ($) {
         $("*").each(function () {
             var textIndent = $(this).css("text-indent");
             if (textIndent) {
@@ -603,7 +618,7 @@ var RichText_Refactor = /** @class */ (function () {
         });
     };
     /** line-height / letter-spacing 调整 */
-    RichText_Refactor.adjustLineHeightAndLetterSpacing = function ($, config) {
+    RichTextCore.adjustLineHeightAndLetterSpacing = function ($, config) {
         $("text").each(function () {
             var $text = $(this);
             var maxLineHeight = 0;
@@ -632,7 +647,7 @@ var RichText_Refactor = /** @class */ (function () {
         });
     };
     /** 把 div 的 text-align 转移到子 text 上 */
-    RichText_Refactor.transferTextAlign = function ($) {
+    RichTextCore.transferTextAlign = function ($) {
         $("div").each(function () {
             var ta = $(this).css("text-align") || "";
             if (ta) {
@@ -651,7 +666,7 @@ var RichText_Refactor = /** @class */ (function () {
         });
     };
     /** 删除空 text 节点 */
-    RichText_Refactor.removeEmptyText = function ($) {
+    RichTextCore.removeEmptyText = function ($) {
         $("text").each(function () {
             var t = $(this).html() || "";
             if (t.trim() === "")
@@ -659,7 +674,7 @@ var RichText_Refactor = /** @class */ (function () {
         });
     };
     /** 补默认 heading 字体大小 */
-    RichText_Refactor.fixHeadingFontSize = function ($) {
+    RichTextCore.fixHeadingFontSize = function ($) {
         var hRem = ["2em", "1.5em", "1.17em", "1em", "0.83em", "0.67em"];
         ["h1", "h2", "h3", "h4", "h5", "h6"].forEach(function (tag) {
             $(tag).each(function () {
@@ -672,8 +687,10 @@ var RichText_Refactor = /** @class */ (function () {
         });
     };
     // 存储需要绑定点击事件的节点
-    RichText_Refactor.linkNodes = [];
-    RichText_Refactor.hrefIdCnt = 0;
-    return RichText_Refactor;
+    RichTextCore.linkNodes = [];
+    RichTextCore.hrefIdCnt = 0;
+    /** 所有链接节点统一的 class 名 */
+    RichTextCore.LINK_NODE_CLASS = "PA_RichTextLinkNode";
+    return RichTextCore;
 }());
-exports.RichText_Refactor = RichText_Refactor;
+exports.RichTextCore = RichTextCore;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pixui-dev/pixui-richtext-helper",
-    "version": "0.2.0",
+    "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

@@ -76,3 +76,10 @@ componentDidMount() { // 在节点渲染后绑定点击事件
 2. 图片节点统一补充PA_RichTextImgTag的class
 3. 将列表的margin-left统一修改为padding-left
 4. 修复某些情况下多余的span标签
+
+0.2.1
+1. 组件代码结构调整
+
+0.2.2
+1. 去掉某些节点默认的lineheight:1
+2. 超链接改为直接在节点中记录数据，方便预加载流程在不同的环境调用convert和bind