@atlaskit/editor-plugin-show-diff 10.5.1 → 10.5.3

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

@@ -2,11 +2,54 @@ import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../isExtendedEnabled';
-import { addedCellOverlayStyle, deletedRowStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
-import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle } from './colorSchemes/traditional';
+import { addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedRowStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
+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');
+  }
+};
 /**
  * Extracts information about deleted table rows from a change
  */
@@ -52,10 +95,16 @@ 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({
+        rowNode,
+        rowStart,
+        tableMap: oldTableMap
+      }) : undefined;
       const startOfRow = newTableMap.mapByRow.slice().reverse().find(row => row[0] + tableNew.pos < change.fromB && change.fromB < row[row.length - 1] + tableNew.pos);
       changedRows.push({
         rowIndex,
         rowNode,
+        cellEdgeAttrs,
         fromA: tableOld.pos + 1 + rowStart,
         toA: tableOld.pos + 1 + rowEnd,
         fromB: startOfRow ? startOfRow[0] + tableNew.start : change.fromB
@@ -102,7 +151,7 @@ const isEmptyRow = rowNode => {
 /**
  * Creates a DOM representation of a deleted table row
  */
-const createChangedRowDOM = (rowNode, nodeViewSerializer, colorScheme, isInserted, diffType) => {
+const createChangedRowDOM = (rowNode, cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType) => {
   const tr = document.createElement('tr');
   if (isExtendedEnabled(diffType)) {
     if (!isInserted) {
@@ -114,15 +163,23 @@ const createChangedRowDOM = (rowNode, nodeViewSerializer, colorScheme, isInserte
   tr.setAttribute('data-testid', 'show-diff-deleted-row');
 
   // Serialize each cell in the row
+  let cellIndex = 0;
   rowNode.content.forEach(cellNode => {
     if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
       const nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
       if (nodeView) {
-        if (nodeView instanceof HTMLElement && isExtendedEnabled(diffType)) {
-          const overlay = document.createElement('span');
-          const overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
-          overlay.setAttribute('style', overlayStyle);
-          nodeView.appendChild(overlay);
+        if (nodeView instanceof HTMLElement) {
+          applyCellEdgeAttrs(nodeView, cellEdgeAttrs === null || cellEdgeAttrs === void 0 ? void 0 : cellEdgeAttrs[cellIndex]);
+          if (isExtendedEnabled(diffType)) {
+            const overlay = document.createElement('span');
+            const isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
+            const isTraditional = colorScheme === 'traditional';
+            const deletedCellStyle = isTraditional ? deletedTraditionalCellOverlayStyle : deletedCellOverlayStyle;
+            const addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyle : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
+            const overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
+            overlay.setAttribute('style', overlayStyle);
+            nodeView.appendChild(overlay);
+          }
         }
         tr.appendChild(nodeView);
       } else {
@@ -132,6 +189,7 @@ const createChangedRowDOM = (rowNode, nodeViewSerializer, colorScheme, isInserte
           tr.appendChild(serializedContent);
         }
       }
+      cellIndex++;
     }
   });
   return tr;
@@ -182,7 +240,7 @@ export const createChangedRowDecorationWidgets = ({
     diffType
   });
   return changedRows.map(changedRow => {
-    const rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme, isInserted, diffType);
+    const rowDOM = createChangedRowDOM(changedRow.rowNode, changedRow.cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType);
 
     // Find safe insertion position for the deleted row
     const safeInsertPos = findSafeInsertPos(newDoc, changedRow.fromB - 1,

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

@@ -8,6 +8,16 @@ import { buildDiffDecorationSpec } from './decorationKeys';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
+const getAtomicInlineNodeClassName = (inlineNodeName, colorScheme) => {
+  const classNames = ['show-diff-atomic-inline-changed'];
+  if (inlineNodeName) {
+    classNames.push(`show-diff-atomic-inline-changed-${inlineNodeName}`);
+  }
+  if (colorScheme === 'traditional') {
+    classNames.push('show-diff-atomic-inline-changed-traditional');
+  }
+  return classNames.join(' ');
+};
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -20,11 +30,13 @@ export const createInlineChangedDecoration = ({
   colorScheme,
   isActive = false,
   isInserted = true,
+  isAtomicInlineNode = false,
   shouldHideDeleted = false,
   showIndicators = false,
   doc,
   diffType,
-  hideAddedDiffsUnderline = false
+  hideAddedDiffsUnderline = false,
+  inlineNodeName
 }) => {
   const diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
@@ -66,6 +78,9 @@ export const createInlineChangedDecoration = ({
   }
   const decorations = [Decoration.inline(change.fromB, change.toB, {
     style,
+    ...(isAtomicInlineNode && isInserted && {
+      class: getAtomicInlineNodeClassName(inlineNodeName, colorScheme)
+    }),
     'data-testid': 'show-diff-changed-decoration'
   }, buildDiffDecorationSpec({
     decorationType: 'inline',

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

@@ -1,5 +1,6 @@
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const filterUndefined = x => !!x;
 
 // Attributes that indicate a change in media image
@@ -11,6 +12,24 @@ const dateAttrs = ['timestamp'];
 // Attribute that indicates a task item state change
 const taskItemAttrs = ['state'];
 
+// Attributes that indicate an emoji change
+const emojiAttrs = ['shortName', 'id', 'text'];
+
+// Attributes that indicate a mention change (who is mentioned)
+const mentionAttrs = ['id', 'text'];
+
+// Attributes that indicate a status change (label or colour)
+const statusAttrs = ['text', 'color'];
+
+// Map of node type name → the attrs that represent a meaningful content change for that node
+const inlineNodeAttrMap = {
+  date: dateAttrs,
+  emoji: emojiAttrs,
+  mention: mentionAttrs,
+  status: statusAttrs
+};
+const isInlineAttrChangeNodeName = nodeName => nodeName in inlineNodeAttrMap;
+
 // Attributes excluded from extension change detection (not meaningful content changes)
 const extensionExcludedAttrs = ['localId'];
 
@@ -25,7 +44,7 @@ const getStepAttrs = step => {
   }
   return [];
 };
-export const getAttrChangeRanges = (doc, steps) => {
+export const getAttrChangeRanges = (doc, steps, originalDoc) => {
   return steps.map(step => {
     if (!(step instanceof AttrStep) && !(step instanceof SetAttrsStep)) {
       return undefined;
@@ -35,14 +54,38 @@ export const getAttrChangeRanges = (doc, steps) => {
     const nodeAtPos = doc.nodeAt(step.pos);
 
     // date node: timestamp attribute change — highlight the date node itself (inline)
-    if (stepAttrs.some(v => dateAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date') {
+    if (stepAttrs.some(v => dateAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date' && !expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) {
       return {
         fromB: step.pos,
         toB: step.pos + nodeAtPos.nodeSize,
-        isInline: true
+        isInline: true,
+        inlineNodeName: 'date'
       };
     }
 
+    // The following inline node attr changes are gated behind platform_editor_improve_inline_diffs.
+    // The changeset path (createDecorationsForChange) handles the deletion widget via
+    // prosemirror-changeset; we only need to add the inline insertion highlight here.
+    if (expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true) && nodeAtPos) {
+      const nodeName = nodeAtPos.type.name;
+      if (isInlineAttrChangeNodeName(nodeName)) {
+        const watchedAttrs = inlineNodeAttrMap[nodeName];
+        if (stepAttrs.some(v => watchedAttrs.includes(v))) {
+          const originalNodeAtPos = originalDoc === null || originalDoc === void 0 ? void 0 : originalDoc.nodeAt(step.pos);
+          return {
+            fromB: step.pos,
+            toB: step.pos + nodeAtPos.nodeSize,
+            isInline: true,
+            inlineNodeName: nodeName,
+            ...(originalNodeAtPos && {
+              fromA: step.pos,
+              toA: step.pos + originalNodeAtPos.nodeSize
+            })
+          };
+        }
+      }
+    }
+
     // taskItem node: state attribute change — highlight the taskItem node
     if (stepAttrs.some(v => taskItemAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'taskItem') {
       return {
@@ -70,7 +113,13 @@ export const getAttrChangeRanges = (doc, steps) => {
       };
     }
     return undefined;
-  }).filter(filterUndefined);
+  }).filter(filterUndefined)
+  // Deduplicate by node position: multiple AttrSteps on the same node
+  // (e.g. setNodeAttribute(pos, 'text', ...) + setNodeAttribute(pos, 'color', ...))
+  // should produce only one decoration, not one per step.
+  // Gated behind the same experiment as the inline node attr changes that introduced
+  // the possibility of multiple ranges for the same node position.
+  .filter((range, i, arr) => !expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true) || arr.findIndex(r => r.fromB === range.fromB) === i);
 };
 
 /**

package/dist/esm/pm-plugins/calculateDiff/calculateDiffDecorations.js

@@ -421,16 +421,43 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       isInserted: true
     })));
   });
-  getAttrChangeRanges(tr.doc, attrSteps).forEach(function (change) {
+  getAttrChangeRanges(tr.doc, attrSteps, originalDoc).forEach(function (change) {
     if (change.isInline) {
-      // Inline nodes (e.g. date) need an inline decoration rather than a block decoration
+      // Inline nodes (e.g. date, emoji, mention, status) need an inline decoration rather than a block decoration
       var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
+      var isAtomicInlineNodeFlag = expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true);
       decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration({
         change: change,
         colorScheme: colorScheme,
         isActive: isActive,
-        isInserted: true
+        isInserted: true,
+        isAtomicInlineNode: isAtomicInlineNodeFlag,
+        inlineNodeName: change.inlineNodeName,
+        // Suppress the border-bottom underline for atomic inline nodeviews —
+        // it doesn't render on custom nodeview DOM elements and is unnecessary noise.
+        hideAddedDiffsUnderline: isAtomicInlineNodeFlag,
+        diffType: diffType
       })));
+      // If we have the original node position, also render the old node as a "deleted" widget
+      // so the user can see what it looked like before the change.
+      if (change.fromA !== undefined && change.toA !== undefined && expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) {
+        decorations.push.apply(decorations, _toConsumableArray(createNodeChangedDecorationWidget({
+          change: {
+            fromA: change.fromA,
+            toA: change.toA,
+            fromB: change.fromB,
+            toB: change.toB,
+            deleted: []
+          },
+          doc: originalDoc,
+          nodeViewSerializer: nodeViewSerializer,
+          colorScheme: colorScheme,
+          newDoc: tr.doc,
+          intl: intl,
+          activeIndexPos: activeIndexPos,
+          isInserted: false
+        })));
+      }
     } else {
       decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration({
         doc: tr.doc,

package/dist/esm/pm-plugins/decorations/colorSchemes/standard.js

@@ -170,6 +170,18 @@ export var addedCellOverlayStyle = convertToInlineCss({
   outline: "1px solid ".concat("var(--ds-border-accent-purple, #AF59E1)"),
   pointerEvents: 'none'
 });
+export var addedCellOverlayRoundedStyle = convertToInlineCss({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: "rgba(from ".concat("var(--ds-background-accent-purple-subtlest, #F8EEFE)", " r g b / 0.5)"),
+  zIndex: 2,
+  outline: "1px solid ".concat("var(--ds-border-accent-purple, #AF59E1)"),
+  pointerEvents: 'none',
+  borderRadius: 'inherit'
+});
 export var deletedCellOverlayStyle = convertToInlineCss({
   position: 'absolute',
   top: 0,

package/dist/esm/pm-plugins/decorations/colorSchemes/traditional.js

@@ -84,7 +84,7 @@ export var deletedTraditionalBlockOutlineRoundedActive = convertToInlineCss({
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
 
-/** Scroll-navigation “new” emphasis: 4px ring (see {@link traditionalStyleNodeNew}). */
+/** Scroll-navigation “new” emphasis: 4px ring. */
 export var deletedTraditionalBlockOutlineNew = convertToInlineCss({
   boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
   borderRadius: "var(--ds-radius-small, 4px)"
@@ -184,6 +184,19 @@ export var traditionalAddedCellOverlayStyle = convertToInlineCss({
   outline: "1px solid ".concat("var(--ds-border-accent-green, #22A06B)"),
   pointerEvents: 'none'
 });
+export var traditionalAddedCellOverlayRoundedStyle = convertToInlineCss({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: "rgba(from ".concat("var(--ds-background-accent-green-subtlest, #DCFFF1)", " r g b / 0.5)"),
+  zIndex: 2,
+  outline: "1px solid ".concat("var(--ds-border-accent-green, #22A06B)"),
+  pointerEvents: 'none',
+  border: 'inherit',
+  borderRadius: 'inherit'
+});
 export var traditionalAddedCellOverlayStyleNew = convertToInlineCss({
   position: 'absolute',
   top: 0,

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

@@ -9,19 +9,61 @@ import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../isExtendedEnabled';
-import { addedCellOverlayStyle, deletedRowStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
-import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle } from './colorSchemes/traditional';
+import { addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedRowStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
+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');
+  }
+};
 /**
  * Extracts information about deleted table rows from a change
  */
-var extractChangedRows = function extractChangedRows(_ref) {
-  var change = _ref.change,
-    originalDoc = _ref.originalDoc,
-    newDoc = _ref.newDoc,
-    diffType = _ref.diffType;
+var extractChangedRows = function extractChangedRows(_ref2) {
+  var change = _ref2.change,
+    originalDoc = _ref2.originalDoc,
+    newDoc = _ref2.newDoc,
+    diffType = _ref2.diffType;
   var changedRows = [];
 
   // Find the table in the original document
@@ -62,12 +104,18 @@ var extractChangedRows = function extractChangedRows(_ref) {
     // 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({
+        rowNode: rowNode,
+        rowStart: rowStart,
+        tableMap: oldTableMap
+      }) : undefined;
       var startOfRow = newTableMap.mapByRow.slice().reverse().find(function (row) {
         return row[0] + tableNew.pos < change.fromB && change.fromB < row[row.length - 1] + tableNew.pos;
       });
       changedRows.push({
         rowIndex: rowIndex,
         rowNode: rowNode,
+        cellEdgeAttrs: cellEdgeAttrs,
         fromA: tableOld.pos + 1 + rowStart,
         toA: tableOld.pos + 1 + rowEnd,
         fromB: startOfRow ? startOfRow[0] + tableNew.start : change.fromB
@@ -116,7 +164,7 @@ var isEmptyRow = function isEmptyRow(rowNode) {
 /**
  * Creates a DOM representation of a deleted table row
  */
-var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializer, colorScheme, isInserted, diffType) {
+var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType) {
   var tr = document.createElement('tr');
   if (isExtendedEnabled(diffType)) {
     if (!isInserted) {
@@ -128,15 +176,23 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
   tr.setAttribute('data-testid', 'show-diff-deleted-row');
 
   // Serialize each cell in the row
+  var cellIndex = 0;
   rowNode.content.forEach(function (cellNode) {
     if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
       var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
       if (nodeView) {
-        if (nodeView instanceof HTMLElement && isExtendedEnabled(diffType)) {
-          var overlay = document.createElement('span');
-          var overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
-          overlay.setAttribute('style', overlayStyle);
-          nodeView.appendChild(overlay);
+        if (nodeView instanceof HTMLElement) {
+          applyCellEdgeAttrs(nodeView, cellEdgeAttrs === null || cellEdgeAttrs === void 0 ? void 0 : cellEdgeAttrs[cellIndex]);
+          if (isExtendedEnabled(diffType)) {
+            var overlay = document.createElement('span');
+            var isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
+            var isTraditional = colorScheme === 'traditional';
+            var deletedCellStyle = isTraditional ? deletedTraditionalCellOverlayStyle : deletedCellOverlayStyle;
+            var addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyle : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
+            var overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
+            overlay.setAttribute('style', overlayStyle);
+            nodeView.appendChild(overlay);
+          }
         }
         tr.appendChild(nodeView);
       } else {
@@ -146,6 +202,7 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
           tr.appendChild(serializedContent);
         }
       }
+      cellIndex++;
     }
   });
   return tr;
@@ -154,11 +211,11 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
 /**
  * Expands a diff to include whole changed rows when table rows are affected
  */
-var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
-  var changes = _ref2.changes,
-    originalDoc = _ref2.originalDoc,
-    newDoc = _ref2.newDoc,
-    diffType = _ref2.diffType;
+var expandDiffForChangedRows = function expandDiffForChangedRows(_ref3) {
+  var changes = _ref3.changes,
+    originalDoc = _ref3.originalDoc,
+    newDoc = _ref3.newDoc,
+    diffType = _ref3.diffType;
   var rowInfo = [];
   var _iterator = _createForOfIteratorHelper(changes),
     _step;
@@ -187,15 +244,15 @@ var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-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;
+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;
   // First, expand the changes to include complete deleted rows
   var changedRows = expandDiffForChangedRows({
     changes: changes.filter(function (change) {
@@ -206,7 +263,7 @@ export var createChangedRowDecorationWidgets = function createChangedRowDecorati
     diffType: diffType
   });
   return changedRows.map(function (changedRow) {
-    var rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme, isInserted, diffType);
+    var rowDOM = createChangedRowDOM(changedRow.rowNode, changedRow.cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType);
 
     // Find safe insertion position for the deleted row
     var safeInsertPos = findSafeInsertPos(newDoc, changedRow.fromB - 1,

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

@@ -1,4 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { isExtendedEnabled } from '../isExtendedEnabled';
@@ -9,6 +12,16 @@ import { buildDiffDecorationSpec } from './decorationKeys';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
+var getAtomicInlineNodeClassName = function getAtomicInlineNodeClassName(inlineNodeName, colorScheme) {
+  var classNames = ['show-diff-atomic-inline-changed'];
+  if (inlineNodeName) {
+    classNames.push("show-diff-atomic-inline-changed-".concat(inlineNodeName));
+  }
+  if (colorScheme === 'traditional') {
+    classNames.push('show-diff-atomic-inline-changed-traditional');
+  }
+  return classNames.join(' ');
+};
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -23,6 +36,8 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
     _ref$isInserted = _ref.isInserted,
     isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
+    _ref$isAtomicInlineNo = _ref.isAtomicInlineNode,
+    isAtomicInlineNode = _ref$isAtomicInlineNo === void 0 ? false : _ref$isAtomicInlineNo,
     _ref$shouldHideDelete = _ref.shouldHideDeleted,
     shouldHideDeleted = _ref$shouldHideDelete === void 0 ? false : _ref$shouldHideDelete,
     _ref$showIndicators = _ref.showIndicators,
@@ -30,7 +45,8 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     doc = _ref.doc,
     diffType = _ref.diffType,
     _ref$hideAddedDiffsUn = _ref.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref$hideAddedDiffsUn === void 0 ? false : _ref$hideAddedDiffsUn;
+    hideAddedDiffsUnderline = _ref$hideAddedDiffsUn === void 0 ? false : _ref$hideAddedDiffsUn,
+    inlineNodeName = _ref.inlineNodeName;
   var diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
     return [Decoration.inline(change.fromB, change.toB, {
@@ -69,10 +85,13 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
       style = isActive ? editingStyleActive : editingStyle;
     }
   }
-  var decorations = [Decoration.inline(change.fromB, change.toB, {
-    style: style,
+  var decorations = [Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread({
+    style: style
+  }, isAtomicInlineNode && isInserted && {
+    class: getAtomicInlineNodeClassName(inlineNodeName, colorScheme)
+  }), {}, {
     'data-testid': 'show-diff-changed-decoration'
-  }, buildDiffDecorationSpec({
+  }), buildDiffDecorationSpec({
     decorationType: 'inline',
     diffId: diffId,
     isActive: isActive