@atlaskit/editor-plugin-show-diff 5.0.4 → 5.0.6

package/dist/cjs/pm-plugins/{decorations.js → decorations/createNodeChangedDecorationWidget.js}

@@ -3,41 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDeletedContentStyleUnbounded = exports.getDeletedContentStyle = exports.createInlineChangedDecoration = exports.createDeletedContentDecoration = exports.createBlockChangedDecoration = void 0;
+exports.createNodeChangedDecorationWidget = 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 _deletedBlocksHandler = require("./deletedBlocksHandler");
-var _deletedRowsHandler = require("./deletedRowsHandler");
-var _findSafeInsertPos = require("./findSafeInsertPos");
-/**
- * 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(change, colorScheme) {
-  var isActive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var style;
-  if (colorScheme === 'traditional') {
-    style = isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
-  } else {
-    style = isActive ? _standard.editingStyleActive : _standard.editingStyle;
-  }
-  return _view.Decoration.inline(change.fromB, change.toB, {
-    style: style,
-    'data-testid': 'show-diff-changed-decoration'
-  }, {
-    key: 'diff-inline'
-  });
-};
-var getDeletedContentStyleUnbounded = exports.getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
+var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWidgets");
+var _findSafeInsertPos = require("./utils/findSafeInsertPos");
+var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
+var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
   return colorScheme === 'traditional' ? _traditional.deletedTraditionalContentStyleUnbounded : _standard.deletedContentStyleUnbounded;
 };
-var getDeletedContentStyle = exports.getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
+var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   if (colorScheme === 'traditional') {
     return _traditional.deletedTraditionalContentStyle;
@@ -47,47 +26,14 @@ var getDeletedContentStyle = exports.getDeletedContentStyle = function getDelete
   }
   return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNew : _standard.deletedContentStyle;
 };
-var getNodeClass = function getNodeClass(name) {
-  switch (name) {
-    case 'extension':
-      return 'show-diff-changed-decoration-node';
-    default:
-      return undefined;
-  }
-};
-var getBlockNodeStyle = function getBlockNodeStyle(name, colorScheme) {
-  return colorScheme === 'traditional' ? (0, _traditional.getTraditionalNodeStyle)(name) : (0, _standard.getStandardNodeStyle)(name);
-};
 
 /**
- * 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
+ * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
  */
-var createBlockChangedDecoration = exports.createBlockChangedDecoration = function createBlockChangedDecoration(change, colorScheme) {
-  if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
-    var style = getBlockNodeStyle(change.name, colorScheme);
-    var className = getNodeClass(change.name);
-    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'
-      });
-    }
-    return undefined;
-  } else {
-    return _view.Decoration.node(change.from, change.to, {
-      style: getBlockNodeStyle(change.name, colorScheme),
-      'data-testid': 'show-diff-changed-decoration-node',
-      class: getNodeClass(change.name)
-    }, {
-      key: 'diff-block'
-    });
-  }
+var createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive) {
+  var wrapper = document.createElement('span');
+  wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
+  return wrapper;
 };
 var createContentWrapper = function createContentWrapper(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -102,7 +48,7 @@ var createContentWrapper = function createContentWrapper(colorScheme) {
   wrapper.append(strikethrough);
   return wrapper;
 };
-var createDeletedContentDecoration = exports.createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
+var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref) {
   var change = _ref.change,
     doc = _ref.doc,
     nodeViewSerializer = _ref.nodeViewSerializer,
@@ -132,9 +78,13 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     if (!(0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga')) {
       return;
     }
-    var _handleDeletedRows = (0, _deletedRowsHandler.handleDeletedRows)([change], doc, newDoc, nodeViewSerializer, colorScheme),
-      decorations = _handleDeletedRows.decorations;
-    return decorations;
+    return (0, _createChangedRowDecorationWidgets.createChangedRowDecorationWidgets)({
+      changes: [change],
+      originalDoc: doc,
+      newDoc: newDoc,
+      nodeViewSerializer: nodeViewSerializer,
+      colorScheme: colorScheme
+    });
   }
   var serializer = nodeViewSerializer;
 
@@ -212,7 +162,13 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
         dom.append(wrapper);
       } else {
         // Handle all block nodes with unified function
-        (0, _deletedBlocksHandler.handleBlockNodeView)(dom, nodeView, node, colorScheme, intl);
+        (0, _wrapBlockNodeView.wrapBlockNodeView)({
+          dom: dom,
+          nodeView: nodeView,
+          targetNode: node,
+          colorScheme: colorScheme,
+          intl: intl
+        });
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
       // Skip the case where the node is a paragraph or table row that way it can still be rendered and delete the entire table
@@ -220,7 +176,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     } else {
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        var _wrapper2 = (0, _deletedBlocksHandler.createDeletedStyleWrapperWithoutOpacity)(colorScheme, isActive);
+        var _wrapper2 = createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive);
         _wrapper2.append(fallbackNode);
         dom.append(_wrapper2);
       }

package/dist/cjs/pm-plugins/{attributeDecorations.js → decorations/utils/getAttrChangeRanges.js}

@@ -51,7 +51,7 @@ var stepIsValidAttrChange = exports.stepIsValidAttrChange = function stepIsValid
       }
     }
     return false;
-  } catch (e) {
+  } catch (_unused) {
     return false;
   }
 };

package/dist/cjs/pm-plugins/{deletedBlocksHandler.js → decorations/utils/wrapBlockNodeView.js}

@@ -4,49 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldShowRemovedLozenge = exports.shouldApplyDeletedStylesDirectly = exports.shouldAddShowDiffDeletedNodeClass = exports.handleMediaSingleWithLozenge = exports.handleEmbedCardWithLozenge = exports.handleBlockNodeView = exports.getDeletedStyleNode = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutline = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedBlockOutlineRounded = exports.deletedBlockOutline = exports.createRemovedLozenge = exports.createDeletedStyleWrapperWithoutOpacity = exports.createBlockNodeWrapper = exports.createBlockNodeContentWrapper = exports.applyDeletedStylesToElement = exports.appendBlockNodeWithWrapper = void 0;
+exports.wrapBlockNodeView = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _messages = require("@atlaskit/editor-common/messages");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _decorations = require("./decorations");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _standard = require("../colorSchemes/standard");
+var _traditional = require("../colorSchemes/traditional");
 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 deletedStyleQuoteNode = exports.deletedStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
-  borderLeft: "2px solid ".concat("var(--ds-border-accent-gray, #7D818A)")
-});
-var deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNodeWithLozenge = (0, _lazyNodeView.convertToInlineCss)({
-  marginTop: "var(--ds-space-150, 12px)",
-  paddingTop: "var(--ds-space-025, 2px)",
-  paddingBottom: "var(--ds-space-025, 2px)",
-  paddingLeft: "var(--ds-space-025, 2px)",
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-var deletedTraditionalStyleQuoteNode = exports.deletedTraditionalStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
-  marginTop: "var(--ds-space-150, 12px)",
-  paddingTop: "var(--ds-space-025, 2px)",
-  paddingBottom: "var(--ds-space-025, 2px)",
-  paddingLeft: "var(--ds-space-025, 2px)",
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-var deletedBlockOutline = exports.deletedBlockOutline = (0, _lazyNodeView.convertToInlineCss)({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-var deletedTraditionalBlockOutline = exports.deletedTraditionalBlockOutline = (0, _lazyNodeView.convertToInlineCss)({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-var deletedBlockOutlineRounded = exports.deletedBlockOutlineRounded = (0, _lazyNodeView.convertToInlineCss)({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
-  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
-});
-var deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineRounded = (0, _lazyNodeView.convertToInlineCss)({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
-  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
-});
 var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -63,22 +30,32 @@ var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
-var getDeletedStyleNode = exports.getDeletedStyleNode = function getDeletedStyleNode(nodeName, colorScheme) {
+var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colorScheme === 'traditional') {
+    return _traditional.deletedTraditionalContentStyle;
+  }
+  if (isActive) {
+    return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNewActive : _standard.deletedContentStyleActive;
+  }
+  return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNew : _standard.deletedContentStyle;
+};
+var getDeletedStyleNode = function getDeletedStyleNode(nodeName, colorScheme) {
   var isTraditional = colorScheme === 'traditional';
   switch (nodeName) {
     case 'blockquote':
-      return (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge : deletedStyleQuoteNode;
+      return (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? _traditional.deletedTraditionalStyleQuoteNode : _standard.deletedStyleQuoteNodeWithLozenge : _standard.deletedStyleQuoteNode;
     case 'expand':
     case 'decisionList':
-      return isTraditional && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutline : deletedBlockOutline;
+      return isTraditional && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? _traditional.deletedTraditionalBlockOutline : _standard.deletedBlockOutline;
     case 'panel':
     case 'codeBlock':
-      return isTraditional && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutlineRounded : deletedBlockOutlineRounded;
+      return isTraditional && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? _traditional.deletedTraditionalBlockOutlineRounded : _standard.deletedBlockOutlineRounded;
     default:
       return undefined;
   }
 };
-var shouldShowRemovedLozenge = exports.shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
+var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
   switch (nodeName) {
     case 'expand':
     case 'codeBlock':
@@ -93,7 +70,7 @@ var shouldShowRemovedLozenge = exports.shouldShowRemovedLozenge = function shoul
       return false;
   }
 };
-var shouldAddShowDiffDeletedNodeClass = exports.shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeClass(nodeName) {
+var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeClass(nodeName) {
   switch (nodeName) {
     case 'mediaSingle':
     case 'embedCard':
@@ -109,14 +86,14 @@ var shouldAddShowDiffDeletedNodeClass = exports.shouldAddShowDiffDeletedNodeClas
  * Checks if a node should apply deleted styles directly without wrapper
  * to preserve natural block-level margins
  */
-var shouldApplyDeletedStylesDirectly = exports.shouldApplyDeletedStylesDirectly = function shouldApplyDeletedStylesDirectly(nodeName) {
+var shouldApplyStylesDirectly = function shouldApplyStylesDirectly(nodeName) {
   return nodeName === 'heading' || nodeName === 'blockquote' && !(0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers');
 };
 
 /**
  * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
  */
-var createRemovedLozenge = exports.createRemovedLozenge = function createRemovedLozenge(intl, nodeName) {
+var createRemovedLozenge = function createRemovedLozenge(intl, nodeName) {
   var container = document.createElement('span');
   var borderTopRightRadius;
   if (['expand', 'decisionList'].includes(nodeName || '')) {
@@ -149,7 +126,7 @@ var createRemovedLozenge = exports.createRemovedLozenge = function createRemoved
 /**
  * Wraps a block node in a container with relative positioning to support absolute positioned lozenge
  */
-var createBlockNodeWrapper = exports.createBlockNodeWrapper = function createBlockNodeWrapper() {
+var createBlockNodeWrapper = function createBlockNodeWrapper() {
   var wrapper = document.createElement('div');
   var baseStyle = (0, _lazyNodeView.convertToInlineCss)({
     position: 'relative',
@@ -161,20 +138,14 @@ var createBlockNodeWrapper = exports.createBlockNodeWrapper = function createBlo
 };
 
 /**
- * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
+ * Applies styles directly to an HTML element by merging with existing styles
  */
-var createDeletedStyleWrapperWithoutOpacity = exports.createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive) {
-  var wrapper = document.createElement('span');
-  wrapper.setAttribute('style', (0, _decorations.getDeletedContentStyle)(colorScheme, isActive));
-  return wrapper;
-};
-
-/**
- * Applies deleted styles directly to an HTML element by merging with existing styles
- */
-var applyDeletedStylesToElement = exports.applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colorScheme) {
+var applyStylesToElement = function applyStylesToElement(_ref) {
+  var element = _ref.element,
+    targetNode = _ref.targetNode,
+    colorScheme = _ref.colorScheme;
   var currentStyle = element.getAttribute('style') || '';
-  var deletedContentStyle = (0, _decorations.getDeletedContentStyle)(colorScheme);
+  var deletedContentStyle = getDeletedContentStyle(colorScheme);
   var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colorScheme) || '';
   element.setAttribute('style', "".concat(currentStyle).concat(deletedContentStyle).concat(nodeSpecificStyle));
 };
@@ -182,10 +153,13 @@ var applyDeletedStylesToElement = exports.applyDeletedStylesToElement = function
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-var createBlockNodeContentWrapper = exports.createBlockNodeContentWrapper = function createBlockNodeContentWrapper(nodeView, targetNode, colorScheme) {
+var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref2) {
+  var nodeView = _ref2.nodeView,
+    targetNode = _ref2.targetNode,
+    colorScheme = _ref2.colorScheme;
   var contentWrapper = document.createElement('div');
   var nodeStyle = getDeletedStyleNode(targetNode.type.name, colorScheme);
-  contentWrapper.setAttribute('style', "".concat((0, _decorations.getDeletedContentStyle)(colorScheme)).concat(nodeStyle || ''));
+  contentWrapper.setAttribute('style', "".concat(getDeletedContentStyle(colorScheme)).concat(nodeStyle || ''));
   contentWrapper.append(nodeView);
   return contentWrapper;
 };
@@ -196,7 +170,12 @@ var createBlockNodeContentWrapper = exports.createBlockNodeContentWrapper = func
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-var handleEmbedCardWithLozenge = exports.handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) {
+var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref3) {
+  var dom = _ref3.dom,
+    nodeView = _ref3.nodeView,
+    targetNode = _ref3.targetNode,
+    lozenge = _ref3.lozenge,
+    colorScheme = _ref3.colorScheme;
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -228,7 +207,12 @@ var handleEmbedCardWithLozenge = exports.handleEmbedCardWithLozenge = function h
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) {
+var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref4) {
+  var dom = _ref4.dom,
+    nodeView = _ref4.nodeView,
+    targetNode = _ref4.targetNode,
+    lozenge = _ref4.lozenge,
+    colorScheme = _ref4.colorScheme;
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -257,19 +241,40 @@ var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = functi
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-var appendBlockNodeWithWrapper = exports.appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeView, targetNode, colorScheme, intl) {
+var wrapBlockNode = function wrapBlockNode(_ref5) {
+  var dom = _ref5.dom,
+    nodeView = _ref5.nodeView,
+    targetNode = _ref5.targetNode,
+    colorScheme = _ref5.colorScheme,
+    intl = _ref5.intl;
   var blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name)) {
     var lozenge = createRemovedLozenge(intl);
-    if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers')) {
+    if (handleEmbedCardWithLozenge({
+      dom: dom,
+      nodeView: nodeView,
+      targetNode: targetNode,
+      lozenge: lozenge,
+      colorScheme: colorScheme
+    }) && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers')) {
       return;
     }
-    if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme)) {
+    if (handleMediaSingleWithLozenge({
+      dom: dom,
+      nodeView: nodeView,
+      targetNode: targetNode,
+      lozenge: lozenge,
+      colorScheme: colorScheme
+    })) {
       return;
     }
     blockWrapper.append(lozenge);
   }
-  var contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colorScheme);
+  var contentWrapper = createBlockNodeContentWrapper({
+    nodeView: nodeView,
+    targetNode: targetNode,
+    colorScheme: colorScheme
+  });
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
     var showDiffDeletedNodeClass = colorScheme === 'traditional' && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
@@ -283,13 +288,28 @@ var appendBlockNodeWithWrapper = exports.appendBlockNodeWithWrapper = function a
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-var handleBlockNodeView = exports.handleBlockNodeView = function handleBlockNodeView(dom, nodeView, targetNode, colorScheme, intl) {
-  if (shouldApplyDeletedStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
+var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_ref6) {
+  var dom = _ref6.dom,
+    nodeView = _ref6.nodeView,
+    targetNode = _ref6.targetNode,
+    colorScheme = _ref6.colorScheme,
+    intl = _ref6.intl;
+  if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
     // Apply deleted styles directly to preserve natural block-level margins
-    applyDeletedStylesToElement(nodeView, targetNode, colorScheme);
+    applyStylesToElement({
+      element: nodeView,
+      targetNode: targetNode,
+      colorScheme: colorScheme
+    });
     dom.append(nodeView);
   } else {
     // Use wrapper approach for other block nodes
-    appendBlockNodeWithWrapper(dom, nodeView, targetNode, colorScheme, intl);
+    wrapBlockNode({
+      dom: dom,
+      nodeView: nodeView,
+      targetNode: targetNode,
+      colorScheme: colorScheme,
+      intl: intl
+    });
   }
 };

package/dist/es2019/pm-plugins/calculateDiffDecorations.js

@@ -4,20 +4,30 @@ import memoizeOne from 'memoize-one';
 import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
 import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { getAttrChangeRanges, stepIsValidAttrChange } from './attributeDecorations';
-import { createInlineChangedDecoration, createDeletedContentDecoration, createBlockChangedDecoration } from './decorations';
-import { getMarkChangeRanges } from './markDecorations';
+import { createBlockChangedDecoration } from './decorations/createBlockChangedDecoration';
+import { createInlineChangedDecoration } from './decorations/createInlineChangedDecoration';
+import { createNodeChangedDecorationWidget } from './decorations/createNodeChangedDecorationWidget';
+import { getAttrChangeRanges, stepIsValidAttrChange } from './decorations/utils/getAttrChangeRanges';
+import { getMarkChangeRanges } from './decorations/utils/getMarkChangeRanges';
 import { simplifySteps } from './simplifyChanges';
-const calculateNodesForBlockDecoration = (doc, from, to, colorScheme) => {
+const calculateNodesForBlockDecoration = ({
+  doc,
+  from,
+  to,
+  colorScheme
+}) => {
   const decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, (node, pos) => {
     if (node.isBlock) {
       const decoration = createBlockChangedDecoration({
-        from: pos,
-        to: pos + node.nodeSize,
-        name: node.type.name
-      }, colorScheme);
+        change: {
+          from: pos,
+          to: pos + node.nodeSize,
+          name: node.type.name
+        },
+        colorScheme
+      });
       if (decoration) {
         decorations.push(decoration);
       }
@@ -107,12 +117,21 @@ const calculateDiffDecorationsInner = ({
   optimizedChanges.forEach(change => {
     const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
     if (change.inserted.length > 0) {
-      decorations.push(createInlineChangedDecoration(change, colorScheme, isActive));
-      decorations.push(...calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme));
+      decorations.push(createInlineChangedDecoration({
+        change,
+        colorScheme,
+        isActive
+      }));
+      decorations.push(...calculateNodesForBlockDecoration({
+        doc: tr.doc,
+        from: change.fromB,
+        to: change.toB,
+        colorScheme
+      }));
     }
     if (change.deleted.length > 0) {
       const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
-      const decoration = createDeletedContentDecoration({
+      const decoration = createNodeChangedDecorationWidget({
         change,
         doc: originalDoc,
         nodeViewSerializer,
@@ -128,10 +147,19 @@ const calculateDiffDecorationsInner = ({
   });
   getMarkChangeRanges(steps).forEach(change => {
     const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
-    decorations.push(createInlineChangedDecoration(change, colorScheme, isActive));
+    decorations.push(createInlineChangedDecoration({
+      change,
+      colorScheme,
+      isActive
+    }));
   });
   getAttrChangeRanges(tr.doc, attrSteps).forEach(change => {
-    decorations.push(...calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme));
+    decorations.push(...calculateNodesForBlockDecoration({
+      doc: tr.doc,
+      from: change.fromB,
+      to: change.toB,
+      colorScheme
+    }));
   });
   return DecorationSet.empty.add(tr.doc, decorations);
 };

package/dist/es2019/pm-plugins/{colorSchemes → decorations/colorSchemes}/standard.js

@@ -48,43 +48,45 @@ export const deletedContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
-const editingStyleQuoteNode = convertToInlineCss({
+export const deletedStyleQuoteNode = convertToInlineCss({
+  borderLeft: `2px solid ${"var(--ds-border-accent-gray, #7D818A)"}`
+});
+export const deletedStyleQuoteNodeWithLozenge = convertToInlineCss({
+  marginTop: "var(--ds-space-150, 12px)",
+  paddingTop: "var(--ds-space-025, 2px)",
+  paddingBottom: "var(--ds-space-025, 2px)",
+  paddingLeft: "var(--ds-space-025, 2px)",
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #7D818A)"}`,
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+export const deletedBlockOutline = convertToInlineCss({
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #7D818A)"}`,
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+export const deletedBlockOutlineRounded = convertToInlineCss({
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #7D818A)"}`,
+  borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
+});
+export const deletedRowStyle = convertToInlineCss({
+  color: "var(--ds-text-accent-gray, #505258)",
+  textDecoration: 'line-through',
+  opacity: 0.6,
+  display: 'table-row'
+});
+export const editingStyleQuoteNode = convertToInlineCss({
   borderLeft: `2px solid ${"var(--ds-border-accent-purple, #AF59E1)"}`
 });
-const editingStyleRuleNode = convertToInlineCss({
+export const editingStyleRuleNode = convertToInlineCss({
   backgroundColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
-const editingStyleNode = convertToInlineCss({
+export const editingStyleNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-purple, #AF59E1)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"
 });
-const editingStyleCardBlockNode = convertToInlineCss({
+export const editingStyleCardBlockNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-purple, #AF59E1)"}`,
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
-const standardDecorationMarkerVariableName = convertToInlineCss({
+export const standardDecorationMarkerVariable = convertToInlineCss({
   '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)"
-});
-export const getStandardNodeStyle = nodeName => {
-  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)) {
-    return standardDecorationMarkerVariableName;
-  }
-  if (nodeName === 'blockquote') {
-    return editingStyleQuoteNode;
-  }
-  if (nodeName === 'rule') {
-    return editingStyleRuleNode;
-  }
-  if (nodeName === 'blockCard') {
-    return editingStyleCardBlockNode;
-  }
-  return editingStyleNode;
-};
+});