@pixui-dev/pixui-richtext-helper 0.1.0

package/dist/RichTextUtils.d.ts

@@ -0,0 +1,37 @@
+export declare namespace RichText {
+    /**
+     * 富文本中的超链接节点类型
+     */
+    enum LinkNodeType {
+        IMG = "img",
+        DIV = "div"
+    }
+    /**
+     * 富文本超链接点击回调参数
+     */
+    interface LinkClickParams {
+        /** 节点类型 */
+        type: LinkNodeType;
+        /** 原始href内容 */
+        href: string;
+        /** 节点id */
+        id: string;
+    }
+    /**
+     * 富文本组件，将富文本转换成pixui的innerHtml可以使用的格式
+     * @param str 管理端下发的富文本
+     * @param config 配置
+     * @param config.lineHeightScale 行高缩放
+     * @param config.isToRem 是否将节点的 px 单位转换为 rem 的单位
+     * @returns pixui的innerHtml可以使用的格式
+     */
+    const convertRichTextToPixuiStyle: (str: string, config?: {
+        lineHeightScale?: number;
+        isToRem?: boolean;
+    }) => string;
+    /**
+     * 为富文本中的链接节点绑定点击事件
+     * @param linkClickHandler 点击事件回调函数
+     */
+    const bindLinkClickEvents: (linkClickHandler: (params: LinkClickParams) => void) => void;
+}

package/dist/RichTextUtils.js

@@ -0,0 +1,348 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichText = void 0;
+var cheerio = __importStar(require("cheerio"));
+var RichText;
+(function (RichText) {
+    /**
+     * 富文本中的超链接节点类型
+     */
+    var LinkNodeType;
+    (function (LinkNodeType) {
+        LinkNodeType["IMG"] = "img";
+        LinkNodeType["DIV"] = "div";
+    })(LinkNodeType = RichText.LinkNodeType || (RichText.LinkNodeType = {}));
+    // 存储需要绑定点击事件的节点信息
+    var linkNodes = [];
+    /**
+     * 富文本组件，将富文本转换成pixui的innerHtml可以使用的格式
+     * @param str 管理端下发的富文本
+     * @param config 配置
+     * @param config.lineHeightScale 行高缩放
+     * @param config.isToRem 是否将节点的 px 单位转换为 rem 的单位
+     * @returns pixui的innerHtml可以使用的格式
+     */
+    RichText.convertRichTextToPixuiStyle = function (str, config) {
+        var $ = cheerio.load(str, null, false);
+        var hrefIdCnt = 0;
+        linkNodes = []; // 重置链接节点信息
+        // 节点处理
+        {
+            var _loop_1 = function (i) {
+                var indent = "ql-indent-".concat(i);
+                var extStyle = "padding-left: ".concat(i * 2, "rem;");
+                $(".".concat(indent)).each(function () {
+                    var oriStyle = $(this).attr("style") || "";
+                    $(this).attr("style", "".concat(oriStyle, " ").concat(extStyle));
+                    $(this).removeClass(indent);
+                });
+            };
+            //合并ql-indent class到style中
+            for (var i = 1; i <= 10; i++) {
+                _loop_1(i);
+            }
+            // 将px转换为rem，font-size不转换
+            if (config === null || config === void 0 ? void 0 : config.isToRem) {
+                $("*").each(function () {
+                    var $element = $(this);
+                    var style = $element.attr("style");
+                    if (style) {
+                        var newStyle = style.replace(/([\w-]+)\s*:\s*([^;]+)/g, function (match, property, value) {
+                            if (property.trim() !== "font-size" && property.trim() !== "letter-spacing") {
+                                var newValue = value.replace(/(\d+(?:\.\d+)?)px/g, function (pxMatch, pxValue) {
+                                    var remValue = parseFloat(pxValue) / 100;
+                                    return "".concat(remValue, "rem");
+                                });
+                                return "".concat(property, ": ").concat(newValue);
+                            }
+                            return match;
+                        });
+                        $element.attr("style", newStyle);
+                    }
+                });
+            }
+            //pixui不支持ol，li节点，将其替换成div并且手动补充li节点前面的标号和后面的br节点
+            $("ol").each(function () {
+                var i = 1;
+                $(this)
+                    .children("li")
+                    .each(function () {
+                    $(this).prepend("<text style=\"flex-shrink: 0;\">".concat(i++, ".</text>"));
+                });
+                $(this).replaceWith($(this).html() || "");
+            });
+            $("li").each(function () {
+                $(this).before("<br>");
+            });
+            //pixui连续的br不生效，用透明文字占位
+            $("br").each(function () {
+                $(this).replaceWith("<span style='color: transparent; flex-shrink: 0;font-size: 20px;' class='pixui-richtext-br-placeholder'>1</span>");
+            });
+            //找到所有的文字节点，外层包裹text标签
+            $("*").each(function () {
+                $(this)
+                    .contents()
+                    .each(function () {
+                    if (this.type === "text") {
+                        var text = this.data.trim();
+                        if (text.length > 0) {
+                            $(this).replaceWith("<text style=\"word-break: break-word;flex-shrink: 0;flex-direction: row;\">".concat(text, "</text>"));
+                        }
+                    }
+                });
+            });
+            //将strong em u s标签替换成text标签
+            $("strong").each(function () {
+                var html = $(this).html();
+                var style = $(this).attr("style") || "";
+                $(this).replaceWith("<text style=\"".concat(style, " font-weight: bold;flex-shrink: 0;\">").concat(html, "</text>"));
+            });
+            $("em").each(function () {
+                var html = $(this).html();
+                var style = $(this).attr("style") || "";
+                $(this).replaceWith("<text style=\"".concat(style, " font-style: italic;flex-shrink: 0;\">").concat(html, "</text>"));
+            });
+            $("u").each(function () {
+                var html = $(this).html();
+                var style = $(this).attr("style") || "";
+                $(this).replaceWith("<text style=\"".concat(style, " text-decoration: underline;flex-shrink: 0;\">").concat(html, "</text>"));
+            });
+            $("s").each(function () {
+                var html = $(this).html();
+                var style = $(this).attr("style") || "";
+                $(this).replaceWith("<text style=\"".concat(style, " text-decoration: line-through;flex-shrink: 0;\">").concat(html, "</text>"));
+            });
+            $("span").each(function () {
+                var html = $(this).html();
+                var style = $(this).attr("style") || "";
+                $(this).replaceWith("<text style=\"".concat(style, " flex-shrink: 0;\">").concat(html, "</text>"));
+            });
+            //p换成div
+            $("p").each(function () {
+                var html = $(this).html();
+                var style = $(this).attr("style") || "";
+                $(this).replaceWith("<div style=\"".concat(style, " ;flex-shrink: 0;width:100%;\">").concat(html, "</div>"));
+            });
+            //处理 img 上的 href
+            $("img").each(function (i, ele) {
+                var id = "PA_RichTextHrefId_".concat(hrefIdCnt++);
+                $(this).attr("id", id);
+                var href = $(this).attr("href");
+                if (href) {
+                    linkNodes.push({
+                        type: LinkNodeType.IMG,
+                        href: href,
+                        id: id,
+                    });
+                }
+                $(this).attr("href", "");
+            });
+            //将 a 标签替换为div，处理 href
+            $("a").each(function (i, ele) {
+                var id = "PA_RichTextHrefId_".concat(hrefIdCnt++);
+                var href = $(this).attr("href");
+                var style = $(this).attr("style") || "";
+                var html = $(this).html();
+                if (href) {
+                    linkNodes.push({
+                        type: LinkNodeType.DIV,
+                        href: href,
+                        id: id,
+                    });
+                }
+                $(this).replaceWith("<div style=\"".concat(style, "\" id=\"").concat(id, "\">").concat(html, "</div>"));
+            });
+            //补充 flex-shrink: 0
+            ["h1", "h2", "h3", "h4", "h5", "h6", "a", "img", "div"].forEach(function (tag) {
+                $("".concat(tag)).each(function () {
+                    var style = $(this).attr("style") || "";
+                    $(this).attr("style", "".concat(style, " flex-shrink: 0;"));
+                });
+            });
+        }
+        // 层级处理
+        {
+            //一行中的文字配置了不同样式的时候文字节点会嵌套，导致pixui样式异常。将嵌套的text节点摊平，同时合并内外的style
+            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") || "";
+                        // 合并style属性，将父节点的style附加到子节点上
+                        var mergedStyle = "".concat(parentStyle, "; ").concat(childStyle);
+                        // 更新子元素的style属性
+                        $child.attr("style", mergedStyle);
+                    });
+                    //去掉父节点
+                    if ($this.children("text").length > 0) {
+                        $this.replaceWith($this.html() || "");
+                    }
+                });
+            }
+            //!!一行的text节点会并列在父节点下无法换行，将其修改为div节点，外层再包一个text节点
+            // 会变成<段落div><text><单独一种样式div>文字
+            var nodearr_1 = [];
+            ["h1", "h2", "h3", "h4", "h5", "h6", "div"].map(function (tag) {
+                // text的父节点
+                $("".concat(tag)).each(function () {
+                    nodearr_1.push(this);
+                });
+            });
+            nodearr_1.forEach(function (node) {
+                var tag = $(node).prop("tagName");
+                $(node)
+                    .children("text")
+                    .each(function () {
+                    var text = $(this).html();
+                    var style = $(this).attr("style") || "";
+                    $(this).replaceWith("<div style=\"".concat(style, "\">").concat(text, "</div>"));
+                });
+                var taghtml = $(node).html();
+                var tagstyle = $(node).attr("style") || "";
+                //自己的子节点外套一个text，自己不变
+                $(node).replaceWith("<".concat(tag, " style=\"").concat(tagstyle, ";flex-direction: row;\"><text style=\"flex-shrink: 0;width: 100%;\" tag=\"\u6BB5\u843Dtext\">").concat(taghtml, "</text></").concat(tag, ">"));
+            });
+            //text-indent 处理首行缩进
+            $("*").each(function () {
+                var textIndent = $(this).css("text-indent");
+                if (textIndent) {
+                    /**
+                     * 创建透明字符占位，样式会加在段落的p节点上，将透明字符添加到text节点下保证换行以后状态正确。
+                     * 状态为<div style=text-indent:xxx><text><透明字符节点/><div style=样式>文字</div></text></div>
+                     * 属性是几 em 就加几个字符
+                     * */
+                    var $spacerText = $("<div style=\"color: transparent; flex-shrink: 0;\">".concat("一".repeat(parseInt(textIndent)), "</div>"));
+                    // 寻找子节点中的text节点
+                    var textChild = $(this).children("text").first();
+                    if (textChild.length > 0) {
+                        var firstTextChild = textChild.children().first();
+                        if (firstTextChild.length > 0) {
+                            // 如果text节点有子节点，在第一个子节点前插入
+                            firstTextChild.before($spacerText);
+                        }
+                        else {
+                            // 如果text节点没有子节点，直接添加
+                            textChild.append($spacerText);
+                        }
+                    }
+                }
+            });
+            //pixui 的 line-height只在 text 上生效，所以将所有的 div 上的 line-height 转移到父 text 上
+            //当前的结构为 div > text > div,只处理一层就行
+            //遍历每个 text 的子 div，将其中最大的 line-height 转移到 text 上
+            $("text").each(function () {
+                var $text = $(this);
+                var maxLineHeight = 0;
+                $text.children("div").each(function () {
+                    var lineHeight = parseInt($(this).css("line-height") || "1");
+                    maxLineHeight = Math.max(maxLineHeight, lineHeight);
+                });
+                var lineHeightScale = (config === null || config === void 0 ? void 0 : config.lineHeightScale) || 1;
+                // pixui 中的实际显示的距离可能与网页中实际显示的距离差距较大
+                $text.css("line-height", maxLineHeight * lineHeightScale + "");
+            });
+            //将div中的letter-spacing转移到text上
+            $("text").each(function () {
+                var $text = $(this);
+                var maxLetterSpacing = 0;
+                $text.children("div").each(function () {
+                    var letterSpacing = $(this).css("letter-spacing") || "0";
+                    var letterSpacingNum = parseInt(letterSpacing);
+                    maxLetterSpacing = Math.max(maxLetterSpacing, letterSpacingNum);
+                });
+                if (maxLetterSpacing > 0) {
+                    $text.css("letter-spacing", maxLetterSpacing + "rem");
+                }
+            });
+            //将div中的text-align转移到text子节点上
+            $("div").each(function () {
+                var textAlign = $(this).css("text-align") || "";
+                textAlign != "" &&
+                    $(this)
+                        .children("text")
+                        .each(function () {
+                        $(this).css("text-align", textAlign);
+                    });
+                $(this).css("text-align", "");
+            });
+            //去除空的text节点
+            $("text").each(function () {
+                var t = $(this).html() || "";
+                if (t.trim() == "") {
+                    $(this).remove();
+                }
+            });
+            // $(`div`).each(function () {
+            //     let style = $(this).attr("style") || "";
+            //     console.log("???", style);
+            //     //如果没有fontsize
+            //     if (!style.includes("font-size")) {
+            //         $(this).attr("style", `${style} font-size:16px;`);
+            //     }
+            // });
+            var hTagRem_1 = ["2rem", "1.5rem", "1.17rem", "1rem", "0.83rem", "0.67rem"];
+            ["h1", "h2", "h3", "h4", "h5", "h6"].map(function (tag) {
+                return $("".concat(tag)).each(function () {
+                    var idx = parseInt(tag.replace("h", "")) - 1;
+                    var style = $(this).attr("style") || "";
+                    //如果没有fontsize
+                    if (!style.includes("font-size")) {
+                        $(this).attr("style", "".concat(style, " font-size:").concat(hTagRem_1[idx]));
+                    }
+                });
+            });
+            //一些标签会没有结束/,手动补充
+            //手动替换nbsp
+            var res = $.html();
+            res = res.replaceAll(/<img([^>]+)>/g, "<img$1 />").replaceAll(/&nbsp;/g, " ");
+            // console.log(res);
+            return res;
+        }
+    };
+    /**
+     * 为富文本中的链接节点绑定点击事件
+     * @param linkClickHandler 点击事件回调函数
+     */
+    RichText.bindLinkClickEvents = function (linkClickHandler) {
+        linkNodes.forEach(function (nodeInfo) {
+            var element = document.getElementById(nodeInfo.id);
+            if (element) {
+                element.onclick = function (e) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    linkClickHandler({
+                        type: nodeInfo.type,
+                        href: nodeInfo.href,
+                        id: nodeInfo.id,
+                    });
+                    return false;
+                };
+            }
+        });
+    };
+})(RichText = exports.RichText || (exports.RichText = {}));

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { RichText } from "./RichTextUtils";
+export { RichText as default } from "./RichTextUtils";

package/dist/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.RichText = void 0;
+var RichTextUtils_1 = require("./RichTextUtils");
+Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichTextUtils_1.RichText; } });
+var RichTextUtils_2 = require("./RichTextUtils");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return RichTextUtils_2.RichText; } });

package/index.js

@@ -0,0 +1,5 @@
+const { RichText } = require("./dist/index");
+
+module.exports = {
+    RichText,
+};

package/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "@pixui-dev/pixui-richtext-helper",
+    "version": "0.1.0",
+    "description": "富文本转换工具，将富文本转换为PixUI可用的格式",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist/**/*",
+        "index.js",
+        "readme.md"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "build": "tsc"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "keywords": [
+        "pixui",
+        "richtext",
+        "html",
+        "converter"
+    ],
+    "author": "pixui-dev",
+    "license": "MIT",
+    "devDependencies": {
+        "@types/node": "^20.0.0",
+        "typescript": "^5.0.0"
+    },
+    "dependencies": {
+        "cheerio": "^1.0.0-rc.12"
+    }
+}

package/readme.md

@@ -0,0 +1,28 @@
+安装
+
+```bash
+yarn add pixui-richtext-helper
+```
+
+使用
+
+```tsx
+import { RichText } from "pixui-richtext-helper";
+
+const richText; // 从管理端获取的富文本数据
+const pixuiStyle = RichText.convertRichTextToPixuiStyle(richText);
+
+<div
+    style={{
+        overflow: "scroll",
+        flexDirection: "column",
+    }}
+    dangerouslySetInnerHTML={{ __html: pixuiStyle }} 
+    /> // 使用富文本组件的返回结果
+
+componentDidMount() { // 在节点渲染后绑定点击事件
+    RichText.bindLinkClickEvents((params) => { //params提供以下信息：超链接节点类型、超链接内容、超链接节点id
+        console.log("out click---------", params.type, params.href, params.id);
+    });
+}
+```