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

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
@@ -414,7 +419,13 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
       }
     }
   });
-  var contributorTagAnchorName;
+
+  // A change inside a code block hoists its tag out of the block (EDITOR-9045).
+  var hoistedCodeBlockAnchor = canTagWidget ? (0, _createContributorTagWidget.resolveHoistedCodeBlockAnchor)(newDoc, safeInsertPos, diffId) : undefined;
+  if (hoistedCodeBlockAnchor) {
+    decorations.push(hoistedCodeBlockAnchor.marker);
+  }
+  var contributorTagAnchorName = hoistedCodeBlockAnchor === null || hoistedCodeBlockAnchor === void 0 ? void 0 : hoistedCodeBlockAnchor.anchorName;
   if (!isInserted && deletedColumns !== null && deletedColumns !== void 0 && deletedColumns.length) {
     var table = dom.querySelector('table');
     var firstRow = table === null || table === void 0 ? void 0 : table.rows[0];
@@ -474,6 +485,13 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     dom.style.setProperty('anchor-name', "--".concat((0, _decorationKeys.buildAnchorDecorationKey)({
       diffId: diffId
     })));
+    // The tag built below only anchors via `anchor()` if `contributorTagAnchorName` is set; without
+    // it the tag falls back to a non-anchored position (EDITOR-9045).
+    if ((0, _fg.fg)('confluence_ncs_step_diffing_version_history')) {
+      contributorTagAnchorName !== null && contributorTagAnchorName !== void 0 ? contributorTagAnchorName : contributorTagAnchorName = (0, _decorationKeys.buildAnchorDecorationKey)({
+        diffId: diffId
+      });
+    }
   }
 
   // Taken down in the widget's `destroy` below: `dom` is rebuilt on every recalculation, so the tag
@@ -482,24 +500,56 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   if (canTagWidget) {
     // Lets the contributor tag find the deleted content on hover.
     dom.setAttribute('data-diff-id', diffId);
-
-    // Hosted at the start of the deleted run rather than on `dom` itself: `dom` is inline, so once
-    // the deleted content wraps its box is the union of its line fragments.
-    var tagHost = (0, _createContributorTagWidget.createContributorTagHost)({
-      anchorName: contributorTagAnchorName,
-      diffId: diffId,
-      mountContext: tagMountContext
-    });
-    if (tagHost) {
-      dom.prepend(tagHost.host);
-      tagMount = tagHost.mount;
+    if (hoistedCodeBlockAnchor) {
+      // Own widget just before the code block, anchored to the marker above, not `dom` (EDITOR-9045).
+      var hoistedTagMount;
+      decorations.push(_view.Decoration.widget((0, _createAnchorDecorationWidgets.clampAnchorPosIntoCell)(newDoc, hoistedCodeBlockAnchor.codeBlockStart, 1), function () {
+        var _tagHost$host;
+        var tagHost = (0, _createContributorTagWidget.createContributorTagHost)({
+          anchorName: contributorTagAnchorName,
+          diffId: diffId,
+          mountContext: tagMountContext
+        });
+        hoistedTagMount = tagHost === null || tagHost === void 0 ? void 0 : tagHost.mount;
+        return (_tagHost$host = tagHost === null || tagHost === void 0 ? void 0 : tagHost.host) !== null && _tagHost$host !== void 0 ? _tagHost$host : document.createElement('span');
+      }, _objectSpread(_objectSpread({}, (0, _decorationKeys.buildContributorTagDecorationSpec)(diffId)), {}, {
+        side: 1,
+        marks: [],
+        ignoreSelection: true,
+        stopEvent: function stopEvent() {
+          return true;
+        },
+        destroy: function destroy() {
+          (0, _createContributorTagWidget.unmountContributorTag)(hoistedTagMount);
+          hoistedTagMount = undefined;
+        }
+      })));
+    } else {
+      // Hosted at the start of the deleted run rather than on `dom` itself: `dom` is inline, so once
+      // the deleted content wraps its box is the union of its line fragments.
+      var tagHost = (0, _createContributorTagWidget.createContributorTagHost)({
+        anchorName: contributorTagAnchorName,
+        diffId: diffId,
+        mountContext: tagMountContext
+      });
+      if (tagHost) {
+        dom.prepend(tagHost.host);
+        tagMount = tagHost.mount;
+      }
     }
   }
   if (showIndicators && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     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 +560,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/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js

@@ -54,10 +54,15 @@ var getChangedContentStyleNext = function getChangedContentStyleNext(colorScheme
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isInserted) {
     return (0, _factory.buildInsertedInlineStyle)(colors, isActive, hideAddedDiffsUnderline);
   }
-  if (isActive) {
-    return (0, _factory.buildDeletedInlineContentStyle)(colors, 'active');
+  var base = (0, _factory.buildDeletedInlineContentStyle)(colors, isActive ? 'active' : (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'new' : 'default');
+
+  // Text-like blocks (heading, lists, blockquote) render their deleted content through this
+  // getter rather than `getDeletedContentStyle`, so without this they never receive the
+  // glyphTint background + underline that plain deleted text already gets.
+  if ((0, _fg.fg)('confluence_ncs_step_diffing_version_history') && colors.deletedInlineTreatment === 'glyphTint' && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
+    return base + (0, _factory.buildDeletedInlineContentStyleExtended)(colors, isActive);
   }
-  return (0, _factory.buildDeletedInlineContentStyle)(colors, (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'new' : 'default');
+  return base;
 };
 var getChangedNodeStyleNext = function getChangedNodeStyleNext(nodeName, colorScheme) {
   var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

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)({

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
     }));
   }
 
@@ -288,7 +292,7 @@ export const createBlockChangedDecoration = ({
       mountContext: tagMountContext
     });
     if (tagWidget) {
-      decorations.push(tagWidget);
+      decorations.push(...tagWidget);
     }
   }
   return decorations;

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
@@ -387,7 +390,7 @@ export const createChangedRowDecorationWidgets = ({
       }));
     }
     if (tagWidget) {
-      decorations.push(tagWidget);
+      decorations.push(...tagWidget);
     }
     return decorations;
   });