@atlaskit/editor-plugin-show-diff/dist/esm/pm-plugins/decorations/revealStyles.js

ShowDiff plugin for @atlaskit/editor-core

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import { agentBrandColorSchemes } from '@atlaskit/agent-color/agent-brand-color-schemes';
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 { getStandardDeletedContentStyle, getStandardDeletedContentStyleActive } 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 var REVEAL_ATTR = 'data-show-diff-reveal';
/** Wipe colour, read by the animation as the gradient's colour stop. */
export var REVEAL_BG_VAR = '--show-diff-reveal-bg';

/** Underline colour, brought in on the same schedule as the highlight. */
export var REVEAL_BORDER_VAR = '--show-diff-reveal-border';

/** Only schemes with background highlights can be revealed; 'traditional' uses underline only. */
var schemeSupportsReveal = function schemeSupportsReveal(colorScheme) {
  return colorScheme !== 'traditional';
};

/** Convert a flat background colour into a wipeable gradient (zero width initially). */
export var buildWipeableBackground = function buildWipeableBackground(color) {
  return convertToInlineCss({
    backgroundColor: 'transparent',
    backgroundImage: "linear-gradient(".concat(color, ", ").concat(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). */
var revealBaseStyle = convertToInlineCss({
  padding: "1px 0 2px",
  borderBottom: "2px solid transparent"
});
var buildRevealVariables = function buildRevealVariables(_ref) {
  var background = _ref.background,
    border = _ref.border;
  return convertToInlineCss(_defineProperty(_defineProperty({}, 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). */
var revealColorsRefactored = function revealColorsRefactored(colors, _ref2) {
  var hideAddedDiffsUnderline = _ref2.hideAddedDiffsUnderline,
    isActive = _ref2.isActive,
    isInserted = _ref2.isInserted;
  return 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).
 */
var revealColorsLegacy = function revealColorsLegacy(_ref3) {
  var hideAddedDiffsUnderline = _ref3.hideAddedDiffsUnderline,
    isActive = _ref3.isActive,
    isInserted = _ref3.isInserted;
  return 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)"
  };
};
var resolveRevealColors = function resolveRevealColors(colors, variant) {
  return isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? revealColorsRefactored(colors, variant) : revealColorsLegacy(variant);
};
var getColorScheme = function getColorScheme(colorScheme) {
  return colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
};

/** Deleted text appearance (grey and strikethrough) without the highlight. */
var deletedTextOnlyStyle = function deletedTextOnlyStyle(colors, isActive) {
  return isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? buildDeletedInlineStyleStandard(colors, isActive ? 'active' : 'default') : isActive ? getStandardDeletedContentStyleActive() : getStandardDeletedContentStyle();
};

/**
 * 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 var resolveRevealStyle = function resolveRevealStyle(_ref4) {
  var colorScheme = _ref4.colorScheme,
    _ref4$hideAddedDiffsU = _ref4.hideAddedDiffsUnderline,
    hideAddedDiffsUnderline = _ref4$hideAddedDiffsU === void 0 ? false : _ref4$hideAddedDiffsU,
    _ref4$includeDeletedT = _ref4.includeDeletedTextStyle,
    includeDeletedTextStyle = _ref4$includeDeletedT === void 0 ? true : _ref4$includeDeletedT,
    isActive = _ref4.isActive,
    isInserted = _ref4.isInserted,
    reveal = _ref4.reveal;
  if ((reveal === null || reveal === void 0 ? void 0 : reveal.mode) !== 'phased' || !schemeSupportsReveal(colorScheme)) {
    return undefined;
  }
  var colors = getColorScheme(colorScheme);
  var brand = isInserted && Object.prototype.hasOwnProperty.call(agentBrandColorSchemes, colors.insertColor) ? agentBrandColorSchemes[colors.insertColor] : undefined;
  var _resolveRevealColors = resolveRevealColors(colors, {
      hideAddedDiffsUnderline: hideAddedDiffsUnderline,
      isActive: isActive,
      isInserted: isInserted
    }),
    background = _resolveRevealColors.background,
    border = _resolveRevealColors.border;
  return {
    role: isInserted ? 'added' : 'deleted',
    style: (brand ? convertToInlineCss({
      color: brand.text
    }) : '') + (isInserted || !includeDeletedTextStyle ? '' : deletedTextOnlyStyle(colors, isActive)) + revealBaseStyle + buildWipeableBackground(background) + buildRevealVariables({
      background: background,
      border: border
    })
  };
};

/** Reveal style for imperatively-built elements (deleted-content widget wrappers). */
export var applyRevealToElement = function applyRevealToElement(_ref5) {
  var colorScheme = _ref5.colorScheme,
    element = _ref5.element,
    hideAddedDiffsUnderline = _ref5.hideAddedDiffsUnderline,
    isActive = _ref5.isActive,
    isInserted = _ref5.isInserted,
    reveal = _ref5.reveal;
  var resolved = resolveRevealStyle({
    colorScheme: colorScheme,
    hideAddedDiffsUnderline: hideAddedDiffsUnderline,
    isActive: isActive,
    isInserted: isInserted,
    reveal: 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;
};