@atlaskit/editor-plugin-show-diff 14.0.0 → 14.0.2
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 +31 -0
- package/dist/cjs/pm-plugins/NodeViewSerializer.js +25 -5
- package/dist/cjs/pm-plugins/decorations/colorSchemes/factory.js +57 -16
- package/dist/cjs/pm-plugins/decorations/colorSchemes/schemes.js +13 -2
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeView.js +153 -106
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +13 -3
- package/dist/es2019/pm-plugins/NodeViewSerializer.js +25 -5
- package/dist/es2019/pm-plugins/decorations/colorSchemes/factory.js +57 -15
- package/dist/es2019/pm-plugins/decorations/colorSchemes/schemes.js +13 -2
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeView.js +64 -19
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +14 -4
- package/dist/esm/pm-plugins/NodeViewSerializer.js +25 -5
- package/dist/esm/pm-plugins/decorations/colorSchemes/factory.js +57 -16
- package/dist/esm/pm-plugins/decorations/colorSchemes/schemes.js +13 -2
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeView.js +154 -107
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js +13 -3
- package/dist/types/pm-plugins/decorations/colorSchemes/factory.d.ts +22 -10
- package/dist/types/pm-plugins/decorations/colorSchemes/types.d.ts +16 -0
- package/dist/types/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.d.ts +7 -0
- package/package.json +5 -5
|
@@ -6,6 +6,10 @@ export var traditionalScheme = {
|
|
|
6
6
|
deleteColor: 'red',
|
|
7
7
|
deleteActiveColor: 'red',
|
|
8
8
|
deletedCellColor: 'gray',
|
|
9
|
+
deletedCellOpacity: 0.5,
|
|
10
|
+
deletedLozengeColor: 'gray',
|
|
11
|
+
deletedLozengeTextTone: 'inverse',
|
|
12
|
+
deletedMediaRingColor: 'red',
|
|
9
13
|
deletedRowTreatment: 'strikeColor',
|
|
10
14
|
insertedCellOpacity: 0.5,
|
|
11
15
|
deletedQuoteNodeShape: 'ring',
|
|
@@ -17,7 +21,8 @@ export var traditionalScheme = {
|
|
|
17
21
|
deletedInlineTreatment: 'strikethrough',
|
|
18
22
|
insertedNodeEmphasis: 'stateful',
|
|
19
23
|
deletedNodeEmphasis: 'stateful',
|
|
20
|
-
deletedQuoteNodeActiveTone: 'backgroundPressed'
|
|
24
|
+
deletedQuoteNodeActiveTone: 'backgroundPressed',
|
|
25
|
+
strikesDeletedEmbedCard: true
|
|
21
26
|
};
|
|
22
27
|
|
|
23
28
|
/** Purple insertions, gray deletions (red on active). */
|
|
@@ -28,6 +33,11 @@ export var standardScheme = {
|
|
|
28
33
|
deleteColor: 'gray',
|
|
29
34
|
deleteActiveColor: 'red',
|
|
30
35
|
deletedCellColor: 'gray',
|
|
36
|
+
deletedCellOpacity: 0.5,
|
|
37
|
+
deletedLozengeColor: 'gray',
|
|
38
|
+
deletedLozengeTextTone: 'inverse',
|
|
39
|
+
// Red, not `deleteColor`'s gray: a11y-fixes rings deleted media red in both schemes.
|
|
40
|
+
deletedMediaRingColor: 'red',
|
|
31
41
|
deletedRowTreatment: 'textTint',
|
|
32
42
|
insertedCellOpacity: 0.2,
|
|
33
43
|
deletedQuoteNodeShape: 'borderLeft',
|
|
@@ -39,7 +49,8 @@ export var standardScheme = {
|
|
|
39
49
|
deletedInlineTreatment: 'glyphTint',
|
|
40
50
|
insertedNodeEmphasis: 'static',
|
|
41
51
|
deletedNodeEmphasis: 'static',
|
|
42
|
-
deletedQuoteNodeActiveTone: 'borderAccent'
|
|
52
|
+
deletedQuoteNodeActiveTone: 'borderAccent',
|
|
53
|
+
strikesDeletedEmbedCard: false
|
|
43
54
|
};
|
|
44
55
|
|
|
45
56
|
/** Maps the public ColorScheme string to its data object. Adding a scheme = one entry here. */
|
|
@@ -2,10 +2,11 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
|
2
2
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
3
3
|
import { trackChangesMessages } from '@atlaskit/editor-common/messages';
|
|
4
4
|
import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
|
|
5
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
5
6
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
6
7
|
import { isExtendedEnabled } from '../../isExtendedEnabled';
|
|
7
8
|
import { applyTableCellEdgeAttrs } from './tableCellEdgeAttrs';
|
|
8
|
-
import { getChangedContentStyle, getChangedNodeStyle, getDeletedContentStyle, getDeletedContentStyleUnbounded, getInsertedContentStyle, hasRestingDeletedRing, isMultiContainerBlockNode, isTextLikeBlockNode, resolveCellOverlayStyle, resolveNestedInsertedNodeStyle, resolveRemovedLozengeStyle } from './wrapBlockNodeViewStyles';
|
|
9
|
+
import { getChangedContentStyle, getChangedNodeStyle, getDeletedContentStyle, getDeletedContentStyleUnbounded, getInsertedContentStyle, hasRestingDeletedRing, isMultiContainerBlockNode, isTextLikeBlockNode, resolveCellOverlayStyle, resolveDeletedNodeCSSVariables, resolveNestedInsertedNodeStyle, resolveRemovedLozengeStyle } from './wrapBlockNodeViewStyles';
|
|
9
10
|
var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
|
|
10
11
|
switch (nodeName) {
|
|
11
12
|
case 'expand':
|
|
@@ -47,6 +48,67 @@ var maybeAddDeletedOutlineNewClass = function maybeAddDeletedOutlineNewClass(_re
|
|
|
47
48
|
nodeView.classList.add('show-diff-deleted-outline-new');
|
|
48
49
|
}
|
|
49
50
|
};
|
|
51
|
+
/**
|
|
52
|
+
* Pre-refactor markup for a deleted media/embed/blockquote nodeview: one class per scheme, and no
|
|
53
|
+
* custom properties — the colours come from the matching per-scheme selectors in editor-core.
|
|
54
|
+
*
|
|
55
|
+
* Delete this together with those selectors at experiment cleanup (EDITOR-8281).
|
|
56
|
+
*/
|
|
57
|
+
var applyDeletedNodeMarkupLegacy = function applyDeletedNodeMarkupLegacy(_ref2) {
|
|
58
|
+
var nodeView = _ref2.nodeView,
|
|
59
|
+
targetNode = _ref2.targetNode,
|
|
60
|
+
colorScheme = _ref2.colorScheme,
|
|
61
|
+
_ref2$isActive = _ref2.isActive,
|
|
62
|
+
isActive = _ref2$isActive === void 0 ? false : _ref2$isActive;
|
|
63
|
+
nodeView.classList.add(colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node');
|
|
64
|
+
if (isActive) {
|
|
65
|
+
nodeView.classList.add('show-diff-deleted-active');
|
|
66
|
+
}
|
|
67
|
+
maybeAddDeletedOutlineNewClass({
|
|
68
|
+
nodeView: nodeView,
|
|
69
|
+
targetNode: targetNode,
|
|
70
|
+
colorScheme: colorScheme,
|
|
71
|
+
isActive: isActive
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* Registry-driven markup: one scheme-agnostic class, plus the scheme's colours as custom properties,
|
|
77
|
+
* so editor-core needs one selector per visual role instead of one per scheme.
|
|
78
|
+
*
|
|
79
|
+
* `show-diff-deleted-node-vars` *replaces* the legacy classes rather than joining them. Both sets of
|
|
80
|
+
* selectors live in editor-core for the life of the experiment, and they have equal specificity, so
|
|
81
|
+
* a shared base class would leave the winner up to source order.
|
|
82
|
+
*
|
|
83
|
+
* The `-vars` suffix names what the class means — this node carries its scheme colours as
|
|
84
|
+
* `--diff-delete-*` custom properties — rather than when it arrived, so it still reads correctly
|
|
85
|
+
* once the legacy classes are gone.
|
|
86
|
+
*/
|
|
87
|
+
var applyDeletedNodeMarkupNext = function applyDeletedNodeMarkupNext(_ref3) {
|
|
88
|
+
var nodeView = _ref3.nodeView,
|
|
89
|
+
targetNode = _ref3.targetNode,
|
|
90
|
+
colorScheme = _ref3.colorScheme,
|
|
91
|
+
_ref3$isActive = _ref3.isActive,
|
|
92
|
+
isActive = _ref3$isActive === void 0 ? false : _ref3$isActive;
|
|
93
|
+
nodeView.classList.add('show-diff-deleted-node-vars');
|
|
94
|
+
if (isActive) {
|
|
95
|
+
nodeView.classList.add('show-diff-deleted-active');
|
|
96
|
+
}
|
|
97
|
+
maybeAddDeletedOutlineNewClass({
|
|
98
|
+
nodeView: nodeView,
|
|
99
|
+
targetNode: targetNode,
|
|
100
|
+
colorScheme: colorScheme,
|
|
101
|
+
isActive: isActive
|
|
102
|
+
});
|
|
103
|
+
var currentStyle = nodeView.getAttribute('style') || '';
|
|
104
|
+
var separator = currentStyle && !currentStyle.trimEnd().endsWith(';') ? ';' : '';
|
|
105
|
+
nodeView.setAttribute('style', "".concat(currentStyle).concat(separator).concat(resolveDeletedNodeCSSVariables(colorScheme)));
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
/** Single gate for the deleted-node classes and custom properties. */
|
|
109
|
+
var applyDeletedNodeMarkup = function applyDeletedNodeMarkup(args) {
|
|
110
|
+
return isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? applyDeletedNodeMarkupNext(args) : applyDeletedNodeMarkupLegacy(args);
|
|
111
|
+
};
|
|
50
112
|
|
|
51
113
|
/**
|
|
52
114
|
* Checks if a node should apply deleted styles directly without wrapper
|
|
@@ -55,10 +117,10 @@ var maybeAddDeletedOutlineNewClass = function maybeAddDeletedOutlineNewClass(_re
|
|
|
55
117
|
var shouldApplyStylesDirectly = function shouldApplyStylesDirectly(nodeName) {
|
|
56
118
|
return nodeName === 'heading';
|
|
57
119
|
};
|
|
58
|
-
var applyCellOverlayStyles = function applyCellOverlayStyles(
|
|
59
|
-
var element =
|
|
60
|
-
colorScheme =
|
|
61
|
-
isInserted =
|
|
120
|
+
var applyCellOverlayStyles = function applyCellOverlayStyles(_ref4) {
|
|
121
|
+
var element = _ref4.element,
|
|
122
|
+
colorScheme = _ref4.colorScheme,
|
|
123
|
+
isInserted = _ref4.isInserted;
|
|
62
124
|
var isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
|
|
63
125
|
var overlayStyle = resolveCellOverlayStyle({
|
|
64
126
|
colorScheme: colorScheme,
|
|
@@ -116,30 +178,30 @@ var createBlockNodeWrapper = function createBlockNodeWrapper() {
|
|
|
116
178
|
/**
|
|
117
179
|
* Applies styles directly to an HTML element by merging with existing styles
|
|
118
180
|
*/
|
|
119
|
-
var applyStylesToElement = function applyStylesToElement(
|
|
120
|
-
var element =
|
|
121
|
-
targetNode =
|
|
122
|
-
colorScheme =
|
|
123
|
-
isActive =
|
|
124
|
-
isInserted =
|
|
125
|
-
diffType =
|
|
126
|
-
|
|
127
|
-
hideAddedDiffsUnderline =
|
|
181
|
+
var applyStylesToElement = function applyStylesToElement(_ref5) {
|
|
182
|
+
var element = _ref5.element,
|
|
183
|
+
targetNode = _ref5.targetNode,
|
|
184
|
+
colorScheme = _ref5.colorScheme,
|
|
185
|
+
isActive = _ref5.isActive,
|
|
186
|
+
isInserted = _ref5.isInserted,
|
|
187
|
+
diffType = _ref5.diffType,
|
|
188
|
+
_ref5$hideAddedDiffsU = _ref5.hideAddedDiffsUnderline,
|
|
189
|
+
hideAddedDiffsUnderline = _ref5$hideAddedDiffsU === void 0 ? false : _ref5$hideAddedDiffsU;
|
|
128
190
|
var currentStyle = element.getAttribute('style') || '';
|
|
129
191
|
var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, diffType, hideAddedDiffsUnderline);
|
|
130
192
|
var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
|
|
131
193
|
var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
|
|
132
194
|
element.setAttribute('style', "".concat(currentStyle).concat(contentStyle).concat(nodeSpecificStyle));
|
|
133
195
|
};
|
|
134
|
-
var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(
|
|
135
|
-
var element =
|
|
136
|
-
targetNode =
|
|
137
|
-
colorScheme =
|
|
138
|
-
isActive =
|
|
139
|
-
isInserted =
|
|
140
|
-
diffType =
|
|
141
|
-
|
|
142
|
-
hideAddedDiffsUnderline =
|
|
196
|
+
var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref6) {
|
|
197
|
+
var element = _ref6.element,
|
|
198
|
+
targetNode = _ref6.targetNode,
|
|
199
|
+
colorScheme = _ref6.colorScheme,
|
|
200
|
+
isActive = _ref6.isActive,
|
|
201
|
+
isInserted = _ref6.isInserted,
|
|
202
|
+
diffType = _ref6.diffType,
|
|
203
|
+
_ref6$hideAddedDiffsU = _ref6.hideAddedDiffsUnderline,
|
|
204
|
+
hideAddedDiffsUnderline = _ref6$hideAddedDiffsU === void 0 ? false : _ref6$hideAddedDiffsU;
|
|
143
205
|
var currentStyle = element.getAttribute('style') || '';
|
|
144
206
|
var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
|
|
145
207
|
var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
|
|
@@ -164,15 +226,15 @@ var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref4
|
|
|
164
226
|
}
|
|
165
227
|
element.setAttribute('style', "".concat(currentStyle, ";").concat(nodeSpecificStyle));
|
|
166
228
|
};
|
|
167
|
-
var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(
|
|
168
|
-
var element =
|
|
169
|
-
targetNode =
|
|
170
|
-
colorScheme =
|
|
171
|
-
isActive =
|
|
172
|
-
isInserted =
|
|
173
|
-
diffType =
|
|
174
|
-
|
|
175
|
-
hideAddedDiffsUnderline =
|
|
229
|
+
var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref7) {
|
|
230
|
+
var element = _ref7.element,
|
|
231
|
+
targetNode = _ref7.targetNode,
|
|
232
|
+
colorScheme = _ref7.colorScheme,
|
|
233
|
+
isActive = _ref7.isActive,
|
|
234
|
+
isInserted = _ref7.isInserted,
|
|
235
|
+
diffType = _ref7.diffType,
|
|
236
|
+
_ref7$hideAddedDiffsU = _ref7.hideAddedDiffsUnderline,
|
|
237
|
+
hideAddedDiffsUnderline = _ref7$hideAddedDiffsU === void 0 ? false : _ref7$hideAddedDiffsU;
|
|
176
238
|
var currentStyle = element.getAttribute('style') || '';
|
|
177
239
|
var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
|
|
178
240
|
if (nodeSpecificStyle) {
|
|
@@ -199,15 +261,15 @@ var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref5)
|
|
|
199
261
|
/**
|
|
200
262
|
* Creates a content wrapper with deleted styles for a block node
|
|
201
263
|
*/
|
|
202
|
-
var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(
|
|
203
|
-
var nodeView =
|
|
204
|
-
targetNode =
|
|
205
|
-
colorScheme =
|
|
206
|
-
isActive =
|
|
207
|
-
isInserted =
|
|
208
|
-
diffType =
|
|
209
|
-
|
|
210
|
-
hideAddedDiffsUnderline =
|
|
264
|
+
var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref8) {
|
|
265
|
+
var nodeView = _ref8.nodeView,
|
|
266
|
+
targetNode = _ref8.targetNode,
|
|
267
|
+
colorScheme = _ref8.colorScheme,
|
|
268
|
+
isActive = _ref8.isActive,
|
|
269
|
+
isInserted = _ref8.isInserted,
|
|
270
|
+
diffType = _ref8.diffType,
|
|
271
|
+
_ref8$hideAddedDiffsU = _ref8.hideAddedDiffsUnderline,
|
|
272
|
+
hideAddedDiffsUnderline = _ref8$hideAddedDiffsU === void 0 ? false : _ref8$hideAddedDiffsU;
|
|
211
273
|
var contentWrapper = document.createElement('div');
|
|
212
274
|
var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
|
|
213
275
|
var nodeStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline);
|
|
@@ -228,14 +290,14 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref6
|
|
|
228
290
|
* to wait for the rich-media-item to appear before attaching the lozenge.
|
|
229
291
|
* @returns true if embedCard was handled
|
|
230
292
|
*/
|
|
231
|
-
var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(
|
|
232
|
-
var dom =
|
|
233
|
-
nodeView =
|
|
234
|
-
targetNode =
|
|
235
|
-
lozenge =
|
|
236
|
-
colorScheme =
|
|
237
|
-
|
|
238
|
-
isActive =
|
|
293
|
+
var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref9) {
|
|
294
|
+
var dom = _ref9.dom,
|
|
295
|
+
nodeView = _ref9.nodeView,
|
|
296
|
+
targetNode = _ref9.targetNode,
|
|
297
|
+
lozenge = _ref9.lozenge,
|
|
298
|
+
colorScheme = _ref9.colorScheme,
|
|
299
|
+
_ref9$isActive = _ref9.isActive,
|
|
300
|
+
isActive = _ref9$isActive === void 0 ? false : _ref9$isActive;
|
|
239
301
|
if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
|
|
240
302
|
return false;
|
|
241
303
|
}
|
|
@@ -256,12 +318,7 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref7) {
|
|
|
256
318
|
});
|
|
257
319
|
}
|
|
258
320
|
if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
259
|
-
|
|
260
|
-
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
261
|
-
if (isActive) {
|
|
262
|
-
nodeView.classList.add('show-diff-deleted-active');
|
|
263
|
-
}
|
|
264
|
-
maybeAddDeletedOutlineNewClass({
|
|
321
|
+
applyDeletedNodeMarkup({
|
|
265
322
|
nodeView: nodeView,
|
|
266
323
|
targetNode: targetNode,
|
|
267
324
|
colorScheme: colorScheme,
|
|
@@ -276,14 +333,14 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref7) {
|
|
|
276
333
|
* Handles special mediaSingle node rendering with lozenge on child media element
|
|
277
334
|
* @returns true if mediaSingle was handled, false otherwise
|
|
278
335
|
*/
|
|
279
|
-
var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(
|
|
280
|
-
var dom =
|
|
281
|
-
nodeView =
|
|
282
|
-
targetNode =
|
|
283
|
-
lozenge =
|
|
284
|
-
colorScheme =
|
|
285
|
-
|
|
286
|
-
isActive =
|
|
336
|
+
var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref0) {
|
|
337
|
+
var dom = _ref0.dom,
|
|
338
|
+
nodeView = _ref0.nodeView,
|
|
339
|
+
targetNode = _ref0.targetNode,
|
|
340
|
+
lozenge = _ref0.lozenge,
|
|
341
|
+
colorScheme = _ref0.colorScheme,
|
|
342
|
+
_ref0$isActive = _ref0.isActive,
|
|
343
|
+
isActive = _ref0$isActive === void 0 ? false : _ref0$isActive;
|
|
287
344
|
if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
|
|
288
345
|
return false;
|
|
289
346
|
}
|
|
@@ -302,12 +359,7 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref8)
|
|
|
302
359
|
|
|
303
360
|
// Add deleted node class if needed
|
|
304
361
|
if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
305
|
-
|
|
306
|
-
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
307
|
-
if (isActive) {
|
|
308
|
-
nodeView.classList.add('show-diff-deleted-active');
|
|
309
|
-
}
|
|
310
|
-
maybeAddDeletedOutlineNewClass({
|
|
362
|
+
applyDeletedNodeMarkup({
|
|
311
363
|
nodeView: nodeView,
|
|
312
364
|
targetNode: targetNode,
|
|
313
365
|
colorScheme: colorScheme,
|
|
@@ -321,19 +373,19 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref8)
|
|
|
321
373
|
/**
|
|
322
374
|
* Appends a block node with wrapper, lozenge, and appropriate styling
|
|
323
375
|
*/
|
|
324
|
-
var wrapBlockNode = function wrapBlockNode(
|
|
325
|
-
var dom =
|
|
326
|
-
nodeView =
|
|
327
|
-
targetNode =
|
|
328
|
-
colorScheme =
|
|
329
|
-
intl =
|
|
330
|
-
|
|
331
|
-
isActive =
|
|
332
|
-
|
|
333
|
-
isInserted =
|
|
334
|
-
diffType =
|
|
335
|
-
|
|
336
|
-
hideAddedDiffsUnderline =
|
|
376
|
+
var wrapBlockNode = function wrapBlockNode(_ref1) {
|
|
377
|
+
var dom = _ref1.dom,
|
|
378
|
+
nodeView = _ref1.nodeView,
|
|
379
|
+
targetNode = _ref1.targetNode,
|
|
380
|
+
colorScheme = _ref1.colorScheme,
|
|
381
|
+
intl = _ref1.intl,
|
|
382
|
+
_ref1$isActive = _ref1.isActive,
|
|
383
|
+
isActive = _ref1$isActive === void 0 ? false : _ref1$isActive,
|
|
384
|
+
_ref1$isInserted = _ref1.isInserted,
|
|
385
|
+
isInserted = _ref1$isInserted === void 0 ? false : _ref1$isInserted,
|
|
386
|
+
diffType = _ref1.diffType,
|
|
387
|
+
_ref1$hideAddedDiffsU = _ref1.hideAddedDiffsUnderline,
|
|
388
|
+
hideAddedDiffsUnderline = _ref1$hideAddedDiffsU === void 0 ? false : _ref1$hideAddedDiffsU;
|
|
337
389
|
var blockWrapper = createBlockNodeWrapper();
|
|
338
390
|
var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
|
|
339
391
|
if (shouldShowRemovedLozenge(targetNodeName) && (!isExtendedEnabled(diffType) || !isInserted)) {
|
|
@@ -371,12 +423,7 @@ var wrapBlockNode = function wrapBlockNode(_ref9) {
|
|
|
371
423
|
});
|
|
372
424
|
blockWrapper.append(contentWrapper);
|
|
373
425
|
if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
374
|
-
|
|
375
|
-
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
376
|
-
if (isActive) {
|
|
377
|
-
nodeView.classList.add('show-diff-deleted-active');
|
|
378
|
-
}
|
|
379
|
-
maybeAddDeletedOutlineNewClass({
|
|
426
|
+
applyDeletedNodeMarkup({
|
|
380
427
|
nodeView: nodeView,
|
|
381
428
|
targetNode: targetNode,
|
|
382
429
|
colorScheme: colorScheme,
|
|
@@ -391,19 +438,19 @@ var wrapBlockNode = function wrapBlockNode(_ref9) {
|
|
|
391
438
|
* For heading nodes, applies styles directly to preserve natural margins.
|
|
392
439
|
* For other block nodes, uses wrapper approach with optional lozenge.
|
|
393
440
|
*/
|
|
394
|
-
export var wrapBlockNodeView = function wrapBlockNodeView(
|
|
395
|
-
var dom =
|
|
396
|
-
nodeView =
|
|
397
|
-
targetNode =
|
|
398
|
-
colorScheme =
|
|
399
|
-
intl =
|
|
400
|
-
|
|
401
|
-
isActive =
|
|
402
|
-
|
|
403
|
-
isInserted =
|
|
404
|
-
diffType =
|
|
405
|
-
|
|
406
|
-
hideAddedDiffsUnderline =
|
|
441
|
+
export var wrapBlockNodeView = function wrapBlockNodeView(_ref10) {
|
|
442
|
+
var dom = _ref10.dom,
|
|
443
|
+
nodeView = _ref10.nodeView,
|
|
444
|
+
targetNode = _ref10.targetNode,
|
|
445
|
+
colorScheme = _ref10.colorScheme,
|
|
446
|
+
intl = _ref10.intl,
|
|
447
|
+
_ref10$isActive = _ref10.isActive,
|
|
448
|
+
isActive = _ref10$isActive === void 0 ? false : _ref10$isActive,
|
|
449
|
+
_ref10$isInserted = _ref10.isInserted,
|
|
450
|
+
isInserted = _ref10$isInserted === void 0 ? false : _ref10$isInserted,
|
|
451
|
+
diffType = _ref10.diffType,
|
|
452
|
+
_ref10$hideAddedDiffs = _ref10.hideAddedDiffsUnderline,
|
|
453
|
+
hideAddedDiffsUnderline = _ref10$hideAddedDiffs === void 0 ? false : _ref10$hideAddedDiffs;
|
|
407
454
|
if (isExtendedEnabled(diffType)) {
|
|
408
455
|
if (nodeView instanceof HTMLElement) {
|
|
409
456
|
if (isInserted && isMultiContainerBlockNode(targetNode.type.name)) {
|
|
@@ -492,12 +539,12 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref0) {
|
|
|
492
539
|
* CSS backgrounds don't work when applied to a wrapper around a paragraph, so
|
|
493
540
|
* the wrapper needs to be injected inside the node around the child content.
|
|
494
541
|
*/
|
|
495
|
-
export var injectInnerWrapper = function injectInnerWrapper(
|
|
496
|
-
var node =
|
|
497
|
-
colorScheme =
|
|
498
|
-
isActive =
|
|
499
|
-
isInserted =
|
|
500
|
-
diffType =
|
|
542
|
+
export var injectInnerWrapper = function injectInnerWrapper(_ref11) {
|
|
543
|
+
var node = _ref11.node,
|
|
544
|
+
colorScheme = _ref11.colorScheme,
|
|
545
|
+
isActive = _ref11.isActive,
|
|
546
|
+
isInserted = _ref11.isInserted,
|
|
547
|
+
diffType = _ref11.diffType;
|
|
501
548
|
var wrapper = document.createElement('span');
|
|
502
549
|
wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive, diffType));
|
|
503
550
|
_toConsumableArray(node.childNodes).forEach(function (child) {
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
14
14
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
15
15
|
import { isExtendedEnabled } from '../../isExtendedEnabled';
|
|
16
|
-
import { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildAddedCellOverlayStyleNew, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildDeletedInlineContentStyle, buildDeletedInlineContentStyleExtended, buildDeletedLozengeActiveStyle, buildDeletedLozengeStyle, buildDeletedQuoteNodeWithLozengeStyle, buildDeletedStrikethroughLine, buildDeletedWrappedBlockOutline, buildInsertedBlockNodeStyle, buildInsertedInlineStyle, buildInsertStyleInBlockExtended, buildInsertStyleInBlockExtendedNoUnderline, buildInsertStyleNode } from '../colorSchemes/factory';
|
|
16
|
+
import { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildAddedCellOverlayStyleNew, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildDeletedInlineContentStyle, buildDeletedInlineContentStyleExtended, buildDeletedLozengeActiveStyle, buildDeletedLozengeStyle, buildDeletedNodeCSSVariables, buildDeletedQuoteNodeWithLozengeStyle, buildDeletedStrikethroughLine, buildDeletedWrappedBlockOutline, buildInsertedBlockNodeStyle, buildInsertedInlineStyle, buildInsertStyleInBlockExtended, buildInsertStyleInBlockExtendedNoUnderline, buildInsertStyleNode } from '../colorSchemes/factory';
|
|
17
17
|
import { colorSchemeRegistry, standardScheme } from '../colorSchemes/schemes';
|
|
18
18
|
import { getChangedContentStyleLegacy, getChangedNodeStyleLegacy, getDeletedContentStyleLegacy, getDeletedContentStyleUnboundedLegacy, getInsertedContentStyleLegacy, hasRestingDeletedRingLegacy, resolveCellOverlayStyleLegacy, resolveNestedInsertedNodeStyleLegacy, resolveRemovedLozengeStyleLegacy } from './wrapBlockNodeViewStyles.legacy';
|
|
19
19
|
var DEFAULT_COLOR_SCHEME = 'standard';
|
|
@@ -27,7 +27,6 @@ var getColorScheme = function getColorScheme(colorScheme) {
|
|
|
27
27
|
* Preserved as-is; see EDITOR-8281.
|
|
28
28
|
*/
|
|
29
29
|
var nestedContentScheme = standardScheme;
|
|
30
|
-
var lozengeStyle = buildDeletedLozengeStyle();
|
|
31
30
|
|
|
32
31
|
/**
|
|
33
32
|
* Node-name classification shared by the style resolvers below and by the routing in
|
|
@@ -118,7 +117,8 @@ var resolveCellOverlayStyleNext = function resolveCellOverlayStyleNext(_ref) {
|
|
|
118
117
|
return isInserted ? addedCellStyle : deletedCellStyle;
|
|
119
118
|
};
|
|
120
119
|
var resolveRemovedLozengeStyleNext = function resolveRemovedLozengeStyleNext(colorScheme, isActive) {
|
|
121
|
-
|
|
120
|
+
var colors = getColorScheme(colorScheme);
|
|
121
|
+
return isActive ? buildDeletedLozengeActiveStyle(colors) : buildDeletedLozengeStyle(colors);
|
|
122
122
|
};
|
|
123
123
|
var resolveNestedInsertedNodeStyleNext = function resolveNestedInsertedNodeStyleNext() {
|
|
124
124
|
return buildInsertStyleNode(nestedContentScheme);
|
|
@@ -195,4 +195,14 @@ export var resolveNestedInsertedNodeStyle = function resolveNestedInsertedNodeSt
|
|
|
195
195
|
*/
|
|
196
196
|
export var hasRestingDeletedRing = function hasRestingDeletedRing(colorScheme) {
|
|
197
197
|
return isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? hasRestingDeletedRingNext(colorScheme) : hasRestingDeletedRingLegacy(colorScheme);
|
|
198
|
+
};
|
|
199
|
+
|
|
200
|
+
/**
|
|
201
|
+
* Custom properties consumed by the `show-diff-deleted-node-vars` selectors in editor-core.
|
|
202
|
+
*
|
|
203
|
+
* No `*Legacy` counterpart: the OFF cohort emits no properties at all and takes its colours from the
|
|
204
|
+
* per-scheme selectors instead, so the gate lives at the single caller in `wrapBlockNodeView`.
|
|
205
|
+
*/
|
|
206
|
+
export var resolveDeletedNodeCSSVariables = function resolveDeletedNodeCSSVariables(colorScheme) {
|
|
207
|
+
return buildDeletedNodeCSSVariables(getColorScheme(colorScheme));
|
|
198
208
|
};
|
|
@@ -118,11 +118,8 @@ export declare function buildDeletedInlineContentStyle(colors: DiffColorScheme,
|
|
|
118
118
|
* 1px to 2px when active and tints with the border accent; 'static' uses the text accent always.
|
|
119
119
|
*/
|
|
120
120
|
export declare function buildDeletedStrikethroughLine(colors: DiffColorScheme, isActive: boolean): string;
|
|
121
|
-
/**
|
|
122
|
-
|
|
123
|
-
* so it takes no DiffColorScheme; only the active state is tinted.
|
|
124
|
-
*/
|
|
125
|
-
export declare function buildDeletedLozengeStyle(): string;
|
|
121
|
+
/** The "REMOVED" lozenge on a deleted block node — resting state, tinted with deletedLozengeColor. */
|
|
122
|
+
export declare function buildDeletedLozengeStyle(colors: DiffColorScheme): string;
|
|
126
123
|
/** The "REMOVED" lozenge — active state, tinted with the scheme's deleteActiveColor. */
|
|
127
124
|
export declare function buildDeletedLozengeActiveStyle(colors: DiffColorScheme): string;
|
|
128
125
|
/** The decoration shape an inserted block node takes. Determined by node type, not by scheme. */
|
|
@@ -170,11 +167,26 @@ export declare function buildDeletedWrappedBlockOutline(colors: DiffColorScheme,
|
|
|
170
167
|
*/
|
|
171
168
|
export declare function buildAtomicInlineChangedCSSVariables(colors: DiffColorScheme): string;
|
|
172
169
|
/**
|
|
173
|
-
* Deleted-node wrapper variables, one per visual role in editor-core's `showDiffDeletedNodeStyles
|
|
174
|
-
*
|
|
170
|
+
* Deleted-node wrapper variables, one per visual role in editor-core's `showDiffDeletedNodeStyles`.
|
|
171
|
+
* Emitted by `wrapBlockNodeView` alongside `show-diff-deleted-node-vars` — the class is named for
|
|
172
|
+
* these properties — so one set of selectors in editor-core covers both schemes.
|
|
173
|
+
*
|
|
174
|
+
* The three `stateful`-only variables are omitted for `static` (standard) so editor-core's fallback
|
|
175
|
+
* wins, which is what standard rendered before:
|
|
176
|
+
* - `--diff-delete-opacity` — the fallback is 0.6 or 0.8 depending on
|
|
177
|
+
* `platform_editor_enghealth_a11y_jan_fixes`, a split the scheme must not flatten.
|
|
178
|
+
* - `--diff-delete-ring-width` — traditional's deleted media ring tracks the inherited marker ring
|
|
179
|
+
* width instead of a fixed 1px.
|
|
180
|
+
* - `--diff-delete-text-decoration-color` — standard's blockquote strike must stay `currentColor`.
|
|
181
|
+
*
|
|
182
|
+
* `--diff-delete-media-ring-color` is emitted for every scheme: the a11y-fixes treatment rings
|
|
183
|
+
* deleted media red even where `deleteColor` is gray, so it needs its own role.
|
|
184
|
+
*
|
|
185
|
+
* `--diff-delete-embed-strike-line` carries the *presence* of the deleted-embedCard strike, not its
|
|
186
|
+
* colour — standard draws none. Encoding it as `line-through`/`none` is what lets the ON cohort drop
|
|
187
|
+
* the `-traditional` class entirely.
|
|
175
188
|
*
|
|
176
|
-
*
|
|
177
|
-
*
|
|
178
|
-
* driven by `platform_editor_enghealth_a11y_jan_fixes`, not by the scheme.
|
|
189
|
+
* Only reached when `platform_editor_show_diff_color_scheme_refactor` is on; the OFF cohort takes
|
|
190
|
+
* its values from the per-scheme selectors in editor-core instead.
|
|
179
191
|
*/
|
|
180
192
|
export declare function buildDeletedNodeCSSVariables(colors: DiffColorScheme): string;
|
|
@@ -21,8 +21,22 @@ export type DiffColorScheme = {
|
|
|
21
21
|
deletedCellBorderProminence: 'subtle' | 'accent';
|
|
22
22
|
/** Deleted cell overlays. Gray in both current schemes. */
|
|
23
23
|
deletedCellColor: AdsAccentColor;
|
|
24
|
+
/** Opacity of the deleted cell overlay background. Counterpart to `insertedCellOpacity`. */
|
|
25
|
+
deletedCellOpacity: number;
|
|
24
26
|
/** Deleted inline content: tint the strikethrough, or tint and dim the glyph itself. */
|
|
25
27
|
deletedInlineTreatment: 'strikethrough' | 'glyphTint';
|
|
28
|
+
/** Resting "REMOVED" lozenge tint. Gray in both current schemes; the active state uses `deleteActiveColor`. */
|
|
29
|
+
deletedLozengeColor: AdsAccentColor;
|
|
30
|
+
/**
|
|
31
|
+
* "REMOVED" lozenge label, in both states: a fixed inverse tone that reads on any tint, or the
|
|
32
|
+
* accent text colour matching `deletedLozengeColor`.
|
|
33
|
+
*/
|
|
34
|
+
deletedLozengeTextTone: 'inverse' | 'accent';
|
|
35
|
+
/**
|
|
36
|
+
* Resting ring colour for a deleted media/embed card under the a11y-fixes treatment. Its own role
|
|
37
|
+
* rather than a derivation of `deleteColor`: that treatment rings red even for gray deletes.
|
|
38
|
+
*/
|
|
39
|
+
deletedMediaRingColor: AdsAccentColor;
|
|
26
40
|
/** Deleted block ring: 4px stateful ring plus marker variables, or one resting treatment. */
|
|
27
41
|
deletedNodeEmphasis: 'stateful' | 'static';
|
|
28
42
|
/** Active deleted-blockquote ring tone, for the nodeview-wrapped case only. */
|
|
@@ -45,4 +59,6 @@ export type DiffColorScheme = {
|
|
|
45
59
|
insertUnderlineStyle: 'solid' | 'dotted';
|
|
46
60
|
/** Whether the rounded added-cell overlay inherits the cell's `border`. Deleted always does. */
|
|
47
61
|
roundedAddedCellOverlayInheritsBorder: boolean;
|
|
62
|
+
/** Whether a deleted embedCard gets a strike at all. Standard draws none. */
|
|
63
|
+
strikesDeletedEmbedCard: boolean;
|
|
48
64
|
};
|
|
@@ -37,3 +37,10 @@ export declare const resolveNestedInsertedNodeStyle: () => string;
|
|
|
37
37
|
* is what the `show-diff-deleted-outline-new` class styles in editor-core's smartCardStyles.
|
|
38
38
|
*/
|
|
39
39
|
export declare const hasRestingDeletedRing: (colorScheme?: ColorScheme) => boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Custom properties consumed by the `show-diff-deleted-node-vars` selectors in editor-core.
|
|
42
|
+
*
|
|
43
|
+
* No `*Legacy` counterpart: the OFF cohort emits no properties at all and takes its colours from the
|
|
44
|
+
* per-scheme selectors instead, so the gate lives at the single caller in `wrapBlockNodeView`.
|
|
45
|
+
*/
|
|
46
|
+
export declare const resolveDeletedNodeCSSVariables: (colorScheme?: ColorScheme) => string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-show-diff",
|
|
3
|
-
"version": "14.0.
|
|
3
|
+
"version": "14.0.2",
|
|
4
4
|
"description": "ShowDiff plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@atlaskit/editor-tables": "^3.0.0",
|
|
29
29
|
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
30
30
|
"@atlaskit/platform-feature-flags": "^2.1.0",
|
|
31
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
31
|
+
"@atlaskit/tmp-editor-statsig": "^161.0.0",
|
|
32
32
|
"@atlaskit/tokens": "^16.8.0",
|
|
33
33
|
"@babel/runtime": "^7.0.0",
|
|
34
34
|
"@compiled/react": "^1.0.2",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@atlaskit/button": "^25.2.0",
|
|
42
42
|
"@atlaskit/css": "^1.0.0",
|
|
43
43
|
"@atlaskit/dropdown-menu": "^18.2.0",
|
|
44
|
-
"@atlaskit/editor-core": "^
|
|
44
|
+
"@atlaskit/editor-core": "^226.0.0",
|
|
45
45
|
"@atlaskit/editor-json-transformer": "^9.6.0",
|
|
46
46
|
"@atlaskit/editor-plugins": "^16.1.0",
|
|
47
47
|
"@atlaskit/form": "^17.1.0",
|
|
@@ -52,14 +52,14 @@
|
|
|
52
52
|
"@atlaskit/util-data-test": "^19.1.0",
|
|
53
53
|
"@atlassian/confluence-presets": "workspace:^",
|
|
54
54
|
"@atlassian/content-reconciliation": "^0.1.3506",
|
|
55
|
-
"@atlassian/editor-ai-injected-editors": "^
|
|
55
|
+
"@atlassian/editor-ai-injected-editors": "^30.0.0",
|
|
56
56
|
"@atlassian/editor-plugin-ai": "^70.0.0",
|
|
57
57
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
58
58
|
"react": "^19.2.0",
|
|
59
59
|
"react-intl": "^7.0.0"
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
62
|
-
"@atlaskit/editor-common": "^120.
|
|
62
|
+
"@atlaskit/editor-common": "^120.1.0",
|
|
63
63
|
"react": "^18.2.0 || ^19.2.0"
|
|
64
64
|
},
|
|
65
65
|
"techstack": {
|