@atlaskit/editor-plugin-show-diff 16.0.2 → 16.0.4

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

@@ -17,10 +17,12 @@ import { extractDiffDescriptors } from '../decorations/decorationKeys';
 import { extractContributorTags } from '../decorations/extractContributorTags';
 import { getAttrChangeRanges, stepIsValidAttrChange } from '../decorations/utils/getAttrChangeRanges';
 import { getMarkChangeRanges } from '../decorations/utils/getMarkChangeRanges';
+import { getScrollableDecorations } from '../getScrollableDecorations';
 import { getDefaultDiffType, isExtendedEnabled } from '../isExtendedEnabled';
 import { diffBySteps } from './diffBySteps';
 import { groupChangesByBlock } from './groupChangesByBlock';
 import { isMarkOnlyChange } from './isMarkOnlyChange';
+import { isOpenTokenOnlyChange } from './isOpenTokenOnlyChange';
 import { optimizeChanges } from './optimizeChanges';
 import { selectTokenEncoder } from './selectTokenEncoder';
 import { collapseOverlappingChanges, simplifyChangesWithAttribution } from './simplifyChangesWithAttribution';
@@ -463,6 +465,16 @@ const calculateDiffDecorationsInner = ({
       newDoc: tr.doc
     });
 
+    // The deleted side of a change over a node's open token is an attribute state rather than
+    // content, so there is nothing for the deleted-content widget to draw. Decided here, with
+    // the other deleted-side suppressions, so the widget is never asked for a slice it can only
+    // render as an empty copy of the block (EDITOR-8912). Its inserted side is untouched, and
+    // the node's content change is a change of its own.
+    const hasNoDeletedContent = fg('platform_editor_ai_show_diff_patch_1') && change.deleted.length > 0 && isOpenTokenOnlyChange({
+      change,
+      originalDoc
+    });
+
     // Hoisted because it decides BOTH where the deleted widget is anchored and — since the
     // widget pins whichever end of the range it sits at — how the indicator anchors below are
     // allowed to move.
@@ -572,7 +584,7 @@ const calculateDiffDecorationsInner = ({
         coarseTableCellsOnly: useCoarseTableDecoration
       }));
     }
-    if (change.deleted.length > 0 && !isMarkOnly) {
+    if (change.deleted.length > 0 && !isMarkOnly && !hasNoDeletedContent) {
       const shouldHideDeleted = shouldHideDeletedSide({
         change,
         diffType,
@@ -732,7 +744,10 @@ const calculateDiffDecorationsInner = ({
   });
   const decorationSet = DecorationSet.empty.add(tr.doc, decorations);
   return {
-    contributorTags: showContributorTags ? extractContributorTags(decorationSet, contributors) : [],
+    contributorTags: showContributorTags ? extractContributorTags(decorationSet, contributors, activeIndexPos,
+    // The stops the step buttons walk, so a stop cannot hold a second tag for one
+    // contributor that navigation can never reach.
+    getScrollableDecorations(decorationSet, tr.doc, diffType)) : [],
     decorations: decorationSet,
     diffDescriptors: extractDiffDescriptors(decorationSet)
   };

package/dist/es2019/pm-plugins/calculateDiff/isOpenTokenOnlyChange.js

@@ -0,0 +1,27 @@
+/**
+ * Whether a change spans nothing but a block node's open token, so its deleted side carries no
+ * content.
+ *
+ * The attribute-aware token encoder folds a node's diffable attributes into its open token, so a
+ * same-type replacement — an AI suggestion rewriting a code block — is reported as two changes: one
+ * over the single position of that token, carrying the attribute change, and one for the content.
+ * Slicing the first yields the node with none of its content, which leaves the deleted-content
+ * widget nothing to draw but an empty copy of the block (EDITOR-8912). The content change is a
+ * change of its own and is decorated in place.
+ *
+ * A whole node is not matched: its range covers its close token too. Neither is an empty leaf (a
+ * `rule`, a `blockCard`), which is one position but slices closed rather than open.
+ */
+export const isOpenTokenOnlyChange = ({
+  change,
+  originalDoc
+}) => {
+  if (change.toA - change.fromA !== 1) {
+    return false;
+  }
+  const slice = originalDoc.slice(change.fromA, change.toA);
+  // `childCount === 1` already means `firstChild` is there; the optional chain is for the type,
+  // which has it nullable.
+  const node = slice.content.firstChild;
+  return (slice.openStart > 0 || slice.openEnd > 0) && slice.content.childCount === 1 && (node === null || node === void 0 ? void 0 : node.isBlock) === true && node.content.size === 0;
+};

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

@@ -44,6 +44,16 @@ const edgeCases = (doc, from) => {
     nodeStart,
     beforePos
   } = resolved;
+  if (node.type.name === 'layoutSection' && fg('platform_editor_ai_show_diff_patch_1')) {
+    // Columns extend past the node-view wrapper via negative margins (12px or 20px).
+    // Measure their container so the indicator stays outside the diff outline, including
+    // breakout layouts and after responsive resizing, without changing the column geometry.
+    return {
+      beforePos,
+      measurePos: beforePos,
+      measureSelector: '[data-layout-section]'
+    };
+  }
 
   /**
    * All resizable nodes will need dynamic calculations of the block indicator left anchor
@@ -152,10 +162,12 @@ export const createLeftAnchorWidget = ({
     anchor.style.setProperty('transform', 'translateX(-50%)');
     wrapper.appendChild(anchor);
     const measureWidth = () => {
+      var _nodeDOM$querySelecto;
       if (getPos() === undefined || edgeCase.measurePos === undefined) {
         return;
       }
-      const dom = view.nodeDOM(edgeCase.measurePos);
+      const nodeDOM = view.nodeDOM(edgeCase.measurePos);
+      const 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) {
         // The left anchor only needs the container width so the
         // IndicatorBar can align against the block's horizontal extent.

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

@@ -39,7 +39,24 @@ export const mountContributorTag = ({
     diffId
   });
   controller.mount(host);
-  return controller;
+
+  /**
+   * Kept alive when ProseMirror only rebuilt the widget desc around this same host: a document
+   * change remaps the decoration and fires `destroy`, but an element `toDOM` is reused verbatim
+   * and runs no mount callback, so tearing down here left an active change with no tag
+   * (EDITOR-8971).
+   *
+   * Deferred, because the host is still attached while that update is in flight. A host outside a
+   * live editor root is a real removal — including the view being destroyed, which drops the root.
+   */
+  return {
+    destroy: () => queueMicrotask(() => {
+      var _mountContext$getEdit;
+      if (!host.isConnected || !((_mountContext$getEdit = mountContext.getEditorRoot()) !== null && _mountContext$getEdit !== void 0 && _mountContext$getEdit.contains(host))) {
+        controller.destroy();
+      }
+    })
+  };
 };
 export const unmountContributorTag = mount => {
   mount === null || mount === void 0 ? void 0 : mount.destroy();

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

@@ -34,12 +34,44 @@ const leadsReplacement = widget => fg('confluence_ncs_step_diffing_version_histo
  */
 const isSameBlockChange = (inner, block) => inner.spec.attributionKey === block.spec.attributionKey && (block.from <= inner.from && inner.to <= block.to || inner.from <= block.from && block.to <= inner.to);
 
+/**
+ * Which of two changes in the same range leads, and so is the one a tag captions. Position first,
+ * then `side`, since deleted content shares its `from` with the content that replaced it and paints
+ * above; then the narrower range, so a change nested in another captions itself.
+ */
+const byLeadingPosition = (a, b) => {
+  var _a$decoration$spec$si, _b$decoration$spec$si;
+  return a.decoration.from - b.decoration.from || ((_a$decoration$spec$si = a.decoration.spec.side) !== null && _a$decoration$spec$si !== void 0 ? _a$decoration$spec$si : 0) - ((_b$decoration$spec$si = b.decoration.spec.side) !== null && _b$decoration$spec$si !== void 0 ? _b$decoration$spec$si : 0) || a.decoration.to - a.decoration.from - (b.decoration.to - b.decoration.from);
+};
+
+/** The targets a navigation range wholly covers, leader first. */
+const containedBy = (targets, {
+  from,
+  to
+}) => targets.filter(({
+  decoration
+}) => from <= decoration.from && decoration.to <= to).sort(byLeadingPosition);
+
+/**
+ * The one tag a navigation step reveals. `spec.isActive` is no use here: it covers everything the
+ * group's union range touches, so several tags revealed over each other (EDITOR-8971). Hence
+ * containment, and the leading change of what it covers.
+ */
+const resolveActiveTarget = (surviving, activeIndexPos) => containedBy(surviving, activeIndexPos)[0];
+
 /**
  * One model per diff decoration whose attribution resolves to a supplied contributor; anything
  * unattributed, untaggable or unresolved is skipped. A replacement's two decorations are collapsed
  * into a single tag, on whichever half renders first — see `isSameChange` and `leadsReplacement`.
+ *
+ * `activeIndexPos`, when given, reveals exactly one of the tags — see `resolveActiveTarget`.
+ * Absent, each tag keeps the active state its own decoration was drawn with.
+ *
+ * `stops`, when given, is the navigation stop list the step buttons walk
+ * (`getScrollableDecorations`). One contributor cannot hold two tags in one stop, since only the
+ * leading one would ever be reachable. Absent, every decoration keeps its own tag.
  */
-export const extractContributorTags = (decorations, contributors) => {
+export const extractContributorTags = (decorations, contributors, activeIndexPos, stops) => {
   if (!contributors) {
     return [];
   }
@@ -77,10 +109,15 @@ export const extractContributorTags = (decorations, contributors) => {
   const linkedDiffIds = new Map();
   const folded = new Set();
   const fold = (host, target) => {
-    var _linkedDiffIds$get;
+    var _linkedDiffIds$get, _linkedDiffIds$get2;
     folded.add(target);
     const hostDiffId = host.decoration.spec.diffId;
-    linkedDiffIds.set(hostDiffId, [...((_linkedDiffIds$get = linkedDiffIds.get(hostDiffId)) !== null && _linkedDiffIds$get !== void 0 ? _linkedDiffIds$get : []), target.decoration.spec.diffId]);
+    const targetDiffId = target.decoration.spec.diffId;
+    // A target that already hosts folded tags hands them up, so no hover target is orphaned when
+    // one host folds into another.
+    const inherited = (_linkedDiffIds$get = linkedDiffIds.get(targetDiffId)) !== null && _linkedDiffIds$get !== void 0 ? _linkedDiffIds$get : [];
+    linkedDiffIds.delete(targetDiffId);
+    linkedDiffIds.set(hostDiffId, [...((_linkedDiffIds$get2 = linkedDiffIds.get(hostDiffId)) !== null && _linkedDiffIds$get2 !== void 0 ? _linkedDiffIds$get2 : []), targetDiffId, ...inherited]);
   };
   for (const target of targets) {
     const {
@@ -120,15 +157,38 @@ export const extractContributorTags = (decorations, contributors) => {
       fold(host, target);
     }
   }
-  return targets.filter(target => !folded.has(target)).map(({
-    contributor,
-    decoration: {
-      spec
+
+  // One tag per contributor per navigation stop. The folds above only catch a replacement's two
+  // halves and a block's own highlights; two of one contributor's changes that merely touch are a
+  // single stop (`groupTouchingDecorations`) yet kept a tag each, so the stop's trailing tag was
+  // drawn but could never be stepped to (EDITOR-8971). It folds into the leading tag of its
+  // contributor, staying a hover target. Contributors are kept apart: a stop spanning two of them
+  // still captions each, rather than crediting one for the other's change.
+  for (const stop of stops !== null && stops !== void 0 ? stops : []) {
+    const byContributor = new Map();
+    for (const target of containedBy(targets.filter(target => !folded.has(target)), stop)) {
+      var _target$decoration$sp, _byContributor$get;
+      const key = (_target$decoration$sp = target.decoration.spec.attributionKey) !== null && _target$decoration$sp !== void 0 ? _target$decoration$sp : '';
+      byContributor.set(key, [...((_byContributor$get = byContributor.get(key)) !== null && _byContributor$get !== void 0 ? _byContributor$get : []), target]);
     }
-  }) => {
+    for (const [leader, ...trailing] of byContributor.values()) {
+      trailing.forEach(target => fold(leader, target));
+    }
+  }
+  const surviving = targets.filter(target => !folded.has(target));
+  const activeTarget = activeIndexPos === undefined ? undefined : resolveActiveTarget(surviving, activeIndexPos);
+  return surviving.map(target => {
+    const {
+      contributor,
+      decoration: {
+        spec
+      }
+    } = target;
     const connected = contributor.connectedToKey ? contributors[contributor.connectedToKey] : undefined;
     const connectedContributor = connected ? toTagContributor(connected) : undefined;
     const linked = linkedDiffIds.get(spec.diffId);
+    // Only the navigated tag reveals; with no active range, the decoration's own state stands.
+    const isActive = activeIndexPos === undefined ? spec.isActive : target === activeTarget;
     return {
       contributor: toTagContributor(contributor),
       diffId: spec.diffId,
@@ -138,8 +198,8 @@ export const extractContributorTags = (decorations, contributors) => {
       ...(spec.colorScheme ? {
         colorScheme: spec.colorScheme
       } : {}),
-      ...(spec.isActive !== undefined ? {
-        isActive: spec.isActive
+      ...(isActive !== undefined ? {
+        isActive
       } : {}),
       ...(spec.isInserted !== undefined ? {
         isInserted: spec.isInserted

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

@@ -206,25 +206,25 @@ const applyMultiContainerLikeStyles = ({
   const targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
   const nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
   if (targetNode.type.name === 'decisionList') {
-    const nestedInsertedNodeStyle = resolveNestedInsertedNodeStyle();
+    const nestedInsertedNodeStyle = resolveNestedInsertedNodeStyle(colorScheme);
     element.querySelectorAll('li').forEach(listItem => {
       const currentListItemStyle = listItem.getAttribute('style') || '';
-      listItem.setAttribute('style', `${currentListItemStyle}${nestedInsertedNodeStyle}`);
+      listItem.setAttribute('style', fg('platform_editor_ai_show_diff_patch_1') ? combineStyles(currentListItemStyle, nestedInsertedNodeStyle) : `${currentListItemStyle}${nestedInsertedNodeStyle}`);
     });
   } else if (targetNode.type.name === 'layoutSection') {
-    const nestedInsertedNodeStyle = resolveNestedInsertedNodeStyle();
+    const nestedInsertedNodeStyle = resolveNestedInsertedNodeStyle(colorScheme);
     element.querySelectorAll('[data-layout-column="true"]').forEach(section => {
       const currentSectionStyle = section.getAttribute('style') || '';
-      section.setAttribute('style', `${currentSectionStyle}${nestedInsertedNodeStyle}`);
+      section.setAttribute('style', fg('platform_editor_ai_show_diff_patch_1') ? combineStyles(currentSectionStyle, nestedInsertedNodeStyle) : `${currentSectionStyle}${nestedInsertedNodeStyle}`);
     });
   } else if (targetNode.type.name === 'taskList') {
-    const nestedInsertedNodeStyle = resolveNestedInsertedNodeStyle();
+    const nestedInsertedNodeStyle = resolveNestedInsertedNodeStyle(colorScheme);
     element.querySelectorAll('li').forEach(listItem => {
       const currentListItemStyle = listItem.getAttribute('style') || '';
       listItem.setAttribute('style', `${currentListItemStyle}${nestedInsertedNodeStyle}`);
     });
   }
-  element.setAttribute('style', `${currentStyle};${nodeSpecificStyle}`);
+  element.setAttribute('style', fg('platform_editor_ai_show_diff_patch_1') ? combineStyles(currentStyle, nodeSpecificStyle) : `${currentStyle};${nodeSpecificStyle}`);
 };
 const combineStyles = (currentStyle, appendedStyle) => {
   const separator = currentStyle && appendedStyle && !currentStyle.trimEnd().endsWith(';') ? '; ' : '';

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

@@ -11,6 +11,7 @@
  * keeping the `*Next` bodies.
  */
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../../isExtendedEnabled';
 import { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildAddedCellOverlayStyleNew, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildDeletedInlineContentStyle, buildDeletedInlineContentStyleExtended, buildDeletedLozengeActiveStyle, buildDeletedLozengeStyle, buildDeletedNodeCSSVariables, buildDeletedQuoteNodeWithLozengeStyle, buildDeletedStrikethroughLine, buildDeletedWrappedBlockOutline, buildInsertedBlockNodeStyle, buildInsertedInlineStyle, buildInsertStyleInBlockExtended, buildInsertStyleInBlockExtendedNoUnderline, buildInsertStyleNode } from '../colorSchemes/factory';
@@ -19,9 +20,7 @@ import { getChangedContentStyleLegacy, getChangedNodeStyleLegacy, getDeletedCont
 const getColorScheme = colorScheme => colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
 
 /**
- * Inserted content inside a multi-container or list node always uses the standard scheme, so a
- * traditional diff shows purple here. Pre-existing: these call sites predate traditional.
- * Preserved as-is; see EDITOR-8281.
+ * Preserve the historical purple nested outlines when the layout/decision diff patch is off.
  */
 const nestedContentScheme = standardScheme;
 
@@ -49,7 +48,7 @@ const getChangedNodeStyleNext = (nodeName, colorScheme, isInserted = false, isAc
   const colors = getColorScheme(colorScheme);
   if (isExtendedEnabled(diffType) && isInserted) {
     if (isMultiContainerBlockNode(nodeName)) {
-      return hideAddedDiffsUnderline ? buildInsertStyleInBlockExtendedNoUnderline(nestedContentScheme) : buildInsertStyleInBlockExtended(nestedContentScheme);
+      return hideAddedDiffsUnderline || fg('platform_editor_ai_show_diff_patch_1') ? buildInsertStyleInBlockExtendedNoUnderline(nestedContentScheme) : buildInsertStyleInBlockExtended(nestedContentScheme);
     }
     if (isTextLikeBlockNode(nodeName)) {
       return undefined;
@@ -101,7 +100,7 @@ const resolveRemovedLozengeStyleNext = (colorScheme, isActive) => {
   const colors = getColorScheme(colorScheme);
   return isActive ? buildDeletedLozengeActiveStyle(colors) : buildDeletedLozengeStyle(colors);
 };
-const resolveNestedInsertedNodeStyleNext = () => buildInsertStyleNode(nestedContentScheme);
+const resolveNestedInsertedNodeStyleNext = colorScheme => buildInsertStyleNode(fg('platform_editor_ai_show_diff_patch_1') ? getColorScheme(colorScheme) : nestedContentScheme);
 
 // Only 'stateful' schemes have a resting ring.
 const hasRestingDeletedRingNext = colorScheme => getColorScheme(colorScheme).deletedNodeEmphasis === 'stateful';
@@ -138,10 +137,9 @@ export const resolveRemovedLozengeStyle = (colorScheme, isActive) => isExperimen
 
 /**
  * Style for inserted content nested inside a multi-container or list node — the `decisionList` and
- * `taskList` `li`s and the `layoutSection` columns. Scheme-independent: see
- * `nestedContentScheme` above.
+ * `taskList` `li`s and the `layoutSection` columns.
  */
-export const resolveNestedInsertedNodeStyle = () => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? resolveNestedInsertedNodeStyleNext() : resolveNestedInsertedNodeStyleLegacy();
+export const resolveNestedInsertedNodeStyle = colorScheme => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? resolveNestedInsertedNodeStyleNext(colorScheme) : resolveNestedInsertedNodeStyleLegacy();
 
 /**
  * Whether the colour scheme draws a resting (non-active) ring on a deleted media/embed node, which

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

@@ -9,6 +9,7 @@
  * `colorSchemes/standard.ts`, `colorSchemes/traditional.ts` (EDITOR-8281).
  */
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../../isExtendedEnabled';
 import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyleUnbounded, deletedInlineContentStyleExtended, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlockExtended, editingContentStyleInBlockExtendedNoUnderline, editingStyleExtended, editingStyleExtendedNoUnderline, editingStyleActiveExtended, editingStyleActiveExtendedNoUnderline, editingStyleNode, getStandardDeletedContentStyle, getStandardDeletedContentStyleActive, getStandardDeletedContentStyleNew, addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedCellOverlayStyle, deletedCellOverlayRoundedStyle } from '../colorSchemes/standard';
@@ -97,7 +98,7 @@ export const getChangedNodeStyleLegacy = (nodeName, colorScheme, isInserted = fa
   const isTraditional = colorScheme === 'traditional';
   if (isExtendedEnabled(diffType) && isInserted) {
     if (isMultiContainerBlockNode(nodeName)) {
-      return hideAddedDiffsUnderline ? editingContentStyleInBlockExtendedNoUnderline : editingContentStyleInBlockExtended;
+      return hideAddedDiffsUnderline || fg('platform_editor_ai_show_diff_patch_1') ? editingContentStyleInBlockExtendedNoUnderline : editingContentStyleInBlockExtended;
     }
     if (isTextLikeBlockNode(nodeName)) {
       return undefined;

package/dist/es2019/ui/ContributorTag/buildContributorTagDom.js

@@ -41,6 +41,30 @@ export const CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = 'data-revealed';
  */
 export const TAG_EXIT_FALLBACK_MS = 1200;
 
+/**
+ * The tooltip's look, inline rather than through `VANILLA_TOOLTIP_DEFAULT_CLASS`: this tooltip is
+ * hoisted out of the tag, and that class's rule is scoped under `.ProseMirror` — see
+ * `resolveTooltipContainer`. Otherwise `vanillaTooltipDefaultStyles` in editor-core, which is the
+ * look every other vanilla tooltip has; keep the two in step.
+ */
+export const CONTRIBUTOR_TAG_TOOLTIP_STYLES = {
+  boxSizing: 'border-box',
+  maxWidth: '240px',
+  backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
+  // A `popover` is given one by the UA stylesheet.
+  border: 'none',
+  borderRadius: "var(--ds-radius-small, 3px)",
+  color: "var(--ds-text-inverse, #FFFFFF)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  overflowWrap: 'break-word',
+  paddingBlock: "var(--ds-space-050, 4px)",
+  paddingInline: "var(--ds-space-075, 6px)",
+  whiteSpace: 'normal',
+  // A tooltip is never a hit target — it hangs over the document's own content.
+  pointerEvents: 'none'
+};
+
 // Positioned against the host widget its decoration renders on the change's first character:
 // `bottom: 100%` lifts the tag onto the line above, `inset-inline-start` starts it on that
 // character.

package/dist/es2019/ui/ContributorTag/contributorTagController.js

@@ -3,7 +3,7 @@ import { bind, bindAll } from 'bind-event-listener';
 import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
 import { getAccentTokens } from '../../pm-plugins/decorations/colorSchemes/factory';
 import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
-import { buildContributorTagDom, CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, TAG_EXIT_FALLBACK_MS } from './buildContributorTagDom';
+import { buildContributorTagDom, CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, CONTRIBUTOR_TAG_TOOLTIP_STYLES, TAG_EXIT_FALLBACK_MS } from './buildContributorTagDom';
 import { contributorAvatarRenderer } from './contributorAvatarRenderer';
 import { formatContributorLabel } from './contributorLabel';
 /**
@@ -357,7 +357,7 @@ export class ContributorTagController {
    * shape of `syncVanillaDisabledTooltip` in `mentionNodeView`.
    */
   syncTooltip() {
-    var _this$tooltip2, _this$dom$tag$querySe;
+    var _this$tooltip2;
     const content = this.dom ? this.fullLabel : undefined;
     if (content === this.tooltipContent) {
       return;
@@ -368,17 +368,37 @@ export class ContributorTagController {
     if (!content || !this.dom) {
       return;
     }
-    this.tooltip = new VanillaTooltip(this.dom.tag, content, undefined,
-    // `ak-editor-vanilla-tooltip-default` opts into the shared `VanillaTooltip` look, defined as
-    // `vanillaTooltipDefaultStyles` in both EditorContentContainer stylesheets — keep in sync when
-    // renaming. Those styles are scoped under `.ProseMirror`, and the tag renders inside it.
-    'ak-editor-vanilla-tooltip-default');
+    this.tooltip = new VanillaTooltip(this.dom.tag, content,
+    // Generated id.
+    undefined,
+    // No class: the look is inline, because a hoisted tooltip is outside the `.ProseMirror`
+    // scope `VANILLA_TOOLTIP_DEFAULT_CLASS` is keyed on — see `CONTRIBUTOR_TAG_TOOLTIP_STYLES`.
+    '',
+    // Default delay, no `onShow`, and the default `top` placement.
+    undefined, CONTRIBUTOR_TAG_TOOLTIP_STYLES, undefined, undefined, this.resolveTooltipContainer());
     // `VanillaTooltip` sets `aria-describedby` on its trigger, which would announce the label a
     // second time — the hidden child already announces it, and names the tag with it.
     this.dom.tag.removeAttribute('aria-describedby');
-    // The popover is a child of the trigger, so its text would be a third copy of the same
-    // sentence. It stays visible for sighted users, who need the part of the name the tag clipped.
-    (_this$dom$tag$querySe = this.dom.tag.querySelector(':scope > [role="tooltip"]')) === null || _this$dom$tag$querySe === void 0 ? void 0 : _this$dom$tag$querySe.setAttribute('aria-hidden', 'true');
+    // Out of the tag but still in the document, so its text would otherwise be a third copy of the
+    // same sentence. It stays visible for sighted users, who need the part of the name the tag
+    // clipped.
+    this.tooltip.element.setAttribute('aria-hidden', 'true');
+  }
+
+  /**
+   * Where the tooltip is appended, rather than inside the tag.
+   *
+   * Popper and the browser only agree on a top-layer popover's origin when nothing above it is
+   * transformed, and the tag hangs under the editor's own transformed nodes — inside a wide image
+   * that is `.rich-media-item`, whose `translateX(-50%)` threw the tooltip off screen
+   * (EDITOR-8971). The content area is the nearest ancestor with none of that above it, and keeps
+   * the tooltip inside the editor it belongs to; the document body covers an appearance that has
+   * no content area.
+   */
+  resolveTooltipContainer() {
+    var _editorRoot$closest;
+    const editorRoot = this.options.getEditorRoot();
+    return (_editorRoot$closest = editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.closest('.ak-editor-content-area')) !== null && _editorRoot$closest !== void 0 ? _editorRoot$closest : editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.ownerDocument.body;
   }
 
   /**

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

@@ -25,10 +25,12 @@ import { extractDiffDescriptors } from '../decorations/decorationKeys';
 import { extractContributorTags } from '../decorations/extractContributorTags';
 import { getAttrChangeRanges, stepIsValidAttrChange } from '../decorations/utils/getAttrChangeRanges';
 import { getMarkChangeRanges } from '../decorations/utils/getMarkChangeRanges';
+import { getScrollableDecorations } from '../getScrollableDecorations';
 import { getDefaultDiffType, isExtendedEnabled } from '../isExtendedEnabled';
 import { diffBySteps } from './diffBySteps';
 import { groupChangesByBlock } from './groupChangesByBlock';
 import { isMarkOnlyChange } from './isMarkOnlyChange';
+import { isOpenTokenOnlyChange } from './isOpenTokenOnlyChange';
 import { optimizeChanges } from './optimizeChanges';
 import { selectTokenEncoder } from './selectTokenEncoder';
 import { collapseOverlappingChanges, simplifyChangesWithAttribution } from './simplifyChangesWithAttribution';
@@ -497,6 +499,16 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
       newDoc: tr.doc
     });
 
+    // The deleted side of a change over a node's open token is an attribute state rather than
+    // content, so there is nothing for the deleted-content widget to draw. Decided here, with
+    // the other deleted-side suppressions, so the widget is never asked for a slice it can only
+    // render as an empty copy of the block (EDITOR-8912). Its inserted side is untouched, and
+    // the node's content change is a change of its own.
+    var hasNoDeletedContent = fg('platform_editor_ai_show_diff_patch_1') && change.deleted.length > 0 && isOpenTokenOnlyChange({
+      change: change,
+      originalDoc: originalDoc
+    });
+
     // Hoisted because it decides BOTH where the deleted widget is anchored and — since the
     // widget pins whichever end of the range it sits at — how the indicator anchors below are
     // allowed to move.
@@ -615,7 +627,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
         coarseTableCellsOnly: useCoarseTableDecoration
       }))));
     }
-    if (change.deleted.length > 0 && !isMarkOnly) {
+    if (change.deleted.length > 0 && !isMarkOnly && !hasNoDeletedContent) {
       var _shouldHideDeleted = shouldHideDeletedSide({
         change: change,
         diffType: diffType,
@@ -781,7 +793,10 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
   });
   var decorationSet = DecorationSet.empty.add(tr.doc, decorations);
   return {
-    contributorTags: showContributorTags ? extractContributorTags(decorationSet, contributors) : [],
+    contributorTags: showContributorTags ? extractContributorTags(decorationSet, contributors, activeIndexPos,
+    // The stops the step buttons walk, so a stop cannot hold a second tag for one
+    // contributor that navigation can never reach.
+    getScrollableDecorations(decorationSet, tr.doc, diffType)) : [],
     decorations: decorationSet,
     diffDescriptors: extractDiffDescriptors(decorationSet)
   };

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

@@ -0,0 +1,26 @@
+/**
+ * Whether a change spans nothing but a block node's open token, so its deleted side carries no
+ * content.
+ *
+ * The attribute-aware token encoder folds a node's diffable attributes into its open token, so a
+ * same-type replacement — an AI suggestion rewriting a code block — is reported as two changes: one
+ * over the single position of that token, carrying the attribute change, and one for the content.
+ * Slicing the first yields the node with none of its content, which leaves the deleted-content
+ * widget nothing to draw but an empty copy of the block (EDITOR-8912). The content change is a
+ * change of its own and is decorated in place.
+ *
+ * A whole node is not matched: its range covers its close token too. Neither is an empty leaf (a
+ * `rule`, a `blockCard`), which is one position but slices closed rather than open.
+ */
+export var isOpenTokenOnlyChange = function isOpenTokenOnlyChange(_ref) {
+  var change = _ref.change,
+    originalDoc = _ref.originalDoc;
+  if (change.toA - change.fromA !== 1) {
+    return false;
+  }
+  var slice = originalDoc.slice(change.fromA, change.toA);
+  // `childCount === 1` already means `firstChild` is there; the optional chain is for the type,
+  // which has it nullable.
+  var node = slice.content.firstChild;
+  return (slice.openStart > 0 || slice.openEnd > 0) && slice.content.childCount === 1 && (node === null || node === void 0 ? void 0 : node.isBlock) === true && node.content.size === 0;
+};

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

@@ -45,6 +45,16 @@ var edgeCases = function edgeCases(doc, from) {
   var node = resolved.node,
     nodeStart = resolved.nodeStart,
     beforePos = resolved.beforePos;
+  if (node.type.name === 'layoutSection' && fg('platform_editor_ai_show_diff_patch_1')) {
+    // Columns extend past the node-view wrapper via negative margins (12px or 20px).
+    // Measure their container so the indicator stays outside the diff outline, including
+    // breakout layouts and after responsive resizing, without changing the column geometry.
+    return {
+      beforePos: beforePos,
+      measurePos: beforePos,
+      measureSelector: '[data-layout-section]'
+    };
+  }
 
   /**
    * All resizable nodes will need dynamic calculations of the block indicator left anchor
@@ -152,10 +162,12 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
     anchor.style.setProperty('transform', 'translateX(-50%)');
     wrapper.appendChild(anchor);
     var measureWidth = function measureWidth() {
+      var _nodeDOM$querySelecto;
       if (getPos() === undefined || edgeCase.measurePos === undefined) {
         return;
       }
-      var dom = view.nodeDOM(edgeCase.measurePos);
+      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) {
         // The left anchor only needs the container width so the
         // IndicatorBar can align against the block's horizontal extent.

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

@@ -42,7 +42,26 @@ export var mountContributorTag = function mountContributorTag(_ref) {
     diffId: diffId
   }));
   controller.mount(host);
-  return controller;
+
+  /**
+   * Kept alive when ProseMirror only rebuilt the widget desc around this same host: a document
+   * change remaps the decoration and fires `destroy`, but an element `toDOM` is reused verbatim
+   * and runs no mount callback, so tearing down here left an active change with no tag
+   * (EDITOR-8971).
+   *
+   * Deferred, because the host is still attached while that update is in flight. A host outside a
+   * live editor root is a real removal — including the view being destroyed, which drops the root.
+   */
+  return {
+    destroy: function destroy() {
+      return queueMicrotask(function () {
+        var _mountContext$getEdit;
+        if (!host.isConnected || !((_mountContext$getEdit = mountContext.getEditorRoot()) !== null && _mountContext$getEdit !== void 0 && _mountContext$getEdit.contains(host))) {
+          controller.destroy();
+        }
+      });
+    }
+  };
 };
 export var unmountContributorTag = function unmountContributorTag(mount) {
   mount === null || mount === void 0 || mount.destroy();