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

ShowDiff plugin for @atlaskit/editor-core

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createBlockChangedDecoration = void 0;
var _view = require("@atlaskit/editor-prosemirror/view");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _standard = require("./colorSchemes/standard");
var _traditional = require("./colorSchemes/traditional");
var getNodeClass = function getNodeClass(name) {
  switch (name) {
    case 'extension':
      return 'show-diff-changed-decoration-node';
    default:
      return undefined;
  }
};
var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
  var nodeName = _ref.nodeName,
    colorScheme = _ref.colorScheme,
    _ref$isInserted = _ref.isInserted,
    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
    _ref$isActive = _ref.isActive,
    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
  var isTraditional = colorScheme === 'traditional';
  if (['mediaSingle', 'mediaGroup', 'table',
  // Handle table separately to avoid border issues
  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
  // Paragraph and heading nodes do not need special styling
  'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
    // Layout nodes do not need special styling
    return undefined;
  }
  if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
    if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
      if (isInserted) {
        return isTraditional && isActive ? _traditional.traditionalDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
      } else {
        return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
      }
    }
    return isTraditional && isActive ? _traditional.traditionalDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
  }
  if (nodeName === 'blockquote') {
    if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
      if (isInserted) {
        return isTraditional ? isActive ? _traditional.traditionalStyleQuoteNodeActive : _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
      } else {
        return isTraditional ? _traditional.deletedTraditionalStyleQuoteNode : _standard.deletedStyleQuoteNode;
      }
    }
    return isTraditional ? isActive ? _traditional.traditionalStyleQuoteNodeActive : _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
  }
  if (nodeName === 'rule') {
    if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
      if (isInserted) {
        return isTraditional ? isActive ? _traditional.traditionalStyleRuleNodeActive : _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
      } else {
        return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
      }
    }
    return isTraditional ? isActive ? _traditional.traditionalStyleRuleNodeActive : _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
  }
  if (nodeName === 'blockCard') {
    if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
      if (isInserted) {
        return isTraditional ? isActive ? _traditional.traditionalStyleCardBlockNodeActive : _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
      } else {
        return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
      }
    }
    return isTraditional ? isActive ? _traditional.traditionalStyleCardBlockNodeActive : _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
  }
  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
    if (isInserted) {
      return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNode : _standard.editingStyleNode;
    } else {
      return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
    }
  }
  return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNode : _standard.editingStyleNode;
};

/**
 * Node decoration used for block-level insertions. When isActive, uses emphasised (pressed) styling.
 *
 * @param change Node range and name
 * @param colorScheme Optional color scheme
 * @param isActive Whether this node is part of the currently active/focused change
 * @returns Prosemirror node decoration or undefined
 */
var createBlockChangedDecoration = exports.createBlockChangedDecoration = function createBlockChangedDecoration(_ref2) {
  var change = _ref2.change,
    colorScheme = _ref2.colorScheme,
    _ref2$isInserted = _ref2.isInserted,
    isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
    _ref2$isActive = _ref2.isActive,
    isActive = _ref2$isActive === void 0 ? false : _ref2$isActive;
  var style = getBlockNodeStyle({
    nodeName: change.name,
    colorScheme: colorScheme,
    isActive: isActive
  });
  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
    style = getBlockNodeStyle({
      nodeName: change.name,
      colorScheme: colorScheme,
      isInserted: isInserted,
      isActive: isActive
    });
  }
  var className = getNodeClass(change.name);
  if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
    if (style || className) {
      return _view.Decoration.node(change.from, change.to, {
        style: style,
        'data-testid': 'show-diff-changed-decoration-node',
        class: className
      }, {
        key: 'diff-block',
        nodeName: change.name
      });
    } else {
      return undefined;
    }
  }
  return _view.Decoration.node(change.from, change.to, {
    style: style,
    'data-testid': 'show-diff-changed-decoration-node',
    class: className
  }, {
    key: 'diff-block',
    nodeName: change.name
  });
};