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

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

@@ -126,6 +126,7 @@ export const createInlineChangedDecoration = ({
   colorScheme,
   isActive = false,
   isInserted = true,
+  leftAnchorId,
   isAtomicInlineNode = false,
   shouldHideDeleted = false,
   showContributorTags = false,
@@ -157,6 +158,7 @@ export const createInlineChangedDecoration = ({
       colorScheme,
       decorationType: 'inline',
       diffId,
+      leftAnchorId,
       isActive,
       isInserted
     }))];
@@ -227,6 +229,7 @@ export const createInlineChangedDecoration = ({
     colorScheme,
     decorationType: 'inline',
     diffId,
+    leftAnchorId,
     isActive,
     isInserted
   }))];
@@ -262,14 +265,15 @@ export const createInlineChangedDecoration = ({
       doc,
       from: anchorFrom,
       to: anchorTo,
-      diffId
+      diffId,
+      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(...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';
@@ -29,6 +29,7 @@ const createTableCellContentWidgets = ({
   nodeViewSerializer,
   colorScheme,
   isInserted,
+  leftAnchorId,
   diffType
 }) => {
   // Collect the inner content position of each cell in the new document within
@@ -87,6 +88,7 @@ const createTableCellContentWidgets = ({
         colorScheme,
         decorationType: 'widget',
         diffId: crypto.randomUUID(),
+        leftAnchorId,
         isInserted,
         diffType,
         ...(isExtendedEnabled(diffType) && {
@@ -113,6 +115,7 @@ export const createNodeChangedDecorationWidget = ({
   activeIndexPos,
   // This is false by default as this is generally used to show deleted content
   isInserted = false,
+  leftAnchorId,
   showContributorTags = false,
   showIndicators = false,
   // When true, render the deleted content *after* (below) the new content instead of
@@ -177,6 +180,7 @@ export const createNodeChangedDecorationWidget = ({
       nodeViewSerializer,
       colorScheme,
       isInserted,
+      leftAnchorId,
       diffType
     });
   }
@@ -193,6 +197,7 @@ export const createNodeChangedDecorationWidget = ({
       colorScheme,
       isActive,
       isInserted,
+      leftAnchorId,
       diffType,
       intl,
       // Needed for the row's own indicator anchor; this path returns before the
@@ -400,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];
@@ -460,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
@@ -468,24 +486,55 @@ 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)) {
     const leftAnchor = createLeftAnchorWidget({
       doc: newDoc,
       from: safeInsertPos,
-      diffId
+      diffId,
+      leftAnchorId,
+      measureElement: fg('platform_editor_ai_show_diff_patch_2') ? dom : undefined,
+      sliceOverride: fg('platform_editor_ai_show_diff_patch_2') ? slice : undefined,
+      underlyingRange: fg('platform_editor_ai_show_diff_patch_2') ? {
+        from: change.fromB,
+        to: change.toB
+      } : undefined
     });
     if (leftAnchor) {
       decorations.push(leftAnchor);
@@ -497,6 +546,7 @@ export const createNodeChangedDecorationWidget = ({
       colorScheme,
       decorationType: 'widget',
       diffId,
+      leftAnchorId,
       isActive,
       isInserted,
       diffType,

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

@@ -73,6 +73,7 @@ export const buildDiffDecorationSpec = ({
   diffId,
   isActive,
   isInserted,
+  leftAnchorId,
   nodeName,
   side,
   diffType
@@ -96,6 +97,9 @@ export const buildDiffDecorationSpec = ({
   ...(isInserted !== undefined ? {
     isInserted
   } : {}),
+  ...(leftAnchorId ? {
+    leftAnchorId
+  } : {}),
   ...(colorScheme ? {
     colorScheme
   } : {}),
@@ -154,6 +158,9 @@ export const extractDiffDescriptors = decorations => decorations.find(undefined,
       colorScheme: spec.colorScheme
     } : {}),
     id: spec.diffId,
+    ...(spec.leftAnchorId ? {
+      leftAnchorId: spec.leftAnchorId
+    } : {}),
     ...(spec.isInserted !== undefined ? {
       isInserted: spec.isInserted
     } : {}),

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/es2019/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -5,6 +5,8 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { buildAnchorDecorationKey, AnchorTypeKey } from '../../pm-plugins/decorations/decorationKeys';
 import { IndicatorBar } from './IndicatorBar';
 const renderIndicatorBar = descriptor => {
+  var _descriptor$leftAncho;
+  const leftAnchorId = (_descriptor$leftAncho = descriptor.leftAnchorId) !== null && _descriptor$leftAncho !== void 0 ? _descriptor$leftAncho : descriptor.id;
   switch (descriptor.type) {
     case 'inline':
       {
@@ -21,7 +23,7 @@ const renderIndicatorBar = descriptor => {
             anchorType: AnchorTypeKey.to
           }),
           anchorLeft: buildAnchorDecorationKey({
-            diffId: descriptor.id,
+            diffId: leftAnchorId,
             anchorType: AnchorTypeKey.left
           })
         });
@@ -41,7 +43,7 @@ const renderIndicatorBar = descriptor => {
           anchorTop: blockAnchor,
           anchorBottom: blockAnchor,
           anchorLeft: buildAnchorDecorationKey({
-            diffId: descriptor.id,
+            diffId: leftAnchorId,
             anchorType: AnchorTypeKey.left
           })
         });
@@ -59,7 +61,7 @@ const renderIndicatorBar = descriptor => {
             diffId: descriptor.id
           }),
           anchorLeft: buildAnchorDecorationKey({
-            diffId: descriptor.id,
+            diffId: leftAnchorId,
             anchorType: AnchorTypeKey.left
           }),
           anchorLeftFallback: buildAnchorDecorationKey({

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

@@ -185,6 +185,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,
@@ -223,6 +224,7 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
           },
           colorScheme: colorScheme,
           isInserted: isInserted,
+          leftAnchorId: leftAnchorId,
           isActive: isActive,
           shouldHideDeleted: shouldHideDeleted,
           showContributorTags: showContributorTags,
@@ -264,6 +266,7 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
         },
         colorScheme: colorScheme,
         isInserted: isInserted,
+        leftAnchorId: leftAnchorId,
         isActive: _isActive,
         shouldHideDeleted: shouldHideDeleted,
         showContributorTags: showContributorTags,
@@ -546,6 +549,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 = 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 ? getColorSchemeForChange(change, attributedChanges, attributionColors, colorScheme) : colorScheme;
     var attributionKey = showContributorTags ? getAttributionKeyForChange(change, attributedChanges) : undefined;
     var isActive = isRangeActive(activeIndexPos, change.fromB, change.toB);
@@ -678,6 +685,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
                 fromB: from,
                 toB: to
               },
+              leftAnchorId: leftAnchorId,
               doc: tr.doc,
               colorScheme: changeColorScheme,
               isActive: isActive,
@@ -703,6 +711,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
         decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration(_objectSpread({
           attributionKey: attributionKey,
           change: change,
+          leftAnchorId: leftAnchorId,
           doc: tr.doc,
           colorScheme: changeColorScheme,
           isActive: isActive,
@@ -737,7 +746,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) {
@@ -762,6 +772,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
           newDoc: tr.doc,
           intl: intl,
           activeIndexPos: activeIndexPos,
+          leftAnchorId: leftAnchorId,
           showContributorTags: showContributorTags,
           tagMountContext: tagMountContext
         }, isExtendedEnabled(diffType) && {