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

package/dist/RichTextCore.js

@@ -34,6 +34,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextCore = exports.LinkNodeType = void 0;
 var cheerio = __importStar(require("cheerio"));
+var version_1 = require("./version");
 /*****************************************************
  *  类型、枚举定义
  *****************************************************/
@@ -129,15 +130,66 @@ var mergeStyles = function () {
     return serializeStyleObject(mergedStyleObj);
 };
 var CLASS_STYLE_MAP = {
-    "ql-direction-rtl": function (old) { return mergeStyles("direction: rtl;", old); },
-    "ql-align-right": function (old) { return mergeStyles("text-align: right;", old); },
+    "ql-direction-rtl": function (old) { return mergeStyles(old, "direction: rtl;"); },
+    "ql-align-right": function (old) { return mergeStyles(old, "text-align: right;"); },
+};
+// data-list value → 需追加的 class 名
+var DATA_LIST_CLASS_MAP = {
+    bullet: "ql-indent-0",
 };
 var _loop_1 = function (i) {
     var cls = "ql-indent-".concat(i);
-    CLASS_STYLE_MAP[cls] = function (old) { return mergeStyles("padding-left: ".concat(i * 2, "em"), old); };
+    //如果之前加了ql-indent-x，取max
+    // 注意：此 mapper 可能在同一节点被多次调用（当存在多个 ql-indent-* 类时）
+    // 只有当当前 cls 对应的缩进值是该节点所有 ql-indent-* 中的最大值时才真正处理样式。
+    CLASS_STYLE_MAP[cls] = function (old, $elem) {
+        // 1) 计算该元素所有 ql-indent-* 中的最大值
+        var clsArr = ($elem.attr("class") || "").split(/\s+/).filter(Boolean);
+        var isRtl = clsArr.includes("ql-direction-rtl");
+        var maxIndentNum = 0;
+        clsArr.forEach(function (c) {
+            var m = c.match(/^ql-indent-(\d+)$/);
+            if (m) {
+                var n = parseInt(m[1]);
+                if (!isNaN(n) && n > maxIndentNum)
+                    maxIndentNum = n;
+            }
+        });
+        // 当前 cls 对应的缩进级别
+        var currentIndentMatch = cls.match(/^ql-indent-(\d+)$/);
+        var currentIndentNum = currentIndentMatch ? parseInt(currentIndentMatch[1]) : 0;
+        // 当前处理的不是最大缩进级别
+        if (currentIndentNum !== maxIndentNum) {
+            return old;
+        }
+        // H5 基准：0级=1.5em，之后每级递增3em → padding = 1.5em + 3em * level
+        var desiredPadEm = 1.5 + (maxIndentNum + 1) * 3;
+        var styleObj = parseStyleString(old);
+        // 依据方向选择缩进属性键
+        var paddingKey = isRtl ? "padding-right" : "padding-left";
+        // 已有 padding-left/right，需比较取更大者
+        var existPadEm = -1;
+        var existPad = styleObj[paddingKey];
+        if (existPad) {
+            var m = existPad.match(/^([0-9.]+)(px|em)?$/i);
+            if (m) {
+                var num = parseFloat(m[1]);
+                var unit = (m[2] || "px").toLowerCase();
+                if (!isNaN(num)) {
+                    existPadEm = unit === "em" ? num : num / 16;
+                }
+            }
+        }
+        var finalPadEm = existPadEm > desiredPadEm ? existPadEm : desiredPadEm;
+        styleObj[paddingKey] = "".concat(finalPadEm, "em");
+        // 设置 list-style-type
+        var markersList = ["disc", "circle", "square", "empty square"];
+        styleObj["list-style-type"] = markersList[maxIndentNum % markersList.length];
+        return mergeStyles(old, serializeStyleObject(styleObj));
+    };
 };
 // 动态生成段落缩进 ql-indent-1 ~ ql-indent-10
-for (var i = 1; i <= 10; i++) {
+for (var i = 0; i <= 10; i++) {
     _loop_1(i);
 }
 /*****************************************************
@@ -167,6 +219,8 @@ var RichTextCore = /** @class */ (function () {
         if ($1("text").length > 0) {
             return str;
         }
+        var oriNodeCount = $1("*").length;
+        console.log("pixui-richHelper转换---- 版本：" + " " + version_1.LIB_VERSION + " " + " 原始节点数：" + oriNodeCount);
         // ---------- 第 1 步：段落分割（基础实现：根节点切分） ----------
         var segments = RichTextCore.splitIntoSegments($1);
         // ---------- 第 2/3 步：遍历 + 展平 ----------
@@ -175,7 +229,7 @@ var RichTextCore = /** @class */ (function () {
         var processedSegments = segments.map(function (seg) { return RichTextCore.processSegment(seg, config); });
         // ---------- 第 4 步：拼装 ----------
         var Result = processedSegments.join("");
-        // console.log(Result);
+        console.log(Result);
         return Result;
     };
     /**
@@ -383,24 +437,39 @@ var RichTextCore = /** @class */ (function () {
         // 根据映射表统一处理 class → style
         $("*").each(function () {
             var _this = this;
-            var classStr = $(this).attr("class") || "";
-            if (!classStr)
+            // 1) 先处理 data-list，可能追加 class
+            var dataList = $(this).attr("data-list");
+            if (dataList) {
+                var clsToAdd = DATA_LIST_CLASS_MAP[dataList];
+                if (clsToAdd) {
+                    $(this).addClass(clsToAdd);
+                    $(this).removeAttr("data-list");
+                }
+            }
+            // 2) 再处理 class → style 映射（包含刚刚追加的 class）
+            var classStrNow = $(this).attr("class") || "";
+            if (!classStrNow)
                 return;
-            var classArr = classStr.split(/\s+/).filter(Boolean);
+            var classArr = classStrNow.split(/\s+/).filter(Boolean);
             if (classArr.length === 0)
                 return;
             var styleStr = $(this).attr("style") || "";
             var changed = false;
+            // 先累计样式，再统一移除命中的类，避免在 mapper 内部读取 class 时出现中途被修改导致的误判
+            var removedClasses = [];
             classArr.forEach(function (cls) {
                 var mapper = CLASS_STYLE_MAP[cls];
                 if (mapper) {
                     styleStr = mapper(styleStr, $(_this));
-                    $(_this).removeClass(cls);
+                    removedClasses.push(cls);
                     changed = true;
                 }
             });
             if (changed) {
                 $(this).attr("style", styleStr);
+                if (removedClasses.length > 0) {
+                    $(this).removeClass(removedClasses.join(" "));
+                }
             }
         });
         // 在所有标题标签后插入换行 <br>
@@ -411,7 +480,7 @@ var RichTextCore = /** @class */ (function () {
                 $(this).after("<br>");
             }
         });
-        // 将所有的margin-left转换为padding-left
+        // 将所有的margin-left,margin-right转换为padding-left,padding-right
         $("*").each(function () {
             var oriStyle = $(this).attr("style") || "";
             if (!oriStyle)
@@ -419,9 +488,12 @@ var RichTextCore = /** @class */ (function () {
             var styleObj = parseStyleString(oriStyle);
             // 1) 处理 margin-left 单独声明
             var marginLeftVal = styleObj["margin-left"];
-            if (marginLeftVal !== undefined) {
+            var marginRightVal = styleObj["margin-right"];
+            if (marginLeftVal !== undefined || marginRightVal !== undefined) {
                 delete styleObj["margin-left"];
+                delete styleObj["margin-right"];
                 styleObj["padding-left"] = styleObj["padding-left"] || marginLeftVal;
+                styleObj["padding-right"] = styleObj["padding-right"] || marginRightVal;
             }
             // 2) 处理 margin shorthand，提取 left
             if (styleObj["margin"]) {
@@ -446,10 +518,9 @@ var RichTextCore = /** @class */ (function () {
                     bottom = parts[2];
                     left = parts[3];
                 }
-                // 将 left 移到 padding-left
-                if (left) {
-                    styleObj["padding-left"] = styleObj["padding-left"] || left;
-                }
+                // 将 left,right 移到 padding-left,padding-right
+                left && (styleObj["padding-left"] = styleObj["padding-left"] || left);
+                right && (styleObj["padding-right"] = styleObj["padding-right"] || right);
                 // 重构 margin，去掉 left（用 0 占位保持布局）
                 var newMargin = "".concat(top_1, " ").concat(right, " ").concat(bottom, " 0");
                 styleObj["margin"] = newMargin.trim();
@@ -568,17 +639,40 @@ var RichTextCore = /** @class */ (function () {
                     if (isOrdered) {
                         orderIndex = $child.prevAll("li").length + 1;
                     }
-                    var marker = isOrdered ? "".concat(orderIndex, ".") : "•";
                     var paddingLeft = currentLevel * 2; // 每层缩进 2em
                     var $liClone = $child.clone();
                     $liClone.find("ol, ul").remove();
-                    var textContent = $liClone.text().trim() || "";
+                    var textContent = $liClone.html() || "";
                     var style = $child.attr("style") || "";
+                    // 解析 style 判断 list-style-type
+                    var styleObj = parseStyleString(style);
+                    var listStyle = (styleObj["list-style-type"] || "").trim().toLowerCase();
+                    // 查找有没有继承下来的属性
+                    if (!listStyle) {
+                        var parentStyleObj = parseStyleString($container.attr("style") || "");
+                        listStyle = (parentStyleObj["list-style-type"] || "").trim().toLowerCase();
+                    }
+                    // 根据 list-style-type 与列表类型决定 marker
+                    var BULLET_MARKER_MAP = {
+                        disc: "●",
+                        circle: "○",
+                        square: "■",
+                        "empty square": "□",
+                        none: "",
+                    };
+                    var finalMarker = "";
+                    if (listStyle && Object.prototype.hasOwnProperty.call(BULLET_MARKER_MAP, listStyle)) {
+                        // 即使映射值为空字符串（none）也应使用
+                        finalMarker = BULLET_MARKER_MAP[listStyle];
+                    }
+                    else {
+                        finalMarker = isOrdered ? "".concat(orderIndex, ".") : "•";
+                    }
                     items.push({
                         level: currentLevel,
                         isOrdered: isOrdered,
                         orderIndex: orderIndex,
-                        marker: marker,
+                        marker: finalMarker,
                         paddingLeft: paddingLeft,
                         textContent: textContent,
                         style: style,
@@ -620,14 +714,38 @@ var RichTextCore = /** @class */ (function () {
                 var marginTopVal = idx === 0 ? 1 * lineHeightScale : 0.5 * lineHeightScale;
                 var marginBottomVal = idx === items.length - 1 ? 1 * lineHeightScale : 0.5 * lineHeightScale;
                 var marginAdjust = ["margin-top: ".concat(marginTopVal, "em"), "margin-bottom: ".concat(marginBottomVal, "em")];
-                return ("<div style=\"".concat(mergeStyles.apply(void 0, __spreadArray(__spreadArray([it.style], marginAdjust, false), ["padding-left: ".concat(it.paddingLeft, "em"), "flex-shrink: 0",
-                    "width: 100%",
-                    "flex-direction: row",
-                    "display: flex"], false)), "\" data-list-item=\"true\">") +
-                    "<text style=\"".concat(mergeStyles("flex-shrink: 0", "width: 100%", "display: flex", "flex-direction: row"), "\">") +
-                    "<key style=\"".concat(mergeStyles("flex-shrink: 0", "padding-right: 0.5em"), "\">").concat(it.marker, "</key>") +
-                    "<key style=\"".concat(mergeStyles("flex-shrink: 0", "flex: 1"), "\">").concat(it.textContent, "</key>") +
-                    "</text></div>");
+                // 解析 direction 与缩进，按 H5 悬挂缩进思路改为三列布局
+                var styleObj = parseStyleString(it.style || "");
+                var isRtl = (styleObj["direction"] || "").trim().toLowerCase() === "rtl";
+                var paddingKey = isRtl ? "padding-right" : "padding-left";
+                var padVal = styleObj[paddingKey];
+                var markerEm = 1.2;
+                var markerPx = markerEm * BASE_FONT_SIZE; // 约 19.2px
+                var indentPx = it.level * 40; // 回退：嵌套层级
+                if (padVal) {
+                    var m = padVal.match(/^([0-9.]+)(px|em)?$/i);
+                    if (m) {
+                        var num = parseFloat(m[1]);
+                        var unit = (m[2] || "px").toLowerCase();
+                        if (!isNaN(num)) {
+                            var padPx = unit === "em" ? num * BASE_FONT_SIZE : num;
+                            indentPx = Math.max(padPx - markerPx, 0);
+                        }
+                    }
+                }
+                // 容器样式：移除 padding 与 list-style-type，设置 flex 布局并按方向翻转
+                delete styleObj["padding-left"];
+                delete styleObj["padding-right"];
+                delete styleObj["list-style-type"]; // 由三列布局承担
+                var rowDir = isRtl ? "row-reverse" : "row";
+                var outerStyle = mergeStyles.apply(void 0, __spreadArray(__spreadArray([serializeStyleObject(styleObj)], marginAdjust, false), ["flex-shrink: 0", "width: 100%", "display: flex", "flex-direction: ".concat(rowDir)], false));
+                // 三列：缩进列 + 标号列 + 文本列
+                var indentCol = "<key style=\"width:".concat(indentPx, "px;flex-shrink:0\"></key>");
+                var markerCol = it.marker
+                    ? "<key style=\"".concat(mergeStyles("flex-shrink: 0", "width: ".concat(markerEm, "em"), isRtl ? "padding-left: 0.3em" : "padding-right: 0.3em"), "\">").concat(it.marker, "</key>")
+                    : "";
+                var textCol = "<text style=\"".concat(mergeStyles("flex: 1", "min-width: 0", "word-break: break-word"), "\">").concat(it.textContent, "</text>");
+                return "<div style=\"".concat(outerStyle, "\" data-list-item=\"true\">").concat(indentCol).concat(markerCol).concat(textCol, "</div>");
             })
                 .join("");
             placeholder.after(html);
@@ -698,7 +816,7 @@ var RichTextCore = /** @class */ (function () {
                 if (this.type === "text") {
                     var text = this.data.trim();
                     if (text.length > 0) {
-                        $(this).replaceWith("<text style=\"".concat(mergeStyles("flex-shrink: 0", "flex-direction: row"), "\">").concat(text, "</text>"));
+                        $(this).replaceWith("<text style=\"".concat(mergeStyles("flex-shrink: 0", "flex-direction: row", "word-break: break-word"), "\">").concat(text, "</text>"));
                     }
                 }
             });
@@ -721,7 +839,13 @@ var RichTextCore = /** @class */ (function () {
                 $(tag).each(function () {
                     var html = $(this).html();
                     var oriStyle = $(this).attr("style") || "";
-                    $(this).replaceWith("<text style=\"".concat(mergeStyles(oriStyle, style, "flex-shrink: 0"), "\">").concat(html, "</text>"));
+                    var isInListTextColumn = $(this).closest("[data-list-item='true']").length > 0 && $(this).closest("text").length > 0;
+                    if (isInListTextColumn) {
+                        $(this).replaceWith("<key style=\"".concat(mergeStyles(oriStyle, style, "flex-shrink: 0", "word-break: break-word"), "\">").concat(html, "</key>"));
+                    }
+                    else {
+                        $(this).replaceWith("<text style=\"".concat(mergeStyles(oriStyle, style, "flex-shrink: 0", "word-break: break-word"), "\">").concat(html, "</text>"));
+                    }
                     hasLeftover = true;
                 });
             });
@@ -729,7 +853,13 @@ var RichTextCore = /** @class */ (function () {
             $("span").each(function () {
                 var html = $(this).html();
                 var oriStyle = $(this).attr("style") || "";
-                $(this).replaceWith("<text style=\"".concat(mergeStyles(oriStyle, "flex-shrink: 0"), "\">").concat(html, "</text>"));
+                var isInListTextColumn = $(this).closest("[data-list-item='true']").length > 0 && $(this).closest("text").length > 0;
+                if (isInListTextColumn) {
+                    $(this).replaceWith("<key style=\"".concat(mergeStyles(oriStyle, "flex-shrink: 0", "word-break: break-word"), "\">").concat(html, "</key>"));
+                }
+                else {
+                    $(this).replaceWith("<text style=\"".concat(mergeStyles(oriStyle, "flex-shrink: 0", "word-break: break-word"), "\">").concat(html, "</text>"));
+                }
                 hasLeftover = true;
             });
         }
@@ -857,7 +987,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%"), "\">").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%", "word-break: break-word"), "\">").concat(tagHtml, "</text></").concat(tag, ">"));
             }
         });
     };

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const LIB_VERSION = "0.2.11";

package/dist/version.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LIB_VERSION = void 0;
+/* Auto-generated by scripts/generate-version.js */
+exports.LIB_VERSION = "0.2.11";

package/package.json

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

package/readme.md

@@ -31,6 +31,8 @@ componentDidMount() { // 在节点渲染后绑定点击事件
 
 组件在转换长富文本（节点数量较多，参考节点数量大于100）的时候可能会比较慢阻塞活动显示，如果需要转换很长的富文本，建议询问管理端是否可以提供预转换服务，或者活动在前置虚拟机中预先转换以后保存到本地，活动中直接使用转换以后的结果。
 
+组件当前只适配并测试过由floriazhang提供的管理端富文本编辑工具输出的富文本内容，除此之外的富文本内容不保证可以完全正确解析显示。
+
 ### 自定义节点样式
 
 `convertRichTextToPixuiStyle` 在转换过程中会为特定节点增加 class 或 data-attribute，方便业务侧按需覆盖样式：
@@ -133,7 +135,8 @@ componentDidMount() { // 在节点渲染后绑定点击事件
 
 1. 增加对class ql-align-right -> style="text-align: right;"的转换支持
 
-0.2.11
+0.2.11(f1dcaccc3b6c72b82b6b76cea654d50d5ba7ccad)
 
 1. 修复图片原始尺寸和样式尺寸不一样，某些pixui版本尺寸不对的问题
 2. 修复direction属性不生效的问题
+3. text节点下的文本节点从div标签改为pixui推荐的key标签