@atlaskit/editor-plugin-show-diff 4.1.2 → 4.1.4
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/CHANGELOG.md +16 -0
- package/dist/cjs/pm-plugins/calculateDiffDecorations.js +5 -2
- package/dist/cjs/pm-plugins/colorSchemes/standard.js +96 -0
- package/dist/cjs/pm-plugins/colorSchemes/traditional.js +76 -0
- package/dist/cjs/pm-plugins/decorations.js +62 -195
- package/dist/cjs/pm-plugins/main.js +9 -3
- package/dist/cjs/showDiffPlugin.js +2 -1
- package/dist/es2019/pm-plugins/calculateDiffDecorations.js +5 -2
- package/dist/es2019/pm-plugins/colorSchemes/standard.js +90 -0
- package/dist/es2019/pm-plugins/colorSchemes/traditional.js +70 -0
- package/dist/es2019/pm-plugins/decorations.js +57 -189
- package/dist/es2019/pm-plugins/main.js +6 -2
- package/dist/es2019/showDiffPlugin.js +3 -2
- package/dist/esm/pm-plugins/calculateDiffDecorations.js +5 -2
- package/dist/esm/pm-plugins/colorSchemes/standard.js +90 -0
- package/dist/esm/pm-plugins/colorSchemes/traditional.js +70 -0
- package/dist/esm/pm-plugins/decorations.js +56 -189
- package/dist/esm/pm-plugins/main.js +8 -2
- package/dist/esm/showDiffPlugin.js +3 -2
- package/dist/types/pm-plugins/colorSchemes/standard.d.ts +8 -0
- package/dist/types/pm-plugins/colorSchemes/traditional.d.ts +5 -0
- package/dist/types/pm-plugins/decorations.d.ts +1 -1
- package/dist/types/pm-plugins/main.d.ts +2 -0
- package/dist/types-ts4.5/pm-plugins/colorSchemes/standard.d.ts +8 -0
- package/dist/types-ts4.5/pm-plugins/colorSchemes/traditional.d.ts +5 -0
- package/dist/types-ts4.5/pm-plugins/decorations.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/main.d.ts +2 -0
- package/package.json +4 -4
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
2
|
+
export var traditionalInsertStyle = convertToInlineCss({
|
|
3
|
+
background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
|
|
4
|
+
textDecoration: 'underline',
|
|
5
|
+
textDecorationStyle: 'solid',
|
|
6
|
+
textDecorationThickness: "var(--ds-space-025, 2px)",
|
|
7
|
+
textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
|
|
8
|
+
});
|
|
9
|
+
export var traditionalInsertStyleActive = convertToInlineCss({
|
|
10
|
+
background: "var(--ds-background-accent-green-subtler, #BAF3DB)",
|
|
11
|
+
textDecoration: 'underline',
|
|
12
|
+
textDecorationStyle: 'solid',
|
|
13
|
+
textDecorationThickness: "var(--ds-space-025, 2px)",
|
|
14
|
+
textDecorationColor: "var(--ds-text-accent-green, #216E4E)"
|
|
15
|
+
});
|
|
16
|
+
export var deletedTraditionalContentStyle = convertToInlineCss({
|
|
17
|
+
textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
|
|
18
|
+
textDecoration: 'line-through',
|
|
19
|
+
position: 'relative',
|
|
20
|
+
opacity: 1
|
|
21
|
+
});
|
|
22
|
+
export var deletedTraditionalContentStyleUnbounded = convertToInlineCss({
|
|
23
|
+
position: 'absolute',
|
|
24
|
+
top: '50%',
|
|
25
|
+
width: '100%',
|
|
26
|
+
display: 'inline-block',
|
|
27
|
+
borderTop: "1px solid ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
28
|
+
pointerEvents: 'none',
|
|
29
|
+
zIndex: 1
|
|
30
|
+
});
|
|
31
|
+
var traditionalStyleQuoteNode = convertToInlineCss({
|
|
32
|
+
borderLeft: "2px solid ".concat("var(--ds-border-accent-green, #22A06B)")
|
|
33
|
+
});
|
|
34
|
+
var traditionalStyleRuleNode = convertToInlineCss({
|
|
35
|
+
backgroundColor: "var(--ds-border-accent-green, #22A06B)"
|
|
36
|
+
});
|
|
37
|
+
var traditionalStyleNode = convertToInlineCss({
|
|
38
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
|
|
39
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
40
|
+
});
|
|
41
|
+
var traditionalStyleCardBlockNode = convertToInlineCss({
|
|
42
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
|
|
43
|
+
borderRadius: "var(--ds-radius-medium, 6px)"
|
|
44
|
+
});
|
|
45
|
+
var traditionalDecorationMarkerVariable = convertToInlineCss({
|
|
46
|
+
'--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
|
|
47
|
+
});
|
|
48
|
+
export var getTraditionalNodeStyle = function getTraditionalNodeStyle(nodeName) {
|
|
49
|
+
if (['mediaSingle', 'mediaGroup', 'table',
|
|
50
|
+
// Handle table separately to avoid border issues
|
|
51
|
+
'tableRow', 'tableCell', 'tableHeader', 'paragraph',
|
|
52
|
+
// Paragraph and heading nodes do not need special styling
|
|
53
|
+
'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
|
|
54
|
+
// Layout nodes do not need special styling
|
|
55
|
+
return undefined;
|
|
56
|
+
}
|
|
57
|
+
if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
|
|
58
|
+
return traditionalDecorationMarkerVariable;
|
|
59
|
+
}
|
|
60
|
+
if (nodeName === 'blockquote') {
|
|
61
|
+
return traditionalStyleQuoteNode;
|
|
62
|
+
}
|
|
63
|
+
if (nodeName === 'rule') {
|
|
64
|
+
return traditionalStyleRuleNode;
|
|
65
|
+
}
|
|
66
|
+
if (nodeName === 'blockCard') {
|
|
67
|
+
return traditionalStyleCardBlockNode;
|
|
68
|
+
}
|
|
69
|
+
return traditionalStyleNode;
|
|
70
|
+
};
|
|
@@ -2,38 +2,11 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
|
2
2
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
3
3
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
4
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
5
|
+
import { getStandardNodeStyle, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, editingStyle, editingStyleActive, deletedContentStyleUnbounded } from './colorSchemes/standard';
|
|
6
|
+
import { getTraditionalNodeStyle, deletedTraditionalContentStyle, deletedTraditionalContentStyleUnbounded, traditionalInsertStyle, traditionalInsertStyleActive } from './colorSchemes/traditional';
|
|
5
7
|
import { createDeletedStyleWrapperWithoutOpacity, handleBlockNodeView } from './deletedBlocksHandler';
|
|
6
8
|
import { handleDeletedRows } from './deletedRowsHandler';
|
|
7
9
|
import { findSafeInsertPos } from './findSafeInsertPos';
|
|
8
|
-
var editingStyle = convertToInlineCss({
|
|
9
|
-
background: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
|
|
10
|
-
textDecoration: 'underline',
|
|
11
|
-
textDecorationStyle: 'dotted',
|
|
12
|
-
textDecorationThickness: "var(--ds-space-025, 2px)",
|
|
13
|
-
textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
|
|
14
|
-
});
|
|
15
|
-
var editingStyleActive = convertToInlineCss({
|
|
16
|
-
background: "var(--ds-background-accent-purple-subtler, #EED7FC)",
|
|
17
|
-
textDecoration: 'underline',
|
|
18
|
-
textDecorationStyle: 'dotted',
|
|
19
|
-
textDecorationThickness: "var(--ds-space-025, 2px)",
|
|
20
|
-
textDecorationColor: "var(--ds-text-accent-purple, #803FA5)"
|
|
21
|
-
});
|
|
22
|
-
var traditionalInsertStyle = convertToInlineCss({
|
|
23
|
-
background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
|
|
24
|
-
textDecoration: 'underline',
|
|
25
|
-
textDecorationStyle: 'solid',
|
|
26
|
-
textDecorationThickness: "var(--ds-space-025, 2px)",
|
|
27
|
-
textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
|
|
28
|
-
});
|
|
29
|
-
var traditionalInsertStyleActive = convertToInlineCss({
|
|
30
|
-
background: "var(--ds-background-accent-green-subtler, #BAF3DB)",
|
|
31
|
-
textDecoration: 'underline',
|
|
32
|
-
textDecorationStyle: 'solid',
|
|
33
|
-
textDecorationThickness: "var(--ds-space-025, 2px)",
|
|
34
|
-
textDecorationColor: "var(--ds-text-accent-green, #216E4E)"
|
|
35
|
-
});
|
|
36
|
-
|
|
37
10
|
/**
|
|
38
11
|
* Inline decoration used for insertions as the content already exists in the document
|
|
39
12
|
*
|
|
@@ -51,126 +24,10 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
|
|
|
51
24
|
return Decoration.inline(change.fromB, change.toB, {
|
|
52
25
|
style: style,
|
|
53
26
|
'data-testid': 'show-diff-changed-decoration'
|
|
54
|
-
}, {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
switch (nodeName) {
|
|
58
|
-
case 'blockquote':
|
|
59
|
-
return colourScheme === 'traditional' ? traditionalStyleQuoteNode : editingStyleQuoteNode;
|
|
60
|
-
case 'mediaSingle':
|
|
61
|
-
case 'mediaGroup':
|
|
62
|
-
case 'table':
|
|
63
|
-
case 'tableRow':
|
|
64
|
-
case 'tableCell':
|
|
65
|
-
case 'tableHeader':
|
|
66
|
-
return undefined;
|
|
67
|
-
// Handle table separately to avoid border issues
|
|
68
|
-
case 'paragraph':
|
|
69
|
-
case 'heading':
|
|
70
|
-
case 'hardBreak':
|
|
71
|
-
return undefined;
|
|
72
|
-
// Paragraph and heading nodes do not need special styling
|
|
73
|
-
case 'decisionList':
|
|
74
|
-
case 'taskList':
|
|
75
|
-
case 'taskItem':
|
|
76
|
-
case 'bulletList':
|
|
77
|
-
case 'orderedList':
|
|
78
|
-
return undefined;
|
|
79
|
-
case 'extension':
|
|
80
|
-
case 'embedCard':
|
|
81
|
-
case 'listItem':
|
|
82
|
-
return convertToInlineCss({
|
|
83
|
-
'--diff-decoration-marker-color': colourScheme === 'traditional' ? "var(--ds-border-accent-green, #22A06B)" : "var(--ds-border-accent-purple, #AF59E1)"
|
|
84
|
-
});
|
|
85
|
-
case 'layoutSection':
|
|
86
|
-
return undefined;
|
|
87
|
-
// Layout nodes do not need special styling
|
|
88
|
-
case 'rule':
|
|
89
|
-
return colourScheme === 'traditional' ? traditionalStyleRuleNode : editingStyleRuleNode;
|
|
90
|
-
case 'blockCard':
|
|
91
|
-
return colourScheme === 'traditional' ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
|
|
92
|
-
default:
|
|
93
|
-
return colourScheme === 'traditional' ? traditionalStyleNode : editingStyleNode;
|
|
94
|
-
}
|
|
27
|
+
}, {
|
|
28
|
+
key: 'diff-inline'
|
|
29
|
+
});
|
|
95
30
|
};
|
|
96
|
-
var editingStyleQuoteNode = convertToInlineCss({
|
|
97
|
-
borderLeft: "2px solid ".concat("var(--ds-border-accent-purple, #AF59E1)")
|
|
98
|
-
});
|
|
99
|
-
var traditionalStyleQuoteNode = convertToInlineCss({
|
|
100
|
-
borderLeft: "2px solid ".concat("var(--ds-border-accent-green, #22A06B)")
|
|
101
|
-
});
|
|
102
|
-
var editingStyleRuleNode = convertToInlineCss({
|
|
103
|
-
backgroundColor: "var(--ds-border-accent-purple, #AF59E1)"
|
|
104
|
-
});
|
|
105
|
-
var traditionalStyleRuleNode = convertToInlineCss({
|
|
106
|
-
backgroundColor: "var(--ds-border-accent-green, #22A06B)"
|
|
107
|
-
});
|
|
108
|
-
var editingStyleNode = convertToInlineCss({
|
|
109
|
-
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
|
|
110
|
-
borderRadius: "var(--ds-radius-small, 4px)"
|
|
111
|
-
});
|
|
112
|
-
var traditionalStyleNode = convertToInlineCss({
|
|
113
|
-
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
|
|
114
|
-
borderRadius: "var(--ds-radius-small, 4px)"
|
|
115
|
-
});
|
|
116
|
-
var editingStyleCardBlockNode = convertToInlineCss({
|
|
117
|
-
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
|
|
118
|
-
borderRadius: "var(--ds-radius-medium, 6px)"
|
|
119
|
-
});
|
|
120
|
-
var traditionalStyleCardBlockNode = convertToInlineCss({
|
|
121
|
-
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
|
|
122
|
-
borderRadius: "var(--ds-radius-medium, 6px)"
|
|
123
|
-
});
|
|
124
|
-
var deletedContentStyle = convertToInlineCss({
|
|
125
|
-
color: "var(--ds-text-accent-gray, #505258)",
|
|
126
|
-
textDecoration: 'line-through',
|
|
127
|
-
position: 'relative',
|
|
128
|
-
opacity: 0.6
|
|
129
|
-
});
|
|
130
|
-
var deletedContentStyleActive = convertToInlineCss({
|
|
131
|
-
color: "var(--ds-text, #292A2E)",
|
|
132
|
-
textDecoration: 'line-through',
|
|
133
|
-
textDecorationColor: "var(--ds-text-accent-gray, #505258)",
|
|
134
|
-
position: 'relative',
|
|
135
|
-
opacity: 1
|
|
136
|
-
});
|
|
137
|
-
var deletedContentStyleNew = convertToInlineCss({
|
|
138
|
-
color: "var(--ds-text-accent-gray, #505258)",
|
|
139
|
-
textDecoration: 'line-through',
|
|
140
|
-
position: 'relative',
|
|
141
|
-
opacity: 0.8
|
|
142
|
-
});
|
|
143
|
-
var deletedContentStyleNewActive = convertToInlineCss({
|
|
144
|
-
color: "var(--ds-text, #292A2E)",
|
|
145
|
-
textDecoration: 'line-through',
|
|
146
|
-
textDecorationColor: "var(--ds-text-accent-gray, #505258)",
|
|
147
|
-
position: 'relative',
|
|
148
|
-
opacity: 1
|
|
149
|
-
});
|
|
150
|
-
var deletedContentStyleUnbounded = convertToInlineCss({
|
|
151
|
-
position: 'absolute',
|
|
152
|
-
top: '50%',
|
|
153
|
-
width: '100%',
|
|
154
|
-
display: 'inline-block',
|
|
155
|
-
borderTop: "1px solid ".concat("var(--ds-text-accent-gray, #505258)"),
|
|
156
|
-
pointerEvents: 'none',
|
|
157
|
-
zIndex: 1
|
|
158
|
-
});
|
|
159
|
-
var deletedTraditionalContentStyle = convertToInlineCss({
|
|
160
|
-
textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
|
|
161
|
-
textDecoration: 'line-through',
|
|
162
|
-
position: 'relative',
|
|
163
|
-
opacity: 1
|
|
164
|
-
});
|
|
165
|
-
var deletedTraditionalContentStyleUnbounded = convertToInlineCss({
|
|
166
|
-
position: 'absolute',
|
|
167
|
-
top: '50%',
|
|
168
|
-
width: '100%',
|
|
169
|
-
display: 'inline-block',
|
|
170
|
-
borderTop: "1px solid ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
171
|
-
pointerEvents: 'none',
|
|
172
|
-
zIndex: 1
|
|
173
|
-
});
|
|
174
31
|
export var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colourScheme) {
|
|
175
32
|
return colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
|
|
176
33
|
};
|
|
@@ -192,6 +49,9 @@ var getNodeClass = function getNodeClass(name) {
|
|
|
192
49
|
return undefined;
|
|
193
50
|
}
|
|
194
51
|
};
|
|
52
|
+
var getBlockNodeStyle = function getBlockNodeStyle(name, colourScheme) {
|
|
53
|
+
return colourScheme === 'traditional' ? getTraditionalNodeStyle(name) : getStandardNodeStyle(name);
|
|
54
|
+
};
|
|
195
55
|
|
|
196
56
|
/**
|
|
197
57
|
* Inline decoration used for insertions as the content already exists in the document
|
|
@@ -200,11 +60,41 @@ var getNodeClass = function getNodeClass(name) {
|
|
|
200
60
|
* @returns Prosemirror inline decoration
|
|
201
61
|
*/
|
|
202
62
|
export var createBlockChangedDecoration = function createBlockChangedDecoration(change, colourScheme) {
|
|
203
|
-
|
|
204
|
-
style
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
63
|
+
if (fg('platform_editor_show_diff_scroll_navigation')) {
|
|
64
|
+
var style = getBlockNodeStyle(change.name, colourScheme);
|
|
65
|
+
var className = getNodeClass(change.name);
|
|
66
|
+
if (style || className) {
|
|
67
|
+
return Decoration.node(change.from, change.to, {
|
|
68
|
+
style: style,
|
|
69
|
+
'data-testid': 'show-diff-changed-decoration-node',
|
|
70
|
+
class: className
|
|
71
|
+
}, {
|
|
72
|
+
key: 'diff-block'
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
return undefined;
|
|
76
|
+
} else {
|
|
77
|
+
return Decoration.node(change.from, change.to, {
|
|
78
|
+
style: getBlockNodeStyle(change.name, colourScheme),
|
|
79
|
+
'data-testid': 'show-diff-changed-decoration-node',
|
|
80
|
+
class: getNodeClass(change.name)
|
|
81
|
+
}, {
|
|
82
|
+
key: 'diff-block'
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
var createContentWrapper = function createContentWrapper(colourScheme) {
|
|
87
|
+
var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
88
|
+
var wrapper = document.createElement('span');
|
|
89
|
+
var baseStyle = convertToInlineCss({
|
|
90
|
+
position: 'relative',
|
|
91
|
+
width: 'fit-content'
|
|
92
|
+
});
|
|
93
|
+
wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colourScheme, isActive)));
|
|
94
|
+
var strikethrough = document.createElement('span');
|
|
95
|
+
strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
|
|
96
|
+
wrapper.append(strikethrough);
|
|
97
|
+
return wrapper;
|
|
208
98
|
};
|
|
209
99
|
export var createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
|
|
210
100
|
var change = _ref.change,
|
|
@@ -251,20 +141,6 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
|
|
|
251
141
|
* or sliced End depth is and match only the entire node.
|
|
252
142
|
*/
|
|
253
143
|
slice.content.forEach(function (node) {
|
|
254
|
-
// Create a wrapper for each node with strikethrough
|
|
255
|
-
var createWrapperWithStrikethrough = function createWrapperWithStrikethrough() {
|
|
256
|
-
var wrapper = document.createElement('span');
|
|
257
|
-
var baseStyle = convertToInlineCss({
|
|
258
|
-
position: 'relative',
|
|
259
|
-
width: 'fit-content'
|
|
260
|
-
});
|
|
261
|
-
wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colourScheme, isActive)));
|
|
262
|
-
var strikethrough = document.createElement('span');
|
|
263
|
-
strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
|
|
264
|
-
wrapper.append(strikethrough);
|
|
265
|
-
return wrapper;
|
|
266
|
-
};
|
|
267
|
-
|
|
268
144
|
// Helper function to handle multiple child nodes
|
|
269
145
|
var handleMultipleChildNodes = function handleMultipleChildNodes(node) {
|
|
270
146
|
if (node.content.childCount > 1 && node.type.inlineContent) {
|
|
@@ -272,16 +148,15 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
|
|
|
272
148
|
var childNodeView = serializer.tryCreateNodeView(childNode);
|
|
273
149
|
if (childNodeView) {
|
|
274
150
|
var lineBreak = document.createElement('br');
|
|
275
|
-
targetNode = node;
|
|
276
151
|
dom.append(lineBreak);
|
|
277
|
-
var wrapper =
|
|
152
|
+
var wrapper = createContentWrapper(colourScheme, isActive);
|
|
278
153
|
wrapper.append(childNodeView);
|
|
279
154
|
dom.append(wrapper);
|
|
280
155
|
} else {
|
|
281
156
|
// Fallback to serializing the individual child node
|
|
282
157
|
var serializedChild = serializer.serializeNode(childNode);
|
|
283
158
|
if (serializedChild) {
|
|
284
|
-
var _wrapper =
|
|
159
|
+
var _wrapper = createContentWrapper(colourScheme, isActive);
|
|
285
160
|
_wrapper.append(serializedChild);
|
|
286
161
|
dom.append(_wrapper);
|
|
287
162
|
}
|
|
@@ -296,21 +171,15 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
|
|
|
296
171
|
var isFirst = slice.content.firstChild === node;
|
|
297
172
|
var isLast = slice.content.lastChild === node;
|
|
298
173
|
var hasInlineContent = node.content.childCount > 0 && node.type.inlineContent === true;
|
|
299
|
-
var targetNode;
|
|
300
174
|
var fallbackSerialization;
|
|
175
|
+
if (handleMultipleChildNodes(node)) {
|
|
176
|
+
return;
|
|
177
|
+
}
|
|
301
178
|
if ((isFirst || isLast && slice.content.childCount > 2) && hasInlineContent) {
|
|
302
|
-
if (handleMultipleChildNodes(node)) {
|
|
303
|
-
return;
|
|
304
|
-
}
|
|
305
|
-
targetNode = node;
|
|
306
179
|
fallbackSerialization = function fallbackSerialization() {
|
|
307
180
|
return serializer.serializeFragment(node.content);
|
|
308
181
|
};
|
|
309
182
|
} else if (isLast && slice.content.childCount === 2) {
|
|
310
|
-
if (handleMultipleChildNodes(node)) {
|
|
311
|
-
return;
|
|
312
|
-
}
|
|
313
|
-
targetNode = node;
|
|
314
183
|
fallbackSerialization = function fallbackSerialization() {
|
|
315
184
|
if (node.type.name === 'text') {
|
|
316
185
|
return document.createTextNode(node.text || '');
|
|
@@ -323,27 +192,23 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
|
|
|
323
192
|
return serializer.serializeFragment(node.content);
|
|
324
193
|
};
|
|
325
194
|
} else {
|
|
326
|
-
if (handleMultipleChildNodes(node)) {
|
|
327
|
-
return;
|
|
328
|
-
}
|
|
329
|
-
targetNode = node;
|
|
330
195
|
fallbackSerialization = function fallbackSerialization() {
|
|
331
196
|
return serializer.serializeNode(node);
|
|
332
197
|
};
|
|
333
198
|
}
|
|
334
199
|
|
|
335
200
|
// Try to create node view, fallback to serialization
|
|
336
|
-
var nodeView = serializer.tryCreateNodeView(
|
|
201
|
+
var nodeView = serializer.tryCreateNodeView(node);
|
|
337
202
|
if (nodeView) {
|
|
338
|
-
if (
|
|
339
|
-
var wrapper =
|
|
203
|
+
if (node.isInline) {
|
|
204
|
+
var wrapper = createContentWrapper(colourScheme, isActive);
|
|
340
205
|
wrapper.append(nodeView);
|
|
341
206
|
dom.append(wrapper);
|
|
342
207
|
} else {
|
|
343
208
|
// Handle all block nodes with unified function
|
|
344
|
-
handleBlockNodeView(dom, nodeView,
|
|
209
|
+
handleBlockNodeView(dom, nodeView, node, colourScheme, intl);
|
|
345
210
|
}
|
|
346
|
-
} else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(
|
|
211
|
+
} else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
|
|
347
212
|
// Skip the case where the node is a paragraph or table row that way it can still be rendered and delete the entire table
|
|
348
213
|
return;
|
|
349
214
|
} else {
|
|
@@ -360,5 +225,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
|
|
|
360
225
|
// Widget decoration used for deletions as the content is not in the document
|
|
361
226
|
// and we want to display the deleted content with a style.
|
|
362
227
|
var safeInsertPos = findSafeInsertPos(newDoc, change.fromB, slice);
|
|
363
|
-
return [Decoration.widget(safeInsertPos, dom
|
|
228
|
+
return [Decoration.widget(safeInsertPos, dom, {
|
|
229
|
+
key: 'diff-widget'
|
|
230
|
+
})];
|
|
364
231
|
};
|
|
@@ -10,6 +10,12 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
10
10
|
import { calculateDiffDecorations } from './calculateDiffDecorations';
|
|
11
11
|
import { NodeViewSerializer } from './NodeViewSerializer';
|
|
12
12
|
export var showDiffPluginKey = new PluginKey('showDiffPlugin');
|
|
13
|
+
export var getScrollableDecorations = function getScrollableDecorations(set) {
|
|
14
|
+
var _set$find;
|
|
15
|
+
return (_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, function (spec) {
|
|
16
|
+
return spec.key === 'diff-inline' || spec.key === 'diff-widget' || spec.key === 'diff-block';
|
|
17
|
+
})) !== null && _set$find !== void 0 ? _set$find : [];
|
|
18
|
+
};
|
|
13
19
|
export var createPlugin = function createPlugin(config, getIntl) {
|
|
14
20
|
var nodeViewSerializer = new NodeViewSerializer({});
|
|
15
21
|
var setNodeViewSerializer = function setNodeViewSerializer(editorView) {
|
|
@@ -36,7 +42,7 @@ export var createPlugin = function createPlugin(config, getIntl) {
|
|
|
36
42
|
if (!pluginState || pluginState.decorations.find().length === 0) {
|
|
37
43
|
return;
|
|
38
44
|
}
|
|
39
|
-
var decorations = pluginState.decorations
|
|
45
|
+
var decorations = getScrollableDecorations(pluginState.decorations);
|
|
40
46
|
var decoration = decorations[(_pluginState$activeIn = pluginState.activeIndex) !== null && _pluginState$activeIn !== void 0 ? _pluginState$activeIn : 0];
|
|
41
47
|
if (!decoration) {
|
|
42
48
|
return;
|
|
@@ -92,7 +98,7 @@ export var createPlugin = function createPlugin(config, getIntl) {
|
|
|
92
98
|
});
|
|
93
99
|
} else if (((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') && fg('platform_editor_show_diff_scroll_navigation')) {
|
|
94
100
|
// Update the active index in plugin state and recalculate decorations
|
|
95
|
-
var _decorations = currentPluginState.decorations
|
|
101
|
+
var _decorations = getScrollableDecorations(currentPluginState.decorations);
|
|
96
102
|
if (_decorations.length > 0) {
|
|
97
103
|
var _currentPluginState$a;
|
|
98
104
|
var nextIndex = (_currentPluginState$a = currentPluginState.activeIndex) !== null && _currentPluginState$a !== void 0 ? _currentPluginState$a : 0;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
-
import {
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
|
+
import { createPlugin, showDiffPluginKey, getScrollableDecorations } from './pm-plugins/main';
|
|
5
6
|
export var showDiffPlugin = function showDiffPlugin(_ref) {
|
|
6
7
|
var _api = _ref.api,
|
|
7
8
|
config = _ref.config;
|
|
@@ -54,7 +55,7 @@ export var showDiffPlugin = function showDiffPlugin(_ref) {
|
|
|
54
55
|
};
|
|
55
56
|
}
|
|
56
57
|
var pluginState = showDiffPluginKey.getState(editorState);
|
|
57
|
-
var decorationCount = (pluginState === null || pluginState === void 0 || (_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
|
|
58
|
+
var decorationCount = fg('platform_editor_show_diff_scroll_navigation') ? getScrollableDecorations(pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorations) : (pluginState === null || pluginState === void 0 || (_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
|
|
58
59
|
return {
|
|
59
60
|
isDisplayingChanges: decorationCount.length > 0,
|
|
60
61
|
activeIndex: pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex,
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const editingStyle: string;
|
|
2
|
+
export declare const editingStyleActive: string;
|
|
3
|
+
export declare const deletedContentStyle: string;
|
|
4
|
+
export declare const deletedContentStyleActive: string;
|
|
5
|
+
export declare const deletedContentStyleNew: string;
|
|
6
|
+
export declare const deletedContentStyleNewActive: string;
|
|
7
|
+
export declare const deletedContentStyleUnbounded: string;
|
|
8
|
+
export declare const getStandardNodeStyle: (nodeName: string) => string | undefined;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const traditionalInsertStyle: string;
|
|
2
|
+
export declare const traditionalInsertStyleActive: string;
|
|
3
|
+
export declare const deletedTraditionalContentStyle: string;
|
|
4
|
+
export declare const deletedTraditionalContentStyleUnbounded: string;
|
|
5
|
+
export declare const getTraditionalNodeStyle: (nodeName: string) => string | undefined;
|
|
@@ -25,7 +25,7 @@ export declare const createBlockChangedDecoration: (change: {
|
|
|
25
25
|
from: number;
|
|
26
26
|
name: string;
|
|
27
27
|
to: number;
|
|
28
|
-
}, colourScheme?: "standard" | "traditional") => Decoration;
|
|
28
|
+
}, colourScheme?: "standard" | "traditional") => Decoration | undefined;
|
|
29
29
|
interface DeletedContentDecorationProps {
|
|
30
30
|
change: Pick<Change, 'fromA' | 'toA' | 'fromB' | 'deleted'>;
|
|
31
31
|
colourScheme?: 'standard' | 'traditional';
|
|
@@ -3,6 +3,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
3
3
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
5
|
import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
|
|
6
|
+
import type { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
6
7
|
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
7
8
|
import { type DiffParams } from '../showDiffPluginType';
|
|
8
9
|
export declare const showDiffPluginKey: PluginKey<ShowDiffPluginState>;
|
|
@@ -17,4 +18,5 @@ export type ShowDiffPluginState = {
|
|
|
17
18
|
originalDoc: PMNode | undefined;
|
|
18
19
|
steps: ProseMirrorStep[];
|
|
19
20
|
};
|
|
21
|
+
export declare const getScrollableDecorations: (set: DecorationSet | undefined) => Decoration[];
|
|
20
22
|
export declare const createPlugin: (config: DiffParams | undefined, getIntl: () => IntlShape) => SafePlugin<ShowDiffPluginState>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const editingStyle: string;
|
|
2
|
+
export declare const editingStyleActive: string;
|
|
3
|
+
export declare const deletedContentStyle: string;
|
|
4
|
+
export declare const deletedContentStyleActive: string;
|
|
5
|
+
export declare const deletedContentStyleNew: string;
|
|
6
|
+
export declare const deletedContentStyleNewActive: string;
|
|
7
|
+
export declare const deletedContentStyleUnbounded: string;
|
|
8
|
+
export declare const getStandardNodeStyle: (nodeName: string) => string | undefined;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const traditionalInsertStyle: string;
|
|
2
|
+
export declare const traditionalInsertStyleActive: string;
|
|
3
|
+
export declare const deletedTraditionalContentStyle: string;
|
|
4
|
+
export declare const deletedTraditionalContentStyleUnbounded: string;
|
|
5
|
+
export declare const getTraditionalNodeStyle: (nodeName: string) => string | undefined;
|
|
@@ -25,7 +25,7 @@ export declare const createBlockChangedDecoration: (change: {
|
|
|
25
25
|
from: number;
|
|
26
26
|
name: string;
|
|
27
27
|
to: number;
|
|
28
|
-
}, colourScheme?: "standard" | "traditional") => Decoration;
|
|
28
|
+
}, colourScheme?: "standard" | "traditional") => Decoration | undefined;
|
|
29
29
|
interface DeletedContentDecorationProps {
|
|
30
30
|
change: Pick<Change, 'fromA' | 'toA' | 'fromB' | 'deleted'>;
|
|
31
31
|
colourScheme?: 'standard' | 'traditional';
|
|
@@ -3,6 +3,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
3
3
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
5
|
import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
|
|
6
|
+
import type { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
6
7
|
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
7
8
|
import { type DiffParams } from '../showDiffPluginType';
|
|
8
9
|
export declare const showDiffPluginKey: PluginKey<ShowDiffPluginState>;
|
|
@@ -17,4 +18,5 @@ export type ShowDiffPluginState = {
|
|
|
17
18
|
originalDoc: PMNode | undefined;
|
|
18
19
|
steps: ProseMirrorStep[];
|
|
19
20
|
};
|
|
21
|
+
export declare const getScrollableDecorations: (set: DecorationSet | undefined) => Decoration[];
|
|
20
22
|
export declare const createPlugin: (config: DiffParams | undefined, getIntl: () => IntlShape) => SafePlugin<ShowDiffPluginState>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-show-diff",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.4",
|
|
4
4
|
"description": "ShowDiff plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
"sideEffects": false,
|
|
29
29
|
"atlaskit:src": "src/index.ts",
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@atlaskit/adf-schema": "^52.
|
|
31
|
+
"@atlaskit/adf-schema": "^52.1.0",
|
|
32
32
|
"@atlaskit/editor-prosemirror": "^7.3.0",
|
|
33
33
|
"@atlaskit/editor-tables": "^2.9.0",
|
|
34
34
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
35
|
-
"@atlaskit/tmp-editor-statsig": "^32.
|
|
35
|
+
"@atlaskit/tmp-editor-statsig": "^32.11.0",
|
|
36
36
|
"@atlaskit/tokens": "^11.0.0",
|
|
37
37
|
"@babel/runtime": "^7.0.0",
|
|
38
38
|
"lodash": "^4.17.21",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"prosemirror-changeset": "^2.3.1"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"@atlaskit/editor-common": "^111.
|
|
43
|
+
"@atlaskit/editor-common": "^111.24.0",
|
|
44
44
|
"react": "^18.2.0"
|
|
45
45
|
},
|
|
46
46
|
"techstack": {
|