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

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 16.0.4
+
+### Patch Changes
+
+- [`d12940d0a5964`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d12940d0a5964) -
+  Fix layout and decision diff underlines and attribution colors, preserve column width styles, and
+  align the blue indicator outside layout column borders under platform_editor_ai_show_diff_patch_1.
+- [`f044fcdd726df`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f044fcdd726df) -
+  [EDITOR-8912] Under `platform_editor_ai_show_diff_patch_1`, a change that spans only a block
+  node's open token no longer draws a deleted-content widget. A same-type node replacement (an AI
+  suggestion rewriting a code block, say) reports the node's attribute change separately from its
+  content change, and the attribute half has no deleted content — it rendered as an empty copy of
+  the block, e.g. an empty code block above the real diff. Its inserted side, and the node's content
+  change, are unaffected.
+- Updated dependencies
+
+## 16.0.3
+
+### Patch Changes
+
+- [`0265ca1688db1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0265ca1688db1) -
+  [EDITOR-8971] `VanillaTooltip` takes an optional container to append its tooltip to, instead of
+  appending it inside the trigger. Opt-in per caller, and used by the diff contributor tag; every
+  other tooltip is unchanged.
+
+  Diff contributor tag fixes, all behind `confluence_ncs_step_diffing_version_history`:
+  - The tag's full label no longer renders off screen. Its tooltip is hoisted out of the tag, so
+    Popper and the browser measure a top-layer popover from the same origin — inside the trigger
+    they disagreed whenever an ancestor was transformed, such as a wide image.
+  - Stepping to a change reveals only that change's tag, not every tag the active range touches.
+  - A contributor no longer gets two tags inside one navigation stop. Two of their changes that
+    merely touched each kept a tag, and the trailing one could be hovered but never stepped to; it
+    now folds into the leading tag and stays a hover target. Tags for different contributors sharing
+    a stop are still kept apart.
+  - A tag on deleted content no longer disappears when the document changes. Any change remaps the
+    decoration, which rebuilds its widget and fired the teardown — but the deleted-content widget's
+    DOM is reused as-is and runs no mount callback, so the tag was faded out of a change that was
+    still the active one. The tag is now kept whenever its host is still in a live editor.
+
+- Updated dependencies
+
 ## 16.0.2
 
 ### Patch Changes

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

@@ -27,10 +27,12 @@ var _decorationKeys = require("../decorations/decorationKeys");
 var _extractContributorTags = require("../decorations/extractContributorTags");
 var _getAttrChangeRanges = require("../decorations/utils/getAttrChangeRanges");
 var _getMarkChangeRanges = require("../decorations/utils/getMarkChangeRanges");
+var _getScrollableDecorations = require("../getScrollableDecorations");
 var _isExtendedEnabled = require("../isExtendedEnabled");
 var _diffBySteps = require("./diffBySteps");
 var _groupChangesByBlock = require("./groupChangesByBlock");
 var _isMarkOnlyChange = require("./isMarkOnlyChange");
+var _isOpenTokenOnlyChange = require("./isOpenTokenOnlyChange");
 var _optimizeChanges = require("./optimizeChanges");
 var _selectTokenEncoder2 = require("./selectTokenEncoder");
 var _simplifyChangesWithAttribution = require("./simplifyChangesWithAttribution");
@@ -504,6 +506,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 = (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') && change.deleted.length > 0 && (0, _isOpenTokenOnlyChange.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.
@@ -622,7 +634,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,
@@ -788,7 +800,10 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
   });
   var decorationSet = _view.DecorationSet.empty.add(tr.doc, decorations);
   return {
-    contributorTags: showContributorTags ? (0, _extractContributorTags.extractContributorTags)(decorationSet, contributors) : [],
+    contributorTags: showContributorTags ? (0, _extractContributorTags.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.
+    (0, _getScrollableDecorations.getScrollableDecorations)(decorationSet, tr.doc, diffType)) : [],
     decorations: decorationSet,
     diffDescriptors: (0, _decorationKeys.extractDiffDescriptors)(decorationSet)
   };

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isOpenTokenOnlyChange = void 0;
+/**
+ * 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.
+ */
+var isOpenTokenOnlyChange = exports.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/cjs/pm-plugins/decorations/createAnchorDecorationWidgets.js

@@ -51,6 +51,16 @@ var edgeCases = function edgeCases(doc, from) {
   var node = resolved.node,
     nodeStart = resolved.nodeStart,
     beforePos = resolved.beforePos;
+  if (node.type.name === 'layoutSection' && (0, _fg.fg)('platform_editor_ai_show_diff_patch_1')) {
+    // Columns extend past the node-view wrapper via negative margins (12px or 20px).
+    // Measure their container so the indicator stays outside the diff outline, including
+    // 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
@@ -158,10 +168,12 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
     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/cjs/pm-plugins/decorations/createContributorTagWidget.js

@@ -48,7 +48,26 @@ var mountContributorTag = exports.mountContributorTag = function mountContributo
     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();
+        }
+      });
+    }
+  };
 };
 var unmountContributorTag = exports.unmountContributorTag = function unmountContributorTag(mount) {
   mount === null || mount === void 0 || mount.destroy();

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extractContributorTags = void 0;
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -56,12 +57,48 @@ var isSameBlockChange = function isSameBlockChange(inner, block) {
   return 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.
+ */
+var byLeadingPosition = function 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. */
+var containedBy = function containedBy(targets, _ref2) {
+  var from = _ref2.from,
+    to = _ref2.to;
+  return targets.filter(function (_ref3) {
+    var decoration = _ref3.decoration;
+    return 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.
+ */
+var resolveActiveTarget = function resolveActiveTarget(surviving, activeIndexPos) {
+  return 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.
  */
-var extractContributorTags = exports.extractContributorTags = function extractContributorTags(decorations, contributors) {
+var extractContributorTags = exports.extractContributorTags = function extractContributorTags(decorations, contributors, activeIndexPos, stops) {
   if (!contributors) {
     return [];
   }
@@ -94,25 +131,30 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
   } finally {
     _iterator.f();
   }
-  var inlineTargets = targets.filter(function (_ref2) {
-    var decoration = _ref2.decoration;
+  var inlineTargets = targets.filter(function (_ref4) {
+    var decoration = _ref4.decoration;
     return decoration.spec.decorationType === 'inline';
   });
-  var blockTargets = targets.filter(function (_ref3) {
-    var decoration = _ref3.decoration;
+  var blockTargets = targets.filter(function (_ref5) {
+    var decoration = _ref5.decoration;
     return decoration.spec.decorationType === 'block';
   });
-  var widgetTargets = targets.filter(function (_ref4) {
-    var decoration = _ref4.decoration;
+  var widgetTargets = targets.filter(function (_ref6) {
+    var decoration = _ref6.decoration;
     return decoration.spec.decorationType === 'widget';
   });
   var linkedDiffIds = new Map();
   var folded = new Set();
   var fold = function fold(host, target) {
-    var _linkedDiffIds$get;
+    var _linkedDiffIds$get, _linkedDiffIds$get2;
     folded.add(target);
     var hostDiffId = host.decoration.spec.diffId;
-    linkedDiffIds.set(hostDiffId, [].concat((0, _toConsumableArray2.default)((_linkedDiffIds$get = linkedDiffIds.get(hostDiffId)) !== null && _linkedDiffIds$get !== void 0 ? _linkedDiffIds$get : []), [target.decoration.spec.diffId]));
+    var 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.
+    var inherited = (_linkedDiffIds$get = linkedDiffIds.get(targetDiffId)) !== null && _linkedDiffIds$get !== void 0 ? _linkedDiffIds$get : [];
+    linkedDiffIds.delete(targetDiffId);
+    linkedDiffIds.set(hostDiffId, [].concat((0, _toConsumableArray2.default)((_linkedDiffIds$get2 = linkedDiffIds.get(hostDiffId)) !== null && _linkedDiffIds$get2 !== void 0 ? _linkedDiffIds$get2 : []), [targetDiffId], (0, _toConsumableArray2.default)(inherited)));
   };
   var _loop = function _loop() {
       var target = _targets[_i];
@@ -122,8 +164,8 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
       }
 
       // A block outranks both other kinds, so it is tried first.
-      var block = blockTargets.find(function (_ref5) {
-        var decoration = _ref5.decoration;
+      var block = blockTargets.find(function (_ref7) {
+        var decoration = _ref7.decoration;
         return isSameBlockChange(target.decoration, decoration);
       });
       if (block) {
@@ -132,8 +174,8 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
       }
       if (decorationType === 'inline') {
         // The deleted half renders in front of this one, so that half captions the change.
-        var leadingWidget = widgetTargets.find(function (_ref6) {
-          var decoration = _ref6.decoration;
+        var leadingWidget = widgetTargets.find(function (_ref8) {
+          var decoration = _ref8.decoration;
           return leadsReplacement(decoration) && isSameChange(decoration, target.decoration);
         });
         if (leadingWidget) {
@@ -146,8 +188,8 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
       if (leadsReplacement(target.decoration)) {
         return 0; // continue
       }
-      var host = inlineTargets.find(function (_ref7) {
-        var decoration = _ref7.decoration;
+      var host = inlineTargets.find(function (_ref9) {
+        var decoration = _ref9.decoration;
         return isSameChange(target.decoration, decoration);
       });
       if (host) {
@@ -159,14 +201,72 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
     _ret = _loop();
     if (_ret === 0) continue;
   }
-  return targets.filter(function (target) {
+
+  // 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.
+  var _iterator2 = _createForOfIteratorHelper(stops !== null && stops !== void 0 ? stops : []),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var stop = _step2.value;
+      var byContributor = new Map();
+      var _iterator3 = _createForOfIteratorHelper(containedBy(targets.filter(function (target) {
+          return !folded.has(target);
+        }), stop)),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _target$decoration$sp, _byContributor$get;
+          var target = _step3.value;
+          var key = (_target$decoration$sp = target.decoration.spec.attributionKey) !== null && _target$decoration$sp !== void 0 ? _target$decoration$sp : '';
+          byContributor.set(key, [].concat((0, _toConsumableArray2.default)((_byContributor$get = byContributor.get(key)) !== null && _byContributor$get !== void 0 ? _byContributor$get : []), [target]));
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      var _iterator4 = _createForOfIteratorHelper(byContributor.values()),
+        _step4;
+      try {
+        var _loop2 = function _loop2() {
+          var _step4$value = (0, _toArray2.default)(_step4.value),
+            leader = _step4$value[0],
+            trailing = _arrayLikeToArray(_step4$value).slice(1);
+          trailing.forEach(function (target) {
+            return fold(leader, target);
+          });
+        };
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          _loop2();
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  var surviving = targets.filter(function (target) {
     return !folded.has(target);
-  }).map(function (_ref8) {
-    var contributor = _ref8.contributor,
-      spec = _ref8.decoration.spec;
+  });
+  var activeTarget = activeIndexPos === undefined ? undefined : resolveActiveTarget(surviving, activeIndexPos);
+  return surviving.map(function (target) {
+    var contributor = target.contributor,
+      spec = target.decoration.spec;
     var connected = contributor.connectedToKey ? contributors[contributor.connectedToKey] : undefined;
     var connectedContributor = connected ? toTagContributor(connected) : undefined;
     var linked = linkedDiffIds.get(spec.diffId);
+    // Only the navigated tag reveals; with no active range, the decoration's own state stands.
+    var isActive = activeIndexPos === undefined ? spec.isActive : target === activeTarget;
     return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
       contributor: toTagContributor(contributor),
       diffId: spec.diffId
@@ -174,8 +274,8 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
       connectedContributor: connectedContributor
     } : {}), spec.colorScheme ? {
       colorScheme: spec.colorScheme
-    } : {}), spec.isActive !== undefined ? {
-      isActive: spec.isActive
+    } : {}), isActive !== undefined ? {
+      isActive: isActive
     } : {}), spec.isInserted !== undefined ? {
       isInserted: spec.isInserted
     } : {}), linked ? {

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

@@ -217,25 +217,25 @@ var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref6
   var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
   var nodeSpecificStyle = (0, _wrapBlockNodeViewStyles.getChangedNodeStyle)(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
   if (targetNode.type.name === 'decisionList') {
-    var nestedInsertedNodeStyle = (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyle)();
+    var nestedInsertedNodeStyle = (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyle)(colorScheme);
     element.querySelectorAll('li').forEach(function (listItem) {
       var currentListItemStyle = listItem.getAttribute('style') || '';
-      listItem.setAttribute('style', "".concat(currentListItemStyle).concat(nestedInsertedNodeStyle));
+      listItem.setAttribute('style', (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? combineStyles(currentListItemStyle, nestedInsertedNodeStyle) : "".concat(currentListItemStyle).concat(nestedInsertedNodeStyle));
     });
   } else if (targetNode.type.name === 'layoutSection') {
-    var _nestedInsertedNodeStyle = (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyle)();
+    var _nestedInsertedNodeStyle = (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyle)(colorScheme);
     element.querySelectorAll('[data-layout-column="true"]').forEach(function (section) {
       var currentSectionStyle = section.getAttribute('style') || '';
-      section.setAttribute('style', "".concat(currentSectionStyle).concat(_nestedInsertedNodeStyle));
+      section.setAttribute('style', (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? combineStyles(currentSectionStyle, _nestedInsertedNodeStyle) : "".concat(currentSectionStyle).concat(_nestedInsertedNodeStyle));
     });
   } else if (targetNode.type.name === 'taskList') {
-    var _nestedInsertedNodeStyle2 = (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyle)();
+    var _nestedInsertedNodeStyle2 = (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyle)(colorScheme);
     element.querySelectorAll('li').forEach(function (listItem) {
       var currentListItemStyle = listItem.getAttribute('style') || '';
       listItem.setAttribute('style', "".concat(currentListItemStyle).concat(_nestedInsertedNodeStyle2));
     });
   }
-  element.setAttribute('style', "".concat(currentStyle, ";").concat(nodeSpecificStyle));
+  element.setAttribute('style', (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? combineStyles(currentStyle, nodeSpecificStyle) : "".concat(currentStyle, ";").concat(nodeSpecificStyle));
 };
 var combineStyles = function combineStyles(currentStyle, appendedStyle) {
   var separator = currentStyle && appendedStyle && !currentStyle.trimEnd().endsWith(';') ? '; ' : '';

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.resolveRemovedLozengeStyle = exports.resolveNestedInsertedNodeStyle = exports.resolveDeletedNodeCSSVariables = exports.resolveCellOverlayStyle = exports.isTextLikeBlockNode = exports.isMultiContainerBlockNode = exports.hasRestingDeletedRing = exports.getInsertedContentStyle = exports.getDeletedContentStyleUnbounded = exports.getDeletedContentStyle = exports.getChangedNodeStyle = exports.getChangedContentStyle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _isExtendedEnabled = require("../../isExtendedEnabled");
 var _factory = require("../colorSchemes/factory");
@@ -30,9 +31,7 @@ var getColorScheme = function getColorScheme(colorScheme) {
 };
 
 /**
- * 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.
  */
 var nestedContentScheme = _schemes.standardScheme;
 
@@ -68,7 +67,7 @@ var getChangedNodeStyleNext = function getChangedNodeStyleNext(nodeName, colorSc
   var colors = getColorScheme(colorScheme);
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isInserted) {
     if (isMultiContainerBlockNode(nodeName)) {
-      return hideAddedDiffsUnderline ? (0, _factory.buildInsertStyleInBlockExtendedNoUnderline)(nestedContentScheme) : (0, _factory.buildInsertStyleInBlockExtended)(nestedContentScheme);
+      return hideAddedDiffsUnderline || (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? (0, _factory.buildInsertStyleInBlockExtendedNoUnderline)(nestedContentScheme) : (0, _factory.buildInsertStyleInBlockExtended)(nestedContentScheme);
     }
     if (isTextLikeBlockNode(nodeName)) {
       return undefined;
@@ -129,8 +128,8 @@ var resolveRemovedLozengeStyleNext = function resolveRemovedLozengeStyleNext(col
   var colors = getColorScheme(colorScheme);
   return isActive ? (0, _factory.buildDeletedLozengeActiveStyle)(colors) : (0, _factory.buildDeletedLozengeStyle)(colors);
 };
-var resolveNestedInsertedNodeStyleNext = function resolveNestedInsertedNodeStyleNext() {
-  return (0, _factory.buildInsertStyleNode)(nestedContentScheme);
+var resolveNestedInsertedNodeStyleNext = function resolveNestedInsertedNodeStyleNext(colorScheme) {
+  return (0, _factory.buildInsertStyleNode)((0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? getColorScheme(colorScheme) : nestedContentScheme);
 };
 
 // Only 'stateful' schemes have a resting ring.
@@ -194,11 +193,10 @@ var resolveRemovedLozengeStyle = exports.resolveRemovedLozengeStyle = function r
 
 /**
  * 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.
  */
-var resolveNestedInsertedNodeStyle = exports.resolveNestedInsertedNodeStyle = function resolveNestedInsertedNodeStyle() {
-  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor') ? resolveNestedInsertedNodeStyleNext() : (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyleLegacy)();
+var resolveNestedInsertedNodeStyle = exports.resolveNestedInsertedNodeStyle = function resolveNestedInsertedNodeStyle(colorScheme) {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor') ? resolveNestedInsertedNodeStyleNext(colorScheme) : (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyleLegacy)();
 };
 
 /**

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.resolveRemovedLozengeStyleLegacy = exports.resolveNestedInsertedNodeStyleLegacy = exports.resolveCellOverlayStyleLegacy = exports.hasRestingDeletedRingLegacy = exports.getInsertedContentStyleLegacy = exports.getDeletedContentStyleUnboundedLegacy = exports.getDeletedContentStyleLegacy = exports.getChangedNodeStyleLegacy = exports.getChangedContentStyleLegacy = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _isExtendedEnabled = require("../../isExtendedEnabled");
 var _standard = require("../colorSchemes/standard");
@@ -112,7 +113,7 @@ var getChangedNodeStyleLegacy = exports.getChangedNodeStyleLegacy = function get
   var isTraditional = colorScheme === 'traditional';
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isInserted) {
     if (isMultiContainerBlockNode(nodeName)) {
-      return hideAddedDiffsUnderline ? _standard.editingContentStyleInBlockExtendedNoUnderline : _standard.editingContentStyleInBlockExtended;
+      return hideAddedDiffsUnderline || (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? _standard.editingContentStyleInBlockExtendedNoUnderline : _standard.editingContentStyleInBlockExtended;
     }
     if (isTextLikeBlockNode(nodeName)) {
       return undefined;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buildContributorTagDom = exports.TAG_EXIT_FALLBACK_MS = exports.MAX_TAG_WIDTH = exports.CONTRIBUTOR_TAG_Z_INDEX = exports.CONTRIBUTOR_TAG_TESTID = exports.CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = exports.CONTRIBUTOR_TAG_NAME_TESTID = exports.CONTRIBUTOR_TAG_CLASS = void 0;
+exports.buildContributorTagDom = exports.TAG_EXIT_FALLBACK_MS = exports.MAX_TAG_WIDTH = exports.CONTRIBUTOR_TAG_Z_INDEX = exports.CONTRIBUTOR_TAG_TOOLTIP_STYLES = exports.CONTRIBUTOR_TAG_TESTID = exports.CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = exports.CONTRIBUTOR_TAG_NAME_TESTID = exports.CONTRIBUTOR_TAG_CLASS = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var CONTRIBUTOR_TAG_TESTID = exports.CONTRIBUTOR_TAG_TESTID = 'diff-contributor-tag';
@@ -49,6 +49,30 @@ var CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = exports.CONTRIBUTOR_TAG_REVEALED_ATTRIB
  */
 var TAG_EXIT_FALLBACK_MS = exports.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.
+ */
+var CONTRIBUTOR_TAG_TOOLTIP_STYLES = exports.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/cjs/ui/ContributorTag/contributorTagController.js

@@ -400,7 +400,7 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
   }, {
     key: "syncTooltip",
     value: function syncTooltip() {
-      var _this$tooltip2, _this$dom$tag$querySe;
+      var _this$tooltip2;
       var content = this.dom ? this.fullLabel : undefined;
       if (content === this.tooltipContent) {
         return;
@@ -411,17 +411,39 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
       if (!content || !this.dom) {
         return;
       }
-      this.tooltip = new _vanillaTooltip.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.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, _buildContributorTagDom.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 || _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.
+     */
+  }, {
+    key: "resolveTooltipContainer",
+    value: function resolveTooltipContainer() {
+      var _editorRoot$closest;
+      var 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;
     }
 
     /**