@atlaskit/editor-plugin-show-diff 10.1.11 → 10.1.13
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/dist/cjs/pm-plugins/decorations/colorSchemes/standard.js +6 -1
- package/dist/cjs/pm-plugins/decorations/createBlockChangedDecoration.js +17 -0
- package/dist/cjs/pm-plugins/decorations/createNodeChangedDecorationWidget.js +33 -2
- package/dist/es2019/pm-plugins/decorations/colorSchemes/standard.js +5 -0
- package/dist/es2019/pm-plugins/decorations/createBlockChangedDecoration.js +18 -1
- package/dist/es2019/pm-plugins/decorations/createNodeChangedDecorationWidget.js +40 -8
- package/dist/esm/pm-plugins/decorations/colorSchemes/standard.js +5 -0
- package/dist/esm/pm-plugins/decorations/createBlockChangedDecoration.js +18 -1
- package/dist/esm/pm-plugins/decorations/createNodeChangedDecorationWidget.js +33 -2
- package/dist/types/pm-plugins/decorations/colorSchemes/standard.d.ts +1 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-show-diff
|
|
2
2
|
|
|
3
|
+
## 10.1.13
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 10.1.12
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`3d9bf2e6f248a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d9bf2e6f248a) -
|
|
14
|
+
Fix nested image in panel shifting left when showing suggestion diff
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 10.1.11
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleExtended = exports.editingStyleCardBlockNode = exports.editingStyleActiveExtended = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlockExtended = exports.editingContentStyleInBlock = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedInlineContentStyleExtended = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
|
|
6
|
+
exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleExtended = exports.editingStyleCardBlockNode = exports.editingStyleActiveExtended = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlockExtended = exports.editingContentStyleInBlock = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedInlineContentStyleExtended = exports.deletedDecorationMarkerVariable = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
|
|
7
7
|
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
8
8
|
// delete on platform_editor_diff_plugin_extended cleanup
|
|
9
9
|
var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)({
|
|
@@ -142,6 +142,11 @@ var standardDecorationMarkerVariable = exports.standardDecorationMarkerVariable
|
|
|
142
142
|
'--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)",
|
|
143
143
|
'--diff-decoration-marker-ring-width': '1px'
|
|
144
144
|
});
|
|
145
|
+
var deletedDecorationMarkerVariable = exports.deletedDecorationMarkerVariable = (0, _lazyNodeView.convertToInlineCss)({
|
|
146
|
+
'--diff-decoration-marker-color': "var(--ds-border-accent-gray, #7D818A)",
|
|
147
|
+
'--diff-decoration-marker-ring-width': '1px',
|
|
148
|
+
opacity: 0.8
|
|
149
|
+
});
|
|
145
150
|
var addedCellOverlayStyle = exports.addedCellOverlayStyle = (0, _lazyNodeView.convertToInlineCss)({
|
|
146
151
|
position: 'absolute',
|
|
147
152
|
top: 0,
|
|
@@ -37,6 +37,14 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
|
|
|
37
37
|
// Layout nodes do not need special styling
|
|
38
38
|
return undefined;
|
|
39
39
|
}
|
|
40
|
+
// Media nodes inside mediaSingle should not get position:relative
|
|
41
|
+
// as it shifts the image outside its parent container (e.g. panel)
|
|
42
|
+
if (nodeName === 'media') {
|
|
43
|
+
if (!isInserted && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
44
|
+
return isTraditional ? (0, _traditional.getDeletedTraditionalInlineStyle)(false) : _standard.deletedDecorationMarkerVariable;
|
|
45
|
+
}
|
|
46
|
+
return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNodeNew : _standard.editingStyleNode;
|
|
47
|
+
}
|
|
40
48
|
if (['tableCell', 'tableHeader'].includes(nodeName)) {
|
|
41
49
|
if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
42
50
|
// This is used for positioning the cell overlay widget decorations
|
|
@@ -47,11 +55,20 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
|
|
|
47
55
|
// When gate is off, it should return undefined as above
|
|
48
56
|
return undefined;
|
|
49
57
|
}
|
|
58
|
+
if (nodeName === 'panel') {
|
|
59
|
+
if (!isInserted && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
60
|
+
return isTraditional ? (0, _traditional.getDeletedTraditionalInlineStyle)(false) : _standard.deletedDecorationMarkerVariable;
|
|
61
|
+
}
|
|
62
|
+
return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNodeNew : _standard.editingStyleNode;
|
|
63
|
+
}
|
|
50
64
|
if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
|
|
51
65
|
if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
52
66
|
if (isInserted) {
|
|
53
67
|
return isTraditional && isActive ? _traditional.traditionalDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDecorationMarkerVariableNew : _standard.standardDecorationMarkerVariable;
|
|
54
68
|
} else {
|
|
69
|
+
if (nodeName === 'listItem') {
|
|
70
|
+
return isTraditional && isActive ? _traditional.traditionalDeletedDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDeletedDecorationMarkerVariableNew : _standard.deletedDecorationMarkerVariable;
|
|
71
|
+
}
|
|
55
72
|
return isTraditional && isActive ? _traditional.traditionalDeletedDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDeletedDecorationMarkerVariableNew : _standard.deletedContentStyleNew;
|
|
56
73
|
}
|
|
57
74
|
}
|
|
@@ -68,6 +68,32 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
|
|
|
68
68
|
|
|
69
69
|
// For non-table content, use the existing span wrapper approach
|
|
70
70
|
var dom = document.createElement('span');
|
|
71
|
+
// When mediaSingle nodes are rendered inside a widget decoration (e.g. as part of
|
|
72
|
+
// a replaced panel), the centering CSS (margin-left: 50%; transform: translateX(-50%))
|
|
73
|
+
// incorrectly applies because isNestedNode resolves to false (getPos returns 0).
|
|
74
|
+
// Observe DOM mutations and override the transform on .rich-media-item elements
|
|
75
|
+
// after React mounts to prevent the image from shifting outside its parent container.
|
|
76
|
+
var constrainMediaObserver;
|
|
77
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
78
|
+
constrainMediaObserver = new MutationObserver(function () {
|
|
79
|
+
var richMediaItems = dom.querySelectorAll('.rich-media-item');
|
|
80
|
+
richMediaItems.forEach(function (el) {
|
|
81
|
+
if (el instanceof HTMLElement) {
|
|
82
|
+
el.style.transform = 'none';
|
|
83
|
+
el.style.marginLeft = '0';
|
|
84
|
+
el.style.maxWidth = '100%';
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
if (richMediaItems.length > 0) {
|
|
88
|
+
var _constrainMediaObserv;
|
|
89
|
+
(_constrainMediaObserv = constrainMediaObserver) === null || _constrainMediaObserv === void 0 || _constrainMediaObserv.disconnect();
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
constrainMediaObserver.observe(dom, {
|
|
93
|
+
childList: true,
|
|
94
|
+
subtree: true
|
|
95
|
+
});
|
|
96
|
+
}
|
|
71
97
|
var diffId = crypto.randomUUID();
|
|
72
98
|
var decorations = [];
|
|
73
99
|
|
|
@@ -188,13 +214,18 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
|
|
|
188
214
|
decorations.push(leftAnchor);
|
|
189
215
|
}
|
|
190
216
|
}
|
|
191
|
-
decorations.push(_view.Decoration.widget(safeInsertPos, dom, (0, _decorationKeys.buildDiffDecorationSpec)(_objectSpread({
|
|
217
|
+
decorations.push(_view.Decoration.widget(safeInsertPos, dom, _objectSpread(_objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)(_objectSpread({
|
|
192
218
|
decorationType: 'widget',
|
|
193
219
|
diffId: diffId,
|
|
194
220
|
isActive: isActive
|
|
195
221
|
}, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
|
|
196
222
|
side: -1
|
|
197
|
-
})))
|
|
223
|
+
}))), {}, {
|
|
224
|
+
destroy: function destroy() {
|
|
225
|
+
var _constrainMediaObserv2;
|
|
226
|
+
return (_constrainMediaObserv2 = constrainMediaObserver) === null || _constrainMediaObserv2 === void 0 ? void 0 : _constrainMediaObserv2.disconnect();
|
|
227
|
+
}
|
|
228
|
+
})));
|
|
198
229
|
|
|
199
230
|
// When a single block node is purely deleted at the very start of the doc (first child),
|
|
200
231
|
// the deleted widget decoration overlaps with the existing first child's decoration.
|
|
@@ -136,6 +136,11 @@ export const standardDecorationMarkerVariable = convertToInlineCss({
|
|
|
136
136
|
'--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)",
|
|
137
137
|
'--diff-decoration-marker-ring-width': '1px'
|
|
138
138
|
});
|
|
139
|
+
export const deletedDecorationMarkerVariable = convertToInlineCss({
|
|
140
|
+
'--diff-decoration-marker-color': "var(--ds-border-accent-gray, #7D818A)",
|
|
141
|
+
'--diff-decoration-marker-ring-width': '1px',
|
|
142
|
+
opacity: 0.8
|
|
143
|
+
});
|
|
139
144
|
export const addedCellOverlayStyle = convertToInlineCss({
|
|
140
145
|
position: 'absolute',
|
|
141
146
|
top: 0,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
2
2
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
3
3
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
4
|
-
import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
|
|
4
|
+
import { standardDecorationMarkerVariable, deletedDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
|
|
5
5
|
import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from './colorSchemes/traditional';
|
|
6
6
|
import { buildDiffDecorationSpec } from './decorationKeys';
|
|
7
7
|
const displayNoneStyle = convertToInlineCss({
|
|
@@ -30,6 +30,14 @@ const getBlockNodeStyle = ({
|
|
|
30
30
|
// Layout nodes do not need special styling
|
|
31
31
|
return undefined;
|
|
32
32
|
}
|
|
33
|
+
// Media nodes inside mediaSingle should not get position:relative
|
|
34
|
+
// as it shifts the image outside its parent container (e.g. panel)
|
|
35
|
+
if (nodeName === 'media') {
|
|
36
|
+
if (!isInserted && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
37
|
+
return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedDecorationMarkerVariable;
|
|
38
|
+
}
|
|
39
|
+
return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
|
|
40
|
+
}
|
|
33
41
|
if (['tableCell', 'tableHeader'].includes(nodeName)) {
|
|
34
42
|
if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
35
43
|
// This is used for positioning the cell overlay widget decorations
|
|
@@ -40,11 +48,20 @@ const getBlockNodeStyle = ({
|
|
|
40
48
|
// When gate is off, it should return undefined as above
|
|
41
49
|
return undefined;
|
|
42
50
|
}
|
|
51
|
+
if (nodeName === 'panel') {
|
|
52
|
+
if (!isInserted && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
53
|
+
return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedDecorationMarkerVariable;
|
|
54
|
+
}
|
|
55
|
+
return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
|
|
56
|
+
}
|
|
43
57
|
if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
|
|
44
58
|
if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
45
59
|
if (isInserted) {
|
|
46
60
|
return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariableNew : standardDecorationMarkerVariable;
|
|
47
61
|
} else {
|
|
62
|
+
if (nodeName === 'listItem') {
|
|
63
|
+
return isTraditional && isActive ? traditionalDeletedDecorationMarkerVariableActive : isTraditional ? traditionalDeletedDecorationMarkerVariableNew : deletedDecorationMarkerVariable;
|
|
64
|
+
}
|
|
48
65
|
return isTraditional && isActive ? traditionalDeletedDecorationMarkerVariableActive : isTraditional ? traditionalDeletedDecorationMarkerVariableNew : deletedContentStyleNew;
|
|
49
66
|
}
|
|
50
67
|
}
|
|
@@ -51,6 +51,32 @@ export const createNodeChangedDecorationWidget = ({
|
|
|
51
51
|
|
|
52
52
|
// For non-table content, use the existing span wrapper approach
|
|
53
53
|
const dom = document.createElement('span');
|
|
54
|
+
// When mediaSingle nodes are rendered inside a widget decoration (e.g. as part of
|
|
55
|
+
// a replaced panel), the centering CSS (margin-left: 50%; transform: translateX(-50%))
|
|
56
|
+
// incorrectly applies because isNestedNode resolves to false (getPos returns 0).
|
|
57
|
+
// Observe DOM mutations and override the transform on .rich-media-item elements
|
|
58
|
+
// after React mounts to prevent the image from shifting outside its parent container.
|
|
59
|
+
let constrainMediaObserver;
|
|
60
|
+
if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
61
|
+
constrainMediaObserver = new MutationObserver(() => {
|
|
62
|
+
const richMediaItems = dom.querySelectorAll('.rich-media-item');
|
|
63
|
+
richMediaItems.forEach(el => {
|
|
64
|
+
if (el instanceof HTMLElement) {
|
|
65
|
+
el.style.transform = 'none';
|
|
66
|
+
el.style.marginLeft = '0';
|
|
67
|
+
el.style.maxWidth = '100%';
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
if (richMediaItems.length > 0) {
|
|
71
|
+
var _constrainMediaObserv;
|
|
72
|
+
(_constrainMediaObserv = constrainMediaObserver) === null || _constrainMediaObserv === void 0 ? void 0 : _constrainMediaObserv.disconnect();
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
constrainMediaObserver.observe(dom, {
|
|
76
|
+
childList: true,
|
|
77
|
+
subtree: true
|
|
78
|
+
});
|
|
79
|
+
}
|
|
54
80
|
const diffId = crypto.randomUUID();
|
|
55
81
|
const decorations = [];
|
|
56
82
|
|
|
@@ -167,14 +193,20 @@ export const createNodeChangedDecorationWidget = ({
|
|
|
167
193
|
decorations.push(leftAnchor);
|
|
168
194
|
}
|
|
169
195
|
}
|
|
170
|
-
decorations.push(Decoration.widget(safeInsertPos, dom,
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
196
|
+
decorations.push(Decoration.widget(safeInsertPos, dom, {
|
|
197
|
+
...buildDiffDecorationSpec({
|
|
198
|
+
decorationType: 'widget',
|
|
199
|
+
diffId,
|
|
200
|
+
isActive,
|
|
201
|
+
...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
|
|
202
|
+
side: -1
|
|
203
|
+
})
|
|
204
|
+
}),
|
|
205
|
+
destroy: () => {
|
|
206
|
+
var _constrainMediaObserv2;
|
|
207
|
+
return (_constrainMediaObserv2 = constrainMediaObserver) === null || _constrainMediaObserv2 === void 0 ? void 0 : _constrainMediaObserv2.disconnect();
|
|
208
|
+
}
|
|
209
|
+
}));
|
|
178
210
|
|
|
179
211
|
// When a single block node is purely deleted at the very start of the doc (first child),
|
|
180
212
|
// the deleted widget decoration overlaps with the existing first child's decoration.
|
|
@@ -136,6 +136,11 @@ export var standardDecorationMarkerVariable = convertToInlineCss({
|
|
|
136
136
|
'--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)",
|
|
137
137
|
'--diff-decoration-marker-ring-width': '1px'
|
|
138
138
|
});
|
|
139
|
+
export var deletedDecorationMarkerVariable = convertToInlineCss({
|
|
140
|
+
'--diff-decoration-marker-color': "var(--ds-border-accent-gray, #7D818A)",
|
|
141
|
+
'--diff-decoration-marker-ring-width': '1px',
|
|
142
|
+
opacity: 0.8
|
|
143
|
+
});
|
|
139
144
|
export var addedCellOverlayStyle = convertToInlineCss({
|
|
140
145
|
position: 'absolute',
|
|
141
146
|
top: 0,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
2
2
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
3
3
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
4
|
-
import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
|
|
4
|
+
import { standardDecorationMarkerVariable, deletedDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
|
|
5
5
|
import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from './colorSchemes/traditional';
|
|
6
6
|
import { buildDiffDecorationSpec } from './decorationKeys';
|
|
7
7
|
var displayNoneStyle = convertToInlineCss({
|
|
@@ -31,6 +31,14 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
|
|
|
31
31
|
// Layout nodes do not need special styling
|
|
32
32
|
return undefined;
|
|
33
33
|
}
|
|
34
|
+
// Media nodes inside mediaSingle should not get position:relative
|
|
35
|
+
// as it shifts the image outside its parent container (e.g. panel)
|
|
36
|
+
if (nodeName === 'media') {
|
|
37
|
+
if (!isInserted && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
38
|
+
return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedDecorationMarkerVariable;
|
|
39
|
+
}
|
|
40
|
+
return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
|
|
41
|
+
}
|
|
34
42
|
if (['tableCell', 'tableHeader'].includes(nodeName)) {
|
|
35
43
|
if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
36
44
|
// This is used for positioning the cell overlay widget decorations
|
|
@@ -41,11 +49,20 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
|
|
|
41
49
|
// When gate is off, it should return undefined as above
|
|
42
50
|
return undefined;
|
|
43
51
|
}
|
|
52
|
+
if (nodeName === 'panel') {
|
|
53
|
+
if (!isInserted && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
54
|
+
return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedDecorationMarkerVariable;
|
|
55
|
+
}
|
|
56
|
+
return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
|
|
57
|
+
}
|
|
44
58
|
if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
|
|
45
59
|
if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
46
60
|
if (isInserted) {
|
|
47
61
|
return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariableNew : standardDecorationMarkerVariable;
|
|
48
62
|
} else {
|
|
63
|
+
if (nodeName === 'listItem') {
|
|
64
|
+
return isTraditional && isActive ? traditionalDeletedDecorationMarkerVariableActive : isTraditional ? traditionalDeletedDecorationMarkerVariableNew : deletedDecorationMarkerVariable;
|
|
65
|
+
}
|
|
49
66
|
return isTraditional && isActive ? traditionalDeletedDecorationMarkerVariableActive : isTraditional ? traditionalDeletedDecorationMarkerVariableNew : deletedContentStyleNew;
|
|
50
67
|
}
|
|
51
68
|
}
|
|
@@ -62,6 +62,32 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
|
|
|
62
62
|
|
|
63
63
|
// For non-table content, use the existing span wrapper approach
|
|
64
64
|
var dom = document.createElement('span');
|
|
65
|
+
// When mediaSingle nodes are rendered inside a widget decoration (e.g. as part of
|
|
66
|
+
// a replaced panel), the centering CSS (margin-left: 50%; transform: translateX(-50%))
|
|
67
|
+
// incorrectly applies because isNestedNode resolves to false (getPos returns 0).
|
|
68
|
+
// Observe DOM mutations and override the transform on .rich-media-item elements
|
|
69
|
+
// after React mounts to prevent the image from shifting outside its parent container.
|
|
70
|
+
var constrainMediaObserver;
|
|
71
|
+
if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
|
|
72
|
+
constrainMediaObserver = new MutationObserver(function () {
|
|
73
|
+
var richMediaItems = dom.querySelectorAll('.rich-media-item');
|
|
74
|
+
richMediaItems.forEach(function (el) {
|
|
75
|
+
if (el instanceof HTMLElement) {
|
|
76
|
+
el.style.transform = 'none';
|
|
77
|
+
el.style.marginLeft = '0';
|
|
78
|
+
el.style.maxWidth = '100%';
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
if (richMediaItems.length > 0) {
|
|
82
|
+
var _constrainMediaObserv;
|
|
83
|
+
(_constrainMediaObserv = constrainMediaObserver) === null || _constrainMediaObserv === void 0 || _constrainMediaObserv.disconnect();
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
constrainMediaObserver.observe(dom, {
|
|
87
|
+
childList: true,
|
|
88
|
+
subtree: true
|
|
89
|
+
});
|
|
90
|
+
}
|
|
65
91
|
var diffId = crypto.randomUUID();
|
|
66
92
|
var decorations = [];
|
|
67
93
|
|
|
@@ -182,13 +208,18 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
|
|
|
182
208
|
decorations.push(leftAnchor);
|
|
183
209
|
}
|
|
184
210
|
}
|
|
185
|
-
decorations.push(Decoration.widget(safeInsertPos, dom, buildDiffDecorationSpec(_objectSpread({
|
|
211
|
+
decorations.push(Decoration.widget(safeInsertPos, dom, _objectSpread(_objectSpread({}, buildDiffDecorationSpec(_objectSpread({
|
|
186
212
|
decorationType: 'widget',
|
|
187
213
|
diffId: diffId,
|
|
188
214
|
isActive: isActive
|
|
189
215
|
}, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
|
|
190
216
|
side: -1
|
|
191
|
-
})))
|
|
217
|
+
}))), {}, {
|
|
218
|
+
destroy: function destroy() {
|
|
219
|
+
var _constrainMediaObserv2;
|
|
220
|
+
return (_constrainMediaObserv2 = constrainMediaObserver) === null || _constrainMediaObserv2 === void 0 ? void 0 : _constrainMediaObserv2.disconnect();
|
|
221
|
+
}
|
|
222
|
+
})));
|
|
192
223
|
|
|
193
224
|
// When a single block node is purely deleted at the very start of the doc (first child),
|
|
194
225
|
// the deleted widget decoration overlaps with the existing first child's decoration.
|
|
@@ -26,5 +26,6 @@ export declare const editingStyleRuleNode: string;
|
|
|
26
26
|
export declare const editingStyleNode: string;
|
|
27
27
|
export declare const editingStyleCardBlockNode: string;
|
|
28
28
|
export declare const standardDecorationMarkerVariable: string;
|
|
29
|
+
export declare const deletedDecorationMarkerVariable: string;
|
|
29
30
|
export declare const addedCellOverlayStyle: string;
|
|
30
31
|
export declare const deletedCellOverlayStyle: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-show-diff",
|
|
3
|
-
"version": "10.1.
|
|
3
|
+
"version": "10.1.13",
|
|
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-prosemirror": "^8.0.0",
|
|
29
29
|
"@atlaskit/editor-tables": "^3.0.0",
|
|
30
30
|
"@atlaskit/platform-feature-flags": "^2.0.0",
|
|
31
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
31
|
+
"@atlaskit/tmp-editor-statsig": "^115.0.0",
|
|
32
32
|
"@atlaskit/tokens": "^15.2.0",
|
|
33
33
|
"@babel/runtime": "^7.0.0",
|
|
34
34
|
"@compiled/react": "^0.20.0",
|