@atlaskit/editor-plugin-show-diff 10.1.10 → 10.1.11

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.
@@ -16,12 +16,13 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
16
16
  import { areDocsEqualByBlockStructureAndText } from '../areDocsEqualByBlockStructureAndText';
17
17
  import { createDocMarginAnchorWidget } from '../decorations/createAnchorDecorationWidgets';
18
18
  import { createBlockChangedDecoration } from '../decorations/createBlockChangedDecoration';
19
+ import { createGranularBlockReferenceWidget } from '../decorations/createGranularBlockReferenceWidget';
19
20
  import { createInlineChangedDecoration } from '../decorations/createInlineChangedDecoration';
20
21
  import { createNodeChangedDecorationWidget } from '../decorations/createNodeChangedDecorationWidget';
21
22
  import { extractDiffDescriptors } from '../decorations/decorationKeys';
22
23
  import { getAttrChangeRanges, stepIsValidAttrChange } from '../decorations/utils/getAttrChangeRanges';
23
24
  import { getMarkChangeRanges } from '../decorations/utils/getMarkChangeRanges';
24
- import { diffBySteps } from './diffBySteps';
25
+ import { diffBySteps, getStepChanges } from './diffBySteps';
25
26
  import { groupChangesByBlock } from './groupChangesByBlock';
26
27
  import { optimizeChanges } from './optimizeChanges';
27
28
  import { simplifySteps } from './simplifySteps';
@@ -165,12 +166,16 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
165
166
  if (showIndicators && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
166
167
  decorations.push(createDocMarginAnchorWidget());
167
168
  }
168
- changes.forEach(function (change) {
169
+
170
+ // Our default operations are insertions, so it should match the opposite of isInverted.
171
+ var isInserted = !isInverted;
172
+ var createDecorationsForChange = function createDecorationsForChange(change, showGranularWithBlock) {
169
173
  var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
170
- // Our default operations are insertions, so it should match the opposite of isInverted.
171
- var isInserted = !isInverted;
172
174
  if (change.inserted.length > 0) {
173
- var shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isInverted && hideDeletedDiffs : false;
175
+ // shouldHideDeleted for block/node decorations: suppressed when isInverted + hideDeletedDiffs,
176
+ // or when showGranularWithBlock (block reference widget is shown instead).
177
+ // isInverted gates both — on an inverted diff the inserted side is visually the deleted side.
178
+ var shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.deleted.length > 0 : false;
174
179
  decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration(_objectSpread({
175
180
  change: change,
176
181
  doc: tr.doc,
@@ -195,7 +200,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
195
200
  }))));
196
201
  }
197
202
  if (change.deleted.length > 0) {
198
- var _shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && hideDeletedDiffs : false;
203
+ var _shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.inserted.length > 0 : false;
199
204
  if (!_shouldHideDeleted) {
200
205
  decorations.push.apply(decorations, _toConsumableArray(createNodeChangedDecorationWidget(_objectSpread(_objectSpread({
201
206
  change: change,
@@ -213,7 +218,89 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
213
218
  }))));
214
219
  }
215
220
  }
216
- });
221
+ };
222
+ if (diffType === 'step' && expValEquals('platform_editor_diff_granular_extended', 'isEnabled', true)) {
223
+ // Uses getStepChanges instead of getChanges so that we have per-step granularity metadata.
224
+ // Specifically, we need to know how many granular changes each step produced in order to
225
+ // apply the shouldHideDeleted suppression threshold (> 3 granular changes per step).
226
+ // getChanges returns a flat Change[] with no per-step grouping, making this count impossible
227
+ // to derive after the fact without re-introducing per-change metadata.
228
+ var stepChanges = getStepChanges(originalDoc, steps);
229
+ stepChanges.forEach(function (_ref4) {
230
+ var isGranular = _ref4.isGranular,
231
+ stepChangeList = _ref4.changes;
232
+ var granularCount = isGranular ? stepChangeList.length : 0;
233
+
234
+ // Calculate the average ratio of changed content on both A (original) and B (new)
235
+ // sides of the diff. If 30% or more of the block has changed on average, we show
236
+ // the block reference widget even if the granular change count is below the threshold.
237
+ // Block length is derived from the enclosing text block boundaries rather than the
238
+ // first/last change positions, so unchanged words at the start/end are accounted for.
239
+ var avgChangedRatio = 0;
240
+ if (isGranular && stepChangeList.length > 0) {
241
+ var first = stepChangeList[0];
242
+ var last = stepChangeList[stepChangeList.length - 1];
243
+ var resolvedA = originalDoc.resolve(first.fromA);
244
+ var resolvedB = tr.doc.resolve(first.fromB);
245
+ var blockStartA = first.fromA;
246
+ var blockEndA = last.toA;
247
+ var blockStartB = first.fromB;
248
+ var blockEndB = last.toB;
249
+ for (var depth = resolvedA.depth; depth >= 0; depth--) {
250
+ var node = resolvedA.node(depth);
251
+ if (node.isTextblock) {
252
+ blockStartA = resolvedA.start(depth);
253
+ blockEndA = blockStartA + node.nodeSize - 2; // exclude open/close tokens
254
+ break;
255
+ }
256
+ }
257
+ for (var _depth = resolvedB.depth; _depth >= 0; _depth--) {
258
+ var _node = resolvedB.node(_depth);
259
+ if (_node.isTextblock) {
260
+ blockStartB = resolvedB.start(_depth);
261
+ blockEndB = blockStartB + _node.nodeSize - 2; // exclude open/close tokens
262
+ break;
263
+ }
264
+ }
265
+ var blockLengthA = blockEndA - blockStartA;
266
+ var blockLengthB = blockEndB - blockStartB;
267
+ var totalChangedA = stepChangeList.reduce(function (sum, c) {
268
+ return sum + (c.toA - c.fromA);
269
+ }, 0);
270
+ var totalChangedB = stepChangeList.reduce(function (sum, c) {
271
+ return sum + (c.toB - c.fromB);
272
+ }, 0);
273
+ var ratioA = blockLengthA > 0 ? totalChangedA / blockLengthA : 0;
274
+ var ratioB = blockLengthB > 0 ? totalChangedB / blockLengthB : 0;
275
+ avgChangedRatio = (ratioA + ratioB) / 2;
276
+ }
277
+ var showGranularWithBlock = isGranular && granularCount !== 1 && (granularCount > 3 || avgChangedRatio >= 0.3);
278
+ stepChangeList.forEach(function (change) {
279
+ createDecorationsForChange(change, showGranularWithBlock);
280
+ });
281
+ if (showGranularWithBlock && stepChangeList.length > 0) {
282
+ var lastChange = stepChangeList[stepChangeList.length - 1];
283
+ var granularBlockDiffId = crypto.randomUUID();
284
+ var blockWidgets = createGranularBlockReferenceWidget({
285
+ change: lastChange,
286
+ originalDoc: originalDoc,
287
+ newDoc: tr.doc,
288
+ isInverted: isInverted,
289
+ nodeViewSerializer: nodeViewSerializer,
290
+ colorScheme: colorScheme,
291
+ intl: intl,
292
+ activeIndexPos: activeIndexPos,
293
+ diffId: granularBlockDiffId,
294
+ showIndicators: showIndicators
295
+ });
296
+ decorations.push.apply(decorations, _toConsumableArray(blockWidgets));
297
+ }
298
+ });
299
+ } else {
300
+ changes.forEach(function (change) {
301
+ createDecorationsForChange(change, /* showGranularWithBlock */false);
302
+ });
303
+ }
217
304
  getMarkChangeRanges(steps).forEach(function (change) {
218
305
  var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
219
306
  decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration({
@@ -253,34 +340,34 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
253
340
  };
254
341
  export var calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner,
255
342
  // Cache results unless relevant inputs change
256
- function (_ref4, _ref5) {
257
- var _ref9;
258
- var _ref6 = _slicedToArray(_ref4, 1),
259
- _ref6$ = _ref6[0],
260
- pluginState = _ref6$.pluginState,
261
- state = _ref6$.state,
262
- colorScheme = _ref6$.colorScheme,
263
- intl = _ref6$.intl,
264
- activeIndexPos = _ref6$.activeIndexPos,
265
- isInverted = _ref6$.isInverted,
266
- diffType = _ref6$.diffType,
267
- hideDeletedDiffs = _ref6$.hideDeletedDiffs,
268
- showIndicators = _ref6$.showIndicators;
343
+ function (_ref5, _ref6) {
344
+ var _ref0;
269
345
  var _ref7 = _slicedToArray(_ref5, 1),
270
346
  _ref7$ = _ref7[0],
271
- lastPluginState = _ref7$.pluginState,
272
- lastState = _ref7$.state,
273
- lastColorScheme = _ref7$.colorScheme,
274
- lastIntl = _ref7$.intl,
275
- lastActiveIndexPos = _ref7$.activeIndexPos,
276
- lastIsInverted = _ref7$.isInverted,
277
- lastDiffType = _ref7$.diffType,
278
- lastHideDeletedDiffs = _ref7$.hideDeletedDiffs,
279
- lastShowIndicators = _ref7$.showIndicators;
347
+ pluginState = _ref7$.pluginState,
348
+ state = _ref7$.state,
349
+ colorScheme = _ref7$.colorScheme,
350
+ intl = _ref7$.intl,
351
+ activeIndexPos = _ref7$.activeIndexPos,
352
+ isInverted = _ref7$.isInverted,
353
+ diffType = _ref7$.diffType,
354
+ hideDeletedDiffs = _ref7$.hideDeletedDiffs,
355
+ showIndicators = _ref7$.showIndicators;
356
+ var _ref8 = _slicedToArray(_ref6, 1),
357
+ _ref8$ = _ref8[0],
358
+ lastPluginState = _ref8$.pluginState,
359
+ lastState = _ref8$.state,
360
+ lastColorScheme = _ref8$.colorScheme,
361
+ lastIntl = _ref8$.intl,
362
+ lastActiveIndexPos = _ref8$.activeIndexPos,
363
+ lastIsInverted = _ref8$.isInverted,
364
+ lastDiffType = _ref8$.diffType,
365
+ lastHideDeletedDiffs = _ref8$.hideDeletedDiffs,
366
+ lastShowIndicators = _ref8$.showIndicators;
280
367
  var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
281
368
  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
282
- var _ref8;
283
- return (_ref8 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && showIndicators === lastShowIndicators) !== null && _ref8 !== void 0 ? _ref8 : false;
369
+ var _ref9;
370
+ return (_ref9 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && showIndicators === lastShowIndicators) !== null && _ref9 !== void 0 ? _ref9 : false;
284
371
  }
285
- return (_ref9 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref9 !== void 0 ? _ref9 : false;
372
+ return (_ref0 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref0 !== void 0 ? _ref0 : false;
286
373
  });
@@ -401,4 +401,127 @@ export var diffBySteps = function diffBySteps(originalDoc, steps) {
401
401
  });
402
402
  }
403
403
  return mergeOverlappingByNewDocRange(changes);
404
+ };
405
+
406
+ /**
407
+ * A fork of `diffBySteps` that returns changes grouped per step, rather than as a flat list.
408
+ *
409
+ * Why forked rather than refactoring `diffBySteps`:
410
+ * - `diffBySteps` returns a flat `Change[]` and is consumed by the existing decoration path.
411
+ * Changing its return shape would require threading per-step metadata through all callers,
412
+ * adding complexity to a stable code path.
413
+ * - The per-step grouping is only needed for the `platform_editor_diff_granular_extended` gate,
414
+ * where we need to know how many granular changes a single step produced in order to decide
415
+ * whether to suppress deleted decorations (threshold: > 3 granular changes per step).
416
+ * - Keeping the two functions separate means each has a clear, focused contract and neither
417
+ * accumulates the other's concerns. Shared logic (mapping helpers, `mergeOverlappingByNewDocRange`,
418
+ * `shouldCheckGranularDiff`, etc.) is already extracted and reused by both.
419
+ */
420
+ export var getStepChanges = function getStepChanges(originalDoc, steps) {
421
+ var result = [];
422
+ var currentDoc = originalDoc;
423
+ var successfulStepMaps = [];
424
+ var rangedSteps = [];
425
+ var _iterator4 = _createForOfIteratorHelper(steps),
426
+ _step4;
427
+ try {
428
+ for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
429
+ var step = _step4.value;
430
+ var before = currentDoc;
431
+ var stepResult = step.apply(currentDoc);
432
+ if (stepResult.failed !== null || !stepResult.doc) {
433
+ continue;
434
+ }
435
+ var stepMap = step.getMap();
436
+ var rangeStep = step;
437
+ if (typeof rangeStep.from === 'number' && typeof rangeStep.to === 'number') {
438
+ rangedSteps.push({
439
+ before: before,
440
+ doc: stepResult.doc,
441
+ from: rangeStep.from,
442
+ to: rangeStep.to,
443
+ mapIndex: successfulStepMaps.length,
444
+ step: step,
445
+ stepMap: stepMap
446
+ });
447
+ }
448
+ successfulStepMaps.push(stepMap);
449
+ currentDoc = stepResult.doc;
450
+ }
451
+ } catch (err) {
452
+ _iterator4.e(err);
453
+ } finally {
454
+ _iterator4.f();
455
+ }
456
+ for (var _i2 = 0, _rangedSteps2 = rangedSteps; _i2 < _rangedSteps2.length; _i2++) {
457
+ var rangedStep = _rangedSteps2[_i2];
458
+ var originalToBeforeStep = createMapping(successfulStepMaps.slice(0, rangedStep.mapIndex));
459
+ var beforeStepToOriginal = originalToBeforeStep.invert();
460
+ var fromA = mapPosition(beforeStepToOriginal, rangedStep.from);
461
+ var toA = mapPosition(beforeStepToOriginal, rangedStep.to);
462
+ var fromAfterStep = rangedStep.stepMap.map(rangedStep.from, -1);
463
+ var toAfterStep = rangedStep.stepMap.map(rangedStep.to, 1);
464
+ var afterStepToFinal = createMapping(successfulStepMaps.slice(rangedStep.mapIndex + 1));
465
+ var fromB = mapPosition(afterStepToFinal, fromAfterStep);
466
+ var toB = mapPosition(afterStepToFinal, toAfterStep);
467
+ if (shouldCheckGranularDiff(rangedStep.step, rangedStep.before, rangedStep.from, rangedStep.to)) {
468
+ var granularStepChanges = ChangeSet.create(rangedStep.before).addSteps(rangedStep.doc, [rangedStep.stepMap], null);
469
+ var optimizedGranularStepChanges = optimizeChanges(simplifyChanges(granularStepChanges.changes, rangedStep.doc));
470
+ var stepChanges = [];
471
+ var _iterator5 = _createForOfIteratorHelper(optimizedGranularStepChanges),
472
+ _step5;
473
+ try {
474
+ for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
475
+ var granularChange = _step5.value;
476
+ var expandedA = expandToWordBoundaries(rangedStep.before, granularChange.fromA, granularChange.toA);
477
+ var expandedB = expandToWordBoundaries(rangedStep.doc, granularChange.fromB, granularChange.toB);
478
+ var aLeftDelta = granularChange.fromA - expandedA.from;
479
+ var aRightDelta = expandedA.to - granularChange.toA;
480
+ var bLeftDelta = granularChange.fromB - expandedB.from;
481
+ var bRightDelta = expandedB.to - granularChange.toB;
482
+ var finalA = expandedA;
483
+ var finalB = expandedB;
484
+ if (aLeftDelta > bLeftDelta || aRightDelta > bRightDelta) {
485
+ var extraLeft = Math.max(0, aLeftDelta - bLeftDelta);
486
+ var extraRight = Math.max(0, aRightDelta - bRightDelta);
487
+ finalB = expandToWordBoundaries(rangedStep.doc, Math.max(expandedB.from - extraLeft, 0), expandedB.to + extraRight);
488
+ }
489
+ if (bLeftDelta > aLeftDelta || bRightDelta > aRightDelta) {
490
+ var _extraLeft2 = Math.max(0, bLeftDelta - aLeftDelta);
491
+ var _extraRight2 = Math.max(0, bRightDelta - aRightDelta);
492
+ finalA = expandToWordBoundaries(rangedStep.before, Math.max(expandedA.from - _extraLeft2, 0), expandedA.to + _extraRight2);
493
+ }
494
+ stepChanges.push({
495
+ fromA: mapPosition(beforeStepToOriginal, finalA.from),
496
+ toA: mapPosition(beforeStepToOriginal, finalA.to),
497
+ fromB: mapPosition(afterStepToFinal, finalB.from),
498
+ toB: mapPosition(afterStepToFinal, finalB.to),
499
+ deleted: createSpans(Math.max(0, finalA.to - finalA.from)),
500
+ inserted: createSpans(Math.max(0, finalB.to - finalB.from))
501
+ });
502
+ }
503
+ } catch (err) {
504
+ _iterator5.e(err);
505
+ } finally {
506
+ _iterator5.f();
507
+ }
508
+ result.push({
509
+ isGranular: true,
510
+ changes: mergeOverlappingByNewDocRange(stepChanges)
511
+ });
512
+ continue;
513
+ }
514
+ result.push({
515
+ isGranular: false,
516
+ changes: [{
517
+ fromA: fromA,
518
+ toA: toA,
519
+ fromB: fromB,
520
+ toB: toB,
521
+ deleted: createSpans(Math.max(0, toA - fromA)),
522
+ inserted: createSpans(Math.max(0, toB - fromB))
523
+ }]
524
+ });
525
+ }
526
+ return result;
404
527
  };
@@ -0,0 +1,120 @@
1
+ import { Decoration } from '@atlaskit/editor-prosemirror/view';
2
+ import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
3
+ import { buildDiffDecorationSpec, buildAnchorDecorationKey } from './decorationKeys';
4
+ import { wrapBlockNodeView, injectInnerWrapper } from './utils/wrapBlockNodeView';
5
+
6
+ /**
7
+ * Creates a single block widget that renders a reference text block content
8
+ * beneath a granular diff set, for reference when deleted content is hidden.
9
+ *
10
+ * Since granular diffing only applies to singular isTextBlock=true nodes, this
11
+ * widget always renders exactly one block node and does not need the slice/fragment
12
+ * complexity of createNodeChangedDecorationWidget.
13
+ *
14
+ * Resolves which doc and positions to render based on isInverted:
15
+ * - !isInverted: renders originalDoc at A-side positions (what was there before)
16
+ * - isInverted: renders newDoc at B-side positions (the current/new content)
17
+ *
18
+ * The widget is always inserted at the B-side block boundary in newDoc since
19
+ * ProseMirror decorations are always anchored against the live (new) document.
20
+ */
21
+ export var createGranularBlockReferenceWidget = function createGranularBlockReferenceWidget(_ref) {
22
+ var change = _ref.change,
23
+ originalDoc = _ref.originalDoc,
24
+ newDoc = _ref.newDoc,
25
+ isInverted = _ref.isInverted,
26
+ nodeViewSerializer = _ref.nodeViewSerializer,
27
+ colorScheme = _ref.colorScheme,
28
+ intl = _ref.intl,
29
+ activeIndexPos = _ref.activeIndexPos,
30
+ diffId = _ref.diffId,
31
+ _ref$showIndicators = _ref.showIndicators,
32
+ showIndicators = _ref$showIndicators === void 0 ? false : _ref$showIndicators;
33
+ // Determine which doc and positions to use for rendering the reference block.
34
+ var renderDoc = isInverted ? newDoc : originalDoc;
35
+ var renderTo = isInverted ? change.toB : change.toA;
36
+
37
+ // The insertion point is always in newDoc — ProseMirror decorates against the live document.
38
+ // Walk up from toB to find the enclosing text block boundary for widget placement.
39
+ var insertResolvedPos = newDoc.resolve(change.toB);
40
+ var blockEnd = change.toB;
41
+ for (var depth = insertResolvedPos.depth; depth >= 0; depth--) {
42
+ var node = insertResolvedPos.node(depth);
43
+ if (node.isTextblock) {
44
+ blockEnd = insertResolvedPos.start(depth) + node.nodeSize - 1;
45
+ break;
46
+ }
47
+ }
48
+
49
+ // Find the block node to render from the render doc at the render positions.
50
+ var renderResolvedPos = renderDoc.resolve(renderTo);
51
+ var renderBlockNode = null;
52
+ for (var _depth = renderResolvedPos.depth; _depth >= 0; _depth--) {
53
+ var _node = renderResolvedPos.node(_depth);
54
+ if (_node.isTextblock) {
55
+ renderBlockNode = _node;
56
+ break;
57
+ }
58
+ }
59
+ if (!renderBlockNode) {
60
+ return [];
61
+ }
62
+ var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
63
+
64
+ /**
65
+ * This will always be a block node as it's a textBlock-like node.
66
+ * We use div instead of span so we can add margins.
67
+ */
68
+ var dom = document.createElement('div');
69
+ dom.setAttribute('data-testid', 'show-diff-granular-block-reference');
70
+ dom.style.setProperty('margin-top', "var(--ds-space-200, 16px)");
71
+ var nodeView = nodeViewSerializer.tryCreateNodeView(renderBlockNode);
72
+ if (nodeView) {
73
+ wrapBlockNodeView({
74
+ dom: dom,
75
+ nodeView: nodeView,
76
+ targetNode: renderBlockNode,
77
+ colorScheme: colorScheme,
78
+ intl: intl,
79
+ isActive: !!isActive,
80
+ isInserted: false
81
+ });
82
+ } else {
83
+ var serialized = nodeViewSerializer.serializeNode(renderBlockNode);
84
+ if (serialized && serialized instanceof HTMLElement) {
85
+ injectInnerWrapper({
86
+ node: serialized,
87
+ colorScheme: colorScheme,
88
+ isActive: !!isActive,
89
+ isInserted: false
90
+ });
91
+ dom.append(serialized);
92
+ } else if (serialized) {
93
+ dom.append(serialized);
94
+ }
95
+ }
96
+ if (dom.childNodes.length === 0) {
97
+ return [];
98
+ }
99
+ var decorations = [];
100
+ if (showIndicators) {
101
+ var leftAnchor = createLeftAnchorWidget({
102
+ doc: newDoc,
103
+ from: blockEnd,
104
+ diffId: diffId
105
+ });
106
+ dom.style.setProperty('anchor-name', "--".concat(buildAnchorDecorationKey({
107
+ diffId: diffId
108
+ })));
109
+ if (leftAnchor) {
110
+ decorations.push(leftAnchor);
111
+ }
112
+ }
113
+ decorations.push(Decoration.widget(blockEnd, dom, buildDiffDecorationSpec({
114
+ decorationType: 'widget',
115
+ diffId: diffId,
116
+ // We want it to be as close to the granular diff as possible
117
+ side: -999
118
+ })));
119
+ return decorations;
120
+ };
@@ -1,116 +1,31 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
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; }
4
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; }
5
- import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
6
4
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
7
5
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
8
- import { editingStyle, editingStyleExtended, editingStyleActive, editingStyleActiveExtended, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended } from './colorSchemes/standard';
9
- import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
10
6
  import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
11
7
  import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
12
8
  import { buildDiffDecorationSpec, buildAnchorDecorationKey } from './decorationKeys';
13
9
  import { findSafeInsertPos } from './utils/findSafeInsertPos';
14
- import { wrapBlockNodeView } from './utils/wrapBlockNodeView';
15
- var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
16
- var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
17
- if (colorScheme === 'traditional' && isActive) {
18
- return deletedTraditionalContentStyleUnboundedActive;
19
- }
20
- return colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
21
- };
22
- var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
23
- var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
24
- if (colorScheme === 'traditional') {
25
- if (isActive) {
26
- return traditionalInsertStyleActive;
27
- }
28
- return traditionalInsertStyle;
29
- }
30
- if (isActive) {
31
- return expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? editingStyleActiveExtended : editingStyleActive;
32
- }
33
- return expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? editingStyleExtended : editingStyle;
34
- };
35
- var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
36
- var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
37
- if (colorScheme === 'traditional') {
38
- return getDeletedTraditionalInlineStyle(isActive);
39
- }
40
- // Merge into existing styles when cleaning up
41
- if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
42
- if (isActive) {
43
- return deletedContentStyleActive + deletedInlineContentStyleExtended;
44
- }
45
- return deletedContentStyleNew + deletedInlineContentStyleExtended;
46
- }
47
- if (isActive) {
48
- return deletedContentStyleActive;
49
- }
50
- return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
51
- };
52
-
53
- /**
54
- * CSS backgrounds don't work when applied to a wrapper around a paragraph, so
55
- * the wrapper needs to be injected inside the node around the child content
56
- */
57
- var injectInnerWrapper = function injectInnerWrapper(_ref) {
58
- var node = _ref.node,
59
- colorScheme = _ref.colorScheme,
60
- isActive = _ref.isActive,
61
- isInserted = _ref.isInserted;
62
- var wrapper = document.createElement('span');
63
- wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive));
64
- _toConsumableArray(node.childNodes).forEach(function (child) {
65
- var removedChild = node.removeChild(child);
66
- wrapper.append(removedChild);
67
- });
68
- node.appendChild(wrapper);
69
- return node;
70
- };
71
- var createContentWrapper = function createContentWrapper(colorScheme) {
72
- var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
73
- var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
74
- var wrapper = document.createElement('span');
75
- var baseStyle = convertToInlineCss({
76
- position: 'relative',
77
- width: 'fit-content'
78
- });
79
- if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
80
- if (isInserted) {
81
- wrapper.setAttribute('style', "".concat(baseStyle).concat(getInsertedContentStyle(colorScheme, isActive)));
82
- } else {
83
- wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
84
- var strikethrough = document.createElement('span');
85
- strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
86
- wrapper.append(strikethrough);
87
- }
88
- } else {
89
- wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
90
- var _strikethrough = document.createElement('span');
91
- _strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
92
- wrapper.append(_strikethrough);
93
- }
94
- return wrapper;
95
- };
10
+ import { wrapBlockNodeView, injectInnerWrapper, createContentWrapper } from './utils/wrapBlockNodeView';
96
11
 
97
12
  /**
98
13
  * This function is used to create a decoration widget to show content
99
14
  * that is not in the current document.
100
15
  */
101
- export var createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref2) {
16
+ export var createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref) {
102
17
  var _slice$content, _slice$content2, _slice$content3, _slice$content$firstC;
103
- var change = _ref2.change,
104
- doc = _ref2.doc,
105
- nodeViewSerializer = _ref2.nodeViewSerializer,
106
- colorScheme = _ref2.colorScheme,
107
- newDoc = _ref2.newDoc,
108
- intl = _ref2.intl,
109
- activeIndexPos = _ref2.activeIndexPos,
110
- _ref2$isInserted = _ref2.isInserted,
111
- isInserted = _ref2$isInserted === void 0 ? false : _ref2$isInserted,
112
- _ref2$showIndicators = _ref2.showIndicators,
113
- showIndicators = _ref2$showIndicators === void 0 ? false : _ref2$showIndicators;
18
+ var change = _ref.change,
19
+ doc = _ref.doc,
20
+ nodeViewSerializer = _ref.nodeViewSerializer,
21
+ colorScheme = _ref.colorScheme,
22
+ newDoc = _ref.newDoc,
23
+ intl = _ref.intl,
24
+ activeIndexPos = _ref.activeIndexPos,
25
+ _ref$isInserted = _ref.isInserted,
26
+ isInserted = _ref$isInserted === void 0 ? false : _ref$isInserted,
27
+ _ref$showIndicators = _ref.showIndicators,
28
+ showIndicators = _ref$showIndicators === void 0 ? false : _ref$showIndicators;
114
29
  var slice = doc.slice(change.fromA, change.toA);
115
30
  var shouldSkipDeletedEmptyParagraphDecoration = !isInserted && (slice === null || slice === void 0 || (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.childCount) === 1 && (slice === null || slice === void 0 || (_slice$content2 = slice.content) === null || _slice$content2 === void 0 || (_slice$content2 = _slice$content2.firstChild) === null || _slice$content2 === void 0 ? void 0 : _slice$content2.type.name) === 'paragraph' && (slice === null || slice === void 0 || (_slice$content3 = slice.content) === null || _slice$content3 === void 0 || (_slice$content3 = _slice$content3.firstChild) === null || _slice$content3 === void 0 ? void 0 : _slice$content3.content.size) === 0;
116
31
  // Widget decoration used for deletions as the content is not in the document