@atlaskit/editor-plugin-show-diff 5.0.5 → 5.0.6
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 +9 -0
- package/dist/cjs/pm-plugins/calculateDiffDecorations.js +12 -10
- package/dist/cjs/pm-plugins/decorations/createBlockChangedDecoration.js +75 -0
- package/dist/cjs/pm-plugins/{deletedRowsHandler.js → decorations/createChangedRowDecorationWidgets.js} +31 -52
- package/dist/cjs/pm-plugins/decorations/createInlineChangedDecoration.js +33 -0
- package/dist/cjs/pm-plugins/{decorations.js → decorations/createNodeChangedDecorationWidget.js} +29 -114
- package/dist/cjs/pm-plugins/{attributeDecorations.js → decorations/utils/getAttrChangeRanges.js} +1 -1
- package/dist/cjs/pm-plugins/{deletedBlocksHandler.js → decorations/utils/wrapBlockNodeView.js} +83 -21
- package/dist/es2019/pm-plugins/calculateDiffDecorations.js +6 -4
- package/dist/es2019/pm-plugins/decorations/createBlockChangedDecoration.js +70 -0
- package/dist/es2019/pm-plugins/{deletedRowsHandler.js → decorations/createChangedRowDecorationWidgets.js} +28 -50
- package/dist/es2019/pm-plugins/decorations/createInlineChangedDecoration.js +28 -0
- package/dist/es2019/pm-plugins/{decorations.js → decorations/createNodeChangedDecorationWidget.js} +16 -103
- package/dist/es2019/pm-plugins/{attributeDecorations.js → decorations/utils/getAttrChangeRanges.js} +1 -1
- package/dist/es2019/pm-plugins/{deletedBlocksHandler.js → decorations/utils/wrapBlockNodeView.js} +85 -18
- package/dist/esm/pm-plugins/calculateDiffDecorations.js +6 -4
- package/dist/esm/pm-plugins/decorations/createBlockChangedDecoration.js +69 -0
- package/dist/esm/pm-plugins/{deletedRowsHandler.js → decorations/createChangedRowDecorationWidgets.js} +30 -51
- package/dist/esm/pm-plugins/decorations/createInlineChangedDecoration.js +28 -0
- package/dist/esm/pm-plugins/{decorations.js → decorations/createNodeChangedDecorationWidget.js} +30 -115
- package/dist/esm/pm-plugins/{attributeDecorations.js → decorations/utils/getAttrChangeRanges.js} +1 -1
- package/dist/esm/pm-plugins/{deletedBlocksHandler.js → decorations/utils/wrapBlockNodeView.js} +80 -18
- package/dist/types/pm-plugins/NodeViewSerializer.d.ts +1 -1
- package/dist/types/pm-plugins/calculateDiffDecorations.d.ts +2 -1
- package/dist/types/pm-plugins/decorations/createBlockChangedDecoration.d.ts +16 -0
- package/dist/types/pm-plugins/decorations/createChangedRowDecorationWidgets.d.ts +17 -0
- package/dist/types/pm-plugins/decorations/createInlineChangedDecoration.d.ts +16 -0
- package/dist/types/pm-plugins/decorations/createNodeChangedDecorationWidget.d.ts +15 -0
- package/dist/types/pm-plugins/decorations/utils/wrapBlockNodeView.d.ts +15 -0
- package/dist/types-ts4.5/pm-plugins/NodeViewSerializer.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/calculateDiffDecorations.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/decorations/createBlockChangedDecoration.d.ts +16 -0
- package/dist/types-ts4.5/pm-plugins/decorations/createChangedRowDecorationWidgets.d.ts +17 -0
- package/dist/types-ts4.5/pm-plugins/decorations/createInlineChangedDecoration.d.ts +16 -0
- package/dist/types-ts4.5/pm-plugins/decorations/createNodeChangedDecorationWidget.d.ts +15 -0
- package/dist/types-ts4.5/pm-plugins/decorations/utils/wrapBlockNodeView.d.ts +15 -0
- package/package.json +3 -3
- package/dist/types/pm-plugins/decorations.d.ts +0 -46
- package/dist/types/pm-plugins/deletedBlocksHandler.d.ts +0 -14
- package/dist/types/pm-plugins/deletedRowsHandler.d.ts +0 -36
- package/dist/types-ts4.5/pm-plugins/decorations.d.ts +0 -46
- package/dist/types-ts4.5/pm-plugins/deletedBlocksHandler.d.ts +0 -14
- package/dist/types-ts4.5/pm-plugins/deletedRowsHandler.d.ts +0 -36
- /package/dist/cjs/pm-plugins/{colorSchemes → decorations/colorSchemes}/standard.js +0 -0
- /package/dist/cjs/pm-plugins/{colorSchemes → decorations/colorSchemes}/traditional.js +0 -0
- /package/dist/cjs/pm-plugins/{findSafeInsertPos.js → decorations/utils/findSafeInsertPos.js} +0 -0
- /package/dist/cjs/pm-plugins/{markDecorations.js → decorations/utils/getMarkChangeRanges.js} +0 -0
- /package/dist/es2019/pm-plugins/{colorSchemes → decorations/colorSchemes}/standard.js +0 -0
- /package/dist/es2019/pm-plugins/{colorSchemes → decorations/colorSchemes}/traditional.js +0 -0
- /package/dist/es2019/pm-plugins/{findSafeInsertPos.js → decorations/utils/findSafeInsertPos.js} +0 -0
- /package/dist/es2019/pm-plugins/{markDecorations.js → decorations/utils/getMarkChangeRanges.js} +0 -0
- /package/dist/esm/pm-plugins/{colorSchemes → decorations/colorSchemes}/standard.js +0 -0
- /package/dist/esm/pm-plugins/{colorSchemes → decorations/colorSchemes}/traditional.js +0 -0
- /package/dist/esm/pm-plugins/{findSafeInsertPos.js → decorations/utils/findSafeInsertPos.js} +0 -0
- /package/dist/esm/pm-plugins/{markDecorations.js → decorations/utils/getMarkChangeRanges.js} +0 -0
- /package/dist/types/pm-plugins/{colorSchemes → decorations/colorSchemes}/standard.d.ts +0 -0
- /package/dist/types/pm-plugins/{colorSchemes → decorations/colorSchemes}/traditional.d.ts +0 -0
- /package/dist/types/pm-plugins/{findSafeInsertPos.d.ts → decorations/utils/findSafeInsertPos.d.ts} +0 -0
- /package/dist/types/pm-plugins/{attributeDecorations.d.ts → decorations/utils/getAttrChangeRanges.d.ts} +0 -0
- /package/dist/types/pm-plugins/{markDecorations.d.ts → decorations/utils/getMarkChangeRanges.d.ts} +0 -0
- /package/dist/types-ts4.5/pm-plugins/{colorSchemes → decorations/colorSchemes}/standard.d.ts +0 -0
- /package/dist/types-ts4.5/pm-plugins/{colorSchemes → decorations/colorSchemes}/traditional.d.ts +0 -0
- /package/dist/types-ts4.5/pm-plugins/{findSafeInsertPos.d.ts → decorations/utils/findSafeInsertPos.d.ts} +0 -0
- /package/dist/types-ts4.5/pm-plugins/{attributeDecorations.d.ts → decorations/utils/getAttrChangeRanges.d.ts} +0 -0
- /package/dist/types-ts4.5/pm-plugins/{markDecorations.d.ts → decorations/utils/getMarkChangeRanges.d.ts} +0 -0
package/dist/cjs/pm-plugins/{deletedBlocksHandler.js → decorations/utils/wrapBlockNodeView.js}
RENAMED
|
@@ -4,14 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
7
|
+
exports.wrapBlockNodeView = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
10
10
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
11
11
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
12
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
13
|
+
var _standard = require("../colorSchemes/standard");
|
|
14
|
+
var _traditional = require("../colorSchemes/traditional");
|
|
15
15
|
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; }
|
|
16
16
|
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; }
|
|
17
17
|
var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
|
|
@@ -30,7 +30,17 @@ var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
|
|
|
30
30
|
whiteSpace: 'nowrap',
|
|
31
31
|
color: "var(--ds-text-warning-inverse, #292A2E)"
|
|
32
32
|
});
|
|
33
|
-
var
|
|
33
|
+
var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
|
|
34
|
+
var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
35
|
+
if (colorScheme === 'traditional') {
|
|
36
|
+
return _traditional.deletedTraditionalContentStyle;
|
|
37
|
+
}
|
|
38
|
+
if (isActive) {
|
|
39
|
+
return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNewActive : _standard.deletedContentStyleActive;
|
|
40
|
+
}
|
|
41
|
+
return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNew : _standard.deletedContentStyle;
|
|
42
|
+
};
|
|
43
|
+
var getDeletedStyleNode = function getDeletedStyleNode(nodeName, colorScheme) {
|
|
34
44
|
var isTraditional = colorScheme === 'traditional';
|
|
35
45
|
switch (nodeName) {
|
|
36
46
|
case 'blockquote':
|
|
@@ -76,7 +86,7 @@ var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeCla
|
|
|
76
86
|
* Checks if a node should apply deleted styles directly without wrapper
|
|
77
87
|
* to preserve natural block-level margins
|
|
78
88
|
*/
|
|
79
|
-
var
|
|
89
|
+
var shouldApplyStylesDirectly = function shouldApplyStylesDirectly(nodeName) {
|
|
80
90
|
return nodeName === 'heading' || nodeName === 'blockquote' && !(0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers');
|
|
81
91
|
};
|
|
82
92
|
|
|
@@ -128,11 +138,14 @@ var createBlockNodeWrapper = function createBlockNodeWrapper() {
|
|
|
128
138
|
};
|
|
129
139
|
|
|
130
140
|
/**
|
|
131
|
-
* Applies
|
|
141
|
+
* Applies styles directly to an HTML element by merging with existing styles
|
|
132
142
|
*/
|
|
133
|
-
var
|
|
143
|
+
var applyStylesToElement = function applyStylesToElement(_ref) {
|
|
144
|
+
var element = _ref.element,
|
|
145
|
+
targetNode = _ref.targetNode,
|
|
146
|
+
colorScheme = _ref.colorScheme;
|
|
134
147
|
var currentStyle = element.getAttribute('style') || '';
|
|
135
|
-
var deletedContentStyle =
|
|
148
|
+
var deletedContentStyle = getDeletedContentStyle(colorScheme);
|
|
136
149
|
var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colorScheme) || '';
|
|
137
150
|
element.setAttribute('style', "".concat(currentStyle).concat(deletedContentStyle).concat(nodeSpecificStyle));
|
|
138
151
|
};
|
|
@@ -140,10 +153,13 @@ var applyDeletedStylesToElement = function applyDeletedStylesToElement(element,
|
|
|
140
153
|
/**
|
|
141
154
|
* Creates a content wrapper with deleted styles for a block node
|
|
142
155
|
*/
|
|
143
|
-
var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(
|
|
156
|
+
var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref2) {
|
|
157
|
+
var nodeView = _ref2.nodeView,
|
|
158
|
+
targetNode = _ref2.targetNode,
|
|
159
|
+
colorScheme = _ref2.colorScheme;
|
|
144
160
|
var contentWrapper = document.createElement('div');
|
|
145
161
|
var nodeStyle = getDeletedStyleNode(targetNode.type.name, colorScheme);
|
|
146
|
-
contentWrapper.setAttribute('style', "".concat(
|
|
162
|
+
contentWrapper.setAttribute('style', "".concat(getDeletedContentStyle(colorScheme)).concat(nodeStyle || ''));
|
|
147
163
|
contentWrapper.append(nodeView);
|
|
148
164
|
return contentWrapper;
|
|
149
165
|
};
|
|
@@ -154,7 +170,12 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(nodeV
|
|
|
154
170
|
* to wait for the rich-media-item to appear before attaching the lozenge.
|
|
155
171
|
* @returns true if embedCard was handled
|
|
156
172
|
*/
|
|
157
|
-
var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(
|
|
173
|
+
var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref3) {
|
|
174
|
+
var dom = _ref3.dom,
|
|
175
|
+
nodeView = _ref3.nodeView,
|
|
176
|
+
targetNode = _ref3.targetNode,
|
|
177
|
+
lozenge = _ref3.lozenge,
|
|
178
|
+
colorScheme = _ref3.colorScheme;
|
|
158
179
|
if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
|
|
159
180
|
return false;
|
|
160
181
|
}
|
|
@@ -186,7 +207,12 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom, nodeVi
|
|
|
186
207
|
* Handles special mediaSingle node rendering with lozenge on child media element
|
|
187
208
|
* @returns true if mediaSingle was handled, false otherwise
|
|
188
209
|
*/
|
|
189
|
-
var handleMediaSingleWithLozenge =
|
|
210
|
+
var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref4) {
|
|
211
|
+
var dom = _ref4.dom,
|
|
212
|
+
nodeView = _ref4.nodeView,
|
|
213
|
+
targetNode = _ref4.targetNode,
|
|
214
|
+
lozenge = _ref4.lozenge,
|
|
215
|
+
colorScheme = _ref4.colorScheme;
|
|
190
216
|
if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
|
|
191
217
|
return false;
|
|
192
218
|
}
|
|
@@ -215,19 +241,40 @@ var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = functi
|
|
|
215
241
|
/**
|
|
216
242
|
* Appends a block node with wrapper, lozenge, and appropriate styling
|
|
217
243
|
*/
|
|
218
|
-
var
|
|
244
|
+
var wrapBlockNode = function wrapBlockNode(_ref5) {
|
|
245
|
+
var dom = _ref5.dom,
|
|
246
|
+
nodeView = _ref5.nodeView,
|
|
247
|
+
targetNode = _ref5.targetNode,
|
|
248
|
+
colorScheme = _ref5.colorScheme,
|
|
249
|
+
intl = _ref5.intl;
|
|
219
250
|
var blockWrapper = createBlockNodeWrapper();
|
|
220
251
|
if (shouldShowRemovedLozenge(targetNode.type.name)) {
|
|
221
252
|
var lozenge = createRemovedLozenge(intl);
|
|
222
|
-
if (handleEmbedCardWithLozenge(
|
|
253
|
+
if (handleEmbedCardWithLozenge({
|
|
254
|
+
dom: dom,
|
|
255
|
+
nodeView: nodeView,
|
|
256
|
+
targetNode: targetNode,
|
|
257
|
+
lozenge: lozenge,
|
|
258
|
+
colorScheme: colorScheme
|
|
259
|
+
}) && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers')) {
|
|
223
260
|
return;
|
|
224
261
|
}
|
|
225
|
-
if (handleMediaSingleWithLozenge(
|
|
262
|
+
if (handleMediaSingleWithLozenge({
|
|
263
|
+
dom: dom,
|
|
264
|
+
nodeView: nodeView,
|
|
265
|
+
targetNode: targetNode,
|
|
266
|
+
lozenge: lozenge,
|
|
267
|
+
colorScheme: colorScheme
|
|
268
|
+
})) {
|
|
226
269
|
return;
|
|
227
270
|
}
|
|
228
271
|
blockWrapper.append(lozenge);
|
|
229
272
|
}
|
|
230
|
-
var contentWrapper = createBlockNodeContentWrapper(
|
|
273
|
+
var contentWrapper = createBlockNodeContentWrapper({
|
|
274
|
+
nodeView: nodeView,
|
|
275
|
+
targetNode: targetNode,
|
|
276
|
+
colorScheme: colorScheme
|
|
277
|
+
});
|
|
231
278
|
blockWrapper.append(contentWrapper);
|
|
232
279
|
if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
|
|
233
280
|
var showDiffDeletedNodeClass = colorScheme === 'traditional' && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
|
|
@@ -241,13 +288,28 @@ var appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeVi
|
|
|
241
288
|
* For heading nodes, applies styles directly to preserve natural margins.
|
|
242
289
|
* For other block nodes, uses wrapper approach with optional lozenge.
|
|
243
290
|
*/
|
|
244
|
-
var
|
|
245
|
-
|
|
291
|
+
var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_ref6) {
|
|
292
|
+
var dom = _ref6.dom,
|
|
293
|
+
nodeView = _ref6.nodeView,
|
|
294
|
+
targetNode = _ref6.targetNode,
|
|
295
|
+
colorScheme = _ref6.colorScheme,
|
|
296
|
+
intl = _ref6.intl;
|
|
297
|
+
if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
|
|
246
298
|
// Apply deleted styles directly to preserve natural block-level margins
|
|
247
|
-
|
|
299
|
+
applyStylesToElement({
|
|
300
|
+
element: nodeView,
|
|
301
|
+
targetNode: targetNode,
|
|
302
|
+
colorScheme: colorScheme
|
|
303
|
+
});
|
|
248
304
|
dom.append(nodeView);
|
|
249
305
|
} else {
|
|
250
306
|
// Use wrapper approach for other block nodes
|
|
251
|
-
|
|
307
|
+
wrapBlockNode({
|
|
308
|
+
dom: dom,
|
|
309
|
+
nodeView: nodeView,
|
|
310
|
+
targetNode: targetNode,
|
|
311
|
+
colorScheme: colorScheme,
|
|
312
|
+
intl: intl
|
|
313
|
+
});
|
|
252
314
|
}
|
|
253
315
|
};
|
|
@@ -4,9 +4,11 @@ import memoizeOne from 'memoize-one';
|
|
|
4
4
|
import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
|
|
5
5
|
import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
|
|
6
6
|
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
7
|
-
import {
|
|
8
|
-
import { createInlineChangedDecoration
|
|
9
|
-
import {
|
|
7
|
+
import { createBlockChangedDecoration } from './decorations/createBlockChangedDecoration';
|
|
8
|
+
import { createInlineChangedDecoration } from './decorations/createInlineChangedDecoration';
|
|
9
|
+
import { createNodeChangedDecorationWidget } from './decorations/createNodeChangedDecorationWidget';
|
|
10
|
+
import { getAttrChangeRanges, stepIsValidAttrChange } from './decorations/utils/getAttrChangeRanges';
|
|
11
|
+
import { getMarkChangeRanges } from './decorations/utils/getMarkChangeRanges';
|
|
10
12
|
import { simplifySteps } from './simplifyChanges';
|
|
11
13
|
const calculateNodesForBlockDecoration = ({
|
|
12
14
|
doc,
|
|
@@ -129,7 +131,7 @@ const calculateDiffDecorationsInner = ({
|
|
|
129
131
|
}
|
|
130
132
|
if (change.deleted.length > 0) {
|
|
131
133
|
const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
|
|
132
|
-
const decoration =
|
|
134
|
+
const decoration = createNodeChangedDecorationWidget({
|
|
133
135
|
change,
|
|
134
136
|
doc: originalDoc,
|
|
135
137
|
nodeViewSerializer,
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
+
import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode } from './colorSchemes/standard';
|
|
4
|
+
import { traditionalDecorationMarkerVariable, traditionalStyleQuoteNode, traditionalStyleRuleNode, traditionalStyleCardBlockNode, traditionalStyleNode } from './colorSchemes/traditional';
|
|
5
|
+
const getNodeClass = name => {
|
|
6
|
+
switch (name) {
|
|
7
|
+
case 'extension':
|
|
8
|
+
return 'show-diff-changed-decoration-node';
|
|
9
|
+
default:
|
|
10
|
+
return undefined;
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
const getBlockNodeStyle = (nodeName, colorScheme) => {
|
|
14
|
+
const isTraditional = colorScheme === 'traditional';
|
|
15
|
+
if (['mediaSingle', 'mediaGroup', 'table',
|
|
16
|
+
// Handle table separately to avoid border issues
|
|
17
|
+
'tableRow', 'tableCell', 'tableHeader', 'paragraph',
|
|
18
|
+
// Paragraph and heading nodes do not need special styling
|
|
19
|
+
'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
|
|
20
|
+
// Layout nodes do not need special styling
|
|
21
|
+
return undefined;
|
|
22
|
+
}
|
|
23
|
+
if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
|
|
24
|
+
return isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
|
|
25
|
+
}
|
|
26
|
+
if (nodeName === 'blockquote') {
|
|
27
|
+
return isTraditional ? traditionalStyleQuoteNode : editingStyleQuoteNode;
|
|
28
|
+
}
|
|
29
|
+
if (nodeName === 'rule') {
|
|
30
|
+
return isTraditional ? traditionalStyleRuleNode : editingStyleRuleNode;
|
|
31
|
+
}
|
|
32
|
+
if (nodeName === 'blockCard') {
|
|
33
|
+
return isTraditional ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
|
|
34
|
+
}
|
|
35
|
+
return isTraditional ? traditionalStyleNode : editingStyleNode;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Inline decoration used for insertions as the content already exists in the document
|
|
40
|
+
*
|
|
41
|
+
* @param change Changeset "change" containing information about the change content + range
|
|
42
|
+
* @returns Prosemirror inline decoration
|
|
43
|
+
*/
|
|
44
|
+
export const createBlockChangedDecoration = ({
|
|
45
|
+
change,
|
|
46
|
+
colorScheme
|
|
47
|
+
}) => {
|
|
48
|
+
if (fg('platform_editor_show_diff_scroll_navigation')) {
|
|
49
|
+
const style = getBlockNodeStyle(change.name, colorScheme);
|
|
50
|
+
const className = getNodeClass(change.name);
|
|
51
|
+
if (style || className) {
|
|
52
|
+
return Decoration.node(change.from, change.to, {
|
|
53
|
+
style: style,
|
|
54
|
+
'data-testid': 'show-diff-changed-decoration-node',
|
|
55
|
+
class: className
|
|
56
|
+
}, {
|
|
57
|
+
key: 'diff-block'
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
return undefined;
|
|
61
|
+
} else {
|
|
62
|
+
return Decoration.node(change.from, change.to, {
|
|
63
|
+
style: getBlockNodeStyle(change.name, colorScheme),
|
|
64
|
+
'data-testid': 'show-diff-changed-decoration-node',
|
|
65
|
+
class: getNodeClass(change.name)
|
|
66
|
+
}, {
|
|
67
|
+
key: 'diff-block'
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
};
|
|
@@ -4,18 +4,18 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
|
4
4
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
5
5
|
import { deletedRowStyle } from './colorSchemes/standard';
|
|
6
6
|
import { deletedTraditionalRowStyle } from './colorSchemes/traditional';
|
|
7
|
-
import { findSafeInsertPos } from './findSafeInsertPos';
|
|
7
|
+
import { findSafeInsertPos } from './utils/findSafeInsertPos';
|
|
8
8
|
/**
|
|
9
9
|
* Extracts information about deleted table rows from a change
|
|
10
10
|
*/
|
|
11
|
-
const
|
|
12
|
-
const
|
|
11
|
+
const extractChangedRows = (change, originalDoc, newDoc) => {
|
|
12
|
+
const changedRows = [];
|
|
13
13
|
|
|
14
14
|
// Find the table in the original document
|
|
15
15
|
const $fromPos = originalDoc.resolve(change.fromA);
|
|
16
16
|
const tableOld = findParentNodeClosestToPos($fromPos, node => node.type.name === 'table');
|
|
17
17
|
if (!tableOld) {
|
|
18
|
-
return
|
|
18
|
+
return changedRows;
|
|
19
19
|
}
|
|
20
20
|
const oldTableMap = TableMap.get(tableOld.node);
|
|
21
21
|
|
|
@@ -23,18 +23,18 @@ const extractDeletedRows = (change, originalDoc, newDoc) => {
|
|
|
23
23
|
const $newPos = newDoc.resolve(change.fromB);
|
|
24
24
|
const tableNew = findParentNodeClosestToPos($newPos, node => node.type.name === 'table');
|
|
25
25
|
if (!tableNew) {
|
|
26
|
-
return
|
|
26
|
+
return changedRows;
|
|
27
27
|
}
|
|
28
28
|
const newTableMap = TableMap.get(tableNew.node);
|
|
29
29
|
|
|
30
|
-
// If no rows were
|
|
30
|
+
// If no rows were changed, return empty
|
|
31
31
|
if (oldTableMap.height <= newTableMap.height ||
|
|
32
32
|
// For now ignore if there are column deletions as well
|
|
33
33
|
oldTableMap.width !== newTableMap.width) {
|
|
34
|
-
return
|
|
34
|
+
return changedRows;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
// Find which rows were
|
|
37
|
+
// Find which rows were changed by analyzing the change range
|
|
38
38
|
const changeStartInTable = change.fromA - tableOld.pos - 1;
|
|
39
39
|
const changeEndInTable = change.toA - tableOld.pos - 1;
|
|
40
40
|
let currentOffset = 0;
|
|
@@ -47,7 +47,7 @@ const extractDeletedRows = (change, originalDoc, newDoc) => {
|
|
|
47
47
|
const rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
|
|
48
48
|
if (rowOverlapsChange && rowNode.type.name === 'tableRow' && !isEmptyRow(rowNode)) {
|
|
49
49
|
const startOfRow = newTableMap.mapByRow.slice().reverse().find(row => row[0] + tableNew.pos < change.fromB && change.fromB < row[row.length - 1] + tableNew.pos);
|
|
50
|
-
|
|
50
|
+
changedRows.push({
|
|
51
51
|
rowIndex,
|
|
52
52
|
rowNode,
|
|
53
53
|
fromA: tableOld.pos + 1 + rowStart,
|
|
@@ -62,8 +62,8 @@ const extractDeletedRows = (change, originalDoc, newDoc) => {
|
|
|
62
62
|
});
|
|
63
63
|
|
|
64
64
|
// Filter changes that never truly got deleted
|
|
65
|
-
return
|
|
66
|
-
return !tableNew.node.children.some(newRow => areNodesEqualIgnoreAttrs(newRow,
|
|
65
|
+
return changedRows.filter(changedRow => {
|
|
66
|
+
return !tableNew.node.children.some(newRow => areNodesEqualIgnoreAttrs(newRow, changedRow.rowNode));
|
|
67
67
|
});
|
|
68
68
|
};
|
|
69
69
|
|
|
@@ -96,7 +96,7 @@ const isEmptyRow = rowNode => {
|
|
|
96
96
|
/**
|
|
97
97
|
* Creates a DOM representation of a deleted table row
|
|
98
98
|
*/
|
|
99
|
-
const
|
|
99
|
+
const createChangedRowDOM = (rowNode, nodeViewSerializer, colorScheme) => {
|
|
100
100
|
const tr = document.createElement('tr');
|
|
101
101
|
tr.setAttribute('style', colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
|
|
102
102
|
tr.setAttribute('data-testid', 'show-diff-deleted-row');
|
|
@@ -120,61 +120,39 @@ const createDeletedRowDOM = (rowNode, nodeViewSerializer, colorScheme) => {
|
|
|
120
120
|
};
|
|
121
121
|
|
|
122
122
|
/**
|
|
123
|
-
* Expands a diff to include whole
|
|
123
|
+
* Expands a diff to include whole changed rows when table rows are affected
|
|
124
124
|
*/
|
|
125
|
-
const
|
|
126
|
-
const
|
|
125
|
+
const expandDiffForChangedRows = (changes, originalDoc, newDoc) => {
|
|
126
|
+
const rowInfo = [];
|
|
127
127
|
for (const change of changes) {
|
|
128
128
|
// Check if this change affects table content
|
|
129
|
-
const
|
|
130
|
-
if (
|
|
131
|
-
|
|
129
|
+
const changedRows = extractChangedRows(change, originalDoc, newDoc);
|
|
130
|
+
if (changedRows.length > 0) {
|
|
131
|
+
rowInfo.push(...changedRows);
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
|
-
return
|
|
134
|
+
return rowInfo;
|
|
135
135
|
};
|
|
136
136
|
|
|
137
137
|
/**
|
|
138
|
-
*
|
|
138
|
+
* Main function to handle deleted rows - computes diff and creates decorations
|
|
139
139
|
*/
|
|
140
|
-
export const
|
|
141
|
-
|
|
140
|
+
export const createChangedRowDecorationWidgets = ({
|
|
141
|
+
changes,
|
|
142
142
|
originalDoc,
|
|
143
143
|
newDoc,
|
|
144
144
|
nodeViewSerializer,
|
|
145
145
|
colorScheme
|
|
146
146
|
}) => {
|
|
147
|
-
|
|
148
|
-
|
|
147
|
+
// First, expand the changes to include complete deleted rows
|
|
148
|
+
const changedRows = expandDiffForChangedRows(changes.filter(change => change.deleted.length > 0), originalDoc, newDoc);
|
|
149
|
+
return changedRows.map(changedRow => {
|
|
150
|
+
const rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme);
|
|
149
151
|
|
|
150
152
|
// Find safe insertion position for the deleted row
|
|
151
|
-
const safeInsertPos = findSafeInsertPos(newDoc,
|
|
153
|
+
const safeInsertPos = findSafeInsertPos(newDoc, changedRow.fromB - 1,
|
|
152
154
|
// -1 to find the first safe position from the table
|
|
153
|
-
originalDoc.slice(
|
|
155
|
+
originalDoc.slice(changedRow.fromA, changedRow.toA));
|
|
154
156
|
return Decoration.widget(safeInsertPos, rowDOM, {});
|
|
155
157
|
});
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
/**
|
|
159
|
-
* Main function to handle deleted rows - computes diff and creates decorations
|
|
160
|
-
*/
|
|
161
|
-
export const handleDeletedRows = ({
|
|
162
|
-
changes,
|
|
163
|
-
originalDoc,
|
|
164
|
-
newDoc,
|
|
165
|
-
nodeViewSerializer,
|
|
166
|
-
colorScheme
|
|
167
|
-
}) => {
|
|
168
|
-
// First, expand the changes to include complete deleted rows
|
|
169
|
-
const deletedRows = expandDiffForDeletedRows(changes.filter(change => change.deleted.length > 0), originalDoc, newDoc);
|
|
170
|
-
const allDecorations = createDeletedRowsDecorations({
|
|
171
|
-
deletedRows,
|
|
172
|
-
originalDoc,
|
|
173
|
-
newDoc,
|
|
174
|
-
nodeViewSerializer,
|
|
175
|
-
colorScheme
|
|
176
|
-
});
|
|
177
|
-
return {
|
|
178
|
-
decorations: allDecorations
|
|
179
|
-
};
|
|
180
158
|
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
2
|
+
import { editingStyle, editingStyleActive } from './colorSchemes/standard';
|
|
3
|
+
import { traditionalInsertStyle, traditionalInsertStyleActive } from './colorSchemes/traditional';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Inline decoration used for insertions as the content already exists in the document
|
|
7
|
+
*
|
|
8
|
+
* @param change Changeset "change" containing information about the change content + range
|
|
9
|
+
* @returns Prosemirror inline decoration
|
|
10
|
+
*/
|
|
11
|
+
export const createInlineChangedDecoration = ({
|
|
12
|
+
change,
|
|
13
|
+
colorScheme,
|
|
14
|
+
isActive = false
|
|
15
|
+
}) => {
|
|
16
|
+
let style;
|
|
17
|
+
if (colorScheme === 'traditional') {
|
|
18
|
+
style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
|
|
19
|
+
} else {
|
|
20
|
+
style = isActive ? editingStyleActive : editingStyle;
|
|
21
|
+
}
|
|
22
|
+
return Decoration.inline(change.fromB, change.toB, {
|
|
23
|
+
style,
|
|
24
|
+
'data-testid': 'show-diff-changed-decoration'
|
|
25
|
+
}, {
|
|
26
|
+
key: 'diff-inline'
|
|
27
|
+
});
|
|
28
|
+
};
|
package/dist/es2019/pm-plugins/{decorations.js → decorations/createNodeChangedDecorationWidget.js}
RENAMED
|
@@ -2,37 +2,13 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
|
2
2
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
3
3
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
4
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
5
|
-
import { deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive,
|
|
6
|
-
import { deletedTraditionalContentStyle, deletedTraditionalContentStyleUnbounded
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
*
|
|
13
|
-
* @param change Changeset "change" containing information about the change content + range
|
|
14
|
-
* @returns Prosemirror inline decoration
|
|
15
|
-
*/
|
|
16
|
-
export const createInlineChangedDecoration = ({
|
|
17
|
-
change,
|
|
18
|
-
colorScheme,
|
|
19
|
-
isActive = false
|
|
20
|
-
}) => {
|
|
21
|
-
let style;
|
|
22
|
-
if (colorScheme === 'traditional') {
|
|
23
|
-
style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
|
|
24
|
-
} else {
|
|
25
|
-
style = isActive ? editingStyleActive : editingStyle;
|
|
26
|
-
}
|
|
27
|
-
return Decoration.inline(change.fromB, change.toB, {
|
|
28
|
-
style,
|
|
29
|
-
'data-testid': 'show-diff-changed-decoration'
|
|
30
|
-
}, {
|
|
31
|
-
key: 'diff-inline'
|
|
32
|
-
});
|
|
33
|
-
};
|
|
34
|
-
export const getDeletedContentStyleUnbounded = colorScheme => colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
|
|
35
|
-
export const getDeletedContentStyle = (colorScheme, isActive = false) => {
|
|
5
|
+
import { deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedContentStyleUnbounded } from './colorSchemes/standard';
|
|
6
|
+
import { deletedTraditionalContentStyle, deletedTraditionalContentStyleUnbounded } from './colorSchemes/traditional';
|
|
7
|
+
import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
|
|
8
|
+
import { findSafeInsertPos } from './utils/findSafeInsertPos';
|
|
9
|
+
import { wrapBlockNodeView } from './utils/wrapBlockNodeView';
|
|
10
|
+
const getDeletedContentStyleUnbounded = colorScheme => colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
|
|
11
|
+
const getDeletedContentStyle = (colorScheme, isActive = false) => {
|
|
36
12
|
if (colorScheme === 'traditional') {
|
|
37
13
|
return deletedTraditionalContentStyle;
|
|
38
14
|
}
|
|
@@ -41,38 +17,6 @@ export const getDeletedContentStyle = (colorScheme, isActive = false) => {
|
|
|
41
17
|
}
|
|
42
18
|
return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
|
|
43
19
|
};
|
|
44
|
-
const getNodeClass = name => {
|
|
45
|
-
switch (name) {
|
|
46
|
-
case 'extension':
|
|
47
|
-
return 'show-diff-changed-decoration-node';
|
|
48
|
-
default:
|
|
49
|
-
return undefined;
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
const getBlockNodeStyle = (nodeName, colorScheme) => {
|
|
53
|
-
const isTraditional = colorScheme === 'traditional';
|
|
54
|
-
if (['mediaSingle', 'mediaGroup', 'table',
|
|
55
|
-
// Handle table separately to avoid border issues
|
|
56
|
-
'tableRow', 'tableCell', 'tableHeader', 'paragraph',
|
|
57
|
-
// Paragraph and heading nodes do not need special styling
|
|
58
|
-
'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
|
|
59
|
-
// Layout nodes do not need special styling
|
|
60
|
-
return undefined;
|
|
61
|
-
}
|
|
62
|
-
if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
|
|
63
|
-
return isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
|
|
64
|
-
}
|
|
65
|
-
if (nodeName === 'blockquote') {
|
|
66
|
-
return isTraditional ? traditionalStyleQuoteNode : editingStyleQuoteNode;
|
|
67
|
-
}
|
|
68
|
-
if (nodeName === 'rule') {
|
|
69
|
-
return isTraditional ? traditionalStyleRuleNode : editingStyleRuleNode;
|
|
70
|
-
}
|
|
71
|
-
if (nodeName === 'blockCard') {
|
|
72
|
-
return isTraditional ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
|
|
73
|
-
}
|
|
74
|
-
return isTraditional ? traditionalStyleNode : editingStyleNode;
|
|
75
|
-
};
|
|
76
20
|
|
|
77
21
|
/**
|
|
78
22
|
* Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
|
|
@@ -82,40 +26,6 @@ const createDeletedStyleWrapperWithoutOpacity = (colorScheme, isActive) => {
|
|
|
82
26
|
wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
|
|
83
27
|
return wrapper;
|
|
84
28
|
};
|
|
85
|
-
|
|
86
|
-
/**
|
|
87
|
-
* Inline decoration used for insertions as the content already exists in the document
|
|
88
|
-
*
|
|
89
|
-
* @param change Changeset "change" containing information about the change content + range
|
|
90
|
-
* @returns Prosemirror inline decoration
|
|
91
|
-
*/
|
|
92
|
-
export const createBlockChangedDecoration = ({
|
|
93
|
-
change,
|
|
94
|
-
colorScheme
|
|
95
|
-
}) => {
|
|
96
|
-
if (fg('platform_editor_show_diff_scroll_navigation')) {
|
|
97
|
-
const style = getBlockNodeStyle(change.name, colorScheme);
|
|
98
|
-
const className = getNodeClass(change.name);
|
|
99
|
-
if (style || className) {
|
|
100
|
-
return Decoration.node(change.from, change.to, {
|
|
101
|
-
style: style,
|
|
102
|
-
'data-testid': 'show-diff-changed-decoration-node',
|
|
103
|
-
class: className
|
|
104
|
-
}, {
|
|
105
|
-
key: 'diff-block'
|
|
106
|
-
});
|
|
107
|
-
}
|
|
108
|
-
return undefined;
|
|
109
|
-
} else {
|
|
110
|
-
return Decoration.node(change.from, change.to, {
|
|
111
|
-
style: getBlockNodeStyle(change.name, colorScheme),
|
|
112
|
-
'data-testid': 'show-diff-changed-decoration-node',
|
|
113
|
-
class: getNodeClass(change.name)
|
|
114
|
-
}, {
|
|
115
|
-
key: 'diff-block'
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
};
|
|
119
29
|
const createContentWrapper = (colorScheme, isActive = false) => {
|
|
120
30
|
const wrapper = document.createElement('span');
|
|
121
31
|
const baseStyle = convertToInlineCss({
|
|
@@ -128,7 +38,7 @@ const createContentWrapper = (colorScheme, isActive = false) => {
|
|
|
128
38
|
wrapper.append(strikethrough);
|
|
129
39
|
return wrapper;
|
|
130
40
|
};
|
|
131
|
-
export const
|
|
41
|
+
export const createNodeChangedDecorationWidget = ({
|
|
132
42
|
change,
|
|
133
43
|
doc,
|
|
134
44
|
nodeViewSerializer,
|
|
@@ -150,16 +60,13 @@ export const createDeletedContentDecoration = ({
|
|
|
150
60
|
if (!fg('platform_editor_ai_aifc_patch_ga')) {
|
|
151
61
|
return;
|
|
152
62
|
}
|
|
153
|
-
|
|
154
|
-
decorations
|
|
155
|
-
} = handleDeletedRows({
|
|
63
|
+
return createChangedRowDecorationWidgets({
|
|
156
64
|
changes: [change],
|
|
157
65
|
originalDoc: doc,
|
|
158
66
|
newDoc,
|
|
159
67
|
nodeViewSerializer,
|
|
160
68
|
colorScheme
|
|
161
69
|
});
|
|
162
|
-
return decorations;
|
|
163
70
|
}
|
|
164
71
|
const serializer = nodeViewSerializer;
|
|
165
72
|
|
|
@@ -233,7 +140,13 @@ export const createDeletedContentDecoration = ({
|
|
|
233
140
|
dom.append(wrapper);
|
|
234
141
|
} else {
|
|
235
142
|
// Handle all block nodes with unified function
|
|
236
|
-
|
|
143
|
+
wrapBlockNodeView({
|
|
144
|
+
dom,
|
|
145
|
+
nodeView,
|
|
146
|
+
targetNode: node,
|
|
147
|
+
colorScheme,
|
|
148
|
+
intl
|
|
149
|
+
});
|
|
237
150
|
}
|
|
238
151
|
} else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
|
|
239
152
|
// Skip the case where the node is a paragraph or table row that way it can still be rendered and delete the entire table
|