@atlaskit/editor-plugin-show-diff 10.6.0 → 10.6.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 10.6.1
+
+### Patch Changes
+
+- [`963920819d38c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/963920819d38c) -
+  Fix rounded table diff overlays for whole-table widgets.
+- Updated dependencies
+
 ## 10.6.0
 
 ### Minor Changes

package/dist/cjs/pm-plugins/decorations/createChangedRowDecorationWidgets.js

@@ -17,60 +17,20 @@ var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
 var _decorationKeys = require("./decorationKeys");
 var _findSafeInsertPos = require("./utils/findSafeInsertPos");
+var _tableCellEdgeAttrs = require("./utils/tableCellEdgeAttrs");
 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; }
 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; }
 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; } } }; }
 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; } }
 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; }
-/**
- * Inserted table rows are rendered as decoration widgets, so their cells do not get the
- * `data-reaches-*` attrs normally applied by the table cell node view. Mirror that boundary
- * metadata here so the existing rounded-table CSS can round widget cells like real table cells.
- */
-var getChangedRowCellEdgeAttrs = function getChangedRowCellEdgeAttrs(_ref) {
-  var rowNode = _ref.rowNode,
-    rowStart = _ref.rowStart,
-    tableMap = _ref.tableMap;
-  var cellEdgeAttrs = [];
-  rowNode.content.forEach(function (cellNode, cellOffset) {
-    if (cellNode.type.name !== 'tableCell' && cellNode.type.name !== 'tableHeader') {
-      return;
-    }
-    var cellRect = tableMap.findCell(rowStart + 1 + cellOffset);
-    cellEdgeAttrs.push({
-      reachesBottom: cellRect.bottom >= tableMap.height,
-      reachesLeft: cellRect.left === 0,
-      reachesRight: cellRect.right >= tableMap.width,
-      reachesTop: cellRect.top === 0
-    });
-  });
-  return cellEdgeAttrs;
-};
-var applyCellEdgeAttrs = function applyCellEdgeAttrs(cell, edgeAttrs) {
-  if (!edgeAttrs) {
-    return;
-  }
-  if (edgeAttrs.reachesTop) {
-    cell.setAttribute('data-reaches-top', 'true');
-  }
-  if (edgeAttrs.reachesBottom) {
-    cell.setAttribute('data-reaches-bottom', 'true');
-  }
-  if (edgeAttrs.reachesLeft) {
-    cell.setAttribute('data-reaches-left', 'true');
-  }
-  if (edgeAttrs.reachesRight) {
-    cell.setAttribute('data-reaches-right', 'true');
-  }
-};
 /**
  * Extracts information about deleted table rows from a change
  */
-var extractChangedRows = function extractChangedRows(_ref2) {
-  var change = _ref2.change,
-    originalDoc = _ref2.originalDoc,
-    newDoc = _ref2.newDoc,
-    diffType = _ref2.diffType;
+var extractChangedRows = function extractChangedRows(_ref) {
+  var change = _ref.change,
+    originalDoc = _ref.originalDoc,
+    newDoc = _ref.newDoc,
+    diffType = _ref.diffType;
   var changedRows = [];
 
   // Find the table in the original document
@@ -111,7 +71,7 @@ var extractChangedRows = function extractChangedRows(_ref2) {
     // Check if this row overlaps with the deletion range
     var rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
     if (rowOverlapsChange && rowNode.type.name === 'tableRow' && ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) || !isEmptyRow(rowNode))) {
-      var cellEdgeAttrs = (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true) ? getChangedRowCellEdgeAttrs({
+      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)({
         rowNode: rowNode,
         rowStart: rowStart,
         tableMap: oldTableMap
@@ -189,7 +149,7 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, n
       var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
       if (nodeView) {
         if (nodeView instanceof HTMLElement) {
-          applyCellEdgeAttrs(nodeView, cellEdgeAttrs === null || cellEdgeAttrs === void 0 ? void 0 : cellEdgeAttrs[cellIndex]);
+          (0, _tableCellEdgeAttrs.applyCellEdgeAttrs)(nodeView, cellEdgeAttrs === null || cellEdgeAttrs === void 0 ? void 0 : cellEdgeAttrs[cellIndex]);
           if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
             var overlay = document.createElement('span');
             var isRoundedTable = (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
@@ -218,11 +178,11 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, n
 /**
  * Expands a diff to include whole changed rows when table rows are affected
  */
-var expandDiffForChangedRows = function expandDiffForChangedRows(_ref3) {
-  var changes = _ref3.changes,
-    originalDoc = _ref3.originalDoc,
-    newDoc = _ref3.newDoc,
-    diffType = _ref3.diffType;
+var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
+  var changes = _ref2.changes,
+    originalDoc = _ref2.originalDoc,
+    newDoc = _ref2.newDoc,
+    diffType = _ref2.diffType;
   var rowInfo = [];
   var _iterator = _createForOfIteratorHelper(changes),
     _step;
@@ -251,15 +211,15 @@ var expandDiffForChangedRows = function expandDiffForChangedRows(_ref3) {
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref4) {
-  var changes = _ref4.changes,
-    originalDoc = _ref4.originalDoc,
-    newDoc = _ref4.newDoc,
-    nodeViewSerializer = _ref4.nodeViewSerializer,
-    colorScheme = _ref4.colorScheme,
-    _ref4$isInserted = _ref4.isInserted,
-    isInserted = _ref4$isInserted === void 0 ? false : _ref4$isInserted,
-    diffType = _ref4.diffType;
+var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref3) {
+  var changes = _ref3.changes,
+    originalDoc = _ref3.originalDoc,
+    newDoc = _ref3.newDoc,
+    nodeViewSerializer = _ref3.nodeViewSerializer,
+    colorScheme = _ref3.colorScheme,
+    _ref3$isInserted = _ref3.isInserted,
+    isInserted = _ref3$isInserted === void 0 ? false : _ref3$isInserted,
+    diffType = _ref3.diffType;
   // First, expand the changes to include complete deleted rows
   var changedRows = expandDiffForChangedRows({
     changes: changes.filter(function (change) {

package/dist/cjs/pm-plugins/decorations/utils/tableCellEdgeAttrs.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRowCellEdgeAttrs = exports.applyTableCellEdgeAttrs = exports.applyCellEdgeAttrs = void 0;
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+var getRowCellEdgeAttrs = exports.getRowCellEdgeAttrs = function getRowCellEdgeAttrs(_ref) {
+  var rowNode = _ref.rowNode,
+    rowStart = _ref.rowStart,
+    tableMap = _ref.tableMap;
+  var cellEdgeAttrs = [];
+  rowNode.content.forEach(function (cellNode, cellOffset) {
+    if (cellNode.type.name !== 'tableCell' && cellNode.type.name !== 'tableHeader') {
+      return;
+    }
+    var cellRect = tableMap.findCell(rowStart + 1 + cellOffset);
+    cellEdgeAttrs.push({
+      reachesBottom: cellRect.bottom >= tableMap.height,
+      reachesLeft: cellRect.left === 0,
+      reachesRight: cellRect.right >= tableMap.width,
+      reachesTop: cellRect.top === 0
+    });
+  });
+  return cellEdgeAttrs;
+};
+var applyCellEdgeAttrs = exports.applyCellEdgeAttrs = function applyCellEdgeAttrs(cell, edgeAttrs) {
+  if (!edgeAttrs) {
+    return;
+  }
+  if (edgeAttrs.reachesTop) {
+    cell.setAttribute('data-reaches-top', 'true');
+  }
+  if (edgeAttrs.reachesBottom) {
+    cell.setAttribute('data-reaches-bottom', 'true');
+  }
+  if (edgeAttrs.reachesLeft) {
+    cell.setAttribute('data-reaches-left', 'true');
+  }
+  if (edgeAttrs.reachesRight) {
+    cell.setAttribute('data-reaches-right', 'true');
+  }
+};
+var applyTableCellEdgeAttrs = exports.applyTableCellEdgeAttrs = function applyTableCellEdgeAttrs(_ref2) {
+  var element = _ref2.element,
+    tableNode = _ref2.tableNode;
+  try {
+    var table = element instanceof HTMLTableElement ? element : element.querySelector('table');
+    if (!(table instanceof HTMLTableElement)) {
+      return;
+    }
+    var tableMap = _tableMap.TableMap.get(tableNode);
+    var cells = Array.from(table.rows).flatMap(function (row) {
+      return Array.from(row.cells);
+    });
+    var cellIndex = 0;
+    tableNode.content.forEach(function (rowNode, rowStart) {
+      getRowCellEdgeAttrs({
+        rowNode: rowNode,
+        rowStart: rowStart,
+        tableMap: tableMap
+      }).forEach(function (edgeAttrs) {
+        var cell = cells[cellIndex];
+        cellIndex++;
+        if (cell) {
+          applyCellEdgeAttrs(cell, edgeAttrs);
+        }
+      });
+    });
+  } catch (_unused) {
+    // Table structure can be transient while widget DOM is being assembled.
+  }
+};

package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeView.js

@@ -13,6 +13,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _isExtendedEnabled = require("../../isExtendedEnabled");
 var _standard = require("../colorSchemes/standard");
 var _traditional = require("../colorSchemes/traditional");
+var _tableCellEdgeAttrs = require("./tableCellEdgeAttrs");
 var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -178,9 +179,13 @@ var applyCellOverlayStyles = function applyCellOverlayStyles(_ref2) {
   var element = _ref2.element,
     colorScheme = _ref2.colorScheme,
     isInserted = _ref2.isInserted;
+  var isRoundedTable = (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
   element.querySelectorAll('td, th').forEach(function (cell) {
     var overlay = document.createElement('span');
-    var overlayStyle = colorScheme === 'traditional' ? isInserted ? _traditional.traditionalAddedCellOverlayStyleNew : _traditional.deletedTraditionalCellOverlayStyle : isInserted ? _standard.addedCellOverlayStyle : _standard.deletedCellOverlayStyle;
+    var isTraditional = colorScheme === 'traditional';
+    var deletedCellStyle = isTraditional ? _traditional.deletedTraditionalCellOverlayStyle : _standard.deletedCellOverlayStyle;
+    var addedCellStyle = isTraditional ? isRoundedTable ? _traditional.traditionalAddedCellOverlayRoundedStyle : _traditional.traditionalAddedCellOverlayStyleNew : isRoundedTable ? _standard.addedCellOverlayRoundedStyle : _standard.addedCellOverlayStyle;
+    var overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
     overlay.setAttribute('style', overlayStyle);
     cell.appendChild(overlay);
   });
@@ -544,6 +549,12 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
         return;
       }
       if (targetNode.type.name === 'table') {
+        if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true)) {
+          (0, _tableCellEdgeAttrs.applyTableCellEdgeAttrs)({
+            element: nodeView,
+            tableNode: targetNode
+          });
+        }
         applyCellOverlayStyles({
           element: nodeView,
           colorScheme: colorScheme,

package/dist/es2019/pm-plugins/decorations/createChangedRowDecorationWidgets.js

@@ -8,48 +8,7 @@ import { addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedRowStyle, d
 import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle, traditionalAddedCellOverlayRoundedStyle } from './colorSchemes/traditional';
 import { buildDiffDecorationSpec } from './decorationKeys';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
-/**
- * Inserted table rows are rendered as decoration widgets, so their cells do not get the
- * `data-reaches-*` attrs normally applied by the table cell node view. Mirror that boundary
- * metadata here so the existing rounded-table CSS can round widget cells like real table cells.
- */
-const getChangedRowCellEdgeAttrs = ({
-  rowNode,
-  rowStart,
-  tableMap
-}) => {
-  const cellEdgeAttrs = [];
-  rowNode.content.forEach((cellNode, cellOffset) => {
-    if (cellNode.type.name !== 'tableCell' && cellNode.type.name !== 'tableHeader') {
-      return;
-    }
-    const cellRect = tableMap.findCell(rowStart + 1 + cellOffset);
-    cellEdgeAttrs.push({
-      reachesBottom: cellRect.bottom >= tableMap.height,
-      reachesLeft: cellRect.left === 0,
-      reachesRight: cellRect.right >= tableMap.width,
-      reachesTop: cellRect.top === 0
-    });
-  });
-  return cellEdgeAttrs;
-};
-const applyCellEdgeAttrs = (cell, edgeAttrs) => {
-  if (!edgeAttrs) {
-    return;
-  }
-  if (edgeAttrs.reachesTop) {
-    cell.setAttribute('data-reaches-top', 'true');
-  }
-  if (edgeAttrs.reachesBottom) {
-    cell.setAttribute('data-reaches-bottom', 'true');
-  }
-  if (edgeAttrs.reachesLeft) {
-    cell.setAttribute('data-reaches-left', 'true');
-  }
-  if (edgeAttrs.reachesRight) {
-    cell.setAttribute('data-reaches-right', 'true');
-  }
-};
+import { applyCellEdgeAttrs, getRowCellEdgeAttrs } from './utils/tableCellEdgeAttrs';
 /**
  * Extracts information about deleted table rows from a change
  */
@@ -95,7 +54,7 @@ const extractChangedRows = ({
     // Check if this row overlaps with the deletion range
     const rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
     if (rowOverlapsChange && rowNode.type.name === 'tableRow' && (isExtendedEnabled(diffType) || !isEmptyRow(rowNode))) {
-      const cellEdgeAttrs = isExtendedEnabled(diffType) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true) ? getChangedRowCellEdgeAttrs({
+      const cellEdgeAttrs = isExtendedEnabled(diffType) && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true) ? getRowCellEdgeAttrs({
         rowNode,
         rowStart,
         tableMap: oldTableMap

package/dist/es2019/pm-plugins/decorations/utils/tableCellEdgeAttrs.js

@@ -0,0 +1,67 @@
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+export const getRowCellEdgeAttrs = ({
+  rowNode,
+  rowStart,
+  tableMap
+}) => {
+  const cellEdgeAttrs = [];
+  rowNode.content.forEach((cellNode, cellOffset) => {
+    if (cellNode.type.name !== 'tableCell' && cellNode.type.name !== 'tableHeader') {
+      return;
+    }
+    const cellRect = tableMap.findCell(rowStart + 1 + cellOffset);
+    cellEdgeAttrs.push({
+      reachesBottom: cellRect.bottom >= tableMap.height,
+      reachesLeft: cellRect.left === 0,
+      reachesRight: cellRect.right >= tableMap.width,
+      reachesTop: cellRect.top === 0
+    });
+  });
+  return cellEdgeAttrs;
+};
+export const applyCellEdgeAttrs = (cell, edgeAttrs) => {
+  if (!edgeAttrs) {
+    return;
+  }
+  if (edgeAttrs.reachesTop) {
+    cell.setAttribute('data-reaches-top', 'true');
+  }
+  if (edgeAttrs.reachesBottom) {
+    cell.setAttribute('data-reaches-bottom', 'true');
+  }
+  if (edgeAttrs.reachesLeft) {
+    cell.setAttribute('data-reaches-left', 'true');
+  }
+  if (edgeAttrs.reachesRight) {
+    cell.setAttribute('data-reaches-right', 'true');
+  }
+};
+export const applyTableCellEdgeAttrs = ({
+  element,
+  tableNode
+}) => {
+  try {
+    const table = element instanceof HTMLTableElement ? element : element.querySelector('table');
+    if (!(table instanceof HTMLTableElement)) {
+      return;
+    }
+    const tableMap = TableMap.get(tableNode);
+    const cells = Array.from(table.rows).flatMap(row => Array.from(row.cells));
+    let cellIndex = 0;
+    tableNode.content.forEach((rowNode, rowStart) => {
+      getRowCellEdgeAttrs({
+        rowNode,
+        rowStart,
+        tableMap
+      }).forEach(edgeAttrs => {
+        const cell = cells[cellIndex];
+        cellIndex++;
+        if (cell) {
+          applyCellEdgeAttrs(cell, edgeAttrs);
+        }
+      });
+    });
+  } catch {
+    // Table structure can be transient while widget DOM is being assembled.
+  }
+};

package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeView.js

@@ -3,8 +3,9 @@ import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../../isExtendedEnabled';
-import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlockExtended, editingContentStyleInBlockExtendedNoUnderline, editingStyleExtended, editingStyleExtendedNoUnderline, editingStyleActiveExtended, editingStyleActiveExtendedNoUnderline, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
-import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
+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';
+import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayRoundedStyle, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
+import { applyTableCellEdgeAttrs } from './tableCellEdgeAttrs';
 const lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -163,9 +164,13 @@ const applyCellOverlayStyles = ({
   colorScheme,
   isInserted
 }) => {
+  const isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
   element.querySelectorAll('td, th').forEach(cell => {
     const overlay = document.createElement('span');
-    const overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyleNew : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
+    const isTraditional = colorScheme === 'traditional';
+    const deletedCellStyle = isTraditional ? deletedTraditionalCellOverlayStyle : deletedCellOverlayStyle;
+    const addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyleNew : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
+    const overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
     overlay.setAttribute('style', overlayStyle);
     cell.appendChild(overlay);
   });
@@ -523,6 +528,12 @@ export const wrapBlockNodeView = ({
         return;
       }
       if (targetNode.type.name === 'table') {
+        if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true)) {
+          applyTableCellEdgeAttrs({
+            element: nodeView,
+            tableNode: targetNode
+          });
+        }
         applyCellOverlayStyles({
           element: nodeView,
           colorScheme,

package/dist/esm/pm-plugins/decorations/createChangedRowDecorationWidgets.js

@@ -15,55 +15,15 @@ import { addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedRowStyle, d
 import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle, traditionalAddedCellOverlayRoundedStyle } from './colorSchemes/traditional';
 import { buildDiffDecorationSpec } from './decorationKeys';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
-/**
- * Inserted table rows are rendered as decoration widgets, so their cells do not get the
- * `data-reaches-*` attrs normally applied by the table cell node view. Mirror that boundary
- * metadata here so the existing rounded-table CSS can round widget cells like real table cells.
- */
-var getChangedRowCellEdgeAttrs = function getChangedRowCellEdgeAttrs(_ref) {
-  var rowNode = _ref.rowNode,
-    rowStart = _ref.rowStart,
-    tableMap = _ref.tableMap;
-  var cellEdgeAttrs = [];
-  rowNode.content.forEach(function (cellNode, cellOffset) {
-    if (cellNode.type.name !== 'tableCell' && cellNode.type.name !== 'tableHeader') {
-      return;
-    }
-    var cellRect = tableMap.findCell(rowStart + 1 + cellOffset);
-    cellEdgeAttrs.push({
-      reachesBottom: cellRect.bottom >= tableMap.height,
-      reachesLeft: cellRect.left === 0,
-      reachesRight: cellRect.right >= tableMap.width,
-      reachesTop: cellRect.top === 0
-    });
-  });
-  return cellEdgeAttrs;
-};
-var applyCellEdgeAttrs = function applyCellEdgeAttrs(cell, edgeAttrs) {
-  if (!edgeAttrs) {
-    return;
-  }
-  if (edgeAttrs.reachesTop) {
-    cell.setAttribute('data-reaches-top', 'true');
-  }
-  if (edgeAttrs.reachesBottom) {
-    cell.setAttribute('data-reaches-bottom', 'true');
-  }
-  if (edgeAttrs.reachesLeft) {
-    cell.setAttribute('data-reaches-left', 'true');
-  }
-  if (edgeAttrs.reachesRight) {
-    cell.setAttribute('data-reaches-right', 'true');
-  }
-};
+import { applyCellEdgeAttrs, getRowCellEdgeAttrs } from './utils/tableCellEdgeAttrs';
 /**
  * Extracts information about deleted table rows from a change
  */
-var extractChangedRows = function extractChangedRows(_ref2) {
-  var change = _ref2.change,
-    originalDoc = _ref2.originalDoc,
-    newDoc = _ref2.newDoc,
-    diffType = _ref2.diffType;
+var extractChangedRows = function extractChangedRows(_ref) {
+  var change = _ref.change,
+    originalDoc = _ref.originalDoc,
+    newDoc = _ref.newDoc,
+    diffType = _ref.diffType;
   var changedRows = [];
 
   // Find the table in the original document
@@ -104,7 +64,7 @@ var extractChangedRows = function extractChangedRows(_ref2) {
     // Check if this row overlaps with the deletion range
     var rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
     if (rowOverlapsChange && rowNode.type.name === 'tableRow' && (isExtendedEnabled(diffType) || !isEmptyRow(rowNode))) {
-      var cellEdgeAttrs = isExtendedEnabled(diffType) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true) ? getChangedRowCellEdgeAttrs({
+      var cellEdgeAttrs = isExtendedEnabled(diffType) && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true) ? getRowCellEdgeAttrs({
         rowNode: rowNode,
         rowStart: rowStart,
         tableMap: oldTableMap
@@ -211,11 +171,11 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, n
 /**
  * Expands a diff to include whole changed rows when table rows are affected
  */
-var expandDiffForChangedRows = function expandDiffForChangedRows(_ref3) {
-  var changes = _ref3.changes,
-    originalDoc = _ref3.originalDoc,
-    newDoc = _ref3.newDoc,
-    diffType = _ref3.diffType;
+var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
+  var changes = _ref2.changes,
+    originalDoc = _ref2.originalDoc,
+    newDoc = _ref2.newDoc,
+    diffType = _ref2.diffType;
   var rowInfo = [];
   var _iterator = _createForOfIteratorHelper(changes),
     _step;
@@ -244,15 +204,15 @@ var expandDiffForChangedRows = function expandDiffForChangedRows(_ref3) {
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-export var createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref4) {
-  var changes = _ref4.changes,
-    originalDoc = _ref4.originalDoc,
-    newDoc = _ref4.newDoc,
-    nodeViewSerializer = _ref4.nodeViewSerializer,
-    colorScheme = _ref4.colorScheme,
-    _ref4$isInserted = _ref4.isInserted,
-    isInserted = _ref4$isInserted === void 0 ? false : _ref4$isInserted,
-    diffType = _ref4.diffType;
+export var createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref3) {
+  var changes = _ref3.changes,
+    originalDoc = _ref3.originalDoc,
+    newDoc = _ref3.newDoc,
+    nodeViewSerializer = _ref3.nodeViewSerializer,
+    colorScheme = _ref3.colorScheme,
+    _ref3$isInserted = _ref3.isInserted,
+    isInserted = _ref3$isInserted === void 0 ? false : _ref3$isInserted,
+    diffType = _ref3.diffType;
   // First, expand the changes to include complete deleted rows
   var changedRows = expandDiffForChangedRows({
     changes: changes.filter(function (change) {

package/dist/esm/pm-plugins/decorations/utils/tableCellEdgeAttrs.js

@@ -0,0 +1,67 @@
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+export var getRowCellEdgeAttrs = function getRowCellEdgeAttrs(_ref) {
+  var rowNode = _ref.rowNode,
+    rowStart = _ref.rowStart,
+    tableMap = _ref.tableMap;
+  var cellEdgeAttrs = [];
+  rowNode.content.forEach(function (cellNode, cellOffset) {
+    if (cellNode.type.name !== 'tableCell' && cellNode.type.name !== 'tableHeader') {
+      return;
+    }
+    var cellRect = tableMap.findCell(rowStart + 1 + cellOffset);
+    cellEdgeAttrs.push({
+      reachesBottom: cellRect.bottom >= tableMap.height,
+      reachesLeft: cellRect.left === 0,
+      reachesRight: cellRect.right >= tableMap.width,
+      reachesTop: cellRect.top === 0
+    });
+  });
+  return cellEdgeAttrs;
+};
+export var applyCellEdgeAttrs = function applyCellEdgeAttrs(cell, edgeAttrs) {
+  if (!edgeAttrs) {
+    return;
+  }
+  if (edgeAttrs.reachesTop) {
+    cell.setAttribute('data-reaches-top', 'true');
+  }
+  if (edgeAttrs.reachesBottom) {
+    cell.setAttribute('data-reaches-bottom', 'true');
+  }
+  if (edgeAttrs.reachesLeft) {
+    cell.setAttribute('data-reaches-left', 'true');
+  }
+  if (edgeAttrs.reachesRight) {
+    cell.setAttribute('data-reaches-right', 'true');
+  }
+};
+export var applyTableCellEdgeAttrs = function applyTableCellEdgeAttrs(_ref2) {
+  var element = _ref2.element,
+    tableNode = _ref2.tableNode;
+  try {
+    var table = element instanceof HTMLTableElement ? element : element.querySelector('table');
+    if (!(table instanceof HTMLTableElement)) {
+      return;
+    }
+    var tableMap = TableMap.get(tableNode);
+    var cells = Array.from(table.rows).flatMap(function (row) {
+      return Array.from(row.cells);
+    });
+    var cellIndex = 0;
+    tableNode.content.forEach(function (rowNode, rowStart) {
+      getRowCellEdgeAttrs({
+        rowNode: rowNode,
+        rowStart: rowStart,
+        tableMap: tableMap
+      }).forEach(function (edgeAttrs) {
+        var cell = cells[cellIndex];
+        cellIndex++;
+        if (cell) {
+          applyCellEdgeAttrs(cell, edgeAttrs);
+        }
+      });
+    });
+  } catch (_unused) {
+    // Table structure can be transient while widget DOM is being assembled.
+  }
+};

package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeView.js

@@ -4,8 +4,9 @@ import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../../isExtendedEnabled';
-import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlockExtended, editingContentStyleInBlockExtendedNoUnderline, editingStyleExtended, editingStyleExtendedNoUnderline, editingStyleActiveExtended, editingStyleActiveExtendedNoUnderline, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
-import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
+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';
+import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayRoundedStyle, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
+import { applyTableCellEdgeAttrs } from './tableCellEdgeAttrs';
 var lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -171,9 +172,13 @@ var applyCellOverlayStyles = function applyCellOverlayStyles(_ref2) {
   var element = _ref2.element,
     colorScheme = _ref2.colorScheme,
     isInserted = _ref2.isInserted;
+  var isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
   element.querySelectorAll('td, th').forEach(function (cell) {
     var overlay = document.createElement('span');
-    var overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyleNew : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
+    var isTraditional = colorScheme === 'traditional';
+    var deletedCellStyle = isTraditional ? deletedTraditionalCellOverlayStyle : deletedCellOverlayStyle;
+    var addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyleNew : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
+    var overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
     overlay.setAttribute('style', overlayStyle);
     cell.appendChild(overlay);
   });
@@ -537,6 +542,12 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref0) {
         return;
       }
       if (targetNode.type.name === 'table') {
+        if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true)) {
+          applyTableCellEdgeAttrs({
+            element: nodeView,
+            tableNode: targetNode
+          });
+        }
         applyCellOverlayStyles({
           element: nodeView,
           colorScheme: colorScheme,

package/dist/types/pm-plugins/decorations/utils/tableCellEdgeAttrs.d.ts

@@ -0,0 +1,18 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+export type CellEdgeAttrs = {
+    reachesBottom: boolean;
+    reachesLeft: boolean;
+    reachesRight: boolean;
+    reachesTop: boolean;
+};
+export declare const getRowCellEdgeAttrs: ({ rowNode, rowStart, tableMap, }: {
+    rowNode: PMNode;
+    rowStart: number;
+    tableMap: TableMap;
+}) => CellEdgeAttrs[];
+export declare const applyCellEdgeAttrs: (cell: HTMLElement, edgeAttrs?: CellEdgeAttrs) => void;
+export declare const applyTableCellEdgeAttrs: ({ element, tableNode, }: {
+    element: HTMLElement;
+    tableNode: PMNode;
+}) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "10.6.0",
+	"version": "10.6.1",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,8 +28,8 @@
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-tables": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/tmp-editor-statsig": "^132.2.0",
-		"@atlaskit/tokens": "^16.2.0",
+		"@atlaskit/tmp-editor-statsig": "^133.0.0",
+		"@atlaskit/tokens": "^16.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.0",
 		"lodash": "^4.17.21",
@@ -41,10 +41,10 @@
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/dropdown-menu": "^17.1.0",
-		"@atlaskit/editor-core": "^221.12.0",
+		"@atlaskit/editor-core": "^221.14.0",
 		"@atlaskit/editor-json-transformer": "^9.0.0",
 		"@atlaskit/form": "^16.1.0",
-		"@atlaskit/primitives": "^22.1.0",
+		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/section-message": "^9.2.0",
 		"@atlaskit/textarea": "^9.1.0",
 		"@atlassian/confluence-presets": "workspace:^",
@@ -54,7 +54,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.35.0",
+		"@atlaskit/editor-common": "^116.39.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {