@pixui-dev/pixui-richtext-helper 0.2.0 → 0.2.1
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.
package/dist/RichText.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { RichTextCore, LinkNodeType, LinkClickParams } from "./richtext/RichTextCore";
|
|
2
2
|
/**
|
|
3
3
|
* 对外暴露的 RichText 组件。
|
|
4
4
|
* 保持旧版使用方式不变,内部委托给 RichText_Refactor 实现。
|
|
@@ -8,14 +8,14 @@ export declare const RichText: {
|
|
|
8
8
|
LinkNodeType: typeof LinkNodeType;
|
|
9
9
|
/**
|
|
10
10
|
* 将富文本转换为 PixUI innerHTML 兼容格式
|
|
11
|
-
* @see
|
|
11
|
+
* @see RichTextCore.convertRichTextToPixuiStyle
|
|
12
12
|
*/
|
|
13
|
-
convertRichTextToPixuiStyle: typeof
|
|
13
|
+
convertRichTextToPixuiStyle: typeof RichTextCore.convertRichTextToPixuiStyle;
|
|
14
14
|
/**
|
|
15
15
|
* 绑定富文本中的链接点击事件
|
|
16
|
-
* @see
|
|
16
|
+
* @see RichTextCore.bindLinkClickEvents
|
|
17
17
|
*/
|
|
18
|
-
bindLinkClickEvents: typeof
|
|
18
|
+
bindLinkClickEvents: typeof RichTextCore.bindLinkClickEvents;
|
|
19
19
|
};
|
|
20
20
|
export type { LinkClickParams };
|
|
21
21
|
export { LinkNodeType };
|
package/dist/RichText.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.LinkNodeType = exports.RichText = void 0;
|
|
4
|
-
var
|
|
5
|
-
Object.defineProperty(exports, "LinkNodeType", { enumerable: true, get: function () { return
|
|
4
|
+
var RichTextCore_1 = require("./richtext/RichTextCore");
|
|
5
|
+
Object.defineProperty(exports, "LinkNodeType", { enumerable: true, get: function () { return RichTextCore_1.LinkNodeType; } });
|
|
6
6
|
/**
|
|
7
7
|
* 对外暴露的 RichText 组件。
|
|
8
8
|
* 保持旧版使用方式不变,内部委托给 RichText_Refactor 实现。
|
|
9
9
|
*/
|
|
10
10
|
exports.RichText = {
|
|
11
11
|
/** 链接节点类型枚举 */
|
|
12
|
-
LinkNodeType:
|
|
12
|
+
LinkNodeType: RichTextCore_1.LinkNodeType,
|
|
13
13
|
/**
|
|
14
14
|
* 将富文本转换为 PixUI innerHTML 兼容格式
|
|
15
|
-
* @see
|
|
15
|
+
* @see RichTextCore.convertRichTextToPixuiStyle
|
|
16
16
|
*/
|
|
17
|
-
convertRichTextToPixuiStyle:
|
|
17
|
+
convertRichTextToPixuiStyle: RichTextCore_1.RichTextCore.convertRichTextToPixuiStyle,
|
|
18
18
|
/**
|
|
19
19
|
* 绑定富文本中的链接点击事件
|
|
20
|
-
* @see
|
|
20
|
+
* @see RichTextCore.bindLinkClickEvents
|
|
21
21
|
*/
|
|
22
|
-
bindLinkClickEvents:
|
|
22
|
+
bindLinkClickEvents: RichTextCore_1.RichTextCore.bindLinkClickEvents,
|
|
23
23
|
};
|
|
24
24
|
exports.default = exports.RichText;
|
|
@@ -13,9 +13,9 @@ export interface LinkClickParams {
|
|
|
13
13
|
id: string;
|
|
14
14
|
}
|
|
15
15
|
/*****************************************************
|
|
16
|
-
*
|
|
16
|
+
* RichTextCore 主类
|
|
17
17
|
*****************************************************/
|
|
18
|
-
export declare class
|
|
18
|
+
export declare class RichTextCore {
|
|
19
19
|
private static linkNodes;
|
|
20
20
|
private static hrefIdCnt;
|
|
21
21
|
/**
|
|
@@ -42,7 +42,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
42
42
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
43
43
|
};
|
|
44
44
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
45
|
-
exports.
|
|
45
|
+
exports.RichTextCore = exports.LinkNodeType = void 0;
|
|
46
46
|
var cheerio = __importStar(require("cheerio"));
|
|
47
47
|
/*****************************************************
|
|
48
48
|
* 类型、枚举定义
|
|
@@ -107,31 +107,31 @@ var mergeStyles = function () {
|
|
|
107
107
|
return serializeStyleObject(mergedStyleObj);
|
|
108
108
|
};
|
|
109
109
|
/*****************************************************
|
|
110
|
-
*
|
|
110
|
+
* RichTextCore 主类
|
|
111
111
|
*****************************************************/
|
|
112
|
-
var
|
|
113
|
-
function
|
|
112
|
+
var RichTextCore = /** @class */ (function () {
|
|
113
|
+
function RichTextCore() {
|
|
114
114
|
}
|
|
115
115
|
/**
|
|
116
116
|
* 富文本转换为 PixUI innerHTML 兼容格式
|
|
117
117
|
* @param str 原始富文本 HTML
|
|
118
118
|
* @param config 可选配置
|
|
119
119
|
*/
|
|
120
|
-
|
|
120
|
+
RichTextCore.convertRichTextToPixuiStyle = function (str, config) {
|
|
121
121
|
// 重置全局状态
|
|
122
|
-
|
|
123
|
-
|
|
122
|
+
RichTextCore.linkNodes = [];
|
|
123
|
+
RichTextCore.hrefIdCnt = 0;
|
|
124
124
|
var $1 = cheerio.load(str, null, false);
|
|
125
125
|
//检查html,如果有text节点,说明是转换过的,直接返回
|
|
126
126
|
if ($1("text").length > 0) {
|
|
127
127
|
return str;
|
|
128
128
|
}
|
|
129
129
|
// ---------- 第 1 步:段落分割(基础实现:根节点切分) ----------
|
|
130
|
-
var segments =
|
|
130
|
+
var segments = RichTextCore.splitIntoSegments($1);
|
|
131
131
|
// ---------- 第 2/3 步:遍历 + 展平 ----------
|
|
132
132
|
// 为保证兼容性,我们直接对 HTML 进行逐段处理并在内部构建 PixUI 结构。
|
|
133
133
|
// 这样既保持分段概念,又可复用旧逻辑的稳定性。
|
|
134
|
-
var processedSegments = segments.map(function (seg) { return
|
|
134
|
+
var processedSegments = segments.map(function (seg) { return RichTextCore.processSegment(seg, config); });
|
|
135
135
|
// ---------- 第 4 步:拼装 ----------
|
|
136
136
|
var Result = processedSegments.join("");
|
|
137
137
|
// console.log(Result);
|
|
@@ -140,8 +140,8 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
140
140
|
/**
|
|
141
141
|
* 绑定链接点击事件
|
|
142
142
|
*/
|
|
143
|
-
|
|
144
|
-
|
|
143
|
+
RichTextCore.bindLinkClickEvents = function (linkClickHandler) {
|
|
144
|
+
RichTextCore.linkNodes.forEach(function (nodeInfo) {
|
|
145
145
|
var element = document.getElementById(nodeInfo.id);
|
|
146
146
|
if (element) {
|
|
147
147
|
element.onclick = function (e) {
|
|
@@ -164,7 +164,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
164
164
|
* 将 HTML 切分为基础段落片段。
|
|
165
165
|
* 简易实现:以顶级节点为粒度切分,再根据最外层列表节点进行分割。
|
|
166
166
|
*/
|
|
167
|
-
|
|
167
|
+
RichTextCore.splitIntoSegments = function ($) {
|
|
168
168
|
var segments = [];
|
|
169
169
|
// 如果有 body,取其直接子节点;否则取根节点下的直接子节点
|
|
170
170
|
var roots = $("body").length > 0 ? $("body").children() : $.root().children();
|
|
@@ -211,7 +211,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
211
211
|
/**
|
|
212
212
|
* 处理单个段落片段,返回转换后的片段 HTML
|
|
213
213
|
*/
|
|
214
|
-
|
|
214
|
+
RichTextCore.processSegment = function (segmentHtml, config) {
|
|
215
215
|
var $ = cheerio.load(segmentHtml, null, false);
|
|
216
216
|
// 按旧实现顺序进行处理,但重构为独立函数划分
|
|
217
217
|
this.preprocess($);
|
|
@@ -244,7 +244,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
244
244
|
// ------------------------------
|
|
245
245
|
// 各独立处理步骤实现
|
|
246
246
|
// ------------------------------
|
|
247
|
-
|
|
247
|
+
RichTextCore.preprocess = function ($) {
|
|
248
248
|
var _loop_1 = function (i) {
|
|
249
249
|
var indent = "ql-indent-".concat(i);
|
|
250
250
|
var extStyle = "padding-left: ".concat(i * 2, "em");
|
|
@@ -282,7 +282,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
282
282
|
}
|
|
283
283
|
});
|
|
284
284
|
};
|
|
285
|
-
|
|
285
|
+
RichTextCore.fixImgSizeUnit = function ($) {
|
|
286
286
|
$("img").each(function () {
|
|
287
287
|
var width = $(this).attr("width");
|
|
288
288
|
var height = $(this).attr("height");
|
|
@@ -295,7 +295,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
295
295
|
});
|
|
296
296
|
};
|
|
297
297
|
/** 列表处理(将 ol/ul/li 替换为 div 结构) */
|
|
298
|
-
|
|
298
|
+
RichTextCore.handleLists = function ($, lineHeightScale) {
|
|
299
299
|
if (lineHeightScale === void 0) { lineHeightScale = 1; }
|
|
300
300
|
var topLevelLists = [];
|
|
301
301
|
var collectListItems = function ($container, currentLevel) {
|
|
@@ -376,13 +376,13 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
376
376
|
});
|
|
377
377
|
};
|
|
378
378
|
/** 将连续 <br> 替换为透明占位文字,确保 PixUI 换行 */
|
|
379
|
-
|
|
379
|
+
RichTextCore.replaceBrWithPlaceholder = function ($) {
|
|
380
380
|
$("br").each(function () {
|
|
381
381
|
$(this).replaceWith("<div style=\"".concat(mergeStyles("color: transparent", "flex-shrink: 0", "font-size: 20px"), "\" class='pixui-richtext-br-placeholder'>1</div>"));
|
|
382
382
|
});
|
|
383
383
|
};
|
|
384
384
|
/** 处理 <a> 标签:转为 div、保留样式、记录链接 */
|
|
385
|
-
|
|
385
|
+
RichTextCore.handleAnchorTag = function ($) {
|
|
386
386
|
var self = this;
|
|
387
387
|
$("a").each(function () {
|
|
388
388
|
var id = "PA_RichTextHrefId_".concat(self.hrefIdCnt++);
|
|
@@ -414,7 +414,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
414
414
|
});
|
|
415
415
|
};
|
|
416
416
|
/** 用 text 标签包裹纯文本节点 */
|
|
417
|
-
|
|
417
|
+
RichTextCore.wrapTextNodes = function ($) {
|
|
418
418
|
var self = this;
|
|
419
419
|
$("*").each(function () {
|
|
420
420
|
var nodeId = $(this).attr("id") || "";
|
|
@@ -442,7 +442,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
442
442
|
});
|
|
443
443
|
};
|
|
444
444
|
/** strong / em / u / s / span 等标签替换成 text */
|
|
445
|
-
|
|
445
|
+
RichTextCore.replaceStyleTags = function ($) {
|
|
446
446
|
var tagToStyle = {
|
|
447
447
|
strong: "font-weight: bold",
|
|
448
448
|
em: "font-style: italic",
|
|
@@ -472,7 +472,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
472
472
|
}
|
|
473
473
|
};
|
|
474
474
|
/** p → div */
|
|
475
|
-
|
|
475
|
+
RichTextCore.replacePTag = function ($) {
|
|
476
476
|
$("p").each(function () {
|
|
477
477
|
var html = $(this).html();
|
|
478
478
|
var style = $(this).attr("style") || "";
|
|
@@ -480,7 +480,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
480
480
|
});
|
|
481
481
|
};
|
|
482
482
|
/** img 的 href 转移处理 & 记录链接 */
|
|
483
|
-
|
|
483
|
+
RichTextCore.handleImgHref = function ($) {
|
|
484
484
|
var self = this;
|
|
485
485
|
$("img").each(function () {
|
|
486
486
|
var id = "PA_RichTextHrefId_".concat(self.hrefIdCnt++);
|
|
@@ -498,7 +498,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
498
498
|
});
|
|
499
499
|
};
|
|
500
500
|
/** 给指定标签补 flex-shrink:0 */
|
|
501
|
-
|
|
501
|
+
RichTextCore.addFlexShrink = function ($) {
|
|
502
502
|
["h1", "h2", "h3", "h4", "h5", "h6", "a", "img", "div"].forEach(function (tag) {
|
|
503
503
|
$(tag).each(function () {
|
|
504
504
|
var isListItem = $(this).attr("data-list-item") === "true";
|
|
@@ -511,7 +511,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
511
511
|
});
|
|
512
512
|
};
|
|
513
513
|
/** 把嵌套的 text 展平 */
|
|
514
|
-
|
|
514
|
+
RichTextCore.flattenNestedText = function ($) {
|
|
515
515
|
while ($("text > text").length > 0) {
|
|
516
516
|
$("text").each(function () {
|
|
517
517
|
var $this = $(this);
|
|
@@ -529,7 +529,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
529
529
|
}
|
|
530
530
|
};
|
|
531
531
|
/** 将同一行的 text 节点转为 div 并外包一层 text */
|
|
532
|
-
|
|
532
|
+
RichTextCore.convertSiblingTextToDiv = function ($) {
|
|
533
533
|
var nodeArr = [];
|
|
534
534
|
["h1", "h2", "h3", "h4", "h5", "h6", "div"].forEach(function (tag) {
|
|
535
535
|
$(tag).each(function () {
|
|
@@ -583,7 +583,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
583
583
|
});
|
|
584
584
|
};
|
|
585
585
|
/** text-indent 首行缩进处理 */
|
|
586
|
-
|
|
586
|
+
RichTextCore.handleTextIndent = function ($) {
|
|
587
587
|
$("*").each(function () {
|
|
588
588
|
var textIndent = $(this).css("text-indent");
|
|
589
589
|
if (textIndent) {
|
|
@@ -603,7 +603,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
603
603
|
});
|
|
604
604
|
};
|
|
605
605
|
/** line-height / letter-spacing 调整 */
|
|
606
|
-
|
|
606
|
+
RichTextCore.adjustLineHeightAndLetterSpacing = function ($, config) {
|
|
607
607
|
$("text").each(function () {
|
|
608
608
|
var $text = $(this);
|
|
609
609
|
var maxLineHeight = 0;
|
|
@@ -632,7 +632,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
632
632
|
});
|
|
633
633
|
};
|
|
634
634
|
/** 把 div 的 text-align 转移到子 text 上 */
|
|
635
|
-
|
|
635
|
+
RichTextCore.transferTextAlign = function ($) {
|
|
636
636
|
$("div").each(function () {
|
|
637
637
|
var ta = $(this).css("text-align") || "";
|
|
638
638
|
if (ta) {
|
|
@@ -651,7 +651,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
651
651
|
});
|
|
652
652
|
};
|
|
653
653
|
/** 删除空 text 节点 */
|
|
654
|
-
|
|
654
|
+
RichTextCore.removeEmptyText = function ($) {
|
|
655
655
|
$("text").each(function () {
|
|
656
656
|
var t = $(this).html() || "";
|
|
657
657
|
if (t.trim() === "")
|
|
@@ -659,7 +659,7 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
659
659
|
});
|
|
660
660
|
};
|
|
661
661
|
/** 补默认 heading 字体大小 */
|
|
662
|
-
|
|
662
|
+
RichTextCore.fixHeadingFontSize = function ($) {
|
|
663
663
|
var hRem = ["2em", "1.5em", "1.17em", "1em", "0.83em", "0.67em"];
|
|
664
664
|
["h1", "h2", "h3", "h4", "h5", "h6"].forEach(function (tag) {
|
|
665
665
|
$(tag).each(function () {
|
|
@@ -672,8 +672,8 @@ var RichText_Refactor = /** @class */ (function () {
|
|
|
672
672
|
});
|
|
673
673
|
};
|
|
674
674
|
// 存储需要绑定点击事件的节点
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
return
|
|
675
|
+
RichTextCore.linkNodes = [];
|
|
676
|
+
RichTextCore.hrefIdCnt = 0;
|
|
677
|
+
return RichTextCore;
|
|
678
678
|
}());
|
|
679
|
-
exports.
|
|
679
|
+
exports.RichTextCore = RichTextCore;
|
package/package.json
CHANGED