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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 3.2.1
+
+### Patch Changes
+
+- [`da2782d8dc1e7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/da2782d8dc1e7) -
+  Support table row diff displaying in the editor
+
+## 3.2.0
+
+### Minor Changes
+
+- [`68caaf98e8f89`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/68caaf98e8f89) -
+  [ux] [EDITOR-1628] Added "Removed" Lozenge and gray border decorations to deleted block nodes in
+  show diff view
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.1.5
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -17,6 +17,12 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-tables/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../platform/feature-flags/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-products/tsconfig.json"
 		},

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

@@ -95,7 +95,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   var state = _ref.state,
     pluginState = _ref.pluginState,
     nodeViewSerializer = _ref.nodeViewSerializer,
-    colourScheme = _ref.colourScheme;
+    colourScheme = _ref.colourScheme,
+    intl = _ref.intl;
   var originalDoc = pluginState.originalDoc,
     rawSteps = pluginState.steps;
   var steps = simplifySteps(rawSteps);
@@ -105,6 +106,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   var tr = state.tr;
   var steppedDoc = originalDoc;
   var stepMaps = [];
+  var changeset = _prosemirrorChangeset.ChangeSet.create(originalDoc);
   var _iterator = _createForOfIteratorHelper(steps),
     _step;
   try {
@@ -114,6 +116,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
       if (result.failed === null && result.doc) {
         steppedDoc = result.doc;
         stepMaps.push(step.getMap());
+        changeset = changeset.addSteps(steppedDoc, [step.getMap()], step);
       }
     }
 
@@ -127,7 +130,6 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   if (!(0, _document.areNodesEqualIgnoreAttrs)(steppedDoc, tr.doc)) {
     return _view.DecorationSet.empty;
   }
-  var changeset = _prosemirrorChangeset.ChangeSet.create(originalDoc).addSteps(steppedDoc, stepMaps, tr.doc);
   var changes = (0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, tr.doc);
   var optimizedChanges = optimizeChanges(changes);
   var decorations = [];
@@ -142,10 +144,11 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
         doc: originalDoc,
         nodeViewSerializer: nodeViewSerializer,
         colourScheme: colourScheme,
-        newDoc: tr.doc
+        newDoc: tr.doc,
+        intl: intl
       });
       if (decoration) {
-        decorations.push(decoration);
+        decorations.push.apply(decorations, (0, _toConsumableArray2.default)(decoration));
       }
     }
   });
@@ -165,12 +168,14 @@ function (_ref2, _ref3) {
     _ref4$ = _ref4[0],
     pluginState = _ref4$.pluginState,
     state = _ref4$.state,
-    colourScheme = _ref4$.colourScheme;
+    colourScheme = _ref4$.colourScheme,
+    intl = _ref4$.intl;
   var _ref5 = (0, _slicedToArray2.default)(_ref3, 1),
     _ref5$ = _ref5[0],
     lastPluginState = _ref5$.pluginState,
     lastState = _ref5$.state,
-    lastColourScheme = _ref5$.colourScheme;
+    lastColourScheme = _ref5$.colourScheme,
+    lastIntl = _ref5$.intl;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
-  return (_ref6 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colourScheme === lastColourScheme) !== null && _ref6 !== void 0 ? _ref6 : false;
+  return (_ref6 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colourScheme === lastColourScheme && intl.locale === lastIntl.locale) !== null && _ref6 !== void 0 ? _ref6 : false;
 });

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

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createInlineChangedDecoration = exports.createDeletedContentDecoration = exports.createBlockChangedDecoration = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _messages = require("@atlaskit/editor-common/messages");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _deletedRowsHandler = require("./deletedRowsHandler");
 var _findSafeInsertPos = require("./findSafeInsertPos");
 var editingStyle = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
@@ -76,6 +79,59 @@ var getEditorStyleNode = function getEditorStyleNode(nodeName, colourScheme) {
       return colourScheme === 'traditional' ? traditionalStyleNode : editingStyleNode;
   }
 };
+var getDeletedStyleNode = function getDeletedStyleNode(nodeName) {
+  switch (nodeName) {
+    case 'blockquote':
+      return deletedStyleQuoteNode;
+    case 'expand':
+    case 'decisionList':
+      return deletedBlockOutline;
+    case 'panel':
+    case 'codeBlock':
+      return deletedBlockOutlineRounded;
+    default:
+      return undefined;
+  }
+};
+var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
+  switch (nodeName) {
+    case 'expand':
+    case 'codeBlock':
+    case 'mediaSingle':
+    case 'panel':
+    case 'decisionList':
+      return true;
+    default:
+      return false;
+  }
+};
+var shouldFitContentWidth = function shouldFitContentWidth(nodeName) {
+  switch (nodeName) {
+    case 'mediaSingle':
+    case 'embedCard':
+    case 'blockCard':
+      return true;
+    default:
+      return false;
+  }
+};
+var shouldAddShowDiffDeletedNodeClass = function 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
+ */
+var shouldApplyDeletedStylesDirectly = function shouldApplyDeletedStylesDirectly(nodeName) {
+  return nodeName === 'blockquote' || nodeName === 'heading';
+};
 var editingStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
   borderLeft: "2px solid ".concat("var(--ds-border-accent-purple, #8270DB)")
 });
@@ -104,6 +160,18 @@ var traditionalStyleCardBlockNode = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
+var deletedStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
+  borderLeft: "2px solid ".concat("var(--ds-border-accent-gray, #758195)")
+});
+var deletedBlockOutline = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #758195)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+var deletedBlockOutlineRounded = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #758195)"),
+  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+});
+
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -146,35 +214,181 @@ var deletedTraditionalContentStyleUnbounded = (0, _lazyNodeView.convertToInlineC
   pointerEvents: 'none',
   zIndex: 1
 });
+var lozengeStyle = (0, _lazyNodeView.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)"
+});
 var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colourScheme) {
   return colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
 };
 var getDeletedContentStyle = function getDeletedContentStyle(colourScheme) {
   return colourScheme === 'traditional' ? deletedTraditionalContentStyle : deletedContentStyle;
 };
+
+/**
+ * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
+ */
+var createRemovedLozenge = function createRemovedLozenge(intl, nodeName) {
+  var container = document.createElement('span');
+  var borderTopRightRadius;
+  var borderTopLeftRadius;
+  if (['expand', 'decisionList'].includes(nodeName || '')) {
+    borderTopRightRadius = "var(--ds-radius-small, 4px)";
+  } else if (['panel', 'codeBlock'].includes(nodeName || '')) {
+    borderTopRightRadius = "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)");
+  } else if (nodeName === 'mediaSingle') {
+    borderTopLeftRadius = "var(--ds-radius-small, 4px)";
+  }
+  var containerStyle = (0, _lazyNodeView.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: borderTopRightRadius,
+    borderTopLeftRadius: borderTopLeftRadius
+  });
+  container.setAttribute('style', containerStyle);
+  container.setAttribute('data-testid', 'show-diff-removed-lozenge');
+
+  // Create vanilla HTML lozenge element with Atlaskit Lozenge styling (visual refresh)
+  var lozengeElement = document.createElement('span');
+  lozengeElement.setAttribute('style', lozengeStyle);
+  lozengeElement.textContent = intl.formatMessage(_messages.trackChangesMessages.removed).toUpperCase();
+  container.appendChild(lozengeElement);
+  return container;
+};
+
+/**
+ * Wraps a block node in a container with relative positioning to support absolute positioned lozenge
+ */
+var createBlockNodeWrapper = function createBlockNodeWrapper(nodeName) {
+  var wrapper = document.createElement('div');
+  var fitContent = shouldFitContentWidth(nodeName);
+  var baseStyle = (0, _lazyNodeView.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)
+ */
+var createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colourScheme) {
+  var wrapper = document.createElement('span');
+  wrapper.setAttribute('style', getDeletedContentStyle(colourScheme));
+  return wrapper;
+};
+
+/**
+ * Applies deleted styles directly to an HTML element by merging with existing styles
+ */
+var applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colourScheme) {
+  var currentStyle = element.getAttribute('style') || '';
+  var deletedContentStyle = getDeletedContentStyle(colourScheme);
+  var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name) || '';
+  element.setAttribute('style', "".concat(currentStyle).concat(deletedContentStyle).concat(nodeSpecificStyle));
+};
+
+/**
+ * Appends a block node with wrapper, lozenge, and appropriate styling
+ */
+var appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeView, targetNode, colourScheme, intl) {
+  var blockWrapper = createBlockNodeWrapper(targetNode.type.name);
+  if (shouldShowRemovedLozenge(targetNode.type.name)) {
+    var 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
+  var contentWrapper = document.createElement('div');
+  var nodeStyle = getDeletedStyleNode(targetNode.type.name);
+  contentWrapper.setAttribute('style', "".concat(getDeletedContentStyle(colourScheme)).concat(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.
+ */
+var handleBlockNodeView = function 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);
+  }
+};
 var createDeletedContentDecoration = exports.createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
   var change = _ref.change,
     doc = _ref.doc,
     nodeViewSerializer = _ref.nodeViewSerializer,
     colourScheme = _ref.colourScheme,
-    newDoc = _ref.newDoc;
+    newDoc = _ref.newDoc,
+    intl = _ref.intl;
   var slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
     return;
   }
-  var isTableContent = slice.content.content.some(function () {
+  var isTableCellContent = slice.content.content.some(function () {
     return slice.content.content.some(function (siblingNode) {
-      return ['tableHeader', 'tableCell', 'tableRow'].includes(siblingNode.type.name);
+      return ['tableHeader', 'tableCell'].includes(siblingNode.type.name);
     });
   });
-  if (isTableContent) {
+  var isTableRowContent = slice.content.content.some(function () {
+    return slice.content.content.some(function (siblingNode) {
+      return ['tableRow'].includes(siblingNode.type.name);
+    });
+  });
+  if (isTableCellContent) {
     return;
   }
+  if (isTableRowContent) {
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga')) {
+      return;
+    }
+    var _handleDeletedRows = (0, _deletedRowsHandler.handleDeletedRows)([change], doc, newDoc, nodeViewSerializer, colourScheme),
+      decorations = _handleDeletedRows.decorations;
+    return decorations;
+  }
   var serializer = nodeViewSerializer;
 
   // For non-table content, use the existing span wrapper approach
   var dom = document.createElement('span');
-  dom.setAttribute('style', getDeletedContentStyle(colourScheme));
+  if (!(0, _platformFeatureFlags.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
@@ -186,8 +400,11 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     // Create a wrapper for each node with strikethrough
     var createWrapperWithStrikethrough = function createWrapperWithStrikethrough() {
       var wrapper = document.createElement('span');
-      wrapper.style.position = 'relative';
-      wrapper.style.width = 'fit-content';
+      var baseStyle = (0, _lazyNodeView.convertToInlineCss)({
+        position: 'relative',
+        width: 'fit-content'
+      });
+      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colourScheme)));
       var strikethrough = document.createElement('span');
       strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
       wrapper.append(strikethrough);
@@ -210,7 +427,13 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
             // Fallback to serializing the individual child node
             var serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              dom.append(serializedChild);
+              if ((0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2')) {
+                var _wrapper = createWrapperWithStrikethrough();
+                _wrapper.append(serializedChild);
+                dom.append(_wrapper);
+              } else {
+                dom.append(serializedChild);
+              }
             }
           }
         });
@@ -266,6 +489,9 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
         var wrapper = createWrapperWithStrikethrough();
         wrapper.append(nodeView);
         dom.append(wrapper);
+      } else if ((0, _platformFeatureFlags.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);
       }
@@ -275,7 +501,13 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     } else {
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        dom.append(fallbackNode);
+        if ((0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2')) {
+          var _wrapper2 = createDeletedStyleWrapperWithoutOpacity(colourScheme);
+          _wrapper2.append(fallbackNode);
+          dom.append(_wrapper2);
+        } else {
+          dom.append(fallbackNode);
+        }
       }
     }
   });
@@ -284,5 +516,5 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
   // Widget decoration used for deletions as the content is not in the document
   // and we want to display the deleted content with a style.
   var safeInsertPos = (0, _findSafeInsertPos.findSafeInsertPos)(newDoc, change.fromB, slice);
-  return _view.Decoration.widget(safeInsertPos, dom, {});
+  return [_view.Decoration.widget(safeInsertPos, dom)];
 };

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

@@ -0,0 +1,214 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleDeletedRows = exports.createDeletedRowsDecorations = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _document = require("@atlaskit/editor-common/utils/document");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _findSafeInsertPos = require("./findSafeInsertPos");
+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; }
+var deletedRowStyle = (0, _lazyNodeView.convertToInlineCss)({
+  color: "var(--ds-text-accent-gray, #44546F)",
+  textDecoration: 'line-through',
+  opacity: 0.6,
+  display: 'table-row'
+});
+var deletedTraditionalRowStyle = (0, _lazyNodeView.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
+ */
+var extractDeletedRows = function extractDeletedRows(change, originalDoc, newDoc) {
+  var deletedRows = [];
+
+  // Find the table in the original document
+  var $fromPos = originalDoc.resolve(change.fromA);
+  var tableOld = (0, _utils.findParentNodeClosestToPos)($fromPos, function (node) {
+    return node.type.name === 'table';
+  });
+  if (!tableOld) {
+    return deletedRows;
+  }
+  var oldTableMap = _tableMap.TableMap.get(tableOld.node);
+
+  // Find the table in the new document at the insertion point
+  var $newPos = newDoc.resolve(change.fromB);
+  var tableNew = (0, _utils.findParentNodeClosestToPos)($newPos, function (node) {
+    return node.type.name === 'table';
+  });
+  if (!tableNew) {
+    return deletedRows;
+  }
+  var newTableMap = _tableMap.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
+  var changeStartInTable = change.fromA - tableOld.pos - 1;
+  var changeEndInTable = change.toA - tableOld.pos - 1;
+  var currentOffset = 0;
+  var rowIndex = 0;
+  tableOld.node.content.forEach(function (rowNode, index) {
+    var rowStart = currentOffset;
+    var rowEnd = currentOffset + rowNode.nodeSize;
+
+    // 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' && !isEmptyRow(rowNode)) {
+      var startOfRow = newTableMap.mapByRow.slice().reverse().find(function (row) {
+        return row[0] + tableNew.pos < change.fromB && change.fromB < row[row.length - 1] + tableNew.pos;
+      });
+      deletedRows.push({
+        rowIndex: rowIndex,
+        rowNode: 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(function (deletedRow) {
+    return !tableNew.node.children.some(function (newRow) {
+      return (0, _document.areNodesEqualIgnoreAttrs)(newRow, deletedRow.rowNode);
+    });
+  });
+};
+
+/**
+ * Checks if a table row is empty (contains no meaningful content)
+ */
+var isEmptyRow = function isEmptyRow(rowNode) {
+  var isEmpty = true;
+  rowNode.descendants(function (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
+ */
+var createDeletedRowDOM = function createDeletedRowDOM(rowNode, nodeViewSerializer, colourScheme) {
+  var 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(function (cellNode) {
+    if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
+      var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
+      if (nodeView) {
+        tr.appendChild(nodeView);
+      } else {
+        // Fallback to fragment serialization
+        var 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
+ */
+var expandDiffForDeletedRows = function expandDiffForDeletedRows(changes, originalDoc, newDoc) {
+  var deletedRowInfo = [];
+  var _iterator = _createForOfIteratorHelper(changes),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var change = _step.value;
+      // Check if this change affects table content
+      var deletedRows = extractDeletedRows(change, originalDoc, newDoc);
+      if (deletedRows.length > 0) {
+        deletedRowInfo.push.apply(deletedRowInfo, (0, _toConsumableArray2.default)(deletedRows));
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return deletedRowInfo;
+};
+
+/**
+ * Creates decorations for deleted table rows
+ */
+var createDeletedRowsDecorations = exports.createDeletedRowsDecorations = function createDeletedRowsDecorations(_ref) {
+  var deletedRows = _ref.deletedRows,
+    originalDoc = _ref.originalDoc,
+    newDoc = _ref.newDoc,
+    nodeViewSerializer = _ref.nodeViewSerializer,
+    colourScheme = _ref.colourScheme;
+  return deletedRows.map(function (deletedRow) {
+    var rowDOM = createDeletedRowDOM(deletedRow.rowNode, nodeViewSerializer, colourScheme);
+
+    // Find safe insertion position for the deleted row
+    var safeInsertPos = (0, _findSafeInsertPos.findSafeInsertPos)(newDoc, deletedRow.fromB - 1,
+    // -1 to find the first safe position from the table
+    originalDoc.slice(deletedRow.fromA, deletedRow.toA));
+    return _view.Decoration.widget(safeInsertPos, rowDOM, {});
+  });
+};
+
+/**
+ * Main function to handle deleted rows - computes diff and creates decorations
+ */
+var handleDeletedRows = exports.handleDeletedRows = function handleDeletedRows(changes, originalDoc, newDoc, nodeViewSerializer, colourScheme) {
+  // First, expand the changes to include complete deleted rows
+  var deletedRows = expandDiffForDeletedRows(changes.filter(function (change) {
+    return change.deleted.length > 0;
+  }), originalDoc, newDoc);
+  var allDecorations = createDeletedRowsDecorations({
+    deletedRows: deletedRows,
+    originalDoc: originalDoc,
+    newDoc: newDoc,
+    nodeViewSerializer: nodeViewSerializer,
+    colourScheme: colourScheme
+  });
+  return {
+    decorations: allDecorations
+  };
+};