@atlaskit/editor-plugin-show-diff 10.5.2 → 10.6.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 CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/editor-plugin-show-diff
2
2
 
3
+ ## 10.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`0840aa4f6b2d0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0840aa4f6b2d0) -
8
+ Add a new `inlineDeletedDiffPlacement: 'before' | 'after'` option to `PMDiffParams` for the
9
+ `smart` diff type. When set to `'after'`, inline-level (and sentence-level) deleted content is
10
+ rendered after the added/updated content instead of before it. Defaults to `'before'` and is
11
+ independent of the existing node/paragraph-level `deletedDiffPlacement` option. Post Stream Review
12
+ now requests `'after'` so reviewers read the new text first.
13
+
14
+ ## 10.5.3
15
+
16
+ ### Patch Changes
17
+
18
+ - [`154b76531a593`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/154b76531a593) -
19
+ Fix table diff cell overlays to use rounded corners for inserting row diffs when
20
+ platform_editor_table_diff_rounded_corners is enabled
21
+
3
22
  ## 10.5.2
4
23
 
5
24
  ### Patch Changes
@@ -151,7 +151,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
151
151
  showIndicators = _ref3$showIndicators === void 0 ? false : _ref3$showIndicators,
152
152
  smartThresholds = _ref3.smartThresholds,
153
153
  _ref3$deletedDiffPlac = _ref3.deletedDiffPlacement,
154
- deletedDiffPlacement = _ref3$deletedDiffPlac === void 0 ? 'top' : _ref3$deletedDiffPlac;
154
+ deletedDiffPlacement = _ref3$deletedDiffPlac === void 0 ? 'top' : _ref3$deletedDiffPlac,
155
+ _ref3$inlineDeletedDi = _ref3.inlineDeletedDiffPlacement,
156
+ inlineDeletedDiffPlacement = _ref3$inlineDeletedDi === void 0 ? 'before' : _ref3$inlineDeletedDi;
155
157
  var originalDoc = pluginState.originalDoc,
156
158
  steps = pluginState.steps,
157
159
  isDisplayingChanges = pluginState.isDisplayingChanges;
@@ -326,10 +328,19 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
326
328
  isInserted: !isInserted,
327
329
  diffType: diffType,
328
330
  hideAddedDiffsUnderline: hideAddedDiffsUnderline,
329
- // For `smart` node- and paragraph-level changes, optionally render the
330
- // deleted content below the new content (gray + strikethrough) instead
331
- // of above it. Controlled by `deletedDiffPlacement` (default `'top'`).
332
- placeBelow: deletedDiffPlacement === 'bottom' && diffType === 'smart' && (0, _platformFeatureFlags.fg)('platform_editor_ai_smart_diff') && ((0, _helpers.smartChangeLevel)(change) === 'node' || (0, _helpers.smartChangeLevel)(change) === 'paragraph')
331
+ // For `smart` changes, optionally render the deleted content after the new
332
+ // content (gray + strikethrough) instead of before it. Two independent
333
+ // controls, split by change level:
334
+ // - node/paragraph-level: `deletedDiffPlacement` (default `'top'`).
335
+ // - inline/sentence-level: `inlineDeletedDiffPlacement` (default `'before'`).
336
+ placeBelow: diffType === 'smart' && (0, _platformFeatureFlags.fg)('platform_editor_ai_smart_diff') && function () {
337
+ var level = (0, _helpers.smartChangeLevel)(change);
338
+ if (level === 'node' || level === 'paragraph') {
339
+ return deletedDiffPlacement === 'bottom';
340
+ }
341
+ // Inline-level (undefined) and sentence-level changes.
342
+ return inlineDeletedDiffPlacement === 'after';
343
+ }()
333
344
  }), {}, {
334
345
  showIndicators: showIndicators
335
346
  }))));
@@ -500,7 +511,8 @@ function (_ref5, _ref6) {
500
511
  hideAddedDiffsUnderline = _ref7$.hideAddedDiffsUnderline,
501
512
  showIndicators = _ref7$.showIndicators,
502
513
  smartThresholds = _ref7$.smartThresholds,
503
- deletedDiffPlacement = _ref7$.deletedDiffPlacement;
514
+ deletedDiffPlacement = _ref7$.deletedDiffPlacement,
515
+ inlineDeletedDiffPlacement = _ref7$.inlineDeletedDiffPlacement;
504
516
  var _ref8 = (0, _slicedToArray2.default)(_ref6, 1),
505
517
  _ref8$ = _ref8[0],
506
518
  lastPluginState = _ref8$.pluginState,
@@ -514,11 +526,12 @@ function (_ref5, _ref6) {
514
526
  lastHideAddedDiffsUnderline = _ref8$.hideAddedDiffsUnderline,
515
527
  lastShowIndicators = _ref8$.showIndicators,
516
528
  lastSmartThresholds = _ref8$.smartThresholds,
517
- lastDeletedDiffPlacement = _ref8$.deletedDiffPlacement;
529
+ lastDeletedDiffPlacement = _ref8$.deletedDiffPlacement,
530
+ lastInlineDeletedDiffPlacement = _ref8$.inlineDeletedDiffPlacement;
518
531
  var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
519
532
  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
520
533
  var _ref9;
521
- return (_ref9 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && (0, _isEqual.default)(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement) !== null && _ref9 !== void 0 ? _ref9 : false;
534
+ return (_ref9 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && (0, _isEqual.default)(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement && inlineDeletedDiffPlacement === lastInlineDeletedDiffPlacement) !== null && _ref9 !== void 0 ? _ref9 : false;
522
535
  }
523
536
  return (_ref0 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref0 !== void 0 ? _ref0 : false;
524
537
  });
@@ -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.editingStyleExtendedNoUnderline = exports.editingStyleExtended = exports.editingStyleCardBlockNode = exports.editingStyleActiveExtendedNoUnderline = exports.editingStyleActiveExtended = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlockExtendedNoUnderline = 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.deletedCellOverlayRoundedStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
6
+ exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleExtendedNoUnderline = exports.editingStyleExtended = exports.editingStyleCardBlockNode = exports.editingStyleActiveExtendedNoUnderline = exports.editingStyleActiveExtended = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlockExtendedNoUnderline = 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.deletedCellOverlayRoundedStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = exports.addedCellOverlayRoundedStyle = 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)({
@@ -176,6 +176,18 @@ var addedCellOverlayStyle = exports.addedCellOverlayStyle = (0, _lazyNodeView.co
176
176
  outline: "1px solid ".concat("var(--ds-border-accent-purple, #AF59E1)"),
177
177
  pointerEvents: 'none'
178
178
  });
179
+ var addedCellOverlayRoundedStyle = exports.addedCellOverlayRoundedStyle = (0, _lazyNodeView.convertToInlineCss)({
180
+ position: 'absolute',
181
+ top: 0,
182
+ left: 0,
183
+ width: '100%',
184
+ height: '100%',
185
+ backgroundColor: "rgba(from ".concat("var(--ds-background-accent-purple-subtlest, #F8EEFE)", " r g b / 0.5)"),
186
+ zIndex: 2,
187
+ outline: "1px solid ".concat("var(--ds-border-accent-purple, #AF59E1)"),
188
+ pointerEvents: 'none',
189
+ borderRadius: 'inherit'
190
+ });
179
191
  var deletedCellOverlayStyle = exports.deletedCellOverlayStyle = (0, _lazyNodeView.convertToInlineCss)({
180
192
  position: 'absolute',
181
193
  top: 0,
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.deletedTraditionalStyleQuoteNodeActive = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalCellOverlayStyle = exports.deletedTraditionalCellOverlayRoundedStyle = exports.deletedTraditionalBlockOutlineRoundedNew = exports.deletedTraditionalBlockOutlineRoundedActive = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineNew = exports.deletedTraditionalBlockOutlineActive = exports.deletedTraditionalBlockOutline = void 0;
8
8
  exports.getDeletedTraditionalInlineStyle = getDeletedTraditionalInlineStyle;
9
- exports.traditionalStyleRuleNodeNew = exports.traditionalStyleRuleNodeActive = exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNodeNew = exports.traditionalStyleQuoteNodeActive = exports.traditionalStyleQuoteNode = exports.traditionalStyleNodeNew = exports.traditionalStyleNodeActive = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNodeNew = exports.traditionalStyleCardBlockNodeActive = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDeletedDecorationMarkerVariableNew = exports.traditionalDeletedDecorationMarkerVariableActive = exports.traditionalDeletedDecorationMarkerVariable = exports.traditionalDecorationMarkerVariableNew = exports.traditionalDecorationMarkerVariableActive = exports.traditionalDecorationMarkerVariable = exports.traditionalAddedCellOverlayStyleNew = exports.traditionalAddedCellOverlayStyle = void 0;
9
+ exports.traditionalStyleRuleNodeNew = exports.traditionalStyleRuleNodeActive = exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNodeNew = exports.traditionalStyleQuoteNodeActive = exports.traditionalStyleQuoteNode = exports.traditionalStyleNodeNew = exports.traditionalStyleNodeActive = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNodeNew = exports.traditionalStyleCardBlockNodeActive = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDeletedDecorationMarkerVariableNew = exports.traditionalDeletedDecorationMarkerVariableActive = exports.traditionalDeletedDecorationMarkerVariable = exports.traditionalDecorationMarkerVariableNew = exports.traditionalDecorationMarkerVariableActive = exports.traditionalDecorationMarkerVariable = exports.traditionalAddedCellOverlayStyleNew = exports.traditionalAddedCellOverlayStyle = exports.traditionalAddedCellOverlayRoundedStyle = void 0;
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
  var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
12
12
  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; }
@@ -193,6 +193,19 @@ var traditionalAddedCellOverlayStyle = exports.traditionalAddedCellOverlayStyle
193
193
  outline: "1px solid ".concat("var(--ds-border-accent-green, #22A06B)"),
194
194
  pointerEvents: 'none'
195
195
  });
196
+ var traditionalAddedCellOverlayRoundedStyle = exports.traditionalAddedCellOverlayRoundedStyle = (0, _lazyNodeView.convertToInlineCss)({
197
+ position: 'absolute',
198
+ top: 0,
199
+ left: 0,
200
+ width: '100%',
201
+ height: '100%',
202
+ backgroundColor: "rgba(from ".concat("var(--ds-background-accent-green-subtlest, #DCFFF1)", " r g b / 0.5)"),
203
+ zIndex: 2,
204
+ outline: "1px solid ".concat("var(--ds-border-accent-green, #22A06B)"),
205
+ pointerEvents: 'none',
206
+ border: 'inherit',
207
+ borderRadius: 'inherit'
208
+ });
196
209
  var traditionalAddedCellOverlayStyleNew = exports.traditionalAddedCellOverlayStyleNew = (0, _lazyNodeView.convertToInlineCss)({
197
210
  position: 'absolute',
198
211
  top: 0,
@@ -11,6 +11,7 @@ var _document = require("@atlaskit/editor-common/utils/document");
11
11
  var _utils = require("@atlaskit/editor-prosemirror/utils");
12
12
  var _view = require("@atlaskit/editor-prosemirror/view");
13
13
  var _tableMap = require("@atlaskit/editor-tables/table-map");
14
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
14
15
  var _isExtendedEnabled = require("../isExtendedEnabled");
15
16
  var _standard = require("./colorSchemes/standard");
16
17
  var _traditional = require("./colorSchemes/traditional");
@@ -21,14 +22,55 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
21
22
  function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
22
23
  function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
23
24
  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
25
+ /**
26
+ * Inserted table rows are rendered as decoration widgets, so their cells do not get the
27
+ * `data-reaches-*` attrs normally applied by the table cell node view. Mirror that boundary
28
+ * metadata here so the existing rounded-table CSS can round widget cells like real table cells.
29
+ */
30
+ var getChangedRowCellEdgeAttrs = function getChangedRowCellEdgeAttrs(_ref) {
31
+ var rowNode = _ref.rowNode,
32
+ rowStart = _ref.rowStart,
33
+ tableMap = _ref.tableMap;
34
+ var cellEdgeAttrs = [];
35
+ rowNode.content.forEach(function (cellNode, cellOffset) {
36
+ if (cellNode.type.name !== 'tableCell' && cellNode.type.name !== 'tableHeader') {
37
+ return;
38
+ }
39
+ var cellRect = tableMap.findCell(rowStart + 1 + cellOffset);
40
+ cellEdgeAttrs.push({
41
+ reachesBottom: cellRect.bottom >= tableMap.height,
42
+ reachesLeft: cellRect.left === 0,
43
+ reachesRight: cellRect.right >= tableMap.width,
44
+ reachesTop: cellRect.top === 0
45
+ });
46
+ });
47
+ return cellEdgeAttrs;
48
+ };
49
+ var applyCellEdgeAttrs = function applyCellEdgeAttrs(cell, edgeAttrs) {
50
+ if (!edgeAttrs) {
51
+ return;
52
+ }
53
+ if (edgeAttrs.reachesTop) {
54
+ cell.setAttribute('data-reaches-top', 'true');
55
+ }
56
+ if (edgeAttrs.reachesBottom) {
57
+ cell.setAttribute('data-reaches-bottom', 'true');
58
+ }
59
+ if (edgeAttrs.reachesLeft) {
60
+ cell.setAttribute('data-reaches-left', 'true');
61
+ }
62
+ if (edgeAttrs.reachesRight) {
63
+ cell.setAttribute('data-reaches-right', 'true');
64
+ }
65
+ };
24
66
  /**
25
67
  * Extracts information about deleted table rows from a change
26
68
  */
27
- var extractChangedRows = function extractChangedRows(_ref) {
28
- var change = _ref.change,
29
- originalDoc = _ref.originalDoc,
30
- newDoc = _ref.newDoc,
31
- diffType = _ref.diffType;
69
+ var extractChangedRows = function extractChangedRows(_ref2) {
70
+ var change = _ref2.change,
71
+ originalDoc = _ref2.originalDoc,
72
+ newDoc = _ref2.newDoc,
73
+ diffType = _ref2.diffType;
32
74
  var changedRows = [];
33
75
 
34
76
  // Find the table in the original document
@@ -69,12 +111,18 @@ var extractChangedRows = function extractChangedRows(_ref) {
69
111
  // Check if this row overlaps with the deletion range
70
112
  var rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
71
113
  if (rowOverlapsChange && rowNode.type.name === 'tableRow' && ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) || !isEmptyRow(rowNode))) {
114
+ var cellEdgeAttrs = (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true) ? getChangedRowCellEdgeAttrs({
115
+ rowNode: rowNode,
116
+ rowStart: rowStart,
117
+ tableMap: oldTableMap
118
+ }) : undefined;
72
119
  var startOfRow = newTableMap.mapByRow.slice().reverse().find(function (row) {
73
120
  return row[0] + tableNew.pos < change.fromB && change.fromB < row[row.length - 1] + tableNew.pos;
74
121
  });
75
122
  changedRows.push({
76
123
  rowIndex: rowIndex,
77
124
  rowNode: rowNode,
125
+ cellEdgeAttrs: cellEdgeAttrs,
78
126
  fromA: tableOld.pos + 1 + rowStart,
79
127
  toA: tableOld.pos + 1 + rowEnd,
80
128
  fromB: startOfRow ? startOfRow[0] + tableNew.start : change.fromB
@@ -123,7 +171,7 @@ var isEmptyRow = function isEmptyRow(rowNode) {
123
171
  /**
124
172
  * Creates a DOM representation of a deleted table row
125
173
  */
126
- var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializer, colorScheme, isInserted, diffType) {
174
+ var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType) {
127
175
  var tr = document.createElement('tr');
128
176
  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
129
177
  if (!isInserted) {
@@ -135,15 +183,23 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
135
183
  tr.setAttribute('data-testid', 'show-diff-deleted-row');
136
184
 
137
185
  // Serialize each cell in the row
186
+ var cellIndex = 0;
138
187
  rowNode.content.forEach(function (cellNode) {
139
188
  if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
140
189
  var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
141
190
  if (nodeView) {
142
- if (nodeView instanceof HTMLElement && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
143
- var overlay = document.createElement('span');
144
- var overlayStyle = colorScheme === 'traditional' ? isInserted ? _traditional.traditionalAddedCellOverlayStyle : _traditional.deletedTraditionalCellOverlayStyle : isInserted ? _standard.addedCellOverlayStyle : _standard.deletedCellOverlayStyle;
145
- overlay.setAttribute('style', overlayStyle);
146
- nodeView.appendChild(overlay);
191
+ if (nodeView instanceof HTMLElement) {
192
+ applyCellEdgeAttrs(nodeView, cellEdgeAttrs === null || cellEdgeAttrs === void 0 ? void 0 : cellEdgeAttrs[cellIndex]);
193
+ if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
194
+ var overlay = document.createElement('span');
195
+ var isRoundedTable = (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
196
+ var isTraditional = colorScheme === 'traditional';
197
+ var deletedCellStyle = isTraditional ? _traditional.deletedTraditionalCellOverlayStyle : _standard.deletedCellOverlayStyle;
198
+ var addedCellStyle = isTraditional ? isRoundedTable ? _traditional.traditionalAddedCellOverlayRoundedStyle : _traditional.traditionalAddedCellOverlayStyle : isRoundedTable ? _standard.addedCellOverlayRoundedStyle : _standard.addedCellOverlayStyle;
199
+ var overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
200
+ overlay.setAttribute('style', overlayStyle);
201
+ nodeView.appendChild(overlay);
202
+ }
147
203
  }
148
204
  tr.appendChild(nodeView);
149
205
  } else {
@@ -153,6 +209,7 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
153
209
  tr.appendChild(serializedContent);
154
210
  }
155
211
  }
212
+ cellIndex++;
156
213
  }
157
214
  });
158
215
  return tr;
@@ -161,11 +218,11 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
161
218
  /**
162
219
  * Expands a diff to include whole changed rows when table rows are affected
163
220
  */
164
- var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
165
- var changes = _ref2.changes,
166
- originalDoc = _ref2.originalDoc,
167
- newDoc = _ref2.newDoc,
168
- diffType = _ref2.diffType;
221
+ var expandDiffForChangedRows = function expandDiffForChangedRows(_ref3) {
222
+ var changes = _ref3.changes,
223
+ originalDoc = _ref3.originalDoc,
224
+ newDoc = _ref3.newDoc,
225
+ diffType = _ref3.diffType;
169
226
  var rowInfo = [];
170
227
  var _iterator = _createForOfIteratorHelper(changes),
171
228
  _step;
@@ -194,15 +251,15 @@ var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
194
251
  /**
195
252
  * Main function to handle deleted rows - computes diff and creates decorations
196
253
  */
197
- var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref3) {
198
- var changes = _ref3.changes,
199
- originalDoc = _ref3.originalDoc,
200
- newDoc = _ref3.newDoc,
201
- nodeViewSerializer = _ref3.nodeViewSerializer,
202
- colorScheme = _ref3.colorScheme,
203
- _ref3$isInserted = _ref3.isInserted,
204
- isInserted = _ref3$isInserted === void 0 ? false : _ref3$isInserted,
205
- diffType = _ref3.diffType;
254
+ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref4) {
255
+ var changes = _ref4.changes,
256
+ originalDoc = _ref4.originalDoc,
257
+ newDoc = _ref4.newDoc,
258
+ nodeViewSerializer = _ref4.nodeViewSerializer,
259
+ colorScheme = _ref4.colorScheme,
260
+ _ref4$isInserted = _ref4.isInserted,
261
+ isInserted = _ref4$isInserted === void 0 ? false : _ref4$isInserted,
262
+ diffType = _ref4.diffType;
206
263
  // First, expand the changes to include complete deleted rows
207
264
  var changedRows = expandDiffForChangedRows({
208
265
  changes: changes.filter(function (change) {
@@ -213,7 +270,7 @@ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidget
213
270
  diffType: diffType
214
271
  });
215
272
  return changedRows.map(function (changedRow) {
216
- var rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme, isInserted, diffType);
273
+ var rowDOM = createChangedRowDOM(changedRow.rowNode, changedRow.cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType);
217
274
 
218
275
  // Find safe insertion position for the deleted row
219
276
  var safeInsertPos = (0, _findSafeInsertPos.findSafeInsertPos)(newDoc, changedRow.fromB - 1,
@@ -52,7 +52,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
52
52
  var newPluginState = currentPluginState;
53
53
  if (meta) {
54
54
  if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
55
- var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9;
55
+ var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9, _newPluginState0;
56
56
  // Update the plugin state with the new metadata
57
57
  newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
58
58
  isDisplayingChanges: true,
@@ -74,13 +74,14 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
74
74
  hideAddedDiffsUnderline: (_newPluginState5 = newPluginState) === null || _newPluginState5 === void 0 ? void 0 : _newPluginState5.hideAddedDiffsUnderline,
75
75
  showIndicators: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.showIndicators,
76
76
  smartThresholds: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.smartThresholds,
77
- deletedDiffPlacement: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.deletedDiffPlacement
77
+ deletedDiffPlacement: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.deletedDiffPlacement,
78
+ inlineDeletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.inlineDeletedDiffPlacement
78
79
  } : {})),
79
80
  decorations = _calculateDiffDecorat.decorations,
80
81
  diffDescriptors = _calculateDiffDecorat.diffDescriptors;
81
82
  // Update the decorations and their ids
82
83
  newPluginState.decorations = decorations;
83
- if ((0, _isExtendedEnabled.isExtendedEnabled)((_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.diffType)) {
84
+ if ((0, _isExtendedEnabled.isExtendedEnabled)((_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.diffType)) {
84
85
  newPluginState.diffDescriptors = diffDescriptors;
85
86
  }
86
87
  } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
@@ -96,9 +97,9 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
96
97
  diffDescriptors: []
97
98
  } : {});
98
99
  } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') {
99
- var _newPluginState0;
100
+ var _newPluginState1;
100
101
  // Update the active index in plugin state and recalculate decorations
101
- var _decorations = (0, _getScrollableDecorations.getScrollableDecorations)(currentPluginState.decorations, newState.doc, (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.diffType);
102
+ var _decorations = (0, _getScrollableDecorations.getScrollableDecorations)(currentPluginState.decorations, newState.doc, (_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.diffType);
102
103
  if (_decorations.length > 0) {
103
104
  var _currentPluginState$a;
104
105
  // Initialize to -1 if undefined so that the first "next" scroll takes us to index 0 (first change).
@@ -139,7 +140,8 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
139
140
  hideAddedDiffsUnderline: newPluginState.hideAddedDiffsUnderline,
140
141
  showIndicators: newPluginState.showIndicators,
141
142
  smartThresholds: newPluginState.smartThresholds,
142
- deletedDiffPlacement: newPluginState.deletedDiffPlacement
143
+ deletedDiffPlacement: newPluginState.deletedDiffPlacement,
144
+ inlineDeletedDiffPlacement: newPluginState.inlineDeletedDiffPlacement
143
145
  } : {})),
144
146
  updatedDecorations = _calculateDiffDecorat2.decorations,
145
147
  updatedDiffDescriptors = _calculateDiffDecorat2.diffDescriptors;
@@ -130,7 +130,8 @@ const calculateDiffDecorationsInner = ({
130
130
  hideAddedDiffsUnderline: hideAddedDiffsUnderlineParam = false,
131
131
  showIndicators = false,
132
132
  smartThresholds,
133
- deletedDiffPlacement = 'top'
133
+ deletedDiffPlacement = 'top',
134
+ inlineDeletedDiffPlacement = 'before'
134
135
  }) => {
135
136
  const {
136
137
  originalDoc,
@@ -292,10 +293,19 @@ const calculateDiffDecorationsInner = ({
292
293
  isInserted: !isInserted,
293
294
  diffType,
294
295
  hideAddedDiffsUnderline,
295
- // For `smart` node- and paragraph-level changes, optionally render the
296
- // deleted content below the new content (gray + strikethrough) instead
297
- // of above it. Controlled by `deletedDiffPlacement` (default `'top'`).
298
- placeBelow: deletedDiffPlacement === 'bottom' && diffType === 'smart' && fg('platform_editor_ai_smart_diff') && (smartChangeLevel(change) === 'node' || smartChangeLevel(change) === 'paragraph')
296
+ // For `smart` changes, optionally render the deleted content after the new
297
+ // content (gray + strikethrough) instead of before it. Two independent
298
+ // controls, split by change level:
299
+ // - node/paragraph-level: `deletedDiffPlacement` (default `'top'`).
300
+ // - inline/sentence-level: `inlineDeletedDiffPlacement` (default `'before'`).
301
+ placeBelow: diffType === 'smart' && fg('platform_editor_ai_smart_diff') && (() => {
302
+ const level = smartChangeLevel(change);
303
+ if (level === 'node' || level === 'paragraph') {
304
+ return deletedDiffPlacement === 'bottom';
305
+ }
306
+ // Inline-level (undefined) and sentence-level changes.
307
+ return inlineDeletedDiffPlacement === 'after';
308
+ })()
299
309
  }),
300
310
  showIndicators
301
311
  }));
@@ -460,7 +470,8 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
460
470
  hideAddedDiffsUnderline,
461
471
  showIndicators,
462
472
  smartThresholds,
463
- deletedDiffPlacement
473
+ deletedDiffPlacement,
474
+ inlineDeletedDiffPlacement
464
475
  }], [{
465
476
  pluginState: lastPluginState,
466
477
  state: lastState,
@@ -473,13 +484,14 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
473
484
  hideAddedDiffsUnderline: lastHideAddedDiffsUnderline,
474
485
  showIndicators: lastShowIndicators,
475
486
  smartThresholds: lastSmartThresholds,
476
- deletedDiffPlacement: lastDeletedDiffPlacement
487
+ deletedDiffPlacement: lastDeletedDiffPlacement,
488
+ inlineDeletedDiffPlacement: lastInlineDeletedDiffPlacement
477
489
  }]) => {
478
490
  var _ref2;
479
491
  const originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
480
492
  if (isExtendedEnabled(diffType)) {
481
493
  var _ref;
482
- return (_ref = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && isEqual(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement) !== null && _ref !== void 0 ? _ref : false;
494
+ return (_ref = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && isEqual(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement && inlineDeletedDiffPlacement === lastInlineDeletedDiffPlacement) !== null && _ref !== void 0 ? _ref : false;
483
495
  }
484
496
  return (_ref2 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref2 !== void 0 ? _ref2 : false;
485
497
  });
@@ -170,6 +170,18 @@ export const addedCellOverlayStyle = convertToInlineCss({
170
170
  outline: `1px solid ${"var(--ds-border-accent-purple, #AF59E1)"}`,
171
171
  pointerEvents: 'none'
172
172
  });
173
+ export const addedCellOverlayRoundedStyle = convertToInlineCss({
174
+ position: 'absolute',
175
+ top: 0,
176
+ left: 0,
177
+ width: '100%',
178
+ height: '100%',
179
+ backgroundColor: `rgba(from ${"var(--ds-background-accent-purple-subtlest, #F8EEFE)"} r g b / 0.5)`,
180
+ zIndex: 2,
181
+ outline: `1px solid ${"var(--ds-border-accent-purple, #AF59E1)"}`,
182
+ pointerEvents: 'none',
183
+ borderRadius: 'inherit'
184
+ });
173
185
  export const deletedCellOverlayStyle = convertToInlineCss({
174
186
  position: 'absolute',
175
187
  top: 0,
@@ -185,6 +185,19 @@ export const traditionalAddedCellOverlayStyle = convertToInlineCss({
185
185
  outline: `1px solid ${"var(--ds-border-accent-green, #22A06B)"}`,
186
186
  pointerEvents: 'none'
187
187
  });
188
+ export const traditionalAddedCellOverlayRoundedStyle = convertToInlineCss({
189
+ position: 'absolute',
190
+ top: 0,
191
+ left: 0,
192
+ width: '100%',
193
+ height: '100%',
194
+ backgroundColor: `rgba(from ${"var(--ds-background-accent-green-subtlest, #DCFFF1)"} r g b / 0.5)`,
195
+ zIndex: 2,
196
+ outline: `1px solid ${"var(--ds-border-accent-green, #22A06B)"}`,
197
+ pointerEvents: 'none',
198
+ border: 'inherit',
199
+ borderRadius: 'inherit'
200
+ });
188
201
  export const traditionalAddedCellOverlayStyleNew = convertToInlineCss({
189
202
  position: 'absolute',
190
203
  top: 0,
@@ -2,11 +2,54 @@ import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document
2
2
  import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
3
3
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
4
4
  import { TableMap } from '@atlaskit/editor-tables/table-map';
5
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
5
6
  import { isExtendedEnabled } from '../isExtendedEnabled';
6
- import { addedCellOverlayStyle, deletedRowStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
7
- import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle } from './colorSchemes/traditional';
7
+ import { addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedRowStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
8
+ import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle, traditionalAddedCellOverlayRoundedStyle } from './colorSchemes/traditional';
8
9
  import { buildDiffDecorationSpec } from './decorationKeys';
9
10
  import { findSafeInsertPos } from './utils/findSafeInsertPos';
11
+ /**
12
+ * Inserted table rows are rendered as decoration widgets, so their cells do not get the
13
+ * `data-reaches-*` attrs normally applied by the table cell node view. Mirror that boundary
14
+ * metadata here so the existing rounded-table CSS can round widget cells like real table cells.
15
+ */
16
+ const getChangedRowCellEdgeAttrs = ({
17
+ rowNode,
18
+ rowStart,
19
+ tableMap
20
+ }) => {
21
+ const cellEdgeAttrs = [];
22
+ rowNode.content.forEach((cellNode, cellOffset) => {
23
+ if (cellNode.type.name !== 'tableCell' && cellNode.type.name !== 'tableHeader') {
24
+ return;
25
+ }
26
+ const cellRect = tableMap.findCell(rowStart + 1 + cellOffset);
27
+ cellEdgeAttrs.push({
28
+ reachesBottom: cellRect.bottom >= tableMap.height,
29
+ reachesLeft: cellRect.left === 0,
30
+ reachesRight: cellRect.right >= tableMap.width,
31
+ reachesTop: cellRect.top === 0
32
+ });
33
+ });
34
+ return cellEdgeAttrs;
35
+ };
36
+ const applyCellEdgeAttrs = (cell, edgeAttrs) => {
37
+ if (!edgeAttrs) {
38
+ return;
39
+ }
40
+ if (edgeAttrs.reachesTop) {
41
+ cell.setAttribute('data-reaches-top', 'true');
42
+ }
43
+ if (edgeAttrs.reachesBottom) {
44
+ cell.setAttribute('data-reaches-bottom', 'true');
45
+ }
46
+ if (edgeAttrs.reachesLeft) {
47
+ cell.setAttribute('data-reaches-left', 'true');
48
+ }
49
+ if (edgeAttrs.reachesRight) {
50
+ cell.setAttribute('data-reaches-right', 'true');
51
+ }
52
+ };
10
53
  /**
11
54
  * Extracts information about deleted table rows from a change
12
55
  */
@@ -52,10 +95,16 @@ const extractChangedRows = ({
52
95
  // Check if this row overlaps with the deletion range
53
96
  const rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
54
97
  if (rowOverlapsChange && rowNode.type.name === 'tableRow' && (isExtendedEnabled(diffType) || !isEmptyRow(rowNode))) {
98
+ const cellEdgeAttrs = isExtendedEnabled(diffType) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true) ? getChangedRowCellEdgeAttrs({
99
+ rowNode,
100
+ rowStart,
101
+ tableMap: oldTableMap
102
+ }) : undefined;
55
103
  const startOfRow = newTableMap.mapByRow.slice().reverse().find(row => row[0] + tableNew.pos < change.fromB && change.fromB < row[row.length - 1] + tableNew.pos);
56
104
  changedRows.push({
57
105
  rowIndex,
58
106
  rowNode,
107
+ cellEdgeAttrs,
59
108
  fromA: tableOld.pos + 1 + rowStart,
60
109
  toA: tableOld.pos + 1 + rowEnd,
61
110
  fromB: startOfRow ? startOfRow[0] + tableNew.start : change.fromB
@@ -102,7 +151,7 @@ const isEmptyRow = rowNode => {
102
151
  /**
103
152
  * Creates a DOM representation of a deleted table row
104
153
  */
105
- const createChangedRowDOM = (rowNode, nodeViewSerializer, colorScheme, isInserted, diffType) => {
154
+ const createChangedRowDOM = (rowNode, cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType) => {
106
155
  const tr = document.createElement('tr');
107
156
  if (isExtendedEnabled(diffType)) {
108
157
  if (!isInserted) {
@@ -114,15 +163,23 @@ const createChangedRowDOM = (rowNode, nodeViewSerializer, colorScheme, isInserte
114
163
  tr.setAttribute('data-testid', 'show-diff-deleted-row');
115
164
 
116
165
  // Serialize each cell in the row
166
+ let cellIndex = 0;
117
167
  rowNode.content.forEach(cellNode => {
118
168
  if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
119
169
  const nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
120
170
  if (nodeView) {
121
- if (nodeView instanceof HTMLElement && isExtendedEnabled(diffType)) {
122
- const overlay = document.createElement('span');
123
- const overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
124
- overlay.setAttribute('style', overlayStyle);
125
- nodeView.appendChild(overlay);
171
+ if (nodeView instanceof HTMLElement) {
172
+ applyCellEdgeAttrs(nodeView, cellEdgeAttrs === null || cellEdgeAttrs === void 0 ? void 0 : cellEdgeAttrs[cellIndex]);
173
+ if (isExtendedEnabled(diffType)) {
174
+ const overlay = document.createElement('span');
175
+ const isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
176
+ const isTraditional = colorScheme === 'traditional';
177
+ const deletedCellStyle = isTraditional ? deletedTraditionalCellOverlayStyle : deletedCellOverlayStyle;
178
+ const addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyle : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
179
+ const overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
180
+ overlay.setAttribute('style', overlayStyle);
181
+ nodeView.appendChild(overlay);
182
+ }
126
183
  }
127
184
  tr.appendChild(nodeView);
128
185
  } else {
@@ -132,6 +189,7 @@ const createChangedRowDOM = (rowNode, nodeViewSerializer, colorScheme, isInserte
132
189
  tr.appendChild(serializedContent);
133
190
  }
134
191
  }
192
+ cellIndex++;
135
193
  }
136
194
  });
137
195
  return tr;
@@ -182,7 +240,7 @@ export const createChangedRowDecorationWidgets = ({
182
240
  diffType
183
241
  });
184
242
  return changedRows.map(changedRow => {
185
- const rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme, isInserted, diffType);
243
+ const rowDOM = createChangedRowDOM(changedRow.rowNode, changedRow.cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType);
186
244
 
187
245
  // Find safe insertion position for the deleted row
188
246
  const safeInsertPos = findSafeInsertPos(newDoc, changedRow.fromB - 1,
@@ -43,7 +43,7 @@ export const createPlugin = (config, getIntl, api) => {
43
43
  let newPluginState = currentPluginState;
44
44
  if (meta) {
45
45
  if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
46
- var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9;
46
+ var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9, _newPluginState0;
47
47
  // Update the plugin state with the new metadata
48
48
  newPluginState = {
49
49
  ...currentPluginState,
@@ -70,12 +70,13 @@ export const createPlugin = (config, getIntl, api) => {
70
70
  hideAddedDiffsUnderline: (_newPluginState5 = newPluginState) === null || _newPluginState5 === void 0 ? void 0 : _newPluginState5.hideAddedDiffsUnderline,
71
71
  showIndicators: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.showIndicators,
72
72
  smartThresholds: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.smartThresholds,
73
- deletedDiffPlacement: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.deletedDiffPlacement
73
+ deletedDiffPlacement: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.deletedDiffPlacement,
74
+ inlineDeletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.inlineDeletedDiffPlacement
74
75
  } : {})
75
76
  });
76
77
  // Update the decorations and their ids
77
78
  newPluginState.decorations = decorations;
78
- if (isExtendedEnabled((_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.diffType)) {
79
+ if (isExtendedEnabled((_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.diffType)) {
79
80
  newPluginState.diffDescriptors = diffDescriptors;
80
81
  }
81
82
  } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
@@ -98,9 +99,9 @@ export const createPlugin = (config, getIntl, api) => {
98
99
  } : {})
99
100
  };
100
101
  } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') {
101
- var _newPluginState0;
102
+ var _newPluginState1;
102
103
  // Update the active index in plugin state and recalculate decorations
103
- const decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.diffType);
104
+ const decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.diffType);
104
105
  if (decorations.length > 0) {
105
106
  var _currentPluginState$a;
106
107
  // Initialize to -1 if undefined so that the first "next" scroll takes us to index 0 (first change).
@@ -145,7 +146,8 @@ export const createPlugin = (config, getIntl, api) => {
145
146
  hideAddedDiffsUnderline: newPluginState.hideAddedDiffsUnderline,
146
147
  showIndicators: newPluginState.showIndicators,
147
148
  smartThresholds: newPluginState.smartThresholds,
148
- deletedDiffPlacement: newPluginState.deletedDiffPlacement
149
+ deletedDiffPlacement: newPluginState.deletedDiffPlacement,
150
+ inlineDeletedDiffPlacement: newPluginState.inlineDeletedDiffPlacement
149
151
  } : {})
150
152
  });
151
153
  newPluginState.decorations = updatedDecorations;
@@ -145,7 +145,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
145
145
  showIndicators = _ref3$showIndicators === void 0 ? false : _ref3$showIndicators,
146
146
  smartThresholds = _ref3.smartThresholds,
147
147
  _ref3$deletedDiffPlac = _ref3.deletedDiffPlacement,
148
- deletedDiffPlacement = _ref3$deletedDiffPlac === void 0 ? 'top' : _ref3$deletedDiffPlac;
148
+ deletedDiffPlacement = _ref3$deletedDiffPlac === void 0 ? 'top' : _ref3$deletedDiffPlac,
149
+ _ref3$inlineDeletedDi = _ref3.inlineDeletedDiffPlacement,
150
+ inlineDeletedDiffPlacement = _ref3$inlineDeletedDi === void 0 ? 'before' : _ref3$inlineDeletedDi;
149
151
  var originalDoc = pluginState.originalDoc,
150
152
  steps = pluginState.steps,
151
153
  isDisplayingChanges = pluginState.isDisplayingChanges;
@@ -320,10 +322,19 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
320
322
  isInserted: !isInserted,
321
323
  diffType: diffType,
322
324
  hideAddedDiffsUnderline: hideAddedDiffsUnderline,
323
- // For `smart` node- and paragraph-level changes, optionally render the
324
- // deleted content below the new content (gray + strikethrough) instead
325
- // of above it. Controlled by `deletedDiffPlacement` (default `'top'`).
326
- placeBelow: deletedDiffPlacement === 'bottom' && diffType === 'smart' && fg('platform_editor_ai_smart_diff') && (smartChangeLevel(change) === 'node' || smartChangeLevel(change) === 'paragraph')
325
+ // For `smart` changes, optionally render the deleted content after the new
326
+ // content (gray + strikethrough) instead of before it. Two independent
327
+ // controls, split by change level:
328
+ // - node/paragraph-level: `deletedDiffPlacement` (default `'top'`).
329
+ // - inline/sentence-level: `inlineDeletedDiffPlacement` (default `'before'`).
330
+ placeBelow: diffType === 'smart' && fg('platform_editor_ai_smart_diff') && function () {
331
+ var level = smartChangeLevel(change);
332
+ if (level === 'node' || level === 'paragraph') {
333
+ return deletedDiffPlacement === 'bottom';
334
+ }
335
+ // Inline-level (undefined) and sentence-level changes.
336
+ return inlineDeletedDiffPlacement === 'after';
337
+ }()
327
338
  }), {}, {
328
339
  showIndicators: showIndicators
329
340
  }))));
@@ -494,7 +505,8 @@ function (_ref5, _ref6) {
494
505
  hideAddedDiffsUnderline = _ref7$.hideAddedDiffsUnderline,
495
506
  showIndicators = _ref7$.showIndicators,
496
507
  smartThresholds = _ref7$.smartThresholds,
497
- deletedDiffPlacement = _ref7$.deletedDiffPlacement;
508
+ deletedDiffPlacement = _ref7$.deletedDiffPlacement,
509
+ inlineDeletedDiffPlacement = _ref7$.inlineDeletedDiffPlacement;
498
510
  var _ref8 = _slicedToArray(_ref6, 1),
499
511
  _ref8$ = _ref8[0],
500
512
  lastPluginState = _ref8$.pluginState,
@@ -508,11 +520,12 @@ function (_ref5, _ref6) {
508
520
  lastHideAddedDiffsUnderline = _ref8$.hideAddedDiffsUnderline,
509
521
  lastShowIndicators = _ref8$.showIndicators,
510
522
  lastSmartThresholds = _ref8$.smartThresholds,
511
- lastDeletedDiffPlacement = _ref8$.deletedDiffPlacement;
523
+ lastDeletedDiffPlacement = _ref8$.deletedDiffPlacement,
524
+ lastInlineDeletedDiffPlacement = _ref8$.inlineDeletedDiffPlacement;
512
525
  var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
513
526
  if (isExtendedEnabled(diffType)) {
514
527
  var _ref9;
515
- return (_ref9 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && isEqual(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement) !== null && _ref9 !== void 0 ? _ref9 : false;
528
+ return (_ref9 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && isEqual(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement && inlineDeletedDiffPlacement === lastInlineDeletedDiffPlacement) !== null && _ref9 !== void 0 ? _ref9 : false;
516
529
  }
517
530
  return (_ref0 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref0 !== void 0 ? _ref0 : false;
518
531
  });
@@ -170,6 +170,18 @@ export var addedCellOverlayStyle = convertToInlineCss({
170
170
  outline: "1px solid ".concat("var(--ds-border-accent-purple, #AF59E1)"),
171
171
  pointerEvents: 'none'
172
172
  });
173
+ export var addedCellOverlayRoundedStyle = convertToInlineCss({
174
+ position: 'absolute',
175
+ top: 0,
176
+ left: 0,
177
+ width: '100%',
178
+ height: '100%',
179
+ backgroundColor: "rgba(from ".concat("var(--ds-background-accent-purple-subtlest, #F8EEFE)", " r g b / 0.5)"),
180
+ zIndex: 2,
181
+ outline: "1px solid ".concat("var(--ds-border-accent-purple, #AF59E1)"),
182
+ pointerEvents: 'none',
183
+ borderRadius: 'inherit'
184
+ });
173
185
  export var deletedCellOverlayStyle = convertToInlineCss({
174
186
  position: 'absolute',
175
187
  top: 0,
@@ -184,6 +184,19 @@ export var traditionalAddedCellOverlayStyle = convertToInlineCss({
184
184
  outline: "1px solid ".concat("var(--ds-border-accent-green, #22A06B)"),
185
185
  pointerEvents: 'none'
186
186
  });
187
+ export var traditionalAddedCellOverlayRoundedStyle = convertToInlineCss({
188
+ position: 'absolute',
189
+ top: 0,
190
+ left: 0,
191
+ width: '100%',
192
+ height: '100%',
193
+ backgroundColor: "rgba(from ".concat("var(--ds-background-accent-green-subtlest, #DCFFF1)", " r g b / 0.5)"),
194
+ zIndex: 2,
195
+ outline: "1px solid ".concat("var(--ds-border-accent-green, #22A06B)"),
196
+ pointerEvents: 'none',
197
+ border: 'inherit',
198
+ borderRadius: 'inherit'
199
+ });
187
200
  export var traditionalAddedCellOverlayStyleNew = convertToInlineCss({
188
201
  position: 'absolute',
189
202
  top: 0,
@@ -9,19 +9,61 @@ import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document
9
9
  import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
10
10
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
11
11
  import { TableMap } from '@atlaskit/editor-tables/table-map';
12
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
12
13
  import { isExtendedEnabled } from '../isExtendedEnabled';
13
- import { addedCellOverlayStyle, deletedRowStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
14
- import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle } from './colorSchemes/traditional';
14
+ import { addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedRowStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
15
+ import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle, traditionalAddedCellOverlayRoundedStyle } from './colorSchemes/traditional';
15
16
  import { buildDiffDecorationSpec } from './decorationKeys';
16
17
  import { findSafeInsertPos } from './utils/findSafeInsertPos';
18
+ /**
19
+ * Inserted table rows are rendered as decoration widgets, so their cells do not get the
20
+ * `data-reaches-*` attrs normally applied by the table cell node view. Mirror that boundary
21
+ * metadata here so the existing rounded-table CSS can round widget cells like real table cells.
22
+ */
23
+ var getChangedRowCellEdgeAttrs = function getChangedRowCellEdgeAttrs(_ref) {
24
+ var rowNode = _ref.rowNode,
25
+ rowStart = _ref.rowStart,
26
+ tableMap = _ref.tableMap;
27
+ var cellEdgeAttrs = [];
28
+ rowNode.content.forEach(function (cellNode, cellOffset) {
29
+ if (cellNode.type.name !== 'tableCell' && cellNode.type.name !== 'tableHeader') {
30
+ return;
31
+ }
32
+ var cellRect = tableMap.findCell(rowStart + 1 + cellOffset);
33
+ cellEdgeAttrs.push({
34
+ reachesBottom: cellRect.bottom >= tableMap.height,
35
+ reachesLeft: cellRect.left === 0,
36
+ reachesRight: cellRect.right >= tableMap.width,
37
+ reachesTop: cellRect.top === 0
38
+ });
39
+ });
40
+ return cellEdgeAttrs;
41
+ };
42
+ var applyCellEdgeAttrs = function applyCellEdgeAttrs(cell, edgeAttrs) {
43
+ if (!edgeAttrs) {
44
+ return;
45
+ }
46
+ if (edgeAttrs.reachesTop) {
47
+ cell.setAttribute('data-reaches-top', 'true');
48
+ }
49
+ if (edgeAttrs.reachesBottom) {
50
+ cell.setAttribute('data-reaches-bottom', 'true');
51
+ }
52
+ if (edgeAttrs.reachesLeft) {
53
+ cell.setAttribute('data-reaches-left', 'true');
54
+ }
55
+ if (edgeAttrs.reachesRight) {
56
+ cell.setAttribute('data-reaches-right', 'true');
57
+ }
58
+ };
17
59
  /**
18
60
  * Extracts information about deleted table rows from a change
19
61
  */
20
- var extractChangedRows = function extractChangedRows(_ref) {
21
- var change = _ref.change,
22
- originalDoc = _ref.originalDoc,
23
- newDoc = _ref.newDoc,
24
- diffType = _ref.diffType;
62
+ var extractChangedRows = function extractChangedRows(_ref2) {
63
+ var change = _ref2.change,
64
+ originalDoc = _ref2.originalDoc,
65
+ newDoc = _ref2.newDoc,
66
+ diffType = _ref2.diffType;
25
67
  var changedRows = [];
26
68
 
27
69
  // Find the table in the original document
@@ -62,12 +104,18 @@ var extractChangedRows = function extractChangedRows(_ref) {
62
104
  // Check if this row overlaps with the deletion range
63
105
  var rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
64
106
  if (rowOverlapsChange && rowNode.type.name === 'tableRow' && (isExtendedEnabled(diffType) || !isEmptyRow(rowNode))) {
107
+ var cellEdgeAttrs = isExtendedEnabled(diffType) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true) ? getChangedRowCellEdgeAttrs({
108
+ rowNode: rowNode,
109
+ rowStart: rowStart,
110
+ tableMap: oldTableMap
111
+ }) : undefined;
65
112
  var startOfRow = newTableMap.mapByRow.slice().reverse().find(function (row) {
66
113
  return row[0] + tableNew.pos < change.fromB && change.fromB < row[row.length - 1] + tableNew.pos;
67
114
  });
68
115
  changedRows.push({
69
116
  rowIndex: rowIndex,
70
117
  rowNode: rowNode,
118
+ cellEdgeAttrs: cellEdgeAttrs,
71
119
  fromA: tableOld.pos + 1 + rowStart,
72
120
  toA: tableOld.pos + 1 + rowEnd,
73
121
  fromB: startOfRow ? startOfRow[0] + tableNew.start : change.fromB
@@ -116,7 +164,7 @@ var isEmptyRow = function isEmptyRow(rowNode) {
116
164
  /**
117
165
  * Creates a DOM representation of a deleted table row
118
166
  */
119
- var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializer, colorScheme, isInserted, diffType) {
167
+ var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType) {
120
168
  var tr = document.createElement('tr');
121
169
  if (isExtendedEnabled(diffType)) {
122
170
  if (!isInserted) {
@@ -128,15 +176,23 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
128
176
  tr.setAttribute('data-testid', 'show-diff-deleted-row');
129
177
 
130
178
  // Serialize each cell in the row
179
+ var cellIndex = 0;
131
180
  rowNode.content.forEach(function (cellNode) {
132
181
  if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
133
182
  var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
134
183
  if (nodeView) {
135
- if (nodeView instanceof HTMLElement && isExtendedEnabled(diffType)) {
136
- var overlay = document.createElement('span');
137
- var overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
138
- overlay.setAttribute('style', overlayStyle);
139
- nodeView.appendChild(overlay);
184
+ if (nodeView instanceof HTMLElement) {
185
+ applyCellEdgeAttrs(nodeView, cellEdgeAttrs === null || cellEdgeAttrs === void 0 ? void 0 : cellEdgeAttrs[cellIndex]);
186
+ if (isExtendedEnabled(diffType)) {
187
+ var overlay = document.createElement('span');
188
+ var isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
189
+ var isTraditional = colorScheme === 'traditional';
190
+ var deletedCellStyle = isTraditional ? deletedTraditionalCellOverlayStyle : deletedCellOverlayStyle;
191
+ var addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyle : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
192
+ var overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
193
+ overlay.setAttribute('style', overlayStyle);
194
+ nodeView.appendChild(overlay);
195
+ }
140
196
  }
141
197
  tr.appendChild(nodeView);
142
198
  } else {
@@ -146,6 +202,7 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
146
202
  tr.appendChild(serializedContent);
147
203
  }
148
204
  }
205
+ cellIndex++;
149
206
  }
150
207
  });
151
208
  return tr;
@@ -154,11 +211,11 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
154
211
  /**
155
212
  * Expands a diff to include whole changed rows when table rows are affected
156
213
  */
157
- var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
158
- var changes = _ref2.changes,
159
- originalDoc = _ref2.originalDoc,
160
- newDoc = _ref2.newDoc,
161
- diffType = _ref2.diffType;
214
+ var expandDiffForChangedRows = function expandDiffForChangedRows(_ref3) {
215
+ var changes = _ref3.changes,
216
+ originalDoc = _ref3.originalDoc,
217
+ newDoc = _ref3.newDoc,
218
+ diffType = _ref3.diffType;
162
219
  var rowInfo = [];
163
220
  var _iterator = _createForOfIteratorHelper(changes),
164
221
  _step;
@@ -187,15 +244,15 @@ var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
187
244
  /**
188
245
  * Main function to handle deleted rows - computes diff and creates decorations
189
246
  */
190
- export var createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref3) {
191
- var changes = _ref3.changes,
192
- originalDoc = _ref3.originalDoc,
193
- newDoc = _ref3.newDoc,
194
- nodeViewSerializer = _ref3.nodeViewSerializer,
195
- colorScheme = _ref3.colorScheme,
196
- _ref3$isInserted = _ref3.isInserted,
197
- isInserted = _ref3$isInserted === void 0 ? false : _ref3$isInserted,
198
- diffType = _ref3.diffType;
247
+ export var createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref4) {
248
+ var changes = _ref4.changes,
249
+ originalDoc = _ref4.originalDoc,
250
+ newDoc = _ref4.newDoc,
251
+ nodeViewSerializer = _ref4.nodeViewSerializer,
252
+ colorScheme = _ref4.colorScheme,
253
+ _ref4$isInserted = _ref4.isInserted,
254
+ isInserted = _ref4$isInserted === void 0 ? false : _ref4$isInserted,
255
+ diffType = _ref4.diffType;
199
256
  // First, expand the changes to include complete deleted rows
200
257
  var changedRows = expandDiffForChangedRows({
201
258
  changes: changes.filter(function (change) {
@@ -206,7 +263,7 @@ export var createChangedRowDecorationWidgets = function createChangedRowDecorati
206
263
  diffType: diffType
207
264
  });
208
265
  return changedRows.map(function (changedRow) {
209
- var rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme, isInserted, diffType);
266
+ var rowDOM = createChangedRowDOM(changedRow.rowNode, changedRow.cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType);
210
267
 
211
268
  // Find safe insertion position for the deleted row
212
269
  var safeInsertPos = findSafeInsertPos(newDoc, changedRow.fromB - 1,
@@ -45,7 +45,7 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
45
45
  var newPluginState = currentPluginState;
46
46
  if (meta) {
47
47
  if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
48
- var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9;
48
+ var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9, _newPluginState0;
49
49
  // Update the plugin state with the new metadata
50
50
  newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
51
51
  isDisplayingChanges: true,
@@ -67,13 +67,14 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
67
67
  hideAddedDiffsUnderline: (_newPluginState5 = newPluginState) === null || _newPluginState5 === void 0 ? void 0 : _newPluginState5.hideAddedDiffsUnderline,
68
68
  showIndicators: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.showIndicators,
69
69
  smartThresholds: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.smartThresholds,
70
- deletedDiffPlacement: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.deletedDiffPlacement
70
+ deletedDiffPlacement: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.deletedDiffPlacement,
71
+ inlineDeletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.inlineDeletedDiffPlacement
71
72
  } : {})),
72
73
  decorations = _calculateDiffDecorat.decorations,
73
74
  diffDescriptors = _calculateDiffDecorat.diffDescriptors;
74
75
  // Update the decorations and their ids
75
76
  newPluginState.decorations = decorations;
76
- if (isExtendedEnabled((_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.diffType)) {
77
+ if (isExtendedEnabled((_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.diffType)) {
77
78
  newPluginState.diffDescriptors = diffDescriptors;
78
79
  }
79
80
  } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
@@ -89,9 +90,9 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
89
90
  diffDescriptors: []
90
91
  } : {});
91
92
  } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') {
92
- var _newPluginState0;
93
+ var _newPluginState1;
93
94
  // Update the active index in plugin state and recalculate decorations
94
- var _decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.diffType);
95
+ var _decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.diffType);
95
96
  if (_decorations.length > 0) {
96
97
  var _currentPluginState$a;
97
98
  // Initialize to -1 if undefined so that the first "next" scroll takes us to index 0 (first change).
@@ -132,7 +133,8 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
132
133
  hideAddedDiffsUnderline: newPluginState.hideAddedDiffsUnderline,
133
134
  showIndicators: newPluginState.showIndicators,
134
135
  smartThresholds: newPluginState.smartThresholds,
135
- deletedDiffPlacement: newPluginState.deletedDiffPlacement
136
+ deletedDiffPlacement: newPluginState.deletedDiffPlacement,
137
+ inlineDeletedDiffPlacement: newPluginState.inlineDeletedDiffPlacement
136
138
  } : {})),
137
139
  updatedDecorations = _calculateDiffDecorat2.decorations,
138
140
  updatedDiffDescriptors = _calculateDiffDecorat2.diffDescriptors;
@@ -3,7 +3,7 @@ import type { IntlShape } from 'react-intl';
3
3
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
4
4
  import type { EditorState } from '@atlaskit/editor-prosemirror/state';
5
5
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
6
- import type { ColorScheme, DeletedDiffPlacement, DiffDescriptor, ShowDiffPlugin, SmartDiffThresholds } from '../../showDiffPluginType';
6
+ import type { ColorScheme, DeletedDiffPlacement, DiffDescriptor, InlineDeletedDiffPlacement, ShowDiffPlugin, SmartDiffThresholds } from '../../showDiffPluginType';
7
7
  import type { ShowDiffPluginState } from '../main';
8
8
  import type { NodeViewSerializer } from '../NodeViewSerializer';
9
9
  type CalculatedDiffs = {
@@ -20,6 +20,7 @@ export declare const calculateDiffDecorations: MemoizedFn<({ state, pluginState,
20
20
  deletedDiffPlacement?: DeletedDiffPlacement;
21
21
  hideAddedDiffsUnderline?: boolean;
22
22
  hideDeletedDiffs?: boolean;
23
+ inlineDeletedDiffPlacement?: InlineDeletedDiffPlacement;
23
24
  intl: IntlShape;
24
25
  nodeViewSerializer: NodeViewSerializer;
25
26
  pluginState: Omit<ShowDiffPluginState, 'decorations'>;
@@ -37,5 +37,6 @@ export declare const editingStyleCardBlockNode: string;
37
37
  export declare const standardDecorationMarkerVariable: string;
38
38
  export declare const deletedDecorationMarkerVariable: string;
39
39
  export declare const addedCellOverlayStyle: string;
40
+ export declare const addedCellOverlayRoundedStyle: string;
40
41
  export declare const deletedCellOverlayStyle: string;
41
42
  export declare const deletedCellOverlayRoundedStyle: string;
@@ -35,6 +35,7 @@ export declare const traditionalDeletedDecorationMarkerVariable: string;
35
35
  export declare const traditionalDeletedDecorationMarkerVariableNew: string;
36
36
  export declare const traditionalDeletedDecorationMarkerVariableActive: string;
37
37
  export declare const traditionalAddedCellOverlayStyle: string;
38
+ export declare const traditionalAddedCellOverlayRoundedStyle: string;
38
39
  export declare const traditionalAddedCellOverlayStyleNew: string;
39
40
  export declare const deletedTraditionalCellOverlayStyle: string;
40
41
  export declare const deletedTraditionalCellOverlayRoundedStyle: string;
@@ -5,7 +5,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
5
5
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
6
6
  import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
7
7
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
8
- import type { DeletedDiffPlacement, DiffDescriptor, DiffParams, DiffType, ShowDiffPlugin, SmartDiffThresholds } from '../showDiffPluginType';
8
+ import type { DeletedDiffPlacement, DiffDescriptor, DiffParams, DiffType, InlineDeletedDiffPlacement, ShowDiffPlugin, SmartDiffThresholds } from '../showDiffPluginType';
9
9
  export declare const showDiffPluginKey: PluginKey<ShowDiffPluginState>;
10
10
  export type ShowDiffPluginState = {
11
11
  activeIndex?: number;
@@ -25,8 +25,14 @@ export type ShowDiffPluginState = {
25
25
  */
26
26
  diffDescriptors?: DiffDescriptor[];
27
27
  diffType?: DiffType;
28
- hideDeletedDiffs?: boolean;
29
28
  hideAddedDiffsUnderline?: boolean;
29
+ hideDeletedDiffs?: boolean;
30
+ /**
31
+ * For the `smart` diffType, where inline-level (and sentence-level) deleted content is rendered
32
+ * relative to the new content. Set via SHOW_DIFF meta. Defaults to `'before'`. Independent of
33
+ * `deletedDiffPlacement`.
34
+ */
35
+ inlineDeletedDiffPlacement?: InlineDeletedDiffPlacement;
30
36
  isDisplayingChanges: boolean;
31
37
  isInverted?: boolean;
32
38
  originalDoc: PMNode | undefined;
@@ -16,6 +16,14 @@ export type DiffType = 'inline' | 'block' | 'step' | 'smart';
16
16
  * - `'bottom'`: the deleted content is anchored below the new content.
17
17
  */
18
18
  export type DeletedDiffPlacement = 'top' | 'bottom';
19
+ /**
20
+ * Where inline-level (and sentence-level) deleted content is rendered relative to the new
21
+ * (replacement) content in the `smart` diffType. This is independent of the node/paragraph-level
22
+ * `deletedDiffPlacement` option:
23
+ * - `'before'` (default): the deleted content is anchored before the new content.
24
+ * - `'after'`: the deleted content is anchored after the new content.
25
+ */
26
+ export type InlineDeletedDiffPlacement = 'before' | 'after';
19
27
  export type SmartDiffThresholds = SmartDiffThresholdsInternal;
20
28
  export type DiffDescriptor = {
21
29
  id: string;
@@ -49,6 +57,13 @@ export type PMDiffParams = {
49
57
  */
50
58
  hideAddedDiffsUnderline?: boolean;
51
59
  hideDeletedDiffs?: boolean;
60
+ /**
61
+ * For the `smart` diffType, where inline-level (and sentence-level) deleted content is rendered
62
+ * relative to the new content. Defaults to `'before'`. Independent of `deletedDiffPlacement`
63
+ * (which controls node/paragraph-level placement). Ignored for other diff types, and a no-op
64
+ * unless the relevant gate is enabled.
65
+ */
66
+ inlineDeletedDiffPlacement?: InlineDeletedDiffPlacement;
52
67
  isInverted?: boolean;
53
68
  originalDoc: Node;
54
69
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-show-diff",
3
- "version": "10.5.2",
3
+ "version": "10.6.0",
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.1.0",
31
- "@atlaskit/tmp-editor-statsig": "^132.0.0",
31
+ "@atlaskit/tmp-editor-statsig": "^132.2.0",
32
32
  "@atlaskit/tokens": "^16.2.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@compiled/react": "^1.0.0",