@atlaskit/editor-plugin-show-diff 15.1.2 → 15.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +30 -0
- package/dist/cjs/pm-plugins/calculateDiff/calculateDiffDecorations.js +6 -1
- package/dist/cjs/pm-plugins/decorations/colorSchemes/factory.js +36 -13
- package/dist/cjs/pm-plugins/decorations/colorSchemes/schemes.js +3 -0
- package/dist/cjs/pm-plugins/decorations/createInlineChangedDecoration.js +1 -1
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +1 -1
- package/dist/cjs/showDiffPlugin.js +6 -1
- package/dist/es2019/pm-plugins/calculateDiff/calculateDiffDecorations.js +6 -1
- package/dist/es2019/pm-plugins/decorations/colorSchemes/factory.js +36 -14
- package/dist/es2019/pm-plugins/decorations/colorSchemes/schemes.js +3 -0
- package/dist/es2019/pm-plugins/decorations/createInlineChangedDecoration.js +1 -1
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +1 -1
- package/dist/es2019/showDiffPlugin.js +6 -1
- package/dist/esm/pm-plugins/calculateDiff/calculateDiffDecorations.js +6 -1
- package/dist/esm/pm-plugins/decorations/colorSchemes/factory.js +36 -13
- package/dist/esm/pm-plugins/decorations/colorSchemes/schemes.js +3 -0
- package/dist/esm/pm-plugins/decorations/createInlineChangedDecoration.js +1 -1
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +1 -1
- package/dist/esm/showDiffPlugin.js +6 -1
- package/dist/types/pm-plugins/decorations/colorSchemes/factory.d.ts +2 -2
- package/dist/types/pm-plugins/decorations/colorSchemes/types.d.ts +6 -0
- package/package.json +5 -5
- package/afm-cc/tsconfig.json +0 -63
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,35 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-show-diff
|
|
2
2
|
|
|
3
|
+
## 15.1.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`1cd03bc12ef72`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1cd03bc12ef72) -
|
|
8
|
+
Gate the Milestone 1 streaming UX controls behind the
|
|
9
|
+
`platform_editor_ai_streaming_ux_experience_m1` master experiment. The New AIFC editor experience,
|
|
10
|
+
quick actions block streaming, streaming grey-out suppression, Review moment auto-open, diff-based
|
|
11
|
+
segmenting, quick actions agent attribution, the reveal animation and hide-pure-deletions in the
|
|
12
|
+
diff viewer now each require both the master experiment and their existing individual gate, so no
|
|
13
|
+
M1 slice can ship outside the M1 cohort while each slice stays independently reversible. Non-AI
|
|
14
|
+
callers of the diff viewer are not enrolled in the experiment and default to their existing
|
|
15
|
+
behaviour.
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
18
|
+
## 15.1.3
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- [`98eda5f058f8e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98eda5f058f8e) -
|
|
23
|
+
Use gray text and strikethrough for attributed deletions with attribution-coloured backgrounds and
|
|
24
|
+
a background-matched bottom border to preserve highlight height, behind
|
|
25
|
+
confluence_ncs_step_diffing_version_history and platform_editor_show_diff_color_scheme_refactor.
|
|
26
|
+
|
|
27
|
+
Use the accent subtlest hovered token for resting attributed insertion underlines, with stronger
|
|
28
|
+
active insertion underlines and deletion backgrounds. Keep attributed deletion opacity at 0.83 in
|
|
29
|
+
both active and non-active states.
|
|
30
|
+
|
|
31
|
+
- Updated dependencies
|
|
32
|
+
|
|
3
33
|
## 15.1.2
|
|
4
34
|
|
|
5
35
|
### Patch Changes
|
|
@@ -14,6 +14,7 @@ var _prosemirrorChangeset = require("prosemirror-changeset");
|
|
|
14
14
|
var _document = require("@atlaskit/editor-common/utils/document");
|
|
15
15
|
var _transform = require("@atlaskit/editor-prosemirror/transform");
|
|
16
16
|
var _view = require("@atlaskit/editor-prosemirror/view");
|
|
17
|
+
var _unsafeExpValNoExposure = require("@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure");
|
|
17
18
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
18
19
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
19
20
|
var _areDocsEqualByBlockStructureAndText = require("../areDocsEqualByBlockStructureAndText");
|
|
@@ -267,13 +268,17 @@ var isDeletedContentPlacedBelow = exports.isDeletedContentPlacedBelow = function
|
|
|
267
268
|
* `inline` emits delete-only changes, so it did.
|
|
268
269
|
*
|
|
269
270
|
* With the gate off this returns exactly what both callers computed before it existed.
|
|
271
|
+
*
|
|
272
|
+
* Umbrella experiment: within the AI streaming UX M1 population this behaviour is only enabled
|
|
273
|
+
* for the treatment cohort. Non-AI callers (track-changes, etc.) are not enrolled and default
|
|
274
|
+
* to `true`, preserving the pre-umbrella baseline.
|
|
270
275
|
*/
|
|
271
276
|
var shouldHideDeletedSide = function shouldHideDeletedSide(_ref7) {
|
|
272
277
|
var change = _ref7.change,
|
|
273
278
|
diffType = _ref7.diffType,
|
|
274
279
|
hideDeletedDiffs = _ref7.hideDeletedDiffs,
|
|
275
280
|
isInverted = _ref7.isInverted;
|
|
276
|
-
return (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && !isInverted && !!hideDeletedDiffs && (change.inserted.length > 0 || (0, _fg.fg)('platform_editor_diff_hide_pure_deletions'));
|
|
281
|
+
return (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && !isInverted && !!hideDeletedDiffs && (change.inserted.length > 0 || (0, _fg.fg)('platform_editor_diff_hide_pure_deletions') && (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true);
|
|
277
282
|
};
|
|
278
283
|
var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8) {
|
|
279
284
|
var state = _ref8.state,
|
|
@@ -87,6 +87,18 @@ var bgSubtlestMap = {
|
|
|
87
87
|
gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
|
|
88
88
|
lime: "var(--ds-background-accent-lime-subtlest, #EFFFD6)"
|
|
89
89
|
};
|
|
90
|
+
var bgSubtlestHoveredMap = {
|
|
91
|
+
green: "var(--ds-background-accent-green-subtlest-hovered, #BAF3DB)",
|
|
92
|
+
teal: "var(--ds-background-accent-teal-subtlest-hovered, #C6EDFB)",
|
|
93
|
+
blue: "var(--ds-background-accent-blue-subtlest-hovered, #CFE1FD)",
|
|
94
|
+
purple: "var(--ds-background-accent-purple-subtlest-hovered, #EED7FC)",
|
|
95
|
+
red: "var(--ds-background-accent-red-subtlest-hovered, #FFD5D2)",
|
|
96
|
+
orange: "var(--ds-background-accent-orange-subtlest-hovered, #FCE4A6)",
|
|
97
|
+
yellow: "var(--ds-background-accent-yellow-subtlest-hovered, #F5E989)",
|
|
98
|
+
magenta: "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)",
|
|
99
|
+
gray: "var(--ds-background-accent-gray-subtlest-hovered, #DDDEE1)",
|
|
100
|
+
lime: "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)"
|
|
101
|
+
};
|
|
90
102
|
var bgSubtlestPressedMap = {
|
|
91
103
|
green: "var(--ds-background-accent-green-subtlest-pressed, #97EDC9)",
|
|
92
104
|
teal: "var(--ds-background-accent-teal-subtlest-pressed, #B1E4F7)",
|
|
@@ -187,6 +199,10 @@ function deletedCellOutline(colors) {
|
|
|
187
199
|
|
|
188
200
|
// --- Inserted content styles ---
|
|
189
201
|
|
|
202
|
+
function insertedInlineBorderColor(colors) {
|
|
203
|
+
return colors.insertedInlineBorderTone === 'backgroundHovered' ? bgSubtlestHoveredMap[colors.insertColor] : borderAccent(colors.insertColor);
|
|
204
|
+
}
|
|
205
|
+
|
|
190
206
|
/** Inline inserted content — default state. */
|
|
191
207
|
function buildInsertStyle(colors) {
|
|
192
208
|
return (0, _lazyNodeView.convertToInlineCss)({
|
|
@@ -212,7 +228,7 @@ function buildInsertStyleInBlock(colors) {
|
|
|
212
228
|
function buildInsertStyleExtended(colors) {
|
|
213
229
|
return (0, _lazyNodeView.convertToInlineCss)({
|
|
214
230
|
background: bgSubtlest(colors.insertColor),
|
|
215
|
-
borderBottom: "2px solid ".concat(
|
|
231
|
+
borderBottom: "2px solid ".concat(insertedInlineBorderColor(colors)),
|
|
216
232
|
padding: "1px 0 2px"
|
|
217
233
|
});
|
|
218
234
|
}
|
|
@@ -220,7 +236,7 @@ function buildInsertStyleExtended(colors) {
|
|
|
220
236
|
/** Extended insert style for content within a block node (border-bottom only, no background). */
|
|
221
237
|
function buildInsertStyleInBlockExtended(colors) {
|
|
222
238
|
return (0, _lazyNodeView.convertToInlineCss)({
|
|
223
|
-
borderBottom: "2px solid ".concat(
|
|
239
|
+
borderBottom: "2px solid ".concat(insertedInlineBorderColor(colors)),
|
|
224
240
|
padding: "1px 0 2px"
|
|
225
241
|
});
|
|
226
242
|
}
|
|
@@ -272,8 +288,9 @@ function buildInsertStyleActive(colors) {
|
|
|
272
288
|
|
|
273
289
|
/** Base deleted-inline-style object, shared by several exports. */
|
|
274
290
|
function deletedInlineStyleBase(colors) {
|
|
291
|
+
var _colors$deleteTextCol;
|
|
275
292
|
return {
|
|
276
|
-
textDecorationColor: borderAccent(colors.deleteColor),
|
|
293
|
+
textDecorationColor: borderAccent((_colors$deleteTextCol = colors.deleteTextColor) !== null && _colors$deleteTextCol !== void 0 ? _colors$deleteTextCol : colors.deleteColor),
|
|
277
294
|
textDecoration: 'line-through',
|
|
278
295
|
position: 'relative',
|
|
279
296
|
opacity: 1
|
|
@@ -323,12 +340,13 @@ function buildDeletedContentStyleUnboundedActive(colors) {
|
|
|
323
340
|
|
|
324
341
|
/** Unbounded strikethrough overlay for deleted inline content (absolute positioned line). */
|
|
325
342
|
function buildDeletedInlineStyleUnbounded(colors) {
|
|
343
|
+
var _colors$deleteTextCol2;
|
|
326
344
|
return (0, _lazyNodeView.convertToInlineCss)({
|
|
327
345
|
position: 'absolute',
|
|
328
346
|
top: '50%',
|
|
329
347
|
width: '100%',
|
|
330
348
|
display: 'inline-block',
|
|
331
|
-
borderTop: "1px solid ".concat(textAccent(colors.deleteColor)),
|
|
349
|
+
borderTop: "1px solid ".concat(textAccent((_colors$deleteTextCol2 = colors.deleteTextColor) !== null && _colors$deleteTextCol2 !== void 0 ? _colors$deleteTextCol2 : colors.deleteColor)),
|
|
332
350
|
pointerEvents: 'none',
|
|
333
351
|
zIndex: 1
|
|
334
352
|
});
|
|
@@ -439,9 +457,10 @@ function buildDeletedBlockOutlineRoundedNew(colors) {
|
|
|
439
457
|
|
|
440
458
|
/** Table row style for deleted rows. */
|
|
441
459
|
function buildDeletedRowStyle(colors) {
|
|
460
|
+
var _colors$deleteTextCol3;
|
|
442
461
|
// Each branch emits exactly the CSS the pre-factory shim did for its scheme.
|
|
443
462
|
return colors.deletedRowTreatment === 'textTint' ? (0, _lazyNodeView.convertToInlineCss)({
|
|
444
|
-
color: textAccent(colors.deleteColor),
|
|
463
|
+
color: textAccent((_colors$deleteTextCol3 = colors.deleteTextColor) !== null && _colors$deleteTextCol3 !== void 0 ? _colors$deleteTextCol3 : colors.deleteColor),
|
|
445
464
|
textDecoration: 'line-through',
|
|
446
465
|
opacity: 0.6,
|
|
447
466
|
display: 'table-row'
|
|
@@ -602,29 +621,33 @@ function buildDeletedDecorationMarkerVariableSimple(colors) {
|
|
|
602
621
|
* 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
|
|
603
622
|
* default, 0.83 "new", 1 active.
|
|
604
623
|
*/
|
|
605
|
-
/** Extended deleted inline style — background highlight
|
|
624
|
+
/** Extended deleted inline style — background highlight with an accent or background-matched bottom border. */
|
|
606
625
|
function buildDeletedInlineContentStyleExtended(colors) {
|
|
626
|
+
var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
627
|
+
var backgroundColor = isActive && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : bgSubtlest(colors.deleteColor);
|
|
607
628
|
return (0, _lazyNodeView.convertToInlineCss)({
|
|
608
|
-
backgroundColor:
|
|
609
|
-
borderBottom: "2px solid ".concat(borderAccent(colors.deleteColor)),
|
|
629
|
+
backgroundColor: backgroundColor,
|
|
630
|
+
borderBottom: "2px solid ".concat(colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor)),
|
|
610
631
|
padding: "1px 0 2px"
|
|
611
632
|
});
|
|
612
633
|
}
|
|
613
634
|
function buildDeletedInlineStyleStandard(colors, state) {
|
|
635
|
+
var _colors$deleteTextCol5;
|
|
614
636
|
if (state === 'active') {
|
|
637
|
+
var _colors$deleteTextCol4;
|
|
615
638
|
return (0, _lazyNodeView.convertToInlineCss)({
|
|
616
|
-
color: "var(--ds-text, #292A2E)",
|
|
639
|
+
color: colors.deleteTextColor ? textAccent(colors.deleteTextColor) : "var(--ds-text, #292A2E)",
|
|
617
640
|
textDecoration: 'line-through',
|
|
618
|
-
textDecorationColor: textAccent(colors.deleteColor),
|
|
641
|
+
textDecorationColor: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor),
|
|
619
642
|
position: 'relative',
|
|
620
|
-
opacity: 1
|
|
643
|
+
opacity: colors.deleteTextColor ? 0.83 : 1
|
|
621
644
|
});
|
|
622
645
|
}
|
|
623
646
|
return (0, _lazyNodeView.convertToInlineCss)({
|
|
624
|
-
color: textAccent(colors.deleteColor),
|
|
647
|
+
color: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor),
|
|
625
648
|
textDecoration: 'line-through',
|
|
626
649
|
position: 'relative',
|
|
627
|
-
opacity: state === 'new' ? 0.83 : 0.6
|
|
650
|
+
opacity: colors.deleteTextColor || state === 'new' ? 0.83 : 0.6
|
|
628
651
|
});
|
|
629
652
|
}
|
|
630
653
|
|
|
@@ -66,8 +66,11 @@ var standardScheme = exports.standardScheme = {
|
|
|
66
66
|
var createAttributionScheme = function createAttributionScheme(color) {
|
|
67
67
|
return _objectSpread(_objectSpread({}, standardScheme), {}, {
|
|
68
68
|
insertColor: color,
|
|
69
|
+
insertedInlineBorderTone: 'backgroundHovered',
|
|
69
70
|
insertActiveColor: color,
|
|
70
71
|
deleteColor: color,
|
|
72
|
+
deletedInlineBorderTone: 'background',
|
|
73
|
+
deleteTextColor: 'gray',
|
|
71
74
|
deleteActiveColor: color,
|
|
72
75
|
deletedCellColor: color
|
|
73
76
|
});
|
|
@@ -57,7 +57,7 @@ var getExtendedDeletedStyle = function getExtendedDeletedStyle(colors, isActive)
|
|
|
57
57
|
// Identical in both states — the block decoration carries the active emphasis.
|
|
58
58
|
return (0, _factory.buildDeletedInlineStyle)(colors, false);
|
|
59
59
|
}
|
|
60
|
-
return (0, _factory.buildDeletedInlineStyleStandard)(colors, isActive ? 'active' : 'default') + (0, _factory.buildDeletedInlineContentStyleExtended)(colors);
|
|
60
|
+
return (0, _factory.buildDeletedInlineStyleStandard)(colors, isActive ? 'active' : 'default') + (0, _factory.buildDeletedInlineContentStyleExtended)(colors, isActive);
|
|
61
61
|
};
|
|
62
62
|
|
|
63
63
|
/** Registry-driven inline `style` for a changed-content decoration. */
|
|
@@ -112,7 +112,7 @@ var getDeletedContentStyleNext = function getDeletedContentStyleNext(colorScheme
|
|
|
112
112
|
|
|
113
113
|
// glyphTint adds a background highlight and border-bottom over the tint; strikethrough does not.
|
|
114
114
|
var needsExtendedHighlight = colors.deletedInlineTreatment === 'glyphTint' && (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && !omitHighlight;
|
|
115
|
-
return needsExtendedHighlight ? base + (0, _factory.buildDeletedInlineContentStyleExtended)(colors) : base;
|
|
115
|
+
return needsExtendedHighlight ? base + (0, _factory.buildDeletedInlineContentStyleExtended)(colors, isActive) : base;
|
|
116
116
|
};
|
|
117
117
|
var resolveCellOverlayStyleNext = function resolveCellOverlayStyleNext(_ref) {
|
|
118
118
|
var colorScheme = _ref.colorScheme,
|
|
@@ -8,6 +8,7 @@ exports.showDiffPlugin = void 0;
|
|
|
8
8
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _unsafeExpValNoExposure = require("@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure");
|
|
11
12
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
12
13
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
13
14
|
var _attributions = require("./pm-plugins/decorations/colorSchemes/attributions");
|
|
@@ -52,11 +53,15 @@ var prefersReducedMotion = function prefersReducedMotion() {
|
|
|
52
53
|
* Resolve reveal preconditions once here so decorations and animation share one answer. If
|
|
53
54
|
* decorations think a reveal is happening but animation doesn't, highlight paints hidden forever.
|
|
54
55
|
* All preconditions resolved here (not just gate) ensures "unable to animate" means "do not reveal".
|
|
56
|
+
*
|
|
57
|
+
* Umbrella experiment: within the AI streaming UX M1 population this behaviour is only enabled
|
|
58
|
+
* for the treatment cohort. Non-AI callers (track-changes, etc.) are not enrolled and default
|
|
59
|
+
* to `true`, preserving the pre-umbrella baseline.
|
|
55
60
|
*/
|
|
56
61
|
var resolveReveal = function resolveReveal(reveal, editorView) {
|
|
57
62
|
return (
|
|
58
63
|
// Gate first, so it is the primary switch and is always observable once a reveal is requested.
|
|
59
|
-
reveal && (0, _fg.fg)('platform_editor_diff_reveal_animation') && editorView && typeof window !== 'undefined' && !prefersReducedMotion() ? reveal : undefined
|
|
64
|
+
reveal && (0, _fg.fg)('platform_editor_diff_reveal_animation') && (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true && editorView && typeof window !== 'undefined' && !prefersReducedMotion() ? reveal : undefined
|
|
60
65
|
);
|
|
61
66
|
};
|
|
62
67
|
var showDiffPlugin = exports.showDiffPlugin = function showDiffPlugin(_ref3) {
|
|
@@ -4,6 +4,7 @@ import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
|
|
|
4
4
|
import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
|
|
5
5
|
import { Mapping } from '@atlaskit/editor-prosemirror/transform';
|
|
6
6
|
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
7
|
+
import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
|
|
7
8
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
8
9
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
9
10
|
import { areDocsEqualByBlockStructureAndText } from '../areDocsEqualByBlockStructureAndText';
|
|
@@ -244,13 +245,17 @@ export const isDeletedContentPlacedBelow = ({
|
|
|
244
245
|
* `inline` emits delete-only changes, so it did.
|
|
245
246
|
*
|
|
246
247
|
* With the gate off this returns exactly what both callers computed before it existed.
|
|
248
|
+
*
|
|
249
|
+
* Umbrella experiment: within the AI streaming UX M1 population this behaviour is only enabled
|
|
250
|
+
* for the treatment cohort. Non-AI callers (track-changes, etc.) are not enrolled and default
|
|
251
|
+
* to `true`, preserving the pre-umbrella baseline.
|
|
247
252
|
*/
|
|
248
253
|
const shouldHideDeletedSide = ({
|
|
249
254
|
change,
|
|
250
255
|
diffType,
|
|
251
256
|
hideDeletedDiffs,
|
|
252
257
|
isInverted
|
|
253
|
-
}) => isExtendedEnabled(diffType) && !isInverted && !!hideDeletedDiffs && (change.inserted.length > 0 || fg('platform_editor_diff_hide_pure_deletions'));
|
|
258
|
+
}) => isExtendedEnabled(diffType) && !isInverted && !!hideDeletedDiffs && (change.inserted.length > 0 || fg('platform_editor_diff_hide_pure_deletions') && UNSAFE_expValNoExposure('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true);
|
|
254
259
|
const calculateDiffDecorationsInner = ({
|
|
255
260
|
state,
|
|
256
261
|
pluginState,
|
|
@@ -14,6 +14,18 @@ const bgSubtlestMap = {
|
|
|
14
14
|
gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
|
|
15
15
|
lime: "var(--ds-background-accent-lime-subtlest, #EFFFD6)"
|
|
16
16
|
};
|
|
17
|
+
const bgSubtlestHoveredMap = {
|
|
18
|
+
green: "var(--ds-background-accent-green-subtlest-hovered, #BAF3DB)",
|
|
19
|
+
teal: "var(--ds-background-accent-teal-subtlest-hovered, #C6EDFB)",
|
|
20
|
+
blue: "var(--ds-background-accent-blue-subtlest-hovered, #CFE1FD)",
|
|
21
|
+
purple: "var(--ds-background-accent-purple-subtlest-hovered, #EED7FC)",
|
|
22
|
+
red: "var(--ds-background-accent-red-subtlest-hovered, #FFD5D2)",
|
|
23
|
+
orange: "var(--ds-background-accent-orange-subtlest-hovered, #FCE4A6)",
|
|
24
|
+
yellow: "var(--ds-background-accent-yellow-subtlest-hovered, #F5E989)",
|
|
25
|
+
magenta: "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)",
|
|
26
|
+
gray: "var(--ds-background-accent-gray-subtlest-hovered, #DDDEE1)",
|
|
27
|
+
lime: "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)"
|
|
28
|
+
};
|
|
17
29
|
const bgSubtlestPressedMap = {
|
|
18
30
|
green: "var(--ds-background-accent-green-subtlest-pressed, #97EDC9)",
|
|
19
31
|
teal: "var(--ds-background-accent-teal-subtlest-pressed, #B1E4F7)",
|
|
@@ -114,6 +126,10 @@ function deletedCellOutline(colors) {
|
|
|
114
126
|
|
|
115
127
|
// --- Inserted content styles ---
|
|
116
128
|
|
|
129
|
+
function insertedInlineBorderColor(colors) {
|
|
130
|
+
return colors.insertedInlineBorderTone === 'backgroundHovered' ? bgSubtlestHoveredMap[colors.insertColor] : borderAccent(colors.insertColor);
|
|
131
|
+
}
|
|
132
|
+
|
|
117
133
|
/** Inline inserted content — default state. */
|
|
118
134
|
export function buildInsertStyle(colors) {
|
|
119
135
|
return convertToInlineCss({
|
|
@@ -139,7 +155,7 @@ export function buildInsertStyleInBlock(colors) {
|
|
|
139
155
|
export function buildInsertStyleExtended(colors) {
|
|
140
156
|
return convertToInlineCss({
|
|
141
157
|
background: bgSubtlest(colors.insertColor),
|
|
142
|
-
borderBottom: `2px solid ${
|
|
158
|
+
borderBottom: `2px solid ${insertedInlineBorderColor(colors)}`,
|
|
143
159
|
padding: `1px 0 2px`
|
|
144
160
|
});
|
|
145
161
|
}
|
|
@@ -147,7 +163,7 @@ export function buildInsertStyleExtended(colors) {
|
|
|
147
163
|
/** Extended insert style for content within a block node (border-bottom only, no background). */
|
|
148
164
|
export function buildInsertStyleInBlockExtended(colors) {
|
|
149
165
|
return convertToInlineCss({
|
|
150
|
-
borderBottom: `2px solid ${
|
|
166
|
+
borderBottom: `2px solid ${insertedInlineBorderColor(colors)}`,
|
|
151
167
|
padding: `1px 0 2px`
|
|
152
168
|
});
|
|
153
169
|
}
|
|
@@ -199,8 +215,9 @@ export function buildInsertStyleActive(colors) {
|
|
|
199
215
|
|
|
200
216
|
/** Base deleted-inline-style object, shared by several exports. */
|
|
201
217
|
function deletedInlineStyleBase(colors) {
|
|
218
|
+
var _colors$deleteTextCol;
|
|
202
219
|
return {
|
|
203
|
-
textDecorationColor: borderAccent(colors.deleteColor),
|
|
220
|
+
textDecorationColor: borderAccent((_colors$deleteTextCol = colors.deleteTextColor) !== null && _colors$deleteTextCol !== void 0 ? _colors$deleteTextCol : colors.deleteColor),
|
|
204
221
|
textDecoration: 'line-through',
|
|
205
222
|
position: 'relative',
|
|
206
223
|
opacity: 1
|
|
@@ -251,12 +268,13 @@ export function buildDeletedContentStyleUnboundedActive(colors) {
|
|
|
251
268
|
|
|
252
269
|
/** Unbounded strikethrough overlay for deleted inline content (absolute positioned line). */
|
|
253
270
|
export function buildDeletedInlineStyleUnbounded(colors) {
|
|
271
|
+
var _colors$deleteTextCol2;
|
|
254
272
|
return convertToInlineCss({
|
|
255
273
|
position: 'absolute',
|
|
256
274
|
top: '50%',
|
|
257
275
|
width: '100%',
|
|
258
276
|
display: 'inline-block',
|
|
259
|
-
borderTop: `1px solid ${textAccent(colors.deleteColor)}`,
|
|
277
|
+
borderTop: `1px solid ${textAccent((_colors$deleteTextCol2 = colors.deleteTextColor) !== null && _colors$deleteTextCol2 !== void 0 ? _colors$deleteTextCol2 : colors.deleteColor)}`,
|
|
260
278
|
pointerEvents: 'none',
|
|
261
279
|
zIndex: 1
|
|
262
280
|
});
|
|
@@ -367,9 +385,10 @@ export function buildDeletedBlockOutlineRoundedNew(colors) {
|
|
|
367
385
|
|
|
368
386
|
/** Table row style for deleted rows. */
|
|
369
387
|
export function buildDeletedRowStyle(colors) {
|
|
388
|
+
var _colors$deleteTextCol3;
|
|
370
389
|
// Each branch emits exactly the CSS the pre-factory shim did for its scheme.
|
|
371
390
|
return colors.deletedRowTreatment === 'textTint' ? convertToInlineCss({
|
|
372
|
-
color: textAccent(colors.deleteColor),
|
|
391
|
+
color: textAccent((_colors$deleteTextCol3 = colors.deleteTextColor) !== null && _colors$deleteTextCol3 !== void 0 ? _colors$deleteTextCol3 : colors.deleteColor),
|
|
373
392
|
textDecoration: 'line-through',
|
|
374
393
|
opacity: 0.6,
|
|
375
394
|
display: 'table-row'
|
|
@@ -531,29 +550,32 @@ export function buildDeletedDecorationMarkerVariableSimple(colors) {
|
|
|
531
550
|
* 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
|
|
532
551
|
* default, 0.83 "new", 1 active.
|
|
533
552
|
*/
|
|
534
|
-
/** Extended deleted inline style — background highlight
|
|
535
|
-
export function buildDeletedInlineContentStyleExtended(colors) {
|
|
553
|
+
/** Extended deleted inline style — background highlight with an accent or background-matched bottom border. */
|
|
554
|
+
export function buildDeletedInlineContentStyleExtended(colors, isActive = false) {
|
|
555
|
+
const backgroundColor = isActive && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : bgSubtlest(colors.deleteColor);
|
|
536
556
|
return convertToInlineCss({
|
|
537
|
-
backgroundColor
|
|
538
|
-
borderBottom: `2px solid ${borderAccent(colors.deleteColor)}`,
|
|
557
|
+
backgroundColor,
|
|
558
|
+
borderBottom: `2px solid ${colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor)}`,
|
|
539
559
|
padding: `1px 0 2px`
|
|
540
560
|
});
|
|
541
561
|
}
|
|
542
562
|
export function buildDeletedInlineStyleStandard(colors, state) {
|
|
563
|
+
var _colors$deleteTextCol5;
|
|
543
564
|
if (state === 'active') {
|
|
565
|
+
var _colors$deleteTextCol4;
|
|
544
566
|
return convertToInlineCss({
|
|
545
|
-
color: "var(--ds-text, #292A2E)",
|
|
567
|
+
color: colors.deleteTextColor ? textAccent(colors.deleteTextColor) : "var(--ds-text, #292A2E)",
|
|
546
568
|
textDecoration: 'line-through',
|
|
547
|
-
textDecorationColor: textAccent(colors.deleteColor),
|
|
569
|
+
textDecorationColor: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor),
|
|
548
570
|
position: 'relative',
|
|
549
|
-
opacity: 1
|
|
571
|
+
opacity: colors.deleteTextColor ? 0.83 : 1
|
|
550
572
|
});
|
|
551
573
|
}
|
|
552
574
|
return convertToInlineCss({
|
|
553
|
-
color: textAccent(colors.deleteColor),
|
|
575
|
+
color: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor),
|
|
554
576
|
textDecoration: 'line-through',
|
|
555
577
|
position: 'relative',
|
|
556
|
-
opacity: state === 'new' ? 0.83 : 0.6
|
|
578
|
+
opacity: colors.deleteTextColor || state === 'new' ? 0.83 : 0.6
|
|
557
579
|
});
|
|
558
580
|
}
|
|
559
581
|
|
|
@@ -58,8 +58,11 @@ const createAttributionScheme = color => {
|
|
|
58
58
|
return {
|
|
59
59
|
...standardScheme,
|
|
60
60
|
insertColor: color,
|
|
61
|
+
insertedInlineBorderTone: 'backgroundHovered',
|
|
61
62
|
insertActiveColor: color,
|
|
62
63
|
deleteColor: color,
|
|
64
|
+
deletedInlineBorderTone: 'background',
|
|
65
|
+
deleteTextColor: 'gray',
|
|
63
66
|
deleteActiveColor: color,
|
|
64
67
|
deletedCellColor: color
|
|
65
68
|
};
|
|
@@ -44,7 +44,7 @@ const getExtendedDeletedStyle = (colors, isActive) => {
|
|
|
44
44
|
// Identical in both states — the block decoration carries the active emphasis.
|
|
45
45
|
return buildDeletedInlineStyle(colors, false);
|
|
46
46
|
}
|
|
47
|
-
return buildDeletedInlineStyleStandard(colors, isActive ? 'active' : 'default') + buildDeletedInlineContentStyleExtended(colors);
|
|
47
|
+
return buildDeletedInlineStyleStandard(colors, isActive ? 'active' : 'default') + buildDeletedInlineContentStyleExtended(colors, isActive);
|
|
48
48
|
};
|
|
49
49
|
|
|
50
50
|
/** Registry-driven inline `style` for a changed-content decoration. */
|
|
@@ -83,7 +83,7 @@ const getDeletedContentStyleNext = (colorScheme, isActive = false, diffType, omi
|
|
|
83
83
|
|
|
84
84
|
// glyphTint adds a background highlight and border-bottom over the tint; strikethrough does not.
|
|
85
85
|
const needsExtendedHighlight = colors.deletedInlineTreatment === 'glyphTint' && isExtendedEnabled(diffType) && !omitHighlight;
|
|
86
|
-
return needsExtendedHighlight ? base + buildDeletedInlineContentStyleExtended(colors) : base;
|
|
86
|
+
return needsExtendedHighlight ? base + buildDeletedInlineContentStyleExtended(colors, isActive) : base;
|
|
87
87
|
};
|
|
88
88
|
const resolveCellOverlayStyleNext = ({
|
|
89
89
|
colorScheme,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
|
|
2
3
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
3
4
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
4
5
|
import { areAttributionColorGatesEnabled, resolveContributors } from './pm-plugins/decorations/colorSchemes/attributions';
|
|
@@ -40,10 +41,14 @@ const prefersReducedMotion = () => typeof window !== 'undefined' && typeof windo
|
|
|
40
41
|
* Resolve reveal preconditions once here so decorations and animation share one answer. If
|
|
41
42
|
* decorations think a reveal is happening but animation doesn't, highlight paints hidden forever.
|
|
42
43
|
* All preconditions resolved here (not just gate) ensures "unable to animate" means "do not reveal".
|
|
44
|
+
*
|
|
45
|
+
* Umbrella experiment: within the AI streaming UX M1 population this behaviour is only enabled
|
|
46
|
+
* for the treatment cohort. Non-AI callers (track-changes, etc.) are not enrolled and default
|
|
47
|
+
* to `true`, preserving the pre-umbrella baseline.
|
|
43
48
|
*/
|
|
44
49
|
const resolveReveal = (reveal, editorView) =>
|
|
45
50
|
// Gate first, so it is the primary switch and is always observable once a reveal is requested.
|
|
46
|
-
reveal && fg('platform_editor_diff_reveal_animation') && editorView && typeof window !== 'undefined' && !prefersReducedMotion() ? reveal : undefined;
|
|
51
|
+
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;
|
|
47
52
|
export const showDiffPlugin = ({
|
|
48
53
|
api,
|
|
49
54
|
config
|
|
@@ -12,6 +12,7 @@ import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
|
|
|
12
12
|
import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
|
|
13
13
|
import { Mapping } from '@atlaskit/editor-prosemirror/transform';
|
|
14
14
|
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
15
|
+
import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
|
|
15
16
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
16
17
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
17
18
|
import { areDocsEqualByBlockStructureAndText } from '../areDocsEqualByBlockStructureAndText';
|
|
@@ -260,13 +261,17 @@ export var isDeletedContentPlacedBelow = function isDeletedContentPlacedBelow(_r
|
|
|
260
261
|
* `inline` emits delete-only changes, so it did.
|
|
261
262
|
*
|
|
262
263
|
* With the gate off this returns exactly what both callers computed before it existed.
|
|
264
|
+
*
|
|
265
|
+
* Umbrella experiment: within the AI streaming UX M1 population this behaviour is only enabled
|
|
266
|
+
* for the treatment cohort. Non-AI callers (track-changes, etc.) are not enrolled and default
|
|
267
|
+
* to `true`, preserving the pre-umbrella baseline.
|
|
263
268
|
*/
|
|
264
269
|
var shouldHideDeletedSide = function shouldHideDeletedSide(_ref7) {
|
|
265
270
|
var change = _ref7.change,
|
|
266
271
|
diffType = _ref7.diffType,
|
|
267
272
|
hideDeletedDiffs = _ref7.hideDeletedDiffs,
|
|
268
273
|
isInverted = _ref7.isInverted;
|
|
269
|
-
return isExtendedEnabled(diffType) && !isInverted && !!hideDeletedDiffs && (change.inserted.length > 0 || fg('platform_editor_diff_hide_pure_deletions'));
|
|
274
|
+
return isExtendedEnabled(diffType) && !isInverted && !!hideDeletedDiffs && (change.inserted.length > 0 || fg('platform_editor_diff_hide_pure_deletions') && UNSAFE_expValNoExposure('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true);
|
|
270
275
|
};
|
|
271
276
|
var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8) {
|
|
272
277
|
var state = _ref8.state,
|
|
@@ -17,6 +17,18 @@ var bgSubtlestMap = {
|
|
|
17
17
|
gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
|
|
18
18
|
lime: "var(--ds-background-accent-lime-subtlest, #EFFFD6)"
|
|
19
19
|
};
|
|
20
|
+
var bgSubtlestHoveredMap = {
|
|
21
|
+
green: "var(--ds-background-accent-green-subtlest-hovered, #BAF3DB)",
|
|
22
|
+
teal: "var(--ds-background-accent-teal-subtlest-hovered, #C6EDFB)",
|
|
23
|
+
blue: "var(--ds-background-accent-blue-subtlest-hovered, #CFE1FD)",
|
|
24
|
+
purple: "var(--ds-background-accent-purple-subtlest-hovered, #EED7FC)",
|
|
25
|
+
red: "var(--ds-background-accent-red-subtlest-hovered, #FFD5D2)",
|
|
26
|
+
orange: "var(--ds-background-accent-orange-subtlest-hovered, #FCE4A6)",
|
|
27
|
+
yellow: "var(--ds-background-accent-yellow-subtlest-hovered, #F5E989)",
|
|
28
|
+
magenta: "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)",
|
|
29
|
+
gray: "var(--ds-background-accent-gray-subtlest-hovered, #DDDEE1)",
|
|
30
|
+
lime: "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)"
|
|
31
|
+
};
|
|
20
32
|
var bgSubtlestPressedMap = {
|
|
21
33
|
green: "var(--ds-background-accent-green-subtlest-pressed, #97EDC9)",
|
|
22
34
|
teal: "var(--ds-background-accent-teal-subtlest-pressed, #B1E4F7)",
|
|
@@ -117,6 +129,10 @@ function deletedCellOutline(colors) {
|
|
|
117
129
|
|
|
118
130
|
// --- Inserted content styles ---
|
|
119
131
|
|
|
132
|
+
function insertedInlineBorderColor(colors) {
|
|
133
|
+
return colors.insertedInlineBorderTone === 'backgroundHovered' ? bgSubtlestHoveredMap[colors.insertColor] : borderAccent(colors.insertColor);
|
|
134
|
+
}
|
|
135
|
+
|
|
120
136
|
/** Inline inserted content — default state. */
|
|
121
137
|
export function buildInsertStyle(colors) {
|
|
122
138
|
return convertToInlineCss({
|
|
@@ -142,7 +158,7 @@ export function buildInsertStyleInBlock(colors) {
|
|
|
142
158
|
export function buildInsertStyleExtended(colors) {
|
|
143
159
|
return convertToInlineCss({
|
|
144
160
|
background: bgSubtlest(colors.insertColor),
|
|
145
|
-
borderBottom: "2px solid ".concat(
|
|
161
|
+
borderBottom: "2px solid ".concat(insertedInlineBorderColor(colors)),
|
|
146
162
|
padding: "1px 0 2px"
|
|
147
163
|
});
|
|
148
164
|
}
|
|
@@ -150,7 +166,7 @@ export function buildInsertStyleExtended(colors) {
|
|
|
150
166
|
/** Extended insert style for content within a block node (border-bottom only, no background). */
|
|
151
167
|
export function buildInsertStyleInBlockExtended(colors) {
|
|
152
168
|
return convertToInlineCss({
|
|
153
|
-
borderBottom: "2px solid ".concat(
|
|
169
|
+
borderBottom: "2px solid ".concat(insertedInlineBorderColor(colors)),
|
|
154
170
|
padding: "1px 0 2px"
|
|
155
171
|
});
|
|
156
172
|
}
|
|
@@ -202,8 +218,9 @@ export function buildInsertStyleActive(colors) {
|
|
|
202
218
|
|
|
203
219
|
/** Base deleted-inline-style object, shared by several exports. */
|
|
204
220
|
function deletedInlineStyleBase(colors) {
|
|
221
|
+
var _colors$deleteTextCol;
|
|
205
222
|
return {
|
|
206
|
-
textDecorationColor: borderAccent(colors.deleteColor),
|
|
223
|
+
textDecorationColor: borderAccent((_colors$deleteTextCol = colors.deleteTextColor) !== null && _colors$deleteTextCol !== void 0 ? _colors$deleteTextCol : colors.deleteColor),
|
|
207
224
|
textDecoration: 'line-through',
|
|
208
225
|
position: 'relative',
|
|
209
226
|
opacity: 1
|
|
@@ -253,12 +270,13 @@ export function buildDeletedContentStyleUnboundedActive(colors) {
|
|
|
253
270
|
|
|
254
271
|
/** Unbounded strikethrough overlay for deleted inline content (absolute positioned line). */
|
|
255
272
|
export function buildDeletedInlineStyleUnbounded(colors) {
|
|
273
|
+
var _colors$deleteTextCol2;
|
|
256
274
|
return convertToInlineCss({
|
|
257
275
|
position: 'absolute',
|
|
258
276
|
top: '50%',
|
|
259
277
|
width: '100%',
|
|
260
278
|
display: 'inline-block',
|
|
261
|
-
borderTop: "1px solid ".concat(textAccent(colors.deleteColor)),
|
|
279
|
+
borderTop: "1px solid ".concat(textAccent((_colors$deleteTextCol2 = colors.deleteTextColor) !== null && _colors$deleteTextCol2 !== void 0 ? _colors$deleteTextCol2 : colors.deleteColor)),
|
|
262
280
|
pointerEvents: 'none',
|
|
263
281
|
zIndex: 1
|
|
264
282
|
});
|
|
@@ -369,9 +387,10 @@ export function buildDeletedBlockOutlineRoundedNew(colors) {
|
|
|
369
387
|
|
|
370
388
|
/** Table row style for deleted rows. */
|
|
371
389
|
export function buildDeletedRowStyle(colors) {
|
|
390
|
+
var _colors$deleteTextCol3;
|
|
372
391
|
// Each branch emits exactly the CSS the pre-factory shim did for its scheme.
|
|
373
392
|
return colors.deletedRowTreatment === 'textTint' ? convertToInlineCss({
|
|
374
|
-
color: textAccent(colors.deleteColor),
|
|
393
|
+
color: textAccent((_colors$deleteTextCol3 = colors.deleteTextColor) !== null && _colors$deleteTextCol3 !== void 0 ? _colors$deleteTextCol3 : colors.deleteColor),
|
|
375
394
|
textDecoration: 'line-through',
|
|
376
395
|
opacity: 0.6,
|
|
377
396
|
display: 'table-row'
|
|
@@ -532,29 +551,33 @@ export function buildDeletedDecorationMarkerVariableSimple(colors) {
|
|
|
532
551
|
* 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
|
|
533
552
|
* default, 0.83 "new", 1 active.
|
|
534
553
|
*/
|
|
535
|
-
/** Extended deleted inline style — background highlight
|
|
554
|
+
/** Extended deleted inline style — background highlight with an accent or background-matched bottom border. */
|
|
536
555
|
export function buildDeletedInlineContentStyleExtended(colors) {
|
|
556
|
+
var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
557
|
+
var backgroundColor = isActive && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : bgSubtlest(colors.deleteColor);
|
|
537
558
|
return convertToInlineCss({
|
|
538
|
-
backgroundColor:
|
|
539
|
-
borderBottom: "2px solid ".concat(borderAccent(colors.deleteColor)),
|
|
559
|
+
backgroundColor: backgroundColor,
|
|
560
|
+
borderBottom: "2px solid ".concat(colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor)),
|
|
540
561
|
padding: "1px 0 2px"
|
|
541
562
|
});
|
|
542
563
|
}
|
|
543
564
|
export function buildDeletedInlineStyleStandard(colors, state) {
|
|
565
|
+
var _colors$deleteTextCol5;
|
|
544
566
|
if (state === 'active') {
|
|
567
|
+
var _colors$deleteTextCol4;
|
|
545
568
|
return convertToInlineCss({
|
|
546
|
-
color: "var(--ds-text, #292A2E)",
|
|
569
|
+
color: colors.deleteTextColor ? textAccent(colors.deleteTextColor) : "var(--ds-text, #292A2E)",
|
|
547
570
|
textDecoration: 'line-through',
|
|
548
|
-
textDecorationColor: textAccent(colors.deleteColor),
|
|
571
|
+
textDecorationColor: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor),
|
|
549
572
|
position: 'relative',
|
|
550
|
-
opacity: 1
|
|
573
|
+
opacity: colors.deleteTextColor ? 0.83 : 1
|
|
551
574
|
});
|
|
552
575
|
}
|
|
553
576
|
return convertToInlineCss({
|
|
554
|
-
color: textAccent(colors.deleteColor),
|
|
577
|
+
color: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor),
|
|
555
578
|
textDecoration: 'line-through',
|
|
556
579
|
position: 'relative',
|
|
557
|
-
opacity: state === 'new' ? 0.83 : 0.6
|
|
580
|
+
opacity: colors.deleteTextColor || state === 'new' ? 0.83 : 0.6
|
|
558
581
|
});
|
|
559
582
|
}
|
|
560
583
|
|
|
@@ -60,8 +60,11 @@ export var standardScheme = {
|
|
|
60
60
|
var createAttributionScheme = function createAttributionScheme(color) {
|
|
61
61
|
return _objectSpread(_objectSpread({}, standardScheme), {}, {
|
|
62
62
|
insertColor: color,
|
|
63
|
+
insertedInlineBorderTone: 'backgroundHovered',
|
|
63
64
|
insertActiveColor: color,
|
|
64
65
|
deleteColor: color,
|
|
66
|
+
deletedInlineBorderTone: 'background',
|
|
67
|
+
deleteTextColor: 'gray',
|
|
65
68
|
deleteActiveColor: color,
|
|
66
69
|
deletedCellColor: color
|
|
67
70
|
});
|
|
@@ -50,7 +50,7 @@ var getExtendedDeletedStyle = function getExtendedDeletedStyle(colors, isActive)
|
|
|
50
50
|
// Identical in both states — the block decoration carries the active emphasis.
|
|
51
51
|
return buildDeletedInlineStyle(colors, false);
|
|
52
52
|
}
|
|
53
|
-
return buildDeletedInlineStyleStandard(colors, isActive ? 'active' : 'default') + buildDeletedInlineContentStyleExtended(colors);
|
|
53
|
+
return buildDeletedInlineStyleStandard(colors, isActive ? 'active' : 'default') + buildDeletedInlineContentStyleExtended(colors, isActive);
|
|
54
54
|
};
|
|
55
55
|
|
|
56
56
|
/** Registry-driven inline `style` for a changed-content decoration. */
|
|
@@ -106,7 +106,7 @@ var getDeletedContentStyleNext = function getDeletedContentStyleNext(colorScheme
|
|
|
106
106
|
|
|
107
107
|
// glyphTint adds a background highlight and border-bottom over the tint; strikethrough does not.
|
|
108
108
|
var needsExtendedHighlight = colors.deletedInlineTreatment === 'glyphTint' && isExtendedEnabled(diffType) && !omitHighlight;
|
|
109
|
-
return needsExtendedHighlight ? base + buildDeletedInlineContentStyleExtended(colors) : base;
|
|
109
|
+
return needsExtendedHighlight ? base + buildDeletedInlineContentStyleExtended(colors, isActive) : base;
|
|
110
110
|
};
|
|
111
111
|
var resolveCellOverlayStyleNext = function resolveCellOverlayStyleNext(_ref) {
|
|
112
112
|
var colorScheme = _ref.colorScheme,
|
|
@@ -4,6 +4,7 @@ var _excluded = ["stepsWithAttribution", "contributorProfiles"];
|
|
|
4
4
|
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; }
|
|
5
5
|
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; }
|
|
6
6
|
import React from 'react';
|
|
7
|
+
import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
|
|
7
8
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
8
9
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
9
10
|
import { areAttributionColorGatesEnabled, resolveContributors } from './pm-plugins/decorations/colorSchemes/attributions';
|
|
@@ -45,11 +46,15 @@ var prefersReducedMotion = function prefersReducedMotion() {
|
|
|
45
46
|
* Resolve reveal preconditions once here so decorations and animation share one answer. If
|
|
46
47
|
* decorations think a reveal is happening but animation doesn't, highlight paints hidden forever.
|
|
47
48
|
* All preconditions resolved here (not just gate) ensures "unable to animate" means "do not reveal".
|
|
49
|
+
*
|
|
50
|
+
* Umbrella experiment: within the AI streaming UX M1 population this behaviour is only enabled
|
|
51
|
+
* for the treatment cohort. Non-AI callers (track-changes, etc.) are not enrolled and default
|
|
52
|
+
* to `true`, preserving the pre-umbrella baseline.
|
|
48
53
|
*/
|
|
49
54
|
var resolveReveal = function resolveReveal(reveal, editorView) {
|
|
50
55
|
return (
|
|
51
56
|
// 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') && editorView && typeof window !== 'undefined' && !prefersReducedMotion() ? reveal : undefined
|
|
57
|
+
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
58
|
);
|
|
54
59
|
};
|
|
55
60
|
export var showDiffPlugin = function showDiffPlugin(_ref3) {
|
|
@@ -90,8 +90,8 @@ export declare function buildDeletedDecorationMarkerVariableSimple(colors: DiffC
|
|
|
90
90
|
* 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
|
|
91
91
|
* default, 0.83 "new", 1 active.
|
|
92
92
|
*/
|
|
93
|
-
/** Extended deleted inline style — background highlight
|
|
94
|
-
export declare function buildDeletedInlineContentStyleExtended(colors: DiffColorScheme): string;
|
|
93
|
+
/** Extended deleted inline style — background highlight with an accent or background-matched bottom border. */
|
|
94
|
+
export declare function buildDeletedInlineContentStyleExtended(colors: DiffColorScheme, isActive?: boolean): string;
|
|
95
95
|
export declare function buildDeletedInlineStyleStandard(colors: DiffColorScheme, state: 'default' | 'new' | 'active'): string;
|
|
96
96
|
/** Deleted node decoration marker — "new" state. */
|
|
97
97
|
export declare function buildDeletedDecorationMarkerVariableNew(colors: DiffColorScheme): string;
|
|
@@ -26,6 +26,8 @@ export type DiffColorScheme = {
|
|
|
26
26
|
deletedCellColor: AdsAccentColor;
|
|
27
27
|
/** Opacity of the deleted cell overlay background. Counterpart to `insertedCellOpacity`. */
|
|
28
28
|
deletedCellOpacity: number;
|
|
29
|
+
/** Bottom border tone for deleted text highlights. Defaults to accent. */
|
|
30
|
+
deletedInlineBorderTone?: 'accent' | 'background';
|
|
29
31
|
/** Deleted inline content: tint the strikethrough, or tint and dim the glyph itself. */
|
|
30
32
|
deletedInlineTreatment: 'strikethrough' | 'glyphTint';
|
|
31
33
|
/** Resting "REMOVED" lozenge tint. Gray in both current schemes; the active state uses `deleteActiveColor`. */
|
|
@@ -48,12 +50,16 @@ export type DiffColorScheme = {
|
|
|
48
50
|
deletedQuoteNodeShape: 'ring' | 'borderLeft';
|
|
49
51
|
/** Deleted row de-emphasis: tint the line-through, or tint the row text. Both read `deleteColor`. */
|
|
50
52
|
deletedRowTreatment: 'strikeColor' | 'textTint';
|
|
53
|
+
/** Optional text and strikethrough hue, independent of deletion borders. */
|
|
54
|
+
deleteTextColor?: AdsAccentColor;
|
|
51
55
|
/** Inserted content, active/focused state. */
|
|
52
56
|
insertActiveColor: AdsAccentColor;
|
|
53
57
|
/** Inserted content, default state. */
|
|
54
58
|
insertColor: AdsAccentColor;
|
|
55
59
|
/** Opacity of the inserted cell overlay background. */
|
|
56
60
|
insertedCellOpacity: number;
|
|
61
|
+
/** Bottom border tone for inserted text highlights. Defaults to accent. */
|
|
62
|
+
insertedInlineBorderTone?: 'accent' | 'backgroundHovered';
|
|
57
63
|
/** Inserted content under the extended experience: underline, or a border-bottom rule with padding. */
|
|
58
64
|
insertedInlineTreatment: 'underline' | 'borderBottom';
|
|
59
65
|
/** Inserted block ring: 4px stateful ring, or one static 1px accent ring. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-show-diff",
|
|
3
|
-
"version": "15.1.
|
|
3
|
+
"version": "15.1.4",
|
|
4
4
|
"description": "ShowDiff plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
"@atlaskit/editor-plugin-user-intent": "^15.0.0",
|
|
28
28
|
"@atlaskit/editor-prosemirror": "^8.0.0",
|
|
29
29
|
"@atlaskit/editor-shared-styles": "^4.1.0",
|
|
30
|
-
"@atlaskit/editor-tables": "^3.
|
|
30
|
+
"@atlaskit/editor-tables": "^3.2.0",
|
|
31
31
|
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
32
32
|
"@atlaskit/platform-feature-flags": "^2.2.0",
|
|
33
33
|
"@atlaskit/primitives": "^22.5.0",
|
|
34
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
34
|
+
"@atlaskit/tmp-editor-statsig": "^184.0.0",
|
|
35
35
|
"@atlaskit/tokens": "^16.11.0",
|
|
36
36
|
"@babel/runtime": "^7.0.0",
|
|
37
37
|
"@compiled/react": "^1.0.2",
|
|
@@ -56,14 +56,14 @@
|
|
|
56
56
|
"@atlassian/confluence-presets": "workspace:^",
|
|
57
57
|
"@atlassian/content-reconciliation": "^0.1.3506",
|
|
58
58
|
"@atlassian/editor-ai-injected-editors": "^31.0.0",
|
|
59
|
-
"@atlassian/editor-plugin-ai": "^71.
|
|
59
|
+
"@atlassian/editor-plugin-ai": "^71.2.0",
|
|
60
60
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
61
61
|
"react": "^19.2.0",
|
|
62
62
|
"react-dom": "^19.2.0",
|
|
63
63
|
"react-intl": "^7.0.0"
|
|
64
64
|
},
|
|
65
65
|
"peerDependencies": {
|
|
66
|
-
"@atlaskit/editor-common": "^121.
|
|
66
|
+
"@atlaskit/editor-common": "^121.2.0",
|
|
67
67
|
"react": "^18.2.0 || ^19.2.0",
|
|
68
68
|
"react-dom": "^18.2.0 || ^19.2.0",
|
|
69
69
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
package/afm-cc/tsconfig.json
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "../../../../tsconfig.local-consumption.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-plugin-show-diff",
|
|
5
|
-
"rootDir": "../",
|
|
6
|
-
"composite": true,
|
|
7
|
-
"noCheck": true
|
|
8
|
-
},
|
|
9
|
-
"include": [
|
|
10
|
-
"../src/**/*.ts",
|
|
11
|
-
"../src/**/*.tsx"
|
|
12
|
-
],
|
|
13
|
-
"exclude": [
|
|
14
|
-
"../src/**/__tests__/*",
|
|
15
|
-
"../src/**/*.test.*",
|
|
16
|
-
"../src/**/test.*",
|
|
17
|
-
"../src/**/examples.*"
|
|
18
|
-
],
|
|
19
|
-
"references": [
|
|
20
|
-
{
|
|
21
|
-
"path": "../../adf-schema/afm-cc/tsconfig.json"
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
"path": "../../../design-system/avatar/afm-cc/tsconfig.json"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"path": "../../custom-steps/afm-cc/tsconfig.json"
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"path": "../../editor-plugin-analytics/afm-cc/tsconfig.json"
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
"path": "../../editor-plugin-user-intent/afm-cc/tsconfig.json"
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
"path": "../../editor-prosemirror/afm-cc/tsconfig.json"
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"path": "../../editor-shared-styles/afm-cc/tsconfig.json"
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"path": "../../editor-tables/afm-cc/tsconfig.json"
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
"path": "../../../platform/feature-experiments/afm-cc/tsconfig.json"
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
"path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
"path": "../../editor-common/afm-cc/tsconfig.json"
|
|
61
|
-
}
|
|
62
|
-
]
|
|
63
|
-
}
|