@pixui-dev/pixui-richtext-helper 0.1.1-beta.5 → 0.2.0

package/dist/richtext/RichText_Refactor.d.ts

@@ -42,7 +42,7 @@ export declare class RichText_Refactor {
      * 处理单个段落片段，返回转换后的片段 HTML
      */
     private static processSegment;
-    private static handleIndentClass;
+    private static preprocess;
     private static fixImgSizeUnit;
     /** 列表处理（将 ol/ul/li 替换为 div 结构） */
     private static handleLists;

package/dist/richtext/RichText_Refactor.js

@@ -214,7 +214,7 @@ var RichText_Refactor = /** @class */ (function () {
     RichText_Refactor.processSegment = function (segmentHtml, config) {
         var $ = cheerio.load(segmentHtml, null, false);
         // 按旧实现顺序进行处理，但重构为独立函数划分
-        this.handleIndentClass($);
+        this.preprocess($);
         this.fixImgSizeUnit($);
         this.handleLists($, (config === null || config === void 0 ? void 0 : config.lineHeightScale) || 1);
         this.replaceBrWithPlaceholder($);
@@ -230,19 +230,24 @@ var RichText_Refactor = /** @class */ (function () {
         this.adjustLineHeightAndLetterSpacing($, config);
         this.transferTextAlign($);
         this.removeEmptyText($);
-        this.fixHeadingFontSize($);
+        // this.fixHeadingFontSize($);
         // 最后：修正 img 结束标签、nbsp
         var res = $.html();
-        res = res.replaceAll(/<img([^>]+)>/g, "<img$1 />").replaceAll(/&nbsp;/g, " ");
+        res = res
+            .replaceAll(/<img([^>]+)>/g, "<img$1 />")
+            .replaceAll(/&nbsp;/g, " ")
+            .replaceAll(/&amp;/g, "&")
+            .replaceAll(/&quot;/g, '"')
+            .replaceAll("\"", "\"");
         return res;
     };
     // ------------------------------
     // 各独立处理步骤实现
     // ------------------------------
-    RichText_Refactor.handleIndentClass = function ($) {
+    RichText_Refactor.preprocess = function ($) {
         var _loop_1 = function (i) {
             var indent = "ql-indent-".concat(i);
-            var extStyle = "padding-left: ".concat(i * 2, "rem");
+            var extStyle = "padding-left: ".concat(i * 2, "em");
             $(".".concat(indent)).each(function () {
                 var ori = $(this).attr("style") || "";
                 $(this).attr("style", mergeStyles(ori, extStyle));
@@ -252,6 +257,30 @@ var RichText_Refactor = /** @class */ (function () {
         for (var i = 1; i <= 10; i++) {
             _loop_1(i);
         }
+        // 在所有标题标签后插入换行 <br>
+        $("h1, h2, h3, h4, h5, h6").each(function () {
+            // 若标题后紧跟已有换行则不再追加
+            var next = $(this).next();
+            if (!next.is("br")) {
+                $(this).after("<br>");
+            }
+        });
+        // 将所有的margin-left转换为padding-left
+        $("*").each(function () {
+            var oriStyle = $(this).attr("style") || "";
+            if (!oriStyle)
+                return;
+            var styleObj = parseStyleString(oriStyle);
+            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));
+            }
+        });
     };
     RichText_Refactor.fixImgSizeUnit = function ($) {
         $("img").each(function () {
@@ -281,7 +310,7 @@ var RichText_Refactor = /** @class */ (function () {
                         orderIndex = $child.prevAll("li").length + 1;
                     }
                     var marker = isOrdered ? "".concat(orderIndex, ".") : "•";
-                    var paddingLeft = currentLevel * 2; // 每层缩进 2rem
+                    var paddingLeft = currentLevel * 2; // 每层缩进 2em
                     var $liClone = $child.clone();
                     $liClone.find("ol, ul").remove();
                     var textContent = $liClone.text().trim() || "";
@@ -328,16 +357,16 @@ var RichText_Refactor = /** @class */ (function () {
             var placeholder = listInfo.placeholder, items = listInfo.items;
             var html = items
                 .map(function (it, idx) {
-                // 所有列表项默认上下 0.5 * lineHeightScale rem
+                // 所有列表项默认上下 0.5 * lineHeightScale em
                 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, "rem"), "margin-bottom: ".concat(marginBottomVal, "rem")];
-                return ("<div style=\"".concat(mergeStyles.apply(void 0, __spreadArray(__spreadArray([it.style], marginAdjust, false), ["padding-left: ".concat(it.paddingLeft, "rem"), "flex-shrink: 0",
+                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%", "line-height: 1", "display: flex", "flex-direction: row"), "\">") +
-                    "<div style=\"".concat(mergeStyles("word-break: break-word", "flex-shrink: 0", "margin-right: 0.5rem"), "\">").concat(it.marker, "</div>") +
+                    "<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>");
             })
@@ -349,7 +378,7 @@ var RichText_Refactor = /** @class */ (function () {
     /** 将连续 <br> 替换为透明占位文字，确保 PixUI 换行 */
     RichText_Refactor.replaceBrWithPlaceholder = function ($) {
         $("br").each(function () {
-            $(this).replaceWith("<span style=\"".concat(mergeStyles("color: transparent", "flex-shrink: 0", "font-size: 20px"), "\" class='pixui-richtext-br-placeholder'>1</span>"));
+            $(this).replaceWith("<div style=\"".concat(mergeStyles("color: transparent", "flex-shrink: 0", "font-size: 20px"), "\" class='pixui-richtext-br-placeholder'>1</div>"));
         });
     };
     /** 处理 <a> 标签：转为 div、保留样式、记录链接 */
@@ -420,19 +449,27 @@ var RichText_Refactor = /** @class */ (function () {
             u: "text-decoration: underline",
             s: "text-decoration: line-through",
         };
-        Object.entries(tagToStyle).forEach(function (_a) {
-            var tag = _a[0], style = _a[1];
-            $(tag).each(function () {
+        var hasLeftover = true;
+        while (hasLeftover) {
+            hasLeftover = false;
+            // 处理 strong / em / u / s
+            Object.entries(tagToStyle).forEach(function (_a) {
+                var tag = _a[0], style = _a[1];
+                $(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>"));
+                    hasLeftover = true;
+                });
+            });
+            // 处理 span
+            $("span").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>"));
+                $(this).replaceWith("<text style=\"".concat(mergeStyles(oriStyle, "flex-shrink: 0"), "\">").concat(html, "</text>"));
+                hasLeftover = true;
             });
-        });
-        $("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>"));
-        });
+        }
     };
     /** p → div */
     RichText_Refactor.replacePTag = function ($) {
@@ -453,8 +490,11 @@ var RichText_Refactor = /** @class */ (function () {
                 self.linkNodes.push({ type: LinkNodeType.IMG, href: href, id: id });
             }
             $(this).attr("href", "");
-            $(this).attr("class", "PA_RichTextHref_ImgTag");
-            $(this).attr("data-href", href);
+            var prevClass = $(this).attr("class") || "";
+            var newClasses = new Set(prevClass.split(/\s+/).filter(Boolean));
+            newClasses.add("PA_RichTextHref_ImgTag"); // 超链接专用标记（保持原有逻辑）
+            newClasses.add("PA_RichTextImgTag"); // 富文本图片通用标记
+            $(this).attr("class", Array.from(newClasses).join(" "));
         });
     };
     /** 给指定标签补 flex-shrink:0 */
@@ -587,7 +627,7 @@ var RichText_Refactor = /** @class */ (function () {
             });
             if (maxLS > 0) {
                 var currentStyle = $text.attr("style") || "";
-                $text.attr("style", mergeStyles(currentStyle, "letter-spacing: ".concat(maxLS, "rem")));
+                $text.attr("style", mergeStyles(currentStyle, "letter-spacing: ".concat(maxLS, "em")));
             }
         });
     };
@@ -620,7 +660,7 @@ var RichText_Refactor = /** @class */ (function () {
     };
     /** 补默认 heading 字体大小 */
     RichText_Refactor.fixHeadingFontSize = function ($) {
-        var hRem = ["2rem", "1.5rem", "1.17rem", "1rem", "0.83rem", "0.67rem"];
+        var hRem = ["2em", "1.5em", "1.17em", "1em", "0.83em", "0.67em"];
         ["h1", "h2", "h3", "h4", "h5", "h6"].forEach(function (tag) {
             $(tag).each(function () {
                 var idx = parseInt(tag.replace("h", "")) - 1;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pixui-dev/pixui-richtext-helper",
-    "version": "0.1.1-beta.5",
+    "version": "0.2.0",
     "description": "pixui richtext helper",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -20,7 +20,6 @@
     "license": "ISC",
     "devDependencies": {
         "@types/node": "^22.15.33",
-        "ts-node": "^10.9.2",
         "typescript": "^5.8.3"
     },
     "dependencies": {

package/readme.md

@@ -1,13 +1,13 @@
 安装
 
 ```bash
-yarn add pixui-richtext-helper
+yarn add @pixui-dev/pixui-richtext-helper
 ```
 
 使用
 
 ```tsx
-import { RichText } from "pixui-richtext-helper";
+import { RichText } from "@pixui-dev/pixui-richtext-helper";
 
 const richText; // 从管理端获取的富文本数据
 const pixuiStyle = RichText.convertRichTextToPixuiStyle(richText);
@@ -26,3 +26,53 @@ componentDidMount() { // 在节点渲染后绑定点击事件
     });
 }
 ```
+
+### 自定义节点样式
+
+`convertRichTextToPixuiStyle` 在转换过程中会为特定节点增加 class 或 data-attribute，方便业务侧按需覆盖样式：
+
+| 节点类型 | 标记 | 说明 |
+| --- | --- | --- |
+| 超链接文本（`div`） | `.PA_RichTextHref_ATag` | 原 `a` 标签被替换后的容器，可通过样式控制颜色、下划线等效果 |
+| 带超链接的图片（`img`） | `.PA_RichTextHref_ImgTag` | 图片本身存在跳转链接时添加 |
+| 所有图片（`img`） | `.PA_RichTextImgTag` | 富文本中的通用图片标记 |
+| 占位换行节点（`div`/`span`） | `.pixui-richtext-br-placeholder` | 连续 `<br>` 会被替换为透明字符占位，可调整段落之间的间距 |
+| 列表条目容器（`div`） | `data-list-item="true"` | 每个列表项均带此属性，方便定制行距、缩进等 |
+| 超链接节点（任何） | `id="PA_RichTextHrefId_xxx"` | 与 `bindLinkClickEvents` 配合，可用 `[id^="PA_RichTextHrefId_"]` 选择 |
+
+示例：
+
+```css
+/* 修改超链接颜色及鼠标样式 */
+.PA_RichTextHref_ATag {
+  color: #1e90ff;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+/* 统一图片最大宽度 */
+.PA_RichTextImgTag {
+  max-width: 100%;
+}
+
+/* 调整列表行距 */
+[data-list-item="true"] {
+  line-height: 20px;
+}
+
+/* 自定义换行占位符大小 */
+.pixui-richtext-br-placeholder {
+  font-size: 12px;
+}
+```
+
+版本更新记录
+
+0.1.1-beta.5 
+1. 新增：防止重复转换
+
+0.2.0
+1. 组件默认样式长度单位修改为em
+2. 图片节点统一补充PA_RichTextImgTag的class
+3. 将列表的margin-left统一修改为padding-left
+4. 修复某些情况下多余的span标签