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

package/dist/RichTextCore.d.ts

@@ -65,12 +65,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 +92,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

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