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

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

@@ -5,6 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { CONTRIBUTOR_TAG_Z_INDEX } from '../../ui/ContributorTag/buildContributorTagDom';
 import { isExtendedEnabled } from '../isExtendedEnabled';
 import { hasVisibleContent } from '../utils/hasVisibleContent';
 import { buildAtomicInlineChangedCSSVariables, buildDeletedInlineContentStyleExtended, buildDeletedInlineStyle, buildDeletedInlineStyleStandard, buildInsertStyle, buildInsertStyleActive, buildInsertStyleExtended, buildInsertStyleExtendedActive, buildInsertStyleExtendedNoUnderline, buildInsertStyleExtendedNoUnderlineActive } from './colorSchemes/factory';
@@ -17,6 +18,25 @@ import { REVEAL_ATTR, resolveRevealStyle } from './revealStyles';
 var displayNoneStyle = 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 = convertToInlineCss({
+  position: 'relative',
+  zIndex: CONTRIBUTOR_TAG_Z_INDEX - 1
+});
 var getColorScheme = function getColorScheme(colorScheme) {
   return colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
 };
@@ -176,8 +196,23 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
   });
   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 ? 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 = [Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread(_objectSpread({
-    style: atomicInlineAttrs ? "".concat(style).concat(atomicInlineAttrs.styleSuffix) : style
+    style: inlineStyle
   }, atomicInlineAttrs && {
     class: atomicInlineAttrs.className
   }), revealed && _defineProperty({}, REVEAL_ATTR, revealed.role)), {}, {
@@ -228,19 +263,10 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     })));
   }
 
-  // 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 = 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/esm/pm-plugins/decorations/utils/wrapBlockNodeView.js

@@ -3,6 +3,7 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 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 { applyRevealToElement } from '../revealStyles';
@@ -277,6 +278,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 = convertToInlineCss({
+  display: 'flow-root'
+});
 var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref9) {
   var element = _ref9.element,
     targetNode = _ref9.targetNode,
@@ -540,6 +551,9 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref12) {
           hideAddedDiffsUnderline: hideAddedDiffsUnderline,
           highlightInlineLeafNodes: highlightInlineLeafNodes
         });
+        if (targetNode.type.name === 'blockquote' && fg('platform_editor_ai_show_diff_patch_1')) {
+          appendStyleToElement(nodeView, quoteBlockLevelStyle);
+        }
         dom.append(nodeView);
         return;
       }

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

@@ -4,43 +4,98 @@ export var CONTRIBUTOR_TAG_TESTID = 'diff-contributor-tag';
 export var 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.
  */
-export var MIN_TAG_WIDTH = '28px';
+export var 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.
+ */
+export var 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`.
+ */
+export var CONTRIBUTOR_TAG_CLASS = 'ak-editor-diff-contributor-tag';
+
+/** Toggled by the controller to move the tag between the fade's two ends. */
+export var 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.
+ */
+export var 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 = 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 = 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'
@@ -91,6 +146,7 @@ var createSpan = function createSpan(doc, style) {
 export var 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.