@atlaskit/editor-plugin-show-diff 15.0.0 → 15.1.1

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

@@ -0,0 +1,139 @@
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { buildDeletedInlineStyleStandard, getDeletedInlineRevealColors, getInsertedInlineRevealColors } from './colorSchemes/factory';
+import { colorSchemeRegistry } from './colorSchemes/schemes';
+import { deletedContentStyle, deletedContentStyleActive } from './colorSchemes/standard';
+/**
+ * Painting strategy for reveal highlights. Highlights are `linear-gradient`s with animated
+ * `background-size` for the wipe effect. Colours live on elements as custom properties so the
+ * attribution palette works per-contributor.
+ */
+
+/** Marks an element as taking part in the reveal, and says which side it represents. */
+export const REVEAL_ATTR = 'data-show-diff-reveal';
+/** Wipe colour, read by the animation as the gradient's colour stop. */
+export const REVEAL_BG_VAR = '--show-diff-reveal-bg';
+
+/** Underline colour, brought in on the same schedule as the highlight. */
+export const REVEAL_BORDER_VAR = '--show-diff-reveal-border';
+
+/** Only schemes with background highlights can be revealed; 'traditional' uses underline only. */
+const schemeSupportsReveal = colorScheme => colorScheme !== 'traditional';
+
+/** Convert a flat background colour into a wipeable gradient (zero width initially). */
+export const buildWipeableBackground = color => convertToInlineCss({
+  backgroundColor: 'transparent',
+  backgroundImage: `linear-gradient(${color}, ${color})`,
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: '0% 100%',
+  backgroundPosition: '0 0',
+  // Each line fragment of a wrapped highlight gets its own background box, so they wipe
+  // together rather than the gradient stretching across the whole wrapped run.
+  WebkitBoxDecorationBreak: 'clone',
+  boxDecorationBreak: 'clone'
+});
+
+/** Base padding and transparent underline placeholder (no layout shift on reveal). */
+const revealBaseStyle = convertToInlineCss({
+  padding: `1px 0 2px`,
+  borderBottom: `2px solid transparent`
+});
+const buildRevealVariables = ({
+  background,
+  border
+}) => convertToInlineCss({
+  [REVEAL_BG_VAR]: background,
+  [REVEAL_BORDER_VAR]: border
+});
+
+/** Configuration that affects both resting state and reveal endpoint. */
+
+/** Reveal colours from the refactored scheme registry (attribution palette ready). */
+const revealColorsRefactored = (colors, {
+  hideAddedDiffsUnderline,
+  isActive,
+  isInserted
+}) => isInserted ? getInsertedInlineRevealColors(colors, isActive, hideAddedDiffsUnderline) : getDeletedInlineRevealColors(colors);
+
+/**
+ * Legacy cohort reveal colours. Values MUST match `revealColorsRefactored()` output for
+ * `standard` scheme (test: `revealStyles.ts` in test package).
+ */
+const revealColorsLegacy = ({
+  hideAddedDiffsUnderline,
+  isActive,
+  isInserted
+}) => isInserted ? {
+  // Mirrors `editingStyleExtended` / `editingStyleActiveExtended` and their
+  // `*NoUnderline` variants in `colorSchemes/standard.ts`.
+  background: isActive ? "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)" : "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
+  border: hideAddedDiffsUnderline ? 'transparent' : "var(--ds-border-accent-purple, #AF59E1)"
+} : {
+  // Mirrors `deletedInlineContentStyleExtended` in `colorSchemes/standard.ts`.
+  background: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
+  border: "var(--ds-border-accent-gray, #7D818A)"
+};
+const resolveRevealColors = (colors, variant) => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? revealColorsRefactored(colors, variant) : revealColorsLegacy(variant);
+const getColorScheme = colorScheme => colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
+
+/** Deleted text appearance (grey and strikethrough) without the highlight. */
+const deletedTextOnlyStyle = (colors, isActive) => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? buildDeletedInlineStyleStandard(colors, isActive ? 'active' : 'default') : isActive ? deletedContentStyleActive : deletedContentStyle;
+
+/**
+ * Resolve reveal attribute and style for a decoration. Returned style REPLACES the decoration's
+ * highlight (not an addition) so the animation has something to wipe. Gate resolved in showDiff
+ * command for single shared answer between decorations and animation.
+ */
+export const resolveRevealStyle = ({
+  colorScheme,
+  hideAddedDiffsUnderline = false,
+  includeDeletedTextStyle = true,
+  isActive,
+  isInserted,
+  reveal
+}) => {
+  if ((reveal === null || reveal === void 0 ? void 0 : reveal.mode) !== 'phased' || !schemeSupportsReveal(colorScheme)) {
+    return undefined;
+  }
+  const colors = getColorScheme(colorScheme);
+  const {
+    background,
+    border
+  } = resolveRevealColors(colors, {
+    hideAddedDiffsUnderline,
+    isActive,
+    isInserted
+  });
+  return {
+    role: isInserted ? 'added' : 'deleted',
+    style: (isInserted || !includeDeletedTextStyle ? '' : deletedTextOnlyStyle(colors, isActive)) + revealBaseStyle + buildWipeableBackground(background) + buildRevealVariables({
+      background,
+      border
+    })
+  };
+};
+
+/** Reveal style for imperatively-built elements (deleted-content widget wrappers). */
+export const applyRevealToElement = ({
+  colorScheme,
+  element,
+  hideAddedDiffsUnderline,
+  isActive,
+  isInserted,
+  reveal
+}) => {
+  const resolved = resolveRevealStyle({
+    colorScheme,
+    hideAddedDiffsUnderline,
+    isActive,
+    isInserted,
+    reveal,
+    // The widget supplies the deleted text's own grey/strikethrough styling already.
+    includeDeletedTextStyle: false
+  });
+  if (!resolved) {
+    return '';
+  }
+  element.setAttribute(REVEAL_ATTR, resolved.role);
+  return resolved.style;
+};

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

@@ -4,6 +4,7 @@ import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-uti
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../../isExtendedEnabled';
+import { applyRevealToElement } from '../revealStyles';
 import { getAtomicInlineChangedAttrs } from '../createInlineChangedDecoration';
 import { applyTableCellEdgeAttrs } from './tableCellEdgeAttrs';
 import { isInlineAttrChangeNodeName } from './getAttrChangeRanges';
@@ -600,10 +601,18 @@ export const injectInnerWrapper = ({
   colorScheme,
   isActive,
   isInserted,
-  diffType
+  diffType,
+  reveal
 }) => {
   const wrapper = document.createElement('span');
-  wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive, diffType));
+  const revealStyle = applyRevealToElement({
+    colorScheme,
+    element: wrapper,
+    isActive: isActive !== null && isActive !== void 0 ? isActive : false,
+    isInserted: isInserted !== null && isInserted !== void 0 ? isInserted : false,
+    reveal
+  });
+  wrapper.setAttribute('style', (isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive, diffType, Boolean(revealStyle))) + revealStyle);
   [...node.childNodes].forEach(child => {
     const removedChild = node.removeChild(child);
     wrapper.append(removedChild);
@@ -615,23 +624,33 @@ export const injectInnerWrapper = ({
 /**
  * Creates a styled span wrapper for inline content within a change decoration.
  */
-export const createContentWrapper = (colorScheme, isActive = false, isInserted = false, diffType) => {
+export const createContentWrapper = (colorScheme, isActive = false, isInserted = false, diffType, reveal) => {
   const wrapper = document.createElement('span');
   const baseStyle = convertToInlineCss({
     position: 'relative',
     width: 'fit-content'
   });
+  // Empty unless the reveal is running, in which case the static highlight below is withheld so
+  // the animation can wipe it in instead.
+  const revealStyle = applyRevealToElement({
+    colorScheme,
+    element: wrapper,
+    isActive,
+    isInserted,
+    reveal
+  });
+  const deletedStyle = getDeletedContentStyle(colorScheme, isActive, diffType, Boolean(revealStyle));
   if (isExtendedEnabled(diffType)) {
     if (isInserted) {
-      wrapper.setAttribute('style', `${baseStyle}${getInsertedContentStyle(colorScheme, isActive)}`);
+      wrapper.setAttribute('style', `${baseStyle}${getInsertedContentStyle(colorScheme, isActive)}${revealStyle}`);
     } else {
-      wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive, diffType)}`);
+      wrapper.setAttribute('style', `${baseStyle}${deletedStyle}${revealStyle}`);
       const strikethrough = document.createElement('span');
       strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
       wrapper.append(strikethrough);
     }
   } else {
-    wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive, diffType)}`);
+    wrapper.setAttribute('style', `${baseStyle}${deletedStyle}${revealStyle}`);
     const strikethrough = document.createElement('span');
     strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
     wrapper.append(strikethrough);

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

@@ -77,12 +77,12 @@ const getChangedNodeStyleNext = (nodeName, colorScheme, isInserted = false, isAc
 };
 const getDeletedContentStyleUnboundedNext = (colorScheme, isActive = false) => buildDeletedStrikethroughLine(getColorScheme(colorScheme), isActive);
 const getInsertedContentStyleNext = (colorScheme, isActive = false, hideAddedDiffsUnderline = false) => buildInsertedInlineStyle(getColorScheme(colorScheme), isActive, hideAddedDiffsUnderline);
-const getDeletedContentStyleNext = (colorScheme, isActive = false, diffType) => {
+const getDeletedContentStyleNext = (colorScheme, isActive = false, diffType, omitHighlight = false) => {
   const colors = getColorScheme(colorScheme);
   const base = buildDeletedInlineContentStyle(colors, isActive ? 'active' : 'new');
 
   // glyphTint adds a background highlight and border-bottom over the tint; strikethrough does not.
-  const needsExtendedHighlight = colors.deletedInlineTreatment === 'glyphTint' && isExtendedEnabled(diffType);
+  const needsExtendedHighlight = colors.deletedInlineTreatment === 'glyphTint' && isExtendedEnabled(diffType) && !omitHighlight;
   return needsExtendedHighlight ? base + buildDeletedInlineContentStyleExtended(colors) : base;
 };
 const resolveCellOverlayStyleNext = ({
@@ -119,7 +119,10 @@ export const getDeletedContentStyleUnbounded = (colorScheme, isActive = false) =
 export const getInsertedContentStyle = (colorScheme, isActive = false, hideAddedDiffsUnderline = false) => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? getInsertedContentStyleNext(colorScheme, isActive, hideAddedDiffsUnderline) : getInsertedContentStyleLegacy(getLegacyColorScheme(colorScheme), isActive, hideAddedDiffsUnderline);
 
 /** Inline style for deleted content. */
-export const getDeletedContentStyle = (colorScheme, isActive = false, diffType) => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? getDeletedContentStyleNext(colorScheme, isActive, diffType) : getDeletedContentStyleLegacy(getLegacyColorScheme(colorScheme), isActive, diffType);
+export const getDeletedContentStyle = (colorScheme, isActive = false, diffType,
+// Set while the reveal animation is running: it paints the highlight itself so it can wipe it in
+// left-to-right, and a static background here would leave nothing to reveal.
+omitHighlight = false) => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? getDeletedContentStyleNext(colorScheme, isActive, diffType, omitHighlight) : getDeletedContentStyleLegacy(getLegacyColorScheme(colorScheme), isActive, diffType, omitHighlight);
 
 /**
  * Overlay style for one added or deleted table cell. Invariant across the cells of a table, so the

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

@@ -151,11 +151,14 @@ export const getInsertedContentStyleLegacy = (colorScheme, isActive = false, hid
 };
 
 /** Pre-refactor inline style for deleted content. */
-export const getDeletedContentStyleLegacy = (colorScheme, isActive = false, diffType) => {
+export const getDeletedContentStyleLegacy = (colorScheme, isActive = false, diffType,
+// The reveal animation paints the highlight itself so it can wipe it in; a static one here would
+// cover the whole span and leave nothing to reveal. Mirrors the same option on the Next variant.
+omitHighlight = false) => {
   if (colorScheme === 'traditional') {
     return getDeletedTraditionalInlineStyle(isActive);
   }
-  if (isExtendedEnabled(diffType)) {
+  if (isExtendedEnabled(diffType) && !omitHighlight) {
     return (isActive ? deletedContentStyleActive : deletedContentStyleNew) + deletedInlineContentStyleExtended;
   }
   return isActive ? deletedContentStyleActive : deletedContentStyleNew;

package/dist/es2019/pm-plugins/main.js

@@ -10,6 +10,7 @@ import { enforceCustomStepRegisters } from './enforceCustomStepRegisters';
 import { getScrollableDecorations } from './getScrollableDecorations';
 import { getDefaultDiffType, isExtendedEnabled } from './isExtendedEnabled';
 import { NodeViewSerializer } from './NodeViewSerializer';
+import { rebindReveal } from './revealAnimation';
 import { scrollToDecoration } from './scrollToDiff';
 export const showDiffPluginKey = new PluginKey('showDiffPlugin');
 /**
@@ -80,14 +81,24 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
         const meta = tr.getMeta(showDiffPluginKey);
         let newPluginState = currentPluginState;
         if (meta) {
-          if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
-            var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9, _newPluginState0;
-            // Update the plugin state with the new metadata
-            newPluginState = {
+          if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'REVEAL_COMPLETE') {
+            var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9, _newPluginState0, _newPluginState1;
+            // REVEAL_COMPLETE repaints with the reveal dropped, so the decorations render their
+            // ordinary resting style. Without it the reveal stays in state indefinitely and the
+            // next unrelated repaint re-emits the hidden, zero-width highlight with no animation
+            // left to bring it in — the highlight simply vanishes.
+            newPluginState = meta.action === 'REVEAL_COMPLETE' ? {
+              ...currentPluginState,
+              reveal: undefined
+            } : {
               ...currentPluginState,
               ...meta,
               isDisplayingChanges: true,
-              activeIndex: undefined
+              activeIndex: undefined,
+              // Explicit rather than left to the spread: an absent key in `meta` would let
+              // the previous paint's choreography leak into this one, so closing the diff
+              // would animate too.
+              reveal: meta.reveal
             };
             // Calculate and store decorations in state
             const {
@@ -111,13 +122,16 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
                 showIndicators: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.showIndicators,
                 smartThresholds: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.smartThresholds,
                 deletedDiffPlacement: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.deletedDiffPlacement,
-                inlineDeletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.inlineDeletedDiffPlacement
+                inlineDeletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.inlineDeletedDiffPlacement,
+                // SHOW_DIFF only. The scroll-to-next recalculation further down deliberately
+                // omits this so stepping through changes cannot replay the choreography.
+                reveal: (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.reveal
               } : {})
             });
             // Update the decorations and their ids
             newPluginState.decorations = decorations;
             newPluginState.contributorTags = contributorTags;
-            if (isExtendedEnabled((_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.diffType)) {
+            if (isExtendedEnabled((_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.diffType)) {
               newPluginState.diffDescriptors = diffDescriptors;
             }
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
@@ -128,6 +142,7 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
               isDisplayingChanges: false,
               activeIndex: undefined,
               contributorTags: [],
+              reveal: undefined,
               /**
                * Reset isInverted & diffType state when hiding diffs
                * Otherwise this should persist for the diff-showing session
@@ -141,9 +156,9 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
               } : {})
             };
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') {
-            var _newPluginState1;
+            var _newPluginState10;
             // Update the active index in plugin state and recalculate decorations
-            const decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.diffType);
+            const decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (_newPluginState10 = newPluginState) === null || _newPluginState10 === void 0 ? void 0 : _newPluginState10.diffType);
             if (decorations.length > 0) {
               var _currentPluginState$a;
               // Initialize to -1 if undefined so that the first "next" scroll takes us to index 0 (first change).
@@ -238,6 +253,10 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
           }
           const pluginState = showDiffPluginKey.getState(view.state);
 
+          // A repaint rebuilds inline decorations, destroying any animation bound to them, so
+          // an in-flight reveal has to be re-attached to the new nodes. No-op when idle.
+          rebindReveal(view, view.dom);
+
           // Scroll to the first decoration when scrollIntoView was requested.
           // Use the same filtered/position-sorted list as the active-index path
           // so "first" reliably means the topmost scrollable diff in the document.

package/dist/es2019/pm-plugins/resolveDiffContributors.js

@@ -62,6 +62,10 @@ const resolveAgent = (attribution, profilesByAccountId) => {
  * reads as "nobody touched this", so the whole list is dropped and the plain diff renders instead.
  */
 export const resolveDiffContributors = (stepsWithAttribution, profiles) => {
+  // Profiles opt callers into contributor tags; attribution alone still supplies diff colours.
+  if (profiles === undefined) {
+    return undefined;
+  }
   const profilesByAccountId = toProfilesByAccountId(profiles);
   const contributors = [];
   /** Keyed as the plugin keys changes, so no two entries can collapse onto one another. */