@atlaskit/editor-plugin-show-diff 10.5.3 → 10.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/cjs/pm-plugins/calculateDiff/calculateDiffDecorations.js +21 -8
- package/dist/cjs/pm-plugins/decorations/createChangedRowDecorationWidgets.js +22 -62
- package/dist/cjs/pm-plugins/decorations/utils/tableCellEdgeAttrs.js +73 -0
- package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeView.js +12 -1
- package/dist/cjs/pm-plugins/main.js +8 -6
- package/dist/es2019/pm-plugins/calculateDiff/calculateDiffDecorations.js +20 -8
- package/dist/es2019/pm-plugins/decorations/createChangedRowDecorationWidgets.js +2 -43
- package/dist/es2019/pm-plugins/decorations/utils/tableCellEdgeAttrs.js +67 -0
- package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeView.js +14 -3
- package/dist/es2019/pm-plugins/main.js +8 -6
- package/dist/esm/pm-plugins/calculateDiff/calculateDiffDecorations.js +21 -8
- package/dist/esm/pm-plugins/decorations/createChangedRowDecorationWidgets.js +21 -61
- package/dist/esm/pm-plugins/decorations/utils/tableCellEdgeAttrs.js +67 -0
- package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeView.js +14 -3
- package/dist/esm/pm-plugins/main.js +8 -6
- package/dist/types/pm-plugins/calculateDiff/calculateDiffDecorations.d.ts +2 -1
- package/dist/types/pm-plugins/decorations/utils/tableCellEdgeAttrs.d.ts +18 -0
- package/dist/types/pm-plugins/main.d.ts +8 -2
- package/dist/types/showDiffPluginType.d.ts +15 -0
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-show-diff
|
|
2
2
|
|
|
3
|
+
## 10.6.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`963920819d38c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/963920819d38c) -
|
|
8
|
+
Fix rounded table diff overlays for whole-table widgets.
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 10.6.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- [`0840aa4f6b2d0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0840aa4f6b2d0) -
|
|
16
|
+
Add a new `inlineDeletedDiffPlacement: 'before' | 'after'` option to `PMDiffParams` for the
|
|
17
|
+
`smart` diff type. When set to `'after'`, inline-level (and sentence-level) deleted content is
|
|
18
|
+
rendered after the added/updated content instead of before it. Defaults to `'before'` and is
|
|
19
|
+
independent of the existing node/paragraph-level `deletedDiffPlacement` option. Post Stream Review
|
|
20
|
+
now requests `'after'` so reviewers read the new text first.
|
|
21
|
+
|
|
3
22
|
## 10.5.3
|
|
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`
|
|
330
|
-
//
|
|
331
|
-
//
|
|
332
|
-
|
|
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
|
});
|
|
@@ -17,60 +17,20 @@ var _standard = require("./colorSchemes/standard");
|
|
|
17
17
|
var _traditional = require("./colorSchemes/traditional");
|
|
18
18
|
var _decorationKeys = require("./decorationKeys");
|
|
19
19
|
var _findSafeInsertPos = require("./utils/findSafeInsertPos");
|
|
20
|
+
var _tableCellEdgeAttrs = require("./utils/tableCellEdgeAttrs");
|
|
20
21
|
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; }
|
|
21
22
|
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; }
|
|
22
23
|
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; } } }; }
|
|
23
24
|
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; } }
|
|
24
25
|
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
|
-
};
|
|
66
26
|
/**
|
|
67
27
|
* Extracts information about deleted table rows from a change
|
|
68
28
|
*/
|
|
69
|
-
var extractChangedRows = function extractChangedRows(
|
|
70
|
-
var change =
|
|
71
|
-
originalDoc =
|
|
72
|
-
newDoc =
|
|
73
|
-
diffType =
|
|
29
|
+
var extractChangedRows = function extractChangedRows(_ref) {
|
|
30
|
+
var change = _ref.change,
|
|
31
|
+
originalDoc = _ref.originalDoc,
|
|
32
|
+
newDoc = _ref.newDoc,
|
|
33
|
+
diffType = _ref.diffType;
|
|
74
34
|
var changedRows = [];
|
|
75
35
|
|
|
76
36
|
// Find the table in the original document
|
|
@@ -111,7 +71,7 @@ var extractChangedRows = function extractChangedRows(_ref2) {
|
|
|
111
71
|
// Check if this row overlaps with the deletion range
|
|
112
72
|
var rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
|
|
113
73
|
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) ?
|
|
74
|
+
var cellEdgeAttrs = (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true) ? (0, _tableCellEdgeAttrs.getRowCellEdgeAttrs)({
|
|
115
75
|
rowNode: rowNode,
|
|
116
76
|
rowStart: rowStart,
|
|
117
77
|
tableMap: oldTableMap
|
|
@@ -189,7 +149,7 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, n
|
|
|
189
149
|
var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
|
|
190
150
|
if (nodeView) {
|
|
191
151
|
if (nodeView instanceof HTMLElement) {
|
|
192
|
-
applyCellEdgeAttrs(nodeView, cellEdgeAttrs === null || cellEdgeAttrs === void 0 ? void 0 : cellEdgeAttrs[cellIndex]);
|
|
152
|
+
(0, _tableCellEdgeAttrs.applyCellEdgeAttrs)(nodeView, cellEdgeAttrs === null || cellEdgeAttrs === void 0 ? void 0 : cellEdgeAttrs[cellIndex]);
|
|
193
153
|
if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
|
|
194
154
|
var overlay = document.createElement('span');
|
|
195
155
|
var isRoundedTable = (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
|
|
@@ -218,11 +178,11 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, n
|
|
|
218
178
|
/**
|
|
219
179
|
* Expands a diff to include whole changed rows when table rows are affected
|
|
220
180
|
*/
|
|
221
|
-
var expandDiffForChangedRows = function expandDiffForChangedRows(
|
|
222
|
-
var changes =
|
|
223
|
-
originalDoc =
|
|
224
|
-
newDoc =
|
|
225
|
-
diffType =
|
|
181
|
+
var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
|
|
182
|
+
var changes = _ref2.changes,
|
|
183
|
+
originalDoc = _ref2.originalDoc,
|
|
184
|
+
newDoc = _ref2.newDoc,
|
|
185
|
+
diffType = _ref2.diffType;
|
|
226
186
|
var rowInfo = [];
|
|
227
187
|
var _iterator = _createForOfIteratorHelper(changes),
|
|
228
188
|
_step;
|
|
@@ -251,15 +211,15 @@ var expandDiffForChangedRows = function expandDiffForChangedRows(_ref3) {
|
|
|
251
211
|
/**
|
|
252
212
|
* Main function to handle deleted rows - computes diff and creates decorations
|
|
253
213
|
*/
|
|
254
|
-
var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(
|
|
255
|
-
var changes =
|
|
256
|
-
originalDoc =
|
|
257
|
-
newDoc =
|
|
258
|
-
nodeViewSerializer =
|
|
259
|
-
colorScheme =
|
|
260
|
-
|
|
261
|
-
isInserted =
|
|
262
|
-
diffType =
|
|
214
|
+
var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref3) {
|
|
215
|
+
var changes = _ref3.changes,
|
|
216
|
+
originalDoc = _ref3.originalDoc,
|
|
217
|
+
newDoc = _ref3.newDoc,
|
|
218
|
+
nodeViewSerializer = _ref3.nodeViewSerializer,
|
|
219
|
+
colorScheme = _ref3.colorScheme,
|
|
220
|
+
_ref3$isInserted = _ref3.isInserted,
|
|
221
|
+
isInserted = _ref3$isInserted === void 0 ? false : _ref3$isInserted,
|
|
222
|
+
diffType = _ref3.diffType;
|
|
263
223
|
// First, expand the changes to include complete deleted rows
|
|
264
224
|
var changedRows = expandDiffForChangedRows({
|
|
265
225
|
changes: changes.filter(function (change) {
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getRowCellEdgeAttrs = exports.applyTableCellEdgeAttrs = exports.applyCellEdgeAttrs = void 0;
|
|
7
|
+
var _tableMap = require("@atlaskit/editor-tables/table-map");
|
|
8
|
+
var getRowCellEdgeAttrs = exports.getRowCellEdgeAttrs = function getRowCellEdgeAttrs(_ref) {
|
|
9
|
+
var rowNode = _ref.rowNode,
|
|
10
|
+
rowStart = _ref.rowStart,
|
|
11
|
+
tableMap = _ref.tableMap;
|
|
12
|
+
var cellEdgeAttrs = [];
|
|
13
|
+
rowNode.content.forEach(function (cellNode, cellOffset) {
|
|
14
|
+
if (cellNode.type.name !== 'tableCell' && cellNode.type.name !== 'tableHeader') {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
var cellRect = tableMap.findCell(rowStart + 1 + cellOffset);
|
|
18
|
+
cellEdgeAttrs.push({
|
|
19
|
+
reachesBottom: cellRect.bottom >= tableMap.height,
|
|
20
|
+
reachesLeft: cellRect.left === 0,
|
|
21
|
+
reachesRight: cellRect.right >= tableMap.width,
|
|
22
|
+
reachesTop: cellRect.top === 0
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
return cellEdgeAttrs;
|
|
26
|
+
};
|
|
27
|
+
var applyCellEdgeAttrs = exports.applyCellEdgeAttrs = function applyCellEdgeAttrs(cell, edgeAttrs) {
|
|
28
|
+
if (!edgeAttrs) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
if (edgeAttrs.reachesTop) {
|
|
32
|
+
cell.setAttribute('data-reaches-top', 'true');
|
|
33
|
+
}
|
|
34
|
+
if (edgeAttrs.reachesBottom) {
|
|
35
|
+
cell.setAttribute('data-reaches-bottom', 'true');
|
|
36
|
+
}
|
|
37
|
+
if (edgeAttrs.reachesLeft) {
|
|
38
|
+
cell.setAttribute('data-reaches-left', 'true');
|
|
39
|
+
}
|
|
40
|
+
if (edgeAttrs.reachesRight) {
|
|
41
|
+
cell.setAttribute('data-reaches-right', 'true');
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
var applyTableCellEdgeAttrs = exports.applyTableCellEdgeAttrs = function applyTableCellEdgeAttrs(_ref2) {
|
|
45
|
+
var element = _ref2.element,
|
|
46
|
+
tableNode = _ref2.tableNode;
|
|
47
|
+
try {
|
|
48
|
+
var table = element instanceof HTMLTableElement ? element : element.querySelector('table');
|
|
49
|
+
if (!(table instanceof HTMLTableElement)) {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
var tableMap = _tableMap.TableMap.get(tableNode);
|
|
53
|
+
var cells = Array.from(table.rows).flatMap(function (row) {
|
|
54
|
+
return Array.from(row.cells);
|
|
55
|
+
});
|
|
56
|
+
var cellIndex = 0;
|
|
57
|
+
tableNode.content.forEach(function (rowNode, rowStart) {
|
|
58
|
+
getRowCellEdgeAttrs({
|
|
59
|
+
rowNode: rowNode,
|
|
60
|
+
rowStart: rowStart,
|
|
61
|
+
tableMap: tableMap
|
|
62
|
+
}).forEach(function (edgeAttrs) {
|
|
63
|
+
var cell = cells[cellIndex];
|
|
64
|
+
cellIndex++;
|
|
65
|
+
if (cell) {
|
|
66
|
+
applyCellEdgeAttrs(cell, edgeAttrs);
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
} catch (_unused) {
|
|
71
|
+
// Table structure can be transient while widget DOM is being assembled.
|
|
72
|
+
}
|
|
73
|
+
};
|
|
@@ -13,6 +13,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
|
13
13
|
var _isExtendedEnabled = require("../../isExtendedEnabled");
|
|
14
14
|
var _standard = require("../colorSchemes/standard");
|
|
15
15
|
var _traditional = require("../colorSchemes/traditional");
|
|
16
|
+
var _tableCellEdgeAttrs = require("./tableCellEdgeAttrs");
|
|
16
17
|
var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
|
|
17
18
|
display: 'inline-flex',
|
|
18
19
|
boxSizing: 'border-box',
|
|
@@ -178,9 +179,13 @@ var applyCellOverlayStyles = function applyCellOverlayStyles(_ref2) {
|
|
|
178
179
|
var element = _ref2.element,
|
|
179
180
|
colorScheme = _ref2.colorScheme,
|
|
180
181
|
isInserted = _ref2.isInserted;
|
|
182
|
+
var isRoundedTable = (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
|
|
181
183
|
element.querySelectorAll('td, th').forEach(function (cell) {
|
|
182
184
|
var overlay = document.createElement('span');
|
|
183
|
-
var
|
|
185
|
+
var isTraditional = colorScheme === 'traditional';
|
|
186
|
+
var deletedCellStyle = isTraditional ? _traditional.deletedTraditionalCellOverlayStyle : _standard.deletedCellOverlayStyle;
|
|
187
|
+
var addedCellStyle = isTraditional ? isRoundedTable ? _traditional.traditionalAddedCellOverlayRoundedStyle : _traditional.traditionalAddedCellOverlayStyleNew : isRoundedTable ? _standard.addedCellOverlayRoundedStyle : _standard.addedCellOverlayStyle;
|
|
188
|
+
var overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
|
|
184
189
|
overlay.setAttribute('style', overlayStyle);
|
|
185
190
|
cell.appendChild(overlay);
|
|
186
191
|
});
|
|
@@ -544,6 +549,12 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
|
|
|
544
549
|
return;
|
|
545
550
|
}
|
|
546
551
|
if (targetNode.type.name === 'table') {
|
|
552
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true)) {
|
|
553
|
+
(0, _tableCellEdgeAttrs.applyTableCellEdgeAttrs)({
|
|
554
|
+
element: nodeView,
|
|
555
|
+
tableNode: targetNode
|
|
556
|
+
});
|
|
557
|
+
}
|
|
547
558
|
applyCellOverlayStyles({
|
|
548
559
|
element: nodeView,
|
|
549
560
|
colorScheme: colorScheme,
|
|
@@ -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)((
|
|
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
|
|
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, (
|
|
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`
|
|
296
|
-
//
|
|
297
|
-
//
|
|
298
|
-
|
|
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
|
});
|
|
@@ -8,48 +8,7 @@ import { addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedRowStyle, d
|
|
|
8
8
|
import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle, traditionalAddedCellOverlayRoundedStyle } from './colorSchemes/traditional';
|
|
9
9
|
import { buildDiffDecorationSpec } from './decorationKeys';
|
|
10
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
|
-
};
|
|
11
|
+
import { applyCellEdgeAttrs, getRowCellEdgeAttrs } from './utils/tableCellEdgeAttrs';
|
|
53
12
|
/**
|
|
54
13
|
* Extracts information about deleted table rows from a change
|
|
55
14
|
*/
|
|
@@ -95,7 +54,7 @@ const extractChangedRows = ({
|
|
|
95
54
|
// Check if this row overlaps with the deletion range
|
|
96
55
|
const rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
|
|
97
56
|
if (rowOverlapsChange && rowNode.type.name === 'tableRow' && (isExtendedEnabled(diffType) || !isEmptyRow(rowNode))) {
|
|
98
|
-
const cellEdgeAttrs = isExtendedEnabled(diffType) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true) ?
|
|
57
|
+
const cellEdgeAttrs = isExtendedEnabled(diffType) && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true) ? getRowCellEdgeAttrs({
|
|
99
58
|
rowNode,
|
|
100
59
|
rowStart,
|
|
101
60
|
tableMap: oldTableMap
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
2
|
+
export const getRowCellEdgeAttrs = ({
|
|
3
|
+
rowNode,
|
|
4
|
+
rowStart,
|
|
5
|
+
tableMap
|
|
6
|
+
}) => {
|
|
7
|
+
const cellEdgeAttrs = [];
|
|
8
|
+
rowNode.content.forEach((cellNode, cellOffset) => {
|
|
9
|
+
if (cellNode.type.name !== 'tableCell' && cellNode.type.name !== 'tableHeader') {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
const cellRect = tableMap.findCell(rowStart + 1 + cellOffset);
|
|
13
|
+
cellEdgeAttrs.push({
|
|
14
|
+
reachesBottom: cellRect.bottom >= tableMap.height,
|
|
15
|
+
reachesLeft: cellRect.left === 0,
|
|
16
|
+
reachesRight: cellRect.right >= tableMap.width,
|
|
17
|
+
reachesTop: cellRect.top === 0
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
return cellEdgeAttrs;
|
|
21
|
+
};
|
|
22
|
+
export const applyCellEdgeAttrs = (cell, edgeAttrs) => {
|
|
23
|
+
if (!edgeAttrs) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
if (edgeAttrs.reachesTop) {
|
|
27
|
+
cell.setAttribute('data-reaches-top', 'true');
|
|
28
|
+
}
|
|
29
|
+
if (edgeAttrs.reachesBottom) {
|
|
30
|
+
cell.setAttribute('data-reaches-bottom', 'true');
|
|
31
|
+
}
|
|
32
|
+
if (edgeAttrs.reachesLeft) {
|
|
33
|
+
cell.setAttribute('data-reaches-left', 'true');
|
|
34
|
+
}
|
|
35
|
+
if (edgeAttrs.reachesRight) {
|
|
36
|
+
cell.setAttribute('data-reaches-right', 'true');
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
export const applyTableCellEdgeAttrs = ({
|
|
40
|
+
element,
|
|
41
|
+
tableNode
|
|
42
|
+
}) => {
|
|
43
|
+
try {
|
|
44
|
+
const table = element instanceof HTMLTableElement ? element : element.querySelector('table');
|
|
45
|
+
if (!(table instanceof HTMLTableElement)) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
const tableMap = TableMap.get(tableNode);
|
|
49
|
+
const cells = Array.from(table.rows).flatMap(row => Array.from(row.cells));
|
|
50
|
+
let cellIndex = 0;
|
|
51
|
+
tableNode.content.forEach((rowNode, rowStart) => {
|
|
52
|
+
getRowCellEdgeAttrs({
|
|
53
|
+
rowNode,
|
|
54
|
+
rowStart,
|
|
55
|
+
tableMap
|
|
56
|
+
}).forEach(edgeAttrs => {
|
|
57
|
+
const cell = cells[cellIndex];
|
|
58
|
+
cellIndex++;
|
|
59
|
+
if (cell) {
|
|
60
|
+
applyCellEdgeAttrs(cell, edgeAttrs);
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
} catch {
|
|
65
|
+
// Table structure can be transient while widget DOM is being assembled.
|
|
66
|
+
}
|
|
67
|
+
};
|
|
@@ -3,8 +3,9 @@ import { trackChangesMessages } from '@atlaskit/editor-common/messages';
|
|
|
3
3
|
import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
|
|
4
4
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
5
5
|
import { isExtendedEnabled } from '../../isExtendedEnabled';
|
|
6
|
-
import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlockExtended, editingContentStyleInBlockExtendedNoUnderline, editingStyleExtended, editingStyleExtendedNoUnderline, editingStyleActiveExtended, editingStyleActiveExtendedNoUnderline, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
|
|
7
|
-
import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
|
|
6
|
+
import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlockExtended, editingContentStyleInBlockExtendedNoUnderline, editingStyleExtended, editingStyleExtendedNoUnderline, editingStyleActiveExtended, editingStyleActiveExtendedNoUnderline, editingStyleNode, addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
|
|
7
|
+
import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayRoundedStyle, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
|
|
8
|
+
import { applyTableCellEdgeAttrs } from './tableCellEdgeAttrs';
|
|
8
9
|
const lozengeStyle = convertToInlineCss({
|
|
9
10
|
display: 'inline-flex',
|
|
10
11
|
boxSizing: 'border-box',
|
|
@@ -163,9 +164,13 @@ const applyCellOverlayStyles = ({
|
|
|
163
164
|
colorScheme,
|
|
164
165
|
isInserted
|
|
165
166
|
}) => {
|
|
167
|
+
const isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
|
|
166
168
|
element.querySelectorAll('td, th').forEach(cell => {
|
|
167
169
|
const overlay = document.createElement('span');
|
|
168
|
-
const
|
|
170
|
+
const isTraditional = colorScheme === 'traditional';
|
|
171
|
+
const deletedCellStyle = isTraditional ? deletedTraditionalCellOverlayStyle : deletedCellOverlayStyle;
|
|
172
|
+
const addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyleNew : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
|
|
173
|
+
const overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
|
|
169
174
|
overlay.setAttribute('style', overlayStyle);
|
|
170
175
|
cell.appendChild(overlay);
|
|
171
176
|
});
|
|
@@ -523,6 +528,12 @@ export const wrapBlockNodeView = ({
|
|
|
523
528
|
return;
|
|
524
529
|
}
|
|
525
530
|
if (targetNode.type.name === 'table') {
|
|
531
|
+
if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true)) {
|
|
532
|
+
applyTableCellEdgeAttrs({
|
|
533
|
+
element: nodeView,
|
|
534
|
+
tableNode: targetNode
|
|
535
|
+
});
|
|
536
|
+
}
|
|
526
537
|
applyCellOverlayStyles({
|
|
527
538
|
element: nodeView,
|
|
528
539
|
colorScheme,
|
|
@@ -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((
|
|
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
|
|
102
|
+
var _newPluginState1;
|
|
102
103
|
// Update the active index in plugin state and recalculate decorations
|
|
103
|
-
const decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (
|
|
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`
|
|
324
|
-
//
|
|
325
|
-
//
|
|
326
|
-
|
|
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
|
});
|
|
@@ -15,55 +15,15 @@ import { addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedRowStyle, d
|
|
|
15
15
|
import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle, traditionalAddedCellOverlayRoundedStyle } from './colorSchemes/traditional';
|
|
16
16
|
import { buildDiffDecorationSpec } from './decorationKeys';
|
|
17
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
|
-
};
|
|
18
|
+
import { applyCellEdgeAttrs, getRowCellEdgeAttrs } from './utils/tableCellEdgeAttrs';
|
|
59
19
|
/**
|
|
60
20
|
* Extracts information about deleted table rows from a change
|
|
61
21
|
*/
|
|
62
|
-
var extractChangedRows = function extractChangedRows(
|
|
63
|
-
var change =
|
|
64
|
-
originalDoc =
|
|
65
|
-
newDoc =
|
|
66
|
-
diffType =
|
|
22
|
+
var extractChangedRows = function extractChangedRows(_ref) {
|
|
23
|
+
var change = _ref.change,
|
|
24
|
+
originalDoc = _ref.originalDoc,
|
|
25
|
+
newDoc = _ref.newDoc,
|
|
26
|
+
diffType = _ref.diffType;
|
|
67
27
|
var changedRows = [];
|
|
68
28
|
|
|
69
29
|
// Find the table in the original document
|
|
@@ -104,7 +64,7 @@ var extractChangedRows = function extractChangedRows(_ref2) {
|
|
|
104
64
|
// Check if this row overlaps with the deletion range
|
|
105
65
|
var rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
|
|
106
66
|
if (rowOverlapsChange && rowNode.type.name === 'tableRow' && (isExtendedEnabled(diffType) || !isEmptyRow(rowNode))) {
|
|
107
|
-
var cellEdgeAttrs = isExtendedEnabled(diffType) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true) ?
|
|
67
|
+
var cellEdgeAttrs = isExtendedEnabled(diffType) && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true) ? getRowCellEdgeAttrs({
|
|
108
68
|
rowNode: rowNode,
|
|
109
69
|
rowStart: rowStart,
|
|
110
70
|
tableMap: oldTableMap
|
|
@@ -211,11 +171,11 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, n
|
|
|
211
171
|
/**
|
|
212
172
|
* Expands a diff to include whole changed rows when table rows are affected
|
|
213
173
|
*/
|
|
214
|
-
var expandDiffForChangedRows = function expandDiffForChangedRows(
|
|
215
|
-
var changes =
|
|
216
|
-
originalDoc =
|
|
217
|
-
newDoc =
|
|
218
|
-
diffType =
|
|
174
|
+
var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
|
|
175
|
+
var changes = _ref2.changes,
|
|
176
|
+
originalDoc = _ref2.originalDoc,
|
|
177
|
+
newDoc = _ref2.newDoc,
|
|
178
|
+
diffType = _ref2.diffType;
|
|
219
179
|
var rowInfo = [];
|
|
220
180
|
var _iterator = _createForOfIteratorHelper(changes),
|
|
221
181
|
_step;
|
|
@@ -244,15 +204,15 @@ var expandDiffForChangedRows = function expandDiffForChangedRows(_ref3) {
|
|
|
244
204
|
/**
|
|
245
205
|
* Main function to handle deleted rows - computes diff and creates decorations
|
|
246
206
|
*/
|
|
247
|
-
export var createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(
|
|
248
|
-
var changes =
|
|
249
|
-
originalDoc =
|
|
250
|
-
newDoc =
|
|
251
|
-
nodeViewSerializer =
|
|
252
|
-
colorScheme =
|
|
253
|
-
|
|
254
|
-
isInserted =
|
|
255
|
-
diffType =
|
|
207
|
+
export var createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref3) {
|
|
208
|
+
var changes = _ref3.changes,
|
|
209
|
+
originalDoc = _ref3.originalDoc,
|
|
210
|
+
newDoc = _ref3.newDoc,
|
|
211
|
+
nodeViewSerializer = _ref3.nodeViewSerializer,
|
|
212
|
+
colorScheme = _ref3.colorScheme,
|
|
213
|
+
_ref3$isInserted = _ref3.isInserted,
|
|
214
|
+
isInserted = _ref3$isInserted === void 0 ? false : _ref3$isInserted,
|
|
215
|
+
diffType = _ref3.diffType;
|
|
256
216
|
// First, expand the changes to include complete deleted rows
|
|
257
217
|
var changedRows = expandDiffForChangedRows({
|
|
258
218
|
changes: changes.filter(function (change) {
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
2
|
+
export var getRowCellEdgeAttrs = function getRowCellEdgeAttrs(_ref) {
|
|
3
|
+
var rowNode = _ref.rowNode,
|
|
4
|
+
rowStart = _ref.rowStart,
|
|
5
|
+
tableMap = _ref.tableMap;
|
|
6
|
+
var cellEdgeAttrs = [];
|
|
7
|
+
rowNode.content.forEach(function (cellNode, cellOffset) {
|
|
8
|
+
if (cellNode.type.name !== 'tableCell' && cellNode.type.name !== 'tableHeader') {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
var cellRect = tableMap.findCell(rowStart + 1 + cellOffset);
|
|
12
|
+
cellEdgeAttrs.push({
|
|
13
|
+
reachesBottom: cellRect.bottom >= tableMap.height,
|
|
14
|
+
reachesLeft: cellRect.left === 0,
|
|
15
|
+
reachesRight: cellRect.right >= tableMap.width,
|
|
16
|
+
reachesTop: cellRect.top === 0
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
return cellEdgeAttrs;
|
|
20
|
+
};
|
|
21
|
+
export var applyCellEdgeAttrs = function applyCellEdgeAttrs(cell, edgeAttrs) {
|
|
22
|
+
if (!edgeAttrs) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
if (edgeAttrs.reachesTop) {
|
|
26
|
+
cell.setAttribute('data-reaches-top', 'true');
|
|
27
|
+
}
|
|
28
|
+
if (edgeAttrs.reachesBottom) {
|
|
29
|
+
cell.setAttribute('data-reaches-bottom', 'true');
|
|
30
|
+
}
|
|
31
|
+
if (edgeAttrs.reachesLeft) {
|
|
32
|
+
cell.setAttribute('data-reaches-left', 'true');
|
|
33
|
+
}
|
|
34
|
+
if (edgeAttrs.reachesRight) {
|
|
35
|
+
cell.setAttribute('data-reaches-right', 'true');
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
export var applyTableCellEdgeAttrs = function applyTableCellEdgeAttrs(_ref2) {
|
|
39
|
+
var element = _ref2.element,
|
|
40
|
+
tableNode = _ref2.tableNode;
|
|
41
|
+
try {
|
|
42
|
+
var table = element instanceof HTMLTableElement ? element : element.querySelector('table');
|
|
43
|
+
if (!(table instanceof HTMLTableElement)) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
var tableMap = TableMap.get(tableNode);
|
|
47
|
+
var cells = Array.from(table.rows).flatMap(function (row) {
|
|
48
|
+
return Array.from(row.cells);
|
|
49
|
+
});
|
|
50
|
+
var cellIndex = 0;
|
|
51
|
+
tableNode.content.forEach(function (rowNode, rowStart) {
|
|
52
|
+
getRowCellEdgeAttrs({
|
|
53
|
+
rowNode: rowNode,
|
|
54
|
+
rowStart: rowStart,
|
|
55
|
+
tableMap: tableMap
|
|
56
|
+
}).forEach(function (edgeAttrs) {
|
|
57
|
+
var cell = cells[cellIndex];
|
|
58
|
+
cellIndex++;
|
|
59
|
+
if (cell) {
|
|
60
|
+
applyCellEdgeAttrs(cell, edgeAttrs);
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
} catch (_unused) {
|
|
65
|
+
// Table structure can be transient while widget DOM is being assembled.
|
|
66
|
+
}
|
|
67
|
+
};
|
|
@@ -4,8 +4,9 @@ import { trackChangesMessages } from '@atlaskit/editor-common/messages';
|
|
|
4
4
|
import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
|
|
5
5
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
6
6
|
import { isExtendedEnabled } from '../../isExtendedEnabled';
|
|
7
|
-
import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlockExtended, editingContentStyleInBlockExtendedNoUnderline, editingStyleExtended, editingStyleExtendedNoUnderline, editingStyleActiveExtended, editingStyleActiveExtendedNoUnderline, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
|
|
8
|
-
import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
|
|
7
|
+
import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlockExtended, editingContentStyleInBlockExtendedNoUnderline, editingStyleExtended, editingStyleExtendedNoUnderline, editingStyleActiveExtended, editingStyleActiveExtendedNoUnderline, editingStyleNode, addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
|
|
8
|
+
import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayRoundedStyle, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
|
|
9
|
+
import { applyTableCellEdgeAttrs } from './tableCellEdgeAttrs';
|
|
9
10
|
var lozengeStyle = convertToInlineCss({
|
|
10
11
|
display: 'inline-flex',
|
|
11
12
|
boxSizing: 'border-box',
|
|
@@ -171,9 +172,13 @@ var applyCellOverlayStyles = function applyCellOverlayStyles(_ref2) {
|
|
|
171
172
|
var element = _ref2.element,
|
|
172
173
|
colorScheme = _ref2.colorScheme,
|
|
173
174
|
isInserted = _ref2.isInserted;
|
|
175
|
+
var isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
|
|
174
176
|
element.querySelectorAll('td, th').forEach(function (cell) {
|
|
175
177
|
var overlay = document.createElement('span');
|
|
176
|
-
var
|
|
178
|
+
var isTraditional = colorScheme === 'traditional';
|
|
179
|
+
var deletedCellStyle = isTraditional ? deletedTraditionalCellOverlayStyle : deletedCellOverlayStyle;
|
|
180
|
+
var addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyleNew : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
|
|
181
|
+
var overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
|
|
177
182
|
overlay.setAttribute('style', overlayStyle);
|
|
178
183
|
cell.appendChild(overlay);
|
|
179
184
|
});
|
|
@@ -537,6 +542,12 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref0) {
|
|
|
537
542
|
return;
|
|
538
543
|
}
|
|
539
544
|
if (targetNode.type.name === 'table') {
|
|
545
|
+
if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true)) {
|
|
546
|
+
applyTableCellEdgeAttrs({
|
|
547
|
+
element: nodeView,
|
|
548
|
+
tableNode: targetNode
|
|
549
|
+
});
|
|
550
|
+
}
|
|
540
551
|
applyCellOverlayStyles({
|
|
541
552
|
element: nodeView,
|
|
542
553
|
colorScheme: colorScheme,
|
|
@@ -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((
|
|
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
|
|
93
|
+
var _newPluginState1;
|
|
93
94
|
// Update the active index in plugin state and recalculate decorations
|
|
94
|
-
var _decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (
|
|
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'>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
2
|
+
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
3
|
+
export type CellEdgeAttrs = {
|
|
4
|
+
reachesBottom: boolean;
|
|
5
|
+
reachesLeft: boolean;
|
|
6
|
+
reachesRight: boolean;
|
|
7
|
+
reachesTop: boolean;
|
|
8
|
+
};
|
|
9
|
+
export declare const getRowCellEdgeAttrs: ({ rowNode, rowStart, tableMap, }: {
|
|
10
|
+
rowNode: PMNode;
|
|
11
|
+
rowStart: number;
|
|
12
|
+
tableMap: TableMap;
|
|
13
|
+
}) => CellEdgeAttrs[];
|
|
14
|
+
export declare const applyCellEdgeAttrs: (cell: HTMLElement, edgeAttrs?: CellEdgeAttrs) => void;
|
|
15
|
+
export declare const applyTableCellEdgeAttrs: ({ element, tableNode, }: {
|
|
16
|
+
element: HTMLElement;
|
|
17
|
+
tableNode: PMNode;
|
|
18
|
+
}) => void;
|
|
@@ -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.
|
|
3
|
+
"version": "10.6.1",
|
|
4
4
|
"description": "ShowDiff plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -28,8 +28,8 @@
|
|
|
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": "^
|
|
32
|
-
"@atlaskit/tokens": "^16.
|
|
31
|
+
"@atlaskit/tmp-editor-statsig": "^133.0.0",
|
|
32
|
+
"@atlaskit/tokens": "^16.3.0",
|
|
33
33
|
"@babel/runtime": "^7.0.0",
|
|
34
34
|
"@compiled/react": "^1.0.0",
|
|
35
35
|
"lodash": "^4.17.21",
|
|
@@ -41,10 +41,10 @@
|
|
|
41
41
|
"@atlaskit/button": "^24.3.0",
|
|
42
42
|
"@atlaskit/css": "^1.0.0",
|
|
43
43
|
"@atlaskit/dropdown-menu": "^17.1.0",
|
|
44
|
-
"@atlaskit/editor-core": "^221.
|
|
44
|
+
"@atlaskit/editor-core": "^221.14.0",
|
|
45
45
|
"@atlaskit/editor-json-transformer": "^9.0.0",
|
|
46
46
|
"@atlaskit/form": "^16.1.0",
|
|
47
|
-
"@atlaskit/primitives": "^22.
|
|
47
|
+
"@atlaskit/primitives": "^22.2.0",
|
|
48
48
|
"@atlaskit/section-message": "^9.2.0",
|
|
49
49
|
"@atlaskit/textarea": "^9.1.0",
|
|
50
50
|
"@atlassian/confluence-presets": "workspace:^",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"react-intl": "^7.0.0"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
|
-
"@atlaskit/editor-common": "^116.
|
|
57
|
+
"@atlaskit/editor-common": "^116.39.0",
|
|
58
58
|
"react": "^18.2.0"
|
|
59
59
|
},
|
|
60
60
|
"techstack": {
|