@atlaskit/editor-plugin-show-diff 17.1.5 → 17.1.6

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

@@ -171,6 +171,7 @@ const calculateNodesForBlockDecoration = ({
   to,
   colorScheme,
   isInserted = true,
+  leftAnchorId,
   activeIndexPos,
   shouldHideDeleted = false,
   showContributorTags = false,
@@ -203,6 +204,7 @@ const calculateNodesForBlockDecoration = ({
         },
         colorScheme,
         isInserted,
+        leftAnchorId,
         isActive,
         shouldHideDeleted,
         showContributorTags,
@@ -239,6 +241,7 @@ const calculateNodesForBlockDecoration = ({
         },
         colorScheme,
         isInserted,
+        leftAnchorId,
         isActive,
         shouldHideDeleted,
         showContributorTags,
@@ -498,6 +501,10 @@ const calculateDiffDecorationsInner = ({
   const tableChanges = changes.filter(change => change.deletedColumns !== undefined);
   const isHandledByTable = (from, to) => tableChanges.some(change => from >= change.fromB && to <= change.toB);
   const createDecorationsForChange = change => {
+    // Patch 2 makes all decorations generated for one replacement share this anchor. Their own
+    // IDs still identify their top/bottom bounds, while this ID makes their bars agree on one
+    // left edge. When the gate is off, factories retain their existing per-decoration anchors.
+    const leftAnchorId = fg('platform_editor_ai_show_diff_patch_2') ? `replacement-${change.fromA}-${change.toA}-${change.fromB}-${change.toB}` : undefined;
     const changeColorScheme = attributionColors ? getColorSchemeForChange(change, attributedChanges, attributionColors, colorScheme) : colorScheme;
     const attributionKey = showContributorTags ? getAttributionKeyForChange(change, attributedChanges) : undefined;
     const isActive = isRangeActive(activeIndexPos, change.fromB, change.toB);
@@ -615,6 +622,7 @@ const calculateDiffDecorationsInner = ({
               fromB: from,
               toB: to
             },
+            leftAnchorId,
             doc: tr.doc,
             colorScheme: changeColorScheme,
             isActive,
@@ -636,6 +644,7 @@ const calculateDiffDecorationsInner = ({
         decorations.push(...createInlineChangedDecoration({
           attributionKey,
           change,
+          leftAnchorId,
           doc: tr.doc,
           colorScheme: changeColorScheme,
           isActive,
@@ -671,7 +680,8 @@ const calculateDiffDecorationsInner = ({
         activeIndexPos,
         intl,
         diffType,
-        coarseTableCellsOnly: useCoarseTableDecoration
+        coarseTableCellsOnly: useCoarseTableDecoration,
+        leftAnchorId
       }));
     }
     if (change.deleted.length > 0 && !isMarkOnly && !hasNoDeletedContent) {
@@ -696,6 +706,7 @@ const calculateDiffDecorationsInner = ({
           newDoc: tr.doc,
           intl,
           activeIndexPos,
+          leftAnchorId,
           showContributorTags,
           tagMountContext,
           ...(isExtendedEnabled(diffType) && {

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

@@ -27,23 +27,23 @@ const resolveDocLevelNode = (doc, from) => {
     beforePos: nodeStart - 1
   };
 };
-
 /**
  * Handles edge cases for block nodes whose inline content can exceed the doc
  * margin (tables, layouts, expands). Returns the position whose DOM should be
  * measured to size the left anchor, or `undefined` when the diff is not inside
  * such a node.
  */
-const edgeCases = (doc, from) => {
+const edgeCases = (doc, from, nodeOverride) => {
   const resolved = resolveDocLevelNode(doc, from);
   if (!resolved) {
     return undefined;
   }
   const {
-    node,
+    node: resolvedNode,
     nodeStart,
     beforePos
   } = resolved;
+  const node = fg('platform_editor_ai_show_diff_patch_2') ? nodeOverride !== null && nodeOverride !== void 0 ? nodeOverride : resolvedNode : resolvedNode;
   if (node.type.name === 'layoutSection' && fg('platform_editor_ai_show_diff_patch_1')) {
     // Columns extend past the node-view wrapper via negative margins (12px or 20px).
     // Measure their container so the indicator stays outside the diff outline, including
@@ -109,6 +109,44 @@ const edgeCases = (doc, from) => {
       return undefined;
   }
 };
+const getEdgeCasesForSlice = (doc, from, slice, measureElement) => {
+  var _targets$find;
+  const resolved = resolveDocLevelNode(doc, from);
+  if (!resolved) {
+    return [];
+  }
+  const targets = [];
+  // edge cases can only be top level nodes, so we only care about the top level nodes in the slice
+  slice.content.forEach((node, offset) => {
+    const edgeCase = edgeCases(doc, from + offset, node);
+    if (edgeCase) {
+      targets.push({
+        ...edgeCase,
+        measureElement
+      });
+    }
+  });
+  return targets.length > 0 ? [{
+    beforePos: resolved.beforePos,
+    leftOffset: (_targets$find = targets.find(target => target.leftOffset !== undefined)) === null || _targets$find === void 0 ? void 0 : _targets$find.leftOffset,
+    widthMeasureTargets: targets
+  }] : [];
+};
+
+/**
+ * Finds the edge cases in the current document for either a whole range or one position.
+ * A missing `to` intentionally means the single-position lookup is the fallback.
+ */
+const getEdgeCasesForDocument = (doc, from, to) => {
+  if (to !== undefined) {
+    const edgeCasesForSlice = getEdgeCasesForSlice(doc, from, doc.slice(from, to));
+    if (edgeCasesForSlice.length > 0) {
+      return edgeCasesForSlice;
+    }
+  }
+  const edgeCase = edgeCases(doc, from);
+  return edgeCase ? [edgeCase] : [];
+};
 
 /**
  * Create a widget that marks the start of the doc margin.
@@ -141,9 +179,22 @@ export const createDocMarginAnchorWidget = () => {
 export const createLeftAnchorWidget = ({
   doc,
   from,
-  diffId
+  to,
+  diffId,
+  leftAnchorId,
+  measureElement,
+  sliceOverride,
+  underlyingRange
 }) => {
-  const edgeCase = edgeCases(doc, from);
+  var _range$from;
+  const overrideEdgeCases = sliceOverride ? getEdgeCasesForSlice(doc, from, sliceOverride, measureElement) : [];
+  const range = underlyingRange !== null && underlyingRange !== void 0 ? underlyingRange : to !== undefined ? {
+    from,
+    to
+  } : undefined;
+  const documentEdgeCases = getEdgeCasesForDocument(doc, (_range$from = range === null || range === void 0 ? void 0 : range.from) !== null && _range$from !== void 0 ? _range$from : from, range === null || range === void 0 ? void 0 : range.to);
+  const allEdgeCases = [...overrideEdgeCases, ...documentEdgeCases];
+  const edgeCase = fg('platform_editor_ai_show_diff_patch_2') ? allEdgeCases[0] : edgeCases(doc, from);
   if (edgeCase === undefined) {
     return undefined;
   }
@@ -154,7 +205,7 @@ export const createLeftAnchorWidget = ({
     beforePos
   } = edgeCase;
   const leftAnchorKey = buildAnchorDecorationKey({
-    diffId,
+    diffId: leftAnchorId !== null && leftAnchorId !== void 0 ? leftAnchorId : diffId,
     anchorType: AnchorTypeKey.left
   });
   let leftResizeObserver;
@@ -174,6 +225,69 @@ export const createLeftAnchorWidget = ({
     wrapper.appendChild(anchor);
     const measureWidth = () => {
       var _nodeDOM$querySelecto;
+      if (fg('platform_editor_ai_show_diff_patch_2')) {
+        const widthMeasureTargets = allEdgeCases.flatMap(target => {
+          var _target$widthMeasureT;
+          return (_target$widthMeasureT = target.widthMeasureTargets) !== null && _target$widthMeasureT !== void 0 ? _target$widthMeasureT : [target];
+        });
+        if (getPos() === undefined || widthMeasureTargets.length === 0) {
+          return;
+        }
+        const measuredElements = widthMeasureTargets.flatMap(({
+          measureElement: targetMeasureElement,
+          measureLeft,
+          measurePos,
+          measureSelector
+        }) => {
+          if (measurePos === undefined) {
+            return [];
+          }
+          const nodeDOM = targetMeasureElement !== null && targetMeasureElement !== void 0 ? targetMeasureElement : view.nodeDOM(measurePos);
+          const elements = nodeDOM instanceof HTMLElement ? measureSelector ? Array.from(nodeDOM.querySelectorAll(measureSelector)) : [nodeDOM] : [];
+          return elements.map(element => ({
+            element,
+            measureLeft
+          }));
+        });
+
+        // A single diff can include multiple edge-case nodes, so measure the widest one.
+        let widest;
+        for (const target of measuredElements) {
+          if (!widest || target.element.offsetWidth > widest.element.offsetWidth) {
+            widest = target;
+          }
+        }
+        if (widest) {
+          const updateAnchor = () => {
+            if (getPos() === undefined) {
+              return;
+            }
+            if (widest.measureLeft) {
+              const left = widest.element.getBoundingClientRect().left - wrapper.getBoundingClientRect().left;
+              anchor.style.setProperty('left', `${left}px`);
+              anchor.style.setProperty('transform', 'none');
+            }
+            anchor.style.setProperty('width', `${widest.element.offsetWidth}px`);
+          };
+          updateAnchor();
+
+          // Observe the measured elements for size changes (e.g. page
+          // resize) so the indicator stays aligned.
+          if (!leftResizeObserver) {
+            leftResizeObserver = new ResizeObserver(measureWidth);
+            measuredElements.forEach(({
+              element
+            }) => {
+              var _leftResizeObserver;
+              return (_leftResizeObserver = leftResizeObserver) === null || _leftResizeObserver === void 0 ? void 0 : _leftResizeObserver.observe(element);
+            });
+            if (widest.measureLeft) {
+              leftResizeObserver.observe(wrapper);
+            }
+          }
+        }
+        return;
+      }
       if (getPos() === undefined || edgeCase.measurePos === undefined) {
         return;
       }
@@ -217,8 +331,8 @@ export const createLeftAnchorWidget = ({
       side: -999
     }),
     destroy: () => {
-      var _leftResizeObserver;
-      return (_leftResizeObserver = leftResizeObserver) === null || _leftResizeObserver === void 0 ? void 0 : _leftResizeObserver.disconnect();
+      var _leftResizeObserver2;
+      return (_leftResizeObserver2 = leftResizeObserver) === null || _leftResizeObserver2 === void 0 ? void 0 : _leftResizeObserver2.disconnect();
     }
   });
 };
@@ -238,13 +352,15 @@ export const createBlockIndicatorAnchorWidgets = ({
   doc,
   from,
   to,
-  diffId
+  diffId,
+  leftAnchorId
 }) => {
   var _ref, _parentTable$pos;
   const leftAnchor = createLeftAnchorWidget({
     doc,
     from,
-    diffId
+    diffId,
+    leftAnchorId
   });
   const maybeLeftAnchor = leftAnchor ? [leftAnchor] : [];
 
@@ -399,12 +515,15 @@ export const createInlineIndicatorAnchorWidgets = ({
   doc,
   from,
   to,
-  diffId
+  diffId,
+  leftAnchorId
 }) => {
   const leftAnchor = createLeftAnchorWidget({
     doc,
     from,
-    diffId
+    to: fg('platform_editor_ai_show_diff_patch_2') ? to : undefined,
+    diffId,
+    leftAnchorId
   });
   const maybeLeftAnchor = leftAnchor ? [leftAnchor] : [];
 

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

@@ -168,6 +168,7 @@ export const createBlockChangedDecoration = ({
   colorScheme,
   isInserted = true,
   isActive = false,
+  leftAnchorId,
   shouldHideDeleted = false,
   showContributorTags = false,
   showIndicators = false,
@@ -196,6 +197,7 @@ export const createBlockChangedDecoration = ({
       colorScheme,
       decorationType: 'block',
       diffId,
+      leftAnchorId,
       isActive,
       isInserted,
       nodeName: change.name,
@@ -254,6 +256,7 @@ export const createBlockChangedDecoration = ({
       colorScheme,
       decorationType: 'block',
       diffId,
+      leftAnchorId,
       isActive,
       isInserted,
       nodeName: change.name,
@@ -270,7 +273,8 @@ export const createBlockChangedDecoration = ({
       doc,
       from: change.from,
       to: change.to,
-      diffId
+      diffId,
+      leftAnchorId
     }));
   }
 

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

@@ -279,6 +279,7 @@ export const createChangedRowDecorationWidgets = ({
   colorScheme,
   isActive,
   isInserted = false,
+  leftAnchorId,
   diffType,
   intl,
   showIndicators = false,
@@ -330,7 +331,8 @@ export const createChangedRowDecorationWidgets = ({
       const leftAnchor = createLeftAnchorWidget({
         doc: newDoc,
         from: safeInsertPos,
-        diffId
+        diffId,
+        leftAnchorId
       });
       if (leftAnchor) {
         decorations.push(leftAnchor);
@@ -371,6 +373,7 @@ export const createChangedRowDecorationWidgets = ({
         colorScheme,
         decorationType: 'widget',
         diffId,
+        leftAnchorId,
         isActive,
         isInserted,
         diffType

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

@@ -126,6 +126,7 @@ export const createInlineChangedDecoration = ({
   colorScheme,
   isActive = false,
   isInserted = true,
+  leftAnchorId,
   isAtomicInlineNode = false,
   shouldHideDeleted = false,
   showContributorTags = false,
@@ -157,6 +158,7 @@ export const createInlineChangedDecoration = ({
       colorScheme,
       decorationType: 'inline',
       diffId,
+      leftAnchorId,
       isActive,
       isInserted
     }))];
@@ -227,6 +229,7 @@ export const createInlineChangedDecoration = ({
     colorScheme,
     decorationType: 'inline',
     diffId,
+    leftAnchorId,
     isActive,
     isInserted
   }))];
@@ -262,7 +265,8 @@ export const createInlineChangedDecoration = ({
       doc,
       from: anchorFrom,
       to: anchorTo,
-      diffId
+      diffId,
+      leftAnchorId
     }));
   }
 

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

@@ -29,6 +29,7 @@ const createTableCellContentWidgets = ({
   nodeViewSerializer,
   colorScheme,
   isInserted,
+  leftAnchorId,
   diffType
 }) => {
   // Collect the inner content position of each cell in the new document within
@@ -87,6 +88,7 @@ const createTableCellContentWidgets = ({
         colorScheme,
         decorationType: 'widget',
         diffId: crypto.randomUUID(),
+        leftAnchorId,
         isInserted,
         diffType,
         ...(isExtendedEnabled(diffType) && {
@@ -113,6 +115,7 @@ export const createNodeChangedDecorationWidget = ({
   activeIndexPos,
   // This is false by default as this is generally used to show deleted content
   isInserted = false,
+  leftAnchorId,
   showContributorTags = false,
   showIndicators = false,
   // When true, render the deleted content *after* (below) the new content instead of
@@ -177,6 +180,7 @@ export const createNodeChangedDecorationWidget = ({
       nodeViewSerializer,
       colorScheme,
       isInserted,
+      leftAnchorId,
       diffType
     });
   }
@@ -193,6 +197,7 @@ export const createNodeChangedDecorationWidget = ({
       colorScheme,
       isActive,
       isInserted,
+      leftAnchorId,
       diffType,
       intl,
       // Needed for the row's own indicator anchor; this path returns before the
@@ -485,7 +490,14 @@ export const createNodeChangedDecorationWidget = ({
     const leftAnchor = createLeftAnchorWidget({
       doc: newDoc,
       from: safeInsertPos,
-      diffId
+      diffId,
+      leftAnchorId,
+      measureElement: fg('platform_editor_ai_show_diff_patch_2') ? dom : undefined,
+      sliceOverride: fg('platform_editor_ai_show_diff_patch_2') ? slice : undefined,
+      underlyingRange: fg('platform_editor_ai_show_diff_patch_2') ? {
+        from: change.fromB,
+        to: change.toB
+      } : undefined
     });
     if (leftAnchor) {
       decorations.push(leftAnchor);
@@ -497,6 +509,7 @@ export const createNodeChangedDecorationWidget = ({
       colorScheme,
       decorationType: 'widget',
       diffId,
+      leftAnchorId,
       isActive,
       isInserted,
       diffType,

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

@@ -73,6 +73,7 @@ export const buildDiffDecorationSpec = ({
   diffId,
   isActive,
   isInserted,
+  leftAnchorId,
   nodeName,
   side,
   diffType
@@ -96,6 +97,9 @@ export const buildDiffDecorationSpec = ({
   ...(isInserted !== undefined ? {
     isInserted
   } : {}),
+  ...(leftAnchorId ? {
+    leftAnchorId
+  } : {}),
   ...(colorScheme ? {
     colorScheme
   } : {}),
@@ -154,6 +158,9 @@ export const extractDiffDescriptors = decorations => decorations.find(undefined,
       colorScheme: spec.colorScheme
     } : {}),
     id: spec.diffId,
+    ...(spec.leftAnchorId ? {
+      leftAnchorId: spec.leftAnchorId
+    } : {}),
     ...(spec.isInserted !== undefined ? {
       isInserted: spec.isInserted
     } : {}),

package/dist/es2019/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -5,6 +5,8 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { buildAnchorDecorationKey, AnchorTypeKey } from '../../pm-plugins/decorations/decorationKeys';
 import { IndicatorBar } from './IndicatorBar';
 const renderIndicatorBar = descriptor => {
+  var _descriptor$leftAncho;
+  const leftAnchorId = (_descriptor$leftAncho = descriptor.leftAnchorId) !== null && _descriptor$leftAncho !== void 0 ? _descriptor$leftAncho : descriptor.id;
   switch (descriptor.type) {
     case 'inline':
       {
@@ -21,7 +23,7 @@ const renderIndicatorBar = descriptor => {
             anchorType: AnchorTypeKey.to
           }),
           anchorLeft: buildAnchorDecorationKey({
-            diffId: descriptor.id,
+            diffId: leftAnchorId,
             anchorType: AnchorTypeKey.left
           })
         });
@@ -41,7 +43,7 @@ const renderIndicatorBar = descriptor => {
           anchorTop: blockAnchor,
           anchorBottom: blockAnchor,
           anchorLeft: buildAnchorDecorationKey({
-            diffId: descriptor.id,
+            diffId: leftAnchorId,
             anchorType: AnchorTypeKey.left
           })
         });
@@ -59,7 +61,7 @@ const renderIndicatorBar = descriptor => {
             diffId: descriptor.id
           }),
           anchorLeft: buildAnchorDecorationKey({
-            diffId: descriptor.id,
+            diffId: leftAnchorId,
             anchorType: AnchorTypeKey.left
           }),
           anchorLeftFallback: buildAnchorDecorationKey({

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

@@ -185,6 +185,7 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
     colorScheme = _ref5.colorScheme,
     _ref5$isInserted = _ref5.isInserted,
     isInserted = _ref5$isInserted === void 0 ? true : _ref5$isInserted,
+    leftAnchorId = _ref5.leftAnchorId,
     activeIndexPos = _ref5.activeIndexPos,
     _ref5$shouldHideDelet = _ref5.shouldHideDeleted,
     shouldHideDeleted = _ref5$shouldHideDelet === void 0 ? false : _ref5$shouldHideDelet,
@@ -223,6 +224,7 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
           },
           colorScheme: colorScheme,
           isInserted: isInserted,
+          leftAnchorId: leftAnchorId,
           isActive: isActive,
           shouldHideDeleted: shouldHideDeleted,
           showContributorTags: showContributorTags,
@@ -264,6 +266,7 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
         },
         colorScheme: colorScheme,
         isInserted: isInserted,
+        leftAnchorId: leftAnchorId,
         isActive: _isActive,
         shouldHideDeleted: shouldHideDeleted,
         showContributorTags: showContributorTags,
@@ -546,6 +549,10 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
     });
   };
   var createDecorationsForChange = function createDecorationsForChange(change) {
+    // Patch 2 makes all decorations generated for one replacement share this anchor. Their own
+    // IDs still identify their top/bottom bounds, while this ID makes their bars agree on one
+    // left edge. When the gate is off, factories retain their existing per-decoration anchors.
+    var leftAnchorId = fg('platform_editor_ai_show_diff_patch_2') ? "replacement-".concat(change.fromA, "-").concat(change.toA, "-").concat(change.fromB, "-").concat(change.toB) : undefined;
     var changeColorScheme = attributionColors ? getColorSchemeForChange(change, attributedChanges, attributionColors, colorScheme) : colorScheme;
     var attributionKey = showContributorTags ? getAttributionKeyForChange(change, attributedChanges) : undefined;
     var isActive = isRangeActive(activeIndexPos, change.fromB, change.toB);
@@ -678,6 +685,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
                 fromB: from,
                 toB: to
               },
+              leftAnchorId: leftAnchorId,
               doc: tr.doc,
               colorScheme: changeColorScheme,
               isActive: isActive,
@@ -703,6 +711,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
         decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration(_objectSpread({
           attributionKey: attributionKey,
           change: change,
+          leftAnchorId: leftAnchorId,
           doc: tr.doc,
           colorScheme: changeColorScheme,
           isActive: isActive,
@@ -737,7 +746,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
         activeIndexPos: activeIndexPos,
         intl: intl,
         diffType: diffType,
-        coarseTableCellsOnly: useCoarseTableDecoration
+        coarseTableCellsOnly: useCoarseTableDecoration,
+        leftAnchorId: leftAnchorId
       }))));
     }
     if (change.deleted.length > 0 && !isMarkOnly && !hasNoDeletedContent) {
@@ -762,6 +772,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
           newDoc: tr.doc,
           intl: intl,
           activeIndexPos: activeIndexPos,
+          leftAnchorId: leftAnchorId,
           showContributorTags: showContributorTags,
           tagMountContext: tagMountContext
         }, isExtendedEnabled(diffType) && {