@atlaskit/editor-plugin-show-diff 13.0.10 → 13.1.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 +32 -0
- package/afm-cc/tsconfig.json +3 -0
- package/dist/cjs/pm-plugins/decorations/colorSchemes/factory.js +259 -23
- package/dist/cjs/pm-plugins/decorations/colorSchemes/schemes.js +21 -5
- package/dist/cjs/pm-plugins/decorations/createBlockChangedDecoration.js +87 -105
- package/dist/cjs/pm-plugins/decorations/createBlockChangedDecoration.styles.legacy.js +124 -0
- package/dist/cjs/pm-plugins/decorations/createChangedRowDecorationWidgets.js +15 -12
- package/dist/cjs/pm-plugins/decorations/createChangedRowDecorationWidgets.styles.legacy.js +37 -0
- package/dist/cjs/pm-plugins/decorations/createInlineChangedDecoration.js +109 -59
- package/dist/cjs/pm-plugins/decorations/createInlineChangedDecoration.styles.legacy.js +67 -0
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeView.js +30 -168
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +205 -0
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.js +225 -0
- package/dist/es2019/pm-plugins/decorations/colorSchemes/factory.js +247 -23
- package/dist/es2019/pm-plugins/decorations/colorSchemes/schemes.js +20 -4
- package/dist/es2019/pm-plugins/decorations/createBlockChangedDecoration.js +85 -105
- package/dist/es2019/pm-plugins/decorations/createBlockChangedDecoration.styles.legacy.js +118 -0
- package/dist/es2019/pm-plugins/decorations/createChangedRowDecorationWidgets.js +15 -12
- package/dist/es2019/pm-plugins/decorations/createChangedRowDecorationWidgets.styles.legacy.js +33 -0
- package/dist/es2019/pm-plugins/decorations/createInlineChangedDecoration.js +82 -37
- package/dist/es2019/pm-plugins/decorations/createInlineChangedDecoration.styles.legacy.js +62 -0
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeView.js +15 -140
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +143 -0
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.js +200 -0
- package/dist/esm/pm-plugins/decorations/colorSchemes/factory.js +248 -23
- package/dist/esm/pm-plugins/decorations/colorSchemes/schemes.js +20 -4
- package/dist/esm/pm-plugins/decorations/createBlockChangedDecoration.js +87 -105
- package/dist/esm/pm-plugins/decorations/createBlockChangedDecoration.styles.legacy.js +118 -0
- package/dist/esm/pm-plugins/decorations/createChangedRowDecorationWidgets.js +15 -12
- package/dist/esm/pm-plugins/decorations/createChangedRowDecorationWidgets.styles.legacy.js +32 -0
- package/dist/esm/pm-plugins/decorations/createInlineChangedDecoration.js +109 -59
- package/dist/esm/pm-plugins/decorations/createInlineChangedDecoration.styles.legacy.js +61 -0
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeView.js +15 -153
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +198 -0
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.js +218 -0
- package/dist/types/pm-plugins/decorations/colorSchemes/factory.d.ts +78 -6
- package/dist/types/pm-plugins/decorations/colorSchemes/schemes.d.ts +3 -0
- package/dist/types/pm-plugins/decorations/colorSchemes/types.d.ts +13 -3
- package/dist/types/pm-plugins/decorations/createBlockChangedDecoration.styles.legacy.d.ts +14 -0
- package/dist/types/pm-plugins/decorations/createChangedRowDecorationWidgets.styles.legacy.d.ts +22 -0
- package/dist/types/pm-plugins/decorations/createInlineChangedDecoration.styles.legacy.d.ts +26 -0
- package/dist/types/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.d.ts +39 -0
- package/dist/types/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.d.ts +40 -0
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-show-diff
|
|
2
2
|
|
|
3
|
+
## 13.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`ff63426bafe82`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff63426bafe82) -
|
|
8
|
+
Migrate all show-diff decoration consumers off the traditional/standard colour scheme shims onto
|
|
9
|
+
the scheme registry and factory, replacing roughly 30 `colorScheme === 'traditional'` branches,
|
|
10
|
+
and add five structural fields to `DiffColorScheme` so both schemes keep rendering identically.
|
|
11
|
+
|
|
12
|
+
Behind the `platform_editor_show_diff_color_scheme_refactor` experiment, default off, read inline
|
|
13
|
+
at each call site with `isExperimentEnabled` from `@atlaskit/platform-feature-experiments`. Every
|
|
14
|
+
gated call site keeps its pre-refactor implementation in a `*.legacy.ts` sibling, and the
|
|
15
|
+
`standard.ts` / `traditional.ts` shims are retained, so the off cohort runs exactly the code it
|
|
16
|
+
ran before.
|
|
17
|
+
|
|
18
|
+
In editor-core, the atomic inline highlight for date, emoji, mention and status nodes gains a
|
|
19
|
+
`var(--show-diff-atomic-inline-changed-border-color, <token>)` fallback on the consuming
|
|
20
|
+
declarations. The existing two-scheme colour table is unchanged and still drives the off cohort;
|
|
21
|
+
it is removed in a follow-up once the experiment is cleaned up.
|
|
22
|
+
|
|
23
|
+
No visual change in either cohort.
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- Updated dependencies
|
|
28
|
+
|
|
29
|
+
## 13.0.11
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- Updated dependencies
|
|
34
|
+
|
|
3
35
|
## 13.0.10
|
|
4
36
|
|
|
5
37
|
### Patch Changes
|
package/afm-cc/tsconfig.json
CHANGED
|
@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.buildAddedCellOverlayRoundedStyle = buildAddedCellOverlayRoundedStyle;
|
|
8
8
|
exports.buildAddedCellOverlayStyle = buildAddedCellOverlayStyle;
|
|
9
9
|
exports.buildAddedCellOverlayStyleNew = buildAddedCellOverlayStyleNew;
|
|
10
|
+
exports.buildAtomicInlineChangedCSSVariables = buildAtomicInlineChangedCSSVariables;
|
|
10
11
|
exports.buildDecorationMarkerVariable = buildDecorationMarkerVariable;
|
|
11
12
|
exports.buildDecorationMarkerVariableActive = buildDecorationMarkerVariableActive;
|
|
12
13
|
exports.buildDecorationMarkerVariableNew = buildDecorationMarkerVariableNew;
|
|
14
|
+
exports.buildDeletedBlockNodeStyle = buildDeletedBlockNodeStyle;
|
|
13
15
|
exports.buildDeletedBlockOutline = buildDeletedBlockOutline;
|
|
14
16
|
exports.buildDeletedBlockOutlineActive = buildDeletedBlockOutlineActive;
|
|
15
17
|
exports.buildDeletedBlockOutlineNew = buildDeletedBlockOutlineNew;
|
|
@@ -24,15 +26,22 @@ exports.buildDeletedDecorationMarkerVariable = buildDeletedDecorationMarkerVaria
|
|
|
24
26
|
exports.buildDeletedDecorationMarkerVariableActive = buildDeletedDecorationMarkerVariableActive;
|
|
25
27
|
exports.buildDeletedDecorationMarkerVariableNew = buildDeletedDecorationMarkerVariableNew;
|
|
26
28
|
exports.buildDeletedDecorationMarkerVariableSimple = buildDeletedDecorationMarkerVariableSimple;
|
|
29
|
+
exports.buildDeletedInlineContentStyle = buildDeletedInlineContentStyle;
|
|
27
30
|
exports.buildDeletedInlineContentStyleExtended = buildDeletedInlineContentStyleExtended;
|
|
28
31
|
exports.buildDeletedInlineStyle = buildDeletedInlineStyle;
|
|
29
32
|
exports.buildDeletedInlineStyleStandard = buildDeletedInlineStyleStandard;
|
|
30
33
|
exports.buildDeletedInlineStyleUnbounded = buildDeletedInlineStyleUnbounded;
|
|
34
|
+
exports.buildDeletedLozengeActiveStyle = buildDeletedLozengeActiveStyle;
|
|
35
|
+
exports.buildDeletedLozengeStyle = buildDeletedLozengeStyle;
|
|
36
|
+
exports.buildDeletedNodeCSSVariables = buildDeletedNodeCSSVariables;
|
|
37
|
+
exports.buildDeletedQuoteNodeWithLozengeStyle = buildDeletedQuoteNodeWithLozengeStyle;
|
|
31
38
|
exports.buildDeletedRowStyle = buildDeletedRowStyle;
|
|
39
|
+
exports.buildDeletedStrikethroughLine = buildDeletedStrikethroughLine;
|
|
32
40
|
exports.buildDeletedStyleQuoteNode = buildDeletedStyleQuoteNode;
|
|
33
41
|
exports.buildDeletedStyleQuoteNodeActive = buildDeletedStyleQuoteNodeActive;
|
|
34
42
|
exports.buildDeletedStyleQuoteNodeWithLozenge = buildDeletedStyleQuoteNodeWithLozenge;
|
|
35
43
|
exports.buildDeletedStyleQuoteNodeWithLozengeActive = buildDeletedStyleQuoteNodeWithLozengeActive;
|
|
44
|
+
exports.buildDeletedWrappedBlockOutline = buildDeletedWrappedBlockOutline;
|
|
36
45
|
exports.buildInsertStyle = buildInsertStyle;
|
|
37
46
|
exports.buildInsertStyleActive = buildInsertStyleActive;
|
|
38
47
|
exports.buildInsertStyleCardBlockNode = buildInsertStyleCardBlockNode;
|
|
@@ -54,6 +63,8 @@ exports.buildInsertStyleQuoteNodeNew = buildInsertStyleQuoteNodeNew;
|
|
|
54
63
|
exports.buildInsertStyleRuleNode = buildInsertStyleRuleNode;
|
|
55
64
|
exports.buildInsertStyleRuleNodeActive = buildInsertStyleRuleNodeActive;
|
|
56
65
|
exports.buildInsertStyleRuleNodeNew = buildInsertStyleRuleNodeNew;
|
|
66
|
+
exports.buildInsertedBlockNodeStyle = buildInsertedBlockNodeStyle;
|
|
67
|
+
exports.buildInsertedInlineStyle = buildInsertedInlineStyle;
|
|
57
68
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
58
69
|
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
59
70
|
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; }
|
|
@@ -132,16 +143,16 @@ function textAccent(color) {
|
|
|
132
143
|
return textAccentMap[color];
|
|
133
144
|
}
|
|
134
145
|
|
|
135
|
-
/** Outline colour for deleted table-cell overlays. */
|
|
136
|
-
function deletedCellOutline(colors) {
|
|
137
|
-
return colors.deletedCellBorderProminence === 'subtle' ? "var(--ds-border-disabled, #0515240F)" : borderAccent(colors.deletedCellColor);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
146
|
/** Ring colour for an active (scroll-target) deleted block outline. */
|
|
141
147
|
function deletedBlockOutlineActiveRing(colors) {
|
|
142
148
|
return colors.deletedBlockOutlineActiveEmphasis === 'border' ? borderAccent(colors.deleteActiveColor) : bgSubtlerPressed(colors.deleteActiveColor);
|
|
143
149
|
}
|
|
144
150
|
|
|
151
|
+
/** Outline colour for deleted table-cell overlays. */
|
|
152
|
+
function deletedCellOutline(colors) {
|
|
153
|
+
return colors.deletedCellBorderProminence === 'subtle' ? "var(--ds-border-disabled, #0515240F)" : borderAccent(colors.deletedCellColor);
|
|
154
|
+
}
|
|
155
|
+
|
|
145
156
|
// --- Inserted content styles ---
|
|
146
157
|
|
|
147
158
|
/** Inline inserted content — default state. */
|
|
@@ -227,6 +238,7 @@ function buildInsertStyleActive(colors) {
|
|
|
227
238
|
|
|
228
239
|
// --- Deleted inline content styles ---
|
|
229
240
|
|
|
241
|
+
/** Base deleted-inline-style object, shared by several exports. */
|
|
230
242
|
function deletedInlineStyleBase(colors) {
|
|
231
243
|
return {
|
|
232
244
|
textDecorationColor: borderAccent(colors.deleteColor),
|
|
@@ -235,6 +247,8 @@ function deletedInlineStyleBase(colors) {
|
|
|
235
247
|
opacity: 1
|
|
236
248
|
};
|
|
237
249
|
}
|
|
250
|
+
|
|
251
|
+
/** Active deleted-inline-style object, extending the base. */
|
|
238
252
|
function deletedInlineStyleActiveBase(colors) {
|
|
239
253
|
return _objectSpread(_objectSpread({}, deletedInlineStyleBase(colors)), {}, {
|
|
240
254
|
textDecorationThickness: '2px',
|
|
@@ -311,8 +325,6 @@ function buildDeletedStyleQuoteNodeWithLozengeActive(colors) {
|
|
|
311
325
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
312
326
|
});
|
|
313
327
|
}
|
|
314
|
-
|
|
315
|
-
/** Deleted quote node — a 2px left border, or a 1px ring with padding, per `deletedQuoteNodeShape`. */
|
|
316
328
|
function buildDeletedStyleQuoteNode(colors) {
|
|
317
329
|
if (colors.deletedQuoteNodeShape === 'borderLeft') {
|
|
318
330
|
return (0, _lazyNodeView.convertToInlineCss)({
|
|
@@ -393,18 +405,20 @@ function buildDeletedBlockOutlineRoundedNew(colors) {
|
|
|
393
405
|
|
|
394
406
|
// --- Deleted table row style ---
|
|
395
407
|
|
|
396
|
-
/** Table row style for deleted rows.
|
|
408
|
+
/** Table row style for deleted rows. */
|
|
397
409
|
function buildDeletedRowStyle(colors) {
|
|
398
|
-
|
|
410
|
+
// Each branch emits exactly the CSS the pre-factory shim did for its scheme.
|
|
411
|
+
return colors.deletedRowTreatment === 'textTint' ? (0, _lazyNodeView.convertToInlineCss)({
|
|
412
|
+
color: textAccent(colors.deleteColor),
|
|
399
413
|
textDecoration: 'line-through',
|
|
400
414
|
opacity: 0.6,
|
|
401
415
|
display: 'table-row'
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
})
|
|
416
|
+
}) : (0, _lazyNodeView.convertToInlineCss)({
|
|
417
|
+
textDecorationColor: borderAccent(colors.deleteColor),
|
|
418
|
+
textDecoration: 'line-through',
|
|
419
|
+
opacity: 0.6,
|
|
420
|
+
display: 'table-row'
|
|
421
|
+
});
|
|
408
422
|
}
|
|
409
423
|
|
|
410
424
|
// --- Inserted block node styles — quote, rule, generic node, card ---
|
|
@@ -505,9 +519,11 @@ function buildInsertStyleCardBlockNodeActive(colors) {
|
|
|
505
519
|
});
|
|
506
520
|
}
|
|
507
521
|
|
|
508
|
-
//
|
|
509
|
-
//
|
|
510
|
-
//
|
|
522
|
+
// ---------------------------------------------------------------------------
|
|
523
|
+
// CSS custom property variables (for nodes styled via global stylesheet)
|
|
524
|
+
// These are applied as inline styles on the decoration wrapper element and
|
|
525
|
+
// cascade down to child/pseudo-element selectors in the global stylesheet.
|
|
526
|
+
// ---------------------------------------------------------------------------
|
|
511
527
|
|
|
512
528
|
/** CSS variables for an inserted node decoration marker — default state. */
|
|
513
529
|
function buildDecorationMarkerVariable(colors) {
|
|
@@ -541,7 +557,7 @@ function buildDeletedDecorationMarkerVariable(colors) {
|
|
|
541
557
|
}));
|
|
542
558
|
}
|
|
543
559
|
|
|
544
|
-
/** Opacity only, no position or strikethrough. Used by
|
|
560
|
+
/** Opacity only, no position or strikethrough. Used by 'static' schemes. */
|
|
545
561
|
function buildDeletedDecorationMarkerVariableSimple(colors) {
|
|
546
562
|
return (0, _lazyNodeView.convertToInlineCss)({
|
|
547
563
|
opacity: 0.8,
|
|
@@ -550,6 +566,10 @@ function buildDeletedDecorationMarkerVariableSimple(colors) {
|
|
|
550
566
|
});
|
|
551
567
|
}
|
|
552
568
|
|
|
569
|
+
/**
|
|
570
|
+
* 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
|
|
571
|
+
* default, 0.83 "new", 1 active.
|
|
572
|
+
*/
|
|
553
573
|
/** Extended deleted inline style — background highlight + border-bottom underline (standard scheme). */
|
|
554
574
|
function buildDeletedInlineContentStyleExtended(colors) {
|
|
555
575
|
return (0, _lazyNodeView.convertToInlineCss)({
|
|
@@ -558,8 +578,6 @@ function buildDeletedInlineContentStyleExtended(colors) {
|
|
|
558
578
|
padding: "1px 0 2px"
|
|
559
579
|
});
|
|
560
580
|
}
|
|
561
|
-
|
|
562
|
-
/** Standard deleted inline style — colours the glyph itself, not just the strikethrough. */
|
|
563
581
|
function buildDeletedInlineStyleStandard(colors, state) {
|
|
564
582
|
if (state === 'active') {
|
|
565
583
|
return (0, _lazyNodeView.convertToInlineCss)({
|
|
@@ -596,7 +614,7 @@ function buildDeletedDecorationMarkerVariableActive(colors) {
|
|
|
596
614
|
|
|
597
615
|
// --- Table cell overlay styles ---
|
|
598
616
|
|
|
599
|
-
/** Cell overlay for added table cells — default state
|
|
617
|
+
/** Cell overlay for added table cells — default state (zIndex 1). */
|
|
600
618
|
function buildAddedCellOverlayStyle(colors) {
|
|
601
619
|
return (0, _lazyNodeView.convertToInlineCss)({
|
|
602
620
|
position: 'absolute',
|
|
@@ -611,7 +629,7 @@ function buildAddedCellOverlayStyle(colors) {
|
|
|
611
629
|
});
|
|
612
630
|
}
|
|
613
631
|
|
|
614
|
-
/**
|
|
632
|
+
/** Cell overlay for added table cells — rounded variant (zIndex 2, inherits border/radius). */
|
|
615
633
|
function buildAddedCellOverlayRoundedStyle(colors) {
|
|
616
634
|
return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
|
|
617
635
|
position: 'absolute',
|
|
@@ -675,4 +693,222 @@ function buildDeletedCellOverlayRoundedStyle(colors) {
|
|
|
675
693
|
border: 'inherit',
|
|
676
694
|
borderRadius: 'inherit'
|
|
677
695
|
});
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
// ---------------------------------------------------------------------------
|
|
699
|
+
// CSS custom property variables for deleted node global stylesheet
|
|
700
|
+
//
|
|
701
|
+
// These are set as inline styles on the deleted node wrapper element and cascade
|
|
702
|
+
// down to child/pseudo-element selectors in the global smartCardStyles stylesheet.
|
|
703
|
+
// The stylesheet reads var(--diff-delete-color) etc. — one set of selectors for
|
|
704
|
+
// all schemes, written once, never needs to change when new schemes are added.
|
|
705
|
+
// ---------------------------------------------------------------------------
|
|
706
|
+
|
|
707
|
+
// --- Inline content style dispatch ---
|
|
708
|
+
|
|
709
|
+
/**
|
|
710
|
+
* Inserted inline content under the extended diff experience. `insertedInlineTreatment` picks
|
|
711
|
+
* `text-decoration` vs a `border-bottom` rule; only the latter honours `hideAddedDiffsUnderline`.
|
|
712
|
+
*/
|
|
713
|
+
function buildInsertedInlineStyle(colors, isActive, hideAddedDiffsUnderline) {
|
|
714
|
+
if (colors.insertedInlineTreatment === 'underline') {
|
|
715
|
+
return isActive ? buildInsertStyleActive(colors) : buildInsertStyle(colors);
|
|
716
|
+
}
|
|
717
|
+
if (isActive) {
|
|
718
|
+
return hideAddedDiffsUnderline ? buildInsertStyleExtendedNoUnderlineActive(colors) : buildInsertStyleExtendedActive(colors);
|
|
719
|
+
}
|
|
720
|
+
return hideAddedDiffsUnderline ? buildInsertStyleExtendedNoUnderline(colors) : buildInsertStyleExtended(colors);
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
/** The three visual states deleted inline content can be in. */
|
|
724
|
+
|
|
725
|
+
/**
|
|
726
|
+
* Deleted inline content in a given state. 'strikethrough' renders 'default' and 'new'
|
|
727
|
+
* identically; the 'new' step exists only for the 'glyphTint' opacity ramp.
|
|
728
|
+
*/
|
|
729
|
+
function buildDeletedInlineContentStyle(colors, state) {
|
|
730
|
+
return colors.deletedInlineTreatment === 'strikethrough' ? buildDeletedInlineStyle(colors, state === 'active') : buildDeletedInlineStyleStandard(colors, state);
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
/**
|
|
734
|
+
* The positioned line across deleted content spanning an unbounded range. 'stateful' thickens
|
|
735
|
+
* 1px to 2px when active and tints with the border accent; 'static' uses the text accent always.
|
|
736
|
+
*/
|
|
737
|
+
function buildDeletedStrikethroughLine(colors, isActive) {
|
|
738
|
+
if (colors.deletedNodeEmphasis !== 'stateful') {
|
|
739
|
+
return buildDeletedInlineStyleUnbounded(colors);
|
|
740
|
+
}
|
|
741
|
+
return isActive ? buildDeletedContentStyleUnboundedActive(colors) : buildDeletedContentStyleUnbounded(colors);
|
|
742
|
+
}
|
|
743
|
+
|
|
744
|
+
// --- Deleted-content "REMOVED" lozenge ---
|
|
745
|
+
|
|
746
|
+
/** Structural CSS shared by both lozenge states — everything except the background tint. */
|
|
747
|
+
var deletedLozengeBase = {
|
|
748
|
+
display: 'inline-flex',
|
|
749
|
+
boxSizing: 'border-box',
|
|
750
|
+
position: 'static',
|
|
751
|
+
blockSize: 'min-content',
|
|
752
|
+
borderRadius: "var(--ds-radius-small, 4px)",
|
|
753
|
+
overflow: 'hidden',
|
|
754
|
+
paddingInlineStart: "var(--ds-space-050, 4px)",
|
|
755
|
+
paddingInlineEnd: "var(--ds-space-050, 4px)",
|
|
756
|
+
font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
757
|
+
fontWeight: "var(--ds-font-weight-bold, 653)",
|
|
758
|
+
textOverflow: 'ellipsis',
|
|
759
|
+
whiteSpace: 'nowrap',
|
|
760
|
+
color: "var(--ds-text-warning-inverse, #292A2E)"
|
|
761
|
+
};
|
|
762
|
+
|
|
763
|
+
/**
|
|
764
|
+
* The "REMOVED" lozenge on a deleted block node — resting state. Neutral gray in every scheme,
|
|
765
|
+
* so it takes no DiffColorScheme; only the active state is tinted.
|
|
766
|
+
*/
|
|
767
|
+
function buildDeletedLozengeStyle() {
|
|
768
|
+
return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedLozengeBase), {}, {
|
|
769
|
+
backgroundColor: "var(--ds-background-accent-gray-subtler, #DDDEE1)"
|
|
770
|
+
}));
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
/** The "REMOVED" lozenge — active state, tinted with the scheme's deleteActiveColor. */
|
|
774
|
+
function buildDeletedLozengeActiveStyle(colors) {
|
|
775
|
+
return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedLozengeBase), {}, {
|
|
776
|
+
backgroundColor: bgSubtlerPressed(colors.deleteActiveColor)
|
|
777
|
+
}));
|
|
778
|
+
}
|
|
779
|
+
|
|
780
|
+
// ---------------------------------------------------------------------------
|
|
781
|
+
// Block node style dispatch
|
|
782
|
+
//
|
|
783
|
+
// A block node's decoration shape is a property of the *node type* — every scheme draws a
|
|
784
|
+
// blockquote with a left border and a horizontal rule as a filled bar. What varies per scheme
|
|
785
|
+
// is the emphasis and, for deleted content, which of the treatments below is used. Keeping that
|
|
786
|
+
// table here rather than in the decoration consumers means adding a scheme stays a change to
|
|
787
|
+
// `schemes.ts` alone.
|
|
788
|
+
// ---------------------------------------------------------------------------
|
|
789
|
+
|
|
790
|
+
/** The decoration shape an inserted block node takes. Determined by node type, not by scheme. */
|
|
791
|
+
|
|
792
|
+
/**
|
|
793
|
+
* Outline for an inserted block node. `insertedNodeEmphasis`: 'stateful' draws a 4px ring
|
|
794
|
+
* (`subtlest` at rest, `subtler.pressed` when focused), 'static' one 1px accent ring.
|
|
795
|
+
*/
|
|
796
|
+
function buildInsertedBlockNodeStyle(colors, shape, isActive) {
|
|
797
|
+
var isStateful = colors.insertedNodeEmphasis === 'stateful';
|
|
798
|
+
switch (shape) {
|
|
799
|
+
case 'quote':
|
|
800
|
+
if (!isStateful) {
|
|
801
|
+
return buildInsertStyleQuoteNode(colors);
|
|
802
|
+
}
|
|
803
|
+
return isActive ? buildInsertStyleQuoteNodeActive(colors) : buildInsertStyleQuoteNodeNew(colors);
|
|
804
|
+
case 'rule':
|
|
805
|
+
if (!isStateful) {
|
|
806
|
+
return buildInsertStyleRuleNode(colors);
|
|
807
|
+
}
|
|
808
|
+
return isActive ? buildInsertStyleRuleNodeActive(colors) : buildInsertStyleRuleNodeNew(colors);
|
|
809
|
+
case 'cardBlock':
|
|
810
|
+
if (!isStateful) {
|
|
811
|
+
return buildInsertStyleCardBlockNode(colors);
|
|
812
|
+
}
|
|
813
|
+
return isActive ? buildInsertStyleCardBlockNodeActive(colors) : buildInsertStyleCardBlockNodeNew(colors);
|
|
814
|
+
case 'marker':
|
|
815
|
+
if (!isStateful) {
|
|
816
|
+
return buildDecorationMarkerVariable(colors);
|
|
817
|
+
}
|
|
818
|
+
return isActive ? buildDecorationMarkerVariableActive(colors) : buildDecorationMarkerVariableNew(colors);
|
|
819
|
+
case 'node':
|
|
820
|
+
default:
|
|
821
|
+
if (!isStateful) {
|
|
822
|
+
return buildInsertStyleNode(colors);
|
|
823
|
+
}
|
|
824
|
+
return isActive ? buildInsertStyleNodeActive(colors) : buildInsertStyleNodeNew(colors);
|
|
825
|
+
}
|
|
826
|
+
}
|
|
827
|
+
|
|
828
|
+
/**
|
|
829
|
+
* The category a deleted block node falls into — by node type, not by scheme.
|
|
830
|
+
*
|
|
831
|
+
* 'container' — media, panel: content is a child element, so the node is only dimmed.
|
|
832
|
+
* 'listItem' — listItem: reads the marker variables via editor-core's list styles.
|
|
833
|
+
* 'marker' — extension, embedCard: same, via extension and smart-card styles.
|
|
834
|
+
* 'quote' — blockquote.
|
|
835
|
+
* 'generic' — rule, blockCard, everything else.
|
|
836
|
+
*/
|
|
837
|
+
|
|
838
|
+
/**
|
|
839
|
+
* Outline for a deleted block node, driven by `deletedInlineTreatment` (strike vs tint) and
|
|
840
|
+
* `deletedNodeEmphasis` (whether the outline tracks scroll state and emits marker variables).
|
|
841
|
+
*/
|
|
842
|
+
function buildDeletedBlockNodeStyle(colors, category, isActive) {
|
|
843
|
+
var isStrikethrough = colors.deletedInlineTreatment === 'strikethrough';
|
|
844
|
+
var statefulMarker = function statefulMarker() {
|
|
845
|
+
return isActive ? buildDeletedDecorationMarkerVariableActive(colors) : buildDeletedDecorationMarkerVariableNew(colors);
|
|
846
|
+
};
|
|
847
|
+
switch (category) {
|
|
848
|
+
case 'quote':
|
|
849
|
+
// Both emphases share one builder here — `deletedQuoteNodeShape` already carries the
|
|
850
|
+
// only variance (a ring versus a left border).
|
|
851
|
+
return buildDeletedStyleQuoteNode(colors);
|
|
852
|
+
case 'container':
|
|
853
|
+
return isStrikethrough ? buildDeletedInlineStyle(colors, false) : buildDeletedDecorationMarkerVariableSimple(colors);
|
|
854
|
+
case 'listItem':
|
|
855
|
+
return colors.deletedNodeEmphasis === 'stateful' ? statefulMarker() : buildDeletedDecorationMarkerVariableSimple(colors);
|
|
856
|
+
case 'marker':
|
|
857
|
+
return colors.deletedNodeEmphasis === 'stateful' ? statefulMarker() : buildDeletedInlineStyleStandard(colors, 'new');
|
|
858
|
+
case 'generic':
|
|
859
|
+
default:
|
|
860
|
+
return isStrikethrough ? buildDeletedInlineStyle(colors, false) : buildDeletedInlineStyleStandard(colors, 'new');
|
|
861
|
+
}
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
/**
|
|
865
|
+
* Deleted blockquote inside a lozenge wrapper (the nodeview path). Always a ring, since the
|
|
866
|
+
* lozenge needs an enclosed shape, so `deletedQuoteNodeShape` does not apply — only
|
|
867
|
+
* `deletedQuoteNodeActiveTone`, which picks the active ring's tone.
|
|
868
|
+
*/
|
|
869
|
+
function buildDeletedQuoteNodeWithLozengeStyle(colors, isActive) {
|
|
870
|
+
if (!isActive) {
|
|
871
|
+
return buildDeletedStyleQuoteNodeWithLozenge(colors);
|
|
872
|
+
}
|
|
873
|
+
return colors.deletedQuoteNodeActiveTone === 'backgroundPressed' ? buildDeletedStyleQuoteNodeActive(colors) : buildDeletedStyleQuoteNodeWithLozengeActive(colors);
|
|
874
|
+
}
|
|
875
|
+
|
|
876
|
+
/**
|
|
877
|
+
* Outline for a deleted block node via the nodeview wrapper (expand, decisionList, panel,
|
|
878
|
+
* codeBlock). Every scheme shares the active state; `deletedNodeEmphasis` changes only the
|
|
879
|
+
* resting one — 'stateful' a 4px subtlest ring, 'static' a 1px accent ring.
|
|
880
|
+
*/
|
|
881
|
+
function buildDeletedWrappedBlockOutline(colors, _ref) {
|
|
882
|
+
var isActive = _ref.isActive,
|
|
883
|
+
isRounded = _ref.isRounded;
|
|
884
|
+
if (isActive) {
|
|
885
|
+
return isRounded ? buildDeletedBlockOutlineRoundedActive(colors) : buildDeletedBlockOutlineActive(colors);
|
|
886
|
+
}
|
|
887
|
+
if (colors.deletedNodeEmphasis === 'stateful') {
|
|
888
|
+
return isRounded ? buildDeletedBlockOutlineRoundedNew(colors) : buildDeletedBlockOutlineNew(colors);
|
|
889
|
+
}
|
|
890
|
+
return isRounded ? buildDeletedBlockOutlineRounded(colors) : buildDeletedBlockOutline(colors);
|
|
891
|
+
}
|
|
892
|
+
|
|
893
|
+
/**
|
|
894
|
+
* Accent colour for atomic inline changed nodes (date, emoji, mention, status). Set inline on the
|
|
895
|
+
* decoration span and read by the `.show-diff-atomic-inline-changed-*` selectors in
|
|
896
|
+
* EditorContentContainer, on the decorated element or a descendant, so it must inherit. Being
|
|
897
|
+
* inline it beats the stylesheet's fallback, making the plugin the only source of the colour.
|
|
898
|
+
*/
|
|
899
|
+
function buildAtomicInlineChangedCSSVariables(colors) {
|
|
900
|
+
return (0, _lazyNodeView.convertToInlineCss)({
|
|
901
|
+
'--show-diff-atomic-inline-changed-border-color': borderAccent(colors.insertColor)
|
|
902
|
+
});
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
/** Deleted node wrapper variables, all three states. Read by the smartCardStyles selectors. */
|
|
906
|
+
function buildDeletedNodeCSSVariables(colors) {
|
|
907
|
+
return (0, _lazyNodeView.convertToInlineCss)({
|
|
908
|
+
'--diff-delete-color': borderAccent(colors.deleteColor),
|
|
909
|
+
'--diff-delete-color-default': borderAccent(colors.deleteActiveColor),
|
|
910
|
+
'--diff-delete-color-new': bgSubtlest(colors.deleteColor),
|
|
911
|
+
'--diff-delete-color-active': bgSubtlerPressed(colors.deleteActiveColor),
|
|
912
|
+
'--diff-delete-text-decoration-color': borderAccent(colors.deleteColor)
|
|
913
|
+
});
|
|
678
914
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.traditionalScheme = exports.standardScheme = void 0;
|
|
6
|
+
exports.traditionalScheme = exports.standardScheme = exports.colorSchemeRegistry = void 0;
|
|
7
7
|
/** Green insertions, red deletions. */
|
|
8
8
|
var traditionalScheme = exports.traditionalScheme = {
|
|
9
9
|
insertColor: 'green',
|
|
@@ -12,13 +12,18 @@ var traditionalScheme = exports.traditionalScheme = {
|
|
|
12
12
|
deleteColor: 'red',
|
|
13
13
|
deleteActiveColor: 'red',
|
|
14
14
|
deletedCellColor: 'gray',
|
|
15
|
+
deletedRowTreatment: 'strikeColor',
|
|
15
16
|
insertedCellOpacity: 0.5,
|
|
16
17
|
deletedQuoteNodeShape: 'ring',
|
|
17
18
|
deletedCellBorderProminence: 'subtle',
|
|
18
|
-
deletedRowTreatment: 'strikeColor',
|
|
19
19
|
deletedBlockOutlineActiveEmphasis: 'background',
|
|
20
20
|
addedCellOverlayZIndex: 1,
|
|
21
|
-
roundedAddedCellOverlayInheritsBorder: true
|
|
21
|
+
roundedAddedCellOverlayInheritsBorder: true,
|
|
22
|
+
insertedInlineTreatment: 'underline',
|
|
23
|
+
deletedInlineTreatment: 'strikethrough',
|
|
24
|
+
insertedNodeEmphasis: 'stateful',
|
|
25
|
+
deletedNodeEmphasis: 'stateful',
|
|
26
|
+
deletedQuoteNodeActiveTone: 'backgroundPressed'
|
|
22
27
|
};
|
|
23
28
|
|
|
24
29
|
/** Purple insertions, gray deletions (red on active). */
|
|
@@ -29,11 +34,22 @@ var standardScheme = exports.standardScheme = {
|
|
|
29
34
|
deleteColor: 'gray',
|
|
30
35
|
deleteActiveColor: 'red',
|
|
31
36
|
deletedCellColor: 'gray',
|
|
37
|
+
deletedRowTreatment: 'textTint',
|
|
32
38
|
insertedCellOpacity: 0.2,
|
|
33
39
|
deletedQuoteNodeShape: 'borderLeft',
|
|
34
40
|
deletedCellBorderProminence: 'accent',
|
|
35
|
-
deletedRowTreatment: 'textTint',
|
|
36
41
|
deletedBlockOutlineActiveEmphasis: 'border',
|
|
37
42
|
addedCellOverlayZIndex: 2,
|
|
38
|
-
roundedAddedCellOverlayInheritsBorder: false
|
|
43
|
+
roundedAddedCellOverlayInheritsBorder: false,
|
|
44
|
+
insertedInlineTreatment: 'borderBottom',
|
|
45
|
+
deletedInlineTreatment: 'glyphTint',
|
|
46
|
+
insertedNodeEmphasis: 'static',
|
|
47
|
+
deletedNodeEmphasis: 'static',
|
|
48
|
+
deletedQuoteNodeActiveTone: 'borderAccent'
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
/** Maps the public ColorScheme string to its data object. Adding a scheme = one entry here. */
|
|
52
|
+
var colorSchemeRegistry = exports.colorSchemeRegistry = {
|
|
53
|
+
traditional: traditionalScheme,
|
|
54
|
+
standard: standardScheme
|
|
39
55
|
};
|