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

ShowDiff plugin for @atlaskit/editor-core

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
import { trackChangesMessages } from '@atlaskit/editor-common/messages';
import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { isExtendedEnabled } from '../../isExtendedEnabled';
import { applyTableCellEdgeAttrs } from './tableCellEdgeAttrs';
import { getChangedContentStyle, getChangedNodeStyle, getDeletedContentStyle, getDeletedContentStyleUnbounded, getInsertedContentStyle, hasRestingDeletedRing, isMultiContainerBlockNode, isTextLikeBlockNode, resolveCellOverlayStyle, resolveNestedInsertedNodeStyle, resolveRemovedLozengeStyle } from './wrapBlockNodeViewStyles';
var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
  switch (nodeName) {
    case 'expand':
    case 'codeBlock':
    case 'mediaSingle':
    case 'panel':
    case 'decisionList':
    case 'embedCard':
    case 'blockquote':
      return true;
    default:
      return false;
  }
};
var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeClass(nodeName) {
  switch (nodeName) {
    case 'mediaSingle':
    case 'embedCard':
    case 'blockquote':
      return true;
    default:
      return false;
  }
};

/** Scroll-nav “new” ring (4px red subtlest) for media/embed; styled in editor-core smartCardStyles. */
var maybeAddDeletedOutlineNewClass = function maybeAddDeletedOutlineNewClass(_ref) {
  var nodeView = _ref.nodeView,
    targetNode = _ref.targetNode,
    colorScheme = _ref.colorScheme,
    _ref$isActive = _ref.isActive,
    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
  var name = targetNode.type.name;
  if (name !== 'mediaSingle' && name !== 'embedCard') {
    return;
  }
  // Only schemes with a resting ring get the class.
  if (hasRestingDeletedRing(colorScheme) && !isActive) {
    nodeView.classList.add('show-diff-deleted-outline-new');
  }
};

/**
 * Checks if a node should apply deleted styles directly without wrapper
 * to preserve natural block-level margins
 */
var shouldApplyStylesDirectly = function shouldApplyStylesDirectly(nodeName) {
  return nodeName === 'heading';
};
var applyCellOverlayStyles = function applyCellOverlayStyles(_ref2) {
  var element = _ref2.element,
    colorScheme = _ref2.colorScheme,
    isInserted = _ref2.isInserted;
  var isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
  var overlayStyle = resolveCellOverlayStyle({
    colorScheme: colorScheme,
    isInserted: isInserted,
    isRoundedTable: isRoundedTable
  });
  element.querySelectorAll('td, th').forEach(function (cell) {
    var overlay = document.createElement('span');
    overlay.setAttribute('style', overlayStyle);
    cell.appendChild(overlay);
  });
};

/**
 * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
 */
var createRemovedLozenge = function createRemovedLozenge(intl) {
  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  var colorScheme = arguments.length > 2 ? arguments[2] : undefined;
  var container = document.createElement('span');
  var containerStyle = convertToInlineCss({
    position: 'absolute',
    top: "var(--ds-space-075, 6px)",
    right: "var(--ds-space-075, 6px)",
    zIndex: 2,
    pointerEvents: 'none',
    display: 'flex'
  });
  container.setAttribute('style', containerStyle);
  container.setAttribute('data-testid', 'show-diff-removed-lozenge');

  // Create vanilla HTML lozenge element with Atlaskit Lozenge styling (visual refresh)
  var lozengeElement = document.createElement('span');
  var lozengeInnerStyle = resolveRemovedLozengeStyle(colorScheme, isActive);
  lozengeElement.setAttribute('style', lozengeInnerStyle);
  lozengeElement.textContent = intl.formatMessage(trackChangesMessages.removed).toUpperCase();
  container.appendChild(lozengeElement);
  return container;
};

/**
 * Wraps a block node in a container with relative positioning to support absolute positioned lozenge
 */
var createBlockNodeWrapper = function createBlockNodeWrapper() {
  var wrapper = document.createElement('div');
  var baseStyle = convertToInlineCss({
    position: 'relative',
    display: 'block',
    opacity: 1
  });
  wrapper.setAttribute('style', baseStyle);
  return wrapper;
};

/**
 * Applies styles directly to an HTML element by merging with existing styles
 */
var applyStylesToElement = function applyStylesToElement(_ref3) {
  var element = _ref3.element,
    targetNode = _ref3.targetNode,
    colorScheme = _ref3.colorScheme,
    isActive = _ref3.isActive,
    isInserted = _ref3.isInserted,
    diffType = _ref3.diffType,
    _ref3$hideAddedDiffsU = _ref3.hideAddedDiffsUnderline,
    hideAddedDiffsUnderline = _ref3$hideAddedDiffsU === void 0 ? false : _ref3$hideAddedDiffsU;
  var currentStyle = element.getAttribute('style') || '';
  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, diffType, hideAddedDiffsUnderline);
  var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
  var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
  element.setAttribute('style', "".concat(currentStyle).concat(contentStyle).concat(nodeSpecificStyle));
};
var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref4) {
  var element = _ref4.element,
    targetNode = _ref4.targetNode,
    colorScheme = _ref4.colorScheme,
    isActive = _ref4.isActive,
    isInserted = _ref4.isInserted,
    diffType = _ref4.diffType,
    _ref4$hideAddedDiffsU = _ref4.hideAddedDiffsUnderline,
    hideAddedDiffsUnderline = _ref4$hideAddedDiffsU === void 0 ? false : _ref4$hideAddedDiffsU;
  var currentStyle = element.getAttribute('style') || '';
  var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
  var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
  if (targetNode.type.name === 'decisionList') {
    var nestedInsertedNodeStyle = resolveNestedInsertedNodeStyle();
    element.querySelectorAll('li').forEach(function (listItem) {
      var currentListItemStyle = listItem.getAttribute('style') || '';
      listItem.setAttribute('style', "".concat(currentListItemStyle).concat(nestedInsertedNodeStyle));
    });
  } else if (targetNode.type.name === 'layoutSection') {
    var _nestedInsertedNodeStyle = resolveNestedInsertedNodeStyle();
    element.querySelectorAll('[data-layout-column="true"]').forEach(function (section) {
      var currentSectionStyle = section.getAttribute('style') || '';
      section.setAttribute('style', "".concat(currentSectionStyle).concat(_nestedInsertedNodeStyle));
    });
  } else if (targetNode.type.name === 'taskList') {
    var _nestedInsertedNodeStyle2 = resolveNestedInsertedNodeStyle();
    element.querySelectorAll('li').forEach(function (listItem) {
      var currentListItemStyle = listItem.getAttribute('style') || '';
      listItem.setAttribute('style', "".concat(currentListItemStyle).concat(_nestedInsertedNodeStyle2));
    });
  }
  element.setAttribute('style', "".concat(currentStyle, ";").concat(nodeSpecificStyle));
};
var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref5) {
  var element = _ref5.element,
    targetNode = _ref5.targetNode,
    colorScheme = _ref5.colorScheme,
    isActive = _ref5.isActive,
    isInserted = _ref5.isInserted,
    diffType = _ref5.diffType,
    _ref5$hideAddedDiffsU = _ref5.hideAddedDiffsUnderline,
    hideAddedDiffsUnderline = _ref5$hideAddedDiffsU === void 0 ? false : _ref5$hideAddedDiffsU;
  var currentStyle = element.getAttribute('style') || '';
  var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
  if (nodeSpecificStyle) {
    element.setAttribute('style', "".concat(currentStyle).concat(nodeSpecificStyle));
  }
  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, diffType, hideAddedDiffsUnderline);
  var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
  var textNodesToWrap = [];
  var currentNode = walker.nextNode();
  while (currentNode) {
    if (currentNode instanceof Text && currentNode.textContent !== '' && currentNode.parentElement) {
      textNodesToWrap.push(currentNode);
    }
    currentNode = walker.nextNode();
  }
  textNodesToWrap.forEach(function (textNode) {
    var contentWrapper = document.createElement('span');
    contentWrapper.setAttribute('style', contentStyle);
    textNode.replaceWith(contentWrapper);
    contentWrapper.append(textNode);
  });
};

/**
 * Creates a content wrapper with deleted styles for a block node
 */
var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref6) {
  var nodeView = _ref6.nodeView,
    targetNode = _ref6.targetNode,
    colorScheme = _ref6.colorScheme,
    isActive = _ref6.isActive,
    isInserted = _ref6.isInserted,
    diffType = _ref6.diffType,
    _ref6$hideAddedDiffsU = _ref6.hideAddedDiffsUnderline,
    hideAddedDiffsUnderline = _ref6$hideAddedDiffsU === void 0 ? false : _ref6$hideAddedDiffsU;
  var contentWrapper = document.createElement('div');
  var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
  var nodeStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline);

  // When the extended experiment is enabled and the content is inserted,
  // block widget nodes that already have dedicated node-level styling (e.g. boxShadow outline)
  // should not also get the inline content style (borderBottom underline) on their container.
  var shouldSkipContentStyle = isExtendedEnabled(diffType) && isInserted && nodeStyle !== undefined;
  var contentStyle = shouldSkipContentStyle ? '' : getChangedContentStyle(colorScheme, isActive, isInserted, diffType, hideAddedDiffsUnderline);
  contentWrapper.setAttribute('style', "".concat(contentStyle).concat(nodeStyle || ''));
  contentWrapper.append(nodeView);
  return contentWrapper;
};

/**
 * Handles embedCard node rendering with lozenge attached to the rich-media-item container.
 * Since embedCard content loads asynchronously, we use a MutationObserver
 * to wait for the rich-media-item to appear before attaching the lozenge.
 * @returns true if embedCard was handled
 */
var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref7) {
  var dom = _ref7.dom,
    nodeView = _ref7.nodeView,
    targetNode = _ref7.targetNode,
    lozenge = _ref7.lozenge,
    colorScheme = _ref7.colorScheme,
    _ref7$isActive = _ref7.isActive,
    isActive = _ref7$isActive === void 0 ? false : _ref7$isActive;
  if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
    return false;
  }
  var richMediaItem = nodeView.querySelector('.rich-media-item');
  if (richMediaItem instanceof HTMLElement) {
    richMediaItem.appendChild(lozenge);
  } else {
    var observer = new MutationObserver(function (_, obs) {
      var loadedRichMedia = nodeView.querySelector('.rich-media-item');
      if (loadedRichMedia instanceof HTMLElement) {
        loadedRichMedia.appendChild(lozenge);
        obs.disconnect();
      }
    });
    observer.observe(nodeView, {
      childList: true,
      subtree: true
    });
  }
  if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
    var showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
    nodeView.classList.add(showDiffDeletedNodeClass);
    if (isActive) {
      nodeView.classList.add('show-diff-deleted-active');
    }
    maybeAddDeletedOutlineNewClass({
      nodeView: nodeView,
      targetNode: targetNode,
      colorScheme: colorScheme,
      isActive: isActive
    });
  }
  dom.append(nodeView);
  return true;
};

/**
 * Handles special mediaSingle node rendering with lozenge on child media element
 * @returns true if mediaSingle was handled, false otherwise
 */
var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref8) {
  var dom = _ref8.dom,
    nodeView = _ref8.nodeView,
    targetNode = _ref8.targetNode,
    lozenge = _ref8.lozenge,
    colorScheme = _ref8.colorScheme,
    _ref8$isActive = _ref8.isActive,
    isActive = _ref8$isActive === void 0 ? false : _ref8$isActive;
  if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
    return false;
  }
  var mediaNode = nodeView.querySelector('[data-prosemirror-node-name="media"]');
  if (!mediaNode || !(mediaNode instanceof HTMLElement)) {
    return false;
  }

  // Add relative positioning to media node to anchor lozenge
  var currentStyle = mediaNode.getAttribute('style') || '';
  var relativePositionStyle = convertToInlineCss({
    position: 'relative'
  });
  mediaNode.setAttribute('style', "".concat(currentStyle).concat(relativePositionStyle));
  mediaNode.append(lozenge);

  // Add deleted node class if needed
  if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
    var showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
    nodeView.classList.add(showDiffDeletedNodeClass);
    if (isActive) {
      nodeView.classList.add('show-diff-deleted-active');
    }
    maybeAddDeletedOutlineNewClass({
      nodeView: nodeView,
      targetNode: targetNode,
      colorScheme: colorScheme,
      isActive: isActive
    });
  }
  dom.append(nodeView);
  return true;
};

/**
 * Appends a block node with wrapper, lozenge, and appropriate styling
 */
var wrapBlockNode = function wrapBlockNode(_ref9) {
  var dom = _ref9.dom,
    nodeView = _ref9.nodeView,
    targetNode = _ref9.targetNode,
    colorScheme = _ref9.colorScheme,
    intl = _ref9.intl,
    _ref9$isActive = _ref9.isActive,
    isActive = _ref9$isActive === void 0 ? false : _ref9$isActive,
    _ref9$isInserted = _ref9.isInserted,
    isInserted = _ref9$isInserted === void 0 ? false : _ref9$isInserted,
    diffType = _ref9.diffType,
    _ref9$hideAddedDiffsU = _ref9.hideAddedDiffsUnderline,
    hideAddedDiffsUnderline = _ref9$hideAddedDiffsU === void 0 ? false : _ref9$hideAddedDiffsU;
  var blockWrapper = createBlockNodeWrapper();
  var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
  if (shouldShowRemovedLozenge(targetNodeName) && (!isExtendedEnabled(diffType) || !isInserted)) {
    var lozenge = createRemovedLozenge(intl, isActive, colorScheme);
    if (handleEmbedCardWithLozenge({
      dom: dom,
      nodeView: nodeView,
      targetNode: targetNode,
      lozenge: lozenge,
      colorScheme: colorScheme,
      isActive: isActive
    })) {
      return;
    }
    if (handleMediaSingleWithLozenge({
      dom: dom,
      nodeView: nodeView,
      targetNode: targetNode,
      lozenge: lozenge,
      colorScheme: colorScheme,
      isActive: isActive
    })) {
      return;
    }
    blockWrapper.append(lozenge);
  }
  var contentWrapper = createBlockNodeContentWrapper({
    nodeView: nodeView,
    targetNode: targetNode,
    colorScheme: colorScheme,
    isActive: isActive,
    isInserted: isInserted,
    diffType: diffType,
    hideAddedDiffsUnderline: hideAddedDiffsUnderline
  });
  blockWrapper.append(contentWrapper);
  if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
    var showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
    nodeView.classList.add(showDiffDeletedNodeClass);
    if (isActive) {
      nodeView.classList.add('show-diff-deleted-active');
    }
    maybeAddDeletedOutlineNewClass({
      nodeView: nodeView,
      targetNode: targetNode,
      colorScheme: colorScheme,
      isActive: isActive
    });
  }
  dom.append(blockWrapper);
};

/**
 * Handles all block node rendering with appropriate deleted styling.
 * For heading nodes, applies styles directly to preserve natural margins.
 * For other block nodes, uses wrapper approach with optional lozenge.
 */
export var wrapBlockNodeView = function wrapBlockNodeView(_ref0) {
  var dom = _ref0.dom,
    nodeView = _ref0.nodeView,
    targetNode = _ref0.targetNode,
    colorScheme = _ref0.colorScheme,
    intl = _ref0.intl,
    _ref0$isActive = _ref0.isActive,
    isActive = _ref0$isActive === void 0 ? false : _ref0$isActive,
    _ref0$isInserted = _ref0.isInserted,
    isInserted = _ref0$isInserted === void 0 ? false : _ref0$isInserted,
    diffType = _ref0.diffType,
    _ref0$hideAddedDiffsU = _ref0.hideAddedDiffsUnderline,
    hideAddedDiffsUnderline = _ref0$hideAddedDiffsU === void 0 ? false : _ref0$hideAddedDiffsU;
  if (isExtendedEnabled(diffType)) {
    if (nodeView instanceof HTMLElement) {
      if (isInserted && isMultiContainerBlockNode(targetNode.type.name)) {
        applyMultiContainerLikeStyles({
          element: nodeView,
          targetNode: targetNode,
          colorScheme: colorScheme,
          isActive: isActive,
          isInserted: isInserted,
          diffType: diffType,
          hideAddedDiffsUnderline: hideAddedDiffsUnderline
        });
        dom.append(nodeView);
        return;
      }
      if (isTextLikeBlockNode(targetNode.type.name)) {
        applyTextLikeBlockNodeStyles({
          element: nodeView,
          targetNode: targetNode,
          colorScheme: colorScheme,
          isActive: isActive,
          isInserted: isInserted,
          diffType: diffType,
          hideAddedDiffsUnderline: hideAddedDiffsUnderline
        });
        dom.append(nodeView);
        return;
      }
      if (targetNode.type.name === 'table') {
        if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true)) {
          applyTableCellEdgeAttrs({
            element: nodeView,
            tableNode: targetNode
          });
        }
        applyCellOverlayStyles({
          element: nodeView,
          colorScheme: colorScheme,
          isInserted: isInserted
        });
        dom.append(nodeView);
        return;
      }
    }
    wrapBlockNode({
      dom: dom,
      nodeView: nodeView,
      targetNode: targetNode,
      colorScheme: colorScheme,
      intl: intl,
      isActive: isActive,
      isInserted: isInserted,
      diffType: diffType,
      hideAddedDiffsUnderline: hideAddedDiffsUnderline
    });
    return;
  } else {
    if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
      // Apply deleted styles directly to preserve natural block-level margins
      applyStylesToElement({
        element: nodeView,
        targetNode: targetNode,
        colorScheme: colorScheme,
        isActive: isActive,
        isInserted: isInserted,
        diffType: diffType
      });
      dom.append(nodeView);
    } else {
      wrapBlockNode({
        dom: dom,
        nodeView: nodeView,
        targetNode: targetNode,
        colorScheme: colorScheme,
        intl: intl,
        isActive: isActive,
        isInserted: isInserted,
        diffType: diffType
      });
    }
  }
};

/**
 * Injects a styled inner wrapper span around the children of a block node element.
 * CSS backgrounds don't work when applied to a wrapper around a paragraph, so
 * the wrapper needs to be injected inside the node around the child content.
 */
export var injectInnerWrapper = function injectInnerWrapper(_ref1) {
  var node = _ref1.node,
    colorScheme = _ref1.colorScheme,
    isActive = _ref1.isActive,
    isInserted = _ref1.isInserted,
    diffType = _ref1.diffType;
  var wrapper = document.createElement('span');
  wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive, diffType));
  _toConsumableArray(node.childNodes).forEach(function (child) {
    var removedChild = node.removeChild(child);
    wrapper.append(removedChild);
  });
  node.appendChild(wrapper);
  return node;
};

/**
 * Creates a styled span wrapper for inline content within a change decoration.
 */
export var createContentWrapper = function createContentWrapper(colorScheme) {
  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  var diffType = arguments.length > 3 ? arguments[3] : undefined;
  var wrapper = document.createElement('span');
  var baseStyle = convertToInlineCss({
    position: 'relative',
    width: 'fit-content'
  });
  if (isExtendedEnabled(diffType)) {
    if (isInserted) {
      wrapper.setAttribute('style', "".concat(baseStyle).concat(getInsertedContentStyle(colorScheme, isActive)));
    } else {
      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive, diffType)));
      var strikethrough = document.createElement('span');
      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
      wrapper.append(strikethrough);
    }
  } else {
    wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive, diffType)));
    var _strikethrough = document.createElement('span');
    _strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
    wrapper.append(_strikethrough);
  }
  return wrapper;
};