@atlaskit/editor-plugin-show-diff 14.2.11 → 14.3.1
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 +14 -0
- package/afm-cc/tsconfig.json +3 -0
- package/afm-products/tsconfig.json +3 -0
- package/dist/cjs/pm-plugins/calculateDiff/simplifySteps.js +3 -3
- package/dist/cjs/pm-plugins/decorations/colorSchemes/attributions.js +68 -17
- package/dist/cjs/pm-plugins/decorations/colorSchemes/factory.js +68 -12
- package/dist/cjs/pm-plugins/decorations/colorSchemes/schemes.js +19 -7
- package/dist/cjs/pm-plugins/decorations/colorSchemes/types.js +16 -1
- package/dist/cjs/pm-plugins/decorations/utils/getAttrChangeRanges.js +3 -3
- package/dist/es2019/pm-plugins/calculateDiff/simplifySteps.js +1 -1
- package/dist/es2019/pm-plugins/decorations/colorSchemes/attributions.js +55 -11
- package/dist/es2019/pm-plugins/decorations/colorSchemes/factory.js +67 -12
- package/dist/es2019/pm-plugins/decorations/colorSchemes/schemes.js +19 -7
- package/dist/es2019/pm-plugins/decorations/colorSchemes/types.js +14 -1
- package/dist/es2019/pm-plugins/decorations/utils/getAttrChangeRanges.js +1 -1
- package/dist/esm/pm-plugins/calculateDiff/simplifySteps.js +1 -1
- package/dist/esm/pm-plugins/decorations/colorSchemes/attributions.js +68 -17
- package/dist/esm/pm-plugins/decorations/colorSchemes/factory.js +69 -12
- package/dist/esm/pm-plugins/decorations/colorSchemes/schemes.js +19 -7
- package/dist/esm/pm-plugins/decorations/colorSchemes/types.js +14 -1
- package/dist/esm/pm-plugins/decorations/utils/getAttrChangeRanges.js +1 -1
- package/dist/types/pm-plugins/decorations/colorSchemes/attributions.d.ts +3 -3
- package/dist/types/pm-plugins/decorations/colorSchemes/factory.d.ts +1 -1
- package/dist/types/pm-plugins/decorations/colorSchemes/schemes.d.ts +1 -1
- package/dist/types/pm-plugins/decorations/colorSchemes/types.d.ts +19 -19
- package/dist/types/pm-plugins/decorations/utils/getAttrChangeRanges.d.ts +1 -1
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-show-diff
|
|
2
2
|
|
|
3
|
+
## 14.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 14.3.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`8093f00408d76`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8093f00408d76) -
|
|
14
|
+
Align attributed diff colours with all 18 editor participant colour slots under
|
|
15
|
+
confluence_ncs_step_diffing_version_history and platform_editor_show_diff_color_scheme_refactor.
|
|
16
|
+
|
|
3
17
|
## 14.2.11
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/afm-cc/tsconfig.json
CHANGED
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.simplifySteps = simplifySteps;
|
|
8
8
|
exports.simplifyStepsWithAttribution = simplifyStepsWithAttribution;
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var
|
|
10
|
+
var _analytics = require("@atlaskit/adf-schema/steps/analytics");
|
|
11
11
|
var _document = require("@atlaskit/editor-common/utils/document");
|
|
12
12
|
var _transform = require("@atlaskit/editor-prosemirror/transform");
|
|
13
13
|
var _attributions = require("../decorations/colorSchemes/attributions");
|
|
@@ -42,7 +42,7 @@ function simplifySteps(steps, originalDoc) {
|
|
|
42
42
|
return stepsToFilter
|
|
43
43
|
// Remove steps that don't affect document structure or content
|
|
44
44
|
.filter(function (step) {
|
|
45
|
-
return !(step instanceof
|
|
45
|
+
return !(step instanceof _analytics.AnalyticsStep);
|
|
46
46
|
})
|
|
47
47
|
// Merge consecutive steps where possible
|
|
48
48
|
.reduce(function (acc, step) {
|
|
@@ -85,7 +85,7 @@ function simplifyStepsWithAttribution(steps, stepAttributions, originalDoc) {
|
|
|
85
85
|
}), originalDoc);
|
|
86
86
|
return stepsToFilter.filter(function (_ref) {
|
|
87
87
|
var step = _ref.step;
|
|
88
|
-
return !(step instanceof
|
|
88
|
+
return !(step instanceof _analytics.AnalyticsStep);
|
|
89
89
|
}).reduce(function (acc, current) {
|
|
90
90
|
var _previous$step$merge, _previous$step$merge2, _previous$step;
|
|
91
91
|
var previous = acc[acc.length - 1];
|
|
@@ -7,21 +7,46 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.isAttributionColoringEnabled = exports.getColorSchemeForChange = exports.getAttributionKey = exports.createAttributionColorMap = exports.areAttributionColorGatesEnabled = void 0;
|
|
8
8
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
9
9
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
10
|
+
var _utils = require("@atlaskit/editor-shared-styles/utils");
|
|
10
11
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
11
12
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
var _types = require("./types");
|
|
14
|
+
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
15
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
16
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
17
|
+
/**
|
|
18
|
+
* Normalise the attribution identity once so a valid lookup key always has a valid participant
|
|
19
|
+
* colour seed. `userId` is primary; `agentId`, or `agentType` as its fallback, separates shared
|
|
20
|
+
* users. The colour seed matches collaboration: the user ID for a human and the agent ID for an
|
|
21
|
+
* agent. The agent-type fallback includes the user so different users' agents do not collapse onto
|
|
22
|
+
* one colour when NCS omits an agent ID.
|
|
23
|
+
*/
|
|
24
|
+
var getAttributionIdentity = function getAttributionIdentity(attribution) {
|
|
16
25
|
var _attribution$userId, _attribution$agentId, _attribution$agentTyp;
|
|
17
26
|
var userId = attribution === null || attribution === void 0 || (_attribution$userId = attribution.userId) === null || _attribution$userId === void 0 ? void 0 : _attribution$userId.trim();
|
|
18
27
|
var agentId = attribution === null || attribution === void 0 || (_attribution$agentId = attribution.agentId) === null || _attribution$agentId === void 0 ? void 0 : _attribution$agentId.trim();
|
|
19
28
|
var agentType = attribution === null || attribution === void 0 || (_attribution$agentTyp = attribution.agentType) === null || _attribution$agentTyp === void 0 ? void 0 : _attribution$agentTyp.trim();
|
|
20
|
-
|
|
29
|
+
var colorSeed;
|
|
30
|
+
if (agentId) {
|
|
31
|
+
colorSeed = agentId;
|
|
32
|
+
} else if (agentType) {
|
|
33
|
+
colorSeed = userId ? "user:".concat(userId, "|agent:type:").concat(agentType) : "agent:type:".concat(agentType);
|
|
34
|
+
} else if (userId) {
|
|
35
|
+
colorSeed = userId;
|
|
36
|
+
} else {
|
|
21
37
|
return undefined;
|
|
22
38
|
}
|
|
23
39
|
var agentIdentity = agentId || (agentType ? "type:".concat(agentType) : '');
|
|
24
|
-
return
|
|
40
|
+
return {
|
|
41
|
+
colorSeed: colorSeed,
|
|
42
|
+
key: "user:".concat(userId !== null && userId !== void 0 ? userId : '', "|agent:").concat(agentIdentity)
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
/** `userId` is primary; `agentId`, or `agentType` as its fallback, separates shared users. */
|
|
47
|
+
var getAttributionKey = exports.getAttributionKey = function getAttributionKey(attribution) {
|
|
48
|
+
var _getAttributionIdenti;
|
|
49
|
+
return (_getAttributionIdenti = getAttributionIdentity(attribution)) === null || _getAttributionIdenti === void 0 ? void 0 : _getAttributionIdenti.key;
|
|
25
50
|
};
|
|
26
51
|
var areAttributionColorGatesEnabled = exports.areAttributionColorGatesEnabled = function areAttributionColorGatesEnabled() {
|
|
27
52
|
return (0, _fg.fg)('confluence_ncs_step_diffing_version_history') && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor');
|
|
@@ -36,12 +61,29 @@ var isAttributionColoringEnabled = exports.isAttributionColoringEnabled = functi
|
|
|
36
61
|
return attributionKeys.size > 1;
|
|
37
62
|
};
|
|
38
63
|
var createAttributionColorMap = exports.createAttributionColorMap = function createAttributionColorMap(stepAttributions) {
|
|
39
|
-
var
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
64
|
+
var colors = new Map();
|
|
65
|
+
var _iterator = _createForOfIteratorHelper(stepAttributions),
|
|
66
|
+
_step;
|
|
67
|
+
try {
|
|
68
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
69
|
+
var attribution = _step.value;
|
|
70
|
+
var identity = getAttributionIdentity(attribution);
|
|
71
|
+
if (!identity || colors.has(identity.key)) {
|
|
72
|
+
continue;
|
|
73
|
+
}
|
|
74
|
+
var _getParticipantColor = (0, _utils.getParticipantColor)(identity.colorSeed),
|
|
75
|
+
index = _getParticipantColor.index;
|
|
76
|
+
var participantColorScheme = _types.PARTICIPANT_COLOR_SCHEMES[index];
|
|
77
|
+
if (participantColorScheme) {
|
|
78
|
+
colors.set(identity.key, participantColorScheme);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
} catch (err) {
|
|
82
|
+
_iterator.e(err);
|
|
83
|
+
} finally {
|
|
84
|
+
_iterator.f();
|
|
85
|
+
}
|
|
86
|
+
return colors;
|
|
45
87
|
};
|
|
46
88
|
var getLatestAttribution = function getLatestAttribution(changes) {
|
|
47
89
|
var data = changes.flatMap(function (change) {
|
|
@@ -63,10 +105,19 @@ var changesOverlap = function changesOverlap(change, attributedChange) {
|
|
|
63
105
|
var deletedOverlap = change.deleted.length > 0 && attributedChange.deleted.length > 0 && rangesOverlap(change.fromA, change.toA, attributedChange.fromA, attributedChange.toA);
|
|
64
106
|
return insertedOverlap || deletedOverlap;
|
|
65
107
|
};
|
|
108
|
+
var getParticipantColorSchemeForChanges = function getParticipantColorSchemeForChanges(changes, attributionColors) {
|
|
109
|
+
var key = getAttributionKey(getLatestAttribution(changes));
|
|
110
|
+
return key ? attributionColors.get(key) : undefined;
|
|
111
|
+
};
|
|
66
112
|
var getColorSchemeForChange = exports.getColorSchemeForChange = function getColorSchemeForChange(change, attributedChanges, attributionColors, fallback) {
|
|
67
|
-
var
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
113
|
+
var _ref, _getParticipantColorS;
|
|
114
|
+
return (// Inline and step changes retain their own attribution spans. Resolve those first so a broader
|
|
115
|
+
// change is not recoloured by a later contributor whose nested range happens to overlap it.
|
|
116
|
+
(_ref = (_getParticipantColorS = getParticipantColorSchemeForChanges([change], attributionColors)) !== null && _getParticipantColorS !== void 0 ? _getParticipantColorS :
|
|
117
|
+
// Grouping and smart classification can produce changes without direct attribution data. For
|
|
118
|
+
// those transformed changes, retain the overlap-based lookup as a fallback.
|
|
119
|
+
getParticipantColorSchemeForChanges(attributedChanges.filter(function (attributedChange) {
|
|
120
|
+
return changesOverlap(change, attributedChange);
|
|
121
|
+
}), attributionColors)) !== null && _ref !== void 0 ? _ref : fallback
|
|
122
|
+
);
|
|
72
123
|
};
|
|
@@ -67,6 +67,8 @@ exports.buildInsertedBlockNodeStyle = buildInsertedBlockNodeStyle;
|
|
|
67
67
|
exports.buildInsertedInlineStyle = buildInsertedInlineStyle;
|
|
68
68
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
69
69
|
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
70
|
+
var _constants = require("@atlaskit/editor-shared-styles/constants");
|
|
71
|
+
var _types = require("./types");
|
|
70
72
|
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; }
|
|
71
73
|
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) { (0, _defineProperty2.default)(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; }
|
|
72
74
|
// token() is a build-time transform needing static literals, so pre-compute every colour's
|
|
@@ -81,7 +83,8 @@ var bgSubtlestMap = {
|
|
|
81
83
|
orange: "var(--ds-background-accent-orange-subtlest, #FFF5DB)",
|
|
82
84
|
yellow: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
|
|
83
85
|
magenta: "var(--ds-background-accent-magenta-subtlest, #FFECF8)",
|
|
84
|
-
gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)"
|
|
86
|
+
gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
|
|
87
|
+
lime: "var(--ds-background-accent-lime-subtlest, #EFFFD6)"
|
|
85
88
|
};
|
|
86
89
|
var bgSubtlestPressedMap = {
|
|
87
90
|
green: "var(--ds-background-accent-green-subtlest-pressed, #97EDC9)",
|
|
@@ -92,7 +95,8 @@ var bgSubtlestPressedMap = {
|
|
|
92
95
|
orange: "var(--ds-background-accent-orange-subtlest-pressed, #FBD779)",
|
|
93
96
|
yellow: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)",
|
|
94
97
|
magenta: "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)",
|
|
95
|
-
gray: "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)"
|
|
98
|
+
gray: "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)",
|
|
99
|
+
lime: "var(--ds-background-accent-lime-subtlest-pressed, #BDE97C)"
|
|
96
100
|
};
|
|
97
101
|
var bgSubtlerMap = {
|
|
98
102
|
green: "var(--ds-background-accent-green-subtler, #BAF3DB)",
|
|
@@ -103,7 +107,8 @@ var bgSubtlerMap = {
|
|
|
103
107
|
orange: "var(--ds-background-accent-orange-subtler, #FCE4A6)",
|
|
104
108
|
yellow: "var(--ds-background-accent-yellow-subtler, #F5E989)",
|
|
105
109
|
magenta: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
|
|
106
|
-
gray: "var(--ds-background-accent-gray-subtler, #DDDEE1)"
|
|
110
|
+
gray: "var(--ds-background-accent-gray-subtler, #DDDEE1)",
|
|
111
|
+
lime: "var(--ds-background-accent-lime-subtler, #D3F1A7)"
|
|
107
112
|
};
|
|
108
113
|
var bgSubtlerPressedMap = {
|
|
109
114
|
green: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
|
|
@@ -114,7 +119,8 @@ var bgSubtlerPressedMap = {
|
|
|
114
119
|
orange: "var(--ds-background-accent-orange-subtler-pressed, #FBC828)",
|
|
115
120
|
yellow: "var(--ds-background-accent-yellow-subtler-pressed, #EED12B)",
|
|
116
121
|
magenta: "var(--ds-background-accent-magenta-subtler-pressed, #F797D2)",
|
|
117
|
-
gray: "var(--ds-background-accent-gray-subtler-pressed, #8C8F97)"
|
|
122
|
+
gray: "var(--ds-background-accent-gray-subtler-pressed, #8C8F97)",
|
|
123
|
+
lime: "var(--ds-background-accent-lime-subtler-pressed, #B3DF72)"
|
|
118
124
|
};
|
|
119
125
|
var borderAccentMap = {
|
|
120
126
|
green: "var(--ds-border-accent-green, #22A06B)",
|
|
@@ -125,7 +131,8 @@ var borderAccentMap = {
|
|
|
125
131
|
orange: "var(--ds-border-accent-orange, #E06C00)",
|
|
126
132
|
yellow: "var(--ds-border-accent-yellow, #B38600)",
|
|
127
133
|
magenta: "var(--ds-border-accent-magenta, #CD519D)",
|
|
128
|
-
gray: "var(--ds-border-accent-gray, #7D818A)"
|
|
134
|
+
gray: "var(--ds-border-accent-gray, #7D818A)",
|
|
135
|
+
lime: "var(--ds-border-accent-lime, #6A9A23)"
|
|
129
136
|
};
|
|
130
137
|
var textAccentMap = {
|
|
131
138
|
green: "var(--ds-text-accent-green, #216E4E)",
|
|
@@ -136,25 +143,74 @@ var textAccentMap = {
|
|
|
136
143
|
orange: "var(--ds-text-accent-orange, #9E4C00)",
|
|
137
144
|
yellow: "var(--ds-text-accent-yellow, #7F5F01)",
|
|
138
145
|
magenta: "var(--ds-text-accent-magenta, #943D73)",
|
|
139
|
-
gray: "var(--ds-text-accent-gray, #505258)"
|
|
146
|
+
gray: "var(--ds-text-accent-gray, #505258)",
|
|
147
|
+
lime: "var(--ds-text-accent-lime, #4C6B1F)"
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
/** Pressed counterpart of each participant's diff-safe SVG background tint. */
|
|
151
|
+
var participantPressedBackgroundMap = {
|
|
152
|
+
'red-bolder': bgSubtlerPressedMap.red,
|
|
153
|
+
'blue-bolder': bgSubtlerPressedMap.blue,
|
|
154
|
+
'green-bolder': bgSubtlerPressedMap.green,
|
|
155
|
+
'yellow-bolder': bgSubtlerPressedMap.yellow,
|
|
156
|
+
'purple-bolder': bgSubtlerPressedMap.purple,
|
|
157
|
+
'magenta-bolder': bgSubtlerPressedMap.magenta,
|
|
158
|
+
'teal-bolder': bgSubtlerPressedMap.teal,
|
|
159
|
+
'orange-bolder': bgSubtlerPressedMap.orange,
|
|
160
|
+
'lime-bolder': bgSubtlerPressedMap.lime,
|
|
161
|
+
'gray-bolder': bgSubtlerPressedMap.gray,
|
|
162
|
+
'blue-subtle': bgSubtlestPressedMap.blue,
|
|
163
|
+
'red-subtle': bgSubtlestPressedMap.red,
|
|
164
|
+
'orange-subtle': bgSubtlestPressedMap.orange,
|
|
165
|
+
'yellow-subtle': bgSubtlestPressedMap.yellow,
|
|
166
|
+
'green-subtle': bgSubtlestPressedMap.green,
|
|
167
|
+
'teal-subtle': bgSubtlestPressedMap.teal,
|
|
168
|
+
'purple-subtle': bgSubtlestPressedMap.purple,
|
|
169
|
+
'magenta-subtle': bgSubtlestPressedMap.magenta
|
|
170
|
+
};
|
|
171
|
+
/**
|
|
172
|
+
* Telepointers can put inverse text directly on their bolder colour. Diff colours sit behind
|
|
173
|
+
* arbitrary document content, so use the participant SVG tint and its matching pressed token for
|
|
174
|
+
* diff backgrounds. Borders and rings use the exact participant colour, preserving all 18
|
|
175
|
+
* bolder/subtle slots while keeping every value in the shared ADS participant palette.
|
|
176
|
+
*/
|
|
177
|
+
var participantColorTokenSets = Object.fromEntries(_types.PARTICIPANT_COLOR_SCHEMES.map(function (scheme, index) {
|
|
178
|
+
var participantColor = _constants.participantColors[index];
|
|
179
|
+
if (!participantColor) {
|
|
180
|
+
throw new Error("Missing shared participant colour for show-diff slot ".concat(index));
|
|
181
|
+
}
|
|
182
|
+
return [scheme, {
|
|
183
|
+
backgroundSubtlest: participantColor.svgBackgroundColor,
|
|
184
|
+
backgroundSubtlestPressed: participantPressedBackgroundMap[scheme],
|
|
185
|
+
backgroundSubtler: participantColor.svgBackgroundColor,
|
|
186
|
+
backgroundSubtlerPressed: participantPressedBackgroundMap[scheme],
|
|
187
|
+
borderAccent: participantColor.backgroundColor,
|
|
188
|
+
// The first ten bolder colours are safe as accents on the editor surface. The
|
|
189
|
+
// remaining subtle colours use their paired dark participant text colour.
|
|
190
|
+
textAccent: index < 10 ? participantColor.backgroundColor : participantColor.textColor
|
|
191
|
+
}];
|
|
192
|
+
}));
|
|
193
|
+
var participantColorSchemeSet = new Set(_types.PARTICIPANT_COLOR_SCHEMES);
|
|
194
|
+
var isParticipantColorScheme = function isParticipantColorScheme(color) {
|
|
195
|
+
return participantColorSchemeSet.has(color);
|
|
140
196
|
};
|
|
141
197
|
function bgSubtlest(color) {
|
|
142
|
-
return bgSubtlestMap[color];
|
|
198
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtlest : bgSubtlestMap[color];
|
|
143
199
|
}
|
|
144
200
|
function bgSubtlestPressed(color) {
|
|
145
|
-
return bgSubtlestPressedMap[color];
|
|
201
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtlestPressed : bgSubtlestPressedMap[color];
|
|
146
202
|
}
|
|
147
203
|
function bgSubtler(color) {
|
|
148
|
-
return bgSubtlerMap[color];
|
|
204
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtler : bgSubtlerMap[color];
|
|
149
205
|
}
|
|
150
206
|
function bgSubtlerPressed(color) {
|
|
151
|
-
return bgSubtlerPressedMap[color];
|
|
207
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtlerPressed : bgSubtlerPressedMap[color];
|
|
152
208
|
}
|
|
153
209
|
function borderAccent(color) {
|
|
154
|
-
return borderAccentMap[color];
|
|
210
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].borderAccent : borderAccentMap[color];
|
|
155
211
|
}
|
|
156
212
|
function textAccent(color) {
|
|
157
|
-
return textAccentMap[color];
|
|
213
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].textAccent : textAccentMap[color];
|
|
158
214
|
}
|
|
159
215
|
|
|
160
216
|
/** Ring colour for an active (scroll-target) deleted block outline. */
|
|
@@ -72,14 +72,26 @@ var createAttributionScheme = function createAttributionScheme(color) {
|
|
|
72
72
|
});
|
|
73
73
|
};
|
|
74
74
|
|
|
75
|
-
/** Maps public schemes and attribution-only
|
|
75
|
+
/** Maps public schemes and attribution-only participant slots to their data objects. */
|
|
76
76
|
var colorSchemeRegistry = exports.colorSchemeRegistry = {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
purple: createAttributionScheme('purple'),
|
|
82
|
-
|
|
77
|
+
'red-bolder': createAttributionScheme('red-bolder'),
|
|
78
|
+
'blue-bolder': createAttributionScheme('blue-bolder'),
|
|
79
|
+
'green-bolder': createAttributionScheme('green-bolder'),
|
|
80
|
+
'yellow-bolder': createAttributionScheme('yellow-bolder'),
|
|
81
|
+
'purple-bolder': createAttributionScheme('purple-bolder'),
|
|
82
|
+
'magenta-bolder': createAttributionScheme('magenta-bolder'),
|
|
83
|
+
'teal-bolder': createAttributionScheme('teal-bolder'),
|
|
84
|
+
'orange-bolder': createAttributionScheme('orange-bolder'),
|
|
85
|
+
'lime-bolder': createAttributionScheme('lime-bolder'),
|
|
86
|
+
'gray-bolder': createAttributionScheme('gray-bolder'),
|
|
87
|
+
'blue-subtle': createAttributionScheme('blue-subtle'),
|
|
88
|
+
'red-subtle': createAttributionScheme('red-subtle'),
|
|
89
|
+
'orange-subtle': createAttributionScheme('orange-subtle'),
|
|
90
|
+
'yellow-subtle': createAttributionScheme('yellow-subtle'),
|
|
91
|
+
'green-subtle': createAttributionScheme('green-subtle'),
|
|
92
|
+
'teal-subtle': createAttributionScheme('teal-subtle'),
|
|
93
|
+
'purple-subtle': createAttributionScheme('purple-subtle'),
|
|
94
|
+
'magenta-subtle': createAttributionScheme('magenta-subtle'),
|
|
83
95
|
traditional: traditionalScheme,
|
|
84
96
|
standard: standardScheme
|
|
85
97
|
};
|
|
@@ -2,4 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
|
-
});
|
|
5
|
+
});
|
|
6
|
+
exports.PARTICIPANT_COLOR_SCHEMES = void 0;
|
|
7
|
+
/** Attribution-only participant slots selected by the plugin, never by consumers. */
|
|
8
|
+
var PARTICIPANT_COLOR_SCHEMES = exports.PARTICIPANT_COLOR_SCHEMES = ['red-bolder', 'blue-bolder', 'green-bolder', 'yellow-bolder', 'purple-bolder', 'magenta-bolder', 'teal-bolder', 'orange-bolder', 'lime-bolder', 'gray-bolder', 'blue-subtle', 'red-subtle', 'orange-subtle', 'yellow-subtle', 'green-subtle', 'teal-subtle', 'purple-subtle', 'magenta-subtle'];
|
|
9
|
+
|
|
10
|
+
/** ADS accent hues used by the public and participant colour schemes. */
|
|
11
|
+
|
|
12
|
+
/** A public scheme or an attribution participant slot resolved internally for one change. */
|
|
13
|
+
|
|
14
|
+
/** A colour value that the factory expands into a complete set of diff-safe ADS tokens. */
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* A show-diff colour scheme. Colour fields are ADS hues or shared participant slots that
|
|
18
|
+
* `factory.ts` expands into token paths; the rest encode structural differences no colour can
|
|
19
|
+
* express. Ring widths, padding, radius and pointer-events are fixed in the factory, not per scheme.
|
|
20
|
+
*/
|
|
@@ -8,7 +8,7 @@ exports.stepIsValidAttrChange = exports.isInlineAttrChangeNodeName = exports.get
|
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
|
|
10
10
|
var _omit = _interopRequireDefault(require("lodash/omit"));
|
|
11
|
-
var
|
|
11
|
+
var _setAttrs = require("@atlaskit/adf-schema/steps/set-attrs");
|
|
12
12
|
var _deprecatedPlatformFeatureExperiments = require("@atlaskit/editor-common/deprecated-platform-feature-experiments");
|
|
13
13
|
var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
|
|
14
14
|
var _transform = require("@atlaskit/editor-prosemirror/transform");
|
|
@@ -72,7 +72,7 @@ var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRa
|
|
|
72
72
|
finalPos = attrStepContext.finalPos,
|
|
73
73
|
originalPos = attrStepContext.originalPos,
|
|
74
74
|
step = attrStepContext.step;
|
|
75
|
-
if (!(step instanceof _transform.AttrStep) && !(step instanceof
|
|
75
|
+
if (!(step instanceof _transform.AttrStep) && !(step instanceof _setAttrs.SetAttrsStep)) {
|
|
76
76
|
return undefined;
|
|
77
77
|
}
|
|
78
78
|
var stepAttrs = getStepAttrs(step);
|
|
@@ -203,7 +203,7 @@ var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRa
|
|
|
203
203
|
*/
|
|
204
204
|
var stepIsValidAttrChange = exports.stepIsValidAttrChange = function stepIsValidAttrChange(step, beforeDoc, afterDoc) {
|
|
205
205
|
try {
|
|
206
|
-
if (step instanceof _transform.AttrStep || step instanceof
|
|
206
|
+
if (step instanceof _transform.AttrStep || step instanceof _setAttrs.SetAttrsStep) {
|
|
207
207
|
var attrStepAfter = afterDoc.nodeAt(step.pos);
|
|
208
208
|
var attrStepBefore = beforeDoc.nodeAt(step.pos);
|
|
209
209
|
// The change affected the document
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
|
|
1
|
+
import { AnalyticsStep } from '@atlaskit/adf-schema/steps/analytics';
|
|
2
2
|
import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
|
|
3
3
|
import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
|
|
4
4
|
import { getAttributionKey } from '../decorations/colorSchemes/attributions';
|
|
@@ -1,18 +1,40 @@
|
|
|
1
|
+
import { getParticipantColor } from '@atlaskit/editor-shared-styles/utils';
|
|
1
2
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
2
3
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
import { PARTICIPANT_COLOR_SCHEMES } from './types';
|
|
5
|
+
/**
|
|
6
|
+
* Normalise the attribution identity once so a valid lookup key always has a valid participant
|
|
7
|
+
* colour seed. `userId` is primary; `agentId`, or `agentType` as its fallback, separates shared
|
|
8
|
+
* users. The colour seed matches collaboration: the user ID for a human and the agent ID for an
|
|
9
|
+
* agent. The agent-type fallback includes the user so different users' agents do not collapse onto
|
|
10
|
+
* one colour when NCS omits an agent ID.
|
|
11
|
+
*/
|
|
12
|
+
const getAttributionIdentity = attribution => {
|
|
7
13
|
var _attribution$userId, _attribution$agentId, _attribution$agentTyp;
|
|
8
14
|
const userId = attribution === null || attribution === void 0 ? void 0 : (_attribution$userId = attribution.userId) === null || _attribution$userId === void 0 ? void 0 : _attribution$userId.trim();
|
|
9
15
|
const agentId = attribution === null || attribution === void 0 ? void 0 : (_attribution$agentId = attribution.agentId) === null || _attribution$agentId === void 0 ? void 0 : _attribution$agentId.trim();
|
|
10
16
|
const agentType = attribution === null || attribution === void 0 ? void 0 : (_attribution$agentTyp = attribution.agentType) === null || _attribution$agentTyp === void 0 ? void 0 : _attribution$agentTyp.trim();
|
|
11
|
-
|
|
17
|
+
let colorSeed;
|
|
18
|
+
if (agentId) {
|
|
19
|
+
colorSeed = agentId;
|
|
20
|
+
} else if (agentType) {
|
|
21
|
+
colorSeed = userId ? `user:${userId}|agent:type:${agentType}` : `agent:type:${agentType}`;
|
|
22
|
+
} else if (userId) {
|
|
23
|
+
colorSeed = userId;
|
|
24
|
+
} else {
|
|
12
25
|
return undefined;
|
|
13
26
|
}
|
|
14
27
|
const agentIdentity = agentId || (agentType ? `type:${agentType}` : '');
|
|
15
|
-
return
|
|
28
|
+
return {
|
|
29
|
+
colorSeed,
|
|
30
|
+
key: `user:${userId !== null && userId !== void 0 ? userId : ''}|agent:${agentIdentity}`
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
/** `userId` is primary; `agentId`, or `agentType` as its fallback, separates shared users. */
|
|
35
|
+
export const getAttributionKey = attribution => {
|
|
36
|
+
var _getAttributionIdenti;
|
|
37
|
+
return (_getAttributionIdenti = getAttributionIdentity(attribution)) === null || _getAttributionIdenti === void 0 ? void 0 : _getAttributionIdenti.key;
|
|
16
38
|
};
|
|
17
39
|
export const areAttributionColorGatesEnabled = () => fg('confluence_ncs_step_diffing_version_history') && isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor');
|
|
18
40
|
export const isAttributionColoringEnabled = stepAttributions => {
|
|
@@ -23,8 +45,21 @@ export const isAttributionColoringEnabled = stepAttributions => {
|
|
|
23
45
|
return attributionKeys.size > 1;
|
|
24
46
|
};
|
|
25
47
|
export const createAttributionColorMap = stepAttributions => {
|
|
26
|
-
const
|
|
27
|
-
|
|
48
|
+
const colors = new Map();
|
|
49
|
+
for (const attribution of stepAttributions) {
|
|
50
|
+
const identity = getAttributionIdentity(attribution);
|
|
51
|
+
if (!identity || colors.has(identity.key)) {
|
|
52
|
+
continue;
|
|
53
|
+
}
|
|
54
|
+
const {
|
|
55
|
+
index
|
|
56
|
+
} = getParticipantColor(identity.colorSeed);
|
|
57
|
+
const participantColorScheme = PARTICIPANT_COLOR_SCHEMES[index];
|
|
58
|
+
if (participantColorScheme) {
|
|
59
|
+
colors.set(identity.key, participantColorScheme);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
return colors;
|
|
28
63
|
};
|
|
29
64
|
const getLatestAttribution = changes => {
|
|
30
65
|
const data = changes.flatMap(change => [...change.deleted, ...change.inserted]).map(span => span.data).filter(value => typeof value === 'object' && value !== null && 'stepIndex' in value && typeof value.stepIndex === 'number');
|
|
@@ -36,8 +71,17 @@ const changesOverlap = (change, attributedChange) => {
|
|
|
36
71
|
const deletedOverlap = change.deleted.length > 0 && attributedChange.deleted.length > 0 && rangesOverlap(change.fromA, change.toA, attributedChange.fromA, attributedChange.toA);
|
|
37
72
|
return insertedOverlap || deletedOverlap;
|
|
38
73
|
};
|
|
74
|
+
const getParticipantColorSchemeForChanges = (changes, attributionColors) => {
|
|
75
|
+
const key = getAttributionKey(getLatestAttribution(changes));
|
|
76
|
+
return key ? attributionColors.get(key) : undefined;
|
|
77
|
+
};
|
|
39
78
|
export const getColorSchemeForChange = (change, attributedChanges, attributionColors, fallback) => {
|
|
40
|
-
var
|
|
41
|
-
|
|
42
|
-
|
|
79
|
+
var _ref, _getParticipantColorS;
|
|
80
|
+
return (// Inline and step changes retain their own attribution spans. Resolve those first so a broader
|
|
81
|
+
// change is not recoloured by a later contributor whose nested range happens to overlap it.
|
|
82
|
+
(_ref = (_getParticipantColorS = getParticipantColorSchemeForChanges([change], attributionColors)) !== null && _getParticipantColorS !== void 0 ? _getParticipantColorS :
|
|
83
|
+
// Grouping and smart classification can produce changes without direct attribution data. For
|
|
84
|
+
// those transformed changes, retain the overlap-based lookup as a fallback.
|
|
85
|
+
getParticipantColorSchemeForChanges(attributedChanges.filter(attributedChange => changesOverlap(change, attributedChange)), attributionColors)) !== null && _ref !== void 0 ? _ref : fallback
|
|
86
|
+
);
|
|
43
87
|
};
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
2
|
+
import { participantColors } from '@atlaskit/editor-shared-styles/constants';
|
|
3
|
+
import { PARTICIPANT_COLOR_SCHEMES } from './types';
|
|
4
|
+
|
|
2
5
|
// token() is a build-time transform needing static literals, so pre-compute every colour's
|
|
3
6
|
// tokens here and index by name at runtime.
|
|
4
7
|
|
|
@@ -11,7 +14,8 @@ const bgSubtlestMap = {
|
|
|
11
14
|
orange: "var(--ds-background-accent-orange-subtlest, #FFF5DB)",
|
|
12
15
|
yellow: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
|
|
13
16
|
magenta: "var(--ds-background-accent-magenta-subtlest, #FFECF8)",
|
|
14
|
-
gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)"
|
|
17
|
+
gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
|
|
18
|
+
lime: "var(--ds-background-accent-lime-subtlest, #EFFFD6)"
|
|
15
19
|
};
|
|
16
20
|
const bgSubtlestPressedMap = {
|
|
17
21
|
green: "var(--ds-background-accent-green-subtlest-pressed, #97EDC9)",
|
|
@@ -22,7 +26,8 @@ const bgSubtlestPressedMap = {
|
|
|
22
26
|
orange: "var(--ds-background-accent-orange-subtlest-pressed, #FBD779)",
|
|
23
27
|
yellow: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)",
|
|
24
28
|
magenta: "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)",
|
|
25
|
-
gray: "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)"
|
|
29
|
+
gray: "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)",
|
|
30
|
+
lime: "var(--ds-background-accent-lime-subtlest-pressed, #BDE97C)"
|
|
26
31
|
};
|
|
27
32
|
const bgSubtlerMap = {
|
|
28
33
|
green: "var(--ds-background-accent-green-subtler, #BAF3DB)",
|
|
@@ -33,7 +38,8 @@ const bgSubtlerMap = {
|
|
|
33
38
|
orange: "var(--ds-background-accent-orange-subtler, #FCE4A6)",
|
|
34
39
|
yellow: "var(--ds-background-accent-yellow-subtler, #F5E989)",
|
|
35
40
|
magenta: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
|
|
36
|
-
gray: "var(--ds-background-accent-gray-subtler, #DDDEE1)"
|
|
41
|
+
gray: "var(--ds-background-accent-gray-subtler, #DDDEE1)",
|
|
42
|
+
lime: "var(--ds-background-accent-lime-subtler, #D3F1A7)"
|
|
37
43
|
};
|
|
38
44
|
const bgSubtlerPressedMap = {
|
|
39
45
|
green: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
|
|
@@ -44,7 +50,8 @@ const bgSubtlerPressedMap = {
|
|
|
44
50
|
orange: "var(--ds-background-accent-orange-subtler-pressed, #FBC828)",
|
|
45
51
|
yellow: "var(--ds-background-accent-yellow-subtler-pressed, #EED12B)",
|
|
46
52
|
magenta: "var(--ds-background-accent-magenta-subtler-pressed, #F797D2)",
|
|
47
|
-
gray: "var(--ds-background-accent-gray-subtler-pressed, #8C8F97)"
|
|
53
|
+
gray: "var(--ds-background-accent-gray-subtler-pressed, #8C8F97)",
|
|
54
|
+
lime: "var(--ds-background-accent-lime-subtler-pressed, #B3DF72)"
|
|
48
55
|
};
|
|
49
56
|
const borderAccentMap = {
|
|
50
57
|
green: "var(--ds-border-accent-green, #22A06B)",
|
|
@@ -55,7 +62,8 @@ const borderAccentMap = {
|
|
|
55
62
|
orange: "var(--ds-border-accent-orange, #E06C00)",
|
|
56
63
|
yellow: "var(--ds-border-accent-yellow, #B38600)",
|
|
57
64
|
magenta: "var(--ds-border-accent-magenta, #CD519D)",
|
|
58
|
-
gray: "var(--ds-border-accent-gray, #7D818A)"
|
|
65
|
+
gray: "var(--ds-border-accent-gray, #7D818A)",
|
|
66
|
+
lime: "var(--ds-border-accent-lime, #6A9A23)"
|
|
59
67
|
};
|
|
60
68
|
const textAccentMap = {
|
|
61
69
|
green: "var(--ds-text-accent-green, #216E4E)",
|
|
@@ -66,25 +74,72 @@ const textAccentMap = {
|
|
|
66
74
|
orange: "var(--ds-text-accent-orange, #9E4C00)",
|
|
67
75
|
yellow: "var(--ds-text-accent-yellow, #7F5F01)",
|
|
68
76
|
magenta: "var(--ds-text-accent-magenta, #943D73)",
|
|
69
|
-
gray: "var(--ds-text-accent-gray, #505258)"
|
|
77
|
+
gray: "var(--ds-text-accent-gray, #505258)",
|
|
78
|
+
lime: "var(--ds-text-accent-lime, #4C6B1F)"
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
/** Pressed counterpart of each participant's diff-safe SVG background tint. */
|
|
82
|
+
const participantPressedBackgroundMap = {
|
|
83
|
+
'red-bolder': bgSubtlerPressedMap.red,
|
|
84
|
+
'blue-bolder': bgSubtlerPressedMap.blue,
|
|
85
|
+
'green-bolder': bgSubtlerPressedMap.green,
|
|
86
|
+
'yellow-bolder': bgSubtlerPressedMap.yellow,
|
|
87
|
+
'purple-bolder': bgSubtlerPressedMap.purple,
|
|
88
|
+
'magenta-bolder': bgSubtlerPressedMap.magenta,
|
|
89
|
+
'teal-bolder': bgSubtlerPressedMap.teal,
|
|
90
|
+
'orange-bolder': bgSubtlerPressedMap.orange,
|
|
91
|
+
'lime-bolder': bgSubtlerPressedMap.lime,
|
|
92
|
+
'gray-bolder': bgSubtlerPressedMap.gray,
|
|
93
|
+
'blue-subtle': bgSubtlestPressedMap.blue,
|
|
94
|
+
'red-subtle': bgSubtlestPressedMap.red,
|
|
95
|
+
'orange-subtle': bgSubtlestPressedMap.orange,
|
|
96
|
+
'yellow-subtle': bgSubtlestPressedMap.yellow,
|
|
97
|
+
'green-subtle': bgSubtlestPressedMap.green,
|
|
98
|
+
'teal-subtle': bgSubtlestPressedMap.teal,
|
|
99
|
+
'purple-subtle': bgSubtlestPressedMap.purple,
|
|
100
|
+
'magenta-subtle': bgSubtlestPressedMap.magenta
|
|
70
101
|
};
|
|
102
|
+
/**
|
|
103
|
+
* Telepointers can put inverse text directly on their bolder colour. Diff colours sit behind
|
|
104
|
+
* arbitrary document content, so use the participant SVG tint and its matching pressed token for
|
|
105
|
+
* diff backgrounds. Borders and rings use the exact participant colour, preserving all 18
|
|
106
|
+
* bolder/subtle slots while keeping every value in the shared ADS participant palette.
|
|
107
|
+
*/
|
|
108
|
+
const participantColorTokenSets = Object.fromEntries(PARTICIPANT_COLOR_SCHEMES.map((scheme, index) => {
|
|
109
|
+
const participantColor = participantColors[index];
|
|
110
|
+
if (!participantColor) {
|
|
111
|
+
throw new Error(`Missing shared participant colour for show-diff slot ${index}`);
|
|
112
|
+
}
|
|
113
|
+
return [scheme, {
|
|
114
|
+
backgroundSubtlest: participantColor.svgBackgroundColor,
|
|
115
|
+
backgroundSubtlestPressed: participantPressedBackgroundMap[scheme],
|
|
116
|
+
backgroundSubtler: participantColor.svgBackgroundColor,
|
|
117
|
+
backgroundSubtlerPressed: participantPressedBackgroundMap[scheme],
|
|
118
|
+
borderAccent: participantColor.backgroundColor,
|
|
119
|
+
// The first ten bolder colours are safe as accents on the editor surface. The
|
|
120
|
+
// remaining subtle colours use their paired dark participant text colour.
|
|
121
|
+
textAccent: index < 10 ? participantColor.backgroundColor : participantColor.textColor
|
|
122
|
+
}];
|
|
123
|
+
}));
|
|
124
|
+
const participantColorSchemeSet = new Set(PARTICIPANT_COLOR_SCHEMES);
|
|
125
|
+
const isParticipantColorScheme = color => participantColorSchemeSet.has(color);
|
|
71
126
|
function bgSubtlest(color) {
|
|
72
|
-
return bgSubtlestMap[color];
|
|
127
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtlest : bgSubtlestMap[color];
|
|
73
128
|
}
|
|
74
129
|
function bgSubtlestPressed(color) {
|
|
75
|
-
return bgSubtlestPressedMap[color];
|
|
130
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtlestPressed : bgSubtlestPressedMap[color];
|
|
76
131
|
}
|
|
77
132
|
function bgSubtler(color) {
|
|
78
|
-
return bgSubtlerMap[color];
|
|
133
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtler : bgSubtlerMap[color];
|
|
79
134
|
}
|
|
80
135
|
function bgSubtlerPressed(color) {
|
|
81
|
-
return bgSubtlerPressedMap[color];
|
|
136
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtlerPressed : bgSubtlerPressedMap[color];
|
|
82
137
|
}
|
|
83
138
|
function borderAccent(color) {
|
|
84
|
-
return borderAccentMap[color];
|
|
139
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].borderAccent : borderAccentMap[color];
|
|
85
140
|
}
|
|
86
141
|
function textAccent(color) {
|
|
87
|
-
return textAccentMap[color];
|
|
142
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].textAccent : textAccentMap[color];
|
|
88
143
|
}
|
|
89
144
|
|
|
90
145
|
/** Ring colour for an active (scroll-target) deleted block outline. */
|
|
@@ -61,14 +61,26 @@ const createAttributionScheme = color => ({
|
|
|
61
61
|
deletedCellColor: color
|
|
62
62
|
});
|
|
63
63
|
|
|
64
|
-
/** Maps public schemes and attribution-only
|
|
64
|
+
/** Maps public schemes and attribution-only participant slots to their data objects. */
|
|
65
65
|
export const colorSchemeRegistry = {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
purple: createAttributionScheme('purple'),
|
|
71
|
-
|
|
66
|
+
'red-bolder': createAttributionScheme('red-bolder'),
|
|
67
|
+
'blue-bolder': createAttributionScheme('blue-bolder'),
|
|
68
|
+
'green-bolder': createAttributionScheme('green-bolder'),
|
|
69
|
+
'yellow-bolder': createAttributionScheme('yellow-bolder'),
|
|
70
|
+
'purple-bolder': createAttributionScheme('purple-bolder'),
|
|
71
|
+
'magenta-bolder': createAttributionScheme('magenta-bolder'),
|
|
72
|
+
'teal-bolder': createAttributionScheme('teal-bolder'),
|
|
73
|
+
'orange-bolder': createAttributionScheme('orange-bolder'),
|
|
74
|
+
'lime-bolder': createAttributionScheme('lime-bolder'),
|
|
75
|
+
'gray-bolder': createAttributionScheme('gray-bolder'),
|
|
76
|
+
'blue-subtle': createAttributionScheme('blue-subtle'),
|
|
77
|
+
'red-subtle': createAttributionScheme('red-subtle'),
|
|
78
|
+
'orange-subtle': createAttributionScheme('orange-subtle'),
|
|
79
|
+
'yellow-subtle': createAttributionScheme('yellow-subtle'),
|
|
80
|
+
'green-subtle': createAttributionScheme('green-subtle'),
|
|
81
|
+
'teal-subtle': createAttributionScheme('teal-subtle'),
|
|
82
|
+
'purple-subtle': createAttributionScheme('purple-subtle'),
|
|
83
|
+
'magenta-subtle': createAttributionScheme('magenta-subtle'),
|
|
72
84
|
traditional: traditionalScheme,
|
|
73
85
|
standard: standardScheme
|
|
74
86
|
};
|
|
@@ -1 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
/** Attribution-only participant slots selected by the plugin, never by consumers. */
|
|
2
|
+
export const PARTICIPANT_COLOR_SCHEMES = ['red-bolder', 'blue-bolder', 'green-bolder', 'yellow-bolder', 'purple-bolder', 'magenta-bolder', 'teal-bolder', 'orange-bolder', 'lime-bolder', 'gray-bolder', 'blue-subtle', 'red-subtle', 'orange-subtle', 'yellow-subtle', 'green-subtle', 'teal-subtle', 'purple-subtle', 'magenta-subtle'];
|
|
3
|
+
|
|
4
|
+
/** ADS accent hues used by the public and participant colour schemes. */
|
|
5
|
+
|
|
6
|
+
/** A public scheme or an attribution participant slot resolved internally for one change. */
|
|
7
|
+
|
|
8
|
+
/** A colour value that the factory expands into a complete set of diff-safe ADS tokens. */
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* A show-diff colour scheme. Colour fields are ADS hues or shared participant slots that
|
|
12
|
+
* `factory.ts` expands into token paths; the rest encode structural differences no colour can
|
|
13
|
+
* express. Ring widths, padding, radius and pointer-events are fixed in the factory, not per scheme.
|
|
14
|
+
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import isEqual from 'lodash/isEqual';
|
|
2
2
|
import omit from 'lodash/omit';
|
|
3
|
-
import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
|
|
3
|
+
import { SetAttrsStep } from '@atlaskit/adf-schema/steps/set-attrs';
|
|
4
4
|
import { isExperimentEnabled } from '@atlaskit/editor-common/deprecated-platform-feature-experiments';
|
|
5
5
|
import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
|
|
6
6
|
import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
|
|
@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
|
|
|
4
4
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
5
5
|
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; }
|
|
6
6
|
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; }
|
|
7
|
-
import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
|
|
7
|
+
import { AnalyticsStep } from '@atlaskit/adf-schema/steps/analytics';
|
|
8
8
|
import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
|
|
9
9
|
import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
|
|
10
10
|
import { getAttributionKey } from '../decorations/colorSchemes/attributions';
|
|
@@ -1,20 +1,45 @@
|
|
|
1
1
|
import _typeof from "@babel/runtime/helpers/typeof";
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
|
+
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
4
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
5
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
6
|
+
import { getParticipantColor } from '@atlaskit/editor-shared-styles/utils';
|
|
3
7
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
4
8
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
+
import { PARTICIPANT_COLOR_SCHEMES } from './types';
|
|
10
|
+
/**
|
|
11
|
+
* Normalise the attribution identity once so a valid lookup key always has a valid participant
|
|
12
|
+
* colour seed. `userId` is primary; `agentId`, or `agentType` as its fallback, separates shared
|
|
13
|
+
* users. The colour seed matches collaboration: the user ID for a human and the agent ID for an
|
|
14
|
+
* agent. The agent-type fallback includes the user so different users' agents do not collapse onto
|
|
15
|
+
* one colour when NCS omits an agent ID.
|
|
16
|
+
*/
|
|
17
|
+
var getAttributionIdentity = function getAttributionIdentity(attribution) {
|
|
9
18
|
var _attribution$userId, _attribution$agentId, _attribution$agentTyp;
|
|
10
19
|
var userId = attribution === null || attribution === void 0 || (_attribution$userId = attribution.userId) === null || _attribution$userId === void 0 ? void 0 : _attribution$userId.trim();
|
|
11
20
|
var agentId = attribution === null || attribution === void 0 || (_attribution$agentId = attribution.agentId) === null || _attribution$agentId === void 0 ? void 0 : _attribution$agentId.trim();
|
|
12
21
|
var agentType = attribution === null || attribution === void 0 || (_attribution$agentTyp = attribution.agentType) === null || _attribution$agentTyp === void 0 ? void 0 : _attribution$agentTyp.trim();
|
|
13
|
-
|
|
22
|
+
var colorSeed;
|
|
23
|
+
if (agentId) {
|
|
24
|
+
colorSeed = agentId;
|
|
25
|
+
} else if (agentType) {
|
|
26
|
+
colorSeed = userId ? "user:".concat(userId, "|agent:type:").concat(agentType) : "agent:type:".concat(agentType);
|
|
27
|
+
} else if (userId) {
|
|
28
|
+
colorSeed = userId;
|
|
29
|
+
} else {
|
|
14
30
|
return undefined;
|
|
15
31
|
}
|
|
16
32
|
var agentIdentity = agentId || (agentType ? "type:".concat(agentType) : '');
|
|
17
|
-
return
|
|
33
|
+
return {
|
|
34
|
+
colorSeed: colorSeed,
|
|
35
|
+
key: "user:".concat(userId !== null && userId !== void 0 ? userId : '', "|agent:").concat(agentIdentity)
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
/** `userId` is primary; `agentId`, or `agentType` as its fallback, separates shared users. */
|
|
40
|
+
export var getAttributionKey = function getAttributionKey(attribution) {
|
|
41
|
+
var _getAttributionIdenti;
|
|
42
|
+
return (_getAttributionIdenti = getAttributionIdentity(attribution)) === null || _getAttributionIdenti === void 0 ? void 0 : _getAttributionIdenti.key;
|
|
18
43
|
};
|
|
19
44
|
export var areAttributionColorGatesEnabled = function areAttributionColorGatesEnabled() {
|
|
20
45
|
return fg('confluence_ncs_step_diffing_version_history') && isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor');
|
|
@@ -29,12 +54,29 @@ export var isAttributionColoringEnabled = function isAttributionColoringEnabled(
|
|
|
29
54
|
return attributionKeys.size > 1;
|
|
30
55
|
};
|
|
31
56
|
export var createAttributionColorMap = function createAttributionColorMap(stepAttributions) {
|
|
32
|
-
var
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
57
|
+
var colors = new Map();
|
|
58
|
+
var _iterator = _createForOfIteratorHelper(stepAttributions),
|
|
59
|
+
_step;
|
|
60
|
+
try {
|
|
61
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
62
|
+
var attribution = _step.value;
|
|
63
|
+
var identity = getAttributionIdentity(attribution);
|
|
64
|
+
if (!identity || colors.has(identity.key)) {
|
|
65
|
+
continue;
|
|
66
|
+
}
|
|
67
|
+
var _getParticipantColor = getParticipantColor(identity.colorSeed),
|
|
68
|
+
index = _getParticipantColor.index;
|
|
69
|
+
var participantColorScheme = PARTICIPANT_COLOR_SCHEMES[index];
|
|
70
|
+
if (participantColorScheme) {
|
|
71
|
+
colors.set(identity.key, participantColorScheme);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
} catch (err) {
|
|
75
|
+
_iterator.e(err);
|
|
76
|
+
} finally {
|
|
77
|
+
_iterator.f();
|
|
78
|
+
}
|
|
79
|
+
return colors;
|
|
38
80
|
};
|
|
39
81
|
var getLatestAttribution = function getLatestAttribution(changes) {
|
|
40
82
|
var data = changes.flatMap(function (change) {
|
|
@@ -56,10 +98,19 @@ var changesOverlap = function changesOverlap(change, attributedChange) {
|
|
|
56
98
|
var deletedOverlap = change.deleted.length > 0 && attributedChange.deleted.length > 0 && rangesOverlap(change.fromA, change.toA, attributedChange.fromA, attributedChange.toA);
|
|
57
99
|
return insertedOverlap || deletedOverlap;
|
|
58
100
|
};
|
|
101
|
+
var getParticipantColorSchemeForChanges = function getParticipantColorSchemeForChanges(changes, attributionColors) {
|
|
102
|
+
var key = getAttributionKey(getLatestAttribution(changes));
|
|
103
|
+
return key ? attributionColors.get(key) : undefined;
|
|
104
|
+
};
|
|
59
105
|
export var getColorSchemeForChange = function getColorSchemeForChange(change, attributedChanges, attributionColors, fallback) {
|
|
60
|
-
var
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
106
|
+
var _ref, _getParticipantColorS;
|
|
107
|
+
return (// Inline and step changes retain their own attribution spans. Resolve those first so a broader
|
|
108
|
+
// change is not recoloured by a later contributor whose nested range happens to overlap it.
|
|
109
|
+
(_ref = (_getParticipantColorS = getParticipantColorSchemeForChanges([change], attributionColors)) !== null && _getParticipantColorS !== void 0 ? _getParticipantColorS :
|
|
110
|
+
// Grouping and smart classification can produce changes without direct attribution data. For
|
|
111
|
+
// those transformed changes, retain the overlap-based lookup as a fallback.
|
|
112
|
+
getParticipantColorSchemeForChanges(attributedChanges.filter(function (attributedChange) {
|
|
113
|
+
return changesOverlap(change, attributedChange);
|
|
114
|
+
}), attributionColors)) !== null && _ref !== void 0 ? _ref : fallback
|
|
115
|
+
);
|
|
65
116
|
};
|
|
@@ -2,6 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
4
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
5
|
+
import { participantColors } from '@atlaskit/editor-shared-styles/constants';
|
|
6
|
+
import { PARTICIPANT_COLOR_SCHEMES } from './types';
|
|
7
|
+
|
|
5
8
|
// token() is a build-time transform needing static literals, so pre-compute every colour's
|
|
6
9
|
// tokens here and index by name at runtime.
|
|
7
10
|
|
|
@@ -14,7 +17,8 @@ var bgSubtlestMap = {
|
|
|
14
17
|
orange: "var(--ds-background-accent-orange-subtlest, #FFF5DB)",
|
|
15
18
|
yellow: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
|
|
16
19
|
magenta: "var(--ds-background-accent-magenta-subtlest, #FFECF8)",
|
|
17
|
-
gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)"
|
|
20
|
+
gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
|
|
21
|
+
lime: "var(--ds-background-accent-lime-subtlest, #EFFFD6)"
|
|
18
22
|
};
|
|
19
23
|
var bgSubtlestPressedMap = {
|
|
20
24
|
green: "var(--ds-background-accent-green-subtlest-pressed, #97EDC9)",
|
|
@@ -25,7 +29,8 @@ var bgSubtlestPressedMap = {
|
|
|
25
29
|
orange: "var(--ds-background-accent-orange-subtlest-pressed, #FBD779)",
|
|
26
30
|
yellow: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)",
|
|
27
31
|
magenta: "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)",
|
|
28
|
-
gray: "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)"
|
|
32
|
+
gray: "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)",
|
|
33
|
+
lime: "var(--ds-background-accent-lime-subtlest-pressed, #BDE97C)"
|
|
29
34
|
};
|
|
30
35
|
var bgSubtlerMap = {
|
|
31
36
|
green: "var(--ds-background-accent-green-subtler, #BAF3DB)",
|
|
@@ -36,7 +41,8 @@ var bgSubtlerMap = {
|
|
|
36
41
|
orange: "var(--ds-background-accent-orange-subtler, #FCE4A6)",
|
|
37
42
|
yellow: "var(--ds-background-accent-yellow-subtler, #F5E989)",
|
|
38
43
|
magenta: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
|
|
39
|
-
gray: "var(--ds-background-accent-gray-subtler, #DDDEE1)"
|
|
44
|
+
gray: "var(--ds-background-accent-gray-subtler, #DDDEE1)",
|
|
45
|
+
lime: "var(--ds-background-accent-lime-subtler, #D3F1A7)"
|
|
40
46
|
};
|
|
41
47
|
var bgSubtlerPressedMap = {
|
|
42
48
|
green: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
|
|
@@ -47,7 +53,8 @@ var bgSubtlerPressedMap = {
|
|
|
47
53
|
orange: "var(--ds-background-accent-orange-subtler-pressed, #FBC828)",
|
|
48
54
|
yellow: "var(--ds-background-accent-yellow-subtler-pressed, #EED12B)",
|
|
49
55
|
magenta: "var(--ds-background-accent-magenta-subtler-pressed, #F797D2)",
|
|
50
|
-
gray: "var(--ds-background-accent-gray-subtler-pressed, #8C8F97)"
|
|
56
|
+
gray: "var(--ds-background-accent-gray-subtler-pressed, #8C8F97)",
|
|
57
|
+
lime: "var(--ds-background-accent-lime-subtler-pressed, #B3DF72)"
|
|
51
58
|
};
|
|
52
59
|
var borderAccentMap = {
|
|
53
60
|
green: "var(--ds-border-accent-green, #22A06B)",
|
|
@@ -58,7 +65,8 @@ var borderAccentMap = {
|
|
|
58
65
|
orange: "var(--ds-border-accent-orange, #E06C00)",
|
|
59
66
|
yellow: "var(--ds-border-accent-yellow, #B38600)",
|
|
60
67
|
magenta: "var(--ds-border-accent-magenta, #CD519D)",
|
|
61
|
-
gray: "var(--ds-border-accent-gray, #7D818A)"
|
|
68
|
+
gray: "var(--ds-border-accent-gray, #7D818A)",
|
|
69
|
+
lime: "var(--ds-border-accent-lime, #6A9A23)"
|
|
62
70
|
};
|
|
63
71
|
var textAccentMap = {
|
|
64
72
|
green: "var(--ds-text-accent-green, #216E4E)",
|
|
@@ -69,25 +77,74 @@ var textAccentMap = {
|
|
|
69
77
|
orange: "var(--ds-text-accent-orange, #9E4C00)",
|
|
70
78
|
yellow: "var(--ds-text-accent-yellow, #7F5F01)",
|
|
71
79
|
magenta: "var(--ds-text-accent-magenta, #943D73)",
|
|
72
|
-
gray: "var(--ds-text-accent-gray, #505258)"
|
|
80
|
+
gray: "var(--ds-text-accent-gray, #505258)",
|
|
81
|
+
lime: "var(--ds-text-accent-lime, #4C6B1F)"
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
/** Pressed counterpart of each participant's diff-safe SVG background tint. */
|
|
85
|
+
var participantPressedBackgroundMap = {
|
|
86
|
+
'red-bolder': bgSubtlerPressedMap.red,
|
|
87
|
+
'blue-bolder': bgSubtlerPressedMap.blue,
|
|
88
|
+
'green-bolder': bgSubtlerPressedMap.green,
|
|
89
|
+
'yellow-bolder': bgSubtlerPressedMap.yellow,
|
|
90
|
+
'purple-bolder': bgSubtlerPressedMap.purple,
|
|
91
|
+
'magenta-bolder': bgSubtlerPressedMap.magenta,
|
|
92
|
+
'teal-bolder': bgSubtlerPressedMap.teal,
|
|
93
|
+
'orange-bolder': bgSubtlerPressedMap.orange,
|
|
94
|
+
'lime-bolder': bgSubtlerPressedMap.lime,
|
|
95
|
+
'gray-bolder': bgSubtlerPressedMap.gray,
|
|
96
|
+
'blue-subtle': bgSubtlestPressedMap.blue,
|
|
97
|
+
'red-subtle': bgSubtlestPressedMap.red,
|
|
98
|
+
'orange-subtle': bgSubtlestPressedMap.orange,
|
|
99
|
+
'yellow-subtle': bgSubtlestPressedMap.yellow,
|
|
100
|
+
'green-subtle': bgSubtlestPressedMap.green,
|
|
101
|
+
'teal-subtle': bgSubtlestPressedMap.teal,
|
|
102
|
+
'purple-subtle': bgSubtlestPressedMap.purple,
|
|
103
|
+
'magenta-subtle': bgSubtlestPressedMap.magenta
|
|
104
|
+
};
|
|
105
|
+
/**
|
|
106
|
+
* Telepointers can put inverse text directly on their bolder colour. Diff colours sit behind
|
|
107
|
+
* arbitrary document content, so use the participant SVG tint and its matching pressed token for
|
|
108
|
+
* diff backgrounds. Borders and rings use the exact participant colour, preserving all 18
|
|
109
|
+
* bolder/subtle slots while keeping every value in the shared ADS participant palette.
|
|
110
|
+
*/
|
|
111
|
+
var participantColorTokenSets = Object.fromEntries(PARTICIPANT_COLOR_SCHEMES.map(function (scheme, index) {
|
|
112
|
+
var participantColor = participantColors[index];
|
|
113
|
+
if (!participantColor) {
|
|
114
|
+
throw new Error("Missing shared participant colour for show-diff slot ".concat(index));
|
|
115
|
+
}
|
|
116
|
+
return [scheme, {
|
|
117
|
+
backgroundSubtlest: participantColor.svgBackgroundColor,
|
|
118
|
+
backgroundSubtlestPressed: participantPressedBackgroundMap[scheme],
|
|
119
|
+
backgroundSubtler: participantColor.svgBackgroundColor,
|
|
120
|
+
backgroundSubtlerPressed: participantPressedBackgroundMap[scheme],
|
|
121
|
+
borderAccent: participantColor.backgroundColor,
|
|
122
|
+
// The first ten bolder colours are safe as accents on the editor surface. The
|
|
123
|
+
// remaining subtle colours use their paired dark participant text colour.
|
|
124
|
+
textAccent: index < 10 ? participantColor.backgroundColor : participantColor.textColor
|
|
125
|
+
}];
|
|
126
|
+
}));
|
|
127
|
+
var participantColorSchemeSet = new Set(PARTICIPANT_COLOR_SCHEMES);
|
|
128
|
+
var isParticipantColorScheme = function isParticipantColorScheme(color) {
|
|
129
|
+
return participantColorSchemeSet.has(color);
|
|
73
130
|
};
|
|
74
131
|
function bgSubtlest(color) {
|
|
75
|
-
return bgSubtlestMap[color];
|
|
132
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtlest : bgSubtlestMap[color];
|
|
76
133
|
}
|
|
77
134
|
function bgSubtlestPressed(color) {
|
|
78
|
-
return bgSubtlestPressedMap[color];
|
|
135
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtlestPressed : bgSubtlestPressedMap[color];
|
|
79
136
|
}
|
|
80
137
|
function bgSubtler(color) {
|
|
81
|
-
return bgSubtlerMap[color];
|
|
138
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtler : bgSubtlerMap[color];
|
|
82
139
|
}
|
|
83
140
|
function bgSubtlerPressed(color) {
|
|
84
|
-
return bgSubtlerPressedMap[color];
|
|
141
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtlerPressed : bgSubtlerPressedMap[color];
|
|
85
142
|
}
|
|
86
143
|
function borderAccent(color) {
|
|
87
|
-
return borderAccentMap[color];
|
|
144
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].borderAccent : borderAccentMap[color];
|
|
88
145
|
}
|
|
89
146
|
function textAccent(color) {
|
|
90
|
-
return textAccentMap[color];
|
|
147
|
+
return isParticipantColorScheme(color) ? participantColorTokenSets[color].textAccent : textAccentMap[color];
|
|
91
148
|
}
|
|
92
149
|
|
|
93
150
|
/** Ring colour for an active (scroll-target) deleted block outline. */
|
|
@@ -65,14 +65,26 @@ var createAttributionScheme = function createAttributionScheme(color) {
|
|
|
65
65
|
});
|
|
66
66
|
};
|
|
67
67
|
|
|
68
|
-
/** Maps public schemes and attribution-only
|
|
68
|
+
/** Maps public schemes and attribution-only participant slots to their data objects. */
|
|
69
69
|
export var colorSchemeRegistry = {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
purple: createAttributionScheme('purple'),
|
|
75
|
-
|
|
70
|
+
'red-bolder': createAttributionScheme('red-bolder'),
|
|
71
|
+
'blue-bolder': createAttributionScheme('blue-bolder'),
|
|
72
|
+
'green-bolder': createAttributionScheme('green-bolder'),
|
|
73
|
+
'yellow-bolder': createAttributionScheme('yellow-bolder'),
|
|
74
|
+
'purple-bolder': createAttributionScheme('purple-bolder'),
|
|
75
|
+
'magenta-bolder': createAttributionScheme('magenta-bolder'),
|
|
76
|
+
'teal-bolder': createAttributionScheme('teal-bolder'),
|
|
77
|
+
'orange-bolder': createAttributionScheme('orange-bolder'),
|
|
78
|
+
'lime-bolder': createAttributionScheme('lime-bolder'),
|
|
79
|
+
'gray-bolder': createAttributionScheme('gray-bolder'),
|
|
80
|
+
'blue-subtle': createAttributionScheme('blue-subtle'),
|
|
81
|
+
'red-subtle': createAttributionScheme('red-subtle'),
|
|
82
|
+
'orange-subtle': createAttributionScheme('orange-subtle'),
|
|
83
|
+
'yellow-subtle': createAttributionScheme('yellow-subtle'),
|
|
84
|
+
'green-subtle': createAttributionScheme('green-subtle'),
|
|
85
|
+
'teal-subtle': createAttributionScheme('teal-subtle'),
|
|
86
|
+
'purple-subtle': createAttributionScheme('purple-subtle'),
|
|
87
|
+
'magenta-subtle': createAttributionScheme('magenta-subtle'),
|
|
76
88
|
traditional: traditionalScheme,
|
|
77
89
|
standard: standardScheme
|
|
78
90
|
};
|
|
@@ -1 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
/** Attribution-only participant slots selected by the plugin, never by consumers. */
|
|
2
|
+
export var PARTICIPANT_COLOR_SCHEMES = ['red-bolder', 'blue-bolder', 'green-bolder', 'yellow-bolder', 'purple-bolder', 'magenta-bolder', 'teal-bolder', 'orange-bolder', 'lime-bolder', 'gray-bolder', 'blue-subtle', 'red-subtle', 'orange-subtle', 'yellow-subtle', 'green-subtle', 'teal-subtle', 'purple-subtle', 'magenta-subtle'];
|
|
3
|
+
|
|
4
|
+
/** ADS accent hues used by the public and participant colour schemes. */
|
|
5
|
+
|
|
6
|
+
/** A public scheme or an attribution participant slot resolved internally for one change. */
|
|
7
|
+
|
|
8
|
+
/** A colour value that the factory expands into a complete set of diff-safe ADS tokens. */
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* A show-diff colour scheme. Colour fields are ADS hues or shared participant slots that
|
|
12
|
+
* `factory.ts` expands into token paths; the rest encode structural differences no colour can
|
|
13
|
+
* express. Ring widths, padding, radius and pointer-events are fixed in the factory, not per scheme.
|
|
14
|
+
*/
|
|
@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
3
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
4
|
import isEqual from 'lodash/isEqual';
|
|
5
5
|
import omit from 'lodash/omit';
|
|
6
|
-
import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
|
|
6
|
+
import { SetAttrsStep } from '@atlaskit/adf-schema/steps/set-attrs';
|
|
7
7
|
import { isExperimentEnabled } from '@atlaskit/editor-common/deprecated-platform-feature-experiments';
|
|
8
8
|
import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
|
|
9
9
|
import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Change } from 'prosemirror-changeset';
|
|
2
2
|
import type { ColorScheme as PublicColorScheme, DiffStepAttribution } from '../../../showDiffPluginType';
|
|
3
|
-
import type
|
|
3
|
+
import { type ColorScheme, type DiffParticipantColorScheme } from './types';
|
|
4
4
|
export type DiffAttributionSpanData = DiffStepAttribution & {
|
|
5
5
|
stepIndex: number;
|
|
6
6
|
};
|
|
@@ -8,5 +8,5 @@ export type DiffAttributionSpanData = DiffStepAttribution & {
|
|
|
8
8
|
export declare const getAttributionKey: (attribution: DiffStepAttribution | undefined) => string | undefined;
|
|
9
9
|
export declare const areAttributionColorGatesEnabled: () => boolean;
|
|
10
10
|
export declare const isAttributionColoringEnabled: (stepAttributions: Array<DiffStepAttribution | undefined> | undefined) => boolean;
|
|
11
|
-
export declare const createAttributionColorMap: (stepAttributions: Array<DiffStepAttribution | undefined>) => Map<string,
|
|
12
|
-
export declare const getColorSchemeForChange: (change: Change, attributedChanges: Change[], attributionColors: Map<string,
|
|
11
|
+
export declare const createAttributionColorMap: (stepAttributions: Array<DiffStepAttribution | undefined>) => Map<string, DiffParticipantColorScheme>;
|
|
12
|
+
export declare const getColorSchemeForChange: (change: Change, attributedChanges: Change[], attributionColors: Map<string, DiffParticipantColorScheme>, fallback: PublicColorScheme | undefined) => ColorScheme | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type DiffColorScheme } from './types';
|
|
2
2
|
/** Inline inserted content — default state. */
|
|
3
3
|
export declare function buildInsertStyle(colors: DiffColorScheme): string;
|
|
4
4
|
/** Inline insert style for content within a block node (no background, underline only). */
|
|
@@ -4,7 +4,7 @@ import type { ColorScheme, DiffColorScheme } from './types';
|
|
|
4
4
|
export declare const traditionalScheme: DiffColorScheme;
|
|
5
5
|
/** Purple insertions, gray deletions (red on active). */
|
|
6
6
|
export declare const standardScheme: DiffColorScheme;
|
|
7
|
-
/** Maps public schemes and attribution-only
|
|
7
|
+
/** Maps public schemes and attribution-only participant slots to their data objects. */
|
|
8
8
|
export declare const colorSchemeRegistry: Record<ColorScheme, DiffColorScheme>;
|
|
9
9
|
/** Attribution accents are impossible in the refactor-off cohort; fall back defensively. */
|
|
10
10
|
export declare const getLegacyColorScheme: (colorScheme: ColorScheme | undefined) => PublicColorScheme | undefined;
|
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
import type { ColorScheme as PublicColorScheme } from '../../../showDiffPluginType';
|
|
2
|
-
/** Attribution-only
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
/** Attribution-only participant slots selected by the plugin, never by consumers. */
|
|
3
|
+
export declare const PARTICIPANT_COLOR_SCHEMES: readonly ['red-bolder', 'blue-bolder', 'green-bolder', 'yellow-bolder', 'purple-bolder', 'magenta-bolder', 'teal-bolder', 'orange-bolder', 'lime-bolder', 'gray-bolder', 'blue-subtle', 'red-subtle', 'orange-subtle', 'yellow-subtle', 'green-subtle', 'teal-subtle', 'purple-subtle', 'magenta-subtle'];
|
|
4
|
+
export type DiffParticipantColorScheme = (typeof PARTICIPANT_COLOR_SCHEMES)[number];
|
|
5
|
+
/** ADS accent hues used by the public and participant colour schemes. */
|
|
6
|
+
export type AdsAccentColor = 'blue' | 'gray' | 'green' | 'lime' | 'magenta' | 'orange' | 'purple' | 'red' | 'teal' | 'yellow';
|
|
7
|
+
/** A public scheme or an attribution participant slot resolved internally for one change. */
|
|
8
|
+
export type ColorScheme = PublicColorScheme | DiffParticipantColorScheme;
|
|
9
|
+
/** A colour value that the factory expands into a complete set of diff-safe ADS tokens. */
|
|
10
|
+
export type DiffSchemeColor = AdsAccentColor | DiffParticipantColorScheme;
|
|
6
11
|
/**
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
|
|
10
|
-
export type AdsAccentColor = DiffAccentColor | 'red' | 'yellow' | 'gray';
|
|
11
|
-
/**
|
|
12
|
-
* A show-diff colour scheme. Colour fields are accent names that `factory.ts` expands into token
|
|
13
|
-
* paths; the rest encode structural differences no colour can express. Ring widths, padding,
|
|
14
|
-
* radius and pointer-events are fixed in the factory, not per scheme.
|
|
12
|
+
* A show-diff colour scheme. Colour fields are ADS hues or shared participant slots that
|
|
13
|
+
* `factory.ts` expands into token paths; the rest encode structural differences no colour can
|
|
14
|
+
* express. Ring widths, padding, radius and pointer-events are fixed in the factory, not per scheme.
|
|
15
15
|
*/
|
|
16
16
|
export type DiffColorScheme = {
|
|
17
17
|
/** Stacking order of the square added-cell overlay. The rounded variant is always 2. */
|
|
18
18
|
addedCellOverlayZIndex: 1 | 2;
|
|
19
19
|
/** Deleted inline content, active/focused state. */
|
|
20
|
-
deleteActiveColor:
|
|
20
|
+
deleteActiveColor: DiffSchemeColor;
|
|
21
21
|
/** Deleted inline content. */
|
|
22
|
-
deleteColor:
|
|
22
|
+
deleteColor: DiffSchemeColor;
|
|
23
23
|
/** Active deleted-block ring: pale `background.accent.*.subtler.pressed` vs saturated `border.accent.*`. */
|
|
24
24
|
deletedBlockOutlineActiveEmphasis: 'background' | 'border';
|
|
25
25
|
/** Deleted cell outline: `color.border.disabled` hairline vs opaque accent border. */
|
|
26
26
|
deletedCellBorderProminence: 'subtle' | 'accent';
|
|
27
27
|
/** Deleted cell overlays. Gray in both current schemes. */
|
|
28
|
-
deletedCellColor:
|
|
28
|
+
deletedCellColor: DiffSchemeColor;
|
|
29
29
|
/** Opacity of the deleted cell overlay background. Counterpart to `insertedCellOpacity`. */
|
|
30
30
|
deletedCellOpacity: number;
|
|
31
31
|
/** Deleted inline content: tint the strikethrough, or tint and dim the glyph itself. */
|
|
32
32
|
deletedInlineTreatment: 'strikethrough' | 'glyphTint';
|
|
33
33
|
/** Resting "REMOVED" lozenge tint. Gray in both current schemes; the active state uses `deleteActiveColor`. */
|
|
34
|
-
deletedLozengeColor:
|
|
34
|
+
deletedLozengeColor: DiffSchemeColor;
|
|
35
35
|
/**
|
|
36
36
|
* "REMOVED" lozenge label, in both states: a fixed inverse tone that reads on any tint, or the
|
|
37
37
|
* accent text colour matching `deletedLozengeColor`.
|
|
@@ -41,7 +41,7 @@ export type DiffColorScheme = {
|
|
|
41
41
|
* Resting ring colour for a deleted media/embed card under the a11y-fixes treatment. Its own role
|
|
42
42
|
* rather than a derivation of `deleteColor`: that treatment rings red even for gray deletes.
|
|
43
43
|
*/
|
|
44
|
-
deletedMediaRingColor:
|
|
44
|
+
deletedMediaRingColor: DiffSchemeColor;
|
|
45
45
|
/** Deleted block ring: 4px stateful ring plus marker variables, or one resting treatment. */
|
|
46
46
|
deletedNodeEmphasis: 'stateful' | 'static';
|
|
47
47
|
/** Active deleted-blockquote ring tone, for the nodeview-wrapped case only. */
|
|
@@ -51,9 +51,9 @@ export type DiffColorScheme = {
|
|
|
51
51
|
/** Deleted row de-emphasis: tint the line-through, or tint the row text. Both read `deleteColor`. */
|
|
52
52
|
deletedRowTreatment: 'strikeColor' | 'textTint';
|
|
53
53
|
/** Inserted content, active/focused state. */
|
|
54
|
-
insertActiveColor:
|
|
54
|
+
insertActiveColor: DiffSchemeColor;
|
|
55
55
|
/** Inserted content, default state. */
|
|
56
|
-
insertColor:
|
|
56
|
+
insertColor: DiffSchemeColor;
|
|
57
57
|
/** Opacity of the inserted cell overlay background. */
|
|
58
58
|
insertedCellOpacity: number;
|
|
59
59
|
/** Inserted content under the extended experience: underline, or a border-bottom rule with padding. */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
|
|
1
|
+
import { SetAttrsStep } from '@atlaskit/adf-schema/steps/set-attrs';
|
|
2
2
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
3
|
import type { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform-override';
|
|
4
4
|
import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-show-diff",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.3.1",
|
|
4
4
|
"description": "ShowDiff plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -25,10 +25,11 @@
|
|
|
25
25
|
"@atlaskit/editor-plugin-analytics": "^16.1.0",
|
|
26
26
|
"@atlaskit/editor-plugin-user-intent": "^14.0.0",
|
|
27
27
|
"@atlaskit/editor-prosemirror": "^8.0.0",
|
|
28
|
+
"@atlaskit/editor-shared-styles": "^4.1.0",
|
|
28
29
|
"@atlaskit/editor-tables": "^3.1.0",
|
|
29
30
|
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
30
31
|
"@atlaskit/platform-feature-flags": "^2.2.0",
|
|
31
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
32
|
+
"@atlaskit/tmp-editor-statsig": "^173.0.0",
|
|
32
33
|
"@atlaskit/tokens": "^16.11.0",
|
|
33
34
|
"@babel/runtime": "^7.0.0",
|
|
34
35
|
"@compiled/react": "^1.0.2",
|