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

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 17.1.7
+
+### Patch Changes
+
+- [`597f7ce38c071`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/597f7ce38c071) -
+  Fix contributor tags rendering clipped inside code blocks, and off-position for other
+  deleted-content widgets, in version history diffs.
+
+  Anchor the contributor tag to the code block's own box when an edit inside the block hoists the
+  tag out of it, instead of an approximate host-relative offset, so the tag no longer renders
+  clipped by the code content wrapper.
+
+  Fix deleted headings, lists, and blockquotes missing their background highlight and underline on
+  the active change, behind `confluence_ncs_step_diffing_version_history`.
+
+## 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
     })));
   }
 
@@ -304,7 +308,7 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
       mountContext: tagMountContext
     });
     if (tagWidget) {
-      decorations.push(tagWidget);
+      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(tagWidget));
     }
   }
   return decorations;

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
@@ -423,7 +426,7 @@ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidget
       }));
     }
     if (tagWidget) {
-      decorations.push(tagWidget);
+      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(tagWidget));
     }
     return decorations;
   });

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unmountContributorTag = exports.mountContributorTag = exports.isContributorTagWidgetEnabled = exports.createContributorTagWidget = exports.createContributorTagHost = exports.CONTRIBUTOR_TAG_HOST_ATTRIBUTE = void 0;
+exports.unmountContributorTag = exports.resolveHoistedCodeBlockAnchor = exports.resolveCodeBlockStart = exports.mountContributorTag = exports.isContributorTagWidgetEnabled = exports.createContributorTagWidget = exports.createContributorTagHost = exports.CONTRIBUTOR_TAG_HOST_ATTRIBUTE = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
@@ -174,13 +174,12 @@ var resolveTagAnchorPos = function resolveTagAnchorPos(doc, from, to) {
 };
 
 /**
- * The position just before the code block enclosing `pos`, or `undefined` when nothing does.
+ * Position just before the code block enclosing `pos`, or `undefined` if there is none.
  *
- * `.code-block-content-wrapper` hides its block-axis overflow, so a host left inside the code has
- * its tag clipped away. Hosting it before the block puts the tag on the block's top-left corner,
- * where a whole-code-block change is tagged too (EDITOR-8766).
+ * Code blocks clip/scroll their own content, so a tag hosted inside one gets clipped away. Hoisting
+ * it before the block avoids that (EDITOR-9045, EDITOR-8766).
  */
-var resolveCodeBlockStart = function resolveCodeBlockStart(doc, pos) {
+var resolveCodeBlockStart = exports.resolveCodeBlockStart = function resolveCodeBlockStart(doc, pos) {
   var $pos = doc.resolve(pos);
   for (var depth = $pos.depth; depth > 0; depth--) {
     if ($pos.node(depth).type.name === 'codeBlock') {
@@ -191,14 +190,47 @@ var resolveCodeBlockStart = function resolveCodeBlockStart(doc, pos) {
 };
 
 /**
- * A widget hosting the contributor tag of one diff range, placed on the first visible character the
- * range highlights — or, with `anchorAtRangeStart`, at `from` itself. Either way a host that would
- * land inside a code block is hoisted out in front of it; see `resolveCodeBlockStart`.
+ * If `pos` is inside a code block: a marker decoration to anchor the hoisted tag against, plus the
+ * position just before the block to host that tag at (EDITOR-9045).
+ */
+var resolveHoistedCodeBlockAnchor = exports.resolveHoistedCodeBlockAnchor = function resolveHoistedCodeBlockAnchor(doc, pos, diffId) {
+  var codeBlockStart = resolveCodeBlockStart(doc, pos);
+  if (codeBlockStart === undefined) {
+    return undefined;
+  }
+  var anchorName = (0, _decorationKeys.buildAnchorDecorationKey)({
+    diffId: diffId,
+    anchorType: _decorationKeys.AnchorTypeKey.tag
+  });
+  var marker = _view.Decoration.widget(pos, function () {
+    var el = document.createElement('span');
+    el.style.setProperty('anchor-name', "--".concat(anchorName));
+    return el;
+  }, {
+    key: "contributor-tag-anchor-".concat(diffId),
+    side: -1,
+    marks: [],
+    ignoreSelection: true
+  });
+  return {
+    anchorName: anchorName,
+    codeBlockStart: codeBlockStart,
+    marker: marker
+  };
+};
+
+/**
+ * The contributor tag widget for one diff range, placed on the first visible character the range
+ * highlights — or, with `anchorAtRangeStart`, at `from` itself. A host inside a code block is
+ * hoisted in front of it instead, anchored via `resolveHoistedCodeBlockAnchor` (EDITOR-9045).
+ *
+ * Returns one decoration normally, two (marker + tag) when hoisted out of a code block.
  *
  * The tag is mounted in `toDOM` and taken down in `destroy`, so it lives exactly as long as the host
  * element ProseMirror drew it into — see `mountContributorTag`.
  */
 var createContributorTagWidget = exports.createContributorTagWidget = function createContributorTagWidget(_ref4) {
+  var _hoisted$anchorName, _hoisted$codeBlockSta;
   var _ref4$anchorAtRangeSt = _ref4.anchorAtRangeStart,
     anchorAtRangeStart = _ref4$anchorAtRangeSt === void 0 ? false : _ref4$anchorAtRangeSt,
     anchorName = _ref4.anchorName,
@@ -210,17 +242,23 @@ var createContributorTagWidget = exports.createContributorTagWidget = function c
   if (!isContributorTagWidgetEnabled()) {
     return undefined;
   }
-  var tagAnchorName = anchorName && supportsAnchorPositioning() ? anchorName : undefined;
 
   // Reassigned when ProseMirror redraws this decoration, which it may do more than once for the
   // same `Decoration` instance.
   var mount;
   var anchorPos = anchorAtRangeStart ? from : resolveTagAnchorPos(doc, from, to);
-  // A change inside a code block is hoisted out of it; anything else keeps its own anchor.
-  var codeBlockPos = resolveCodeBlockStart(doc, anchorPos);
-  return _view.Decoration.widget(
+  // A change inside a code block is hoisted out of it, anchored to its own marker; anything else
+  // keeps its own anchor.
+  var hoisted = resolveHoistedCodeBlockAnchor(doc, anchorPos, diffId);
+  var effectiveAnchorName = (_hoisted$anchorName = hoisted === null || hoisted === void 0 ? void 0 : hoisted.anchorName) !== null && _hoisted$anchorName !== void 0 ? _hoisted$anchorName : anchorName;
+  var tagAnchorName = effectiveAnchorName && supportsAnchorPositioning() ? effectiveAnchorName : undefined;
+  var decorations = [];
+  if (hoisted) {
+    decorations.push(hoisted.marker);
+  }
+  decorations.push(_view.Decoration.widget(
   // Keep the host out of the table row's grid (EDITOR-8442).
-  (0, _createAnchorDecorationWidgets.clampAnchorPosIntoCell)(doc, codeBlockPos !== null && codeBlockPos !== void 0 ? codeBlockPos : anchorPos, 1), function () {
+  (0, _createAnchorDecorationWidgets.clampAnchorPosIntoCell)(doc, (_hoisted$codeBlockSta = hoisted === null || hoisted === void 0 ? void 0 : hoisted.codeBlockStart) !== null && _hoisted$codeBlockSta !== void 0 ? _hoisted$codeBlockSta : anchorPos, 1), function () {
     var host = buildContributorTagHost(diffId, tagAnchorName);
     mount = mountContributorTag({
       anchorName: tagAnchorName,
@@ -242,5 +280,6 @@ var createContributorTagWidget = exports.createContributorTagWidget = function c
       unmountContributorTag(mount);
       mount = undefined;
     }
-  }));
+  })));
+  return decorations;
 };

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,14 +283,15 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
       doc: doc,
       from: anchorFrom,
       to: anchorTo,
-      diffId: diffId
+      diffId: diffId,
+      leftAnchorId: leftAnchorId
     })));
   }
 
   // Pushed after the indicator anchors so the decoration order is unchanged — see `tagWidget` above
   // for why it is built before them.
   if (tagWidget) {
-    decorations.push(tagWidget);
+    decorations.push.apply(decorations, (0, _toConsumableArray2.default)(tagWidget));
   }
   return decorations;
 };