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

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

@@ -1,42 +1,9 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { getDeletedContentStyle } from './decorations';
-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 deletedTraditionalStyleQuoteNode = 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-red, #E2483D)"}`,
-  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 deletedTraditionalBlockOutline = convertToInlineCss({
-  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
-  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 deletedTraditionalBlockOutlineRounded = convertToInlineCss({
-  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
-  borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
-});
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { deletedStyleQuoteNode, deletedStyleQuoteNodeWithLozenge, deletedBlockOutline, deletedBlockOutlineRounded, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive } from '../colorSchemes/standard';
+import { deletedTraditionalStyleQuoteNode, deletedTraditionalBlockOutline, deletedTraditionalBlockOutlineRounded, deletedTraditionalContentStyle } from '../colorSchemes/traditional';
 const lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -53,7 +20,16 @@ const lozengeStyle = convertToInlineCss({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
-export const getDeletedStyleNode = (nodeName, colorScheme) => {
+const getDeletedContentStyle = (colorScheme, isActive = false) => {
+  if (colorScheme === 'traditional') {
+    return deletedTraditionalContentStyle;
+  }
+  if (isActive) {
+    return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNewActive : deletedContentStyleActive;
+  }
+  return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
+};
+const getDeletedStyleNode = (nodeName, colorScheme) => {
   const isTraditional = colorScheme === 'traditional';
   switch (nodeName) {
     case 'blockquote':
@@ -68,7 +44,7 @@ export const getDeletedStyleNode = (nodeName, colorScheme) => {
       return undefined;
   }
 };
-export const shouldShowRemovedLozenge = nodeName => {
+const shouldShowRemovedLozenge = nodeName => {
   switch (nodeName) {
     case 'expand':
     case 'codeBlock':
@@ -83,7 +59,7 @@ export const shouldShowRemovedLozenge = nodeName => {
       return false;
   }
 };
-export const shouldAddShowDiffDeletedNodeClass = nodeName => {
+const shouldAddShowDiffDeletedNodeClass = nodeName => {
   switch (nodeName) {
     case 'mediaSingle':
     case 'embedCard':
@@ -99,14 +75,14 @@ export const shouldAddShowDiffDeletedNodeClass = nodeName => {
  * Checks if a node should apply deleted styles directly without wrapper
  * to preserve natural block-level margins
  */
-export const shouldApplyDeletedStylesDirectly = nodeName => {
+const shouldApplyStylesDirectly = nodeName => {
   return nodeName === 'heading' || nodeName === 'blockquote' && !fg('platform_editor_ai_aifc_patch_ga_blockers');
 };
 
 /**
  * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
  */
-export const createRemovedLozenge = (intl, nodeName) => {
+const createRemovedLozenge = (intl, nodeName) => {
   const container = document.createElement('span');
   let borderTopRightRadius;
   if (['expand', 'decisionList'].includes(nodeName || '')) {
@@ -140,7 +116,7 @@ export const createRemovedLozenge = (intl, nodeName) => {
 /**
  * Wraps a block node in a container with relative positioning to support absolute positioned lozenge
  */
-export const createBlockNodeWrapper = () => {
+const createBlockNodeWrapper = () => {
   const wrapper = document.createElement('div');
   const baseStyle = convertToInlineCss({
     position: 'relative',
@@ -152,18 +128,13 @@ export const createBlockNodeWrapper = () => {
 };
 
 /**
- * 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
  */
-export const createDeletedStyleWrapperWithoutOpacity = (colorScheme, isActive) => {
-  const wrapper = document.createElement('span');
-  wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
-  return wrapper;
-};
-
-/**
- * Applies deleted styles directly to an HTML element by merging with existing styles
- */
-export const applyDeletedStylesToElement = (element, targetNode, colorScheme) => {
+const applyStylesToElement = ({
+  element,
+  targetNode,
+  colorScheme
+}) => {
   const currentStyle = element.getAttribute('style') || '';
   const deletedContentStyle = getDeletedContentStyle(colorScheme);
   const nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colorScheme) || '';
@@ -173,7 +144,11 @@ export const applyDeletedStylesToElement = (element, targetNode, colorScheme) =>
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-export const createBlockNodeContentWrapper = (nodeView, targetNode, colorScheme) => {
+const createBlockNodeContentWrapper = ({
+  nodeView,
+  targetNode,
+  colorScheme
+}) => {
   const contentWrapper = document.createElement('div');
   const nodeStyle = getDeletedStyleNode(targetNode.type.name, colorScheme);
   contentWrapper.setAttribute('style', `${getDeletedContentStyle(colorScheme)}${nodeStyle || ''}`);
@@ -187,7 +162,13 @@ export const createBlockNodeContentWrapper = (nodeView, targetNode, colorScheme)
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-export const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge, colorScheme) => {
+const handleEmbedCardWithLozenge = ({
+  dom,
+  nodeView,
+  targetNode,
+  lozenge,
+  colorScheme
+}) => {
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -219,7 +200,13 @@ export const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge, c
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge, colorScheme) => {
+const handleMediaSingleWithLozenge = ({
+  dom,
+  nodeView,
+  targetNode,
+  lozenge,
+  colorScheme
+}) => {
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -248,19 +235,41 @@ export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge,
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-export const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colorScheme, intl) => {
+const wrapBlockNode = ({
+  dom,
+  nodeView,
+  targetNode,
+  colorScheme,
+  intl
+}) => {
   const blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name)) {
     const lozenge = createRemovedLozenge(intl);
-    if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) && fg('platform_editor_ai_aifc_patch_ga_blockers')) {
+    if (handleEmbedCardWithLozenge({
+      dom,
+      nodeView,
+      targetNode,
+      lozenge,
+      colorScheme
+    }) && fg('platform_editor_ai_aifc_patch_ga_blockers')) {
       return;
     }
-    if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme)) {
+    if (handleMediaSingleWithLozenge({
+      dom,
+      nodeView,
+      targetNode,
+      lozenge,
+      colorScheme
+    })) {
       return;
     }
     blockWrapper.append(lozenge);
   }
-  const contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colorScheme);
+  const contentWrapper = createBlockNodeContentWrapper({
+    nodeView,
+    targetNode,
+    colorScheme
+  });
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
     const showDiffDeletedNodeClass = colorScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
@@ -274,13 +283,29 @@ export const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colorSchem
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-export const handleBlockNodeView = (dom, nodeView, targetNode, colorScheme, intl) => {
-  if (shouldApplyDeletedStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
+export const wrapBlockNodeView = ({
+  dom,
+  nodeView,
+  targetNode,
+  colorScheme,
+  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,
+      colorScheme
+    });
     dom.append(nodeView);
   } else {
     // Use wrapper approach for other block nodes
-    appendBlockNodeWithWrapper(dom, nodeView, targetNode, colorScheme, intl);
+    wrapBlockNode({
+      dom,
+      nodeView,
+      targetNode,
+      colorScheme,
+      intl
+    });
   }
 };

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

@@ -12,20 +12,29 @@ 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';
-var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(doc, from, to, colorScheme) {
+var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(_ref) {
+  var doc = _ref.doc,
+    from = _ref.from,
+    to = _ref.to,
+    colorScheme = _ref.colorScheme;
   var decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, function (node, pos) {
     if (node.isBlock) {
       var 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: colorScheme
+      });
       if (decoration) {
         decorations.push(decoration);
       }
@@ -66,13 +75,13 @@ function optimizeChanges(changes) {
   optimized.push(current);
   return optimized;
 }
-var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref) {
-  var state = _ref.state,
-    pluginState = _ref.pluginState,
-    nodeViewSerializer = _ref.nodeViewSerializer,
-    colorScheme = _ref.colorScheme,
-    intl = _ref.intl,
-    activeIndexPos = _ref.activeIndexPos;
+var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2) {
+  var state = _ref2.state,
+    pluginState = _ref2.pluginState,
+    nodeViewSerializer = _ref2.nodeViewSerializer,
+    colorScheme = _ref2.colorScheme,
+    intl = _ref2.intl,
+    activeIndexPos = _ref2.activeIndexPos;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -115,12 +124,21 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   optimizedChanges.forEach(function (change) {
     var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
     if (change.inserted.length > 0) {
-      decorations.push(createInlineChangedDecoration(change, colorScheme, isActive));
-      decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme)));
+      decorations.push(createInlineChangedDecoration({
+        change: change,
+        colorScheme: colorScheme,
+        isActive: isActive
+      }));
+      decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration({
+        doc: tr.doc,
+        from: change.fromB,
+        to: change.toB,
+        colorScheme: colorScheme
+      })));
     }
     if (change.deleted.length > 0) {
       var _isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
-      var decoration = createDeletedContentDecoration({
+      var decoration = createNodeChangedDecorationWidget({
         change: change,
         doc: originalDoc,
         nodeViewSerializer: nodeViewSerializer,
@@ -136,31 +154,40 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   });
   getMarkChangeRanges(steps).forEach(function (change) {
     var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
-    decorations.push(createInlineChangedDecoration(change, colorScheme, isActive));
+    decorations.push(createInlineChangedDecoration({
+      change: change,
+      colorScheme: colorScheme,
+      isActive: isActive
+    }));
   });
   getAttrChangeRanges(tr.doc, attrSteps).forEach(function (change) {
-    decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme)));
+    decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration({
+      doc: tr.doc,
+      from: change.fromB,
+      to: change.toB,
+      colorScheme: colorScheme
+    })));
   });
   return DecorationSet.empty.add(tr.doc, decorations);
 };
 export var calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner,
 // Cache results unless relevant inputs change
-function (_ref2, _ref3) {
-  var _ref6;
-  var _ref4 = _slicedToArray(_ref2, 1),
-    _ref4$ = _ref4[0],
-    pluginState = _ref4$.pluginState,
-    state = _ref4$.state,
-    colorScheme = _ref4$.colorScheme,
-    intl = _ref4$.intl,
-    activeIndexPos = _ref4$.activeIndexPos;
+function (_ref3, _ref4) {
+  var _ref7;
   var _ref5 = _slicedToArray(_ref3, 1),
     _ref5$ = _ref5[0],
-    lastPluginState = _ref5$.pluginState,
-    lastState = _ref5$.state,
-    lastColorScheme = _ref5$.colorScheme,
-    lastIntl = _ref5$.intl,
-    lastActiveIndexPos = _ref5$.activeIndexPos;
+    pluginState = _ref5$.pluginState,
+    state = _ref5$.state,
+    colorScheme = _ref5$.colorScheme,
+    intl = _ref5$.intl,
+    activeIndexPos = _ref5$.activeIndexPos;
+  var _ref6 = _slicedToArray(_ref4, 1),
+    _ref6$ = _ref6[0],
+    lastPluginState = _ref6$.pluginState,
+    lastState = _ref6$.state,
+    lastColorScheme = _ref6$.colorScheme,
+    lastIntl = _ref6$.intl,
+    lastActiveIndexPos = _ref6$.activeIndexPos;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
-  return (_ref6 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref6 !== void 0 ? _ref6 : false;
+  return (_ref7 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref7 !== void 0 ? _ref7 : false;
 });

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

@@ -48,43 +48,45 @@ export var deletedContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
-var editingStyleQuoteNode = convertToInlineCss({
+export var deletedStyleQuoteNode = convertToInlineCss({
+  borderLeft: "2px solid ".concat("var(--ds-border-accent-gray, #7D818A)")
+});
+export var 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 ".concat("var(--ds-border-accent-gray, #7D818A)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+export var deletedBlockOutline = convertToInlineCss({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+export var deletedBlockOutlineRounded = convertToInlineCss({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
+  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+});
+export var deletedRowStyle = convertToInlineCss({
+  color: "var(--ds-text-accent-gray, #505258)",
+  textDecoration: 'line-through',
+  opacity: 0.6,
+  display: 'table-row'
+});
+export var editingStyleQuoteNode = convertToInlineCss({
   borderLeft: "2px solid ".concat("var(--ds-border-accent-purple, #AF59E1)")
 });
-var editingStyleRuleNode = convertToInlineCss({
+export var editingStyleRuleNode = convertToInlineCss({
   backgroundColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
-var editingStyleNode = convertToInlineCss({
+export var editingStyleNode = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
-var editingStyleCardBlockNode = convertToInlineCss({
+export var editingStyleCardBlockNode = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
-var standardDecorationMarkerVariableName = convertToInlineCss({
+export var standardDecorationMarkerVariable = convertToInlineCss({
   '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)"
-});
-export var getStandardNodeStyle = function 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;
-};
+});

package/dist/esm/pm-plugins/{colorSchemes → decorations/colorSchemes}/traditional.js

@@ -28,43 +28,42 @@ export var deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
-var traditionalStyleQuoteNode = convertToInlineCss({
+export var deletedTraditionalStyleQuoteNode = 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)"
+});
+export var deletedTraditionalBlockOutline = convertToInlineCss({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+export var deletedTraditionalBlockOutlineRounded = convertToInlineCss({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+});
+export var deletedTraditionalRowStyle = convertToInlineCss({
+  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
+  textDecoration: 'line-through',
+  opacity: 0.6,
+  display: 'table-row'
+});
+export var traditionalStyleQuoteNode = convertToInlineCss({
   borderLeft: "2px solid ".concat("var(--ds-border-accent-green, #22A06B)")
 });
-var traditionalStyleRuleNode = convertToInlineCss({
+export var traditionalStyleRuleNode = convertToInlineCss({
   backgroundColor: "var(--ds-border-accent-green, #22A06B)"
 });
-var traditionalStyleNode = convertToInlineCss({
+export var traditionalStyleNode = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
-var traditionalStyleCardBlockNode = convertToInlineCss({
+export var traditionalStyleCardBlockNode = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
-var traditionalDecorationMarkerVariable = convertToInlineCss({
+export var traditionalDecorationMarkerVariable = convertToInlineCss({
   '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
-});
-export var getTraditionalNodeStyle = function getTraditionalNodeStyle(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 traditionalDecorationMarkerVariable;
-  }
-  if (nodeName === 'blockquote') {
-    return traditionalStyleQuoteNode;
-  }
-  if (nodeName === 'rule') {
-    return traditionalStyleRuleNode;
-  }
-  if (nodeName === 'blockCard') {
-    return traditionalStyleCardBlockNode;
-  }
-  return traditionalStyleNode;
-};
+});

package/dist/esm/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -0,0 +1,69 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode } from './colorSchemes/standard';
+import { traditionalDecorationMarkerVariable, traditionalStyleQuoteNode, traditionalStyleRuleNode, traditionalStyleCardBlockNode, traditionalStyleNode } from './colorSchemes/traditional';
+var getNodeClass = function getNodeClass(name) {
+  switch (name) {
+    case 'extension':
+      return 'show-diff-changed-decoration-node';
+    default:
+      return undefined;
+  }
+};
+var getBlockNodeStyle = function getBlockNodeStyle(nodeName, colorScheme) {
+  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)) {
+    return isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
+  }
+  if (nodeName === 'blockquote') {
+    return isTraditional ? traditionalStyleQuoteNode : editingStyleQuoteNode;
+  }
+  if (nodeName === 'rule') {
+    return isTraditional ? traditionalStyleRuleNode : editingStyleRuleNode;
+  }
+  if (nodeName === 'blockCard') {
+    return isTraditional ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
+  }
+  return isTraditional ? traditionalStyleNode : editingStyleNode;
+};
+
+/**
+ * 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
+ */
+export var createBlockChangedDecoration = function createBlockChangedDecoration(_ref) {
+  var change = _ref.change,
+    colorScheme = _ref.colorScheme;
+  if (fg('platform_editor_show_diff_scroll_navigation')) {
+    var style = getBlockNodeStyle(change.name, colorScheme);
+    var className = getNodeClass(change.name);
+    if (style || className) {
+      return Decoration.node(change.from, change.to, {
+        style: style,
+        'data-testid': 'show-diff-changed-decoration-node',
+        class: className
+      }, {
+        key: 'diff-block'
+      });
+    }
+    return undefined;
+  } else {
+    return 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'
+    });
+  }
+};