@atlaskit/editor-plugin-show-diff 29.0.1 → 30.0.0
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 +25 -0
- package/dist/cjs/pm-plugins/calculateDiff/calculateDiffDecorations.js +7 -30
- package/dist/cjs/pm-plugins/decorations/colorSchemes/factory.js +0 -39
- package/dist/cjs/pm-plugins/decorations/createInlineChangedDecoration.js +3 -16
- package/dist/cjs/pm-plugins/decorations/createNodeChangedDecorationWidget.js +3 -6
- package/dist/cjs/pm-plugins/decorations/createReplacedCellDecorations.js +0 -2
- package/dist/cjs/pm-plugins/decorations/utils/createDeletedLineBreakWidget.js +4 -7
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeView.js +5 -24
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +2 -4
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.js +1 -5
- package/dist/cjs/pm-plugins/main.js +7 -26
- package/dist/cjs/showDiffPlugin.js +0 -43
- package/dist/cjs/showDiffPluginType.js +0 -12
- package/dist/es2019/pm-plugins/calculateDiff/calculateDiffDecorations.js +7 -30
- package/dist/es2019/pm-plugins/decorations/colorSchemes/factory.js +0 -37
- package/dist/es2019/pm-plugins/decorations/createInlineChangedDecoration.js +1 -17
- package/dist/es2019/pm-plugins/decorations/createNodeChangedDecorationWidget.js +3 -6
- package/dist/es2019/pm-plugins/decorations/createReplacedCellDecorations.js +0 -2
- package/dist/es2019/pm-plugins/decorations/utils/createDeletedLineBreakWidget.js +4 -7
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeView.js +6 -24
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +3 -6
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.js +2 -8
- package/dist/es2019/pm-plugins/main.js +7 -27
- package/dist/es2019/showDiffPlugin.js +0 -38
- package/dist/es2019/showDiffPluginType.js +0 -12
- package/dist/esm/pm-plugins/calculateDiff/calculateDiffDecorations.js +7 -30
- package/dist/esm/pm-plugins/decorations/colorSchemes/factory.js +0 -37
- package/dist/esm/pm-plugins/decorations/createInlineChangedDecoration.js +3 -16
- package/dist/esm/pm-plugins/decorations/createNodeChangedDecorationWidget.js +3 -6
- package/dist/esm/pm-plugins/decorations/createReplacedCellDecorations.js +0 -2
- package/dist/esm/pm-plugins/decorations/utils/createDeletedLineBreakWidget.js +4 -7
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeView.js +5 -24
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +2 -4
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.js +1 -5
- package/dist/esm/pm-plugins/main.js +7 -26
- package/dist/esm/showDiffPlugin.js +0 -43
- package/dist/esm/showDiffPluginType.js +0 -12
- package/dist/types/entry-points/show-diff-plugin-type.d.ts +1 -1
- package/dist/types/pm-plugins/calculateDiff/calculateDiffDecorations.d.ts +1 -2
- package/dist/types/pm-plugins/decorations/colorSchemes/factory.d.ts +0 -24
- package/dist/types/pm-plugins/decorations/createInlineChangedDecoration.d.ts +1 -3
- package/dist/types/pm-plugins/decorations/createNodeChangedDecorationWidget.d.ts +1 -3
- package/dist/types/pm-plugins/decorations/createReplacedCellDecorations.d.ts +1 -3
- package/dist/types/pm-plugins/decorations/utils/createDeletedLineBreakWidget.d.ts +3 -6
- package/dist/types/pm-plugins/decorations/utils/wrapBlockNodeView.d.ts +2 -4
- package/dist/types/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.d.ts +1 -1
- package/dist/types/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.d.ts +1 -1
- package/dist/types/pm-plugins/main.d.ts +1 -6
- package/dist/types/showDiffPluginType.d.ts +0 -27
- package/package.json +7 -13
- package/dist/cjs/pm-plugins/decorations/revealStyles.js +0 -160
- package/dist/cjs/pm-plugins/revealAnimation.js +0 -524
- package/dist/es2019/pm-plugins/decorations/revealStyles.js +0 -143
- package/dist/es2019/pm-plugins/revealAnimation.js +0 -495
- package/dist/esm/pm-plugins/decorations/revealStyles.js +0 -153
- package/dist/esm/pm-plugins/revealAnimation.js +0 -518
- package/dist/types/pm-plugins/decorations/revealStyles.d.ts +0 -49
- package/dist/types/pm-plugins/revealAnimation.d.ts +0 -33
|
@@ -311,26 +311,15 @@ export const isDeletedContentPlacedBelow = ({
|
|
|
311
311
|
};
|
|
312
312
|
|
|
313
313
|
/**
|
|
314
|
-
*
|
|
315
|
-
*
|
|
316
|
-
*
|
|
317
|
-
* The clean view ("new state") historically only suppressed a deleted side when the same change
|
|
318
|
-
* also carried an insertion. A PURE deletion — text removed with nothing put in its place — fell
|
|
319
|
-
* through and leaked struck-through text into a view that is supposed to show none. `smart` never
|
|
320
|
-
* showed this because it pairs a rewrite into a single change that always carries an insertion;
|
|
321
|
-
* `inline` emits delete-only changes, so it did.
|
|
322
|
-
*
|
|
323
|
-
* With the gate off this returns exactly what both callers computed before it existed.
|
|
324
|
-
*
|
|
325
|
-
* Umbrella experiment: within the AI streaming UX M1 population this behaviour is only enabled
|
|
326
|
-
* for the treatment cohort. Non-AI callers (track-changes, etc.) are not enrolled and default
|
|
327
|
-
* to `true`, preserving the pre-umbrella baseline.
|
|
314
|
+
* Shared by the widget-anchor calculation and the decoration push below so the two cannot drift.
|
|
315
|
+
* The clean view ("new state") only suppresses a deleted side when the same change also carries
|
|
316
|
+
* an insertion.
|
|
328
317
|
*/
|
|
329
318
|
const shouldHideDeletedSide = ({
|
|
330
319
|
change,
|
|
331
320
|
hideDeletedDiffs,
|
|
332
321
|
isInverted
|
|
333
|
-
}) => !isInverted && !!hideDeletedDiffs &&
|
|
322
|
+
}) => !isInverted && !!hideDeletedDiffs && change.inserted.length > 0;
|
|
334
323
|
const calculateDiffDecorationsInner = ({
|
|
335
324
|
state,
|
|
336
325
|
pluginState,
|
|
@@ -347,7 +336,6 @@ const calculateDiffDecorationsInner = ({
|
|
|
347
336
|
smartThresholds,
|
|
348
337
|
deletedDiffPlacement = 'top',
|
|
349
338
|
inlineDeletedDiffPlacement = 'before',
|
|
350
|
-
reveal,
|
|
351
339
|
tagMountContext
|
|
352
340
|
}) => {
|
|
353
341
|
const {
|
|
@@ -608,7 +596,6 @@ const calculateDiffDecorationsInner = ({
|
|
|
608
596
|
diffId: showContributorTags ? `blank-line-${pos}` : undefined,
|
|
609
597
|
isActive,
|
|
610
598
|
pos,
|
|
611
|
-
reveal,
|
|
612
599
|
side: -1,
|
|
613
600
|
tagMountContext
|
|
614
601
|
}));
|
|
@@ -661,7 +648,6 @@ const calculateDiffDecorationsInner = ({
|
|
|
661
648
|
isDeletedWidgetBelow,
|
|
662
649
|
isInserted,
|
|
663
650
|
leftAnchorId,
|
|
664
|
-
reveal,
|
|
665
651
|
shouldHideDeleted,
|
|
666
652
|
showContributorTags,
|
|
667
653
|
showIndicators,
|
|
@@ -693,7 +679,6 @@ const calculateDiffDecorationsInner = ({
|
|
|
693
679
|
hideAddedDiffsUnderline,
|
|
694
680
|
hasDeletedWidget: willRenderDeletedWidget,
|
|
695
681
|
isDeletedWidgetBelow,
|
|
696
|
-
reveal,
|
|
697
682
|
tagMountContext
|
|
698
683
|
}));
|
|
699
684
|
}
|
|
@@ -712,7 +697,6 @@ const calculateDiffDecorationsInner = ({
|
|
|
712
697
|
hideAddedDiffsUnderline,
|
|
713
698
|
hasDeletedWidget: willRenderDeletedWidget,
|
|
714
699
|
isDeletedWidgetBelow,
|
|
715
|
-
reveal,
|
|
716
700
|
tagMountContext
|
|
717
701
|
}));
|
|
718
702
|
}
|
|
@@ -749,7 +733,6 @@ const calculateDiffDecorationsInner = ({
|
|
|
749
733
|
deletedColumns,
|
|
750
734
|
// The deleted side has no inline decoration, so the widget carries the actor.
|
|
751
735
|
attributionKey,
|
|
752
|
-
reveal,
|
|
753
736
|
change,
|
|
754
737
|
doc: originalDoc,
|
|
755
738
|
nodeViewSerializer,
|
|
@@ -814,7 +797,6 @@ const calculateDiffDecorationsInner = ({
|
|
|
814
797
|
doc: tr.doc,
|
|
815
798
|
isActive,
|
|
816
799
|
isInserted: true,
|
|
817
|
-
reveal,
|
|
818
800
|
showContributorTags,
|
|
819
801
|
tagMountContext
|
|
820
802
|
}));
|
|
@@ -941,8 +923,7 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
|
|
|
941
923
|
showIndicators,
|
|
942
924
|
smartThresholds,
|
|
943
925
|
deletedDiffPlacement,
|
|
944
|
-
inlineDeletedDiffPlacement
|
|
945
|
-
reveal
|
|
926
|
+
inlineDeletedDiffPlacement
|
|
946
927
|
}], [{
|
|
947
928
|
pluginState: lastPluginState,
|
|
948
929
|
state: lastState,
|
|
@@ -956,15 +937,11 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
|
|
|
956
937
|
showIndicators: lastShowIndicators,
|
|
957
938
|
smartThresholds: lastSmartThresholds,
|
|
958
939
|
deletedDiffPlacement: lastDeletedDiffPlacement,
|
|
959
|
-
inlineDeletedDiffPlacement: lastInlineDeletedDiffPlacement
|
|
960
|
-
reveal: lastReveal
|
|
940
|
+
inlineDeletedDiffPlacement: lastInlineDeletedDiffPlacement
|
|
961
941
|
}]) => {
|
|
962
942
|
var _ref;
|
|
963
943
|
const originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
|
|
964
944
|
return (_ref = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && isEqual(pluginState.stepAttributions, lastPluginState.stepAttributions) &&
|
|
965
945
|
// Contributors can arrive after the first calculation; without this, tags never appear.
|
|
966
|
-
isEqual(pluginState.contributors, lastPluginState.contributors) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && isEqual(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement && inlineDeletedDiffPlacement === lastInlineDeletedDiffPlacement &&
|
|
967
|
-
// Turning the reveal on or off changes the emitted styles, so a cached result from the
|
|
968
|
-
// other setting would leave the diff painted in the wrong resting state.
|
|
969
|
-
isEqual(reveal, lastReveal)) !== null && _ref !== void 0 ? _ref : false;
|
|
946
|
+
isEqual(pluginState.contributors, lastPluginState.contributors) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && isEqual(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement && inlineDeletedDiffPlacement === lastInlineDeletedDiffPlacement) !== null && _ref !== void 0 ? _ref : false;
|
|
970
947
|
});
|
|
@@ -850,43 +850,6 @@ export function buildInsertedInlineStyle(colors, isActive, hideAddedDiffsUnderli
|
|
|
850
850
|
return hideAddedDiffsUnderline ? buildInsertStyleExtendedNoUnderline(colors) : buildInsertStyleExtended(colors);
|
|
851
851
|
}
|
|
852
852
|
|
|
853
|
-
/**
|
|
854
|
-
* The colours `buildInsertedInlineStyle()` above would paint, for the reveal to animate towards.
|
|
855
|
-
*
|
|
856
|
-
* MUST mirror that function: the reveal replaces the flat highlight with a sized gradient, so a
|
|
857
|
-
* divergence here means the animation settles on a different colour than a static render produces.
|
|
858
|
-
* `revealStyles.ts` in the test package asserts the two agree across the isActive /
|
|
859
|
-
* hideAddedDiffsUnderline matrix.
|
|
860
|
-
*
|
|
861
|
-
* A transparent border is how "no underline" is expressed: the box still reserves the 2px so the
|
|
862
|
-
* text does not shift when the underline arrives.
|
|
863
|
-
*/
|
|
864
|
-
export function getInsertedInlineRevealColors(colors, isActive, hideAddedDiffsUnderline) {
|
|
865
|
-
return {
|
|
866
|
-
background: isActive ? bgSubtlerPressed(colors.insertActiveColor) : bgSubtlest(colors.insertColor),
|
|
867
|
-
border: hideAddedDiffsUnderline ? 'transparent' : borderAccent(colors.insertColor)
|
|
868
|
-
};
|
|
869
|
-
}
|
|
870
|
-
|
|
871
|
-
/**
|
|
872
|
-
* The colours `buildDeletedInlineContentStyleExtended()` paints, for the reveal to animate towards.
|
|
873
|
-
* Deleted content's highlight does not vary with the active state — only its text does, which the
|
|
874
|
-
* reveal keeps as-is.
|
|
875
|
-
*/
|
|
876
|
-
export function getDeletedInlineRevealColors(colors) {
|
|
877
|
-
// Nothing to wipe in where the resting state paints no highlight.
|
|
878
|
-
if (colors.deletedInlineHighlight === 'onEmphasis') {
|
|
879
|
-
return {
|
|
880
|
-
background: 'transparent',
|
|
881
|
-
border: 'transparent'
|
|
882
|
-
};
|
|
883
|
-
}
|
|
884
|
-
return {
|
|
885
|
-
background: bgSubtlest(colors.deleteColor),
|
|
886
|
-
border: borderAccent(colors.deleteColor)
|
|
887
|
-
};
|
|
888
|
-
}
|
|
889
|
-
|
|
890
853
|
/**
|
|
891
854
|
* Value for `DELETED_HIGHLIGHT_BG_VAR` while a change is hovered — the same tint an 'always' scheme
|
|
892
855
|
* paints at rest, so hovering restores the appearance rather than introducing a third one.
|
|
@@ -10,7 +10,6 @@ import { createInlineIndicatorAnchorWidgets } from './createAnchorDecorationWidg
|
|
|
10
10
|
import { createContributorTagWidget, isContributorTagWidgetEnabled } from './createContributorTagWidget';
|
|
11
11
|
import { getAtomicInlineNodeClassNameLegacy, resolveInlineChangedStyleLegacy } from './createInlineChangedDecoration.styles.legacy';
|
|
12
12
|
import { buildDiffDecorationSpec, scrollMarginTopStyle } from './decorationKeys';
|
|
13
|
-
import { REVEAL_ATTR, resolveRevealStyle } from './revealStyles';
|
|
14
13
|
const displayNoneStyle = convertToInlineCss({
|
|
15
14
|
display: 'none'
|
|
16
15
|
});
|
|
@@ -129,10 +128,8 @@ export const createInlineChangedDecoration = ({
|
|
|
129
128
|
inlineNodeName,
|
|
130
129
|
hasDeletedWidget = false,
|
|
131
130
|
isDeletedWidgetBelow = false,
|
|
132
|
-
reveal,
|
|
133
131
|
tagMountContext
|
|
134
132
|
}) => {
|
|
135
|
-
var _revealed$style;
|
|
136
133
|
// Derived from the range so it survives a recalculation: stepping to the next/previous change
|
|
137
134
|
// rebuilds decorations without touching the doc, and a fresh id would change the React key and the
|
|
138
135
|
// tag host's key, remounting every tag mid-step. Random ids are kept when tags are off.
|
|
@@ -156,17 +153,7 @@ export const createInlineChangedDecoration = ({
|
|
|
156
153
|
}))];
|
|
157
154
|
}
|
|
158
155
|
const colors = getColorScheme(colorScheme);
|
|
159
|
-
|
|
160
|
-
// The reveal withholds the static highlight so the wipe has something to reveal, so it supplies
|
|
161
|
-
// the whole style rather than adding to the usual one.
|
|
162
|
-
const revealed = resolveRevealStyle({
|
|
163
|
-
colorScheme,
|
|
164
|
-
hideAddedDiffsUnderline,
|
|
165
|
-
isActive,
|
|
166
|
-
isInserted,
|
|
167
|
-
reveal
|
|
168
|
-
});
|
|
169
|
-
const style = (_revealed$style = revealed === null || revealed === void 0 ? void 0 : revealed.style) !== null && _revealed$style !== void 0 ? _revealed$style : resolveInlineChangedStyle({
|
|
156
|
+
const style = resolveInlineChangedStyle({
|
|
170
157
|
colors,
|
|
171
158
|
colorScheme,
|
|
172
159
|
hideAddedDiffsUnderline,
|
|
@@ -206,9 +193,6 @@ export const createInlineChangedDecoration = ({
|
|
|
206
193
|
...(deletedInlineNodeAttrs && {
|
|
207
194
|
class: deletedInlineNodeAttrs.className
|
|
208
195
|
}),
|
|
209
|
-
...(revealed && {
|
|
210
|
-
[REVEAL_ATTR]: revealed.role
|
|
211
|
-
}),
|
|
212
196
|
'data-testid': 'show-diff-changed-decoration',
|
|
213
197
|
// Lets navigation select this exact diff, and contributor tags find it on hover.
|
|
214
198
|
...((showContributorTags || fg('platform_editor_ai_show_diff_patch_2')) && {
|
|
@@ -167,7 +167,6 @@ export const createNodeChangedDecorationWidget = ({
|
|
|
167
167
|
// its replacement (gray + strikethrough).
|
|
168
168
|
placeBelow = false,
|
|
169
169
|
hideAddedDiffsUnderline = false,
|
|
170
|
-
reveal,
|
|
171
170
|
tagMountContext,
|
|
172
171
|
deletedColumns
|
|
173
172
|
}) => {
|
|
@@ -200,7 +199,6 @@ export const createNodeChangedDecorationWidget = ({
|
|
|
200
199
|
diffId: showContributorTags ? `widget-${change.fromA}-${change.toA}` : undefined,
|
|
201
200
|
isActive,
|
|
202
201
|
pos: safeInsertPos,
|
|
203
|
-
reveal,
|
|
204
202
|
side: placeBelow ? 1 : -1,
|
|
205
203
|
tagMountContext
|
|
206
204
|
})];
|
|
@@ -431,7 +429,7 @@ export const createNodeChangedDecorationWidget = ({
|
|
|
431
429
|
// view's styles.
|
|
432
430
|
dom.append(createAtomicInlineOutline(attrOnlyNodeName, nodeView, colorScheme));
|
|
433
431
|
} else {
|
|
434
|
-
const wrapper = createContentWrapper(colorScheme, isActive, isInserted
|
|
432
|
+
const wrapper = createContentWrapper(colorScheme, isActive, isInserted);
|
|
435
433
|
wrapper.append(nodeView);
|
|
436
434
|
dom.append(wrapper);
|
|
437
435
|
}
|
|
@@ -460,12 +458,11 @@ export const createNodeChangedDecorationWidget = ({
|
|
|
460
458
|
node: fallbackNode,
|
|
461
459
|
colorScheme,
|
|
462
460
|
isActive,
|
|
463
|
-
isInserted
|
|
464
|
-
reveal
|
|
461
|
+
isInserted
|
|
465
462
|
});
|
|
466
463
|
dom.append(injectedNode);
|
|
467
464
|
} else {
|
|
468
|
-
const wrapper = createContentWrapper(colorScheme, isActive, isInserted
|
|
465
|
+
const wrapper = createContentWrapper(colorScheme, isActive, isInserted);
|
|
469
466
|
wrapper.append(fallbackNode);
|
|
470
467
|
dom.append(wrapper);
|
|
471
468
|
}
|
|
@@ -313,7 +313,6 @@ export const createReplacedCellDecorations = ({
|
|
|
313
313
|
isDeletedWidgetBelow,
|
|
314
314
|
isInserted,
|
|
315
315
|
leftAnchorId,
|
|
316
|
-
reveal,
|
|
317
316
|
shouldHideDeleted,
|
|
318
317
|
showContributorTags,
|
|
319
318
|
showIndicators,
|
|
@@ -363,7 +362,6 @@ export const createReplacedCellDecorations = ({
|
|
|
363
362
|
isDeletedWidgetBelow,
|
|
364
363
|
isInserted,
|
|
365
364
|
leftAnchorId,
|
|
366
|
-
reveal,
|
|
367
365
|
shouldHideDeleted: hidesLiveCell,
|
|
368
366
|
showContributorTags,
|
|
369
367
|
showIndicators,
|
|
@@ -19,7 +19,7 @@ export const RETURN_GLYPH = '⤶';
|
|
|
19
19
|
* in for the absent content keeps the deletion visible without inventing content that was not there.
|
|
20
20
|
*
|
|
21
21
|
* `createContentWrapper` supplies the highlight and the strikethrough line, so the glyph is styled
|
|
22
|
-
* exactly like any other run of deleted inline content, including the active
|
|
22
|
+
* exactly like any other run of deleted inline content, including the active state.
|
|
23
23
|
*
|
|
24
24
|
* Hidden from assistive technology: the glyph is a picture of a key, and read out it is announced as
|
|
25
25
|
* its Unicode name rather than as a removed line.
|
|
@@ -27,8 +27,7 @@ export const RETURN_GLYPH = '⤶';
|
|
|
27
27
|
export const createDeletedLineBreakWidget = ({
|
|
28
28
|
colorScheme,
|
|
29
29
|
count = 1,
|
|
30
|
-
isActive = false
|
|
31
|
-
reveal
|
|
30
|
+
isActive = false
|
|
32
31
|
}) => {
|
|
33
32
|
const dom = document.createElement('span');
|
|
34
33
|
// The testid deleted content is matched by, so the glyph is found wherever deleted content is.
|
|
@@ -44,7 +43,7 @@ export const createDeletedLineBreakWidget = ({
|
|
|
44
43
|
// deleted-content wrapper is styled as an inline run.
|
|
45
44
|
dom.append(dom.ownerDocument.createElement('br'));
|
|
46
45
|
}
|
|
47
|
-
const wrapper = createContentWrapper(colorScheme, isActive, false
|
|
46
|
+
const wrapper = createContentWrapper(colorScheme, isActive, false);
|
|
48
47
|
wrapper.append(dom.ownerDocument.createTextNode(RETURN_GLYPH));
|
|
49
48
|
dom.append(wrapper);
|
|
50
49
|
}
|
|
@@ -67,15 +66,13 @@ export const createDeletedLineBreakDecoration = ({
|
|
|
67
66
|
diffId = crypto.randomUUID(),
|
|
68
67
|
isActive = false,
|
|
69
68
|
pos,
|
|
70
|
-
reveal,
|
|
71
69
|
side,
|
|
72
70
|
tagMountContext
|
|
73
71
|
}) => {
|
|
74
72
|
const dom = createDeletedLineBreakWidget({
|
|
75
73
|
colorScheme,
|
|
76
74
|
count,
|
|
77
|
-
isActive
|
|
78
|
-
reveal
|
|
75
|
+
isActive
|
|
79
76
|
});
|
|
80
77
|
const tagHost = attributionKey ? createContributorTagHost({
|
|
81
78
|
diffId,
|
|
@@ -6,7 +6,6 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
|
6
6
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
7
|
import { resolveBaseNodeName } from '../../utils/baseNodeName';
|
|
8
8
|
import { getAtomicInlineChangedAttrs } from '../createInlineChangedDecoration';
|
|
9
|
-
import { applyRevealToElement } from '../revealStyles';
|
|
10
9
|
import { isInlineAttrChangeNodeName } from './getAttrChangeRanges';
|
|
11
10
|
import { applyTableCellEdgeAttrs } from './tableCellEdgeAttrs';
|
|
12
11
|
import { getChangedContentStyle, getChangedNodeStyle, getDeletedContentStyle, getDeletedContentStyleUnbounded, getInsertedContentStyle, hasRestingDeletedRing, isMultiContainerBlockNode, isTextLikeBlockNode, resolveCellOverlayStyle, resolveDeletedNodeCSSVariables, resolveNestedInsertedNodeStyle, resolveRemovedLozengeStyle } from './wrapBlockNodeViewStyles';
|
|
@@ -625,18 +624,10 @@ export const injectInnerWrapper = ({
|
|
|
625
624
|
node,
|
|
626
625
|
colorScheme,
|
|
627
626
|
isActive,
|
|
628
|
-
isInserted
|
|
629
|
-
reveal
|
|
627
|
+
isInserted
|
|
630
628
|
}) => {
|
|
631
629
|
const wrapper = document.createElement('span');
|
|
632
|
-
|
|
633
|
-
colorScheme,
|
|
634
|
-
element: wrapper,
|
|
635
|
-
isActive: isActive !== null && isActive !== void 0 ? isActive : false,
|
|
636
|
-
isInserted: isInserted !== null && isInserted !== void 0 ? isInserted : false,
|
|
637
|
-
reveal
|
|
638
|
-
});
|
|
639
|
-
wrapper.setAttribute('style', (isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive, Boolean(revealStyle))) + revealStyle);
|
|
630
|
+
wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive));
|
|
640
631
|
[...node.childNodes].forEach(child => {
|
|
641
632
|
const removedChild = node.removeChild(child);
|
|
642
633
|
wrapper.append(removedChild);
|
|
@@ -648,26 +639,17 @@ export const injectInnerWrapper = ({
|
|
|
648
639
|
/**
|
|
649
640
|
* Creates a styled span wrapper for inline content within a change decoration.
|
|
650
641
|
*/
|
|
651
|
-
export const createContentWrapper = (colorScheme, isActive = false, isInserted = false
|
|
642
|
+
export const createContentWrapper = (colorScheme, isActive = false, isInserted = false) => {
|
|
652
643
|
const wrapper = document.createElement('span');
|
|
653
644
|
const baseStyle = convertToInlineCss({
|
|
654
645
|
position: 'relative',
|
|
655
646
|
width: 'fit-content'
|
|
656
647
|
});
|
|
657
|
-
|
|
658
|
-
// the animation can wipe it in instead.
|
|
659
|
-
const revealStyle = applyRevealToElement({
|
|
660
|
-
colorScheme,
|
|
661
|
-
element: wrapper,
|
|
662
|
-
isActive,
|
|
663
|
-
isInserted,
|
|
664
|
-
reveal
|
|
665
|
-
});
|
|
666
|
-
const deletedStyle = getDeletedContentStyle(colorScheme, isActive, Boolean(revealStyle));
|
|
648
|
+
const deletedStyle = getDeletedContentStyle(colorScheme, isActive);
|
|
667
649
|
if (isInserted) {
|
|
668
|
-
wrapper.setAttribute('style', `${baseStyle}${getInsertedContentStyle(colorScheme, isActive)}
|
|
650
|
+
wrapper.setAttribute('style', `${baseStyle}${getInsertedContentStyle(colorScheme, isActive)}`);
|
|
669
651
|
} else {
|
|
670
|
-
wrapper.setAttribute('style', `${baseStyle}${deletedStyle}
|
|
652
|
+
wrapper.setAttribute('style', `${baseStyle}${deletedStyle}`);
|
|
671
653
|
const strikethrough = document.createElement('span');
|
|
672
654
|
strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
|
|
673
655
|
wrapper.append(strikethrough);
|
|
@@ -83,12 +83,12 @@ const getChangedNodeStyleNext = (nodeName, colorScheme, isInserted = false, isAc
|
|
|
83
83
|
};
|
|
84
84
|
const getDeletedContentStyleUnboundedNext = (colorScheme, isActive = false) => buildDeletedStrikethroughLine(getColorScheme(colorScheme), isActive);
|
|
85
85
|
const getInsertedContentStyleNext = (colorScheme, isActive = false, hideAddedDiffsUnderline = false) => buildInsertedInlineStyle(getColorScheme(colorScheme), isActive, hideAddedDiffsUnderline);
|
|
86
|
-
const getDeletedContentStyleNext = (colorScheme, isActive = false
|
|
86
|
+
const getDeletedContentStyleNext = (colorScheme, isActive = false) => {
|
|
87
87
|
const colors = getColorScheme(colorScheme);
|
|
88
88
|
const base = buildDeletedInlineContentStyle(colors, isActive ? 'active' : 'new');
|
|
89
89
|
|
|
90
90
|
// glyphTint adds a background highlight and border-bottom over the tint; strikethrough does not.
|
|
91
|
-
const needsExtendedHighlight = colors.deletedInlineTreatment === 'glyphTint'
|
|
91
|
+
const needsExtendedHighlight = colors.deletedInlineTreatment === 'glyphTint';
|
|
92
92
|
return needsExtendedHighlight ? base + buildDeletedInlineContentStyleExtended(colors, isActive) : base;
|
|
93
93
|
};
|
|
94
94
|
const resolveCellOverlayStyleNext = ({
|
|
@@ -125,10 +125,7 @@ export const getDeletedContentStyleUnbounded = (colorScheme, isActive = false) =
|
|
|
125
125
|
export const getInsertedContentStyle = (colorScheme, isActive = false, hideAddedDiffsUnderline = false) => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? getInsertedContentStyleNext(colorScheme, isActive, hideAddedDiffsUnderline) : getInsertedContentStyleLegacy(getLegacyColorScheme(colorScheme), isActive, hideAddedDiffsUnderline);
|
|
126
126
|
|
|
127
127
|
/** Inline style for deleted content. */
|
|
128
|
-
export const getDeletedContentStyle = (colorScheme, isActive = false,
|
|
129
|
-
// Set while the reveal animation is running: it paints the highlight itself so it can wipe it in
|
|
130
|
-
// left-to-right, and a static background here would leave nothing to reveal.
|
|
131
|
-
omitHighlight = false) => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? getDeletedContentStyleNext(colorScheme, isActive, omitHighlight) : getDeletedContentStyleLegacy(getLegacyColorScheme(colorScheme), isActive, omitHighlight);
|
|
128
|
+
export const getDeletedContentStyle = (colorScheme, isActive = false) => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? getDeletedContentStyleNext(colorScheme, isActive) : getDeletedContentStyleLegacy(getLegacyColorScheme(colorScheme), isActive);
|
|
132
129
|
|
|
133
130
|
/**
|
|
134
131
|
* Overlay style for one added or deleted table cell. Invariant across the cells of a table, so the
|
|
@@ -155,17 +155,11 @@ export const getInsertedContentStyleLegacy = (colorScheme, isActive = false, hid
|
|
|
155
155
|
};
|
|
156
156
|
|
|
157
157
|
/** Pre-refactor inline style for deleted content. */
|
|
158
|
-
export const getDeletedContentStyleLegacy = (colorScheme, isActive = false
|
|
159
|
-
// The reveal animation paints the highlight itself so it can wipe it in; a static one here would
|
|
160
|
-
// cover the whole span and leave nothing to reveal. Mirrors the same option on the Next variant.
|
|
161
|
-
omitHighlight = false) => {
|
|
158
|
+
export const getDeletedContentStyleLegacy = (colorScheme, isActive = false) => {
|
|
162
159
|
if (colorScheme === 'traditional') {
|
|
163
160
|
return getDeletedTraditionalInlineStyle(isActive);
|
|
164
161
|
}
|
|
165
|
-
|
|
166
|
-
return (isActive ? getStandardDeletedContentStyleActive() : getStandardDeletedContentStyleNew()) + deletedInlineContentStyleExtended;
|
|
167
|
-
}
|
|
168
|
-
return isActive ? getStandardDeletedContentStyleActive() : getStandardDeletedContentStyleNew();
|
|
162
|
+
return (isActive ? getStandardDeletedContentStyleActive() : getStandardDeletedContentStyleNew()) + deletedInlineContentStyleExtended;
|
|
169
163
|
};
|
|
170
164
|
|
|
171
165
|
/**
|
|
@@ -13,7 +13,6 @@ import { enforceCustomStepRegisters } from './enforceCustomStepRegisters';
|
|
|
13
13
|
import { getDefaultDiffType } from './getDefaultDiffType';
|
|
14
14
|
import { getScrollableDecorations } from './getScrollableDecorations';
|
|
15
15
|
import { NodeViewSerializer } from './NodeViewSerializer';
|
|
16
|
-
import { rebindReveal } from './revealAnimation';
|
|
17
16
|
import { scrollToDecoration } from './scrollToDiff';
|
|
18
17
|
export const showDiffPluginKey = new PluginKey('showDiffPlugin');
|
|
19
18
|
/**
|
|
@@ -81,24 +80,13 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
|
|
|
81
80
|
const meta = tr.getMeta(showDiffPluginKey);
|
|
82
81
|
let newPluginState = currentPluginState;
|
|
83
82
|
if (meta) {
|
|
84
|
-
if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF'
|
|
85
|
-
var _newPluginState$color, _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9
|
|
86
|
-
|
|
87
|
-
// ordinary resting style. Without it the reveal stays in state indefinitely and the
|
|
88
|
-
// next unrelated repaint re-emits the hidden, zero-width highlight with no animation
|
|
89
|
-
// left to bring it in — the highlight simply vanishes.
|
|
90
|
-
newPluginState = meta.action === 'REVEAL_COMPLETE' ? {
|
|
91
|
-
...currentPluginState,
|
|
92
|
-
reveal: undefined
|
|
93
|
-
} : {
|
|
83
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
|
|
84
|
+
var _newPluginState$color, _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9;
|
|
85
|
+
newPluginState = {
|
|
94
86
|
...currentPluginState,
|
|
95
87
|
...meta,
|
|
96
88
|
isDisplayingChanges: true,
|
|
97
|
-
activeIndex: undefined
|
|
98
|
-
// Explicit rather than left to the spread: an absent key in `meta` would let
|
|
99
|
-
// the previous paint's choreography leak into this one, so closing the diff
|
|
100
|
-
// would animate too.
|
|
101
|
-
reveal: meta.reveal
|
|
89
|
+
activeIndex: undefined
|
|
102
90
|
};
|
|
103
91
|
// Calculate and store decorations in state
|
|
104
92
|
const {
|
|
@@ -121,10 +109,7 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
|
|
|
121
109
|
showIndicators: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.showIndicators,
|
|
122
110
|
smartThresholds: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.smartThresholds,
|
|
123
111
|
deletedDiffPlacement: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.deletedDiffPlacement,
|
|
124
|
-
inlineDeletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.inlineDeletedDiffPlacement
|
|
125
|
-
// SHOW_DIFF only. The scroll-to-next recalculation further down deliberately
|
|
126
|
-
// omits this so stepping through changes cannot replay the choreography.
|
|
127
|
-
reveal: (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.reveal
|
|
112
|
+
inlineDeletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.inlineDeletedDiffPlacement
|
|
128
113
|
});
|
|
129
114
|
// Update the decorations and their ids
|
|
130
115
|
newPluginState.decorations = decorations;
|
|
@@ -138,7 +123,6 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
|
|
|
138
123
|
isDisplayingChanges: false,
|
|
139
124
|
activeIndex: undefined,
|
|
140
125
|
contributorTags: [],
|
|
141
|
-
reveal: undefined,
|
|
142
126
|
// Per-call override — do not let it leak into the next, unrelated `showDiff` call.
|
|
143
127
|
colorScheme: undefined,
|
|
144
128
|
/**
|
|
@@ -155,7 +139,7 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
|
|
|
155
139
|
// Update the active index in plugin state and recalculate decorations
|
|
156
140
|
const decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc);
|
|
157
141
|
if (decorations.length > 0) {
|
|
158
|
-
var _currentPluginState$a, _newPluginState$color2,
|
|
142
|
+
var _currentPluginState$a, _newPluginState$color2, _newPluginState0;
|
|
159
143
|
// Initialize to -1 if undefined so that the first "next" scroll takes us to index 0 (first change).
|
|
160
144
|
// This allows the UI to start with no selection and only highlight on first user interaction.
|
|
161
145
|
let nextIndex = (_currentPluginState$a = currentPluginState.activeIndex) !== null && _currentPluginState$a !== void 0 ? _currentPluginState$a : -1;
|
|
@@ -191,7 +175,7 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
|
|
|
191
175
|
state: newState,
|
|
192
176
|
pluginState: newPluginState,
|
|
193
177
|
nodeViewSerializer,
|
|
194
|
-
colorScheme: (_newPluginState$color2 = (
|
|
178
|
+
colorScheme: (_newPluginState$color2 = (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.colorScheme) !== null && _newPluginState$color2 !== void 0 ? _newPluginState$color2 : config === null || config === void 0 ? void 0 : config.colorScheme,
|
|
195
179
|
intl: getIntl(),
|
|
196
180
|
activeIndexPos: newPluginState.activeIndexPos,
|
|
197
181
|
api,
|
|
@@ -247,10 +231,6 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
|
|
|
247
231
|
}
|
|
248
232
|
const pluginState = showDiffPluginKey.getState(view.state);
|
|
249
233
|
|
|
250
|
-
// A repaint rebuilds inline decorations, destroying any animation bound to them, so
|
|
251
|
-
// an in-flight reveal has to be re-attached to the new nodes. No-op when idle.
|
|
252
|
-
rebindReveal(view, view.dom);
|
|
253
|
-
|
|
254
234
|
// Scroll to the first decoration when scrollIntoView was requested.
|
|
255
235
|
// Use the same filtered/position-sorted list as the active-index path
|
|
256
236
|
// so "first" reliably means the topmost scrollable diff in the document.
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
|
|
3
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
4
2
|
import { areAttributionColorGatesEnabled, resolveContributors } from './pm-plugins/decorations/colorSchemes/attributions';
|
|
5
3
|
import { getDeletedWidgets } from './pm-plugins/getDeletedWidgets';
|
|
6
4
|
import { getScrollableDecorations } from './pm-plugins/getScrollableDecorations';
|
|
7
5
|
import { createPlugin, showDiffPluginKey } from './pm-plugins/main';
|
|
8
6
|
import { resolveDiffContributors } from './pm-plugins/resolveDiffContributors';
|
|
9
|
-
import { beginReveal, cancelReveal } from './pm-plugins/revealAnimation';
|
|
10
7
|
import { IndicatorBarContentComponent } from './ui/IndicatorBar/IndicatorBarContentComponent';
|
|
11
8
|
const normalizeShowDiffParams = params => {
|
|
12
9
|
if (!params || !('stepsWithAttribution' in params)) {
|
|
@@ -36,20 +33,6 @@ const normalizeShowDiffParams = params => {
|
|
|
36
33
|
}) => stepAttribution)
|
|
37
34
|
};
|
|
38
35
|
};
|
|
39
|
-
const prefersReducedMotion = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* Resolve reveal preconditions once here so decorations and animation share one answer. If
|
|
43
|
-
* decorations think a reveal is happening but animation doesn't, highlight paints hidden forever.
|
|
44
|
-
* All preconditions resolved here (not just gate) ensures "unable to animate" means "do not reveal".
|
|
45
|
-
*
|
|
46
|
-
* Umbrella experiment: within the AI streaming UX M1 population this behaviour is only enabled
|
|
47
|
-
* for the treatment cohort. Non-AI callers (track-changes, etc.) are not enrolled and default
|
|
48
|
-
* to `true`, preserving the pre-umbrella baseline.
|
|
49
|
-
*/
|
|
50
|
-
const resolveReveal = (reveal, editorView) =>
|
|
51
|
-
// Gate first, so it is the primary switch and is always observable once a reveal is requested.
|
|
52
|
-
reveal && fg('platform_editor_diff_reveal_animation') && UNSAFE_expValNoExposure('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true && editorView && typeof window !== 'undefined' && !prefersReducedMotion() ? reveal : undefined;
|
|
53
36
|
export const showDiffPlugin = ({
|
|
54
37
|
api,
|
|
55
38
|
config
|
|
@@ -72,26 +55,8 @@ export const showDiffPlugin = ({
|
|
|
72
55
|
api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('viewingDiff')({
|
|
73
56
|
tr
|
|
74
57
|
});
|
|
75
|
-
const reveal = resolveReveal(params === null || params === void 0 ? void 0 : params.reveal, editorView);
|
|
76
|
-
|
|
77
|
-
// Capture snapshot BEFORE transaction dispatch (last moment outgoing DOM exists).
|
|
78
|
-
if (reveal && editorView) {
|
|
79
|
-
const view = editorView;
|
|
80
|
-
beginReveal({
|
|
81
|
-
editorView: view,
|
|
82
|
-
reveal,
|
|
83
|
-
onComplete: () => {
|
|
84
|
-
// Repaint without the reveal so the decorations settle into their resting
|
|
85
|
-
// style. Kept out of history: this is presentation, not an edit.
|
|
86
|
-
view.dispatch(view.state.tr.setMeta(showDiffPluginKey, {
|
|
87
|
-
action: 'REVEAL_COMPLETE'
|
|
88
|
-
}).setMeta('addToHistory', false));
|
|
89
|
-
}
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
58
|
return tr.setMeta(showDiffPluginKey, {
|
|
93
59
|
...normalizeShowDiffParams(params),
|
|
94
|
-
reveal,
|
|
95
60
|
action: 'SHOW_DIFF'
|
|
96
61
|
});
|
|
97
62
|
},
|
|
@@ -99,9 +64,6 @@ export const showDiffPlugin = ({
|
|
|
99
64
|
tr
|
|
100
65
|
}) => {
|
|
101
66
|
var _api$userIntent2;
|
|
102
|
-
if (editorView) {
|
|
103
|
-
cancelReveal(editorView);
|
|
104
|
-
}
|
|
105
67
|
api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default')({
|
|
106
68
|
tr
|
|
107
69
|
});
|
|
@@ -77,18 +77,6 @@ export const ASSERT_DIFF_AGENT_BRANDS_ARE_REGISTERED = true;
|
|
|
77
77
|
// Re-export the canonical `SmartDiffThresholds` declaration (single source of truth) so the
|
|
78
78
|
// public plugin types stay in sync with the smart-diff implementation.
|
|
79
79
|
|
|
80
|
-
/**
|
|
81
|
-
* How the diff is revealed when it is painted.
|
|
82
|
-
*
|
|
83
|
-
* - `phased` — the two-phase choreography used when opening the diff from a clean "new state":
|
|
84
|
-
* the outgoing state cross-fades to the incoming one while the agent highlight wipes out to the
|
|
85
|
-
* right, then every highlight wipes back in from the left.
|
|
86
|
-
*
|
|
87
|
-
* Deliberately separate from {@link DiffType}: that describes how changes are computed and grouped,
|
|
88
|
-
* this describes how the result is presented over time. Folding one into the other would make every
|
|
89
|
-
* `DiffType` consumer — version history, track-changes, publish diff — care about presentation.
|
|
90
|
-
*/
|
|
91
|
-
|
|
92
80
|
/**
|
|
93
81
|
* Attributed alternative to `PMDiffParams`. When agent colouring is enabled, changes are grouped
|
|
94
82
|
* by `userId`, with `agentId` used as a tie-breaker.
|