@atlaskit/editor-plugin-show-diff 3.2.7 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/cjs/pm-plugins/deletedBlocksHandler.js +96 -21
- package/dist/es2019/pm-plugins/deletedBlocksHandler.js +91 -19
- package/dist/esm/pm-plugins/deletedBlocksHandler.js +94 -20
- package/dist/types/pm-plugins/deletedBlocksHandler.d.ts +15 -4
- package/dist/types-ts4.5/pm-plugins/deletedBlocksHandler.d.ts +15 -4
- package/package.json +7 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-show-diff
|
|
2
2
|
|
|
3
|
+
## 3.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`a36ac8c9961b1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a36ac8c9961b1) -
|
|
8
|
+
[ux] [EDITOR-2608] updated show diff deleted block nodes design
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
14
|
+
## 3.2.8
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- [`e3779b75fdeca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3779b75fdeca) -
|
|
19
|
+
EDITOR-1643 Promote syncBlock and bodiedSyncBlock to full schema
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 3.2.7
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -1,23 +1,52 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
|
-
exports.shouldShowRemovedLozenge = exports.shouldApplyDeletedStylesDirectly = exports.shouldAddShowDiffDeletedNodeClass = exports.handleMediaSingleWithLozenge = exports.handleBlockNodeView = exports.getDeletedStyleNode = exports.deletedStyleQuoteNode = exports.deletedBlockOutlineRounded = exports.deletedBlockOutline = exports.createRemovedLozenge = exports.createDeletedStyleWrapperWithoutOpacity = exports.createBlockNodeWrapper = exports.createBlockNodeContentWrapper = exports.applyDeletedStylesToElement = exports.appendBlockNodeWithWrapper = void 0;
|
|
7
|
+
exports.shouldShowRemovedLozenge = exports.shouldApplyDeletedStylesDirectly = exports.shouldAddShowDiffDeletedNodeClass = exports.handleMediaSingleWithLozenge = exports.handleEmbedCardWithLozenge = exports.handleBlockNodeView = exports.getDeletedStyleNode = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutline = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedBlockOutlineRounded = exports.deletedBlockOutline = exports.createRemovedLozenge = exports.createDeletedStyleWrapperWithoutOpacity = exports.createBlockNodeWrapper = exports.createBlockNodeContentWrapper = exports.applyDeletedStylesToElement = exports.appendBlockNodeWithWrapper = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
7
9
|
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
8
10
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
11
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
9
12
|
var _decorations = require("./decorations");
|
|
13
|
+
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; }
|
|
14
|
+
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; }
|
|
10
15
|
var deletedStyleQuoteNode = exports.deletedStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
|
|
11
16
|
borderLeft: "2px solid ".concat("var(--ds-border-accent-gray, #7D818A)")
|
|
12
17
|
});
|
|
18
|
+
var deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNodeWithLozenge = (0, _lazyNodeView.convertToInlineCss)({
|
|
19
|
+
marginTop: "var(--ds-space-150, 12px)",
|
|
20
|
+
paddingTop: "var(--ds-space-025, 2px)",
|
|
21
|
+
paddingBottom: "var(--ds-space-025, 2px)",
|
|
22
|
+
paddingLeft: "var(--ds-space-025, 2px)",
|
|
23
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
|
|
24
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
25
|
+
});
|
|
26
|
+
var deletedTraditionalStyleQuoteNode = exports.deletedTraditionalStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
|
|
27
|
+
marginTop: "var(--ds-space-150, 12px)",
|
|
28
|
+
paddingTop: "var(--ds-space-025, 2px)",
|
|
29
|
+
paddingBottom: "var(--ds-space-025, 2px)",
|
|
30
|
+
paddingLeft: "var(--ds-space-025, 2px)",
|
|
31
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
32
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
33
|
+
});
|
|
13
34
|
var deletedBlockOutline = exports.deletedBlockOutline = (0, _lazyNodeView.convertToInlineCss)({
|
|
14
35
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
|
|
15
36
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
16
37
|
});
|
|
38
|
+
var deletedTraditionalBlockOutline = exports.deletedTraditionalBlockOutline = (0, _lazyNodeView.convertToInlineCss)({
|
|
39
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
40
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
41
|
+
});
|
|
17
42
|
var deletedBlockOutlineRounded = exports.deletedBlockOutlineRounded = (0, _lazyNodeView.convertToInlineCss)({
|
|
18
43
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
|
|
19
44
|
borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
|
|
20
45
|
});
|
|
46
|
+
var deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineRounded = (0, _lazyNodeView.convertToInlineCss)({
|
|
47
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
48
|
+
borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
|
|
49
|
+
});
|
|
21
50
|
var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
|
|
22
51
|
display: 'inline-flex',
|
|
23
52
|
boxSizing: 'border-box',
|
|
@@ -34,16 +63,17 @@ var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
|
|
|
34
63
|
whiteSpace: 'nowrap',
|
|
35
64
|
color: "var(--ds-text-warning-inverse, #292A2E)"
|
|
36
65
|
});
|
|
37
|
-
var getDeletedStyleNode = exports.getDeletedStyleNode = function getDeletedStyleNode(nodeName) {
|
|
66
|
+
var getDeletedStyleNode = exports.getDeletedStyleNode = function getDeletedStyleNode(nodeName, colourScheme) {
|
|
67
|
+
var isTraditional = colourScheme === 'traditional';
|
|
38
68
|
switch (nodeName) {
|
|
39
69
|
case 'blockquote':
|
|
40
|
-
return deletedStyleQuoteNode;
|
|
70
|
+
return (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge : deletedStyleQuoteNode;
|
|
41
71
|
case 'expand':
|
|
42
72
|
case 'decisionList':
|
|
43
|
-
return deletedBlockOutline;
|
|
73
|
+
return isTraditional && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutline : deletedBlockOutline;
|
|
44
74
|
case 'panel':
|
|
45
75
|
case 'codeBlock':
|
|
46
|
-
return deletedBlockOutlineRounded;
|
|
76
|
+
return isTraditional && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutlineRounded : deletedBlockOutlineRounded;
|
|
47
77
|
default:
|
|
48
78
|
return undefined;
|
|
49
79
|
}
|
|
@@ -56,6 +86,9 @@ var shouldShowRemovedLozenge = exports.shouldShowRemovedLozenge = function shoul
|
|
|
56
86
|
case 'panel':
|
|
57
87
|
case 'decisionList':
|
|
58
88
|
return true;
|
|
89
|
+
case 'embedCard':
|
|
90
|
+
case 'blockquote':
|
|
91
|
+
return (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers');
|
|
59
92
|
default:
|
|
60
93
|
return false;
|
|
61
94
|
}
|
|
@@ -65,6 +98,8 @@ var shouldAddShowDiffDeletedNodeClass = exports.shouldAddShowDiffDeletedNodeClas
|
|
|
65
98
|
case 'mediaSingle':
|
|
66
99
|
case 'embedCard':
|
|
67
100
|
return true;
|
|
101
|
+
case 'blockquote':
|
|
102
|
+
return (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers');
|
|
68
103
|
default:
|
|
69
104
|
return false;
|
|
70
105
|
}
|
|
@@ -75,7 +110,7 @@ var shouldAddShowDiffDeletedNodeClass = exports.shouldAddShowDiffDeletedNodeClas
|
|
|
75
110
|
* to preserve natural block-level margins
|
|
76
111
|
*/
|
|
77
112
|
var shouldApplyDeletedStylesDirectly = exports.shouldApplyDeletedStylesDirectly = function shouldApplyDeletedStylesDirectly(nodeName) {
|
|
78
|
-
return nodeName === '
|
|
113
|
+
return nodeName === 'heading' || nodeName === 'blockquote' && !(0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers');
|
|
79
114
|
};
|
|
80
115
|
|
|
81
116
|
/**
|
|
@@ -89,16 +124,17 @@ var createRemovedLozenge = exports.createRemovedLozenge = function createRemoved
|
|
|
89
124
|
} else if (['panel', 'codeBlock', 'mediaSingle'].includes(nodeName || '')) {
|
|
90
125
|
borderTopRightRadius = "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)");
|
|
91
126
|
}
|
|
92
|
-
var containerStyle = (0, _lazyNodeView.convertToInlineCss)({
|
|
127
|
+
var containerStyle = (0, _lazyNodeView.convertToInlineCss)(_objectSpread({
|
|
93
128
|
position: 'absolute',
|
|
94
|
-
top: "var(--ds-space-0, 0px)",
|
|
95
|
-
right: "var(--ds-space-0, 0px)",
|
|
129
|
+
top: (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? "var(--ds-space-075, 6px)" : "var(--ds-space-0, 0px)",
|
|
130
|
+
right: (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? "var(--ds-space-075, 6px)" : "var(--ds-space-0, 0px)",
|
|
96
131
|
zIndex: 2,
|
|
97
132
|
pointerEvents: 'none',
|
|
98
|
-
display: 'flex'
|
|
133
|
+
display: 'flex'
|
|
134
|
+
}, !(0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? {
|
|
99
135
|
overflow: 'hidden',
|
|
100
136
|
borderTopRightRadius: borderTopRightRadius
|
|
101
|
-
});
|
|
137
|
+
} : {}));
|
|
102
138
|
container.setAttribute('style', containerStyle);
|
|
103
139
|
container.setAttribute('data-testid', 'show-diff-removed-lozenge');
|
|
104
140
|
|
|
@@ -113,7 +149,7 @@ var createRemovedLozenge = exports.createRemovedLozenge = function createRemoved
|
|
|
113
149
|
/**
|
|
114
150
|
* Wraps a block node in a container with relative positioning to support absolute positioned lozenge
|
|
115
151
|
*/
|
|
116
|
-
var createBlockNodeWrapper = exports.createBlockNodeWrapper = function createBlockNodeWrapper(
|
|
152
|
+
var createBlockNodeWrapper = exports.createBlockNodeWrapper = function createBlockNodeWrapper() {
|
|
117
153
|
var wrapper = document.createElement('div');
|
|
118
154
|
var baseStyle = (0, _lazyNodeView.convertToInlineCss)({
|
|
119
155
|
position: 'relative',
|
|
@@ -139,7 +175,7 @@ var createDeletedStyleWrapperWithoutOpacity = exports.createDeletedStyleWrapperW
|
|
|
139
175
|
var applyDeletedStylesToElement = exports.applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colourScheme) {
|
|
140
176
|
var currentStyle = element.getAttribute('style') || '';
|
|
141
177
|
var deletedContentStyle = (0, _decorations.getDeletedContentStyle)(colourScheme);
|
|
142
|
-
var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name) || '';
|
|
178
|
+
var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colourScheme) || '';
|
|
143
179
|
element.setAttribute('style', "".concat(currentStyle).concat(deletedContentStyle).concat(nodeSpecificStyle));
|
|
144
180
|
};
|
|
145
181
|
|
|
@@ -148,17 +184,51 @@ var applyDeletedStylesToElement = exports.applyDeletedStylesToElement = function
|
|
|
148
184
|
*/
|
|
149
185
|
var createBlockNodeContentWrapper = exports.createBlockNodeContentWrapper = function createBlockNodeContentWrapper(nodeView, targetNode, colourScheme) {
|
|
150
186
|
var contentWrapper = document.createElement('div');
|
|
151
|
-
var nodeStyle = getDeletedStyleNode(targetNode.type.name);
|
|
187
|
+
var nodeStyle = getDeletedStyleNode(targetNode.type.name, colourScheme);
|
|
152
188
|
contentWrapper.setAttribute('style', "".concat((0, _decorations.getDeletedContentStyle)(colourScheme)).concat(nodeStyle || ''));
|
|
153
189
|
contentWrapper.append(nodeView);
|
|
154
190
|
return contentWrapper;
|
|
155
191
|
};
|
|
156
192
|
|
|
193
|
+
/**
|
|
194
|
+
* Handles embedCard node rendering with lozenge attached to the rich-media-item container.
|
|
195
|
+
* Since embedCard content loads asynchronously, we use a MutationObserver
|
|
196
|
+
* to wait for the rich-media-item to appear before attaching the lozenge.
|
|
197
|
+
* @returns true if embedCard was handled
|
|
198
|
+
*/
|
|
199
|
+
var handleEmbedCardWithLozenge = exports.handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) {
|
|
200
|
+
if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
|
|
201
|
+
return false;
|
|
202
|
+
}
|
|
203
|
+
var richMediaItem = nodeView.querySelector('.rich-media-item');
|
|
204
|
+
if (richMediaItem instanceof HTMLElement) {
|
|
205
|
+
richMediaItem.appendChild(lozenge);
|
|
206
|
+
} else {
|
|
207
|
+
var observer = new MutationObserver(function (_, obs) {
|
|
208
|
+
var loadedRichMedia = nodeView.querySelector('.rich-media-item');
|
|
209
|
+
if (loadedRichMedia instanceof HTMLElement) {
|
|
210
|
+
loadedRichMedia.appendChild(lozenge);
|
|
211
|
+
obs.disconnect();
|
|
212
|
+
}
|
|
213
|
+
});
|
|
214
|
+
observer.observe(nodeView, {
|
|
215
|
+
childList: true,
|
|
216
|
+
subtree: true
|
|
217
|
+
});
|
|
218
|
+
}
|
|
219
|
+
if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
220
|
+
var showDiffDeletedNodeClass = colourScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
|
|
221
|
+
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
222
|
+
}
|
|
223
|
+
dom.append(nodeView);
|
|
224
|
+
return true;
|
|
225
|
+
};
|
|
226
|
+
|
|
157
227
|
/**
|
|
158
228
|
* Handles special mediaSingle node rendering with lozenge on child media element
|
|
159
229
|
* @returns true if mediaSingle was handled, false otherwise
|
|
160
230
|
*/
|
|
161
|
-
var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge) {
|
|
231
|
+
var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) {
|
|
162
232
|
if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
|
|
163
233
|
return false;
|
|
164
234
|
}
|
|
@@ -177,7 +247,8 @@ var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = functi
|
|
|
177
247
|
|
|
178
248
|
// Add deleted node class if needed
|
|
179
249
|
if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
180
|
-
|
|
250
|
+
var showDiffDeletedNodeClass = colourScheme === 'traditional' && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
|
|
251
|
+
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
181
252
|
}
|
|
182
253
|
dom.append(nodeView);
|
|
183
254
|
return true;
|
|
@@ -187,10 +258,13 @@ var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = functi
|
|
|
187
258
|
* Appends a block node with wrapper, lozenge, and appropriate styling
|
|
188
259
|
*/
|
|
189
260
|
var appendBlockNodeWithWrapper = exports.appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeView, targetNode, colourScheme, intl) {
|
|
190
|
-
var blockWrapper = createBlockNodeWrapper(
|
|
261
|
+
var blockWrapper = createBlockNodeWrapper();
|
|
191
262
|
if (shouldShowRemovedLozenge(targetNode.type.name)) {
|
|
192
|
-
var lozenge = createRemovedLozenge(intl
|
|
193
|
-
if (
|
|
263
|
+
var lozenge = createRemovedLozenge(intl);
|
|
264
|
+
if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers')) {
|
|
265
|
+
return;
|
|
266
|
+
}
|
|
267
|
+
if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme)) {
|
|
194
268
|
return;
|
|
195
269
|
}
|
|
196
270
|
blockWrapper.append(lozenge);
|
|
@@ -198,14 +272,15 @@ var appendBlockNodeWithWrapper = exports.appendBlockNodeWithWrapper = function a
|
|
|
198
272
|
var contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colourScheme);
|
|
199
273
|
blockWrapper.append(contentWrapper);
|
|
200
274
|
if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
201
|
-
|
|
275
|
+
var showDiffDeletedNodeClass = colourScheme === 'traditional' && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
|
|
276
|
+
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
202
277
|
}
|
|
203
278
|
dom.append(blockWrapper);
|
|
204
279
|
};
|
|
205
280
|
|
|
206
281
|
/**
|
|
207
282
|
* Handles all block node rendering with appropriate deleted styling.
|
|
208
|
-
* For
|
|
283
|
+
* For heading nodes, applies styles directly to preserve natural margins.
|
|
209
284
|
* For other block nodes, uses wrapper approach with optional lozenge.
|
|
210
285
|
*/
|
|
211
286
|
var handleBlockNodeView = exports.handleBlockNodeView = function handleBlockNodeView(dom, nodeView, targetNode, colourScheme, intl) {
|
|
@@ -1,17 +1,42 @@
|
|
|
1
1
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
2
2
|
import { trackChangesMessages } from '@atlaskit/editor-common/messages';
|
|
3
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
4
|
import { getDeletedContentStyle } from './decorations';
|
|
4
5
|
export const deletedStyleQuoteNode = convertToInlineCss({
|
|
5
6
|
borderLeft: `2px solid ${"var(--ds-border-accent-gray, #7D818A)"}`
|
|
6
7
|
});
|
|
8
|
+
export const deletedStyleQuoteNodeWithLozenge = convertToInlineCss({
|
|
9
|
+
marginTop: "var(--ds-space-150, 12px)",
|
|
10
|
+
paddingTop: "var(--ds-space-025, 2px)",
|
|
11
|
+
paddingBottom: "var(--ds-space-025, 2px)",
|
|
12
|
+
paddingLeft: "var(--ds-space-025, 2px)",
|
|
13
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #7D818A)"}`,
|
|
14
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
15
|
+
});
|
|
16
|
+
export const deletedTraditionalStyleQuoteNode = convertToInlineCss({
|
|
17
|
+
marginTop: "var(--ds-space-150, 12px)",
|
|
18
|
+
paddingTop: "var(--ds-space-025, 2px)",
|
|
19
|
+
paddingBottom: "var(--ds-space-025, 2px)",
|
|
20
|
+
paddingLeft: "var(--ds-space-025, 2px)",
|
|
21
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
|
|
22
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
23
|
+
});
|
|
7
24
|
export const deletedBlockOutline = convertToInlineCss({
|
|
8
25
|
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #7D818A)"}`,
|
|
9
26
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
10
27
|
});
|
|
28
|
+
export const deletedTraditionalBlockOutline = convertToInlineCss({
|
|
29
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
|
|
30
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
31
|
+
});
|
|
11
32
|
export const deletedBlockOutlineRounded = convertToInlineCss({
|
|
12
33
|
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #7D818A)"}`,
|
|
13
34
|
borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
|
|
14
35
|
});
|
|
36
|
+
export const deletedTraditionalBlockOutlineRounded = convertToInlineCss({
|
|
37
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
|
|
38
|
+
borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
|
|
39
|
+
});
|
|
15
40
|
const lozengeStyle = convertToInlineCss({
|
|
16
41
|
display: 'inline-flex',
|
|
17
42
|
boxSizing: 'border-box',
|
|
@@ -28,16 +53,17 @@ const lozengeStyle = convertToInlineCss({
|
|
|
28
53
|
whiteSpace: 'nowrap',
|
|
29
54
|
color: "var(--ds-text-warning-inverse, #292A2E)"
|
|
30
55
|
});
|
|
31
|
-
export const getDeletedStyleNode = nodeName => {
|
|
56
|
+
export const getDeletedStyleNode = (nodeName, colourScheme) => {
|
|
57
|
+
const isTraditional = colourScheme === 'traditional';
|
|
32
58
|
switch (nodeName) {
|
|
33
59
|
case 'blockquote':
|
|
34
|
-
return deletedStyleQuoteNode;
|
|
60
|
+
return fg('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge : deletedStyleQuoteNode;
|
|
35
61
|
case 'expand':
|
|
36
62
|
case 'decisionList':
|
|
37
|
-
return deletedBlockOutline;
|
|
63
|
+
return isTraditional && fg('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutline : deletedBlockOutline;
|
|
38
64
|
case 'panel':
|
|
39
65
|
case 'codeBlock':
|
|
40
|
-
return deletedBlockOutlineRounded;
|
|
66
|
+
return isTraditional && fg('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutlineRounded : deletedBlockOutlineRounded;
|
|
41
67
|
default:
|
|
42
68
|
return undefined;
|
|
43
69
|
}
|
|
@@ -50,6 +76,9 @@ export const shouldShowRemovedLozenge = nodeName => {
|
|
|
50
76
|
case 'panel':
|
|
51
77
|
case 'decisionList':
|
|
52
78
|
return true;
|
|
79
|
+
case 'embedCard':
|
|
80
|
+
case 'blockquote':
|
|
81
|
+
return fg('platform_editor_ai_aifc_patch_ga_blockers');
|
|
53
82
|
default:
|
|
54
83
|
return false;
|
|
55
84
|
}
|
|
@@ -59,6 +88,8 @@ export const shouldAddShowDiffDeletedNodeClass = nodeName => {
|
|
|
59
88
|
case 'mediaSingle':
|
|
60
89
|
case 'embedCard':
|
|
61
90
|
return true;
|
|
91
|
+
case 'blockquote':
|
|
92
|
+
return fg('platform_editor_ai_aifc_patch_ga_blockers');
|
|
62
93
|
default:
|
|
63
94
|
return false;
|
|
64
95
|
}
|
|
@@ -69,7 +100,7 @@ export const shouldAddShowDiffDeletedNodeClass = nodeName => {
|
|
|
69
100
|
* to preserve natural block-level margins
|
|
70
101
|
*/
|
|
71
102
|
export const shouldApplyDeletedStylesDirectly = nodeName => {
|
|
72
|
-
return nodeName === '
|
|
103
|
+
return nodeName === 'heading' || nodeName === 'blockquote' && !fg('platform_editor_ai_aifc_patch_ga_blockers');
|
|
73
104
|
};
|
|
74
105
|
|
|
75
106
|
/**
|
|
@@ -85,13 +116,15 @@ export const createRemovedLozenge = (intl, nodeName) => {
|
|
|
85
116
|
}
|
|
86
117
|
const containerStyle = convertToInlineCss({
|
|
87
118
|
position: 'absolute',
|
|
88
|
-
top: "var(--ds-space-0, 0px)",
|
|
89
|
-
right: "var(--ds-space-0, 0px)",
|
|
119
|
+
top: fg('platform_editor_ai_aifc_patch_ga_blockers') ? "var(--ds-space-075, 6px)" : "var(--ds-space-0, 0px)",
|
|
120
|
+
right: fg('platform_editor_ai_aifc_patch_ga_blockers') ? "var(--ds-space-075, 6px)" : "var(--ds-space-0, 0px)",
|
|
90
121
|
zIndex: 2,
|
|
91
122
|
pointerEvents: 'none',
|
|
92
123
|
display: 'flex',
|
|
93
|
-
|
|
94
|
-
|
|
124
|
+
...(!fg('platform_editor_ai_aifc_patch_ga_blockers') ? {
|
|
125
|
+
overflow: 'hidden',
|
|
126
|
+
borderTopRightRadius
|
|
127
|
+
} : {})
|
|
95
128
|
});
|
|
96
129
|
container.setAttribute('style', containerStyle);
|
|
97
130
|
container.setAttribute('data-testid', 'show-diff-removed-lozenge');
|
|
@@ -107,7 +140,7 @@ export const createRemovedLozenge = (intl, nodeName) => {
|
|
|
107
140
|
/**
|
|
108
141
|
* Wraps a block node in a container with relative positioning to support absolute positioned lozenge
|
|
109
142
|
*/
|
|
110
|
-
export const createBlockNodeWrapper =
|
|
143
|
+
export const createBlockNodeWrapper = () => {
|
|
111
144
|
const wrapper = document.createElement('div');
|
|
112
145
|
const baseStyle = convertToInlineCss({
|
|
113
146
|
position: 'relative',
|
|
@@ -133,7 +166,7 @@ export const createDeletedStyleWrapperWithoutOpacity = colourScheme => {
|
|
|
133
166
|
export const applyDeletedStylesToElement = (element, targetNode, colourScheme) => {
|
|
134
167
|
const currentStyle = element.getAttribute('style') || '';
|
|
135
168
|
const deletedContentStyle = getDeletedContentStyle(colourScheme);
|
|
136
|
-
const nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name) || '';
|
|
169
|
+
const nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colourScheme) || '';
|
|
137
170
|
element.setAttribute('style', `${currentStyle}${deletedContentStyle}${nodeSpecificStyle}`);
|
|
138
171
|
};
|
|
139
172
|
|
|
@@ -142,17 +175,51 @@ export const applyDeletedStylesToElement = (element, targetNode, colourScheme) =
|
|
|
142
175
|
*/
|
|
143
176
|
export const createBlockNodeContentWrapper = (nodeView, targetNode, colourScheme) => {
|
|
144
177
|
const contentWrapper = document.createElement('div');
|
|
145
|
-
const nodeStyle = getDeletedStyleNode(targetNode.type.name);
|
|
178
|
+
const nodeStyle = getDeletedStyleNode(targetNode.type.name, colourScheme);
|
|
146
179
|
contentWrapper.setAttribute('style', `${getDeletedContentStyle(colourScheme)}${nodeStyle || ''}`);
|
|
147
180
|
contentWrapper.append(nodeView);
|
|
148
181
|
return contentWrapper;
|
|
149
182
|
};
|
|
150
183
|
|
|
184
|
+
/**
|
|
185
|
+
* Handles embedCard node rendering with lozenge attached to the rich-media-item container.
|
|
186
|
+
* Since embedCard content loads asynchronously, we use a MutationObserver
|
|
187
|
+
* to wait for the rich-media-item to appear before attaching the lozenge.
|
|
188
|
+
* @returns true if embedCard was handled
|
|
189
|
+
*/
|
|
190
|
+
export const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge, colourScheme) => {
|
|
191
|
+
if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
|
|
192
|
+
return false;
|
|
193
|
+
}
|
|
194
|
+
const richMediaItem = nodeView.querySelector('.rich-media-item');
|
|
195
|
+
if (richMediaItem instanceof HTMLElement) {
|
|
196
|
+
richMediaItem.appendChild(lozenge);
|
|
197
|
+
} else {
|
|
198
|
+
const observer = new MutationObserver((_, obs) => {
|
|
199
|
+
const loadedRichMedia = nodeView.querySelector('.rich-media-item');
|
|
200
|
+
if (loadedRichMedia instanceof HTMLElement) {
|
|
201
|
+
loadedRichMedia.appendChild(lozenge);
|
|
202
|
+
obs.disconnect();
|
|
203
|
+
}
|
|
204
|
+
});
|
|
205
|
+
observer.observe(nodeView, {
|
|
206
|
+
childList: true,
|
|
207
|
+
subtree: true
|
|
208
|
+
});
|
|
209
|
+
}
|
|
210
|
+
if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
211
|
+
const showDiffDeletedNodeClass = colourScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
|
|
212
|
+
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
213
|
+
}
|
|
214
|
+
dom.append(nodeView);
|
|
215
|
+
return true;
|
|
216
|
+
};
|
|
217
|
+
|
|
151
218
|
/**
|
|
152
219
|
* Handles special mediaSingle node rendering with lozenge on child media element
|
|
153
220
|
* @returns true if mediaSingle was handled, false otherwise
|
|
154
221
|
*/
|
|
155
|
-
export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge) => {
|
|
222
|
+
export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge, colourScheme) => {
|
|
156
223
|
if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
|
|
157
224
|
return false;
|
|
158
225
|
}
|
|
@@ -171,7 +238,8 @@ export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge)
|
|
|
171
238
|
|
|
172
239
|
// Add deleted node class if needed
|
|
173
240
|
if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
174
|
-
|
|
241
|
+
const showDiffDeletedNodeClass = colourScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
|
|
242
|
+
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
175
243
|
}
|
|
176
244
|
dom.append(nodeView);
|
|
177
245
|
return true;
|
|
@@ -181,10 +249,13 @@ export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge)
|
|
|
181
249
|
* Appends a block node with wrapper, lozenge, and appropriate styling
|
|
182
250
|
*/
|
|
183
251
|
export const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colourScheme, intl) => {
|
|
184
|
-
const blockWrapper = createBlockNodeWrapper(
|
|
252
|
+
const blockWrapper = createBlockNodeWrapper();
|
|
185
253
|
if (shouldShowRemovedLozenge(targetNode.type.name)) {
|
|
186
|
-
const lozenge = createRemovedLozenge(intl
|
|
187
|
-
if (
|
|
254
|
+
const lozenge = createRemovedLozenge(intl);
|
|
255
|
+
if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) && fg('platform_editor_ai_aifc_patch_ga_blockers')) {
|
|
256
|
+
return;
|
|
257
|
+
}
|
|
258
|
+
if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme)) {
|
|
188
259
|
return;
|
|
189
260
|
}
|
|
190
261
|
blockWrapper.append(lozenge);
|
|
@@ -192,14 +263,15 @@ export const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colourSche
|
|
|
192
263
|
const contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colourScheme);
|
|
193
264
|
blockWrapper.append(contentWrapper);
|
|
194
265
|
if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
195
|
-
|
|
266
|
+
const showDiffDeletedNodeClass = colourScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
|
|
267
|
+
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
196
268
|
}
|
|
197
269
|
dom.append(blockWrapper);
|
|
198
270
|
};
|
|
199
271
|
|
|
200
272
|
/**
|
|
201
273
|
* Handles all block node rendering with appropriate deleted styling.
|
|
202
|
-
* For
|
|
274
|
+
* For heading nodes, applies styles directly to preserve natural margins.
|
|
203
275
|
* For other block nodes, uses wrapper approach with optional lozenge.
|
|
204
276
|
*/
|
|
205
277
|
export const handleBlockNodeView = (dom, nodeView, targetNode, colourScheme, intl) => {
|
|
@@ -1,17 +1,45 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
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
|
+
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; }
|
|
1
4
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
2
5
|
import { trackChangesMessages } from '@atlaskit/editor-common/messages';
|
|
6
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
7
|
import { getDeletedContentStyle } from './decorations';
|
|
4
8
|
export var deletedStyleQuoteNode = convertToInlineCss({
|
|
5
9
|
borderLeft: "2px solid ".concat("var(--ds-border-accent-gray, #7D818A)")
|
|
6
10
|
});
|
|
11
|
+
export var deletedStyleQuoteNodeWithLozenge = convertToInlineCss({
|
|
12
|
+
marginTop: "var(--ds-space-150, 12px)",
|
|
13
|
+
paddingTop: "var(--ds-space-025, 2px)",
|
|
14
|
+
paddingBottom: "var(--ds-space-025, 2px)",
|
|
15
|
+
paddingLeft: "var(--ds-space-025, 2px)",
|
|
16
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
|
|
17
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
18
|
+
});
|
|
19
|
+
export var deletedTraditionalStyleQuoteNode = convertToInlineCss({
|
|
20
|
+
marginTop: "var(--ds-space-150, 12px)",
|
|
21
|
+
paddingTop: "var(--ds-space-025, 2px)",
|
|
22
|
+
paddingBottom: "var(--ds-space-025, 2px)",
|
|
23
|
+
paddingLeft: "var(--ds-space-025, 2px)",
|
|
24
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
25
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
26
|
+
});
|
|
7
27
|
export var deletedBlockOutline = convertToInlineCss({
|
|
8
28
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
|
|
9
29
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
10
30
|
});
|
|
31
|
+
export var deletedTraditionalBlockOutline = convertToInlineCss({
|
|
32
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
33
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
34
|
+
});
|
|
11
35
|
export var deletedBlockOutlineRounded = convertToInlineCss({
|
|
12
36
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
|
|
13
37
|
borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
|
|
14
38
|
});
|
|
39
|
+
export var deletedTraditionalBlockOutlineRounded = convertToInlineCss({
|
|
40
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
41
|
+
borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
|
|
42
|
+
});
|
|
15
43
|
var lozengeStyle = convertToInlineCss({
|
|
16
44
|
display: 'inline-flex',
|
|
17
45
|
boxSizing: 'border-box',
|
|
@@ -28,16 +56,17 @@ var lozengeStyle = convertToInlineCss({
|
|
|
28
56
|
whiteSpace: 'nowrap',
|
|
29
57
|
color: "var(--ds-text-warning-inverse, #292A2E)"
|
|
30
58
|
});
|
|
31
|
-
export var getDeletedStyleNode = function getDeletedStyleNode(nodeName) {
|
|
59
|
+
export var getDeletedStyleNode = function getDeletedStyleNode(nodeName, colourScheme) {
|
|
60
|
+
var isTraditional = colourScheme === 'traditional';
|
|
32
61
|
switch (nodeName) {
|
|
33
62
|
case 'blockquote':
|
|
34
|
-
return deletedStyleQuoteNode;
|
|
63
|
+
return fg('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge : deletedStyleQuoteNode;
|
|
35
64
|
case 'expand':
|
|
36
65
|
case 'decisionList':
|
|
37
|
-
return deletedBlockOutline;
|
|
66
|
+
return isTraditional && fg('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutline : deletedBlockOutline;
|
|
38
67
|
case 'panel':
|
|
39
68
|
case 'codeBlock':
|
|
40
|
-
return deletedBlockOutlineRounded;
|
|
69
|
+
return isTraditional && fg('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutlineRounded : deletedBlockOutlineRounded;
|
|
41
70
|
default:
|
|
42
71
|
return undefined;
|
|
43
72
|
}
|
|
@@ -50,6 +79,9 @@ export var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName
|
|
|
50
79
|
case 'panel':
|
|
51
80
|
case 'decisionList':
|
|
52
81
|
return true;
|
|
82
|
+
case 'embedCard':
|
|
83
|
+
case 'blockquote':
|
|
84
|
+
return fg('platform_editor_ai_aifc_patch_ga_blockers');
|
|
53
85
|
default:
|
|
54
86
|
return false;
|
|
55
87
|
}
|
|
@@ -59,6 +91,8 @@ export var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeleted
|
|
|
59
91
|
case 'mediaSingle':
|
|
60
92
|
case 'embedCard':
|
|
61
93
|
return true;
|
|
94
|
+
case 'blockquote':
|
|
95
|
+
return fg('platform_editor_ai_aifc_patch_ga_blockers');
|
|
62
96
|
default:
|
|
63
97
|
return false;
|
|
64
98
|
}
|
|
@@ -69,7 +103,7 @@ export var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeleted
|
|
|
69
103
|
* to preserve natural block-level margins
|
|
70
104
|
*/
|
|
71
105
|
export var shouldApplyDeletedStylesDirectly = function shouldApplyDeletedStylesDirectly(nodeName) {
|
|
72
|
-
return nodeName === '
|
|
106
|
+
return nodeName === 'heading' || nodeName === 'blockquote' && !fg('platform_editor_ai_aifc_patch_ga_blockers');
|
|
73
107
|
};
|
|
74
108
|
|
|
75
109
|
/**
|
|
@@ -83,16 +117,17 @@ export var createRemovedLozenge = function createRemovedLozenge(intl, nodeName)
|
|
|
83
117
|
} else if (['panel', 'codeBlock', 'mediaSingle'].includes(nodeName || '')) {
|
|
84
118
|
borderTopRightRadius = "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)");
|
|
85
119
|
}
|
|
86
|
-
var containerStyle = convertToInlineCss({
|
|
120
|
+
var containerStyle = convertToInlineCss(_objectSpread({
|
|
87
121
|
position: 'absolute',
|
|
88
|
-
top: "var(--ds-space-0, 0px)",
|
|
89
|
-
right: "var(--ds-space-0, 0px)",
|
|
122
|
+
top: fg('platform_editor_ai_aifc_patch_ga_blockers') ? "var(--ds-space-075, 6px)" : "var(--ds-space-0, 0px)",
|
|
123
|
+
right: fg('platform_editor_ai_aifc_patch_ga_blockers') ? "var(--ds-space-075, 6px)" : "var(--ds-space-0, 0px)",
|
|
90
124
|
zIndex: 2,
|
|
91
125
|
pointerEvents: 'none',
|
|
92
|
-
display: 'flex'
|
|
126
|
+
display: 'flex'
|
|
127
|
+
}, !fg('platform_editor_ai_aifc_patch_ga_blockers') ? {
|
|
93
128
|
overflow: 'hidden',
|
|
94
129
|
borderTopRightRadius: borderTopRightRadius
|
|
95
|
-
});
|
|
130
|
+
} : {}));
|
|
96
131
|
container.setAttribute('style', containerStyle);
|
|
97
132
|
container.setAttribute('data-testid', 'show-diff-removed-lozenge');
|
|
98
133
|
|
|
@@ -107,7 +142,7 @@ export var createRemovedLozenge = function createRemovedLozenge(intl, nodeName)
|
|
|
107
142
|
/**
|
|
108
143
|
* Wraps a block node in a container with relative positioning to support absolute positioned lozenge
|
|
109
144
|
*/
|
|
110
|
-
export var createBlockNodeWrapper = function createBlockNodeWrapper(
|
|
145
|
+
export var createBlockNodeWrapper = function createBlockNodeWrapper() {
|
|
111
146
|
var wrapper = document.createElement('div');
|
|
112
147
|
var baseStyle = convertToInlineCss({
|
|
113
148
|
position: 'relative',
|
|
@@ -133,7 +168,7 @@ export var createDeletedStyleWrapperWithoutOpacity = function createDeletedStyle
|
|
|
133
168
|
export var applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colourScheme) {
|
|
134
169
|
var currentStyle = element.getAttribute('style') || '';
|
|
135
170
|
var deletedContentStyle = getDeletedContentStyle(colourScheme);
|
|
136
|
-
var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name) || '';
|
|
171
|
+
var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colourScheme) || '';
|
|
137
172
|
element.setAttribute('style', "".concat(currentStyle).concat(deletedContentStyle).concat(nodeSpecificStyle));
|
|
138
173
|
};
|
|
139
174
|
|
|
@@ -142,17 +177,51 @@ export var applyDeletedStylesToElement = function applyDeletedStylesToElement(el
|
|
|
142
177
|
*/
|
|
143
178
|
export var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(nodeView, targetNode, colourScheme) {
|
|
144
179
|
var contentWrapper = document.createElement('div');
|
|
145
|
-
var nodeStyle = getDeletedStyleNode(targetNode.type.name);
|
|
180
|
+
var nodeStyle = getDeletedStyleNode(targetNode.type.name, colourScheme);
|
|
146
181
|
contentWrapper.setAttribute('style', "".concat(getDeletedContentStyle(colourScheme)).concat(nodeStyle || ''));
|
|
147
182
|
contentWrapper.append(nodeView);
|
|
148
183
|
return contentWrapper;
|
|
149
184
|
};
|
|
150
185
|
|
|
186
|
+
/**
|
|
187
|
+
* Handles embedCard node rendering with lozenge attached to the rich-media-item container.
|
|
188
|
+
* Since embedCard content loads asynchronously, we use a MutationObserver
|
|
189
|
+
* to wait for the rich-media-item to appear before attaching the lozenge.
|
|
190
|
+
* @returns true if embedCard was handled
|
|
191
|
+
*/
|
|
192
|
+
export var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) {
|
|
193
|
+
if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
|
|
194
|
+
return false;
|
|
195
|
+
}
|
|
196
|
+
var richMediaItem = nodeView.querySelector('.rich-media-item');
|
|
197
|
+
if (richMediaItem instanceof HTMLElement) {
|
|
198
|
+
richMediaItem.appendChild(lozenge);
|
|
199
|
+
} else {
|
|
200
|
+
var observer = new MutationObserver(function (_, obs) {
|
|
201
|
+
var loadedRichMedia = nodeView.querySelector('.rich-media-item');
|
|
202
|
+
if (loadedRichMedia instanceof HTMLElement) {
|
|
203
|
+
loadedRichMedia.appendChild(lozenge);
|
|
204
|
+
obs.disconnect();
|
|
205
|
+
}
|
|
206
|
+
});
|
|
207
|
+
observer.observe(nodeView, {
|
|
208
|
+
childList: true,
|
|
209
|
+
subtree: true
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
213
|
+
var showDiffDeletedNodeClass = colourScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
|
|
214
|
+
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
215
|
+
}
|
|
216
|
+
dom.append(nodeView);
|
|
217
|
+
return true;
|
|
218
|
+
};
|
|
219
|
+
|
|
151
220
|
/**
|
|
152
221
|
* Handles special mediaSingle node rendering with lozenge on child media element
|
|
153
222
|
* @returns true if mediaSingle was handled, false otherwise
|
|
154
223
|
*/
|
|
155
|
-
export var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge) {
|
|
224
|
+
export var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) {
|
|
156
225
|
if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
|
|
157
226
|
return false;
|
|
158
227
|
}
|
|
@@ -171,7 +240,8 @@ export var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(
|
|
|
171
240
|
|
|
172
241
|
// Add deleted node class if needed
|
|
173
242
|
if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
174
|
-
|
|
243
|
+
var showDiffDeletedNodeClass = colourScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
|
|
244
|
+
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
175
245
|
}
|
|
176
246
|
dom.append(nodeView);
|
|
177
247
|
return true;
|
|
@@ -181,10 +251,13 @@ export var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(
|
|
|
181
251
|
* Appends a block node with wrapper, lozenge, and appropriate styling
|
|
182
252
|
*/
|
|
183
253
|
export var appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeView, targetNode, colourScheme, intl) {
|
|
184
|
-
var blockWrapper = createBlockNodeWrapper(
|
|
254
|
+
var blockWrapper = createBlockNodeWrapper();
|
|
185
255
|
if (shouldShowRemovedLozenge(targetNode.type.name)) {
|
|
186
|
-
var lozenge = createRemovedLozenge(intl
|
|
187
|
-
if (
|
|
256
|
+
var lozenge = createRemovedLozenge(intl);
|
|
257
|
+
if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) && fg('platform_editor_ai_aifc_patch_ga_blockers')) {
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
260
|
+
if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme)) {
|
|
188
261
|
return;
|
|
189
262
|
}
|
|
190
263
|
blockWrapper.append(lozenge);
|
|
@@ -192,14 +265,15 @@ export var appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom,
|
|
|
192
265
|
var contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colourScheme);
|
|
193
266
|
blockWrapper.append(contentWrapper);
|
|
194
267
|
if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
195
|
-
|
|
268
|
+
var showDiffDeletedNodeClass = colourScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
|
|
269
|
+
nodeView.classList.add(showDiffDeletedNodeClass);
|
|
196
270
|
}
|
|
197
271
|
dom.append(blockWrapper);
|
|
198
272
|
};
|
|
199
273
|
|
|
200
274
|
/**
|
|
201
275
|
* Handles all block node rendering with appropriate deleted styling.
|
|
202
|
-
* For
|
|
276
|
+
* For heading nodes, applies styles directly to preserve natural margins.
|
|
203
277
|
* For other block nodes, uses wrapper approach with optional lozenge.
|
|
204
278
|
*/
|
|
205
279
|
export var handleBlockNodeView = function handleBlockNodeView(dom, nodeView, targetNode, colourScheme, intl) {
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import type { IntlShape } from 'react-intl-next';
|
|
2
2
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
3
|
export declare const deletedStyleQuoteNode: string;
|
|
4
|
+
export declare const deletedStyleQuoteNodeWithLozenge: string;
|
|
5
|
+
export declare const deletedTraditionalStyleQuoteNode: string;
|
|
4
6
|
export declare const deletedBlockOutline: string;
|
|
7
|
+
export declare const deletedTraditionalBlockOutline: string;
|
|
5
8
|
export declare const deletedBlockOutlineRounded: string;
|
|
6
|
-
export declare const
|
|
9
|
+
export declare const deletedTraditionalBlockOutlineRounded: string;
|
|
10
|
+
export declare const getDeletedStyleNode: (nodeName: string, colourScheme?: "standard" | "traditional") => string | undefined;
|
|
7
11
|
export declare const shouldShowRemovedLozenge: (nodeName: string) => boolean;
|
|
8
12
|
export declare const shouldAddShowDiffDeletedNodeClass: (nodeName: string) => boolean;
|
|
9
13
|
/**
|
|
@@ -18,7 +22,7 @@ export declare const createRemovedLozenge: (intl: IntlShape, nodeName?: string)
|
|
|
18
22
|
/**
|
|
19
23
|
* Wraps a block node in a container with relative positioning to support absolute positioned lozenge
|
|
20
24
|
*/
|
|
21
|
-
export declare const createBlockNodeWrapper: (
|
|
25
|
+
export declare const createBlockNodeWrapper: () => HTMLDivElement;
|
|
22
26
|
/**
|
|
23
27
|
* Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
|
|
24
28
|
*/
|
|
@@ -31,18 +35,25 @@ export declare const applyDeletedStylesToElement: (element: HTMLElement, targetN
|
|
|
31
35
|
* Creates a content wrapper with deleted styles for a block node
|
|
32
36
|
*/
|
|
33
37
|
export declare const createBlockNodeContentWrapper: (nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined) => HTMLElement;
|
|
38
|
+
/**
|
|
39
|
+
* Handles embedCard node rendering with lozenge attached to the rich-media-item container.
|
|
40
|
+
* Since embedCard content loads asynchronously, we use a MutationObserver
|
|
41
|
+
* to wait for the rich-media-item to appear before attaching the lozenge.
|
|
42
|
+
* @returns true if embedCard was handled
|
|
43
|
+
*/
|
|
44
|
+
export declare const handleEmbedCardWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colourScheme: "standard" | "traditional" | undefined) => boolean;
|
|
34
45
|
/**
|
|
35
46
|
* Handles special mediaSingle node rendering with lozenge on child media element
|
|
36
47
|
* @returns true if mediaSingle was handled, false otherwise
|
|
37
48
|
*/
|
|
38
|
-
export declare const handleMediaSingleWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement) => boolean;
|
|
49
|
+
export declare const handleMediaSingleWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colourScheme: "standard" | "traditional" | undefined) => boolean;
|
|
39
50
|
/**
|
|
40
51
|
* Appends a block node with wrapper, lozenge, and appropriate styling
|
|
41
52
|
*/
|
|
42
53
|
export declare const appendBlockNodeWithWrapper: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;
|
|
43
54
|
/**
|
|
44
55
|
* Handles all block node rendering with appropriate deleted styling.
|
|
45
|
-
* For
|
|
56
|
+
* For heading nodes, applies styles directly to preserve natural margins.
|
|
46
57
|
* For other block nodes, uses wrapper approach with optional lozenge.
|
|
47
58
|
*/
|
|
48
59
|
export declare const handleBlockNodeView: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import type { IntlShape } from 'react-intl-next';
|
|
2
2
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
3
|
export declare const deletedStyleQuoteNode: string;
|
|
4
|
+
export declare const deletedStyleQuoteNodeWithLozenge: string;
|
|
5
|
+
export declare const deletedTraditionalStyleQuoteNode: string;
|
|
4
6
|
export declare const deletedBlockOutline: string;
|
|
7
|
+
export declare const deletedTraditionalBlockOutline: string;
|
|
5
8
|
export declare const deletedBlockOutlineRounded: string;
|
|
6
|
-
export declare const
|
|
9
|
+
export declare const deletedTraditionalBlockOutlineRounded: string;
|
|
10
|
+
export declare const getDeletedStyleNode: (nodeName: string, colourScheme?: "standard" | "traditional") => string | undefined;
|
|
7
11
|
export declare const shouldShowRemovedLozenge: (nodeName: string) => boolean;
|
|
8
12
|
export declare const shouldAddShowDiffDeletedNodeClass: (nodeName: string) => boolean;
|
|
9
13
|
/**
|
|
@@ -18,7 +22,7 @@ export declare const createRemovedLozenge: (intl: IntlShape, nodeName?: string)
|
|
|
18
22
|
/**
|
|
19
23
|
* Wraps a block node in a container with relative positioning to support absolute positioned lozenge
|
|
20
24
|
*/
|
|
21
|
-
export declare const createBlockNodeWrapper: (
|
|
25
|
+
export declare const createBlockNodeWrapper: () => HTMLDivElement;
|
|
22
26
|
/**
|
|
23
27
|
* Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
|
|
24
28
|
*/
|
|
@@ -31,18 +35,25 @@ export declare const applyDeletedStylesToElement: (element: HTMLElement, targetN
|
|
|
31
35
|
* Creates a content wrapper with deleted styles for a block node
|
|
32
36
|
*/
|
|
33
37
|
export declare const createBlockNodeContentWrapper: (nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined) => HTMLElement;
|
|
38
|
+
/**
|
|
39
|
+
* Handles embedCard node rendering with lozenge attached to the rich-media-item container.
|
|
40
|
+
* Since embedCard content loads asynchronously, we use a MutationObserver
|
|
41
|
+
* to wait for the rich-media-item to appear before attaching the lozenge.
|
|
42
|
+
* @returns true if embedCard was handled
|
|
43
|
+
*/
|
|
44
|
+
export declare const handleEmbedCardWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colourScheme: "standard" | "traditional" | undefined) => boolean;
|
|
34
45
|
/**
|
|
35
46
|
* Handles special mediaSingle node rendering with lozenge on child media element
|
|
36
47
|
* @returns true if mediaSingle was handled, false otherwise
|
|
37
48
|
*/
|
|
38
|
-
export declare const handleMediaSingleWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement) => boolean;
|
|
49
|
+
export declare const handleMediaSingleWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colourScheme: "standard" | "traditional" | undefined) => boolean;
|
|
39
50
|
/**
|
|
40
51
|
* Appends a block node with wrapper, lozenge, and appropriate styling
|
|
41
52
|
*/
|
|
42
53
|
export declare const appendBlockNodeWithWrapper: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;
|
|
43
54
|
/**
|
|
44
55
|
* Handles all block node rendering with appropriate deleted styling.
|
|
45
|
-
* For
|
|
56
|
+
* For heading nodes, applies styles directly to preserve natural margins.
|
|
46
57
|
* For other block nodes, uses wrapper approach with optional lozenge.
|
|
47
58
|
*/
|
|
48
59
|
export declare const handleBlockNodeView: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-show-diff",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.0",
|
|
4
4
|
"description": "ShowDiff plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -28,18 +28,18 @@
|
|
|
28
28
|
"sideEffects": false,
|
|
29
29
|
"atlaskit:src": "src/index.ts",
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@atlaskit/adf-schema": "^51.
|
|
31
|
+
"@atlaskit/adf-schema": "^51.5.1",
|
|
32
32
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
33
33
|
"@atlaskit/editor-tables": "^2.9.0",
|
|
34
34
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
35
|
-
"@atlaskit/tokens": "^8.
|
|
35
|
+
"@atlaskit/tokens": "^8.4.0",
|
|
36
36
|
"@babel/runtime": "^7.0.0",
|
|
37
37
|
"lodash": "^4.17.21",
|
|
38
38
|
"memoize-one": "^6.0.0",
|
|
39
39
|
"prosemirror-changeset": "^2.2.1"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
|
-
"@atlaskit/editor-common": "^110.
|
|
42
|
+
"@atlaskit/editor-common": "^110.39.0",
|
|
43
43
|
"react": "^18.2.0"
|
|
44
44
|
},
|
|
45
45
|
"techstack": {
|
|
@@ -84,6 +84,9 @@
|
|
|
84
84
|
},
|
|
85
85
|
"platform_editor_ai_aifc_patch_ga": {
|
|
86
86
|
"type": "boolean"
|
|
87
|
+
},
|
|
88
|
+
"platform_editor_ai_aifc_patch_ga_blockers": {
|
|
89
|
+
"type": "boolean"
|
|
87
90
|
}
|
|
88
91
|
}
|
|
89
92
|
}
|