@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.
Files changed (28) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/pm-plugins/calculateDiffDecorations.js +5 -2
  3. package/dist/cjs/pm-plugins/colorSchemes/standard.js +96 -0
  4. package/dist/cjs/pm-plugins/colorSchemes/traditional.js +76 -0
  5. package/dist/cjs/pm-plugins/decorations.js +62 -195
  6. package/dist/cjs/pm-plugins/main.js +9 -3
  7. package/dist/cjs/showDiffPlugin.js +2 -1
  8. package/dist/es2019/pm-plugins/calculateDiffDecorations.js +5 -2
  9. package/dist/es2019/pm-plugins/colorSchemes/standard.js +90 -0
  10. package/dist/es2019/pm-plugins/colorSchemes/traditional.js +70 -0
  11. package/dist/es2019/pm-plugins/decorations.js +57 -189
  12. package/dist/es2019/pm-plugins/main.js +6 -2
  13. package/dist/es2019/showDiffPlugin.js +3 -2
  14. package/dist/esm/pm-plugins/calculateDiffDecorations.js +5 -2
  15. package/dist/esm/pm-plugins/colorSchemes/standard.js +90 -0
  16. package/dist/esm/pm-plugins/colorSchemes/traditional.js +70 -0
  17. package/dist/esm/pm-plugins/decorations.js +56 -189
  18. package/dist/esm/pm-plugins/main.js +8 -2
  19. package/dist/esm/showDiffPlugin.js +3 -2
  20. package/dist/types/pm-plugins/colorSchemes/standard.d.ts +8 -0
  21. package/dist/types/pm-plugins/colorSchemes/traditional.d.ts +5 -0
  22. package/dist/types/pm-plugins/decorations.d.ts +1 -1
  23. package/dist/types/pm-plugins/main.d.ts +2 -0
  24. package/dist/types-ts4.5/pm-plugins/colorSchemes/standard.d.ts +8 -0
  25. package/dist/types-ts4.5/pm-plugins/colorSchemes/traditional.d.ts +5 -0
  26. package/dist/types-ts4.5/pm-plugins/decorations.d.ts +1 -1
  27. package/dist/types-ts4.5/pm-plugins/main.d.ts +2 -0
  28. 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
- var getEditorStyleNode = function getEditorStyleNode(nodeName, colourScheme) {
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
- return Decoration.node(change.from, change.to, {
204
- style: getEditorStyleNode(change.name, colourScheme),
205
- 'data-testid': 'show-diff-changed-decoration-node',
206
- class: getNodeClass(change.name)
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 = createWrapperWithStrikethrough();
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 = createWrapperWithStrikethrough();
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(targetNode);
201
+ var nodeView = serializer.tryCreateNodeView(node);
337
202
  if (nodeView) {
338
- if (targetNode.isInline) {
339
- var wrapper = createWrapperWithStrikethrough();
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, targetNode, colourScheme, intl);
209
+ handleBlockNodeView(dom, nodeView, node, colourScheme, intl);
345
210
  }
346
- } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(targetNode.type.name)) {
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.find();
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.find();
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 { createPlugin, showDiffPluginKey } from './pm-plugins/main';
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.2",
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.0.0",
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.0.0",
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.20.0",
43
+ "@atlaskit/editor-common": "^111.24.0",
44
44
  "react": "^18.2.0"
45
45
  },
46
46
  "techstack": {