@payloadcms/richtext-lexical 3.43.0-internal.693bd81 → 3.43.0
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/exports/client/bundled.css +1 -1
- package/dist/field/Diff/converters/listitem/index.js +1 -1
- package/dist/field/Diff/converters/listitem/index.js.map +1 -1
- package/dist/field/Diff/converters/relationship/index.d.ts.map +1 -1
- package/dist/field/Diff/converters/relationship/index.js +11 -5
- package/dist/field/Diff/converters/relationship/index.js.map +1 -1
- package/dist/field/Diff/converters/unknown/index.js +1 -1
- package/dist/field/Diff/converters/unknown/index.js.map +1 -1
- package/dist/field/Diff/converters/upload/index.js +2 -1
- package/dist/field/Diff/converters/upload/index.js.map +1 -1
- package/dist/field/Diff/index.d.ts +0 -1
- package/dist/field/Diff/index.d.ts.map +1 -1
- package/dist/field/Diff/index.js +29 -33
- package/dist/field/Diff/index.js.map +1 -1
- package/dist/field/bundled.css +1 -1
- package/package.json +8 -8
- package/dist/field/Diff/htmlDiff/index.d.ts +0 -63
- package/dist/field/Diff/htmlDiff/index.d.ts.map +0 -1
- package/dist/field/Diff/htmlDiff/index.js +0 -501
- package/dist/field/Diff/htmlDiff/index.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payloadcms/richtext-lexical",
|
|
3
|
-
"version": "3.43.0
|
|
3
|
+
"version": "3.43.0",
|
|
4
4
|
"description": "The officially supported Lexical richtext adapter for Payload",
|
|
5
5
|
"homepage": "https://payloadcms.com",
|
|
6
6
|
"repository": {
|
|
@@ -368,8 +368,8 @@
|
|
|
368
368
|
"react-error-boundary": "4.1.2",
|
|
369
369
|
"ts-essentials": "10.0.3",
|
|
370
370
|
"uuid": "10.0.0",
|
|
371
|
-
"@payloadcms/translations": "3.43.0
|
|
372
|
-
"@payloadcms/ui": "3.43.0
|
|
371
|
+
"@payloadcms/translations": "3.43.0",
|
|
372
|
+
"@payloadcms/ui": "3.43.0"
|
|
373
373
|
},
|
|
374
374
|
"devDependencies": {
|
|
375
375
|
"@babel/cli": "7.27.2",
|
|
@@ -380,7 +380,7 @@
|
|
|
380
380
|
"@lexical/eslint-plugin": "0.28.0",
|
|
381
381
|
"@types/escape-html": "1.0.4",
|
|
382
382
|
"@types/json-schema": "7.0.15",
|
|
383
|
-
"@types/node": "22.
|
|
383
|
+
"@types/node": "22.15.30",
|
|
384
384
|
"@types/react": "19.1.0",
|
|
385
385
|
"@types/react-dom": "19.1.2",
|
|
386
386
|
"babel-plugin-react-compiler": "19.1.0-rc.2",
|
|
@@ -388,16 +388,16 @@
|
|
|
388
388
|
"esbuild": "0.25.5",
|
|
389
389
|
"esbuild-sass-plugin": "3.3.1",
|
|
390
390
|
"swc-plugin-transform-remove-imports": "4.0.4",
|
|
391
|
-
"
|
|
392
|
-
"
|
|
391
|
+
"payload": "3.43.0",
|
|
392
|
+
"@payloadcms/eslint-config": "3.28.0"
|
|
393
393
|
},
|
|
394
394
|
"peerDependencies": {
|
|
395
395
|
"@faceless-ui/modal": "3.0.0-beta.2",
|
|
396
396
|
"@faceless-ui/scroll-info": "2.0.0",
|
|
397
397
|
"react": "^19.0.0 || ^19.0.0-rc-65a56d0e-20241020",
|
|
398
398
|
"react-dom": "^19.0.0 || ^19.0.0-rc-65a56d0e-20241020",
|
|
399
|
-
"@payloadcms/next": "3.43.0
|
|
400
|
-
"payload": "3.43.0
|
|
399
|
+
"@payloadcms/next": "3.43.0",
|
|
400
|
+
"payload": "3.43.0"
|
|
401
401
|
},
|
|
402
402
|
"engines": {
|
|
403
403
|
"node": "^18.20.2 || >=20.9.0"
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
export interface HtmlDiffOptions {
|
|
2
|
-
/**
|
|
3
|
-
* The classNames for wrapper DOM.
|
|
4
|
-
* Use this to configure your own styles without importing the built-in CSS file
|
|
5
|
-
*/
|
|
6
|
-
classNames?: Partial<{
|
|
7
|
-
createBlock?: string;
|
|
8
|
-
createInline?: string;
|
|
9
|
-
deleteBlock?: string;
|
|
10
|
-
deleteInline?: string;
|
|
11
|
-
}>;
|
|
12
|
-
/**
|
|
13
|
-
* @defaultValue 1000
|
|
14
|
-
*/
|
|
15
|
-
greedyBoundary?: number;
|
|
16
|
-
/**
|
|
17
|
-
* When greedyMatch is enabled, if the length of the sub-tokens exceeds greedyBoundary,
|
|
18
|
-
* we will use the matched sub-tokens that are sufficiently good, even if they are not optimal, to enhance performance.
|
|
19
|
-
* @defaultValue true
|
|
20
|
-
*/
|
|
21
|
-
greedyMatch?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* Determine the minimum threshold for calculating common sub-tokens.
|
|
24
|
-
* You may adjust it to a value larger than 2, but not lower, due to the potential inclusion of HTML tags in the count.
|
|
25
|
-
* @defaultValue 2
|
|
26
|
-
*/
|
|
27
|
-
minMatchedSize?: number;
|
|
28
|
-
}
|
|
29
|
-
export declare class HtmlDiff {
|
|
30
|
-
private readonly config;
|
|
31
|
-
private leastCommonLength;
|
|
32
|
-
private readonly matchedBlockList;
|
|
33
|
-
private readonly newTokens;
|
|
34
|
-
private readonly oldTokens;
|
|
35
|
-
private readonly operationList;
|
|
36
|
-
private sideBySideContents?;
|
|
37
|
-
private unifiedContent?;
|
|
38
|
-
constructor(oldHtml: string, newHtml: string, { classNames, greedyBoundary, greedyMatch, minMatchedSize, }?: HtmlDiffOptions);
|
|
39
|
-
private computeBestMatchedBlock;
|
|
40
|
-
private computeMatchedBlockList;
|
|
41
|
-
private dressUpBlockTag;
|
|
42
|
-
private dressUpDiffContent;
|
|
43
|
-
private dressUpInlineTag;
|
|
44
|
-
private dressupMatchEnabledHtmlTag;
|
|
45
|
-
private dressUpText;
|
|
46
|
-
/**
|
|
47
|
-
* Generates a list of token entries that are matched between the old and new HTML. This list will not
|
|
48
|
-
* include token ranges that differ.
|
|
49
|
-
*/
|
|
50
|
-
private getMatchedBlockList;
|
|
51
|
-
private getOperationList;
|
|
52
|
-
private slideBestMatchedBlock;
|
|
53
|
-
/**
|
|
54
|
-
* convert HTML to tokens
|
|
55
|
-
* @example
|
|
56
|
-
* tokenize("<a> Hello World </a>")
|
|
57
|
-
* ["<a>"," ", "Hello", " ", "World", " ", "</a>"]
|
|
58
|
-
*/
|
|
59
|
-
private tokenize;
|
|
60
|
-
getSideBySideContents(): string[];
|
|
61
|
-
getUnifiedContent(): string;
|
|
62
|
-
}
|
|
63
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/field/Diff/htmlDiff/index.ts"],"names":[],"mappings":"AAmCA,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAC,CAAA;IACF;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAWD,qBAAa,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAgB;IACvC,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAqB;IACtD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAChD,OAAO,CAAC,kBAAkB,CAAC,CAAkB;IAC7C,OAAO,CAAC,cAAc,CAAC,CAAQ;gBAG7B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,EACE,UAKC,EACD,cAAqB,EACrB,WAAkB,EAClB,cAAkB,GACnB,GAAE,eAAoB;IA2CzB,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,uBAAuB;IAmC/B,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,kBAAkB;IAwD1B,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,0BAA0B;IAelC,OAAO,CAAC,WAAW;IAcnB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA+D3B,OAAO,CAAC,gBAAgB;IAoDxB,OAAO,CAAC,qBAAqB;IA0B7B;;;;;OAKG;IACH,OAAO,CAAC,QAAQ;IAST,qBAAqB,IAAI,MAAM,EAAE;IAiEjC,iBAAiB,IAAI,MAAM;CA4HnC"}
|
|
@@ -1,501 +0,0 @@
|
|
|
1
|
-
// Taken and modified from https://github.com/Arman19941113/html-diff/blob/master/packages/html-diff/src/index.ts
|
|
2
|
-
// eslint-disable-next-line regexp/no-super-linear-backtracking, regexp/optimal-quantifier-concatenation
|
|
3
|
-
const htmlStartTagReg = /^<(?<name>[^\s/>]+)[^>]*>$/;
|
|
4
|
-
// eslint-disable-next-line regexp/no-super-linear-backtracking, regexp/optimal-quantifier-concatenation
|
|
5
|
-
const htmlTagWithNameReg = /^<(?<isEnd>\/)?(?<name>[^\s>]+)[^>]*>$/;
|
|
6
|
-
const htmlTagReg = /^<[^>]+>/;
|
|
7
|
-
const htmlImgTagReg = /^<img[^>]*>$/;
|
|
8
|
-
const htmlVideoTagReg = /^<video[^>]*>.*?<\/video>$/ms;
|
|
9
|
-
export class HtmlDiff {
|
|
10
|
-
config;
|
|
11
|
-
leastCommonLength = Infinity;
|
|
12
|
-
matchedBlockList = [];
|
|
13
|
-
newTokens = [];
|
|
14
|
-
oldTokens = [];
|
|
15
|
-
operationList = [];
|
|
16
|
-
sideBySideContents;
|
|
17
|
-
unifiedContent;
|
|
18
|
-
constructor(oldHtml, newHtml, {
|
|
19
|
-
classNames = {
|
|
20
|
-
createBlock: 'html-diff-create-block-wrapper',
|
|
21
|
-
createInline: 'html-diff-create-inline-wrapper',
|
|
22
|
-
deleteBlock: 'html-diff-delete-block-wrapper',
|
|
23
|
-
deleteInline: 'html-diff-delete-inline-wrapper'
|
|
24
|
-
},
|
|
25
|
-
greedyBoundary = 1000,
|
|
26
|
-
greedyMatch = true,
|
|
27
|
-
minMatchedSize = 2
|
|
28
|
-
} = {}) {
|
|
29
|
-
// init config
|
|
30
|
-
this.config = {
|
|
31
|
-
classNames: {
|
|
32
|
-
createBlock: 'html-diff-create-block-wrapper',
|
|
33
|
-
createInline: 'html-diff-create-inline-wrapper',
|
|
34
|
-
deleteBlock: 'html-diff-delete-block-wrapper',
|
|
35
|
-
deleteInline: 'html-diff-delete-inline-wrapper',
|
|
36
|
-
...classNames
|
|
37
|
-
},
|
|
38
|
-
greedyBoundary,
|
|
39
|
-
greedyMatch,
|
|
40
|
-
minMatchedSize
|
|
41
|
-
};
|
|
42
|
-
// white space is junk
|
|
43
|
-
oldHtml = oldHtml.trim();
|
|
44
|
-
newHtml = newHtml.trim();
|
|
45
|
-
// no need to diff
|
|
46
|
-
if (oldHtml === newHtml) {
|
|
47
|
-
this.unifiedContent = oldHtml;
|
|
48
|
-
let equalSequence = 0;
|
|
49
|
-
// eslint-disable-next-line regexp/no-super-linear-backtracking, regexp/optimal-quantifier-concatenation
|
|
50
|
-
const content = oldHtml.replace(/<([^\s/>]+)[^>]*>/g, (match, name) => {
|
|
51
|
-
const tagNameLength = name.length + 1;
|
|
52
|
-
return `${match.slice(0, tagNameLength)} data-seq="${++equalSequence}"${match.slice(tagNameLength)}`;
|
|
53
|
-
});
|
|
54
|
-
this.sideBySideContents = [content, content];
|
|
55
|
-
return;
|
|
56
|
-
}
|
|
57
|
-
// step1: split HTML to tokens(atomic tokens)
|
|
58
|
-
this.oldTokens = this.tokenize(oldHtml);
|
|
59
|
-
this.newTokens = this.tokenize(newHtml);
|
|
60
|
-
// step2: find matched blocks
|
|
61
|
-
this.matchedBlockList = this.getMatchedBlockList();
|
|
62
|
-
// step3: generate operation list
|
|
63
|
-
this.operationList = this.getOperationList();
|
|
64
|
-
}
|
|
65
|
-
// Find the longest matched block between tokens
|
|
66
|
-
computeBestMatchedBlock(oldStart, oldEnd, newStart, newEnd) {
|
|
67
|
-
let bestMatchedBlock = null;
|
|
68
|
-
for (let i = oldStart; i < oldEnd; i++) {
|
|
69
|
-
const len = Math.min(oldEnd - i, newEnd - newStart);
|
|
70
|
-
const ret = this.slideBestMatchedBlock(i, newStart, len);
|
|
71
|
-
if (ret && (!bestMatchedBlock || ret.size > bestMatchedBlock.size)) {
|
|
72
|
-
bestMatchedBlock = ret;
|
|
73
|
-
if (ret.size > this.leastCommonLength) {
|
|
74
|
-
return bestMatchedBlock;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
for (let j = newStart; j < newEnd; j++) {
|
|
79
|
-
const len = Math.min(oldEnd - oldStart, newEnd - j);
|
|
80
|
-
const ret = this.slideBestMatchedBlock(oldStart, j, len);
|
|
81
|
-
if (ret && (!bestMatchedBlock || ret.size > bestMatchedBlock.size)) {
|
|
82
|
-
bestMatchedBlock = ret;
|
|
83
|
-
if (ret.size > this.leastCommonLength) {
|
|
84
|
-
return bestMatchedBlock;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
return bestMatchedBlock;
|
|
89
|
-
}
|
|
90
|
-
computeMatchedBlockList(oldStart, oldEnd, newStart, newEnd, matchedBlockList = []) {
|
|
91
|
-
const matchBlock = this.computeBestMatchedBlock(oldStart, oldEnd, newStart, newEnd);
|
|
92
|
-
if (!matchBlock) {
|
|
93
|
-
return [];
|
|
94
|
-
}
|
|
95
|
-
if (oldStart < matchBlock.oldStart && newStart < matchBlock.newStart) {
|
|
96
|
-
this.computeMatchedBlockList(oldStart, matchBlock.oldStart, newStart, matchBlock.newStart, matchedBlockList);
|
|
97
|
-
}
|
|
98
|
-
matchedBlockList.push(matchBlock);
|
|
99
|
-
if (oldEnd > matchBlock.oldEnd && newEnd > matchBlock.newEnd) {
|
|
100
|
-
this.computeMatchedBlockList(matchBlock.oldEnd, oldEnd, matchBlock.newEnd, newEnd, matchedBlockList);
|
|
101
|
-
}
|
|
102
|
-
return matchedBlockList;
|
|
103
|
-
}
|
|
104
|
-
dressUpBlockTag(type, token) {
|
|
105
|
-
if (type === 'create') {
|
|
106
|
-
return `<div class="${this.config.classNames.createBlock}">${token}</div>`;
|
|
107
|
-
}
|
|
108
|
-
if (type === 'delete') {
|
|
109
|
-
return `<div class="${this.config.classNames.deleteBlock}">${token}</div>`;
|
|
110
|
-
}
|
|
111
|
-
return '';
|
|
112
|
-
}
|
|
113
|
-
dressUpDiffContent(type, tokens) {
|
|
114
|
-
const tokensLength = tokens.length;
|
|
115
|
-
if (!tokensLength) {
|
|
116
|
-
return '';
|
|
117
|
-
}
|
|
118
|
-
let result = '';
|
|
119
|
-
let textStartIndex = 0;
|
|
120
|
-
let i = -1;
|
|
121
|
-
for (const token of tokens) {
|
|
122
|
-
i++;
|
|
123
|
-
// If this is true, this HTML should be diffed as well - not just its children
|
|
124
|
-
const isMatchElement = token.includes('data-enable-match="true"');
|
|
125
|
-
const isMatchExplicitlyDisabled = token.includes('data-enable-match="false"');
|
|
126
|
-
const isHtmlTag = !!token.match(htmlTagReg)?.length;
|
|
127
|
-
if (isMatchExplicitlyDisabled) {
|
|
128
|
-
textStartIndex = i + 1;
|
|
129
|
-
result += token;
|
|
130
|
-
} else if (!isMatchElement && isHtmlTag) {
|
|
131
|
-
// handle text tokens before
|
|
132
|
-
if (i > textStartIndex) {
|
|
133
|
-
result += this.dressUpText(type, tokens.slice(textStartIndex, i));
|
|
134
|
-
}
|
|
135
|
-
// handle this tag
|
|
136
|
-
textStartIndex = i + 1;
|
|
137
|
-
if (token.match(htmlVideoTagReg)) {
|
|
138
|
-
result += this.dressUpBlockTag(type, token);
|
|
139
|
-
} else {
|
|
140
|
-
result += token;
|
|
141
|
-
}
|
|
142
|
-
} else if (isMatchElement && isHtmlTag) {
|
|
143
|
-
// handle text tokens before
|
|
144
|
-
if (i > textStartIndex) {
|
|
145
|
-
result += this.dressUpText(type, tokens.slice(textStartIndex, i));
|
|
146
|
-
}
|
|
147
|
-
// handle this tag
|
|
148
|
-
textStartIndex = i + 1;
|
|
149
|
-
// Add data-match-type to the tag that can be styled
|
|
150
|
-
const newToken = this.dressupMatchEnabledHtmlTag(type, token);
|
|
151
|
-
result += newToken;
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
if (textStartIndex < tokensLength) {
|
|
155
|
-
result += this.dressUpText(type, tokens.slice(textStartIndex));
|
|
156
|
-
}
|
|
157
|
-
return result;
|
|
158
|
-
}
|
|
159
|
-
dressUpInlineTag(type, token) {
|
|
160
|
-
if (type === 'create') {
|
|
161
|
-
return `<span class="${this.config.classNames.createInline}">${token}</span>`;
|
|
162
|
-
}
|
|
163
|
-
if (type === 'delete') {
|
|
164
|
-
return `<span class="${this.config.classNames.deleteInline}">${token}</span>`;
|
|
165
|
-
}
|
|
166
|
-
return '';
|
|
167
|
-
}
|
|
168
|
-
dressupMatchEnabledHtmlTag(type, token) {
|
|
169
|
-
// token is a single html tag, e.g. <a data-enable-match="true" href="https://2" rel=undefined target=undefined>
|
|
170
|
-
// add data-match-type to the tag
|
|
171
|
-
const tagName = token.match(htmlStartTagReg)?.groups?.name;
|
|
172
|
-
if (!tagName) {
|
|
173
|
-
return token;
|
|
174
|
-
}
|
|
175
|
-
const tagNameLength = tagName.length + 1;
|
|
176
|
-
const matchType = type === 'create' ? 'create' : 'delete';
|
|
177
|
-
return `${token.slice(0, tagNameLength)} data-match-type="${matchType}"${token.slice(tagNameLength, token.length)}`;
|
|
178
|
-
}
|
|
179
|
-
dressUpText(type, tokens) {
|
|
180
|
-
const text = tokens.join('');
|
|
181
|
-
if (!text.trim()) {
|
|
182
|
-
return '';
|
|
183
|
-
}
|
|
184
|
-
if (type === 'create') {
|
|
185
|
-
return `<span data-match-type="create">${text}</span>`;
|
|
186
|
-
}
|
|
187
|
-
if (type === 'delete') {
|
|
188
|
-
return `<span data-match-type="delete">${text}</span>`;
|
|
189
|
-
}
|
|
190
|
-
return '';
|
|
191
|
-
}
|
|
192
|
-
/**
|
|
193
|
-
* Generates a list of token entries that are matched between the old and new HTML. This list will not
|
|
194
|
-
* include token ranges that differ.
|
|
195
|
-
*/
|
|
196
|
-
getMatchedBlockList() {
|
|
197
|
-
const n1 = this.oldTokens.length;
|
|
198
|
-
const n2 = this.newTokens.length;
|
|
199
|
-
// 1. sync from start
|
|
200
|
-
let start = null;
|
|
201
|
-
let i = 0;
|
|
202
|
-
while (i < n1 && i < n2 && this.oldTokens[i] === this.newTokens[i]) {
|
|
203
|
-
i++;
|
|
204
|
-
}
|
|
205
|
-
if (i >= this.config.minMatchedSize) {
|
|
206
|
-
start = {
|
|
207
|
-
newEnd: i,
|
|
208
|
-
newStart: 0,
|
|
209
|
-
oldEnd: i,
|
|
210
|
-
oldStart: 0,
|
|
211
|
-
size: i
|
|
212
|
-
};
|
|
213
|
-
}
|
|
214
|
-
// 2. sync from end
|
|
215
|
-
let end = null;
|
|
216
|
-
let e1 = n1 - 1;
|
|
217
|
-
let e2 = n2 - 1;
|
|
218
|
-
while (i <= e1 && i <= e2 && this.oldTokens[e1] === this.newTokens[e2]) {
|
|
219
|
-
e1--;
|
|
220
|
-
e2--;
|
|
221
|
-
}
|
|
222
|
-
const size = n1 - 1 - e1;
|
|
223
|
-
if (size >= this.config.minMatchedSize) {
|
|
224
|
-
end = {
|
|
225
|
-
newEnd: n2,
|
|
226
|
-
newStart: e2 + 1,
|
|
227
|
-
oldEnd: n1,
|
|
228
|
-
oldStart: e1 + 1,
|
|
229
|
-
size
|
|
230
|
-
};
|
|
231
|
-
}
|
|
232
|
-
// 3. handle rest
|
|
233
|
-
const oldStart = start ? i : 0;
|
|
234
|
-
const oldEnd = end ? e1 + 1 : n1;
|
|
235
|
-
const newStart = start ? i : 0;
|
|
236
|
-
const newEnd = end ? e2 + 1 : n2;
|
|
237
|
-
// optimize for large tokens
|
|
238
|
-
if (this.config.greedyMatch) {
|
|
239
|
-
const commonLength = Math.min(oldEnd - oldStart, newEnd - newStart);
|
|
240
|
-
if (commonLength > this.config.greedyBoundary) {
|
|
241
|
-
this.leastCommonLength = Math.floor(commonLength / 3);
|
|
242
|
-
}
|
|
243
|
-
}
|
|
244
|
-
const ret = this.computeMatchedBlockList(oldStart, oldEnd, newStart, newEnd);
|
|
245
|
-
if (start) {
|
|
246
|
-
ret.unshift(start);
|
|
247
|
-
}
|
|
248
|
-
if (end) {
|
|
249
|
-
ret.push(end);
|
|
250
|
-
}
|
|
251
|
-
return ret;
|
|
252
|
-
}
|
|
253
|
-
// Generate operation list by matchedBlockList
|
|
254
|
-
getOperationList() {
|
|
255
|
-
const operationList = [];
|
|
256
|
-
let walkIndexOld = 0;
|
|
257
|
-
let walkIndexNew = 0;
|
|
258
|
-
for (const matchedBlock of this.matchedBlockList) {
|
|
259
|
-
const isOldStartIndexMatched = walkIndexOld === matchedBlock.oldStart;
|
|
260
|
-
const isNewStartIndexMatched = walkIndexNew === matchedBlock.newStart;
|
|
261
|
-
const operationBase = {
|
|
262
|
-
newEnd: matchedBlock.newStart,
|
|
263
|
-
newStart: walkIndexNew,
|
|
264
|
-
oldEnd: matchedBlock.oldStart,
|
|
265
|
-
oldStart: walkIndexOld
|
|
266
|
-
};
|
|
267
|
-
if (!isOldStartIndexMatched && !isNewStartIndexMatched) {
|
|
268
|
-
operationList.push(Object.assign(operationBase, {
|
|
269
|
-
type: 'replace'
|
|
270
|
-
}));
|
|
271
|
-
} else if (isOldStartIndexMatched && !isNewStartIndexMatched) {
|
|
272
|
-
operationList.push(Object.assign(operationBase, {
|
|
273
|
-
type: 'create'
|
|
274
|
-
}));
|
|
275
|
-
} else if (!isOldStartIndexMatched && isNewStartIndexMatched) {
|
|
276
|
-
operationList.push(Object.assign(operationBase, {
|
|
277
|
-
type: 'delete'
|
|
278
|
-
}));
|
|
279
|
-
}
|
|
280
|
-
operationList.push({
|
|
281
|
-
type: 'equal',
|
|
282
|
-
newEnd: matchedBlock.newEnd,
|
|
283
|
-
newStart: matchedBlock.newStart,
|
|
284
|
-
oldEnd: matchedBlock.oldEnd,
|
|
285
|
-
oldStart: matchedBlock.oldStart
|
|
286
|
-
});
|
|
287
|
-
walkIndexOld = matchedBlock.oldEnd;
|
|
288
|
-
walkIndexNew = matchedBlock.newEnd;
|
|
289
|
-
}
|
|
290
|
-
// handle the tail content
|
|
291
|
-
const maxIndexOld = this.oldTokens.length;
|
|
292
|
-
const maxIndexNew = this.newTokens.length;
|
|
293
|
-
const tailOperationBase = {
|
|
294
|
-
newEnd: maxIndexNew,
|
|
295
|
-
newStart: walkIndexNew,
|
|
296
|
-
oldEnd: maxIndexOld,
|
|
297
|
-
oldStart: walkIndexOld
|
|
298
|
-
};
|
|
299
|
-
const isOldFinished = walkIndexOld === maxIndexOld;
|
|
300
|
-
const isNewFinished = walkIndexNew === maxIndexNew;
|
|
301
|
-
if (!isOldFinished && !isNewFinished) {
|
|
302
|
-
operationList.push(Object.assign(tailOperationBase, {
|
|
303
|
-
type: 'replace'
|
|
304
|
-
}));
|
|
305
|
-
} else if (isOldFinished && !isNewFinished) {
|
|
306
|
-
operationList.push(Object.assign(tailOperationBase, {
|
|
307
|
-
type: 'create'
|
|
308
|
-
}));
|
|
309
|
-
} else if (!isOldFinished && isNewFinished) {
|
|
310
|
-
operationList.push(Object.assign(tailOperationBase, {
|
|
311
|
-
type: 'delete'
|
|
312
|
-
}));
|
|
313
|
-
}
|
|
314
|
-
return operationList;
|
|
315
|
-
}
|
|
316
|
-
slideBestMatchedBlock(addA, addB, len) {
|
|
317
|
-
let maxSize = 0;
|
|
318
|
-
let bestMatchedBlock = null;
|
|
319
|
-
let continuousSize = 0;
|
|
320
|
-
for (let i = 0; i < len; i++) {
|
|
321
|
-
if (this.oldTokens[addA + i] === this.newTokens[addB + i]) {
|
|
322
|
-
continuousSize++;
|
|
323
|
-
} else {
|
|
324
|
-
continuousSize = 0;
|
|
325
|
-
}
|
|
326
|
-
if (continuousSize > maxSize) {
|
|
327
|
-
maxSize = continuousSize;
|
|
328
|
-
bestMatchedBlock = {
|
|
329
|
-
newEnd: addB + i + 1,
|
|
330
|
-
newStart: addB + i - continuousSize + 1,
|
|
331
|
-
oldEnd: addA + i + 1,
|
|
332
|
-
oldStart: addA + i - continuousSize + 1,
|
|
333
|
-
size: continuousSize
|
|
334
|
-
};
|
|
335
|
-
}
|
|
336
|
-
}
|
|
337
|
-
return maxSize >= this.config.minMatchedSize ? bestMatchedBlock : null;
|
|
338
|
-
}
|
|
339
|
-
/**
|
|
340
|
-
* convert HTML to tokens
|
|
341
|
-
* @example
|
|
342
|
-
* tokenize("<a> Hello World </a>")
|
|
343
|
-
* ["<a>"," ", "Hello", " ", "World", " ", "</a>"]
|
|
344
|
-
*/
|
|
345
|
-
tokenize(html) {
|
|
346
|
-
// atomic token: html tag、continuous numbers or letters、blank spaces、other symbol
|
|
347
|
-
return html.match(/<picture[^>]*>.*?<\/picture>|<video[^>]*>.*?<\/video>|<[^>]+>|\w+\b|\s+|[^<>\w]/gs) || [];
|
|
348
|
-
}
|
|
349
|
-
getSideBySideContents() {
|
|
350
|
-
if (this.sideBySideContents !== undefined) {
|
|
351
|
-
return this.sideBySideContents;
|
|
352
|
-
}
|
|
353
|
-
let oldHtml = '';
|
|
354
|
-
let newHtml = '';
|
|
355
|
-
let equalSequence = 0;
|
|
356
|
-
this.operationList.forEach(operation => {
|
|
357
|
-
switch (operation.type) {
|
|
358
|
-
case 'create':
|
|
359
|
-
{
|
|
360
|
-
newHtml += this.dressUpDiffContent('create', this.newTokens.slice(operation.newStart, operation.newEnd));
|
|
361
|
-
break;
|
|
362
|
-
}
|
|
363
|
-
case 'delete':
|
|
364
|
-
{
|
|
365
|
-
const deletedTokens = this.oldTokens.slice(operation.oldStart, operation.oldEnd);
|
|
366
|
-
oldHtml += this.dressUpDiffContent('delete', deletedTokens);
|
|
367
|
-
break;
|
|
368
|
-
}
|
|
369
|
-
case 'equal':
|
|
370
|
-
{
|
|
371
|
-
const equalTokens = this.newTokens.slice(operation.newStart, operation.newEnd);
|
|
372
|
-
let equalString = '';
|
|
373
|
-
for (const token of equalTokens) {
|
|
374
|
-
// find start tags and add data-seq to enable sync scroll
|
|
375
|
-
const startTagMatch = token.match(htmlStartTagReg);
|
|
376
|
-
if (startTagMatch) {
|
|
377
|
-
equalSequence += 1;
|
|
378
|
-
const tagNameLength = (startTagMatch?.groups?.name?.length ?? 0) + 1;
|
|
379
|
-
equalString += `${token.slice(0, tagNameLength)} data-seq="${equalSequence}"${token.slice(tagNameLength)}`;
|
|
380
|
-
} else {
|
|
381
|
-
equalString += token;
|
|
382
|
-
}
|
|
383
|
-
}
|
|
384
|
-
oldHtml += equalString;
|
|
385
|
-
newHtml += equalString;
|
|
386
|
-
break;
|
|
387
|
-
}
|
|
388
|
-
case 'replace':
|
|
389
|
-
{
|
|
390
|
-
oldHtml += this.dressUpDiffContent('delete', this.oldTokens.slice(operation.oldStart, operation.oldEnd));
|
|
391
|
-
newHtml += this.dressUpDiffContent('create', this.newTokens.slice(operation.newStart, operation.newEnd));
|
|
392
|
-
break;
|
|
393
|
-
}
|
|
394
|
-
default:
|
|
395
|
-
{
|
|
396
|
-
console.error('Richtext diff error - invalid operation: ' + String(operation.type));
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
});
|
|
400
|
-
const result = [oldHtml, newHtml];
|
|
401
|
-
this.sideBySideContents = result;
|
|
402
|
-
return result;
|
|
403
|
-
}
|
|
404
|
-
getUnifiedContent() {
|
|
405
|
-
if (this.unifiedContent !== undefined) {
|
|
406
|
-
return this.unifiedContent;
|
|
407
|
-
}
|
|
408
|
-
let result = '';
|
|
409
|
-
this.operationList.forEach(operation => {
|
|
410
|
-
switch (operation.type) {
|
|
411
|
-
case 'create':
|
|
412
|
-
{
|
|
413
|
-
result += this.dressUpDiffContent('create', this.newTokens.slice(operation.newStart, operation.newEnd));
|
|
414
|
-
break;
|
|
415
|
-
}
|
|
416
|
-
case 'delete':
|
|
417
|
-
{
|
|
418
|
-
result += this.dressUpDiffContent('delete', this.oldTokens.slice(operation.oldStart, operation.oldEnd));
|
|
419
|
-
break;
|
|
420
|
-
}
|
|
421
|
-
case 'equal':
|
|
422
|
-
{
|
|
423
|
-
for (const token of this.newTokens.slice(operation.newStart, operation.newEnd)) {
|
|
424
|
-
result += token;
|
|
425
|
-
}
|
|
426
|
-
break;
|
|
427
|
-
}
|
|
428
|
-
case 'replace':
|
|
429
|
-
{
|
|
430
|
-
// handle specially tag replace
|
|
431
|
-
const olds = this.oldTokens.slice(operation.oldStart, operation.oldEnd);
|
|
432
|
-
const news = this.newTokens.slice(operation.newStart, operation.newEnd);
|
|
433
|
-
if (olds.length === 1 && news.length === 1 && olds[0]?.match(htmlTagReg) && news[0]?.match(htmlTagReg)) {
|
|
434
|
-
result += news[0];
|
|
435
|
-
break;
|
|
436
|
-
}
|
|
437
|
-
const deletedTokens = [];
|
|
438
|
-
const createdTokens = [];
|
|
439
|
-
let createIndex = operation.newStart;
|
|
440
|
-
for (let deleteIndex = operation.oldStart; deleteIndex < operation.oldEnd; deleteIndex++) {
|
|
441
|
-
const deletedToken = this.oldTokens[deleteIndex];
|
|
442
|
-
if (!deletedToken) {
|
|
443
|
-
continue;
|
|
444
|
-
}
|
|
445
|
-
const matchTagResultD = deletedToken?.match(htmlTagWithNameReg);
|
|
446
|
-
if (matchTagResultD) {
|
|
447
|
-
// handle replaced tag token
|
|
448
|
-
// skip special tag
|
|
449
|
-
if ([htmlImgTagReg, htmlVideoTagReg].some(item => deletedToken?.match(item))) {
|
|
450
|
-
deletedTokens.push(deletedToken);
|
|
451
|
-
continue;
|
|
452
|
-
}
|
|
453
|
-
// handle normal tag
|
|
454
|
-
result += this.dressUpDiffContent('delete', deletedTokens);
|
|
455
|
-
deletedTokens.splice(0);
|
|
456
|
-
let isTagInNewFind = false;
|
|
457
|
-
for (let tempCreateIndex = createIndex; tempCreateIndex < operation.newEnd; tempCreateIndex++) {
|
|
458
|
-
const createdToken = this.newTokens[tempCreateIndex];
|
|
459
|
-
if (!createdToken) {
|
|
460
|
-
continue;
|
|
461
|
-
}
|
|
462
|
-
const matchTagResultC = createdToken?.match(htmlTagWithNameReg);
|
|
463
|
-
if (matchTagResultC && matchTagResultC.groups?.name === matchTagResultD.groups?.name && matchTagResultC.groups?.isEnd === matchTagResultD.groups?.isEnd) {
|
|
464
|
-
// find first matched tag, but not maybe the expected tag(to optimize)
|
|
465
|
-
isTagInNewFind = true;
|
|
466
|
-
result += this.dressUpDiffContent('create', createdTokens);
|
|
467
|
-
result += createdToken;
|
|
468
|
-
createdTokens.splice(0);
|
|
469
|
-
createIndex = tempCreateIndex + 1;
|
|
470
|
-
break;
|
|
471
|
-
} else {
|
|
472
|
-
createdTokens.push(createdToken);
|
|
473
|
-
}
|
|
474
|
-
}
|
|
475
|
-
if (!isTagInNewFind) {
|
|
476
|
-
result += deletedToken;
|
|
477
|
-
createdTokens.splice(0);
|
|
478
|
-
}
|
|
479
|
-
} else {
|
|
480
|
-
// token is not a tag
|
|
481
|
-
deletedTokens.push(deletedToken);
|
|
482
|
-
}
|
|
483
|
-
}
|
|
484
|
-
if (createIndex < operation.newEnd) {
|
|
485
|
-
createdTokens.push(...this.newTokens.slice(createIndex, operation.newEnd));
|
|
486
|
-
}
|
|
487
|
-
result += this.dressUpDiffContent('delete', deletedTokens);
|
|
488
|
-
result += this.dressUpDiffContent('create', createdTokens);
|
|
489
|
-
break;
|
|
490
|
-
}
|
|
491
|
-
default:
|
|
492
|
-
{
|
|
493
|
-
console.error('Richtext diff error - invalid operation: ' + String(operation.type));
|
|
494
|
-
}
|
|
495
|
-
}
|
|
496
|
-
});
|
|
497
|
-
this.unifiedContent = result;
|
|
498
|
-
return result;
|
|
499
|
-
}
|
|
500
|
-
}
|
|
501
|
-
//# sourceMappingURL=index.js.map
|