@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.
- package/CHANGELOG.md +9 -0
- package/dist/cjs/pm-plugins/calculateDiff/calculateDiffDecorations.js +118 -31
- package/dist/cjs/pm-plugins/calculateDiff/diffBySteps.js +124 -1
- package/dist/cjs/pm-plugins/decorations/createGranularBlockReferenceWidget.js +125 -0
- package/dist/cjs/pm-plugins/decorations/createNodeChangedDecorationWidget.js +17 -103
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeView.js +79 -1
- package/dist/es2019/pm-plugins/calculateDiff/calculateDiffDecorations.js +91 -7
- package/dist/es2019/pm-plugins/calculateDiff/diffBySteps.js +104 -0
- package/dist/es2019/pm-plugins/decorations/createGranularBlockReferenceWidget.js +120 -0
- package/dist/es2019/pm-plugins/decorations/createNodeChangedDecorationWidget.js +1 -81
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeView.js +74 -2
- package/dist/esm/pm-plugins/calculateDiff/calculateDiffDecorations.js +119 -32
- package/dist/esm/pm-plugins/calculateDiff/diffBySteps.js +123 -0
- package/dist/esm/pm-plugins/decorations/createGranularBlockReferenceWidget.js +120 -0
- package/dist/esm/pm-plugins/decorations/createNodeChangedDecorationWidget.js +13 -98
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeView.js +79 -2
- package/dist/types/pm-plugins/calculateDiff/diffBySteps.d.ts +20 -0
- package/dist/types/pm-plugins/decorations/createGranularBlockReferenceWidget.d.ts +36 -0
- package/dist/types/pm-plugins/decorations/utils/wrapBlockNodeView.d.ts +15 -0
- package/package.json +2 -2
|
@@ -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
|
-
|
|
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
|
-
|
|
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 (
|
|
257
|
-
var
|
|
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
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
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
|
|
283
|
-
return (
|
|
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 (
|
|
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(
|
|
16
|
+
export var createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref) {
|
|
102
17
|
var _slice$content, _slice$content2, _slice$content3, _slice$content$firstC;
|
|
103
|
-
var change =
|
|
104
|
-
doc =
|
|
105
|
-
nodeViewSerializer =
|
|
106
|
-
colorScheme =
|
|
107
|
-
newDoc =
|
|
108
|
-
intl =
|
|
109
|
-
activeIndexPos =
|
|
110
|
-
|
|
111
|
-
isInserted =
|
|
112
|
-
|
|
113
|
-
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
|