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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/RichTextUtils.d.ts +0 -2
  2. package/dist/RichTextUtils.js +49 -44
  3. package/package.json +1 -1
package/dist/RichTextUtils.d.ts CHANGED
@@ -22,12 +22,10 @@ export declare namespace RichText {
22
22
  * @param str 管理端下发的富文本
23
23
  * @param config 配置
24
24
  * @param config.lineHeightScale 行高缩放
25
- * @param config.isToRem 是否将节点的 px 单位转换为 rem 的单位
26
25
  * @returns pixui的innerHtml可以使用的格式
27
26
  */
28
27
  const convertRichTextToPixuiStyle: (str: string, config?: {
29
28
  lineHeightScale?: number;
30
- isToRem?: boolean;
31
29
  }) => string;
32
30
  /**
33
31
  * 为富文本中的链接节点绑定点击事件
package/dist/RichTextUtils.js CHANGED
@@ -32,6 +32,15 @@ var __importStar = (this && this.__importStar) || (function () {
32
32
  return result;
33
33
  };
34
34
  })();
35
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
36
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
37
+ if (ar || !(i in from)) {
38
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
39
+ ar[i] = from[i];
40
+ }
41
+ }
42
+ return to.concat(ar || Array.prototype.slice.call(from));
43
+ };
35
44
  Object.defineProperty(exports, "__esModule", { value: true });
36
45
  exports.RichText = void 0;
37
46
  var cheerio = __importStar(require("cheerio"));
@@ -47,12 +56,26 @@ var RichText;
47
56
  })(LinkNodeType = RichText.LinkNodeType || (RichText.LinkNodeType = {}));
48
57
  // 存储需要绑定点击事件的节点信息
49
58
  var linkNodes = [];
59
+ // 添加工具函数来正确处理CSS样式拼接
60
+ var mergeStyles = function () {
61
+ var styles = [];
62
+ for (var _i = 0; _i < arguments.length; _i++) {
63
+ styles[_i] = arguments[_i];
64
+ }
65
+ return styles
66
+ .filter(function (style) { return style && style.trim(); })
67
+ .map(function (style) {
68
+ var trimmed = style.trim();
69
+ return trimmed.endsWith(";") ? trimmed : trimmed + ";";
70
+ })
71
+ .join(" ")
72
+ .replace(/\s*;\s*$/, ";"); // 确保最后只有一个分号
73
+ };
50
74
  /**
51
75
  * 富文本组件，将富文本转换成pixui的innerHtml可以使用的格式
52
76
  * @param str 管理端下发的富文本
53
77
  * @param config 配置
54
78
  * @param config.lineHeightScale 行高缩放
55
- * @param config.isToRem 是否将节点的 px 单位转换为 rem 的单位
56
79
  * @returns pixui的innerHtml可以使用的格式
57
80
  */
58
81
  RichText.convertRichTextToPixuiStyle = function (str, config) {
@@ -64,10 +87,10 @@ var RichText;
64
87
  {
65
88
  var _loop_1 = function (i) {
66
89
  var indent = "ql-indent-".concat(i);
67
- var extStyle = "padding-left: ".concat(i * 2, "rem;");
90
+ var extStyle = "padding-left: ".concat(i * 2, "rem");
68
91
  $(".".concat(indent)).each(function () {
69
92
  var oriStyle = $(this).attr("style") || "";
70
- $(this).attr("style", "".concat(oriStyle, " ").concat(extStyle));
93
+ $(this).attr("style", mergeStyles(oriStyle, extStyle));
71
94
  $(this).removeClass(indent);
72
95
  });
73
96
  };
@@ -86,26 +109,6 @@ var RichText;
86
109
  $(this).attr("height", "".concat(height, "px"));
87
110
  }
88
111
  });
89
- // 将px转换为rem，font-size不转换
90
- if (config === null || config === void 0 ? void 0 : config.isToRem) {
91
- $("*").each(function () {
92
- var $element = $(this);
93
- var style = $element.attr("style");
94
- if (style) {
95
- var newStyle = style.replace(/([\w-]+)\s*:\s*([^;]+)/g, function (match, property, value) {
96
- if (property.trim() !== "font-size" && property.trim() !== "letter-spacing") {
97
- var newValue = value.replace(/(\d+(?:\.\d+)?)px/g, function (pxMatch, pxValue) {
98
- var remValue = parseFloat(pxValue) / 100;
99
- return "".concat(remValue, "rem");
100
- });
101
- return "".concat(property, ": ").concat(newValue);
102
- }
103
- return match;
104
- });
105
- $element.attr("style", newStyle);
106
- }
107
- });
108
- }
109
112
  // 处理列表项
110
113
  {
111
114
  /**
@@ -183,10 +186,10 @@ var RichText;
183
186
  // 为该列表生成HTML
184
187
  var listHtml = items
185
188
  .map(function (item) {
186
- return ("<div style=\"".concat(item.style, " padding-left: ").concat(item.paddingLeft, "rem; flex-shrink: 0; width: 100%; flex-direction: row; display: flex;\" data-list-item=\"true\">") +
187
- "<text style=\"flex-shrink: 0; width: 100%; line-height: 1; display: flex; flex-direction: row;\">" +
188
- "<div style=\"word-break: break-word; flex-shrink: 0; margin-right: 0.5rem;\">".concat(item.marker, "</div>") +
189
- "<div style=\"word-break: break-word; flex-shrink: 0; flex: 1;\">".concat(item.textContent, "</div>") +
189
+ return ("<div style=\"".concat(mergeStyles(item.style, "padding-left: ".concat(item.paddingLeft, "rem"), "flex-shrink: 0", "width: 100%", "flex-direction: row", "display: flex"), "\" data-list-item=\"true\">") +
190
+ "<text style=\"".concat(mergeStyles("flex-shrink: 0", "width: 100%", "line-height: 1", "display: flex", "flex-direction: row"), "\">") +
191
+ "<div style=\"".concat(mergeStyles("word-break: break-word", "flex-shrink: 0", "margin-right: 0.5rem"), "\">").concat(item.marker, "</div>") +
192
+ "<div style=\"".concat(mergeStyles("word-break: break-word", "flex-shrink: 0", "flex: 1"), "\">").concat(item.textContent, "</div>") +
190
193
  "</text>" +
191
194
  "</div>");
192
195
  })
@@ -199,7 +202,7 @@ var RichText;
199
202
  }
200
203
  //pixui连续的br不生效，用透明文字占位
201
204
  $("br").each(function () {
202
- $(this).replaceWith("<span style='color: transparent; flex-shrink: 0;font-size: 20px;' class='pixui-richtext-br-placeholder'>1</span>");
205
+ $(this).replaceWith("<span style=\"".concat(mergeStyles("color: transparent", "flex-shrink: 0", "font-size: 20px"), "\" class='pixui-richtext-br-placeholder'>1</span>"));
203
206
  });
204
207
  //将 a 标签替换为简单div，处理 href，预处理内部样式标签并合并样式
205
208
  $("a").each(function (i, ele) {
@@ -233,7 +236,7 @@ var RichText;
233
236
  // 合并所有样式
234
237
  var finalStyle = originalStyle;
235
238
  if (mergedStyles.length > 0) {
236
- finalStyle = finalStyle ? "".concat(finalStyle, "; ").concat(mergedStyles.join("; ")) : mergedStyles.join("; ");
239
+ finalStyle = mergeStyles.apply(void 0, __spreadArray([originalStyle], mergedStyles, false));
237
240
  }
238
241
  if (href) {
239
242
  linkNodes.push({
@@ -243,7 +246,7 @@ var RichText;
243
246
  });
244
247
  }
245
248
  // 转换为简单div，样式已合并
246
- $(this).replaceWith("<div style=\"".concat(finalStyle, "\" id=\"").concat(id, "\">").concat(textContent, "</div>"));
249
+ $(this).replaceWith("<div style=\"".concat(finalStyle, "\" id=\"").concat(id, "\" class=\"PA_RichTextHref_ATag\" data-href=\"").concat(href, "\">").concat(textContent, "</div>"));
247
250
  });
248
251
  //找到所有的文字节点，外层包裹text标签
249
252
  $("*").each(function () {
@@ -273,7 +276,7 @@ var RichText;
273
276
  if (this.type === "text") {
274
277
  var text = this.data.trim();
275
278
  if (text.length > 0) {
276
- $(this).replaceWith("<text style=\"word-break: break-word;flex-shrink: 0;flex-direction: row;\">".concat(text, "</text>"));
279
+ $(this).replaceWith("<text style=\"".concat(mergeStyles("word-break: break-word", "flex-shrink: 0", "flex-direction: row"), "\">").concat(text, "</text>"));
277
280
  }
278
281
  }
279
282
  });
@@ -282,33 +285,33 @@ var RichText;
282
285
  $("strong").each(function () {
283
286
  var html = $(this).html();
284
287
  var style = $(this).attr("style") || "";
285
- $(this).replaceWith("<text style=\"".concat(style, " font-weight: bold;flex-shrink: 0;\">").concat(html, "</text>"));
288
+ $(this).replaceWith("<text style=\"".concat(mergeStyles(style, "font-weight: bold", "flex-shrink: 0"), "\">").concat(html, "</text>"));
286
289
  });
287
290
  $("em").each(function () {
288
291
  var html = $(this).html();
289
292
  var style = $(this).attr("style") || "";
290
- $(this).replaceWith("<text style=\"".concat(style, " font-style: italic;flex-shrink: 0;\">").concat(html, "</text>"));
293
+ $(this).replaceWith("<text style=\"".concat(mergeStyles(style, "font-style: italic", "flex-shrink: 0"), "\">").concat(html, "</text>"));
291
294
  });
292
295
  $("u").each(function () {
293
296
  var html = $(this).html();
294
297
  var style = $(this).attr("style") || "";
295
- $(this).replaceWith("<text style=\"".concat(style, " text-decoration: underline;flex-shrink: 0;\">").concat(html, "</text>"));
298
+ $(this).replaceWith("<text style=\"".concat(mergeStyles(style, "text-decoration: underline", "flex-shrink: 0"), "\">").concat(html, "</text>"));
296
299
  });
297
300
  $("s").each(function () {
298
301
  var html = $(this).html();
299
302
  var style = $(this).attr("style") || "";
300
- $(this).replaceWith("<text style=\"".concat(style, " text-decoration: line-through;flex-shrink: 0;\">").concat(html, "</text>"));
303
+ $(this).replaceWith("<text style=\"".concat(mergeStyles(style, "text-decoration: line-through", "flex-shrink: 0"), "\">").concat(html, "</text>"));
301
304
  });
302
305
  $("span").each(function () {
303
306
  var html = $(this).html();
304
307
  var style = $(this).attr("style") || "";
305
- $(this).replaceWith("<text style=\"".concat(style, " flex-shrink: 0;\">").concat(html, "</text>"));
308
+ $(this).replaceWith("<text style=\"".concat(mergeStyles(style, "flex-shrink: 0"), "\">").concat(html, "</text>"));
306
309
  });
307
310
  //p换成div
308
311
  $("p").each(function () {
309
312
  var html = $(this).html();
310
313
  var style = $(this).attr("style") || "";
311
- $(this).replaceWith("<div style=\"".concat(style, " ;flex-shrink: 0;width:100%;\">").concat(html, "</div>"));
314
+ $(this).replaceWith("<div style=\"".concat(mergeStyles(style, "flex-shrink: 0", "width:100%"), "\">").concat(html, "</div>"));
312
315
  });
313
316
  //处理 img 上的 href
314
317
  $("img").each(function (i, ele) {
@@ -323,6 +326,8 @@ var RichText;
323
326
  });
324
327
  }
325
328
  $(this).attr("href", "");
329
+ $(this).attr("class", "PA_RichTextHref_ImgTag");
330
+ $(this).attr("data-href", href);
326
331
  });
327
332
  //补充 flex-shrink: 0
328
333
  ["h1", "h2", "h3", "h4", "h5", "h6", "a", "img", "div"].forEach(function (tag) {
@@ -332,7 +337,7 @@ var RichText;
332
337
  var inListItem = $(this).closest("[data-list-item='true']").length > 0;
333
338
  if (!isListItem && !inListItem) {
334
339
  var style = $(this).attr("style") || "";
335
- $(this).attr("style", "".concat(style, " flex-shrink: 0;"));
340
+ $(this).attr("style", mergeStyles(style, "flex-shrink: 0"));
336
341
  }
337
342
  });
338
343
  });
@@ -348,7 +353,7 @@ var RichText;
348
353
  var $child = $(this);
349
354
  var childStyle = $child.attr("style") || "";
350
355
  // 合并style属性，将父节点的style附加到子节点上
351
- var mergedStyle = "".concat(parentStyle, "; ").concat(childStyle);
356
+ var mergedStyle = mergeStyles(parentStyle, childStyle);
352
357
  // 更新子元素的style属性
353
358
  $child.attr("style", mergedStyle);
354
359
  });
@@ -387,7 +392,7 @@ var RichText;
387
392
  }
388
393
  var text = $(this).html();
389
394
  var style = $(this).attr("style") || "";
390
- $(this).replaceWith("<div style=\"".concat(style, "\">").concat(text, "</div>"));
395
+ $(this).replaceWith("<div style=\"".concat(mergeStyles(style, "word-break: break-word", "flex-shrink: 0", "flex-direction: row"), "\">").concat(text, "</div>"));
391
396
  });
392
397
  var taghtml = $(node).html() || "";
393
398
  var tagstyle = $(node).attr("style") || "";
@@ -404,7 +409,7 @@ var RichText;
404
409
  }
405
410
  }
406
411
  //自己的子节点外套一个text，自己不变
407
- $(node).replaceWith("<".concat(tag, " style=\"").concat(tagstyle, ";flex-direction: row;\"").concat(idAttr).concat(customAttrs, "><text style=\"flex-shrink: 0;width: 100%;\">").concat(taghtml, "</text></").concat(tag, ">"));
412
+ $(node).replaceWith("<".concat(tag, " style=\"").concat(mergeStyles(tagstyle, "flex-direction: row"), "\"").concat(idAttr).concat(customAttrs, "><text style=\"").concat(mergeStyles("flex-shrink: 0", "width: 100%"), "\">").concat(taghtml, "</text></").concat(tag, ">"));
408
413
  }
409
414
  });
410
415
  //text-indent 处理首行缩进
@@ -416,7 +421,7 @@ var RichText;
416
421
  * 状态为<div style=text-indent:xxx><text><透明字符节点/><div style=样式>文字</div></text></div>
417
422
  * 属性是几 em 就加几个字符
418
423
  * */
419
- var $spacerText = $("<div style=\"color: transparent; flex-shrink: 0;\">".concat("一".repeat(parseInt(textIndent)), "</div>"));
424
+ var $spacerText = $("<div style=\"".concat(mergeStyles("color: transparent", "flex-shrink: 0", "font-size: 16px"), "\">").concat("一".repeat(parseInt(textIndent)), "</div>"));
420
425
  // 寻找子节点中的text节点
421
426
  var textChild = $(this).children("text").first();
422
427
  if (textChild.length > 0) {
@@ -486,7 +491,7 @@ var RichText;
486
491
  var style = $(this).attr("style") || "";
487
492
  //如果没有fontsize
488
493
  if (!style.includes("font-size")) {
489
- $(this).attr("style", "".concat(style, " font-size:").concat(hTagRem_1[idx]));
494
+ $(this).attr("style", mergeStyles(style, "font-size:".concat(hTagRem_1[idx])));
490
495
  }
491
496
  });
492
497
  });
@@ -494,7 +499,7 @@ var RichText;
494
499
  //手动替换nbsp
495
500
  var res = $.html();
496
501
  res = res.replaceAll(/<img([^>]+)>/g, "<img$1 />").replaceAll(/&nbsp;/g, " ");
497
- // console.log(res);
502
+ console.log(res);
498
503
  return res;
499
504
  }
500
505
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pixui-dev/pixui-richtext-helper",
3
- "version": "0.1.1-beta.1",
3
+ "version": "0.1.1-beta.2",
4
4
  "description": "pixui richtext helper",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",