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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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

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

@@ -308,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

@@ -426,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

@@ -291,7 +291,7 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
   // 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;
 };

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

@@ -419,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];
@@ -479,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
@@ -487,17 +500,42 @@ 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)) {

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/es2019/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -292,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

@@ -390,7 +390,7 @@ export const createChangedRowDecorationWidgets = ({
       }));
     }
     if (tagWidget) {
-      decorations.push(tagWidget);
+      decorations.push(...tagWidget);
     }
     return decorations;
   });

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

@@ -3,7 +3,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { ContributorTagController } from '../../ui/ContributorTag/contributorTagController';
 import { buildCharsByOffset, isWhitespaceChar } from '../utils/charsByOffset';
 import { clampAnchorPosIntoCell } from './createAnchorDecorationWidgets';
-import { buildContributorTagDecorationSpec } from './decorationKeys';
+import { AnchorTypeKey, buildAnchorDecorationKey, buildContributorTagDecorationSpec } from './decorationKeys';
 
 /** Marks the host element of one tag, so a tag can be found in the document by its own diff. */
 export const CONTRIBUTOR_TAG_HOST_ATTRIBUTE = 'data-contributor-tag-host';
@@ -162,13 +162,12 @@ const 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).
  */
-const resolveCodeBlockStart = (doc, pos) => {
+export const resolveCodeBlockStart = (doc, pos) => {
   const $pos = doc.resolve(pos);
   for (let depth = $pos.depth; depth > 0; depth--) {
     if ($pos.node(depth).type.name === 'codeBlock') {
@@ -179,9 +178,41 @@ const 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).
+ */
+export const resolveHoistedCodeBlockAnchor = (doc, pos, diffId) => {
+  const codeBlockStart = resolveCodeBlockStart(doc, pos);
+  if (codeBlockStart === undefined) {
+    return undefined;
+  }
+  const anchorName = buildAnchorDecorationKey({
+    diffId,
+    anchorType: AnchorTypeKey.tag
+  });
+  const marker = Decoration.widget(pos, () => {
+    const el = document.createElement('span');
+    el.style.setProperty('anchor-name', `--${anchorName}`);
+    return el;
+  }, {
+    key: `contributor-tag-anchor-${diffId}`,
+    side: -1,
+    marks: [],
+    ignoreSelection: true
+  });
+  return {
+    anchorName,
+    codeBlockStart,
+    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`.
@@ -195,20 +226,27 @@ export const createContributorTagWidget = ({
   diffId,
   mountContext
 }) => {
+  var _hoisted$anchorName, _hoisted$codeBlockSta;
   if (!isContributorTagWidgetEnabled()) {
     return undefined;
   }
-  const tagAnchorName = anchorName && supportsAnchorPositioning() ? anchorName : undefined;
 
   // Reassigned when ProseMirror redraws this decoration, which it may do more than once for the
   // same `Decoration` instance.
   let mount;
   const anchorPos = anchorAtRangeStart ? from : resolveTagAnchorPos(doc, from, to);
-  // A change inside a code block is hoisted out of it; anything else keeps its own anchor.
-  const codeBlockPos = resolveCodeBlockStart(doc, anchorPos);
-  return Decoration.widget(
+  // A change inside a code block is hoisted out of it, anchored to its own marker; anything else
+  // keeps its own anchor.
+  const hoisted = resolveHoistedCodeBlockAnchor(doc, anchorPos, diffId);
+  const effectiveAnchorName = (_hoisted$anchorName = hoisted === null || hoisted === void 0 ? void 0 : hoisted.anchorName) !== null && _hoisted$anchorName !== void 0 ? _hoisted$anchorName : anchorName;
+  const tagAnchorName = effectiveAnchorName && supportsAnchorPositioning() ? effectiveAnchorName : undefined;
+  const decorations = [];
+  if (hoisted) {
+    decorations.push(hoisted.marker);
+  }
+  decorations.push(Decoration.widget(
   // Keep the host out of the table row's grid (EDITOR-8442).
-  clampAnchorPosIntoCell(doc, codeBlockPos !== null && codeBlockPos !== void 0 ? codeBlockPos : anchorPos, 1), () => {
+  clampAnchorPosIntoCell(doc, (_hoisted$codeBlockSta = hoisted === null || hoisted === void 0 ? void 0 : hoisted.codeBlockStart) !== null && _hoisted$codeBlockSta !== void 0 ? _hoisted$codeBlockSta : anchorPos, 1), () => {
     const host = buildContributorTagHost(diffId, tagAnchorName);
     mount = mountContributorTag({
       anchorName: tagAnchorName,
@@ -229,5 +267,6 @@ export const createContributorTagWidget = ({
       unmountContributorTag(mount);
       mount = undefined;
     }
-  });
+  }));
+  return decorations;
 };

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

@@ -273,7 +273,7 @@ export const createInlineChangedDecoration = ({
   // 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(...tagWidget);
   }
   return decorations;
 };

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

@@ -3,10 +3,10 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { isExtendedEnabled } from '../isExtendedEnabled';
 import { countEmptyTextBlockOnlySlice } from '../utils/emptyTextBlocks';
 import { isEmptyParagraphSlice } from '../utils/isEmptyParagraphSlice';
-import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
+import { clampAnchorPosIntoCell, createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
-import { createContributorTagHost, unmountContributorTag } from './createContributorTagWidget';
-import { AnchorTypeKey, buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
+import { createContributorTagHost, resolveHoistedCodeBlockAnchor, unmountContributorTag } from './createContributorTagWidget';
+import { AnchorTypeKey, buildContributorTagDecorationSpec, buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
 import { absorbFirstChildMarginReset } from './utils/absorbFirstChildMarginReset';
 import { createDeletedLineBreakDecoration } from './utils/createDeletedLineBreakWidget';
 import { createMarginAbsorber } from './utils/createMarginAbsorber';
@@ -405,7 +405,13 @@ export const createNodeChangedDecorationWidget = ({
       }
     }
   });
-  let contributorTagAnchorName;
+
+  // A change inside a code block hoists its tag out of the block (EDITOR-9045).
+  const hoistedCodeBlockAnchor = canTagWidget ? resolveHoistedCodeBlockAnchor(newDoc, safeInsertPos, diffId) : undefined;
+  if (hoistedCodeBlockAnchor) {
+    decorations.push(hoistedCodeBlockAnchor.marker);
+  }
+  let contributorTagAnchorName = hoistedCodeBlockAnchor === null || hoistedCodeBlockAnchor === void 0 ? void 0 : hoistedCodeBlockAnchor.anchorName;
   if (!isInserted && deletedColumns !== null && deletedColumns !== void 0 && deletedColumns.length) {
     const table = dom.querySelector('table');
     const firstRow = table === null || table === void 0 ? void 0 : table.rows[0];
@@ -465,6 +471,13 @@ export const createNodeChangedDecorationWidget = ({
     dom.style.setProperty('anchor-name', `--${buildAnchorDecorationKey({
       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 (fg('confluence_ncs_step_diffing_version_history')) {
+      contributorTagAnchorName ??= buildAnchorDecorationKey({
+        diffId
+      });
+    }
   }
 
   // Taken down in the widget's `destroy` below: `dom` is rebuilt on every recalculation, so the tag
@@ -473,17 +486,41 @@ export const createNodeChangedDecorationWidget = ({
   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.
-    const tagHost = createContributorTagHost({
-      anchorName: contributorTagAnchorName,
-      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).
+      let hoistedTagMount;
+      decorations.push(Decoration.widget(clampAnchorPosIntoCell(newDoc, hoistedCodeBlockAnchor.codeBlockStart, 1), () => {
+        var _tagHost$host;
+        const tagHost = createContributorTagHost({
+          anchorName: contributorTagAnchorName,
+          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');
+      }, {
+        ...buildContributorTagDecorationSpec(diffId),
+        side: 1,
+        marks: [],
+        ignoreSelection: true,
+        stopEvent: () => true,
+        destroy: () => {
+          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.
+      const tagHost = createContributorTagHost({
+        anchorName: contributorTagAnchorName,
+        diffId,
+        mountContext: tagMountContext
+      });
+      if (tagHost) {
+        dom.prepend(tagHost.host);
+        tagMount = tagHost.mount;
+      }
     }
   }
   if (showIndicators && isExtendedEnabled(diffType)) {

package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js

@@ -39,10 +39,15 @@ const getChangedContentStyleNext = (colorScheme, isActive = false, isInserted =
   if (isExtendedEnabled(diffType) && isInserted) {
     return buildInsertedInlineStyle(colors, isActive, hideAddedDiffsUnderline);
   }
-  if (isActive) {
-    return buildDeletedInlineContentStyle(colors, 'active');
+  const base = buildDeletedInlineContentStyle(colors, isActive ? 'active' : 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 (fg('confluence_ncs_step_diffing_version_history') && colors.deletedInlineTreatment === 'glyphTint' && isExtendedEnabled(diffType)) {
+    return base + buildDeletedInlineContentStyleExtended(colors, isActive);
   }
-  return buildDeletedInlineContentStyle(colors, expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'new' : 'default');
+  return base;
 };
 const getChangedNodeStyleNext = (nodeName, colorScheme, isInserted = false, isActive = false, diffType, hideAddedDiffsUnderline = false) => {
   const colors = getColorScheme(colorScheme);

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

@@ -301,7 +301,7 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
       mountContext: tagMountContext
     });
     if (tagWidget) {
-      decorations.push(tagWidget);
+      decorations.push.apply(decorations, _toConsumableArray(tagWidget));
     }
   }
   return decorations;

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

@@ -419,7 +419,7 @@ export var createChangedRowDecorationWidgets = function createChangedRowDecorati
       }));
     }
     if (tagWidget) {
-      decorations.push(tagWidget);
+      decorations.push.apply(decorations, _toConsumableArray(tagWidget));
     }
     return decorations;
   });

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

@@ -6,7 +6,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { ContributorTagController } from '../../ui/ContributorTag/contributorTagController';
 import { buildCharsByOffset, isWhitespaceChar } from '../utils/charsByOffset';
 import { clampAnchorPosIntoCell } from './createAnchorDecorationWidgets';
-import { buildContributorTagDecorationSpec } from './decorationKeys';
+import { AnchorTypeKey, buildAnchorDecorationKey, buildContributorTagDecorationSpec } from './decorationKeys';
 
 /** Marks the host element of one tag, so a tag can be found in the document by its own diff. */
 export var CONTRIBUTOR_TAG_HOST_ATTRIBUTE = 'data-contributor-tag-host';
@@ -168,13 +168,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) {
+export var 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') {
@@ -185,14 +184,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).
+ */
+export var resolveHoistedCodeBlockAnchor = function resolveHoistedCodeBlockAnchor(doc, pos, diffId) {
+  var codeBlockStart = resolveCodeBlockStart(doc, pos);
+  if (codeBlockStart === undefined) {
+    return undefined;
+  }
+  var anchorName = buildAnchorDecorationKey({
+    diffId: diffId,
+    anchorType: AnchorTypeKey.tag
+  });
+  var marker = 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`.
  */
 export var 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,
@@ -204,17 +236,23 @@ export var createContributorTagWidget = function createContributorTagWidget(_ref
   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 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(Decoration.widget(
   // Keep the host out of the table row's grid (EDITOR-8442).
-  clampAnchorPosIntoCell(doc, codeBlockPos !== null && codeBlockPos !== void 0 ? codeBlockPos : anchorPos, 1), function () {
+  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,
@@ -236,5 +274,6 @@ export var createContributorTagWidget = function createContributorTagWidget(_ref
       unmountContributorTag(mount);
       mount = undefined;
     }
-  }));
+  })));
+  return decorations;
 };

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

@@ -284,7 +284,7 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
   // 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, _toConsumableArray(tagWidget));
   }
   return decorations;
 };

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

@@ -6,10 +6,10 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { isExtendedEnabled } from '../isExtendedEnabled';
 import { countEmptyTextBlockOnlySlice } from '../utils/emptyTextBlocks';
 import { isEmptyParagraphSlice } from '../utils/isEmptyParagraphSlice';
-import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
+import { clampAnchorPosIntoCell, createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
-import { createContributorTagHost, unmountContributorTag } from './createContributorTagWidget';
-import { AnchorTypeKey, buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
+import { createContributorTagHost, resolveHoistedCodeBlockAnchor, unmountContributorTag } from './createContributorTagWidget';
+import { AnchorTypeKey, buildContributorTagDecorationSpec, buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
 import { absorbFirstChildMarginReset } from './utils/absorbFirstChildMarginReset';
 import { createDeletedLineBreakDecoration } from './utils/createDeletedLineBreakWidget';
 import { createMarginAbsorber } from './utils/createMarginAbsorber';
@@ -412,7 +412,13 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
       }
     }
   });
-  var contributorTagAnchorName;
+
+  // A change inside a code block hoists its tag out of the block (EDITOR-9045).
+  var hoistedCodeBlockAnchor = canTagWidget ? 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];
@@ -472,6 +478,13 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     dom.style.setProperty('anchor-name', "--".concat(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 (fg('confluence_ncs_step_diffing_version_history')) {
+      contributorTagAnchorName !== null && contributorTagAnchorName !== void 0 ? contributorTagAnchorName : contributorTagAnchorName = buildAnchorDecorationKey({
+        diffId: diffId
+      });
+    }
   }
 
   // Taken down in the widget's `destroy` below: `dom` is rebuilt on every recalculation, so the tag
@@ -480,17 +493,42 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   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 = 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(Decoration.widget(clampAnchorPosIntoCell(newDoc, hoistedCodeBlockAnchor.codeBlockStart, 1), function () {
+        var _tagHost$host;
+        var tagHost = 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({}, buildContributorTagDecorationSpec(diffId)), {}, {
+        side: 1,
+        marks: [],
+        ignoreSelection: true,
+        stopEvent: function stopEvent() {
+          return true;
+        },
+        destroy: function destroy() {
+          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 = createContributorTagHost({
+        anchorName: contributorTagAnchorName,
+        diffId: diffId,
+        mountContext: tagMountContext
+      });
+      if (tagHost) {
+        dom.prepend(tagHost.host);
+        tagMount = tagHost.mount;
+      }
     }
   }
   if (showIndicators && isExtendedEnabled(diffType)) {

package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js

@@ -48,10 +48,15 @@ var getChangedContentStyleNext = function getChangedContentStyleNext(colorScheme
   if (isExtendedEnabled(diffType) && isInserted) {
     return buildInsertedInlineStyle(colors, isActive, hideAddedDiffsUnderline);
   }
-  if (isActive) {
-    return buildDeletedInlineContentStyle(colors, 'active');
+  var base = buildDeletedInlineContentStyle(colors, isActive ? 'active' : 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 (fg('confluence_ncs_step_diffing_version_history') && colors.deletedInlineTreatment === 'glyphTint' && isExtendedEnabled(diffType)) {
+    return base + buildDeletedInlineContentStyleExtended(colors, isActive);
   }
-  return buildDeletedInlineContentStyle(colors, 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/types/pm-plugins/decorations/createContributorTagWidget.d.ts

@@ -48,9 +48,27 @@ export declare const createContributorTagHost: ({ anchorName, diffId, mountConte
     mount: ContributorTagMount | undefined;
 } | undefined;
 /**
- * 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`.
+ * Position just before the code block enclosing `pos`, or `undefined` if there is none.
+ *
+ * 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).
+ */
+export declare const resolveCodeBlockStart: (doc: PMNode, pos: number) => number | undefined;
+/**
+ * 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).
+ */
+export declare const resolveHoistedCodeBlockAnchor: (doc: PMNode, pos: number, diffId: string) => {
+    anchorName: string;
+    codeBlockStart: number;
+    marker: Decoration;
+} | undefined;
+/**
+ * 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`.
@@ -63,8 +81,8 @@ export declare const createContributorTagWidget: ({ anchorAtRangeStart, anchorNa
     anchorAtRangeStart?: boolean;
     /**
      * The `anchor-name` the block's own decoration carries, so the tag positions against that box
-     * rather than against its host — the block's margin and padding are then the browser's to
-     * resolve, and the tag sits on the same corner for every node type (EDITOR-8933).
+     * rather than against its host (EDITOR-8933). Ignored inside a code block, which anchors to its
+     * own marker instead.
      */
     anchorName?: string;
     diffId: string;
@@ -72,4 +90,4 @@ export declare const createContributorTagWidget: ({ anchorAtRangeStart, anchorNa
     from: number;
     mountContext?: ContributorTagMountContext;
     to: number;
-}) => Decoration | undefined;
+}) => Decoration[] | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "17.1.6",
+	"version": "17.1.7",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -71,7 +71,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^123.5.0",
+		"@atlaskit/editor-common": "^123.7.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"