@atlaskit/editor-plugin-show-diff 5.0.3 → 5.0.5

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

@@ -8,16 +8,24 @@ import { getAttrChangeRanges, stepIsValidAttrChange } from './attributeDecoratio
 import { createInlineChangedDecoration, createDeletedContentDecoration, createBlockChangedDecoration } from './decorations';
 import { getMarkChangeRanges } from './markDecorations';
 import { simplifySteps } from './simplifyChanges';
-const calculateNodesForBlockDecoration = (doc, from, to, colorScheme) => {
+const calculateNodesForBlockDecoration = ({
+  doc,
+  from,
+  to,
+  colorScheme
+}) => {
   const decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, (node, pos) => {
     if (node.isBlock) {
       const decoration = createBlockChangedDecoration({
-        from: pos,
-        to: pos + node.nodeSize,
-        name: node.type.name
-      }, colorScheme);
+        change: {
+          from: pos,
+          to: pos + node.nodeSize,
+          name: node.type.name
+        },
+        colorScheme
+      });
       if (decoration) {
         decorations.push(decoration);
       }
@@ -107,8 +115,17 @@ const calculateDiffDecorationsInner = ({
   optimizedChanges.forEach(change => {
     const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
     if (change.inserted.length > 0) {
-      decorations.push(createInlineChangedDecoration(change, colorScheme, isActive));
-      decorations.push(...calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme));
+      decorations.push(createInlineChangedDecoration({
+        change,
+        colorScheme,
+        isActive
+      }));
+      decorations.push(...calculateNodesForBlockDecoration({
+        doc: tr.doc,
+        from: change.fromB,
+        to: change.toB,
+        colorScheme
+      }));
     }
     if (change.deleted.length > 0) {
       const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
@@ -128,10 +145,19 @@ const calculateDiffDecorationsInner = ({
   });
   getMarkChangeRanges(steps).forEach(change => {
     const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
-    decorations.push(createInlineChangedDecoration(change, colorScheme, isActive));
+    decorations.push(createInlineChangedDecoration({
+      change,
+      colorScheme,
+      isActive
+    }));
   });
   getAttrChangeRanges(tr.doc, attrSteps).forEach(change => {
-    decorations.push(...calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme));
+    decorations.push(...calculateNodesForBlockDecoration({
+      doc: tr.doc,
+      from: change.fromB,
+      to: change.toB,
+      colorScheme
+    }));
   });
   return DecorationSet.empty.add(tr.doc, decorations);
 };

package/dist/es2019/pm-plugins/colorSchemes/standard.js

@@ -48,43 +48,45 @@ export const deletedContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
-const editingStyleQuoteNode = convertToInlineCss({
+export const deletedStyleQuoteNode = convertToInlineCss({
+  borderLeft: `2px solid ${"var(--ds-border-accent-gray, #7D818A)"}`
+});
+export const deletedStyleQuoteNodeWithLozenge = convertToInlineCss({
+  marginTop: "var(--ds-space-150, 12px)",
+  paddingTop: "var(--ds-space-025, 2px)",
+  paddingBottom: "var(--ds-space-025, 2px)",
+  paddingLeft: "var(--ds-space-025, 2px)",
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #7D818A)"}`,
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+export const deletedBlockOutline = convertToInlineCss({
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #7D818A)"}`,
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+export const deletedBlockOutlineRounded = convertToInlineCss({
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #7D818A)"}`,
+  borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
+});
+export const deletedRowStyle = convertToInlineCss({
+  color: "var(--ds-text-accent-gray, #505258)",
+  textDecoration: 'line-through',
+  opacity: 0.6,
+  display: 'table-row'
+});
+export const editingStyleQuoteNode = convertToInlineCss({
   borderLeft: `2px solid ${"var(--ds-border-accent-purple, #AF59E1)"}`
 });
-const editingStyleRuleNode = convertToInlineCss({
+export const editingStyleRuleNode = convertToInlineCss({
   backgroundColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
-const editingStyleNode = convertToInlineCss({
+export const editingStyleNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-purple, #AF59E1)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"
 });
-const editingStyleCardBlockNode = convertToInlineCss({
+export const editingStyleCardBlockNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-purple, #AF59E1)"}`,
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
-const standardDecorationMarkerVariableName = convertToInlineCss({
+export const standardDecorationMarkerVariable = convertToInlineCss({
   '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)"
-});
-export const getStandardNodeStyle = nodeName => {
-  if (['mediaSingle', 'mediaGroup', 'table',
-  // Handle table separately to avoid border issues
-  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
-  // Paragraph and heading nodes do not need special styling
-  'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
-    // Layout nodes do not need special styling
-    return undefined;
-  }
-  if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
-    return standardDecorationMarkerVariableName;
-  }
-  if (nodeName === 'blockquote') {
-    return editingStyleQuoteNode;
-  }
-  if (nodeName === 'rule') {
-    return editingStyleRuleNode;
-  }
-  if (nodeName === 'blockCard') {
-    return editingStyleCardBlockNode;
-  }
-  return editingStyleNode;
-};
+});

package/dist/es2019/pm-plugins/colorSchemes/traditional.js

@@ -28,43 +28,42 @@ export const deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
-const traditionalStyleQuoteNode = convertToInlineCss({
+export const deletedTraditionalStyleQuoteNode = convertToInlineCss({
+  marginTop: "var(--ds-space-150, 12px)",
+  paddingTop: "var(--ds-space-025, 2px)",
+  paddingBottom: "var(--ds-space-025, 2px)",
+  paddingLeft: "var(--ds-space-025, 2px)",
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+export const deletedTraditionalBlockOutline = convertToInlineCss({
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+export const deletedTraditionalBlockOutlineRounded = convertToInlineCss({
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
+});
+export const deletedTraditionalRowStyle = convertToInlineCss({
+  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
+  textDecoration: 'line-through',
+  opacity: 0.6,
+  display: 'table-row'
+});
+export const traditionalStyleQuoteNode = convertToInlineCss({
   borderLeft: `2px solid ${"var(--ds-border-accent-green, #22A06B)"}`
 });
-const traditionalStyleRuleNode = convertToInlineCss({
+export const traditionalStyleRuleNode = convertToInlineCss({
   backgroundColor: "var(--ds-border-accent-green, #22A06B)"
 });
-const traditionalStyleNode = convertToInlineCss({
+export const traditionalStyleNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-green, #22A06B)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"
 });
-const traditionalStyleCardBlockNode = convertToInlineCss({
+export const traditionalStyleCardBlockNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-green, #22A06B)"}`,
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
-const traditionalDecorationMarkerVariable = convertToInlineCss({
+export const traditionalDecorationMarkerVariable = convertToInlineCss({
   '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
-});
-export const getTraditionalNodeStyle = nodeName => {
-  if (['mediaSingle', 'mediaGroup', 'table',
-  // Handle table separately to avoid border issues
-  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
-  // Paragraph and heading nodes do not need special styling
-  'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
-    // Layout nodes do not need special styling
-    return undefined;
-  }
-  if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
-    return traditionalDecorationMarkerVariable;
-  }
-  if (nodeName === 'blockquote') {
-    return traditionalStyleQuoteNode;
-  }
-  if (nodeName === 'rule') {
-    return traditionalStyleRuleNode;
-  }
-  if (nodeName === 'blockCard') {
-    return traditionalStyleCardBlockNode;
-  }
-  return traditionalStyleNode;
-};
+});

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

@@ -2,9 +2,9 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { getStandardNodeStyle, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, editingStyle, editingStyleActive, deletedContentStyleUnbounded } from './colorSchemes/standard';
-import { getTraditionalNodeStyle, deletedTraditionalContentStyle, deletedTraditionalContentStyleUnbounded, traditionalInsertStyle, traditionalInsertStyleActive } from './colorSchemes/traditional';
-import { createDeletedStyleWrapperWithoutOpacity, handleBlockNodeView } from './deletedBlocksHandler';
+import { deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, editingStyle, editingStyleActive, deletedContentStyleUnbounded, standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode } from './colorSchemes/standard';
+import { deletedTraditionalContentStyle, deletedTraditionalContentStyleUnbounded, traditionalInsertStyle, traditionalInsertStyleActive, traditionalDecorationMarkerVariable, traditionalStyleQuoteNode, traditionalStyleRuleNode, traditionalStyleCardBlockNode, traditionalStyleNode } from './colorSchemes/traditional';
+import { handleBlockNodeView } from './deletedBlocksHandler';
 import { handleDeletedRows } from './deletedRowsHandler';
 import { findSafeInsertPos } from './findSafeInsertPos';
 /**
@@ -13,7 +13,11 @@ import { findSafeInsertPos } from './findSafeInsertPos';
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export const createInlineChangedDecoration = (change, colorScheme, isActive = false) => {
+export const createInlineChangedDecoration = ({
+  change,
+  colorScheme,
+  isActive = false
+}) => {
   let style;
   if (colorScheme === 'traditional') {
     style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
@@ -45,8 +49,38 @@ const getNodeClass = name => {
       return undefined;
   }
 };
-const getBlockNodeStyle = (name, colorScheme) => {
-  return colorScheme === 'traditional' ? getTraditionalNodeStyle(name) : getStandardNodeStyle(name);
+const getBlockNodeStyle = (nodeName, colorScheme) => {
+  const isTraditional = colorScheme === 'traditional';
+  if (['mediaSingle', 'mediaGroup', 'table',
+  // Handle table separately to avoid border issues
+  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
+  // Paragraph and heading nodes do not need special styling
+  'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
+    // Layout nodes do not need special styling
+    return undefined;
+  }
+  if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
+    return isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
+  }
+  if (nodeName === 'blockquote') {
+    return isTraditional ? traditionalStyleQuoteNode : editingStyleQuoteNode;
+  }
+  if (nodeName === 'rule') {
+    return isTraditional ? traditionalStyleRuleNode : editingStyleRuleNode;
+  }
+  if (nodeName === 'blockCard') {
+    return isTraditional ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
+  }
+  return isTraditional ? traditionalStyleNode : editingStyleNode;
+};
+
+/**
+ * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
+ */
+const createDeletedStyleWrapperWithoutOpacity = (colorScheme, isActive) => {
+  const wrapper = document.createElement('span');
+  wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
+  return wrapper;
 };
 
 /**
@@ -55,7 +89,10 @@ const getBlockNodeStyle = (name, colorScheme) => {
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export const createBlockChangedDecoration = (change, colorScheme) => {
+export const createBlockChangedDecoration = ({
+  change,
+  colorScheme
+}) => {
   if (fg('platform_editor_show_diff_scroll_navigation')) {
     const style = getBlockNodeStyle(change.name, colorScheme);
     const className = getNodeClass(change.name);
@@ -115,7 +152,13 @@ export const createDeletedContentDecoration = ({
     }
     const {
       decorations
-    } = handleDeletedRows([change], doc, newDoc, nodeViewSerializer, colorScheme);
+    } = handleDeletedRows({
+      changes: [change],
+      originalDoc: doc,
+      newDoc,
+      nodeViewSerializer,
+      colorScheme
+    });
     return decorations;
   }
   const serializer = nodeViewSerializer;

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

@@ -1,42 +1,9 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { deletedStyleQuoteNode, deletedStyleQuoteNodeWithLozenge, deletedBlockOutline, deletedBlockOutlineRounded } from './colorSchemes/standard';
+import { deletedTraditionalStyleQuoteNode, deletedTraditionalBlockOutline, deletedTraditionalBlockOutlineRounded } from './colorSchemes/traditional';
 import { getDeletedContentStyle } from './decorations';
-export const deletedStyleQuoteNode = convertToInlineCss({
-  borderLeft: `2px solid ${"var(--ds-border-accent-gray, #7D818A)"}`
-});
-export const deletedStyleQuoteNodeWithLozenge = convertToInlineCss({
-  marginTop: "var(--ds-space-150, 12px)",
-  paddingTop: "var(--ds-space-025, 2px)",
-  paddingBottom: "var(--ds-space-025, 2px)",
-  paddingLeft: "var(--ds-space-025, 2px)",
-  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #7D818A)"}`,
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-export const deletedTraditionalStyleQuoteNode = convertToInlineCss({
-  marginTop: "var(--ds-space-150, 12px)",
-  paddingTop: "var(--ds-space-025, 2px)",
-  paddingBottom: "var(--ds-space-025, 2px)",
-  paddingLeft: "var(--ds-space-025, 2px)",
-  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-export const deletedBlockOutline = convertToInlineCss({
-  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #7D818A)"}`,
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-export const deletedTraditionalBlockOutline = convertToInlineCss({
-  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-export const deletedBlockOutlineRounded = convertToInlineCss({
-  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #7D818A)"}`,
-  borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
-});
-export const deletedTraditionalBlockOutlineRounded = convertToInlineCss({
-  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
-  borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
-});
 const lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -68,7 +35,7 @@ export const getDeletedStyleNode = (nodeName, colorScheme) => {
       return undefined;
   }
 };
-export const shouldShowRemovedLozenge = nodeName => {
+const shouldShowRemovedLozenge = nodeName => {
   switch (nodeName) {
     case 'expand':
     case 'codeBlock':
@@ -83,7 +50,7 @@ export const shouldShowRemovedLozenge = nodeName => {
       return false;
   }
 };
-export const shouldAddShowDiffDeletedNodeClass = nodeName => {
+const shouldAddShowDiffDeletedNodeClass = nodeName => {
   switch (nodeName) {
     case 'mediaSingle':
     case 'embedCard':
@@ -99,14 +66,14 @@ export const shouldAddShowDiffDeletedNodeClass = nodeName => {
  * Checks if a node should apply deleted styles directly without wrapper
  * to preserve natural block-level margins
  */
-export const shouldApplyDeletedStylesDirectly = nodeName => {
+const shouldApplyDeletedStylesDirectly = nodeName => {
   return nodeName === 'heading' || nodeName === 'blockquote' && !fg('platform_editor_ai_aifc_patch_ga_blockers');
 };
 
 /**
  * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
  */
-export const createRemovedLozenge = (intl, nodeName) => {
+const createRemovedLozenge = (intl, nodeName) => {
   const container = document.createElement('span');
   let borderTopRightRadius;
   if (['expand', 'decisionList'].includes(nodeName || '')) {
@@ -140,7 +107,7 @@ export const createRemovedLozenge = (intl, nodeName) => {
 /**
  * Wraps a block node in a container with relative positioning to support absolute positioned lozenge
  */
-export const createBlockNodeWrapper = () => {
+const createBlockNodeWrapper = () => {
   const wrapper = document.createElement('div');
   const baseStyle = convertToInlineCss({
     position: 'relative',
@@ -151,19 +118,10 @@ export const createBlockNodeWrapper = () => {
   return wrapper;
 };
 
-/**
- * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
- */
-export const createDeletedStyleWrapperWithoutOpacity = (colorScheme, isActive) => {
-  const wrapper = document.createElement('span');
-  wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
-  return wrapper;
-};
-
 /**
  * Applies deleted styles directly to an HTML element by merging with existing styles
  */
-export const applyDeletedStylesToElement = (element, targetNode, colorScheme) => {
+const applyDeletedStylesToElement = (element, targetNode, colorScheme) => {
   const currentStyle = element.getAttribute('style') || '';
   const deletedContentStyle = getDeletedContentStyle(colorScheme);
   const nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colorScheme) || '';
@@ -173,7 +131,7 @@ export const applyDeletedStylesToElement = (element, targetNode, colorScheme) =>
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-export const createBlockNodeContentWrapper = (nodeView, targetNode, colorScheme) => {
+const createBlockNodeContentWrapper = (nodeView, targetNode, colorScheme) => {
   const contentWrapper = document.createElement('div');
   const nodeStyle = getDeletedStyleNode(targetNode.type.name, colorScheme);
   contentWrapper.setAttribute('style', `${getDeletedContentStyle(colorScheme)}${nodeStyle || ''}`);
@@ -187,7 +145,7 @@ export const createBlockNodeContentWrapper = (nodeView, targetNode, colorScheme)
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-export const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge, colorScheme) => {
+const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge, colorScheme) => {
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -248,7 +206,7 @@ export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge,
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-export const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colorScheme, intl) => {
+const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colorScheme, intl) => {
   const blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name)) {
     const lozenge = createRemovedLozenge(intl);

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

@@ -1,21 +1,10 @@
-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 { deletedRowStyle } from './colorSchemes/standard';
+import { deletedTraditionalRowStyle } from './colorSchemes/traditional';
 import { findSafeInsertPos } from './findSafeInsertPos';
-const deletedRowStyle = convertToInlineCss({
-  color: "var(--ds-text-accent-gray, #505258)",
-  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
  */
@@ -169,7 +158,13 @@ export const createDeletedRowsDecorations = ({
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-export const handleDeletedRows = (changes, originalDoc, newDoc, nodeViewSerializer, colorScheme) => {
+export const handleDeletedRows = ({
+  changes,
+  originalDoc,
+  newDoc,
+  nodeViewSerializer,
+  colorScheme
+}) => {
   // First, expand the changes to include complete deleted rows
   const deletedRows = expandDiffForDeletedRows(changes.filter(change => change.deleted.length > 0), originalDoc, newDoc);
   const allDecorations = createDeletedRowsDecorations({

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

@@ -16,16 +16,23 @@ import { getAttrChangeRanges, stepIsValidAttrChange } from './attributeDecoratio
 import { createInlineChangedDecoration, createDeletedContentDecoration, createBlockChangedDecoration } from './decorations';
 import { getMarkChangeRanges } from './markDecorations';
 import { simplifySteps } from './simplifyChanges';
-var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(doc, from, to, colorScheme) {
+var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(_ref) {
+  var doc = _ref.doc,
+    from = _ref.from,
+    to = _ref.to,
+    colorScheme = _ref.colorScheme;
   var decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, function (node, pos) {
     if (node.isBlock) {
       var decoration = createBlockChangedDecoration({
-        from: pos,
-        to: pos + node.nodeSize,
-        name: node.type.name
-      }, colorScheme);
+        change: {
+          from: pos,
+          to: pos + node.nodeSize,
+          name: node.type.name
+        },
+        colorScheme: colorScheme
+      });
       if (decoration) {
         decorations.push(decoration);
       }
@@ -66,13 +73,13 @@ function optimizeChanges(changes) {
   optimized.push(current);
   return optimized;
 }
-var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref) {
-  var state = _ref.state,
-    pluginState = _ref.pluginState,
-    nodeViewSerializer = _ref.nodeViewSerializer,
-    colorScheme = _ref.colorScheme,
-    intl = _ref.intl,
-    activeIndexPos = _ref.activeIndexPos;
+var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2) {
+  var state = _ref2.state,
+    pluginState = _ref2.pluginState,
+    nodeViewSerializer = _ref2.nodeViewSerializer,
+    colorScheme = _ref2.colorScheme,
+    intl = _ref2.intl,
+    activeIndexPos = _ref2.activeIndexPos;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -115,8 +122,17 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   optimizedChanges.forEach(function (change) {
     var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
     if (change.inserted.length > 0) {
-      decorations.push(createInlineChangedDecoration(change, colorScheme, isActive));
-      decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme)));
+      decorations.push(createInlineChangedDecoration({
+        change: change,
+        colorScheme: colorScheme,
+        isActive: isActive
+      }));
+      decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration({
+        doc: tr.doc,
+        from: change.fromB,
+        to: change.toB,
+        colorScheme: colorScheme
+      })));
     }
     if (change.deleted.length > 0) {
       var _isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
@@ -136,31 +152,40 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   });
   getMarkChangeRanges(steps).forEach(function (change) {
     var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
-    decorations.push(createInlineChangedDecoration(change, colorScheme, isActive));
+    decorations.push(createInlineChangedDecoration({
+      change: change,
+      colorScheme: colorScheme,
+      isActive: isActive
+    }));
   });
   getAttrChangeRanges(tr.doc, attrSteps).forEach(function (change) {
-    decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme)));
+    decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration({
+      doc: tr.doc,
+      from: change.fromB,
+      to: change.toB,
+      colorScheme: colorScheme
+    })));
   });
   return DecorationSet.empty.add(tr.doc, decorations);
 };
 export var calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner,
 // Cache results unless relevant inputs change
-function (_ref2, _ref3) {
-  var _ref6;
-  var _ref4 = _slicedToArray(_ref2, 1),
-    _ref4$ = _ref4[0],
-    pluginState = _ref4$.pluginState,
-    state = _ref4$.state,
-    colorScheme = _ref4$.colorScheme,
-    intl = _ref4$.intl,
-    activeIndexPos = _ref4$.activeIndexPos;
+function (_ref3, _ref4) {
+  var _ref7;
   var _ref5 = _slicedToArray(_ref3, 1),
     _ref5$ = _ref5[0],
-    lastPluginState = _ref5$.pluginState,
-    lastState = _ref5$.state,
-    lastColorScheme = _ref5$.colorScheme,
-    lastIntl = _ref5$.intl,
-    lastActiveIndexPos = _ref5$.activeIndexPos;
+    pluginState = _ref5$.pluginState,
+    state = _ref5$.state,
+    colorScheme = _ref5$.colorScheme,
+    intl = _ref5$.intl,
+    activeIndexPos = _ref5$.activeIndexPos;
+  var _ref6 = _slicedToArray(_ref4, 1),
+    _ref6$ = _ref6[0],
+    lastPluginState = _ref6$.pluginState,
+    lastState = _ref6$.state,
+    lastColorScheme = _ref6$.colorScheme,
+    lastIntl = _ref6$.intl,
+    lastActiveIndexPos = _ref6$.activeIndexPos;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
-  return (_ref6 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref6 !== void 0 ? _ref6 : false;
+  return (_ref7 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref7 !== void 0 ? _ref7 : false;
 });