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

package/dist/richtext/RichTextCore.d.ts

@@ -37,7 +37,7 @@ export declare class RichTextCore {
      *****************************************************/
     /**
      * 将 HTML 切分为基础段落片段。
-     * 简易实现：以顶级节点为粒度切分，再根据最外层列表节点进行分割。
+     * 递归拆分，任何层级的 <br> 都会被拆成独立段落
      */
     private static splitIntoSegments;
     /**

package/dist/richtext/RichTextCore.js

@@ -171,48 +171,71 @@ var RichTextCore = /** @class */ (function () {
      *****************************************************/
     /**
      * 将 HTML 切分为基础段落片段。
-     * 简易实现：以顶级节点为粒度切分，再根据最外层列表节点进行分割。
+     * 递归拆分，任何层级的 <br> 都会被拆成独立段落
      */
     RichTextCore.splitIntoSegments = function ($) {
         var segments = [];
-        // 如果有 body，取其直接子节点；否则取根节点下的直接子节点
-        var roots = $("body").length > 0 ? $("body").children() : $.root().children();
-        roots.each(function () {
-            var nodeHtml = $(this).toString();
-            // 切分包含最外层列表的片段
-            if (/^<\s*(ol|ul)/i.test(nodeHtml)) {
-                segments.push(nodeHtml);
+        var wrapNode = function ($node, inner) {
+            var _a;
+            var tagName = $node.prop("tagName");
+            if (!tagName)
+                return inner; // root
+            var attribsObj = ((_a = $node.get(0)) === null || _a === void 0 ? void 0 : _a.attribs) || {};
+            var attribHtml = "";
+            for (var _i = 0, _b = Object.entries(attribsObj); _i < _b.length; _i++) {
+                var _c = _b[_i], k = _c[0], v = _c[1];
+                attribHtml += " ".concat(k, "=\"").concat(v, "\"");
             }
-            else {
-                // 进一步检查内部是否存在最外层的 ol/ul，需要分成 前段 + 列表 + 后段
-                var inner$_1 = cheerio.load(nodeHtml, null, false);
-                var outerLists_1 = [];
-                inner$_1("ol, ul").each(function () {
-                    if (inner$_1(this).parents("ol, ul").length === 0) {
-                        outerLists_1.push(inner$_1(this).toString());
+            return "<".concat(tagName.toLowerCase()).concat(attribHtml, ">").concat(inner, "</").concat(tagName.toLowerCase(), ">");
+        };
+        var dfs = function ($elem) {
+            var node = $elem.get(0);
+            if (!node)
+                return [];
+            // text / comment nodes直接返回
+            if (node.type === "text" || node.type === "comment") {
+                return [$.html(node)];
+            }
+            var tagName = ($elem.prop("tagName") || "").toLowerCase();
+            if (tagName === "br") {
+                return ["<br>"]; // 用占位标识，后续流程会处理
+            }
+            var buffer = [];
+            var segs = [];
+            var childrenArr = $elem.contents().toArray();
+            childrenArr.forEach(function (child) {
+                var childSegs = dfs($(child));
+                childSegs.forEach(function (seg) {
+                    if (seg === "<br>") {
+                        var htmlPart = buffer.join("");
+                        if (htmlPart.trim()) {
+                            segs.push(wrapNode($elem, htmlPart));
+                        }
+                        segs.push("<br>");
+                        buffer = [];
+                    }
+                    else {
+                        buffer.push(seg);
                     }
                 });
-                if (outerLists_1.length === 0) {
-                    segments.push(nodeHtml);
-                }
-                else {
-                    var tempHtml_1 = nodeHtml;
-                    outerLists_1.forEach(function (listHtml) {
-                        var idx = tempHtml_1.indexOf(listHtml);
-                        if (idx >= 0) {
-                            var before = tempHtml_1.substring(0, idx);
-                            if (before.trim())
-                                segments.push(before);
-                            segments.push(listHtml);
-                            tempHtml_1 = tempHtml_1.substring(idx + listHtml.length);
-                        }
-                    });
-                    if (tempHtml_1.trim())
-                        segments.push(tempHtml_1);
-                }
+            });
+            // flush remaining
+            if (buffer.length > 0) {
+                var htmlPart = buffer.join("");
+                if (htmlPart.trim())
+                    segs.push(wrapNode($elem, htmlPart));
+            }
+            // 如果此节点本身为列表 (<ol>/<ul>)，不再拆分内部以保持原逻辑
+            if (tagName === "ol" || tagName === "ul") {
+                // 直接返回整块 html，不再分片
+                return [$.html(node)];
             }
+            return segs;
+        };
+        var rootChildren = $("body").length > 0 ? $("body").children() : $.root().children();
+        rootChildren.each(function (_, el) {
+            segments.push.apply(segments, dfs($(el)));
         });
-        // fallback：原样返回
         if (segments.length === 0)
             segments.push($.html());
         return segments;
@@ -280,15 +303,45 @@ var RichTextCore = /** @class */ (function () {
             if (!oriStyle)
                 return;
             var styleObj = parseStyleString(oriStyle);
+            // 1) 处理 margin-left 单独声明
             var marginLeftVal = styleObj["margin-left"];
             if (marginLeftVal !== undefined) {
-                // 移除 margin-left
                 delete styleObj["margin-left"];
-                // 如果原本没有 padding-left，则直接设置；若已有，简单覆盖（遵循后写优先规则）
                 styleObj["padding-left"] = styleObj["padding-left"] || marginLeftVal;
-                // 写回合并后的样式
-                $(this).attr("style", serializeStyleObject(styleObj));
             }
+            // 2) 处理 margin shorthand，提取 left
+            if (styleObj["margin"]) {
+                var marginStr = styleObj["margin"].trim();
+                var parts = marginStr.split(/\s+/);
+                var top_1 = "", right = "", bottom = "", left = "";
+                if (parts.length === 1) {
+                    top_1 = right = bottom = left = parts[0];
+                }
+                else if (parts.length === 2) {
+                    top_1 = bottom = parts[0];
+                    right = left = parts[1];
+                }
+                else if (parts.length === 3) {
+                    top_1 = parts[0];
+                    right = left = parts[1];
+                    bottom = parts[2];
+                }
+                else {
+                    top_1 = parts[0];
+                    right = parts[1];
+                    bottom = parts[2];
+                    left = parts[3];
+                }
+                // 将 left 移到 padding-left
+                if (left) {
+                    styleObj["padding-left"] = styleObj["padding-left"] || left;
+                }
+                // 重构 margin，去掉 left（用 0 占位保持布局）
+                var newMargin = "".concat(top_1, " ").concat(right, " ").concat(bottom, " 0");
+                styleObj["margin"] = newMargin.trim();
+            }
+            // 写回合并后的样式
+            $(this).attr("style", serializeStyleObject(styleObj));
         });
     };
     RichTextCore.fixImgSizeUnit = function ($) {
@@ -442,6 +495,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) {
@@ -621,15 +677,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 () {

package/package.json

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

package/readme.md

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