@atlaskit/editor-plugin-show-diff/dist/cjs/pm-plugins/decorations/createInlineChangedDecoration.js

ShowDiff plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createInlineChangedDecoration = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _isExtendedEnabled = require("../isExtendedEnabled");
var _factory = require("./colorSchemes/factory");
var _schemes = require("./colorSchemes/schemes");
var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
var _createInlineChangedDecorationStyles = require("./createInlineChangedDecoration.styles.legacy");
var _decorationKeys = require("./decorationKeys");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var displayNoneStyle = (0, _lazyNodeView.convertToInlineCss)({
  display: 'none'
});
var DEFAULT_COLOR_SCHEME = 'standard';
var getColorScheme = function getColorScheme(colorScheme) {
  return _schemes.colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : DEFAULT_COLOR_SCHEME];
};

/**
 * Class names for an atomic inline node decoration (date, emoji, mention, status). Scheme-agnostic
 * — `buildAtomicInlineChangedCSSVariables()` supplies the colour inline on the same element.
 */
var getAtomicInlineNodeClassName = function getAtomicInlineNodeClassName(inlineNodeName) {
  var classNames = ['show-diff-atomic-inline-changed'];
  if (inlineNodeName) {
    classNames.push("show-diff-atomic-inline-changed-".concat(inlineNodeName));
  }
  return classNames.join(' ');
};

/** Inline style for inserted content under the extended diff experience. */
var getExtendedInsertStyle = function getExtendedInsertStyle(colors, isActive, hideAddedDiffsUnderline) {
  if (colors.insertedInlineTreatment === 'underline') {
    // hideAddedDiffsUnderline only targets the 'borderBottom' rule, so it does not apply here.
    return isActive ? (0, _factory.buildInsertStyleActive)(colors) : (0, _factory.buildInsertStyle)(colors);
  }
  if (isActive) {
    return hideAddedDiffsUnderline ? (0, _factory.buildInsertStyleExtendedNoUnderlineActive)(colors) : (0, _factory.buildInsertStyleExtendedActive)(colors);
  }
  return hideAddedDiffsUnderline ? (0, _factory.buildInsertStyleExtendedNoUnderline)(colors) : (0, _factory.buildInsertStyleExtended)(colors);
};

/** Inline style for deleted content under the extended diff experience. */
var getExtendedDeletedStyle = function getExtendedDeletedStyle(colors, isActive) {
  if (colors.deletedInlineTreatment === 'strikethrough') {
    // Identical in both states — the block decoration carries the active emphasis.
    return (0, _factory.buildDeletedInlineStyle)(colors, false);
  }
  return (0, _factory.buildDeletedInlineStyleStandard)(colors, isActive ? 'active' : 'default') + (0, _factory.buildDeletedInlineContentStyleExtended)(colors);
};

/** Registry-driven inline `style` for a changed-content decoration. */
var resolveInlineChangedStyleRefactored = function resolveInlineChangedStyleRefactored(_ref) {
  var colors = _ref.colors,
    diffType = _ref.diffType,
    hideAddedDiffsUnderline = _ref.hideAddedDiffsUnderline,
    isActive = _ref.isActive,
    isInserted = _ref.isInserted;
  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
    return isInserted ? getExtendedInsertStyle(colors, isActive, hideAddedDiffsUnderline) : getExtendedDeletedStyle(colors, isActive);
  }
  return isActive ? (0, _factory.buildInsertStyleActive)(colors) : (0, _factory.buildInsertStyle)(colors);
};

/**
 * Single gate for the inline `style` string: registry + factory when the refactor is on, the
 * verbatim pre-refactor per-scheme constants when it is off.
 */
var resolveInlineChangedStyle = function resolveInlineChangedStyle(args) {
  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor') ? resolveInlineChangedStyleRefactored(args) : (0, _createInlineChangedDecorationStyles.resolveInlineChangedStyleLegacy)(args);
};

/**
 * Single gate for the atomic-inline-node decoration attributes. The two cohorts differ in the DOM:
 * on, the colour rides on an inline CSS variable and the class list is scheme-agnostic; off, the
 * colour comes from a `-traditional` class and no variable is emitted. Returned together so the
 * class list and style suffix can never be mixed across cohorts.
 */
var resolveAtomicInlineAttrs = function resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) {
  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor') ? {
    className: getAtomicInlineNodeClassName(inlineNodeName),
    styleSuffix: (0, _factory.buildAtomicInlineChangedCSSVariables)(colors)
  } : {
    className: (0, _createInlineChangedDecorationStyles.getAtomicInlineNodeClassNameLegacy)(inlineNodeName, colorScheme),
    styleSuffix: ''
  };
};

/**
 * Inline decoration used for insertions as the content already exists in the document
 *
 * @param change Changeset "change" containing information about the change content + range
 * @returns Prosemirror inline decoration
 */

var createInlineChangedDecoration = exports.createInlineChangedDecoration = function createInlineChangedDecoration(_ref2) {
  var change = _ref2.change,
    colorScheme = _ref2.colorScheme,
    _ref2$isActive = _ref2.isActive,
    isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
    _ref2$isInserted = _ref2.isInserted,
    isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
    _ref2$isAtomicInlineN = _ref2.isAtomicInlineNode,
    isAtomicInlineNode = _ref2$isAtomicInlineN === void 0 ? false : _ref2$isAtomicInlineN,
    _ref2$shouldHideDelet = _ref2.shouldHideDeleted,
    shouldHideDeleted = _ref2$shouldHideDelet === void 0 ? false : _ref2$shouldHideDelet,
    _ref2$showIndicators = _ref2.showIndicators,
    showIndicators = _ref2$showIndicators === void 0 ? false : _ref2$showIndicators,
    doc = _ref2.doc,
    diffType = _ref2.diffType,
    _ref2$hideAddedDiffsU = _ref2.hideAddedDiffsUnderline,
    hideAddedDiffsUnderline = _ref2$hideAddedDiffsU === void 0 ? false : _ref2$hideAddedDiffsU,
    inlineNodeName = _ref2.inlineNodeName,
    _ref2$hasDeletedWidge = _ref2.hasDeletedWidget,
    hasDeletedWidget = _ref2$hasDeletedWidge === void 0 ? false : _ref2$hasDeletedWidge,
    _ref2$isDeletedWidget = _ref2.isDeletedWidgetBelow,
    isDeletedWidgetBelow = _ref2$isDeletedWidget === void 0 ? false : _ref2$isDeletedWidget;
  var diffId = crypto.randomUUID();
  if (shouldHideDeleted) {
    return [_view.Decoration.inline(change.fromB, change.toB, {
      style: displayNoneStyle
    }, (0, _decorationKeys.buildDiffDecorationSpec)({
      decorationType: 'inline',
      diffId: diffId,
      isActive: isActive
    }))];
  }
  var colors = getColorScheme(colorScheme);
  var style = resolveInlineChangedStyle({
    colors: colors,
    colorScheme: colorScheme,
    diffType: diffType,
    hideAddedDiffsUnderline: hideAddedDiffsUnderline,
    isActive: isActive,
    isInserted: isInserted
  });
  var isAtomicInlineInsertion = isAtomicInlineNode && isInserted;
  var atomicInlineAttrs = isAtomicInlineInsertion ? resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) : undefined;
  var decorations = [_view.Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread({
    style: atomicInlineAttrs ? "".concat(style).concat(atomicInlineAttrs.styleSuffix) : style
  }, atomicInlineAttrs && {
    class: atomicInlineAttrs.className
  }), {}, {
    'data-testid': 'show-diff-changed-decoration'
  }), (0, _decorationKeys.buildDiffDecorationSpec)({
    decorationType: 'inline',
    diffId: diffId,
    isActive: isActive
  }))];
  if (showIndicators && doc && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
    // For paragraphs, fromB/toB land on the outer block
    // boundary. Adjust anchor widgets into inline content so the indicator
    // bar doesn't extend into the preceding block's margin.
    // Skip when the deleted-content widget is rendered — the anchor must
    // stay at the boundary to keep the indicator continuous.
    //
    // The widget only pins the end of the range it is anchored to. It sits at `change.fromB`
    // by default, but `deletedDiffPlacement: 'bottom'` / `inlineDeletedDiffPlacement: 'after'`
    // move it to `change.toB` so the deleted content reads after the added content. In that
    // case the `from` anchor has no widget beside it any more and must be adjusted inward
    // again, otherwise the over-long indicator bar that CCI-18224 fixed comes back.
    var anchorFrom = change.fromB;
    var anchorTo = change.toB;
    if (!hasDeletedWidget || isDeletedWidgetBelow) {
      var _$from$nodeAfter;
      var $from = doc.resolve(anchorFrom);
      if (!$from.parent.inlineContent && (_$from$nodeAfter = $from.nodeAfter) !== null && _$from$nodeAfter !== void 0 && _$from$nodeAfter.isTextblock) {
        anchorFrom = anchorFrom + 1;
      }
    }
    if (!hasDeletedWidget) {
      var _$to$nodeBefore;
      var $to = doc.resolve(anchorTo);
      if (!$to.parent.inlineContent && (_$to$nodeBefore = $to.nodeBefore) !== null && _$to$nodeBefore !== void 0 && _$to$nodeBefore.isTextblock) {
        anchorTo = anchorTo - 1;
      }
    }
    decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createAnchorDecorationWidgets.createInlineIndicatorAnchorWidgets)({
      doc: doc,
      from: anchorFrom,
      to: anchorTo,
      diffId: diffId
    })));
  }
  return decorations;
};