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

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 17.1.6
+
+### Patch Changes
+
+- [`188a9259b143b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/188a9259b143b) -
+  EDITOR-9127 [ux] Align the diff indicator outside the visible outer edges of a whole inserted
+  layout.
+- Updated dependencies
+
 ## 17.1.5
 
 ### Patch Changes

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

@@ -192,6 +192,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,
@@ -230,6 +231,7 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
           },
           colorScheme: colorScheme,
           isInserted: isInserted,
+          leftAnchorId: leftAnchorId,
           isActive: isActive,
           shouldHideDeleted: shouldHideDeleted,
           showContributorTags: showContributorTags,
@@ -271,6 +273,7 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
         },
         colorScheme: colorScheme,
         isInserted: isInserted,
+        leftAnchorId: leftAnchorId,
         isActive: _isActive,
         shouldHideDeleted: shouldHideDeleted,
         showContributorTags: showContributorTags,
@@ -553,6 +556,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 = (0, _fg.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 ? (0, _attributions.getColorSchemeForChange)(change, attributedChanges, attributionColors, colorScheme) : colorScheme;
     var attributionKey = showContributorTags ? (0, _attributions.getAttributionKeyForChange)(change, attributedChanges) : undefined;
     var isActive = isRangeActive(activeIndexPos, change.fromB, change.toB);
@@ -685,6 +692,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
                 fromB: from,
                 toB: to
               },
+              leftAnchorId: leftAnchorId,
               doc: tr.doc,
               colorScheme: changeColorScheme,
               isActive: isActive,
@@ -710,6 +718,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
         decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createInlineChangedDecoration.createInlineChangedDecoration)(_objectSpread({
           attributionKey: attributionKey,
           change: change,
+          leftAnchorId: leftAnchorId,
           doc: tr.doc,
           colorScheme: changeColorScheme,
           isActive: isActive,
@@ -744,7 +753,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) {
@@ -769,6 +779,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
           newDoc: tr.doc,
           intl: intl,
           activeIndexPos: activeIndexPos,
+          leftAnchorId: leftAnchorId,
           showContributorTags: showContributorTags,
           tagMountContext: tagMountContext
         }, (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && {

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

@@ -5,11 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createLeftAnchorWidget = exports.createInlineIndicatorAnchorWidgets = exports.createDocMarginAnchorWidget = exports.createBlockIndicatorAnchorWidgets = exports.createAnchorNameSpan = exports.clampAnchorPosIntoCell = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _decorationKeys = require("./decorationKeys");
+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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -36,21 +40,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 = (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? nodeOverride !== null && nodeOverride !== void 0 ? nodeOverride : resolvedNode : resolvedNode;
   if (node.type.name === 'layoutSection' && (0, _fg.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
@@ -118,6 +122,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.
@@ -148,10 +191,23 @@ var createDocMarginAnchorWidget = exports.createDocMarginAnchorWidget = function
  * anchor positioning. Shared by inline and node (widget) diff decorations.
  */
 var createLeftAnchorWidget = exports.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((0, _toConsumableArray2.default)(overrideEdgeCases), (0, _toConsumableArray2.default)(documentEdgeCases));
+  var edgeCase = (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? allEdgeCases[0] : edgeCases(doc, from);
   if (edgeCase === undefined) {
     return undefined;
   }
@@ -160,7 +216,7 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
   // resizable block container.
   var beforePos = edgeCase.beforePos;
   var leftAnchorKey = (0, _decorationKeys.buildAnchorDecorationKey)({
-    diffId: diffId,
+    diffId: leftAnchorId !== null && leftAnchorId !== void 0 ? leftAnchorId : diffId,
     anchorType: _decorationKeys.AnchorTypeKey.left
   });
   var leftResizeObserver;
@@ -178,15 +234,87 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
     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 ((0, _fg.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;
           }
@@ -198,12 +326,12 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
           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);
@@ -214,7 +342,7 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
 
     // 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({}, (0, _decorationKeys.buildAnchorDecorationSpec)({
     diffId: diffId,
@@ -222,8 +350,8 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
     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();
     }
   }));
 };
@@ -239,16 +367,18 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
  *   layout, expand) so the bar aligns within the container boundary.
  *
  */
-var createBlockIndicatorAnchorWidgets = exports.createBlockIndicatorAnchorWidgets = function createBlockIndicatorAnchorWidgets(_ref2) {
-  var _ref3, _parentTable$pos;
-  var doc = _ref2.doc,
-    from = _ref2.from,
-    to = _ref2.to,
-    diffId = _ref2.diffId;
+var createBlockIndicatorAnchorWidgets = exports.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] : [];
 
@@ -287,7 +417,7 @@ var createBlockIndicatorAnchorWidgets = exports.createBlockIndicatorAnchorWidget
   // 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;
@@ -386,11 +516,11 @@ var createAnchorNameSpan = exports.createAnchorNameSpan = function createAnchorN
   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 _view.Decoration.widget(pos, function () {
     return createAnchorNameSpan((0, _decorationKeys.buildAnchorDecorationKey)({
       diffId: diffId,
@@ -407,15 +537,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.
  */
-var createInlineIndicatorAnchorWidgets = exports.createInlineIndicatorAnchorWidgets = function createInlineIndicatorAnchorWidgets(_ref5) {
-  var doc = _ref5.doc,
-    from = _ref5.from,
-    to = _ref5.to,
-    diffId = _ref5.diffId;
+var createInlineIndicatorAnchorWidgets = exports.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: (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? to : undefined,
+    diffId: diffId,
+    leftAnchorId: leftAnchorId
   });
   var maybeLeftAnchor = leftAnchor ? [leftAnchor] : [];
 

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

@@ -184,6 +184,7 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
     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,
@@ -214,6 +215,7 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
       colorScheme: colorScheme,
       decorationType: 'block',
       diffId: diffId,
+      leftAnchorId: leftAnchorId,
       isActive: isActive,
       isInserted: isInserted,
       nodeName: change.name,
@@ -270,6 +272,7 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
       colorScheme: colorScheme,
       decorationType: 'block',
       diffId: diffId,
+      leftAnchorId: leftAnchorId,
       isActive: isActive,
       isInserted: isInserted,
       nodeName: change.name,
@@ -286,7 +289,8 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
       doc: doc,
       from: change.from,
       to: change.to,
-      diffId: diffId
+      diffId: diffId,
+      leftAnchorId: leftAnchorId
     })));
   }
 

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

@@ -312,6 +312,7 @@ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidget
     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,
@@ -366,7 +367,8 @@ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidget
       var leftAnchor = (0, _createAnchorDecorationWidgets.createLeftAnchorWidget)({
         doc: newDoc,
         from: safeInsertPos,
-        diffId: diffId
+        diffId: diffId,
+        leftAnchorId: leftAnchorId
       });
       if (leftAnchor) {
         decorations.push(leftAnchor);
@@ -408,6 +410,7 @@ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidget
       colorScheme: colorScheme,
       decorationType: 'widget',
       diffId: diffId,
+      leftAnchorId: leftAnchorId,
       isActive: isActive,
       isInserted: isInserted,
       diffType: diffType

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

@@ -146,6 +146,7 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     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,
@@ -182,6 +183,7 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
       colorScheme: colorScheme,
       decorationType: 'inline',
       diffId: diffId,
+      leftAnchorId: leftAnchorId,
       isActive: isActive,
       isInserted: isInserted
     }))];
@@ -245,6 +247,7 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     colorScheme: colorScheme,
     decorationType: 'inline',
     diffId: diffId,
+    leftAnchorId: leftAnchorId,
     isActive: isActive,
     isInserted: isInserted
   }))];
@@ -280,7 +283,8 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
       doc: doc,
       from: anchorFrom,
       to: anchorTo,
-      diffId: diffId
+      diffId: diffId,
+      leftAnchorId: leftAnchorId
     })));
   }
 

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

@@ -41,6 +41,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
@@ -97,6 +98,7 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
       colorScheme: colorScheme,
       decorationType: 'widget',
       diffId: crypto.randomUUID(),
+      leftAnchorId: leftAnchorId,
       isInserted: isInserted,
       diffType: diffType
     }, (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && {
@@ -122,6 +124,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     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,
@@ -185,6 +188,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
       nodeViewSerializer: nodeViewSerializer,
       colorScheme: colorScheme,
       isInserted: isInserted,
+      leftAnchorId: leftAnchorId,
       diffType: diffType
     });
   }
@@ -201,6 +205,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
       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
@@ -499,7 +504,14 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     var leftAnchor = (0, _createAnchorDecorationWidgets.createLeftAnchorWidget)({
       doc: newDoc,
       from: safeInsertPos,
-      diffId: diffId
+      diffId: diffId,
+      leftAnchorId: leftAnchorId,
+      measureElement: (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? dom : undefined,
+      sliceOverride: (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? slice : undefined,
+      underlyingRange: (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? {
+        from: change.fromB,
+        to: change.toB
+      } : undefined
     });
     if (leftAnchor) {
       decorations.push(leftAnchor);
@@ -510,6 +522,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     colorScheme: colorScheme,
     decorationType: 'widget',
     diffId: diffId,
+    leftAnchorId: leftAnchorId,
     isActive: isActive,
     isInserted: isInserted,
     diffType: diffType

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

@@ -84,10 +84,11 @@ var buildDiffDecorationSpec = exports.buildDiffDecorationSpec = function buildDi
     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,
@@ -103,6 +104,8 @@ var buildDiffDecorationSpec = exports.buildDiffDecorationSpec = function buildDi
     isActive: isActive
   } : {}), isInserted !== undefined ? {
     isInserted: isInserted
+  } : {}), leftAnchorId ? {
+    leftAnchorId: leftAnchorId
   } : {}), colorScheme ? {
     colorScheme: colorScheme
   } : {}), nodeName ? {
@@ -159,11 +162,13 @@ var isDiffDecoration = exports.isDiffDecoration = function isDiffDecoration(deco
 var extractDiffDescriptors = exports.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/cjs/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -12,6 +12,8 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _decorationKeys = require("../../pm-plugins/decorations/decorationKeys");
 var _IndicatorBar = require("./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':
       {
@@ -28,7 +30,7 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
             anchorType: _decorationKeys.AnchorTypeKey.to
           }),
           anchorLeft: (0, _decorationKeys.buildAnchorDecorationKey)({
-            diffId: descriptor.id,
+            diffId: leftAnchorId,
             anchorType: _decorationKeys.AnchorTypeKey.left
           })
         });
@@ -48,7 +50,7 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
           anchorTop: blockAnchor,
           anchorBottom: blockAnchor,
           anchorLeft: (0, _decorationKeys.buildAnchorDecorationKey)({
-            diffId: descriptor.id,
+            diffId: leftAnchorId,
             anchorType: _decorationKeys.AnchorTypeKey.left
           })
         });
@@ -66,7 +68,7 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
             diffId: descriptor.id
           }),
           anchorLeft: (0, _decorationKeys.buildAnchorDecorationKey)({
-            diffId: descriptor.id,
+            diffId: leftAnchorId,
             anchorType: _decorationKeys.AnchorTypeKey.left
           }),
           anchorLeftFallback: (0, _decorationKeys.buildAnchorDecorationKey)({