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

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

@@ -1,4 +1,8 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
@@ -30,21 +34,21 @@ var resolveDocLevelNode = function 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.
  */
-var edgeCases = function edgeCases(doc, from) {
+var edgeCases = function edgeCases(doc, from, nodeOverride) {
   var resolved = resolveDocLevelNode(doc, from);
   if (!resolved) {
     return undefined;
   }
-  var node = resolved.node,
+  var resolvedNode = resolved.node,
     nodeStart = resolved.nodeStart,
     beforePos = resolved.beforePos;
+  var 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
@@ -112,6 +116,45 @@ var edgeCases = function edgeCases(doc, from) {
       return undefined;
   }
 };
+var getEdgeCasesForSlice = function getEdgeCasesForSlice(doc, from, slice, measureElement) {
+  var _targets$find;
+  var resolved = resolveDocLevelNode(doc, from);
+  if (!resolved) {
+    return [];
+  }
+  var targets = [];
+  // edge cases can only be top level nodes, so we only care about the top level nodes in the slice
+  slice.content.forEach(function (node, offset) {
+    var edgeCase = edgeCases(doc, from + offset, node);
+    if (edgeCase) {
+      targets.push(_objectSpread(_objectSpread({}, edgeCase), {}, {
+        measureElement: measureElement
+      }));
+    }
+  });
+  return targets.length > 0 ? [{
+    beforePos: resolved.beforePos,
+    leftOffset: (_targets$find = targets.find(function (target) {
+      return 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.
+ */
+var getEdgeCasesForDocument = function getEdgeCasesForDocument(doc, from, to) {
+  if (to !== undefined) {
+    var edgeCasesForSlice = getEdgeCasesForSlice(doc, from, doc.slice(from, to));
+    if (edgeCasesForSlice.length > 0) {
+      return edgeCasesForSlice;
+    }
+  }
+  var edgeCase = edgeCases(doc, from);
+  return edgeCase ? [edgeCase] : [];
+};
 
 /**
  * Create a widget that marks the start of the doc margin.
@@ -142,10 +185,23 @@ export var createDocMarginAnchorWidget = function createDocMarginAnchorWidget()
  * anchor positioning. Shared by inline and node (widget) diff decorations.
  */
 export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
+  var _range$from;
   var doc = _ref.doc,
     from = _ref.from,
-    diffId = _ref.diffId;
-  var edgeCase = edgeCases(doc, from);
+    to = _ref.to,
+    diffId = _ref.diffId,
+    leftAnchorId = _ref.leftAnchorId,
+    measureElement = _ref.measureElement,
+    sliceOverride = _ref.sliceOverride,
+    underlyingRange = _ref.underlyingRange;
+  var overrideEdgeCases = sliceOverride ? getEdgeCasesForSlice(doc, from, sliceOverride, measureElement) : [];
+  var range = underlyingRange !== null && underlyingRange !== void 0 ? underlyingRange : to !== undefined ? {
+    from: from,
+    to: to
+  } : undefined;
+  var 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);
+  var allEdgeCases = [].concat(_toConsumableArray(overrideEdgeCases), _toConsumableArray(documentEdgeCases));
+  var edgeCase = fg('platform_editor_ai_show_diff_patch_2') ? allEdgeCases[0] : edgeCases(doc, from);
   if (edgeCase === undefined) {
     return undefined;
   }
@@ -154,7 +210,7 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
   // resizable block container.
   var beforePos = edgeCase.beforePos;
   var leftAnchorKey = buildAnchorDecorationKey({
-    diffId: diffId,
+    diffId: leftAnchorId !== null && leftAnchorId !== void 0 ? leftAnchorId : diffId,
     anchorType: AnchorTypeKey.left
   });
   var leftResizeObserver;
@@ -172,15 +228,87 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
     anchor.style.setProperty('left', "calc(50% - ".concat((edgeCase === null || edgeCase === void 0 ? void 0 : edgeCase.leftOffset) || 0, "px)"));
     anchor.style.setProperty('transform', 'translateX(-50%)');
     wrapper.appendChild(anchor);
-    var measureWidth = function measureWidth() {
+    var _measureWidth = function measureWidth() {
       var _nodeDOM$querySelecto;
+      if (fg('platform_editor_ai_show_diff_patch_2')) {
+        var widthMeasureTargets = allEdgeCases.flatMap(function (target) {
+          var _target$widthMeasureT;
+          return (_target$widthMeasureT = target.widthMeasureTargets) !== null && _target$widthMeasureT !== void 0 ? _target$widthMeasureT : [target];
+        });
+        if (getPos() === undefined || widthMeasureTargets.length === 0) {
+          return;
+        }
+        var measuredElements = widthMeasureTargets.flatMap(function (_ref2) {
+          var targetMeasureElement = _ref2.measureElement,
+            measureLeft = _ref2.measureLeft,
+            measurePos = _ref2.measurePos,
+            measureSelector = _ref2.measureSelector;
+          if (measurePos === undefined) {
+            return [];
+          }
+          var nodeDOM = targetMeasureElement !== null && targetMeasureElement !== void 0 ? targetMeasureElement : view.nodeDOM(measurePos);
+          var elements = nodeDOM instanceof HTMLElement ? measureSelector ? Array.from(nodeDOM.querySelectorAll(measureSelector)) : [nodeDOM] : [];
+          return elements.map(function (element) {
+            return {
+              element: element,
+              measureLeft: measureLeft
+            };
+          });
+        });
+
+        // A single diff can include multiple edge-case nodes, so measure the widest one.
+        var widest;
+        var _iterator = _createForOfIteratorHelper(measuredElements),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var target = _step.value;
+            if (!widest || target.element.offsetWidth > widest.element.offsetWidth) {
+              widest = target;
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+        if (widest) {
+          var updateAnchor = function updateAnchor() {
+            if (getPos() === undefined) {
+              return;
+            }
+            if (widest.measureLeft) {
+              var left = widest.element.getBoundingClientRect().left - wrapper.getBoundingClientRect().left;
+              anchor.style.setProperty('left', "".concat(left, "px"));
+              anchor.style.setProperty('transform', 'none');
+            }
+            anchor.style.setProperty('width', "".concat(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(function (_ref3) {
+              var _leftResizeObserver;
+              var element = _ref3.element;
+              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;
       }
       var nodeDOM = view.nodeDOM(edgeCase.measurePos);
       var dom = edgeCase.measureSelector && nodeDOM instanceof HTMLElement ? (_nodeDOM$querySelecto = nodeDOM.querySelector(edgeCase.measureSelector)) !== null && _nodeDOM$querySelecto !== void 0 ? _nodeDOM$querySelecto : nodeDOM : nodeDOM;
       if (dom instanceof HTMLElement) {
-        var updateAnchor = function updateAnchor() {
+        var _updateAnchor = function _updateAnchor() {
           if (getPos() === undefined) {
             return;
           }
@@ -192,12 +320,12 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
           anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
         };
         // Align against the block's horizontal extent.
-        updateAnchor();
+        _updateAnchor();
 
         // Observe the measured element for size changes (e.g. page
         // resize) so the indicator stays aligned. CCI-17981
         if (!leftResizeObserver) {
-          leftResizeObserver = new ResizeObserver(updateAnchor);
+          leftResizeObserver = new ResizeObserver(_updateAnchor);
           leftResizeObserver.observe(dom);
           if (edgeCase.measureLeft) {
             leftResizeObserver.observe(wrapper);
@@ -208,7 +336,7 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
 
     // The block DOM may not be settled synchronously (e.g. after a
     // transaction), so defer the measurement like the gap cursor does.
-    requestAnimationFrame(measureWidth);
+    requestAnimationFrame(_measureWidth);
     return wrapper;
   }, _objectSpread(_objectSpread({}, buildAnchorDecorationSpec({
     diffId: diffId,
@@ -216,8 +344,8 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
     side: -999
   })), {}, {
     destroy: function 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();
     }
   }));
 };
@@ -233,16 +361,18 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
  *   layout, expand) so the bar aligns within the container boundary.
  *
  */
-export var createBlockIndicatorAnchorWidgets = function createBlockIndicatorAnchorWidgets(_ref2) {
-  var _ref3, _parentTable$pos;
-  var doc = _ref2.doc,
-    from = _ref2.from,
-    to = _ref2.to,
-    diffId = _ref2.diffId;
+export var createBlockIndicatorAnchorWidgets = function createBlockIndicatorAnchorWidgets(_ref4) {
+  var _ref5, _parentTable$pos;
+  var doc = _ref4.doc,
+    from = _ref4.from,
+    to = _ref4.to,
+    diffId = _ref4.diffId,
+    leftAnchorId = _ref4.leftAnchorId;
   var leftAnchor = createLeftAnchorWidget({
     doc: doc,
     from: from,
-    diffId: diffId
+    diffId: diffId,
+    leftAnchorId: leftAnchorId
   });
   var maybeLeftAnchor = leftAnchor ? [leftAnchor] : [];
 
@@ -281,7 +411,7 @@ export var createBlockIndicatorAnchorWidgets = function createBlockIndicatorAnch
   // bounding box or positioning context, so measuring its top produces an offset from the
   // viewport origin and displaces the indicator into content below the editor. Keep the
   // wrapper outside the layout, just as we do for tables, but still measure the target node.
-  var widgetPos = (_ref3 = (_parentTable$pos = parentTable === null || parentTable === void 0 ? void 0 : parentTable.pos) !== null && _parentTable$pos !== void 0 ? _parentTable$pos : parentLayout === null || parentLayout === void 0 ? void 0 : parentLayout.pos) !== null && _ref3 !== void 0 ? _ref3 : from;
+  var widgetPos = (_ref5 = (_parentTable$pos = parentTable === null || parentTable === void 0 ? void 0 : parentTable.pos) !== null && _parentTable$pos !== void 0 ? _parentTable$pos : parentLayout === null || parentLayout === void 0 ? void 0 : parentLayout.pos) !== null && _ref5 !== void 0 ? _ref5 : from;
   // Measure the actual cell/row DOM when inside one; otherwise measure the
   // widget's own position.
   var measurePos = parentCellOrRow ? parentCellOrRow.pos : from;
@@ -380,11 +510,11 @@ export var createAnchorNameSpan = function createAnchorNameSpan(anchorKey) {
   span.style.setProperty('anchor-name', "--".concat(anchorKey));
   return span;
 };
-var createAnchorSpanWidget = function createAnchorSpanWidget(_ref4) {
-  var pos = _ref4.pos,
-    diffId = _ref4.diffId,
-    anchorType = _ref4.anchorType,
-    side = _ref4.side;
+var createAnchorSpanWidget = function createAnchorSpanWidget(_ref6) {
+  var pos = _ref6.pos,
+    diffId = _ref6.diffId,
+    anchorType = _ref6.anchorType,
+    side = _ref6.side;
   return Decoration.widget(pos, function () {
     return createAnchorNameSpan(buildAnchorDecorationKey({
       diffId: diffId,
@@ -401,15 +531,18 @@ var createAnchorSpanWidget = function createAnchorSpanWidget(_ref4) {
  * Invisible `from`/`to` (and optional `left`) anchor widgets for one inline diff
  * range, so the `IndicatorBar` can align itself via CSS anchor positioning.
  */
-export var createInlineIndicatorAnchorWidgets = function createInlineIndicatorAnchorWidgets(_ref5) {
-  var doc = _ref5.doc,
-    from = _ref5.from,
-    to = _ref5.to,
-    diffId = _ref5.diffId;
+export var createInlineIndicatorAnchorWidgets = function createInlineIndicatorAnchorWidgets(_ref7) {
+  var doc = _ref7.doc,
+    from = _ref7.from,
+    to = _ref7.to,
+    diffId = _ref7.diffId,
+    leftAnchorId = _ref7.leftAnchorId;
   var leftAnchor = createLeftAnchorWidget({
     doc: doc,
     from: from,
-    diffId: diffId
+    to: fg('platform_editor_ai_show_diff_patch_2') ? to : undefined,
+    diffId: diffId,
+    leftAnchorId: leftAnchorId
   });
   var maybeLeftAnchor = leftAnchor ? [leftAnchor] : [];
 

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

@@ -177,6 +177,7 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
     isInserted = _ref3$isInserted === void 0 ? true : _ref3$isInserted,
     _ref3$isActive = _ref3.isActive,
     isActive = _ref3$isActive === void 0 ? false : _ref3$isActive,
+    leftAnchorId = _ref3.leftAnchorId,
     _ref3$shouldHideDelet = _ref3.shouldHideDeleted,
     shouldHideDeleted = _ref3$shouldHideDelet === void 0 ? false : _ref3$shouldHideDelet,
     _ref3$showContributor = _ref3.showContributorTags,
@@ -207,6 +208,7 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
       colorScheme: colorScheme,
       decorationType: 'block',
       diffId: diffId,
+      leftAnchorId: leftAnchorId,
       isActive: isActive,
       isInserted: isInserted,
       nodeName: change.name,
@@ -263,6 +265,7 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
       colorScheme: colorScheme,
       decorationType: 'block',
       diffId: diffId,
+      leftAnchorId: leftAnchorId,
       isActive: isActive,
       isInserted: isInserted,
       nodeName: change.name,
@@ -279,7 +282,8 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
       doc: doc,
       from: change.from,
       to: change.to,
-      diffId: diffId
+      diffId: diffId,
+      leftAnchorId: leftAnchorId
     })));
   }
 

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

@@ -305,6 +305,7 @@ export var createChangedRowDecorationWidgets = function createChangedRowDecorati
     isActive = _ref6.isActive,
     _ref6$isInserted = _ref6.isInserted,
     isInserted = _ref6$isInserted === void 0 ? false : _ref6$isInserted,
+    leftAnchorId = _ref6.leftAnchorId,
     diffType = _ref6.diffType,
     intl = _ref6.intl,
     _ref6$showIndicators = _ref6.showIndicators,
@@ -359,7 +360,8 @@ export var createChangedRowDecorationWidgets = function createChangedRowDecorati
       var leftAnchor = createLeftAnchorWidget({
         doc: newDoc,
         from: safeInsertPos,
-        diffId: diffId
+        diffId: diffId,
+        leftAnchorId: leftAnchorId
       });
       if (leftAnchor) {
         decorations.push(leftAnchor);
@@ -401,6 +403,7 @@ export var createChangedRowDecorationWidgets = function createChangedRowDecorati
       colorScheme: colorScheme,
       decorationType: 'widget',
       diffId: diffId,
+      leftAnchorId: leftAnchorId,
       isActive: isActive,
       isInserted: isInserted,
       diffType: diffType

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

@@ -139,6 +139,7 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
     _ref2$isInserted = _ref2.isInserted,
     isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
+    leftAnchorId = _ref2.leftAnchorId,
     _ref2$isAtomicInlineN = _ref2.isAtomicInlineNode,
     isAtomicInlineNode = _ref2$isAtomicInlineN === void 0 ? false : _ref2$isAtomicInlineN,
     _ref2$shouldHideDelet = _ref2.shouldHideDeleted,
@@ -175,6 +176,7 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
       colorScheme: colorScheme,
       decorationType: 'inline',
       diffId: diffId,
+      leftAnchorId: leftAnchorId,
       isActive: isActive,
       isInserted: isInserted
     }))];
@@ -238,6 +240,7 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     colorScheme: colorScheme,
     decorationType: 'inline',
     diffId: diffId,
+    leftAnchorId: leftAnchorId,
     isActive: isActive,
     isInserted: isInserted
   }))];
@@ -273,7 +276,8 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
       doc: doc,
       from: anchorFrom,
       to: anchorTo,
-      diffId: diffId
+      diffId: diffId,
+      leftAnchorId: leftAnchorId
     })));
   }
 

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

@@ -34,6 +34,7 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
     nodeViewSerializer = _ref.nodeViewSerializer,
     colorScheme = _ref.colorScheme,
     isInserted = _ref.isInserted,
+    leftAnchorId = _ref.leftAnchorId,
     diffType = _ref.diffType;
   // Collect the inner content position of each cell in the new document within
   // the change range. Whole-cell replacement preserves cell count/order, so the
@@ -90,6 +91,7 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
       colorScheme: colorScheme,
       decorationType: 'widget',
       diffId: crypto.randomUUID(),
+      leftAnchorId: leftAnchorId,
       isInserted: isInserted,
       diffType: diffType
     }, isExtendedEnabled(diffType) && {
@@ -115,6 +117,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     activeIndexPos = _ref2.activeIndexPos,
     _ref2$isInserted = _ref2.isInserted,
     isInserted = _ref2$isInserted === void 0 ? false : _ref2$isInserted,
+    leftAnchorId = _ref2.leftAnchorId,
     _ref2$showContributor = _ref2.showContributorTags,
     showContributorTags = _ref2$showContributor === void 0 ? false : _ref2$showContributor,
     _ref2$showIndicators = _ref2.showIndicators,
@@ -178,6 +181,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
       nodeViewSerializer: nodeViewSerializer,
       colorScheme: colorScheme,
       isInserted: isInserted,
+      leftAnchorId: leftAnchorId,
       diffType: diffType
     });
   }
@@ -194,6 +198,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
       colorScheme: colorScheme,
       isActive: isActive,
       isInserted: isInserted,
+      leftAnchorId: leftAnchorId,
       diffType: diffType,
       intl: intl,
       // Needed for the row's own indicator anchor; this path returns before the
@@ -492,7 +497,14 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     var leftAnchor = createLeftAnchorWidget({
       doc: newDoc,
       from: safeInsertPos,
-      diffId: diffId
+      diffId: diffId,
+      leftAnchorId: 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);
@@ -503,6 +515,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     colorScheme: colorScheme,
     decorationType: 'widget',
     diffId: diffId,
+    leftAnchorId: leftAnchorId,
     isActive: isActive,
     isInserted: isInserted,
     diffType: diffType

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

@@ -75,10 +75,11 @@ export var buildDiffDecorationSpec = function buildDiffDecorationSpec(_ref3) {
     diffId = _ref3.diffId,
     isActive = _ref3.isActive,
     isInserted = _ref3.isInserted,
+    leftAnchorId = _ref3.leftAnchorId,
     nodeName = _ref3.nodeName,
     side = _ref3.side,
     diffType = _ref3.diffType;
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
     decorationFamily: DecorationFamily.diff,
     decorationType: decorationType,
     diffId: diffId,
@@ -94,6 +95,8 @@ export var buildDiffDecorationSpec = function buildDiffDecorationSpec(_ref3) {
     isActive: isActive
   } : {}), isInserted !== undefined ? {
     isInserted: isInserted
+  } : {}), leftAnchorId ? {
+    leftAnchorId: leftAnchorId
   } : {}), colorScheme ? {
     colorScheme: colorScheme
   } : {}), nodeName ? {
@@ -150,11 +153,13 @@ export var isDiffDecoration = function isDiffDecoration(decoration) {
 export var extractDiffDescriptors = function extractDiffDescriptors(decorations) {
   return decorations.find(undefined, undefined, isDiffDecorationSpec).filter(isDiffDecoration).map(function (_ref5) {
     var spec = _ref5.spec;
-    return _objectSpread(_objectSpread(_objectSpread({}, spec.colorScheme ? {
+    return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, spec.colorScheme ? {
       colorScheme: spec.colorScheme
     } : {}), {}, {
       id: spec.diffId
-    }, spec.isInserted !== undefined ? {
+    }, spec.leftAnchorId ? {
+      leftAnchorId: spec.leftAnchorId
+    } : {}), spec.isInserted !== undefined ? {
       isInserted: spec.isInserted
     } : {}), {}, {
       type: spec.decorationType

package/dist/esm/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';
 var renderIndicatorBar = function renderIndicatorBar(descriptor) {
+  var _descriptor$leftAncho;
+  var leftAnchorId = (_descriptor$leftAncho = descriptor.leftAnchorId) !== null && _descriptor$leftAncho !== void 0 ? _descriptor$leftAncho : descriptor.id;
   switch (descriptor.type) {
     case 'inline':
       {
@@ -21,7 +23,7 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
             anchorType: AnchorTypeKey.to
           }),
           anchorLeft: buildAnchorDecorationKey({
-            diffId: descriptor.id,
+            diffId: leftAnchorId,
             anchorType: AnchorTypeKey.left
           })
         });
@@ -41,7 +43,7 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
           anchorTop: blockAnchor,
           anchorBottom: blockAnchor,
           anchorLeft: buildAnchorDecorationKey({
-            diffId: descriptor.id,
+            diffId: leftAnchorId,
             anchorType: AnchorTypeKey.left
           })
         });
@@ -59,7 +61,7 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
             diffId: descriptor.id
           }),
           anchorLeft: buildAnchorDecorationKey({
-            diffId: descriptor.id,
+            diffId: leftAnchorId,
             anchorType: AnchorTypeKey.left
           }),
           anchorLeftFallback: buildAnchorDecorationKey({

package/dist/types/pm-plugins/decorations/createAnchorDecorationWidgets.d.ts

@@ -1,4 +1,4 @@
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode, Slice } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 /**
  * Create a widget that marks the start of the doc margin.
@@ -16,10 +16,18 @@ export declare const createDocMarginAnchorWidget: () => Decoration;
  * doc margin so the `IndicatorBar` can align its left edge against it via CSS
  * anchor positioning. Shared by inline and node (widget) diff decorations.
  */
-export declare const createLeftAnchorWidget: ({ doc, from, diffId, }: {
+export declare const createLeftAnchorWidget: ({ doc, from, to, diffId, leftAnchorId, measureElement, sliceOverride, underlyingRange, }: {
     diffId: string;
     doc: PMNode;
     from: number;
+    leftAnchorId?: string;
+    measureElement?: HTMLElement;
+    sliceOverride?: Slice;
+    to?: number;
+    underlyingRange?: {
+        from: number;
+        to: number;
+    };
 }) => Decoration | undefined;
 /**
  * Creates invisible anchor widgets for a single block-changed diff so that the
@@ -32,10 +40,11 @@ export declare const createLeftAnchorWidget: ({ doc, from, diffId, }: {
  *   layout, expand) so the bar aligns within the container boundary.
  *
  */
-export declare const createBlockIndicatorAnchorWidgets: ({ doc, from, to, diffId, }: {
+export declare const createBlockIndicatorAnchorWidgets: ({ doc, from, to, diffId, leftAnchorId, }: {
     diffId: string;
     doc: PMNode;
     from: number;
+    leftAnchorId?: string;
     to: number;
 }) => Decoration[];
 /**
@@ -56,9 +65,10 @@ export declare const createAnchorNameSpan: (anchorKey: string) => HTMLSpanElemen
  * Invisible `from`/`to` (and optional `left`) anchor widgets for one inline diff
  * range, so the `IndicatorBar` can align itself via CSS anchor positioning.
  */
-export declare const createInlineIndicatorAnchorWidgets: ({ doc, from, to, diffId, }: {
+export declare const createInlineIndicatorAnchorWidgets: ({ doc, from, to, diffId, leftAnchorId, }: {
     diffId: string;
     doc: PMNode;
     from: number;
+    leftAnchorId?: string;
     to: number;
 }) => Decoration[];

package/dist/types/pm-plugins/decorations/createBlockChangedDecoration.d.ts

@@ -11,7 +11,7 @@ import { type ContributorTagMountContext } from './createContributorTagWidget';
  * @param isActive Whether this node is part of the currently active/focused change
  * @returns Prosemirror node decoration or undefined
  */
-export declare const createBlockChangedDecoration: ({ attributionKey, change, colorScheme, isInserted, isActive, shouldHideDeleted, showContributorTags, showIndicators, doc, diffType, tagMountContext, }: {
+export declare const createBlockChangedDecoration: ({ attributionKey, change, colorScheme, isInserted, isActive, leftAnchorId, shouldHideDeleted, showContributorTags, showIndicators, doc, diffType, tagMountContext, }: {
     attributionKey?: string;
     change: {
         from: number;
@@ -23,6 +23,7 @@ export declare const createBlockChangedDecoration: ({ attributionKey, change, co
     doc?: PMNode;
     isActive?: boolean;
     isInserted?: boolean;
+    leftAnchorId?: string;
     shouldHideDeleted?: boolean;
     showContributorTags?: boolean;
     showIndicators?: boolean;

package/dist/types/pm-plugins/decorations/createChangedRowDecorationWidgets.d.ts

@@ -10,7 +10,7 @@ type SimpleChange = Pick<Change, 'fromA' | 'toA' | 'fromB' | 'deleted'>;
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-export declare const createChangedRowDecorationWidgets: ({ attributionKey, changes, originalDoc, newDoc, nodeViewSerializer, colorScheme, isActive, isInserted, diffType, intl, showIndicators, showContributorTags, tagMountContext, }: {
+export declare const createChangedRowDecorationWidgets: ({ attributionKey, changes, originalDoc, newDoc, nodeViewSerializer, colorScheme, isActive, isInserted, leftAnchorId, diffType, intl, showIndicators, showContributorTags, tagMountContext, }: {
     attributionKey?: string;
     changes: SimpleChange[];
     colorScheme?: ColorScheme;
@@ -18,6 +18,7 @@ export declare const createChangedRowDecorationWidgets: ({ attributionKey, chang
     intl?: IntlShape;
     isActive?: boolean;
     isInserted?: boolean;
+    leftAnchorId?: string;
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
     originalDoc: PMNode;

package/dist/types/pm-plugins/decorations/createInlineChangedDecoration.d.ts

@@ -14,7 +14,7 @@ export declare const getAtomicInlineChangedAttrs: (inlineNodeName: InlineAttrCha
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export declare const createInlineChangedDecoration: ({ attributionKey, change, colorScheme, isActive, isInserted, isAtomicInlineNode, shouldHideDeleted, showContributorTags, showIndicators, doc, diffType, hideAddedDiffsUnderline, inlineNodeName, hasDeletedWidget, isDeletedWidgetBelow, reveal, tagMountContext, }: {
+export declare const createInlineChangedDecoration: ({ attributionKey, change, colorScheme, isActive, isInserted, leftAnchorId, isAtomicInlineNode, shouldHideDeleted, showContributorTags, showIndicators, doc, diffType, hideAddedDiffsUnderline, inlineNodeName, hasDeletedWidget, isDeletedWidgetBelow, reveal, tagMountContext, }: {
     attributionKey?: string;
     change: {
         fromB: number;
@@ -30,6 +30,7 @@ export declare const createInlineChangedDecoration: ({ attributionKey, change, c
     isAtomicInlineNode?: boolean;
     isDeletedWidgetBelow?: boolean;
     isInserted?: boolean;
+    leftAnchorId?: string;
     reveal?: RevealOptions;
     shouldHideDeleted?: boolean;
     showContributorTags?: boolean;

package/dist/types/pm-plugins/decorations/createNodeChangedDecorationWidget.d.ts

@@ -10,7 +10,7 @@ import { type ContributorTagMountContext } from './createContributorTagWidget';
  * This function is used to create a decoration widget to show content
  * that is not in the current document.
  */
-export declare const createNodeChangedDecorationWidget: ({ attributionKey, change, doc, nodeViewSerializer, colorScheme, newDoc, intl, activeIndexPos, isInserted, showContributorTags, showIndicators, placeBelow, diffType, hideAddedDiffsUnderline, reveal, tagMountContext, deletedColumns, }: {
+export declare const createNodeChangedDecorationWidget: ({ attributionKey, change, doc, nodeViewSerializer, colorScheme, newDoc, intl, activeIndexPos, isInserted, leftAnchorId, showContributorTags, showIndicators, placeBelow, diffType, hideAddedDiffsUnderline, reveal, tagMountContext, deletedColumns, }: {
     activeIndexPos?: {
         from: number;
         to: number;
@@ -24,6 +24,7 @@ export declare const createNodeChangedDecorationWidget: ({ attributionKey, chang
     hideAddedDiffsUnderline?: boolean;
     intl: IntlShape;
     isInserted?: boolean;
+    leftAnchorId?: string;
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
     placeBelow?: boolean;