@pixui-dev/pixui-richtext-helper 0.2.12-dev.2 → 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;
     /**
      * 绑定链接点击事件

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,58 +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);
         // 预处理：data-list → class、class → style、标题后补 <br>、margin→padding 合并
-        this.preprocess($);
+        time("preprocess", function () { return _this.preprocess($); });
         // 规范图片尺寸单位：img 的 width/height 数字补 px
-        this.fixImgSizeUnit($);
+        time("fixImgSizeUnit", function () { return _this.fixImgSizeUnit($); });
         // COS 图片缩略参数：按最小可用宽度收敛/追加 imageMogr2/thumbnail/<w>x
-        this.handleCosImageMogr2($, config);
+        time("handleCosImageMogr2", function () { return _this.handleCosImageMogr2($, config); });
         // 合并img的width，height属性到 style，属性存在以 style 优先，移除 width/height 属性
-        this.consolidateImgSizeStyle($);
+        time("consolidateImgSizeStyle", function () { return _this.consolidateImgSizeStyle($); });
         // 列表规范化：ol/ul/li 转三列布局（缩进/标号/文本），保留缩进与方向。节点结构：段落div(缩进key节点、标号key节点、text节点区域)
-        this.handleLists($, (config === null || config === void 0 ? void 0 : config.lineHeightScale) || 1);
+        time("handleLists", function () { return _this.handleLists($, (config === null || config === void 0 ? void 0 : config.lineHeightScale) || 1); });
         // 换行处理：<br> → 透明占位 div，确保 PixUI 内正确换行
-        this.replaceBrWithPlaceholder($);
+        time("replaceBrWithPlaceholder", function () { return _this.replaceBrWithPlaceholder($); });
         // 超链接：<a> → 可点击的 div，汇聚子样式并记录 data-link-*
-        this.handleAnchorTag($);
+        time("handleAnchorTag", function () { return _this.handleAnchorTag($); });
         // 文本包装：将普通文本包入 <text>（跳过列表/链接/换行占位）
-        this.wrapTextNodes($);
+        time("wrapTextNodes", function () { return _this.wrapTextNodes($); });
         // 样式标签：strong/em/u/s/span → 文本节点（列表文本列下改为 <key>）
-        this.replaceStyleTags($);
+        time("replaceStyleTags", function () { return _this.replaceStyleTags($); });
         // 列表文本列规范化：裸文本统一包裹为 <key>，清理空白
-        this.normalizeListItemPlainTextToKey($);
+        time("normalizeListItemPlainTextToKey", function () { return _this.normalizeListItemPlainTextToKey($); });
         // 段落：<p> → <div>，补 flex-shrink 与 width:100%
-        this.replacePTag($);
+        time("replacePTag", function () { return _this.replacePTag($); });
         // 图片链接：img 的 href 转移至 data-link-href，并登记点击节点
-        this.handleImgHref($);
+        time("handleImgHref", function () { return _this.handleImgHref($); });
         // 防收缩：常见块级元素补 flex-shrink:0（不作用于列表项）
-        this.addFlexShrink($);
+        time("addFlexShrink", function () { return _this.addFlexShrink($); });
         // 扁平化：合并 text 样式并去掉嵌套的父 <text>
-        this.flattenNestedText($);
+        time("flattenNestedText", function () { return _this.flattenNestedText($); });
         // 同级文本：拆分为 <key> 片段并统一包入父 <text>
-        this.convertSiblingTextToDiv($);
+        time("convertSiblingTextToDiv", function () { return _this.convertSiblingTextToDiv($); });
         // 首行缩进：text-indent 转透明占位
-        this.handleTextIndent($);
+        time("handleTextIndent", function () { return _this.handleTextIndent($); });
         // 行高与字间距：聚合到父 <text> 并按配置缩放 line-height
-        this.adjustLineHeightAndLetterSpacing($, config);
+        time("adjustLineHeightAndLetterSpacing", function () { return _this.adjustLineHeightAndLetterSpacing($, config); });
         // 文本对齐与方向：从 div 下沉至子 <text>
-        this.transferTextAlign($);
+        time("transferTextAlign", function () { return _this.transferTextAlign($); });
         // 清理空 <text>
-        this.removeEmptyText($);
+        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;
     };
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pixui-dev/pixui-richtext-helper",
-    "version": "0.2.12-dev.2",
+    "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. 适配列表相关样式