@atlaskit/editor-plugin-show-diff 3.1.5 → 3.2.1

package/dist/cjs/pm-plugins/main.js

@@ -8,15 +8,15 @@ exports.showDiffPluginKey = exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _processRawValue = require("@atlaskit/editor-common/process-raw-value");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _state = require("@atlaskit/editor-prosemirror/state");
+var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _calculateDiffDecorations = require("./calculateDiffDecorations");
 var _NodeViewSerializer = require("./NodeViewSerializer");
 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; }
-var showDiffPluginKey = exports.showDiffPluginKey = new _state.PluginKey('showDiffPlugin');
-var createPlugin = exports.createPlugin = function createPlugin(config) {
+var showDiffPluginKey = exports.showDiffPluginKey = new _state2.PluginKey('showDiffPlugin');
+var createPlugin = exports.createPlugin = function createPlugin(config, getIntl) {
   var nodeViewSerializer = new _NodeViewSerializer.NodeViewSerializer({});
   var setNodeViewSerializer = function setNodeViewSerializer(editorView) {
     nodeViewSerializer.init({
@@ -26,7 +26,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config) {
   return new _safePlugin.SafePlugin({
     key: showDiffPluginKey,
     state: {
-      init: function init(_, state) {
+      init: function init(_, _state) {
         // We do initial setup after we setup the editor view
         return {
           steps: [],
@@ -49,7 +49,8 @@ var createPlugin = exports.createPlugin = function createPlugin(config) {
               state: newState,
               pluginState: newPluginState,
               nodeViewSerializer: nodeViewSerializer,
-              colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme
+              colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme,
+              intl: getIntl()
             });
             // Update the decorations
             newPluginState.decorations = decorations;

package/dist/cjs/showDiffPlugin.js

@@ -10,7 +10,7 @@ var _main = require("./pm-plugins/main");
 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; }
 var showDiffPlugin = exports.showDiffPlugin = function showDiffPlugin(_ref) {
-  var api = _ref.api,
+  var _api = _ref.api,
     config = _ref.config;
   return {
     name: 'showDiff',
@@ -34,8 +34,9 @@ var showDiffPlugin = exports.showDiffPlugin = function showDiffPlugin(_ref) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'showDiffPlugin',
-        plugin: function plugin() {
-          return (0, _main.createPlugin)(config);
+        plugin: function plugin(_ref4) {
+          var getIntl = _ref4.getIntl;
+          return (0, _main.createPlugin)(config, getIntl);
         }
       }];
     },

package/dist/es2019/pm-plugins/calculateDiffDecorations.js

@@ -83,7 +83,8 @@ const calculateDiffDecorationsInner = ({
   state,
   pluginState,
   nodeViewSerializer,
-  colourScheme
+  colourScheme,
+  intl
 }) => {
   const {
     originalDoc,
@@ -98,11 +99,13 @@ const calculateDiffDecorationsInner = ({
   } = state;
   let steppedDoc = originalDoc;
   const stepMaps = [];
+  let changeset = ChangeSet.create(originalDoc);
   for (const step of steps) {
     const result = step.apply(steppedDoc);
     if (result.failed === null && result.doc) {
       steppedDoc = result.doc;
       stepMaps.push(step.getMap());
+      changeset = changeset.addSteps(steppedDoc, [step.getMap()], step);
     }
   }
 
@@ -111,7 +114,6 @@ const calculateDiffDecorationsInner = ({
   if (!areNodesEqualIgnoreAttrs(steppedDoc, tr.doc)) {
     return DecorationSet.empty;
   }
-  const changeset = ChangeSet.create(originalDoc).addSteps(steppedDoc, stepMaps, tr.doc);
   const changes = simplifyChanges(changeset.changes, tr.doc);
   const optimizedChanges = optimizeChanges(changes);
   const decorations = [];
@@ -126,10 +128,11 @@ const calculateDiffDecorationsInner = ({
         doc: originalDoc,
         nodeViewSerializer,
         colourScheme,
-        newDoc: tr.doc
+        newDoc: tr.doc,
+        intl
       });
       if (decoration) {
-        decorations.push(decoration);
+        decorations.push(...decoration);
       }
     }
   });
@@ -146,13 +149,15 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
 ([{
   pluginState,
   state,
-  colourScheme
+  colourScheme,
+  intl
 }], [{
   pluginState: lastPluginState,
   state: lastState,
-  colourScheme: lastColourScheme
+  colourScheme: lastColourScheme,
+  intl: lastIntl
 }]) => {
   var _ref;
   const originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
-  return (_ref = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colourScheme === lastColourScheme) !== null && _ref !== void 0 ? _ref : false;
+  return (_ref = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colourScheme === lastColourScheme && intl.locale === lastIntl.locale) !== null && _ref !== void 0 ? _ref : false;
 });

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

@@ -1,5 +1,8 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { handleDeletedRows } from './deletedRowsHandler';
 import { findSafeInsertPos } from './findSafeInsertPos';
 const editingStyle = convertToInlineCss({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
@@ -68,6 +71,59 @@ const getEditorStyleNode = (nodeName, colourScheme) => {
       return colourScheme === 'traditional' ? traditionalStyleNode : editingStyleNode;
   }
 };
+const getDeletedStyleNode = nodeName => {
+  switch (nodeName) {
+    case 'blockquote':
+      return deletedStyleQuoteNode;
+    case 'expand':
+    case 'decisionList':
+      return deletedBlockOutline;
+    case 'panel':
+    case 'codeBlock':
+      return deletedBlockOutlineRounded;
+    default:
+      return undefined;
+  }
+};
+const shouldShowRemovedLozenge = nodeName => {
+  switch (nodeName) {
+    case 'expand':
+    case 'codeBlock':
+    case 'mediaSingle':
+    case 'panel':
+    case 'decisionList':
+      return true;
+    default:
+      return false;
+  }
+};
+const shouldFitContentWidth = nodeName => {
+  switch (nodeName) {
+    case 'mediaSingle':
+    case 'embedCard':
+    case 'blockCard':
+      return true;
+    default:
+      return false;
+  }
+};
+const shouldAddShowDiffDeletedNodeClass = nodeName => {
+  switch (nodeName) {
+    case 'mediaSingle':
+    case 'embedCard':
+      return true;
+    default:
+      return false;
+  }
+};
+
+/**
+ * Checks if a node should apply deleted styles directly without wrapper
+ * to preserve natural block-level margins
+ */
+const shouldApplyDeletedStylesDirectly = nodeName => {
+  return nodeName === 'blockquote' || nodeName === 'heading';
+};
 const editingStyleQuoteNode = convertToInlineCss({
   borderLeft: `2px solid ${"var(--ds-border-accent-purple, #8270DB)"}`
 });
@@ -96,6 +152,18 @@ const traditionalStyleCardBlockNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-green, #22A06B)"}`,
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
+const deletedStyleQuoteNode = convertToInlineCss({
+  borderLeft: `2px solid ${"var(--ds-border-accent-gray, #758195)"}`
+});
+const deletedBlockOutline = convertToInlineCss({
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #758195)"}`,
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+const deletedBlockOutlineRounded = convertToInlineCss({
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #758195)"}`,
+  borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
+});
+
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -136,28 +204,171 @@ const deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
+const lozengeStyle = convertToInlineCss({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  position: 'static',
+  blockSize: 'min-content',
+  borderRadius: "var(--ds-radius-small, 4px)",
+  overflow: 'hidden',
+  paddingInlineStart: "var(--ds-space-050, 4px)",
+  paddingInlineEnd: "var(--ds-space-050, 4px)",
+  backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-bold, 700)",
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  color: "var(--ds-text-warning-inverse, #172B4D)"
+});
 const getDeletedContentStyleUnbounded = colourScheme => colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
 const getDeletedContentStyle = colourScheme => colourScheme === 'traditional' ? deletedTraditionalContentStyle : deletedContentStyle;
+
+/**
+ * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
+ */
+const createRemovedLozenge = (intl, nodeName) => {
+  const container = document.createElement('span');
+  let borderTopRightRadius;
+  let borderTopLeftRadius;
+  if (['expand', 'decisionList'].includes(nodeName || '')) {
+    borderTopRightRadius = "var(--ds-radius-small, 4px)";
+  } else if (['panel', 'codeBlock'].includes(nodeName || '')) {
+    borderTopRightRadius = `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`;
+  } else if (nodeName === 'mediaSingle') {
+    borderTopLeftRadius = "var(--ds-radius-small, 4px)";
+  }
+  const containerStyle = convertToInlineCss({
+    position: 'absolute',
+    top: nodeName === 'mediaSingle' ? "var(--ds-space-300, 24px)" : "var(--ds-space-0, 0px)",
+    right: nodeName === 'mediaSingle' ? undefined : "var(--ds-space-0, 0px)",
+    left: nodeName === 'mediaSingle' ? "var(--ds-space-0, 0px)" : undefined,
+    zIndex: 2,
+    pointerEvents: 'none',
+    display: 'flex',
+    overflow: 'hidden',
+    borderTopRightRadius,
+    borderTopLeftRadius
+  });
+  container.setAttribute('style', containerStyle);
+  container.setAttribute('data-testid', 'show-diff-removed-lozenge');
+
+  // Create vanilla HTML lozenge element with Atlaskit Lozenge styling (visual refresh)
+  const lozengeElement = document.createElement('span');
+  lozengeElement.setAttribute('style', lozengeStyle);
+  lozengeElement.textContent = intl.formatMessage(trackChangesMessages.removed).toUpperCase();
+  container.appendChild(lozengeElement);
+  return container;
+};
+
+/**
+ * Wraps a block node in a container with relative positioning to support absolute positioned lozenge
+ */
+const createBlockNodeWrapper = nodeName => {
+  const wrapper = document.createElement('div');
+  const fitContent = shouldFitContentWidth(nodeName);
+  const baseStyle = convertToInlineCss({
+    position: 'relative',
+    display: fitContent ? 'inline-block' : 'block',
+    width: fitContent ? 'fit-content' : undefined,
+    height: fitContent ? 'fit-content' : undefined,
+    opacity: 1
+  });
+  wrapper.setAttribute('style', baseStyle);
+  return wrapper;
+};
+
+/**
+ * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
+ */
+const createDeletedStyleWrapperWithoutOpacity = colourScheme => {
+  const wrapper = document.createElement('span');
+  wrapper.setAttribute('style', getDeletedContentStyle(colourScheme));
+  return wrapper;
+};
+
+/**
+ * Applies deleted styles directly to an HTML element by merging with existing styles
+ */
+const applyDeletedStylesToElement = (element, targetNode, colourScheme) => {
+  const currentStyle = element.getAttribute('style') || '';
+  const deletedContentStyle = getDeletedContentStyle(colourScheme);
+  const nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name) || '';
+  element.setAttribute('style', `${currentStyle}${deletedContentStyle}${nodeSpecificStyle}`);
+};
+
+/**
+ * Appends a block node with wrapper, lozenge, and appropriate styling
+ */
+const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colourScheme, intl) => {
+  const blockWrapper = createBlockNodeWrapper(targetNode.type.name);
+  if (shouldShowRemovedLozenge(targetNode.type.name)) {
+    const lozenge = createRemovedLozenge(intl, targetNode.type.name);
+    blockWrapper.append(lozenge);
+  }
+
+  // Wrap the nodeView in a content wrapper that has the opacity style AND the box-shadow
+  // This keeps the lozenge at full opacity while the content AND border are faded
+  const contentWrapper = document.createElement('div');
+  const nodeStyle = getDeletedStyleNode(targetNode.type.name);
+  contentWrapper.setAttribute('style', `${getDeletedContentStyle(colourScheme)}${nodeStyle || ''}`);
+  contentWrapper.append(nodeView);
+  blockWrapper.append(contentWrapper);
+  if (nodeView instanceof HTMLElement) {
+    if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
+      nodeView.classList.add('show-diff-deleted-node');
+    }
+  }
+  dom.append(blockWrapper);
+};
+
+/**
+ * Handles all block node rendering with appropriate deleted styling.
+ * For blockquote and heading nodes, applies styles directly to preserve natural margins.
+ * For other block nodes, uses wrapper approach with optional lozenge.
+ */
+const handleBlockNodeView = (dom, nodeView, targetNode, colourScheme, intl) => {
+  if (shouldApplyDeletedStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
+    // Apply deleted styles directly to preserve natural block-level margins
+    applyDeletedStylesToElement(nodeView, targetNode, colourScheme);
+    dom.append(nodeView);
+  } else {
+    // Use wrapper approach for other block nodes
+    appendBlockNodeWithWrapper(dom, nodeView, targetNode, colourScheme, intl);
+  }
+};
 export const createDeletedContentDecoration = ({
   change,
   doc,
   nodeViewSerializer,
   colourScheme,
-  newDoc
+  newDoc,
+  intl
 }) => {
   const slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
     return;
   }
-  const isTableContent = slice.content.content.some(() => slice.content.content.some(siblingNode => ['tableHeader', 'tableCell', 'tableRow'].includes(siblingNode.type.name)));
-  if (isTableContent) {
+  const isTableCellContent = slice.content.content.some(() => slice.content.content.some(siblingNode => ['tableHeader', 'tableCell'].includes(siblingNode.type.name)));
+  const isTableRowContent = slice.content.content.some(() => slice.content.content.some(siblingNode => ['tableRow'].includes(siblingNode.type.name)));
+  if (isTableCellContent) {
     return;
   }
+  if (isTableRowContent) {
+    if (!fg('platform_editor_ai_aifc_patch_ga')) {
+      return;
+    }
+    const {
+      decorations
+    } = handleDeletedRows([change], doc, newDoc, nodeViewSerializer, colourScheme);
+    return decorations;
+  }
   const serializer = nodeViewSerializer;
 
   // For non-table content, use the existing span wrapper approach
   const dom = document.createElement('span');
-  dom.setAttribute('style', getDeletedContentStyle(colourScheme));
+  if (!fg('platform_editor_ai_aifc_patch_beta_2')) {
+    dom.setAttribute('style', getDeletedContentStyle(colourScheme));
+  }
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
@@ -169,8 +380,11 @@ export const createDeletedContentDecoration = ({
     // Create a wrapper for each node with strikethrough
     const createWrapperWithStrikethrough = () => {
       const wrapper = document.createElement('span');
-      wrapper.style.position = 'relative';
-      wrapper.style.width = 'fit-content';
+      const baseStyle = convertToInlineCss({
+        position: 'relative',
+        width: 'fit-content'
+      });
+      wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colourScheme)}`);
       const strikethrough = document.createElement('span');
       strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
       wrapper.append(strikethrough);
@@ -193,7 +407,13 @@ export const createDeletedContentDecoration = ({
             // Fallback to serializing the individual child node
             const serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              dom.append(serializedChild);
+              if (fg('platform_editor_ai_aifc_patch_beta_2')) {
+                const wrapper = createWrapperWithStrikethrough();
+                wrapper.append(serializedChild);
+                dom.append(wrapper);
+              } else {
+                dom.append(serializedChild);
+              }
             }
           }
         });
@@ -245,6 +465,9 @@ export const createDeletedContentDecoration = ({
         const wrapper = createWrapperWithStrikethrough();
         wrapper.append(nodeView);
         dom.append(wrapper);
+      } else if (fg('platform_editor_ai_aifc_patch_beta_2')) {
+        // Handle all block nodes with unified function
+        handleBlockNodeView(dom, nodeView, targetNode, colourScheme, intl);
       } else {
         dom.append(nodeView);
       }
@@ -254,7 +477,13 @@ export const createDeletedContentDecoration = ({
     } else {
       const fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        dom.append(fallbackNode);
+        if (fg('platform_editor_ai_aifc_patch_beta_2')) {
+          const wrapper = createDeletedStyleWrapperWithoutOpacity(colourScheme);
+          wrapper.append(fallbackNode);
+          dom.append(wrapper);
+        } else {
+          dom.append(fallbackNode);
+        }
       }
     }
   });
@@ -263,5 +492,5 @@ export const createDeletedContentDecoration = ({
   // Widget decoration used for deletions as the content is not in the document
   // and we want to display the deleted content with a style.
   const safeInsertPos = findSafeInsertPos(newDoc, change.fromB, slice);
-  return Decoration.widget(safeInsertPos, dom, {});
+  return [Decoration.widget(safeInsertPos, dom)];
 };

package/dist/es2019/pm-plugins/deletedRowsHandler.js

@@ -0,0 +1,185 @@
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+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 { findSafeInsertPos } from './findSafeInsertPos';
+const deletedRowStyle = convertToInlineCss({
+  color: "var(--ds-text-accent-gray, #44546F)",
+  textDecoration: 'line-through',
+  opacity: 0.6,
+  display: 'table-row'
+});
+const deletedTraditionalRowStyle = convertToInlineCss({
+  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
+  textDecoration: 'line-through',
+  opacity: 0.6,
+  display: 'table-row'
+});
+/**
+ * Extracts information about deleted table rows from a change
+ */
+const extractDeletedRows = (change, originalDoc, newDoc) => {
+  const deletedRows = [];
+
+  // Find the table in the original document
+  const $fromPos = originalDoc.resolve(change.fromA);
+  const tableOld = findParentNodeClosestToPos($fromPos, node => node.type.name === 'table');
+  if (!tableOld) {
+    return deletedRows;
+  }
+  const oldTableMap = TableMap.get(tableOld.node);
+
+  // Find the table in the new document at the insertion point
+  const $newPos = newDoc.resolve(change.fromB);
+  const tableNew = findParentNodeClosestToPos($newPos, node => node.type.name === 'table');
+  if (!tableNew) {
+    return deletedRows;
+  }
+  const newTableMap = TableMap.get(tableNew.node);
+
+  // If no rows were deleted, return empty
+  if (oldTableMap.height <= newTableMap.height ||
+  // For now ignore if there are column deletions as well
+  oldTableMap.width !== newTableMap.width) {
+    return deletedRows;
+  }
+
+  // Find which rows were deleted by analyzing the change range
+  const changeStartInTable = change.fromA - tableOld.pos - 1;
+  const changeEndInTable = change.toA - tableOld.pos - 1;
+  let currentOffset = 0;
+  let rowIndex = 0;
+  tableOld.node.content.forEach((rowNode, index) => {
+    const rowStart = currentOffset;
+    const rowEnd = currentOffset + rowNode.nodeSize;
+
+    // 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' && !isEmptyRow(rowNode)) {
+      const startOfRow = newTableMap.mapByRow.slice().reverse().find(row => row[0] + tableNew.pos < change.fromB && change.fromB < row[row.length - 1] + tableNew.pos);
+      deletedRows.push({
+        rowIndex,
+        rowNode,
+        fromA: tableOld.pos + 1 + rowStart,
+        toA: tableOld.pos + 1 + rowEnd,
+        fromB: startOfRow ? startOfRow[0] + tableNew.start : change.fromB
+      });
+    }
+    currentOffset += rowNode.nodeSize;
+    if (rowNode.type.name === 'tableRow') {
+      rowIndex++;
+    }
+  });
+
+  // Filter changes that never truly got deleted
+  return deletedRows.filter(deletedRow => {
+    return !tableNew.node.children.some(newRow => areNodesEqualIgnoreAttrs(newRow, deletedRow.rowNode));
+  });
+};
+
+/**
+ * Checks if a table row is empty (contains no meaningful content)
+ */
+const isEmptyRow = rowNode => {
+  let isEmpty = true;
+  rowNode.descendants(node => {
+    if (!isEmpty) {
+      return false;
+    }
+
+    // If we find any inline content with size > 0, the row is not empty
+    if (node.isInline && node.nodeSize > 0) {
+      isEmpty = false;
+      return false;
+    }
+
+    // If we find text content, the row is not empty
+    if (node.isText && node.text && node.text.trim() !== '') {
+      isEmpty = false;
+      return false;
+    }
+    return true;
+  });
+  return isEmpty;
+};
+
+/**
+ * Creates a DOM representation of a deleted table row
+ */
+const createDeletedRowDOM = (rowNode, nodeViewSerializer, colourScheme) => {
+  const tr = document.createElement('tr');
+  tr.setAttribute('style', colourScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
+  tr.setAttribute('data-testid', 'show-diff-deleted-row');
+
+  // Serialize each cell in the row
+  rowNode.content.forEach(cellNode => {
+    if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
+      const nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
+      if (nodeView) {
+        tr.appendChild(nodeView);
+      } else {
+        // Fallback to fragment serialization
+        const serializedContent = nodeViewSerializer.serializeFragment(cellNode.content);
+        if (serializedContent) {
+          tr.appendChild(serializedContent);
+        }
+      }
+    }
+  });
+  return tr;
+};
+
+/**
+ * Expands a diff to include whole deleted rows when table rows are affected
+ */
+const expandDiffForDeletedRows = (changes, originalDoc, newDoc) => {
+  const deletedRowInfo = [];
+  for (const change of changes) {
+    // Check if this change affects table content
+    const deletedRows = extractDeletedRows(change, originalDoc, newDoc);
+    if (deletedRows.length > 0) {
+      deletedRowInfo.push(...deletedRows);
+    }
+  }
+  return deletedRowInfo;
+};
+
+/**
+ * Creates decorations for deleted table rows
+ */
+export const createDeletedRowsDecorations = ({
+  deletedRows,
+  originalDoc,
+  newDoc,
+  nodeViewSerializer,
+  colourScheme
+}) => {
+  return deletedRows.map(deletedRow => {
+    const rowDOM = createDeletedRowDOM(deletedRow.rowNode, nodeViewSerializer, colourScheme);
+
+    // Find safe insertion position for the deleted row
+    const safeInsertPos = findSafeInsertPos(newDoc, deletedRow.fromB - 1,
+    // -1 to find the first safe position from the table
+    originalDoc.slice(deletedRow.fromA, deletedRow.toA));
+    return Decoration.widget(safeInsertPos, rowDOM, {});
+  });
+};
+
+/**
+ * Main function to handle deleted rows - computes diff and creates decorations
+ */
+export const handleDeletedRows = (changes, originalDoc, newDoc, nodeViewSerializer, colourScheme) => {
+  // First, expand the changes to include complete deleted rows
+  const deletedRows = expandDiffForDeletedRows(changes.filter(change => change.deleted.length > 0), originalDoc, newDoc);
+  const allDecorations = createDeletedRowsDecorations({
+    deletedRows,
+    originalDoc,
+    newDoc,
+    nodeViewSerializer,
+    colourScheme
+  });
+  return {
+    decorations: allDecorations
+  };
+};

package/dist/es2019/pm-plugins/main.js

@@ -6,7 +6,7 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { calculateDiffDecorations } from './calculateDiffDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
 export const showDiffPluginKey = new PluginKey('showDiffPlugin');
-export const createPlugin = config => {
+export const createPlugin = (config, getIntl) => {
   const nodeViewSerializer = new NodeViewSerializer({});
   const setNodeViewSerializer = editorView => {
     nodeViewSerializer.init({
@@ -16,7 +16,7 @@ export const createPlugin = config => {
   return new SafePlugin({
     key: showDiffPluginKey,
     state: {
-      init(_, state) {
+      init(_, _state) {
         // We do initial setup after we setup the editor view
         return {
           steps: [],
@@ -41,7 +41,8 @@ export const createPlugin = config => {
               state: newState,
               pluginState: newPluginState,
               nodeViewSerializer,
-              colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme
+              colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme,
+              intl: getIntl()
             });
             // Update the decorations
             newPluginState.decorations = decorations;

package/dist/es2019/showDiffPlugin.js

@@ -1,6 +1,6 @@
 import { createPlugin, showDiffPluginKey } from './pm-plugins/main';
 export const showDiffPlugin = ({
-  api,
+  api: _api,
   config
 }) => ({
   name: 'showDiff',
@@ -25,7 +25,9 @@ export const showDiffPlugin = ({
   pmPlugins() {
     return [{
       name: 'showDiffPlugin',
-      plugin: () => createPlugin(config)
+      plugin: ({
+        getIntl
+      }) => createPlugin(config, getIntl)
     }];
   },
   getSharedState: editorState => {