@atlaskit/editor-plugin-show-diff 15.1.6 → 15.1.7

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 15.1.7
+
+### Patch Changes
+
+- [`e80305319abbb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e80305319abbb) -
+  CCI-19338: Gate Review moment on `platform_editor_ai_streaming_ux_experience_m1` and
+  `platform_editor_ai_xstate_migration` only, dropping
+  `platform_editor_ai_new_aifc_editor_experience` and its FE/BE params. Optional Review moment
+  slices now read prefixed tokens from `platform_editor_ai_streaming_ux_m1_config`.
+- [`3dc7417891a0c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3dc7417891a0c) -
+  Render a `blockquote` inside a diff widget decoration as `display: flow-root` so the diff
+  indicator bar spans the quote's full height instead of a single line. Behind the existing
+  `platform_editor_ai_show_diff_patch_1` gate; with the gate off the quote keeps its `inline-block`
+  display as before.
+
+  Editor CSS renders `blockquote` as `inline-block`, which both establishes a block formatting
+  context and makes the quote an atomic inline-level box. The widget container is an inline `span`,
+  so the bar's anchor rect is the union of that span's fragments — and an inline box takes its
+  height from its font metrics, not from an inline-level child. A quote therefore contributed only
+  one line-height, and the bar showed as a stub beside it; most visible when reviewing an AI
+  suggestion that wraps content in a quote. `flow-root` is block-level and still establishes the
+  formatting context, so the container gets a block fragment sized to the quote while the quote's
+  own geometry is unchanged. Every other block node is already block-level and is unaffected.
+
+- [`8815e3a163409`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8815e3a163409) -
+  Restyle contributor diff tags to read as a label on the change they caption: flush against it,
+  square bottom corners, no bottom border or shadow, and sized to their own content up to a maximum
+  width. A tag now paints above the diff highlights instead of below them, so a highlight on the
+  line it overlays can no longer slice through it, and it is clipped to its own box so it still
+  cannot paint over the change it captions. A tag is now filled with its accent colour's bolder tone
+  and labelled in inverse text, rather than the subtlest tint its highlight is drawn in. Tags now
+  fade and rise in and out rather than snapping, with a `prefers-reduced-motion` opt-out. Behind the
+  `confluence_ncs_step_diffing_version_history` gate.
+- Updated dependencies
+
 ## 15.1.6
 
 ### Patch Changes

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

@@ -16,7 +16,7 @@ var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _unsafeExpValNoExposure = require("@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _areDocsEqualByBlockStructureAndText = require("../areDocsEqualByBlockStructureAndText");
 var _createAnchorDecorationWidgets = require("../decorations/createAnchorDecorationWidgets");
 var _createBlockChangedDecoration = require("../decorations/createBlockChangedDecoration");
@@ -521,8 +521,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
       // gets highlighted, and structural gaps never do.
       var isSmartNodeLevel = diffType === 'smart' && (0, _fg.fg)('platform_editor_ai_smart_diff') && (0, _helpers.smartChangeLevel)(change) === 'node';
       // For a large inserted table, skip the per-cell inline decorations that
-      // freeze the browser on re-render. Only active in the AIFC experience.
-      var useCoarseTableDecoration = isSmartNodeLevel && (0, _expValEquals.expValEquals)('platform_editor_ai_new_aifc_editor_experience', 'isBackendReviewMomentEnabled', true) && isLargeInsertedTableRange(tr.doc, change.fromB, change.toB);
+      // freeze the browser on re-render. Only active when Review moment is
+      // eligible (xstate + M1).
+      var useCoarseTableDecoration = isSmartNodeLevel && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_ai_xstate_migration', 'isEnabled', true) && (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true && isLargeInsertedTableRange(tr.doc, change.fromB, change.toB);
       // Whether the deleted-content widget will actually be rendered for this
       // change. Used to decide if indicator anchor positions should be adjusted
       // inward — when the widget is present the anchor must stay at the block
@@ -721,7 +722,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
       })));
       // If the original node position is known (e.g. a panel type change), also render
       // the old block node as a "deleted" widget so the reviewer sees the before/after.
-      var isSmartNodeLevelAttrChange = diffType === 'smart' && (0, _fg.fg)('platform_editor_ai_smart_diff') && (0, _expValEquals.expValEquals)('platform_editor_ai_new_aifc_editor_experience', 'isEnabled', true);
+      var isSmartNodeLevelAttrChange = diffType === 'smart' && (0, _fg.fg)('platform_editor_ai_smart_diff') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_ai_xstate_migration', 'isEnabled', true) && (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true;
       if (isSmartNodeLevelAttrChange && change.fromA !== undefined && change.toA !== undefined) {
         var placeBelow = deletedDiffPlacement === 'bottom';
         decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createNodeChangedDecorationWidget.createNodeChangedDecorationWidget)(_objectSpread(_objectSpread({

package/dist/cjs/pm-plugins/decorations/colorSchemes/factory.js

@@ -135,6 +135,18 @@ var bgSubtlerPressedMap = {
   gray: "var(--ds-background-accent-gray-subtler-pressed, #8C8F97)",
   lime: "var(--ds-background-accent-lime-subtler-pressed, #B3DF72)"
 };
+var bgBolderMap = {
+  green: "var(--ds-background-accent-green-bolder, #1F845A)",
+  teal: "var(--ds-background-accent-teal-bolder, #227D9B)",
+  blue: "var(--ds-background-accent-blue-bolder, #1868DB)",
+  purple: "var(--ds-background-accent-purple-bolder, #964AC0)",
+  red: "var(--ds-background-accent-red-bolder, #C9372C)",
+  orange: "var(--ds-background-accent-orange-bolder, #BD5B00)",
+  yellow: "var(--ds-background-accent-yellow-bolder, #946F00)",
+  magenta: "var(--ds-background-accent-magenta-bolder, #AE4787)",
+  gray: "var(--ds-background-accent-gray-bolder, #6B6E76)",
+  lime: "var(--ds-background-accent-lime-bolder, #5B7F24)"
+};
 var borderAccentMap = {
   green: "var(--ds-border-accent-green, #22A06B)",
   teal: "var(--ds-border-accent-teal, #2898BD)",
@@ -168,6 +180,9 @@ function bgSubtlestPressed(color) {
 function bgSubtler(color) {
   return bgSubtlerMap[color];
 }
+function bgBolder(color) {
+  return bgBolderMap[color];
+}
 function bgSubtlerPressed(color) {
   return bgSubtlerPressedMap[color];
 }
@@ -178,12 +193,18 @@ function textAccent(color) {
   return textAccentMap[color];
 }
 
-/** Presentation tokens for one diff colour, shared by highlights and contributor tags. */
+/**
+ * Presentation tokens for a contributor tag in one diff colour.
+ *
+ * A `bolder` fill rather than the `subtlest` tint the highlight uses: the tag is a label on the
+ * change, and at tag size a tint reads as a second, weaker highlight sitting above the real one.
+ * `inverse` is the only text tone that reads on a bolder fill, and it needs no per-colour map —
+ * which is also why the tag carries no border: the fill alone bounds it.
+ */
 function getAccentTokens(color) {
   return {
-    background: bgSubtlest(color),
-    border: borderAccent(color),
-    text: textAccent(color)
+    background: bgBolder(color),
+    text: "var(--ds-text-inverse, #FFFFFF)"
   };
 }
 

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

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _buildContributorTagDom = require("../../ui/ContributorTag/buildContributorTagDom");
 var _isExtendedEnabled = require("../isExtendedEnabled");
 var _hasVisibleContent = require("../utils/hasVisibleContent");
 var _factory = require("./colorSchemes/factory");
@@ -24,6 +25,25 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var displayNoneStyle = (0, _lazyNodeView.convertToInlineCss)({
   display: 'none'
 });
+
+/**
+ * Stacks the change's highlight below its contributor tag, so no highlight can slice through a tag:
+ * a tag overlays the line *above* its own change, and a highlight already on that line — the tail of
+ * this change, or another change entirely — would otherwise paint straight over it.
+ *
+ * The tag still reads as attached to the change rather than laid on top of it, because it cannot
+ * paint over this highlight at all: its bottom edge is pinned to the highlight's top edge and
+ * clipped there. See `CONTRIBUTOR_TAG_Z_INDEX`.
+ *
+ * prosemirror-view places the tag's host widget as a *sibling* of this decoration's span, so
+ * painting order is decided by stacking level — and the host is absolutely positioned at
+ * `CONTRIBUTOR_TAG_Z_INDEX`. `position: relative` is what makes `z-index` apply to an otherwise
+ * static inline box; it adds no offset.
+ */
+var stackBelowContributorTagStyle = (0, _lazyNodeView.convertToInlineCss)({
+  position: 'relative',
+  zIndex: _buildContributorTagDom.CONTRIBUTOR_TAG_Z_INDEX - 1
+});
 var getColorScheme = function getColorScheme(colorScheme) {
   return _schemes.colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
 };
@@ -183,8 +203,23 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
   });
   var isAtomicInlineInsertion = isAtomicInlineNode && isInserted;
   var atomicInlineAttrs = isAtomicInlineInsertion ? resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) : undefined;
+
+  // Built from the raw change range, not the indicator anchors resolved below: a tag lines up with
+  // the changed text, while the bar's anchors are held on a block boundary when a deleted widget
+  // renders beside them.
+  //
+  // Built up here, ahead of where it is pushed, so the highlight's stacking below keys off whether a
+  // tag exists rather than re-deriving the condition and risking disagreement.
+  var tagWidget = canTagChange && doc ? (0, _createContributorTagWidget.createContributorTagWidget)({
+    doc: doc,
+    from: change.fromB,
+    to: change.toB,
+    diffId: diffId,
+    mountContext: tagMountContext
+  }) : undefined;
+  var inlineStyle = [style, atomicInlineAttrs === null || atomicInlineAttrs === void 0 ? void 0 : atomicInlineAttrs.styleSuffix, tagWidget ? stackBelowContributorTagStyle : undefined].filter(Boolean).join('');
   var decorations = [_view.Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread(_objectSpread({
-    style: atomicInlineAttrs ? "".concat(style).concat(atomicInlineAttrs.styleSuffix) : style
+    style: inlineStyle
   }, atomicInlineAttrs && {
     class: atomicInlineAttrs.className
   }), revealed && (0, _defineProperty2.default)({}, _revealStyles.REVEAL_ATTR, revealed.role)), {}, {
@@ -235,19 +270,10 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     })));
   }
 
-  // Built from the raw change range, not the anchors above: a tag lines up with the changed text,
-  // while the bar's anchors are held on a block boundary when a deleted widget renders beside them.
-  if (canTagChange && doc) {
-    var tagWidget = (0, _createContributorTagWidget.createContributorTagWidget)({
-      doc: doc,
-      from: change.fromB,
-      to: change.toB,
-      diffId: diffId,
-      mountContext: tagMountContext
-    });
-    if (tagWidget) {
-      decorations.push(tagWidget);
-    }
+  // 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);
   }
   return decorations;
 };

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

@@ -10,6 +10,7 @@ var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _messages = require("@atlaskit/editor-common/messages");
 var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
 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 _revealStyles = require("../revealStyles");
@@ -284,6 +285,16 @@ var applyInlineLeafNodeStyles = function applyInlineLeafNodeStyles(_ref8) {
     });
   });
 };
+
+/**
+ * Editor CSS makes `blockquote` `inline-block` for its block formatting context. Inside a widget
+ * that collapses the indicator bar: the container is an inline `span`, so its anchor rect comes from
+ * font metrics, not from an inline-level child. `flow-root` keeps the formatting context but is
+ * block-level — unlike `block`, which lets the child paragraph's top margin collapse out.
+ */
+var quoteBlockLevelStyle = (0, _lazyNodeView.convertToInlineCss)({
+  display: 'flow-root'
+});
 var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref9) {
   var element = _ref9.element,
     targetNode = _ref9.targetNode,
@@ -547,6 +558,9 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
           hideAddedDiffsUnderline: hideAddedDiffsUnderline,
           highlightInlineLeafNodes: highlightInlineLeafNodes
         });
+        if (targetNode.type.name === 'blockquote' && (0, _fg.fg)('platform_editor_ai_show_diff_patch_1')) {
+          appendStyleToElement(nodeView, quoteBlockLevelStyle);
+        }
         dom.append(nodeView);
         return;
       }

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

@@ -4,50 +4,105 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buildContributorTagDom = exports.MIN_TAG_WIDTH = exports.CONTRIBUTOR_TAG_TESTID = exports.CONTRIBUTOR_TAG_NAME_TESTID = void 0;
+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;
 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';
 var CONTRIBUTOR_TAG_NAME_TESTID = exports.CONTRIBUTOR_TAG_NAME_TESTID = 'diff-contributor-tag-name';
 
 /**
- * Floor for the tag width (~one 16px avatar plus padding), so the highlight-width clamp cannot
- * collapse the box on a very short highlight.
+ * Ceiling for the tag width. A constant rather than the width of the change: a change is routinely a
+ * word or two, and clamping to it ellipsised the contributor's name — the one thing the tag exists to
+ * show. Longer names are ellipsised into the tooltip.
  */
-var MIN_TAG_WIDTH = exports.MIN_TAG_WIDTH = '28px';
+var MAX_TAG_WIDTH = exports.MAX_TAG_WIDTH = '200px';
+
+/**
+ * The tag sits on the line above the change, so it has to paint over that line to be readable —
+ * including any diff highlight already on it, which would otherwise slice straight through the tag.
+ * Hence one level above `akEditorUnitZIndex`, where the highlights sit; exported because the
+ * change's own highlight is stacked one level below it — see `stackBelowContributorTagStyle` in
+ * `createInlineChangedDecoration`.
+ *
+ * Painting above its own highlight is only safe because the tag can never reach it: `bottom: 100%`
+ * puts the root's bottom edge exactly on the highlight's top edge, and the root's `overflow: clip`
+ * keeps every pixel the tag paints inside it.
+ */
+var CONTRIBUTOR_TAG_Z_INDEX = exports.CONTRIBUTOR_TAG_Z_INDEX = 2;
+
+/**
+ * The plugin's whole side of the tag's motion: the fade and the hidden state are
+ * `contributorTagStyles` in both EditorContentContainer stylesheets, keyed on this literal and the
+ * one below — rename in step. This package cannot import `@atlaskit/editor-core` at runtime, so the
+ * plugin emits the hook and editor-core owns the rule, as `VanillaTooltip` does with
+ * `VANILLA_TOOLTIP_DEFAULT_CLASS`.
+ */
+var CONTRIBUTOR_TAG_CLASS = exports.CONTRIBUTOR_TAG_CLASS = 'ak-editor-diff-contributor-tag';
+
+/** Toggled by the controller to move the tag between the fade's two ends. */
+var CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = exports.CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = 'data-revealed';
+
+/**
+ * Backstop for removing a fading-out tag: a cancelled transition fires no `transitionend`. Must stay
+ * above the fade's 600ms, which lives in another package's stylesheet and cannot be read back as a
+ * number — hence the wide margin. Raise in step with that duration.
+ */
+var TAG_EXIT_FALLBACK_MS = exports.TAG_EXIT_FALLBACK_MS = 1200;
 
 // 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.
 var constraintStyle = (0, _lazyNodeView.convertToInlineCss)({
-  display: 'block',
+  // `flex`, not `block`: a block box lays the tag on a line box whose strut is the *paragraph's*
+  // line-height (~24px) against the tag's ~20px, so `bottom: 100%` pins that leftover strut to the
+  // change and the tag floats above it. A flex container has no line box.
+  display: 'flex',
   position: 'absolute',
   bottom: '100%',
   insetInlineStart: 0,
+  // On the root, since that is the absolutely positioned box; the tag below fills it.
+  maxWidth: MAX_TAG_WIDTH,
   minWidth: 0,
-  // The tag may cover surrounding text, so it has to paint over it. Matches `akEditorUnitZIndex`.
-  zIndex: 1,
+  // This box's bottom edge is the join with the highlight, and the tag paints *above* that
+  // highlight — so anything spilling past this edge would read as the tag laid on top of the change
+  // rather than attached to it. The reveal's `translateY` is exactly that spill: it starts the tag
+  // 4px low, and clipping the part that hangs over the highlight turns the rise into an unfurl out
+  // of the join. `clip`, not `hidden`: `hidden` would make this a scroll container, and focusing the
+  // tag mid-reveal would scroll it 4px out of alignment for good.
+  //
+  // The tooltip is unaffected — it is a `popover`, so it paints in the top layer, which no
+  // ancestor's clip reaches.
+  overflow: 'clip',
+  zIndex: CONTRIBUTOR_TAG_Z_INDEX,
   // It renders inside the document and it is not content: dragging a selection across the change
   // must not select it.
   userSelect: 'none'
 });
 
-// `backgroundColor`, `borderBottomColor` and the visibility come from the model, and are set by the
-// controller.
+// `backgroundColor` comes from the model, and is set by the controller. `opacity`, `pointer-events`
+// and the transition between their two states are in `contributorTagStyles` — see
+// `CONTRIBUTOR_TAG_CLASS`.
 var tagStyle = (0, _lazyNodeView.convertToInlineCss)({
   display: 'inline-flex',
   alignItems: 'center',
   gap: "var(--ds-space-050, 4px)",
-  // Never wider than the highlight; overflow is ellipsised on the name below.
+  // Never wider than `MAX_TAG_WIDTH` on the root; overflow is ellipsised on the name below.
   maxWidth: '100%',
   minWidth: 0,
   overflow: 'hidden',
   paddingInline: "var(--ds-space-050, 4px)",
   paddingBlock: "var(--ds-space-025, 2px)",
-  borderRadius: "var(--ds-radius-small, 4px)",
-  borderBottomStyle: 'solid',
-  borderBottomWidth: "var(--ds-border-width-selected, 2px)",
-  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
+  // Top corners only: the bottom edge butts onto the change, and a rounded corner there would let
+  // the page background through at the join.
+  borderTopLeftRadius: "var(--ds-radius-small, 4px)",
+  borderTopRightRadius: "var(--ds-radius-small, 4px)",
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  // Deliberately no bottom border: the change already carries the accent as its own underline, and
+  // a second rule directly above it reads as two objects rather than one label on one change.
+  //
+  // Deliberately no `elevation.shadow.overlay`: its `0 8px 12px` offset casts downwards onto the
+  // change, which reads as a gap between the tag and the content it captions.
   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)",
   whiteSpace: 'nowrap',
   boxSizing: 'border-box'
@@ -98,6 +153,7 @@ var createSpan = function createSpan(doc, style) {
 var buildContributorTagDom = exports.buildContributorTagDom = function buildContributorTagDom(doc) {
   var root = createSpan(doc, constraintStyle);
   var tag = createSpan(doc, tagStyle, {
+    class: CONTRIBUTOR_TAG_CLASS,
     'data-testid': CONTRIBUTOR_TAG_TESTID,
     // Deliberately no `aria-label`: it would be announced ahead of the element's contents, but
     // design requires the contributor *after* the change — hence the visually hidden label.