@pixui-dev/pixui-richtext-helper 0.2.5 → 0.2.6

package/dist/richtext/RichTextCore.d.ts

@@ -27,6 +27,7 @@ export declare class RichTextCore {
      */
     static convertRichTextToPixuiStyle(str: string, config?: {
         lineHeightScale?: number;
+        convertPxToEm?: boolean;
     }): string;
     /**
      * 绑定链接点击事件
@@ -44,6 +45,12 @@ export declare class RichTextCore {
      * 处理单个段落片段，返回转换后的片段 HTML
      */
     private static processSegment;
+    /**
+     * 统一转换HTML中的所有px单位为em单位
+     * @param html 原始HTML字符串
+     * @returns 转换后的HTML字符串
+     */
+    private static convertAllPxToEm;
     private static preprocess;
     private static fixImgSizeUnit;
     /** 列表处理（将 ol/ul/li 替换为 div 结构） */

package/dist/richtext/RichTextCore.js

@@ -56,6 +56,33 @@ var LinkNodeType;
 /*****************************************************
  *  工具函数
  *****************************************************/
+/** 基准字体大小，用于px到em转换 */
+var BASE_FONT_SIZE = 16;
+/**
+ * 将px单位转换为em单位
+ * @param pxValue px数值
+ * @returns em值字符串
+ */
+var convertPxToEm = function (pxValue) {
+    var emValue = pxValue / BASE_FONT_SIZE;
+    return "".concat(emValue.toFixed(3), "em");
+};
+/**
+ * 转换样式字符串中的px单位为em单位
+ * @param styleStr 原始样式字符串
+ * @returns 转换后的样式字符串
+ */
+var convertStylePxToEm = function (styleStr) {
+    if (!styleStr || !styleStr.trim())
+        return styleStr;
+    return styleStr.replace(/(\d+(?:\.\d+)?)px/g, function (match, pxValue) {
+        var px = parseFloat(pxValue);
+        if (!isNaN(px)) {
+            return convertPxToEm(px);
+        }
+        return match;
+    });
+};
 /**
  * 解析 style 字符串为对象
  */
@@ -121,7 +148,10 @@ var RichTextCore = /** @class */ (function () {
         // 重置全局状态
         RichTextCore.linkNodes = [];
         RichTextCore.hrefIdCnt = 0;
-        var $1 = cheerio.load(str, null, false);
+        var preEncodedStr = str.replace(/href="([^"]*?)"/g, function (_match, hrefVal) {
+            return "href=\"".concat(encodeURIComponent(hrefVal), "\"");
+        });
+        var $1 = cheerio.load(preEncodedStr, null, false);
         //检查html，如果有text节点，说明是转换过的，直接返回
         if ($1("text").length > 0) {
             return str;
@@ -144,9 +174,38 @@ var RichTextCore = /** @class */ (function () {
         // 直接查询统一的 class
         setTimeout(function () {
             var elements = Array.from(document.querySelectorAll(".".concat(RichTextCore.LINK_NODE_CLASS)));
+            // HTML 实体解码工具函数（纯算法实现，避免依赖 textarea 节点）
+            var decodeHtmlEntities = function (str) {
+                if (!str)
+                    return str;
+                var named = {
+                    quot: '"',
+                    amp: "&",
+                    lt: "<",
+                    gt: ">",
+                    apos: "'",
+                };
+                return str.replace(/&(#(?:x[0-9a-fA-F]+|\d+)|[a-zA-Z]+);/g, function (_, ent) {
+                    if (ent[0] === "#") {
+                        // 数字实体
+                        var isHex = ent[1].toLowerCase() === "x";
+                        var numStr = isHex ? ent.slice(2) : ent.slice(1);
+                        var codePoint = parseInt(numStr, isHex ? 16 : 10);
+                        if (!isNaN(codePoint)) {
+                            return String.fromCodePoint(codePoint);
+                        }
+                        return _; // 解析失败，原样返回
+                    }
+                    // 命名实体
+                    if (named.hasOwnProperty(ent))
+                        return named[ent];
+                    return _; // 未知实体，原样返回
+                });
+            };
             elements.forEach(function (el) {
                 var hrefEncoded = el.getAttribute("data-link-href") || "";
-                var href = decodeURIComponent(hrefEncoded);
+                // 先 URI 解码，再做 HTML 实体解码
+                var href = decodeHtmlEntities(decodeURIComponent(hrefEncoded));
                 var typeStr = el.getAttribute("data-link-type");
                 var type = typeStr === LinkNodeType.IMG ? LinkNodeType.IMG : LinkNodeType.DIV;
                 // 避免重复绑定
@@ -230,8 +289,12 @@ var RichTextCore = /** @class */ (function () {
                 if (tagName === "div" || tagName === "text") {
                     return []; // 丢弃空 div / text
                 }
+                else if (tagName === "img") {
+                    // img标签直接返回，不包装在div中
+                    return [$.html(node)];
+                }
                 else {
-                    // 其它空标签保留（img...）
+                    // 其它空标签保留
                     return [wrapNode($elem, "")];
                 }
             }
@@ -281,8 +344,25 @@ var RichTextCore = /** @class */ (function () {
             .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;
     };
+    /**
+     * 统一转换HTML中的所有px单位为em单位
+     * @param html 原始HTML字符串
+     * @returns 转换后的HTML字符串
+     */
+    RichTextCore.convertAllPxToEm = function (html) {
+        // 转换style属性中的px
+        html = html.replace(/style="([^"]*?)"/g, function (match, styleContent) {
+            var convertedStyle = convertStylePxToEm(styleContent);
+            return "style=\"".concat(convertedStyle, "\"");
+        });
+        return html;
+    };
     // ------------------------------
     // 各独立处理步骤实现
     // ------------------------------
@@ -479,7 +559,7 @@ var RichTextCore = /** @class */ (function () {
                     mergedStyles.push(innerStyle);
             });
             var finalStyle = mergeStyles.apply(void 0, __spreadArray([originalStyle], mergedStyles, false));
-            var encodedHref = href ? encodeURIComponent(href) : "";
+            var encodedHref = href || ""; // 已在预处理阶段编码，避免二次编码
             if (href) {
                 self.linkNodes.push({ type: LinkNodeType.DIV, href: href, id: id });
             }
@@ -566,7 +646,7 @@ var RichTextCore = /** @class */ (function () {
                 self.linkNodes.push({ type: LinkNodeType.IMG, href: href, id: id });
             }
             // 将链接信息以转义形式保存在 data- 属性中，避免默认跳转
-            var encodedHref = href ? encodeURIComponent(href) : "";
+            var encodedHref = href || ""; // 已在预处理阶段编码，避免二次编码
             $(this).attr("data-link-type", "img");
             $(this).attr("data-link-href", encodedHref);
             $(this).attr("href", "");
@@ -654,7 +734,8 @@ var RichTextCore = /** @class */ (function () {
                 var attribs = ($(node).get(0) || {}).attribs || {};
                 for (var _i = 0, _a = Object.entries(attribs); _i < _a.length; _i++) {
                     var _b = _a[_i], k = _b[0], v = _b[1];
-                    if (k !== "style" && k !== "id") {
+                    // 跳过style、id和href属性，避免重复处理或错误处理
+                    if (k !== "style" && k !== "id" && k !== "href") {
                         customAttrs += " ".concat(k, "=\"").concat(v, "\"");
                     }
                 }

package/package.json

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

package/readme.md

@@ -92,4 +92,7 @@ componentDidMount() { // 在节点渲染后绑定点击事件
 
 0.2.4
 1. 拆分margin中的margin-left转换为padding-left
-2. 修复在嵌套节点中加br不会被拆成不同段落的问题
+2. 修复在嵌套节点中加br不会被拆成不同段落的问题
+
+0.2.5
+1. 修复img节点丢失的问题