@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 _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
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 displayNoneStyle = (0, _lazyNodeView.convertToInlineCss)({
  display: 'none'
});
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', '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 (['tableCell', 'tableHeader'].includes(nodeName)) {
    if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
      // This is used for positioning the cell overlay widget decorations
      return (0, _lazyNodeView.convertToInlineCss)({
        position: 'relative'
      });
    }
    // When gate is off, it should return undefined as above
    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 ? (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalDecorationMarkerVariableNew : _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
      } else {
        return isTraditional && isActive ? _traditional.traditionalDeletedDecorationMarkerVariableActive : isTraditional ? (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalDeletedDecorationMarkerVariableNew : _traditional.traditionalDeletedDecorationMarkerVariable : _standard.deletedContentStyleNew;
      }
    }
    return isTraditional && isActive ? _traditional.traditionalDecorationMarkerVariableActive : isTraditional ? (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalDecorationMarkerVariableNew : _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 : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleQuoteNodeNew : _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
      } else {
        return isTraditional ? _traditional.deletedTraditionalStyleQuoteNode : _standard.deletedStyleQuoteNode;
      }
    }
    return isTraditional ? isActive ? _traditional.traditionalStyleQuoteNodeActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleQuoteNodeNew : _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 : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleRuleNodeNew : _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
      } else {
        return isTraditional ? (0, _traditional.getDeletedTraditionalInlineStyle)(false) : _standard.deletedContentStyleNew;
      }
    }
    return isTraditional ? isActive ? _traditional.traditionalStyleRuleNodeActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleRuleNodeNew : _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 : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleCardBlockNodeNew : _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
      } else {
        return isTraditional ? (0, _traditional.getDeletedTraditionalInlineStyle)(false) : _standard.deletedContentStyleNew;
      }
    }
    return isTraditional ? isActive ? _traditional.traditionalStyleCardBlockNodeActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleCardBlockNodeNew : _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
  }
  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
    if (isInserted) {
      return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleNodeNew : _traditional.traditionalStyleNode : _standard.editingStyleNode;
    } else {
      return isTraditional ? (0, _traditional.getDeletedTraditionalInlineStyle)(false) : _standard.deletedContentStyleNew;
    }
  }
  return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleNodeNew : _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,
    _ref2$shouldHideDelet = _ref2.shouldHideDeleted,
    shouldHideDeleted = _ref2$shouldHideDelet === void 0 ? false : _ref2$shouldHideDelet;
  var decorations = [];
  if (shouldHideDeleted) {
    return [_view.Decoration.node(change.from, change.to, {
      style: displayNoneStyle
    }, {
      key: 'diff-block',
      nodeName: change.name
    })];
  }
  var style;
  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && ['tableCell', 'tableHeader'].includes(change.name)) {
    var cellOverlay = document.createElement('div');
    var cellOverlayStyle = isInserted ? colorScheme === 'traditional' ? _traditional.traditionalAddedCellOverlayStyle : _standard.addedCellOverlayStyle : colorScheme === 'traditional' ? _traditional.deletedTraditionalCellOverlayStyle : _standard.deletedCellOverlayStyle;
    cellOverlay.setAttribute('style', cellOverlayStyle);
    decorations.push(
    // change.to - 1 to position the overlay inside the end of the cell
    _view.Decoration.widget(change.to - 1, cellOverlay, {
      key: "diff-widget-cell-overlay-".concat(change.to)
    }));
  }
  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
    style = getBlockNodeStyle({
      nodeName: change.name,
      colorScheme: colorScheme,
      isInserted: isInserted,
      isActive: isActive
    });
  } else {
    style = getBlockNodeStyle({
      nodeName: change.name,
      colorScheme: colorScheme,
      isActive: isActive
    });
  }
  var className = getNodeClass(change.name);
  if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
    if (style || className) {
      decorations.push(_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 {
    decorations.push(_view.Decoration.node(change.from, change.to, {
      style: style,
      'data-testid': 'show-diff-changed-decoration-node',
      class: className
    }, {
      key: 'diff-block',
      nodeName: change.name
    }));
  }
  return decorations;
};