@pixui-dev/pixui-richtext-helper 0.2.6-test.1 → 0.2.7

package/dist/richtext/RichTextCore.d.ts

@@ -24,10 +24,14 @@ export declare class RichTextCore {
      * 富文本转换为 PixUI innerHTML 兼容格式
      * @param str 原始富文本 HTML
      * @param config 可选配置
+     * @param config.lineHeightScale 行高缩放比例
+     * @param config.convertPxToEm 是否转换px为em
+     * @param config.addCosUrlImageMogr2_w 添加cos url图片的mogr2_w参数,如果是cos的图片，可以使用这个配置设置图片宽度最大值。组件会增加参数为 xxx.jpg?imageMogr2/thumbnail/<width>x的参数。参数值取min(img节点样式宽度,addCosUrlImageMogr2_w)
      */
     static convertRichTextToPixuiStyle(str: string, config?: {
         lineHeightScale?: number;
         convertPxToEm?: boolean;
+        addCosUrlImageMogr2_w?: number;
     }): string;
     /**
      * 绑定链接点击事件
@@ -53,6 +57,8 @@ export declare class RichTextCore {
     private static convertAllPxToEm;
     private static preprocess;
     private static fixImgSizeUnit;
+    /** 给 COS 图片自动追加 imageMogr2/thumbnail 参数 */
+    private static handleCosImageMogr2;
     /** 列表处理（将 ol/ul/li 替换为 div 结构） */
     private static handleLists;
     /** 将连续 <br> 替换为透明占位文字，确保 PixUI 换行 */

package/dist/richtext/RichTextCore.js

@@ -143,12 +143,18 @@ var RichTextCore = /** @class */ (function () {
      * 富文本转换为 PixUI innerHTML 兼容格式
      * @param str 原始富文本 HTML
      * @param config 可选配置
+     * @param config.lineHeightScale 行高缩放比例
+     * @param config.convertPxToEm 是否转换px为em
+     * @param config.addCosUrlImageMogr2_w 添加cos url图片的mogr2_w参数,如果是cos的图片，可以使用这个配置设置图片宽度最大值。组件会增加参数为 xxx.jpg?imageMogr2/thumbnail/<width>x的参数。参数值取min(img节点样式宽度,addCosUrlImageMogr2_w)
      */
     RichTextCore.convertRichTextToPixuiStyle = function (str, config) {
         // 重置全局状态
         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;
@@ -171,9 +177,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;
                 // 避免重复绑定
@@ -257,8 +292,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, "")];
                 }
             }
@@ -285,6 +324,7 @@ var RichTextCore = /** @class */ (function () {
         // 按旧实现顺序进行处理，但重构为独立函数划分
         this.preprocess($);
         this.fixImgSizeUnit($);
+        this.handleCosImageMogr2($, config);
         this.handleLists($, (config === null || config === void 0 ? void 0 : config.lineHeightScale) || 1);
         this.replaceBrWithPlaceholder($);
         this.handleAnchorTag($);
@@ -410,6 +450,64 @@ var RichTextCore = /** @class */ (function () {
             }
         });
     };
+    /** 给 COS 图片自动追加 imageMogr2/thumbnail 参数 */
+    RichTextCore.handleCosImageMogr2 = function ($, config) {
+        var maxW = config === null || config === void 0 ? void 0 : config.addCosUrlImageMogr2_w;
+        if (!maxW)
+            return;
+        var extractNumber = function (str) {
+            if (!str)
+                return undefined;
+            var m = str.match(/(\d+(?:\.\d+)?)/);
+            if (m) {
+                var num = parseInt(m[1]);
+                if (!isNaN(num))
+                    return num;
+            }
+            return undefined;
+        };
+        $("img").each(function () {
+            var src = $(this).attr("src") || "";
+            if (!src)
+                return;
+            // 已有 thumbnail 宽度
+            var thumbMatch = src.match(/imageMogr2\/thumbnail\/(\d+)x/i);
+            var existingThumbW = thumbMatch ? parseInt(thumbMatch[1]) : undefined;
+            // width 属性
+            var widthAttrW = extractNumber($(this).attr("width"));
+            // style width
+            var styleObj = parseStyleString($(this).attr("style") || "");
+            var styleWidthW = extractNumber(styleObj["width"]);
+            // 计算最小宽度
+            var candidates = [existingThumbW, widthAttrW, styleWidthW, maxW].filter(function (v) { return v !== undefined && v > 0; });
+            if (candidates.length === 0)
+                return; // 无可用宽度
+            var finalW = Math.min.apply(Math, candidates);
+            // 如果已存在 thumbnail 参数且宽度一致，无需处理
+            if (existingThumbW !== undefined) {
+                if (existingThumbW === finalW)
+                    return;
+                // 替换为更小的宽度
+                src = src.replace(/imageMogr2\/thumbnail\/(\d+)x/i, "imageMogr2/thumbnail/".concat(finalW, "x"));
+            }
+            else {
+                // 未存在 thumbnail 参数，需要追加
+                var appendedParam = "imageMogr2/thumbnail/".concat(finalW, "x");
+                if (src.includes("?")) {
+                    // 已有查询部分，使用 | 追加
+                    if (!src.endsWith("|") && !src.endsWith("&") && !src.endsWith("?")) {
+                        src += "|";
+                    }
+                    src += appendedParam;
+                }
+                else {
+                    // 无查询部分，直接添加
+                    src += "?".concat(appendedParam);
+                }
+            }
+            $(this).attr("src", src);
+        });
+    };
     /** 列表处理（将 ol/ul/li 替换为 div 结构） */
     RichTextCore.handleLists = function ($, lineHeightScale) {
         if (lineHeightScale === void 0) { lineHeightScale = 1; }
@@ -523,7 +621,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 });
             }
@@ -610,7 +708,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", "");
@@ -698,7 +796,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.6-test.1",
+    "version": "0.2.7",
     "description": "pixui richtext helper",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

package/readme.md

@@ -95,4 +95,12 @@ componentDidMount() { // 在节点渲染后绑定点击事件
 2. 修复在嵌套节点中加br不会被拆成不同段落的问题
 
 0.2.5
-1. 修复img节点丢失的问题
+1. 修复img节点丢失的问题
+
+0.2.6
+1. 修复在超链接中添加转义符导致跳转信息不完整的问题
+2. 修复带超链接的img节点中出现一些多余的属性
+3. 增加将富文本中的px单位的属性统一替换为em单位的选项
+
+0.2.7
+1. 增加addCosUrlImageMogr2_w参数