@pixui-dev/pixui-richtext-helper 0.2.12-dev.1 → 0.2.12

package/dist/RichTextCore.d.ts

@@ -12,6 +12,20 @@ export interface LinkClickParams {
     href: string;
     id: string;
 }
+/** 单个阶段耗时 */
+export interface ConvertDebugPhase {
+    name: string;
+    ms: number;
+}
+/** 转换调试统计 */
+export interface ConvertDebugStats {
+    totalMs: number;
+    highLevel: ConvertDebugPhase[];
+    detail: ConvertDebugPhase[];
+    segmentsCount: number;
+    version: string;
+    timestamp: number;
+}
 /*****************************************************
  *  RichTextCore 主类
  *****************************************************/
@@ -20,6 +34,8 @@ export declare class RichTextCore {
     private static hrefIdCnt;
     /** 所有链接节点统一的 class 名 */
     private static readonly LINK_NODE_CLASS;
+    /** 上一次转换的调试统计（仅在 debug 模式下填充） */
+    static lastDebugStats: ConvertDebugStats | undefined;
     /**
      * 富文本转换为 PixUI innerHTML 兼容格式
      * @param str 原始富文本 HTML
@@ -32,6 +48,8 @@ export declare class RichTextCore {
         lineHeightScale?: number;
         convertPxToEm?: boolean;
         addCosUrlImageMogr2_w?: number;
+        debug?: boolean;
+        onDebugStats?: (stats: ConvertDebugStats) => void;
     }): string;
     /**
      * 绑定链接点击事件
@@ -65,12 +83,17 @@ export declare class RichTextCore {
     private static handleLists;
     /** 将连续 <br> 替换为透明占位文字，确保 PixUI 换行 */
     private static replaceBrWithPlaceholder;
-    /** 处理 <a> 标签：转为 div、保留样式、记录链接 */
+    /** 处理 <a> 标签：文本链接直接转为 key，图片链接直接下放到 img 上 */
     private static handleAnchorTag;
     /** 用 text 标签包裹纯文本节点 */
     private static wrapTextNodes;
     /** strong / em / u / s / span 等标签替换成 text */
     private static replaceStyleTags;
+    /**
+     * 规范化：将列表项文本列中的裸文本片段包裹为 <key>
+     * 作用域限定在三列布局生成后的列表行：div[data-list-item="true"] > text
+     */
+    private static normalizeListItemPlainTextToKey;
     /** p → div */
     private static replacePTag;
     /** img 的 href 转移处理 & 记录链接 */
@@ -87,7 +110,7 @@ export declare class RichTextCore {
     private static adjustLineHeightAndLetterSpacing;
     /** 把 div 的 text-align 转移到子 text 上 */
     private static transferTextAlign;
-    /** 删除空 text 节点 */
+    /** 删除空 text 节点；并在安全场景下清理空 key 节点（不影响占位/换行） */
     private static removeEmptyText;
     /** 补默认 heading 字体大小 */
     private static fixHeadingFontSize;

package/dist/RichTextCore.js

@@ -207,29 +207,85 @@ var RichTextCore = /** @class */ (function () {
      * @param config.addCosUrlImageMogr2_w 添加cos url图片的mogr2_w参数,如果是cos的图片，可以使用这个配置设置图片宽度最大值。组件会增加参数为 xxx.jpg?imageMogr2/thumbnail/<width>x的参数。参数值取min(img节点样式宽度,addCosUrlImageMogr2_w)
      */
     RichTextCore.convertRichTextToPixuiStyle = function (str, config) {
+        var debug = !!(config === null || config === void 0 ? void 0 : config.debug);
+        var now = function () { return Date.now(); };
+        var highLevelPhases = [];
+        var detailTotals = {};
+        var measure = function (name, fn) {
+            if (!debug)
+                return fn();
+            var s = now();
+            var r = fn();
+            var e = now();
+            highLevelPhases.push({ name: name, ms: e - s });
+            return r;
+        };
         // 重置全局状态
         RichTextCore.linkNodes = [];
         RichTextCore.hrefIdCnt = 0;
         // href 属性先统一做 URI 编码
-        var preEncodedStr = str.replace(/href=(['"])(.*?)\1/g, function (_m, quote, hrefVal) {
-            return "href=".concat(quote).concat(encodeURIComponent(hrefVal)).concat(quote);
-        });
-        var $1 = cheerio.load(preEncodedStr, null, false);
+        var preEncodedStr = measure("preEncodeHref", function () { return str.replace(/href=(["'])(.*?)\1/g, function (_m, quote, hrefVal) { return "href=".concat(quote).concat(encodeURIComponent(hrefVal)).concat(quote); }); });
+        var $1 = measure("cheerioLoad", function () { return cheerio.load(preEncodedStr, null, false); });
         //检查html，如果有text节点，说明是转换过的，直接返回
         if ($1("text").length > 0) {
+            if (debug) {
+                var stats = {
+                    totalMs: highLevelPhases.reduce(function (a, b) { return a + b.ms; }, 0),
+                    highLevel: highLevelPhases,
+                    detail: Object.entries(detailTotals).map(function (_a) {
+                        var name = _a[0], ms = _a[1];
+                        return ({ name: name, ms: ms });
+                    }),
+                    segmentsCount: 0,
+                    version: version_1.LIB_VERSION,
+                    timestamp: now(),
+                };
+                RichTextCore.lastDebugStats = stats;
+                (config === null || config === void 0 ? void 0 : config.onDebugStats) && config.onDebugStats(stats);
+            }
             return str;
         }
         var oriNodeCount = $1("*").length;
         console.log("pixui-richHelper转换---- 版本：" + " " + version_1.LIB_VERSION + " " + " 原始节点数：" + oriNodeCount);
         // ---------- 第 1 步：段落分割（基础实现：根节点切分） ----------
-        var segments = RichTextCore.splitIntoSegments($1);
+        var segments = measure("splitIntoSegments", function () { return RichTextCore.splitIntoSegments($1); });
         // ---------- 第 2/3 步：遍历 + 展平 ----------
         // 为保证兼容性，我们直接对 HTML 进行逐段处理并在内部构建 PixUI 结构。
         // 这样既保持分段概念，又可复用旧逻辑的稳定性。
-        var processedSegments = segments.map(function (seg) { return RichTextCore.processSegment(seg, config); });
+        var processedSegments = measure("processSegments", function () {
+            return segments.map(function (seg) {
+                return RichTextCore.processSegment(seg, {
+                    lineHeightScale: config === null || config === void 0 ? void 0 : config.lineHeightScale,
+                    convertPxToEm: config === null || config === void 0 ? void 0 : config.convertPxToEm,
+                    addCosUrlImageMogr2_w: config === null || config === void 0 ? void 0 : config.addCosUrlImageMogr2_w,
+                    debug: debug,
+                    debugTotals: detailTotals,
+                });
+            });
+        });
         // ---------- 第 4 步：拼装 ----------
-        var Result = processedSegments.join("");
-        console.log(Result);
+        var Result = measure("joinSegments", function () { return processedSegments.join(""); });
+        if (debug)
+            console.log(Result);
+        if (debug) {
+            var detailList = Object.entries(detailTotals)
+                .map(function (_a) {
+                var name = _a[0], ms = _a[1];
+                return ({ name: name, ms: ms });
+            })
+                .sort(function (a, b) { return b.ms - a.ms; });
+            var totalMs = highLevelPhases.reduce(function (a, b) { return a + b.ms; }, 0);
+            var stats = {
+                totalMs: totalMs,
+                highLevel: highLevelPhases,
+                detail: detailList,
+                segmentsCount: segments.length,
+                version: version_1.LIB_VERSION,
+                timestamp: now(),
+            };
+            RichTextCore.lastDebugStats = stats;
+            (config === null || config === void 0 ? void 0 : config.onDebugStats) && config.onDebugStats(stats);
+        }
         return Result;
     };
     /**
@@ -382,39 +438,73 @@ var RichTextCore = /** @class */ (function () {
      * 处理单个段落片段，返回转换后的片段 HTML
      */
     RichTextCore.processSegment = function (segmentHtml, config) {
+        var _this = this;
+        var debug = !!(config === null || config === void 0 ? void 0 : config.debug);
+        var totals = config === null || config === void 0 ? void 0 : config.debugTotals;
+        var now = function () { return Date.now(); };
+        var time = function (name, fn) {
+            if (!debug)
+                return fn();
+            var s = now();
+            fn();
+            var e = now();
+            if (totals)
+                totals[name] = (totals[name] || 0) + (e - s);
+        };
         var $ = cheerio.load(segmentHtml, null, false);
-        // 按旧实现顺序进行处理，但重构为独立函数划分
-        this.preprocess($);
-        this.fixImgSizeUnit($);
-        this.handleCosImageMogr2($, config);
-        this.consolidateImgSizeStyle($);
-        this.handleLists($, (config === null || config === void 0 ? void 0 : config.lineHeightScale) || 1);
-        this.replaceBrWithPlaceholder($);
-        this.handleAnchorTag($);
-        this.wrapTextNodes($);
-        this.replaceStyleTags($);
-        this.replacePTag($);
-        this.handleImgHref($);
-        this.addFlexShrink($);
-        this.flattenNestedText($);
-        this.convertSiblingTextToDiv($);
-        this.handleTextIndent($);
-        this.adjustLineHeightAndLetterSpacing($, config);
-        this.transferTextAlign($);
-        this.removeEmptyText($);
+        // 预处理：data-list → class、class → style、标题后补 <br>、margin→padding 合并
+        time("preprocess", function () { return _this.preprocess($); });
+        // 规范图片尺寸单位：img 的 width/height 数字补 px
+        time("fixImgSizeUnit", function () { return _this.fixImgSizeUnit($); });
+        // COS 图片缩略参数：按最小可用宽度收敛/追加 imageMogr2/thumbnail/<w>x
+        time("handleCosImageMogr2", function () { return _this.handleCosImageMogr2($, config); });
+        // 合并img的width，height属性到 style，属性存在以 style 优先，移除 width/height 属性
+        time("consolidateImgSizeStyle", function () { return _this.consolidateImgSizeStyle($); });
+        // 列表规范化：ol/ul/li 转三列布局（缩进/标号/文本），保留缩进与方向。节点结构：段落div(缩进key节点、标号key节点、text节点区域)
+        time("handleLists", function () { return _this.handleLists($, (config === null || config === void 0 ? void 0 : config.lineHeightScale) || 1); });
+        // 换行处理：<br> → 透明占位 div，确保 PixUI 内正确换行
+        time("replaceBrWithPlaceholder", function () { return _this.replaceBrWithPlaceholder($); });
+        // 超链接：<a> → 可点击的 div，汇聚子样式并记录 data-link-*
+        time("handleAnchorTag", function () { return _this.handleAnchorTag($); });
+        // 文本包装：将普通文本包入 <text>（跳过列表/链接/换行占位）
+        time("wrapTextNodes", function () { return _this.wrapTextNodes($); });
+        // 样式标签：strong/em/u/s/span → 文本节点（列表文本列下改为 <key>）
+        time("replaceStyleTags", function () { return _this.replaceStyleTags($); });
+        // 列表文本列规范化：裸文本统一包裹为 <key>，清理空白
+        time("normalizeListItemPlainTextToKey", function () { return _this.normalizeListItemPlainTextToKey($); });
+        // 段落：<p> → <div>，补 flex-shrink 与 width:100%
+        time("replacePTag", function () { return _this.replacePTag($); });
+        // 图片链接：img 的 href 转移至 data-link-href，并登记点击节点
+        time("handleImgHref", function () { return _this.handleImgHref($); });
+        // 防收缩：常见块级元素补 flex-shrink:0（不作用于列表项）
+        time("addFlexShrink", function () { return _this.addFlexShrink($); });
+        // 扁平化：合并 text 样式并去掉嵌套的父 <text>
+        time("flattenNestedText", function () { return _this.flattenNestedText($); });
+        // 同级文本：拆分为 <key> 片段并统一包入父 <text>
+        time("convertSiblingTextToDiv", function () { return _this.convertSiblingTextToDiv($); });
+        // 首行缩进：text-indent 转透明占位
+        time("handleTextIndent", function () { return _this.handleTextIndent($); });
+        // 行高与字间距：聚合到父 <text> 并按配置缩放 line-height
+        time("adjustLineHeightAndLetterSpacing", function () { return _this.adjustLineHeightAndLetterSpacing($, config); });
+        // 文本对齐与方向：从 div 下沉至子 <text>
+        time("transferTextAlign", function () { return _this.transferTextAlign($); });
+        // 清理空 <text>
+        time("removeEmptyText", function () { return _this.removeEmptyText($); });
         // this.fixHeadingFontSize($);
         // 最后：修正 img 结束标签、nbsp
         var res = $.html();
-        res = res
-            .replaceAll(/<img([^>]+)>/g, "<img$1 />")
-            .replaceAll(/&nbsp;/g, " ")
-            .replaceAll(/&amp;/g, "&")
-            .replaceAll(/&quot;/g, '"')
-            .replaceAll("\"", "\"");
-        // 统一进行px到em转换
-        if (config === null || config === void 0 ? void 0 : config.convertPxToEm) {
-            res = this.convertAllPxToEm(res);
-        }
+        time("finalizeHtmlCleanup", function () {
+            res = res
+                .replaceAll(/<img([^>]+)>/g, "<img$1 />")
+                .replaceAll(/&nbsp;/g, " ")
+                .replaceAll(/&amp;/g, "&")
+                .replaceAll(/&quot;/g, '"')
+                .replaceAll("\"", '"');
+            // 统一进行px到em转换
+            if (config === null || config === void 0 ? void 0 : config.convertPxToEm) {
+                res = _this.convertAllPxToEm(res);
+            }
+        });
         return res;
     };
     /**
@@ -758,7 +848,7 @@ var RichTextCore = /** @class */ (function () {
             $(this).replaceWith("<div style=\"".concat(mergeStyles("color: transparent", "flex-shrink: 0", "font-size: 20px"), "\" class='pixui-richtext-br-placeholder'>1</div>"));
         });
     };
-    /** 处理 <a> 标签：转为 div、保留样式、记录链接 */
+    /** 处理 <a> 标签：文本链接直接转为 key，图片链接直接下放到 img 上 */
     RichTextCore.handleAnchorTag = function ($) {
         var self = this;
         $("a").each(function () {
@@ -785,10 +875,33 @@ var RichTextCore = /** @class */ (function () {
             });
             var finalStyle = mergeStyles.apply(void 0, __spreadArray([originalStyle], mergedStyles, false));
             var encodedHref = href || ""; // 已在预处理阶段编码，避免二次编码
-            if (href) {
-                self.linkNodes.push({ type: LinkNodeType.DIV, href: href, id: id });
+            var hasImg = $(this).find("img").length > 0;
+            if (!hasImg) {
+                // 文本超链接 → 直接输出可点击的 <key>
+                if (href) {
+                    self.linkNodes.push({ type: LinkNodeType.DIV, href: href, id: id });
+                }
+                $(this).replaceWith("<key 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, "</key>"));
+            }
+            else {
+                // 图片超链接 → 将链接属性下放到 <img>，去掉 <a>
+                var $a = $(this);
+                $a.find("img").each(function () {
+                    // 合并 a 的布局相关样式到 img（img 自身优先）
+                    var aStyleObj = parseStyleString(finalStyle);
+                    var imgStyleObj = parseStyleString($(this).attr("style") || "");
+                    Object.keys(aStyleObj).forEach(function (k) {
+                        if (!imgStyleObj[k])
+                            imgStyleObj[k] = aStyleObj[k];
+                    });
+                    $(this).attr("style", serializeStyleObject(imgStyleObj));
+                    // 设置链接标记（id 将在 handleImgHref 统一设置）
+                    $(this).attr("data-link-type", "img");
+                    $(this).attr("data-link-href", encodedHref);
+                });
+                // 用 <a> 的内部内容替换掉 <a>
+                $a.replaceWith($a.html() || "");
             }
-            $(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 标签包裹纯文本节点 */
@@ -864,6 +977,30 @@ var RichTextCore = /** @class */ (function () {
             });
         }
     };
+    /**
+     * 规范化：将列表项文本列中的裸文本片段包裹为 <key>
+     * 作用域限定在三列布局生成后的列表行：div[data-list-item="true"] > text
+     */
+    RichTextCore.normalizeListItemPlainTextToKey = function ($) {
+        $("div[data-list-item='true'] > text").each(function () {
+            // 遍历直接子内容，遇到纯文本且非空则包裹为 <key>
+            $(this)
+                .contents()
+                .each(function () {
+                if (this.type === "text") {
+                    var raw = this.data;
+                    if (raw && raw.trim().length > 0) {
+                        var wrapped = "<key style=\"".concat(mergeStyles("flex-shrink: 0", "word-break: break-word"), "\">").concat(raw, "</key>");
+                        $(this).replaceWith(wrapped);
+                    }
+                    else {
+                        // 空白文本直接移除，避免无意义节点
+                        $(this).remove();
+                    }
+                }
+            });
+        });
+    };
     /** p → div */
     RichTextCore.replacePTag = function ($) {
         $("p").each(function () {
@@ -910,21 +1047,29 @@ var RichTextCore = /** @class */ (function () {
     };
     /** 把嵌套的 text 展平 */
     RichTextCore.flattenNestedText = function ($) {
-        while ($("text > text").length > 0) {
-            $("text").each(function () {
-                var $this = $(this);
-                var parentStyle = $this.attr("style") || "";
-                $this.children("text").each(function () {
-                    var $child = $(this);
-                    var childStyle = $child.attr("style") || "";
-                    var mergedStyle = mergeStyles(parentStyle, childStyle);
-                    $child.attr("style", mergedStyle);
+        var flattenSameTagNested = function (tagName) {
+            var selector = "".concat(tagName, " > ").concat(tagName);
+            while ($(selector).length > 0) {
+                $(tagName).each(function () {
+                    var $parent = $(this);
+                    var parentStyle = $parent.attr("style") || "";
+                    // 合并父样式到直接子同名标签
+                    $parent.children(tagName).each(function () {
+                        var $child = $(this);
+                        var childStyle = $child.attr("style") || "";
+                        var mergedStyle = mergeStyles(parentStyle, childStyle);
+                        $child.attr("style", mergedStyle);
+                    });
+                    // 若仍存在子同名标签，则用内部内容替换父节点
+                    if ($parent.children(tagName).length > 0) {
+                        $parent.replaceWith($parent.html() || "");
+                    }
                 });
-                if ($this.children("text").length > 0) {
-                    $this.replaceWith($this.html() || "");
-                }
-            });
-        }
+            }
+        };
+        // 先处理 text > text，再处理 key > key
+        flattenSameTagNested("text");
+        flattenSameTagNested("key");
     };
     /** 将同一行的 text 节点转为 div 并外包一层 text */
     RichTextCore.convertSiblingTextToDiv = function ($) {
@@ -1092,13 +1237,35 @@ var RichTextCore = /** @class */ (function () {
             });
         });
     };
-    /** 删除空 text 节点 */
+    /** 删除空 text 节点；并在安全场景下清理空 key 节点（不影响占位/换行） */
     RichTextCore.removeEmptyText = function ($) {
         $("text").each(function () {
             var t = $(this).html() || "";
             if (t.trim() === "")
                 $(this).remove();
         });
+        // 仅清理列表“文本列”中的空 key：div[data-list-item=true] > text 后代
+        // 排除：
+        // 1) 列表三列布局中用于缩进/标号的 <key>（这些是 div[data-list-item=true] 的直接子元素，不在 text 内）
+        // 2) 任何带有非空 style 且含有可见内容的节点
+        $("div[data-list-item='true'] > text").each(function () {
+            $(this)
+                .find("key")
+                .each(function () {
+                var $key = $(this);
+                var html = $key.html() || "";
+                var textOnly = html.replace(/<[^>]*>/g, "");
+                var hasVisibleText = textOnly.trim().length > 0;
+                if (hasVisibleText)
+                    return;
+                // 保留显式占位用途的 key：如果样式包含 width/height/font-size 等，且为非空数值，则视作占位
+                var styleObj = parseStyleString($key.attr("style") || "");
+                var isPlaceholderByStyle = ["width", "height", "font-size", "padding-left", "padding-right", "margin-left", "margin-right"].some(function (k) { return !!styleObj[k]; });
+                if (!isPlaceholderByStyle) {
+                    $key.remove();
+                }
+            });
+        });
     };
     /** 补默认 heading 字体大小 */
     RichTextCore.fixHeadingFontSize = function ($) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pixui-dev/pixui-richtext-helper",
-    "version": "0.2.12-dev.1",
+    "version": "0.2.12",
     "description": "pixui richtext helper",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

package/readme.md

@@ -140,3 +140,8 @@ componentDidMount() { // 在节点渲染后绑定点击事件
 1. 修复图片原始尺寸和样式尺寸不一样，某些pixui版本尺寸不对的问题
 2. 修复direction属性不生效的问题
 3. text节点下的文本节点从div标签改为pixui推荐的key标签
+
+0.2.12
+
+1. 适配阿语从右到左的布局
+2. 适配列表相关样式