@atlaskit/editor-plugin-show-diff 4.1.4 → 5.0.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/CHANGELOG.md +17 -0
- package/dist/cjs/pm-plugins/calculateDiffDecorations.js +11 -11
- package/dist/cjs/pm-plugins/decorations.js +21 -21
- package/dist/cjs/pm-plugins/deletedBlocksHandler.js +22 -22
- package/dist/cjs/pm-plugins/deletedRowsHandler.js +7 -7
- package/dist/cjs/pm-plugins/main.js +2 -2
- package/dist/es2019/pm-plugins/calculateDiffDecorations.js +11 -11
- package/dist/es2019/pm-plugins/decorations.js +20 -20
- package/dist/es2019/pm-plugins/deletedBlocksHandler.js +22 -22
- package/dist/es2019/pm-plugins/deletedRowsHandler.js +7 -7
- package/dist/es2019/pm-plugins/main.js +2 -2
- package/dist/esm/pm-plugins/calculateDiffDecorations.js +11 -11
- package/dist/esm/pm-plugins/decorations.js +21 -21
- package/dist/esm/pm-plugins/deletedBlocksHandler.js +22 -22
- package/dist/esm/pm-plugins/deletedRowsHandler.js +7 -7
- package/dist/esm/pm-plugins/main.js +2 -2
- package/dist/types/pm-plugins/calculateDiffDecorations.d.ts +2 -2
- package/dist/types/pm-plugins/decorations.d.ts +6 -6
- package/dist/types/pm-plugins/deletedBlocksHandler.d.ts +8 -8
- package/dist/types/pm-plugins/deletedRowsHandler.d.ts +3 -3
- package/dist/types/showDiffPluginType.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/calculateDiffDecorations.d.ts +2 -2
- package/dist/types-ts4.5/pm-plugins/decorations.d.ts +6 -6
- package/dist/types-ts4.5/pm-plugins/deletedBlocksHandler.d.ts +8 -8
- package/dist/types-ts4.5/pm-plugins/deletedRowsHandler.d.ts +3 -3
- package/dist/types-ts4.5/showDiffPluginType.d.ts +2 -1
- package/package.json +4 -4
|
@@ -13,9 +13,9 @@ import { findSafeInsertPos } from './findSafeInsertPos';
|
|
|
13
13
|
* @param change Changeset "change" containing information about the change content + range
|
|
14
14
|
* @returns Prosemirror inline decoration
|
|
15
15
|
*/
|
|
16
|
-
export const createInlineChangedDecoration = (change,
|
|
16
|
+
export const createInlineChangedDecoration = (change, colorScheme, isActive = false) => {
|
|
17
17
|
let style;
|
|
18
|
-
if (
|
|
18
|
+
if (colorScheme === 'traditional') {
|
|
19
19
|
style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
|
|
20
20
|
} else {
|
|
21
21
|
style = isActive ? editingStyleActive : editingStyle;
|
|
@@ -27,9 +27,9 @@ export const createInlineChangedDecoration = (change, colourScheme, isActive = f
|
|
|
27
27
|
key: 'diff-inline'
|
|
28
28
|
});
|
|
29
29
|
};
|
|
30
|
-
export const getDeletedContentStyleUnbounded =
|
|
31
|
-
export const getDeletedContentStyle = (
|
|
32
|
-
if (
|
|
30
|
+
export const getDeletedContentStyleUnbounded = colorScheme => colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
|
|
31
|
+
export const getDeletedContentStyle = (colorScheme, isActive = false) => {
|
|
32
|
+
if (colorScheme === 'traditional') {
|
|
33
33
|
return deletedTraditionalContentStyle;
|
|
34
34
|
}
|
|
35
35
|
if (isActive) {
|
|
@@ -45,8 +45,8 @@ const getNodeClass = name => {
|
|
|
45
45
|
return undefined;
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
|
-
const getBlockNodeStyle = (name,
|
|
49
|
-
return
|
|
48
|
+
const getBlockNodeStyle = (name, colorScheme) => {
|
|
49
|
+
return colorScheme === 'traditional' ? getTraditionalNodeStyle(name) : getStandardNodeStyle(name);
|
|
50
50
|
};
|
|
51
51
|
|
|
52
52
|
/**
|
|
@@ -55,9 +55,9 @@ const getBlockNodeStyle = (name, colourScheme) => {
|
|
|
55
55
|
* @param change Changeset "change" containing information about the change content + range
|
|
56
56
|
* @returns Prosemirror inline decoration
|
|
57
57
|
*/
|
|
58
|
-
export const createBlockChangedDecoration = (change,
|
|
58
|
+
export const createBlockChangedDecoration = (change, colorScheme) => {
|
|
59
59
|
if (fg('platform_editor_show_diff_scroll_navigation')) {
|
|
60
|
-
const style = getBlockNodeStyle(change.name,
|
|
60
|
+
const style = getBlockNodeStyle(change.name, colorScheme);
|
|
61
61
|
const className = getNodeClass(change.name);
|
|
62
62
|
if (style || className) {
|
|
63
63
|
return Decoration.node(change.from, change.to, {
|
|
@@ -71,7 +71,7 @@ export const createBlockChangedDecoration = (change, colourScheme) => {
|
|
|
71
71
|
return undefined;
|
|
72
72
|
} else {
|
|
73
73
|
return Decoration.node(change.from, change.to, {
|
|
74
|
-
style: getBlockNodeStyle(change.name,
|
|
74
|
+
style: getBlockNodeStyle(change.name, colorScheme),
|
|
75
75
|
'data-testid': 'show-diff-changed-decoration-node',
|
|
76
76
|
class: getNodeClass(change.name)
|
|
77
77
|
}, {
|
|
@@ -79,15 +79,15 @@ export const createBlockChangedDecoration = (change, colourScheme) => {
|
|
|
79
79
|
});
|
|
80
80
|
}
|
|
81
81
|
};
|
|
82
|
-
const createContentWrapper = (
|
|
82
|
+
const createContentWrapper = (colorScheme, isActive = false) => {
|
|
83
83
|
const wrapper = document.createElement('span');
|
|
84
84
|
const baseStyle = convertToInlineCss({
|
|
85
85
|
position: 'relative',
|
|
86
86
|
width: 'fit-content'
|
|
87
87
|
});
|
|
88
|
-
wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(
|
|
88
|
+
wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive)}`);
|
|
89
89
|
const strikethrough = document.createElement('span');
|
|
90
|
-
strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(
|
|
90
|
+
strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
|
|
91
91
|
wrapper.append(strikethrough);
|
|
92
92
|
return wrapper;
|
|
93
93
|
};
|
|
@@ -95,7 +95,7 @@ export const createDeletedContentDecoration = ({
|
|
|
95
95
|
change,
|
|
96
96
|
doc,
|
|
97
97
|
nodeViewSerializer,
|
|
98
|
-
|
|
98
|
+
colorScheme,
|
|
99
99
|
newDoc,
|
|
100
100
|
intl,
|
|
101
101
|
isActive = false
|
|
@@ -115,7 +115,7 @@ export const createDeletedContentDecoration = ({
|
|
|
115
115
|
}
|
|
116
116
|
const {
|
|
117
117
|
decorations
|
|
118
|
-
} = handleDeletedRows([change], doc, newDoc, nodeViewSerializer,
|
|
118
|
+
} = handleDeletedRows([change], doc, newDoc, nodeViewSerializer, colorScheme);
|
|
119
119
|
return decorations;
|
|
120
120
|
}
|
|
121
121
|
const serializer = nodeViewSerializer;
|
|
@@ -137,14 +137,14 @@ export const createDeletedContentDecoration = ({
|
|
|
137
137
|
if (childNodeView) {
|
|
138
138
|
const lineBreak = document.createElement('br');
|
|
139
139
|
dom.append(lineBreak);
|
|
140
|
-
const wrapper = createContentWrapper(
|
|
140
|
+
const wrapper = createContentWrapper(colorScheme, isActive);
|
|
141
141
|
wrapper.append(childNodeView);
|
|
142
142
|
dom.append(wrapper);
|
|
143
143
|
} else {
|
|
144
144
|
// Fallback to serializing the individual child node
|
|
145
145
|
const serializedChild = serializer.serializeNode(childNode);
|
|
146
146
|
if (serializedChild) {
|
|
147
|
-
const wrapper = createContentWrapper(
|
|
147
|
+
const wrapper = createContentWrapper(colorScheme, isActive);
|
|
148
148
|
wrapper.append(serializedChild);
|
|
149
149
|
dom.append(wrapper);
|
|
150
150
|
}
|
|
@@ -185,12 +185,12 @@ export const createDeletedContentDecoration = ({
|
|
|
185
185
|
const nodeView = serializer.tryCreateNodeView(node);
|
|
186
186
|
if (nodeView) {
|
|
187
187
|
if (node.isInline) {
|
|
188
|
-
const wrapper = createContentWrapper(
|
|
188
|
+
const wrapper = createContentWrapper(colorScheme, isActive);
|
|
189
189
|
wrapper.append(nodeView);
|
|
190
190
|
dom.append(wrapper);
|
|
191
191
|
} else {
|
|
192
192
|
// Handle all block nodes with unified function
|
|
193
|
-
handleBlockNodeView(dom, nodeView, node,
|
|
193
|
+
handleBlockNodeView(dom, nodeView, node, colorScheme, intl);
|
|
194
194
|
}
|
|
195
195
|
} else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
|
|
196
196
|
// Skip the case where the node is a paragraph or table row that way it can still be rendered and delete the entire table
|
|
@@ -198,7 +198,7 @@ export const createDeletedContentDecoration = ({
|
|
|
198
198
|
} else {
|
|
199
199
|
const fallbackNode = fallbackSerialization();
|
|
200
200
|
if (fallbackNode) {
|
|
201
|
-
const wrapper = createDeletedStyleWrapperWithoutOpacity(
|
|
201
|
+
const wrapper = createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive);
|
|
202
202
|
wrapper.append(fallbackNode);
|
|
203
203
|
dom.append(wrapper);
|
|
204
204
|
}
|
|
@@ -53,8 +53,8 @@ const lozengeStyle = convertToInlineCss({
|
|
|
53
53
|
whiteSpace: 'nowrap',
|
|
54
54
|
color: "var(--ds-text-warning-inverse, #292A2E)"
|
|
55
55
|
});
|
|
56
|
-
export const getDeletedStyleNode = (nodeName,
|
|
57
|
-
const isTraditional =
|
|
56
|
+
export const getDeletedStyleNode = (nodeName, colorScheme) => {
|
|
57
|
+
const isTraditional = colorScheme === 'traditional';
|
|
58
58
|
switch (nodeName) {
|
|
59
59
|
case 'blockquote':
|
|
60
60
|
return fg('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge : deletedStyleQuoteNode;
|
|
@@ -154,29 +154,29 @@ export const createBlockNodeWrapper = () => {
|
|
|
154
154
|
/**
|
|
155
155
|
* Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
|
|
156
156
|
*/
|
|
157
|
-
export const createDeletedStyleWrapperWithoutOpacity = (
|
|
157
|
+
export const createDeletedStyleWrapperWithoutOpacity = (colorScheme, isActive) => {
|
|
158
158
|
const wrapper = document.createElement('span');
|
|
159
|
-
wrapper.setAttribute('style', getDeletedContentStyle(
|
|
159
|
+
wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
|
|
160
160
|
return wrapper;
|
|
161
161
|
};
|
|
162
162
|
|
|
163
163
|
/**
|
|
164
164
|
* Applies deleted styles directly to an HTML element by merging with existing styles
|
|
165
165
|
*/
|
|
166
|
-
export const applyDeletedStylesToElement = (element, targetNode,
|
|
166
|
+
export const applyDeletedStylesToElement = (element, targetNode, colorScheme) => {
|
|
167
167
|
const currentStyle = element.getAttribute('style') || '';
|
|
168
|
-
const deletedContentStyle = getDeletedContentStyle(
|
|
169
|
-
const nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name,
|
|
168
|
+
const deletedContentStyle = getDeletedContentStyle(colorScheme);
|
|
169
|
+
const nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colorScheme) || '';
|
|
170
170
|
element.setAttribute('style', `${currentStyle}${deletedContentStyle}${nodeSpecificStyle}`);
|
|
171
171
|
};
|
|
172
172
|
|
|
173
173
|
/**
|
|
174
174
|
* Creates a content wrapper with deleted styles for a block node
|
|
175
175
|
*/
|
|
176
|
-
export const createBlockNodeContentWrapper = (nodeView, targetNode,
|
|
176
|
+
export const createBlockNodeContentWrapper = (nodeView, targetNode, colorScheme) => {
|
|
177
177
|
const contentWrapper = document.createElement('div');
|
|
178
|
-
const nodeStyle = getDeletedStyleNode(targetNode.type.name,
|
|
179
|
-
contentWrapper.setAttribute('style', `${getDeletedContentStyle(
|
|
178
|
+
const nodeStyle = getDeletedStyleNode(targetNode.type.name, colorScheme);
|
|
179
|
+
contentWrapper.setAttribute('style', `${getDeletedContentStyle(colorScheme)}${nodeStyle || ''}`);
|
|
180
180
|
contentWrapper.append(nodeView);
|
|
181
181
|
return contentWrapper;
|
|
182
182
|
};
|
|
@@ -187,7 +187,7 @@ export const createBlockNodeContentWrapper = (nodeView, targetNode, colourScheme
|
|
|
187
187
|
* to wait for the rich-media-item to appear before attaching the lozenge.
|
|
188
188
|
* @returns true if embedCard was handled
|
|
189
189
|
*/
|
|
190
|
-
export const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge,
|
|
190
|
+
export const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge, colorScheme) => {
|
|
191
191
|
if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
|
|
192
192
|
return false;
|
|
193
193
|
}
|
|
@@ -208,7 +208,7 @@ export const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge, c
|
|
|
208
208
|
});
|
|
209
209
|
}
|
|
210
210
|
if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
211
|
-
const showDiffDeletedNodeClass =
|
|
211
|
+
const showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
|
|
212
212
|
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
213
213
|
}
|
|
214
214
|
dom.append(nodeView);
|
|
@@ -219,7 +219,7 @@ export const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge, c
|
|
|
219
219
|
* Handles special mediaSingle node rendering with lozenge on child media element
|
|
220
220
|
* @returns true if mediaSingle was handled, false otherwise
|
|
221
221
|
*/
|
|
222
|
-
export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge,
|
|
222
|
+
export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge, colorScheme) => {
|
|
223
223
|
if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
|
|
224
224
|
return false;
|
|
225
225
|
}
|
|
@@ -238,7 +238,7 @@ export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge,
|
|
|
238
238
|
|
|
239
239
|
// Add deleted node class if needed
|
|
240
240
|
if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
241
|
-
const showDiffDeletedNodeClass =
|
|
241
|
+
const showDiffDeletedNodeClass = colorScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
|
|
242
242
|
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
243
243
|
}
|
|
244
244
|
dom.append(nodeView);
|
|
@@ -248,22 +248,22 @@ export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge,
|
|
|
248
248
|
/**
|
|
249
249
|
* Appends a block node with wrapper, lozenge, and appropriate styling
|
|
250
250
|
*/
|
|
251
|
-
export const appendBlockNodeWithWrapper = (dom, nodeView, targetNode,
|
|
251
|
+
export const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colorScheme, intl) => {
|
|
252
252
|
const blockWrapper = createBlockNodeWrapper();
|
|
253
253
|
if (shouldShowRemovedLozenge(targetNode.type.name)) {
|
|
254
254
|
const lozenge = createRemovedLozenge(intl);
|
|
255
|
-
if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge,
|
|
255
|
+
if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) && fg('platform_editor_ai_aifc_patch_ga_blockers')) {
|
|
256
256
|
return;
|
|
257
257
|
}
|
|
258
|
-
if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge,
|
|
258
|
+
if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme)) {
|
|
259
259
|
return;
|
|
260
260
|
}
|
|
261
261
|
blockWrapper.append(lozenge);
|
|
262
262
|
}
|
|
263
|
-
const contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode,
|
|
263
|
+
const contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colorScheme);
|
|
264
264
|
blockWrapper.append(contentWrapper);
|
|
265
265
|
if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
266
|
-
const showDiffDeletedNodeClass =
|
|
266
|
+
const showDiffDeletedNodeClass = colorScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
|
|
267
267
|
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
268
268
|
}
|
|
269
269
|
dom.append(blockWrapper);
|
|
@@ -274,13 +274,13 @@ export const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colourSche
|
|
|
274
274
|
* For heading nodes, applies styles directly to preserve natural margins.
|
|
275
275
|
* For other block nodes, uses wrapper approach with optional lozenge.
|
|
276
276
|
*/
|
|
277
|
-
export const handleBlockNodeView = (dom, nodeView, targetNode,
|
|
277
|
+
export const handleBlockNodeView = (dom, nodeView, targetNode, colorScheme, intl) => {
|
|
278
278
|
if (shouldApplyDeletedStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
|
|
279
279
|
// Apply deleted styles directly to preserve natural block-level margins
|
|
280
|
-
applyDeletedStylesToElement(nodeView, targetNode,
|
|
280
|
+
applyDeletedStylesToElement(nodeView, targetNode, colorScheme);
|
|
281
281
|
dom.append(nodeView);
|
|
282
282
|
} else {
|
|
283
283
|
// Use wrapper approach for other block nodes
|
|
284
|
-
appendBlockNodeWithWrapper(dom, nodeView, targetNode,
|
|
284
|
+
appendBlockNodeWithWrapper(dom, nodeView, targetNode, colorScheme, intl);
|
|
285
285
|
}
|
|
286
286
|
};
|
|
@@ -50,7 +50,7 @@ const extractDeletedRows = (change, originalDoc, newDoc) => {
|
|
|
50
50
|
const changeEndInTable = change.toA - tableOld.pos - 1;
|
|
51
51
|
let currentOffset = 0;
|
|
52
52
|
let rowIndex = 0;
|
|
53
|
-
tableOld.node.content.forEach(
|
|
53
|
+
tableOld.node.content.forEach(rowNode => {
|
|
54
54
|
const rowStart = currentOffset;
|
|
55
55
|
const rowEnd = currentOffset + rowNode.nodeSize;
|
|
56
56
|
|
|
@@ -107,9 +107,9 @@ const isEmptyRow = rowNode => {
|
|
|
107
107
|
/**
|
|
108
108
|
* Creates a DOM representation of a deleted table row
|
|
109
109
|
*/
|
|
110
|
-
const createDeletedRowDOM = (rowNode, nodeViewSerializer,
|
|
110
|
+
const createDeletedRowDOM = (rowNode, nodeViewSerializer, colorScheme) => {
|
|
111
111
|
const tr = document.createElement('tr');
|
|
112
|
-
tr.setAttribute('style',
|
|
112
|
+
tr.setAttribute('style', colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
|
|
113
113
|
tr.setAttribute('data-testid', 'show-diff-deleted-row');
|
|
114
114
|
|
|
115
115
|
// Serialize each cell in the row
|
|
@@ -153,10 +153,10 @@ export const createDeletedRowsDecorations = ({
|
|
|
153
153
|
originalDoc,
|
|
154
154
|
newDoc,
|
|
155
155
|
nodeViewSerializer,
|
|
156
|
-
|
|
156
|
+
colorScheme
|
|
157
157
|
}) => {
|
|
158
158
|
return deletedRows.map(deletedRow => {
|
|
159
|
-
const rowDOM = createDeletedRowDOM(deletedRow.rowNode, nodeViewSerializer,
|
|
159
|
+
const rowDOM = createDeletedRowDOM(deletedRow.rowNode, nodeViewSerializer, colorScheme);
|
|
160
160
|
|
|
161
161
|
// Find safe insertion position for the deleted row
|
|
162
162
|
const safeInsertPos = findSafeInsertPos(newDoc, deletedRow.fromB - 1,
|
|
@@ -169,7 +169,7 @@ export const createDeletedRowsDecorations = ({
|
|
|
169
169
|
/**
|
|
170
170
|
* Main function to handle deleted rows - computes diff and creates decorations
|
|
171
171
|
*/
|
|
172
|
-
export const handleDeletedRows = (changes, originalDoc, newDoc, nodeViewSerializer,
|
|
172
|
+
export const handleDeletedRows = (changes, originalDoc, newDoc, nodeViewSerializer, colorScheme) => {
|
|
173
173
|
// First, expand the changes to include complete deleted rows
|
|
174
174
|
const deletedRows = expandDiffForDeletedRows(changes.filter(change => change.deleted.length > 0), originalDoc, newDoc);
|
|
175
175
|
const allDecorations = createDeletedRowsDecorations({
|
|
@@ -177,7 +177,7 @@ export const handleDeletedRows = (changes, originalDoc, newDoc, nodeViewSerializ
|
|
|
177
177
|
originalDoc,
|
|
178
178
|
newDoc,
|
|
179
179
|
nodeViewSerializer,
|
|
180
|
-
|
|
180
|
+
colorScheme
|
|
181
181
|
});
|
|
182
182
|
return {
|
|
183
183
|
decorations: allDecorations
|
|
@@ -83,7 +83,7 @@ export const createPlugin = (config, getIntl) => {
|
|
|
83
83
|
state: newState,
|
|
84
84
|
pluginState: newPluginState,
|
|
85
85
|
nodeViewSerializer,
|
|
86
|
-
|
|
86
|
+
colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
|
|
87
87
|
intl: getIntl(),
|
|
88
88
|
activeIndexPos: fg('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined
|
|
89
89
|
});
|
|
@@ -122,7 +122,7 @@ export const createPlugin = (config, getIntl) => {
|
|
|
122
122
|
state: newState,
|
|
123
123
|
pluginState: newPluginState,
|
|
124
124
|
nodeViewSerializer,
|
|
125
|
-
|
|
125
|
+
colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
|
|
126
126
|
intl: getIntl(),
|
|
127
127
|
activeIndexPos: newPluginState.activeIndexPos
|
|
128
128
|
});
|
|
@@ -16,7 +16,7 @@ import { getAttrChangeRanges, stepIsValidAttrChange } from './attributeDecoratio
|
|
|
16
16
|
import { createInlineChangedDecoration, createDeletedContentDecoration, createBlockChangedDecoration } from './decorations';
|
|
17
17
|
import { getMarkChangeRanges } from './markDecorations';
|
|
18
18
|
import { simplifySteps } from './simplifyChanges';
|
|
19
|
-
var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(doc, from, to,
|
|
19
|
+
var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(doc, from, to, colorScheme) {
|
|
20
20
|
var decorations = [];
|
|
21
21
|
// Iterate over the document nodes within the range
|
|
22
22
|
doc.nodesBetween(from, to, function (node, pos) {
|
|
@@ -25,7 +25,7 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
|
|
|
25
25
|
from: pos,
|
|
26
26
|
to: pos + node.nodeSize,
|
|
27
27
|
name: node.type.name
|
|
28
|
-
},
|
|
28
|
+
}, colorScheme);
|
|
29
29
|
if (decoration) {
|
|
30
30
|
decorations.push(decoration);
|
|
31
31
|
}
|
|
@@ -70,7 +70,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
|
|
|
70
70
|
var state = _ref.state,
|
|
71
71
|
pluginState = _ref.pluginState,
|
|
72
72
|
nodeViewSerializer = _ref.nodeViewSerializer,
|
|
73
|
-
|
|
73
|
+
colorScheme = _ref.colorScheme,
|
|
74
74
|
intl = _ref.intl,
|
|
75
75
|
activeIndexPos = _ref.activeIndexPos;
|
|
76
76
|
var originalDoc = pluginState.originalDoc,
|
|
@@ -115,8 +115,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
|
|
|
115
115
|
optimizedChanges.forEach(function (change) {
|
|
116
116
|
var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
|
|
117
117
|
if (change.inserted.length > 0) {
|
|
118
|
-
decorations.push(createInlineChangedDecoration(change,
|
|
119
|
-
decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB,
|
|
118
|
+
decorations.push(createInlineChangedDecoration(change, colorScheme, isActive));
|
|
119
|
+
decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme)));
|
|
120
120
|
}
|
|
121
121
|
if (change.deleted.length > 0) {
|
|
122
122
|
var _isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
|
|
@@ -124,7 +124,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
|
|
|
124
124
|
change: change,
|
|
125
125
|
doc: originalDoc,
|
|
126
126
|
nodeViewSerializer: nodeViewSerializer,
|
|
127
|
-
|
|
127
|
+
colorScheme: colorScheme,
|
|
128
128
|
newDoc: tr.doc,
|
|
129
129
|
intl: intl,
|
|
130
130
|
isActive: _isActive
|
|
@@ -136,10 +136,10 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
|
|
|
136
136
|
});
|
|
137
137
|
getMarkChangeRanges(steps).forEach(function (change) {
|
|
138
138
|
var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
|
|
139
|
-
decorations.push(createInlineChangedDecoration(change,
|
|
139
|
+
decorations.push(createInlineChangedDecoration(change, colorScheme, isActive));
|
|
140
140
|
});
|
|
141
141
|
getAttrChangeRanges(tr.doc, attrSteps).forEach(function (change) {
|
|
142
|
-
decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB,
|
|
142
|
+
decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme)));
|
|
143
143
|
});
|
|
144
144
|
return DecorationSet.empty.add(tr.doc, decorations);
|
|
145
145
|
};
|
|
@@ -151,16 +151,16 @@ function (_ref2, _ref3) {
|
|
|
151
151
|
_ref4$ = _ref4[0],
|
|
152
152
|
pluginState = _ref4$.pluginState,
|
|
153
153
|
state = _ref4$.state,
|
|
154
|
-
|
|
154
|
+
colorScheme = _ref4$.colorScheme,
|
|
155
155
|
intl = _ref4$.intl,
|
|
156
156
|
activeIndexPos = _ref4$.activeIndexPos;
|
|
157
157
|
var _ref5 = _slicedToArray(_ref3, 1),
|
|
158
158
|
_ref5$ = _ref5[0],
|
|
159
159
|
lastPluginState = _ref5$.pluginState,
|
|
160
160
|
lastState = _ref5$.state,
|
|
161
|
-
|
|
161
|
+
lastColorScheme = _ref5$.colorScheme,
|
|
162
162
|
lastIntl = _ref5$.intl,
|
|
163
163
|
lastActiveIndexPos = _ref5$.activeIndexPos;
|
|
164
164
|
var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
|
|
165
|
-
return (_ref6 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) &&
|
|
165
|
+
return (_ref6 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref6 !== void 0 ? _ref6 : false;
|
|
166
166
|
});
|
|
@@ -13,10 +13,10 @@ import { findSafeInsertPos } from './findSafeInsertPos';
|
|
|
13
13
|
* @param change Changeset "change" containing information about the change content + range
|
|
14
14
|
* @returns Prosemirror inline decoration
|
|
15
15
|
*/
|
|
16
|
-
export var createInlineChangedDecoration = function createInlineChangedDecoration(change,
|
|
16
|
+
export var createInlineChangedDecoration = function createInlineChangedDecoration(change, colorScheme) {
|
|
17
17
|
var isActive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
18
18
|
var style;
|
|
19
|
-
if (
|
|
19
|
+
if (colorScheme === 'traditional') {
|
|
20
20
|
style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
|
|
21
21
|
} else {
|
|
22
22
|
style = isActive ? editingStyleActive : editingStyle;
|
|
@@ -28,12 +28,12 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
|
|
|
28
28
|
key: 'diff-inline'
|
|
29
29
|
});
|
|
30
30
|
};
|
|
31
|
-
export var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(
|
|
32
|
-
return
|
|
31
|
+
export var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
|
|
32
|
+
return colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
|
|
33
33
|
};
|
|
34
|
-
export var getDeletedContentStyle = function getDeletedContentStyle(
|
|
34
|
+
export var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
|
|
35
35
|
var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
36
|
-
if (
|
|
36
|
+
if (colorScheme === 'traditional') {
|
|
37
37
|
return deletedTraditionalContentStyle;
|
|
38
38
|
}
|
|
39
39
|
if (isActive) {
|
|
@@ -49,8 +49,8 @@ var getNodeClass = function getNodeClass(name) {
|
|
|
49
49
|
return undefined;
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
|
-
var getBlockNodeStyle = function getBlockNodeStyle(name,
|
|
53
|
-
return
|
|
52
|
+
var getBlockNodeStyle = function getBlockNodeStyle(name, colorScheme) {
|
|
53
|
+
return colorScheme === 'traditional' ? getTraditionalNodeStyle(name) : getStandardNodeStyle(name);
|
|
54
54
|
};
|
|
55
55
|
|
|
56
56
|
/**
|
|
@@ -59,9 +59,9 @@ var getBlockNodeStyle = function getBlockNodeStyle(name, colourScheme) {
|
|
|
59
59
|
* @param change Changeset "change" containing information about the change content + range
|
|
60
60
|
* @returns Prosemirror inline decoration
|
|
61
61
|
*/
|
|
62
|
-
export var createBlockChangedDecoration = function createBlockChangedDecoration(change,
|
|
62
|
+
export var createBlockChangedDecoration = function createBlockChangedDecoration(change, colorScheme) {
|
|
63
63
|
if (fg('platform_editor_show_diff_scroll_navigation')) {
|
|
64
|
-
var style = getBlockNodeStyle(change.name,
|
|
64
|
+
var style = getBlockNodeStyle(change.name, colorScheme);
|
|
65
65
|
var className = getNodeClass(change.name);
|
|
66
66
|
if (style || className) {
|
|
67
67
|
return Decoration.node(change.from, change.to, {
|
|
@@ -75,7 +75,7 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
|
|
|
75
75
|
return undefined;
|
|
76
76
|
} else {
|
|
77
77
|
return Decoration.node(change.from, change.to, {
|
|
78
|
-
style: getBlockNodeStyle(change.name,
|
|
78
|
+
style: getBlockNodeStyle(change.name, colorScheme),
|
|
79
79
|
'data-testid': 'show-diff-changed-decoration-node',
|
|
80
80
|
class: getNodeClass(change.name)
|
|
81
81
|
}, {
|
|
@@ -83,16 +83,16 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
|
|
|
83
83
|
});
|
|
84
84
|
}
|
|
85
85
|
};
|
|
86
|
-
var createContentWrapper = function createContentWrapper(
|
|
86
|
+
var createContentWrapper = function createContentWrapper(colorScheme) {
|
|
87
87
|
var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
88
88
|
var wrapper = document.createElement('span');
|
|
89
89
|
var baseStyle = convertToInlineCss({
|
|
90
90
|
position: 'relative',
|
|
91
91
|
width: 'fit-content'
|
|
92
92
|
});
|
|
93
|
-
wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(
|
|
93
|
+
wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
|
|
94
94
|
var strikethrough = document.createElement('span');
|
|
95
|
-
strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(
|
|
95
|
+
strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
|
|
96
96
|
wrapper.append(strikethrough);
|
|
97
97
|
return wrapper;
|
|
98
98
|
};
|
|
@@ -100,7 +100,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
|
|
|
100
100
|
var change = _ref.change,
|
|
101
101
|
doc = _ref.doc,
|
|
102
102
|
nodeViewSerializer = _ref.nodeViewSerializer,
|
|
103
|
-
|
|
103
|
+
colorScheme = _ref.colorScheme,
|
|
104
104
|
newDoc = _ref.newDoc,
|
|
105
105
|
intl = _ref.intl,
|
|
106
106
|
_ref$isActive = _ref.isActive,
|
|
@@ -126,7 +126,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
|
|
|
126
126
|
if (!fg('platform_editor_ai_aifc_patch_ga')) {
|
|
127
127
|
return;
|
|
128
128
|
}
|
|
129
|
-
var _handleDeletedRows = handleDeletedRows([change], doc, newDoc, nodeViewSerializer,
|
|
129
|
+
var _handleDeletedRows = handleDeletedRows([change], doc, newDoc, nodeViewSerializer, colorScheme),
|
|
130
130
|
decorations = _handleDeletedRows.decorations;
|
|
131
131
|
return decorations;
|
|
132
132
|
}
|
|
@@ -149,14 +149,14 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
|
|
|
149
149
|
if (childNodeView) {
|
|
150
150
|
var lineBreak = document.createElement('br');
|
|
151
151
|
dom.append(lineBreak);
|
|
152
|
-
var wrapper = createContentWrapper(
|
|
152
|
+
var wrapper = createContentWrapper(colorScheme, isActive);
|
|
153
153
|
wrapper.append(childNodeView);
|
|
154
154
|
dom.append(wrapper);
|
|
155
155
|
} else {
|
|
156
156
|
// Fallback to serializing the individual child node
|
|
157
157
|
var serializedChild = serializer.serializeNode(childNode);
|
|
158
158
|
if (serializedChild) {
|
|
159
|
-
var _wrapper = createContentWrapper(
|
|
159
|
+
var _wrapper = createContentWrapper(colorScheme, isActive);
|
|
160
160
|
_wrapper.append(serializedChild);
|
|
161
161
|
dom.append(_wrapper);
|
|
162
162
|
}
|
|
@@ -201,12 +201,12 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
|
|
|
201
201
|
var nodeView = serializer.tryCreateNodeView(node);
|
|
202
202
|
if (nodeView) {
|
|
203
203
|
if (node.isInline) {
|
|
204
|
-
var wrapper = createContentWrapper(
|
|
204
|
+
var wrapper = createContentWrapper(colorScheme, isActive);
|
|
205
205
|
wrapper.append(nodeView);
|
|
206
206
|
dom.append(wrapper);
|
|
207
207
|
} else {
|
|
208
208
|
// Handle all block nodes with unified function
|
|
209
|
-
handleBlockNodeView(dom, nodeView, node,
|
|
209
|
+
handleBlockNodeView(dom, nodeView, node, colorScheme, intl);
|
|
210
210
|
}
|
|
211
211
|
} else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
|
|
212
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
|
|
@@ -214,7 +214,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
|
|
|
214
214
|
} else {
|
|
215
215
|
var fallbackNode = fallbackSerialization();
|
|
216
216
|
if (fallbackNode) {
|
|
217
|
-
var _wrapper2 = createDeletedStyleWrapperWithoutOpacity(
|
|
217
|
+
var _wrapper2 = createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive);
|
|
218
218
|
_wrapper2.append(fallbackNode);
|
|
219
219
|
dom.append(_wrapper2);
|
|
220
220
|
}
|