@atlaskit/editor-plugin-show-diff 3.2.3 → 3.2.5

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

@@ -1,15 +1,15 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { createDeletedStyleWrapperWithoutOpacity, handleBlockNodeView } from './deletedBlocksHandler';
 import { handleDeletedRows } from './deletedRowsHandler';
 import { findSafeInsertPos } from './findSafeInsertPos';
 var editingStyle = convertToInlineCss({
-  background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
+  background: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
   textDecoration: 'underline',
   textDecorationStyle: 'dotted',
   textDecorationThickness: "var(--ds-space-025, 2px)",
-  textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
+  textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
 var traditionalInsertStyle = convertToInlineCss({
   background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
@@ -43,10 +43,6 @@ var getEditorStyleNode = function getEditorStyleNode(nodeName, colourScheme) {
     case 'tableHeader':
       return undefined;
     // Handle table separately to avoid border issues
-    case 'embedCard':
-      return convertToInlineCss({
-        '--diff-decoration-marker-color': colourScheme === 'traditional' ? "var(--ds-border-accent-green, #22A06B)" : "var(--ds-border-accent-purple, #8270DB)"
-      });
     case 'paragraph':
     case 'heading':
     case 'hardBreak':
@@ -58,9 +54,11 @@ var getEditorStyleNode = function getEditorStyleNode(nodeName, colourScheme) {
     case 'bulletList':
     case 'orderedList':
       return undefined;
+    case 'extension':
+    case 'embedCard':
     case 'listItem':
       return convertToInlineCss({
-        '--diff-decoration-marker-color': colourScheme === 'traditional' ? "var(--ds-border-accent-green, #22A06B)" : "var(--ds-border-accent-purple, #8270DB)"
+        '--diff-decoration-marker-color': colourScheme === 'traditional' ? "var(--ds-border-accent-green, #22A06B)" : "var(--ds-border-accent-purple, #AF59E1)"
       });
     case 'layoutSection':
       return undefined;
@@ -73,73 +71,20 @@ var getEditorStyleNode = function getEditorStyleNode(nodeName, colourScheme) {
       return colourScheme === 'traditional' ? traditionalStyleNode : editingStyleNode;
   }
 };
-var getDeletedStyleNode = function getDeletedStyleNode(nodeName) {
-  switch (nodeName) {
-    case 'blockquote':
-      return deletedStyleQuoteNode;
-    case 'expand':
-    case 'decisionList':
-      return deletedBlockOutline;
-    case 'panel':
-    case 'codeBlock':
-      return deletedBlockOutlineRounded;
-    default:
-      return undefined;
-  }
-};
-var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
-  switch (nodeName) {
-    case 'expand':
-    case 'codeBlock':
-    case 'mediaSingle':
-    case 'panel':
-    case 'decisionList':
-      return true;
-    default:
-      return false;
-  }
-};
-var shouldFitContentWidth = function shouldFitContentWidth(nodeName) {
-  switch (nodeName) {
-    case 'mediaSingle':
-    case 'embedCard':
-    case 'blockCard':
-      return true;
-    default:
-      return false;
-  }
-};
-var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeClass(nodeName) {
-  switch (nodeName) {
-    case 'mediaSingle':
-    case 'embedCard':
-      return true;
-    default:
-      return false;
-  }
-};
-
-/**
- * Checks if a node should apply deleted styles directly without wrapper
- * to preserve natural block-level margins
- */
-var shouldApplyDeletedStylesDirectly = function shouldApplyDeletedStylesDirectly(nodeName) {
-  return nodeName === 'blockquote' || nodeName === 'heading';
-};
 var editingStyleQuoteNode = convertToInlineCss({
-  borderLeft: "2px solid ".concat("var(--ds-border-accent-purple, #8270DB)")
+  borderLeft: "2px solid ".concat("var(--ds-border-accent-purple, #AF59E1)")
 });
 var traditionalStyleQuoteNode = convertToInlineCss({
   borderLeft: "2px solid ".concat("var(--ds-border-accent-green, #22A06B)")
 });
 var editingStyleRuleNode = convertToInlineCss({
-  backgroundColor: "var(--ds-border-accent-purple, #8270DB)"
+  backgroundColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
 var traditionalStyleRuleNode = convertToInlineCss({
   backgroundColor: "var(--ds-border-accent-green, #22A06B)"
 });
 var editingStyleNode = convertToInlineCss({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #8270DB)"),
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 var traditionalStyleNode = convertToInlineCss({
@@ -147,39 +92,15 @@ var traditionalStyleNode = convertToInlineCss({
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 var editingStyleCardBlockNode = convertToInlineCss({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #8270DB)"),
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
 var traditionalStyleCardBlockNode = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
-var deletedStyleQuoteNode = convertToInlineCss({
-  borderLeft: "2px solid ".concat("var(--ds-border-accent-gray, #758195)")
-});
-var deletedBlockOutline = convertToInlineCss({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #758195)"),
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-var deletedBlockOutlineRounded = convertToInlineCss({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #758195)"),
-  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
-});
-
-/**
- * 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(change, colourScheme) {
-  return Decoration.node(change.from, change.to, {
-    style: getEditorStyleNode(change.name, colourScheme),
-    'data-testid': 'show-diff-changed-decoration-node'
-  }, {});
-};
 var deletedContentStyle = convertToInlineCss({
-  color: "var(--ds-text-accent-gray, #44546F)",
+  color: "var(--ds-text-accent-gray, #505258)",
   textDecoration: 'line-through',
   position: 'relative',
   opacity: 0.6
@@ -189,7 +110,7 @@ var deletedContentStyleUnbounded = convertToInlineCss({
   top: '50%',
   width: '100%',
   display: 'inline-block',
-  borderTop: "1px solid ".concat("var(--ds-text-accent-gray, #44546F)"),
+  borderTop: "1px solid ".concat("var(--ds-text-accent-gray, #505258)"),
   pointerEvents: 'none',
   zIndex: 1
 });
@@ -208,141 +129,33 @@ var deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
-var lozengeStyle = convertToInlineCss({
-  display: 'inline-flex',
-  boxSizing: 'border-box',
-  position: 'static',
-  blockSize: 'min-content',
-  borderRadius: "var(--ds-radius-small, 4px)",
-  overflow: 'hidden',
-  paddingInlineStart: "var(--ds-space-050, 4px)",
-  paddingInlineEnd: "var(--ds-space-050, 4px)",
-  backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)",
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  color: "var(--ds-text-warning-inverse, #172B4D)"
-});
-var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colourScheme) {
+export var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colourScheme) {
   return colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
 };
-var getDeletedContentStyle = function getDeletedContentStyle(colourScheme) {
+export var getDeletedContentStyle = function getDeletedContentStyle(colourScheme) {
   return colourScheme === 'traditional' ? deletedTraditionalContentStyle : deletedContentStyle;
 };
-
-/**
- * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
- */
-var createRemovedLozenge = function createRemovedLozenge(intl, nodeName) {
-  var container = document.createElement('span');
-  var borderTopRightRadius;
-  var borderTopLeftRadius;
-  if (['expand', 'decisionList'].includes(nodeName || '')) {
-    borderTopRightRadius = "var(--ds-radius-small, 4px)";
-  } else if (['panel', 'codeBlock'].includes(nodeName || '')) {
-    borderTopRightRadius = "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)");
-  } else if (nodeName === 'mediaSingle') {
-    borderTopLeftRadius = "var(--ds-radius-small, 4px)";
-  }
-  var containerStyle = convertToInlineCss({
-    position: 'absolute',
-    top: nodeName === 'mediaSingle' ? "var(--ds-space-300, 24px)" : "var(--ds-space-0, 0px)",
-    right: nodeName === 'mediaSingle' ? undefined : "var(--ds-space-0, 0px)",
-    left: nodeName === 'mediaSingle' ? "var(--ds-space-0, 0px)" : undefined,
-    zIndex: 2,
-    pointerEvents: 'none',
-    display: 'flex',
-    overflow: 'hidden',
-    borderTopRightRadius: borderTopRightRadius,
-    borderTopLeftRadius: borderTopLeftRadius
-  });
-  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');
-  lozengeElement.setAttribute('style', lozengeStyle);
-  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(nodeName) {
-  var wrapper = document.createElement('div');
-  var fitContent = shouldFitContentWidth(nodeName);
-  var baseStyle = convertToInlineCss({
-    position: 'relative',
-    display: fitContent ? 'inline-block' : 'block',
-    width: fitContent ? 'fit-content' : undefined,
-    height: fitContent ? 'fit-content' : undefined,
-    opacity: 1
-  });
-  wrapper.setAttribute('style', baseStyle);
-  return wrapper;
-};
-
-/**
- * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
- */
-var createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colourScheme) {
-  var wrapper = document.createElement('span');
-  wrapper.setAttribute('style', getDeletedContentStyle(colourScheme));
-  return wrapper;
-};
-
-/**
- * Applies deleted styles directly to an HTML element by merging with existing styles
- */
-var applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colourScheme) {
-  var currentStyle = element.getAttribute('style') || '';
-  var deletedContentStyle = getDeletedContentStyle(colourScheme);
-  var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name) || '';
-  element.setAttribute('style', "".concat(currentStyle).concat(deletedContentStyle).concat(nodeSpecificStyle));
-};
-
-/**
- * Appends a block node with wrapper, lozenge, and appropriate styling
- */
-var appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeView, targetNode, colourScheme, intl) {
-  var blockWrapper = createBlockNodeWrapper(targetNode.type.name);
-  if (shouldShowRemovedLozenge(targetNode.type.name)) {
-    var lozenge = createRemovedLozenge(intl, targetNode.type.name);
-    blockWrapper.append(lozenge);
-  }
-
-  // Wrap the nodeView in a content wrapper that has the opacity style AND the box-shadow
-  // This keeps the lozenge at full opacity while the content AND border are faded
-  var contentWrapper = document.createElement('div');
-  var nodeStyle = getDeletedStyleNode(targetNode.type.name);
-  contentWrapper.setAttribute('style', "".concat(getDeletedContentStyle(colourScheme)).concat(nodeStyle || ''));
-  contentWrapper.append(nodeView);
-  blockWrapper.append(contentWrapper);
-  if (nodeView instanceof HTMLElement) {
-    if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-      nodeView.classList.add('show-diff-deleted-node');
-    }
+var getNodeClass = function getNodeClass(name) {
+  switch (name) {
+    case 'extension':
+      return 'show-diff-changed-decoration-node';
+    default:
+      return undefined;
   }
-  dom.append(blockWrapper);
 };
 
 /**
- * Handles all block node rendering with appropriate deleted styling.
- * For blockquote and heading nodes, applies styles directly to preserve natural margins.
- * For other block nodes, uses wrapper approach with optional lozenge.
+ * 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 handleBlockNodeView = function handleBlockNodeView(dom, nodeView, targetNode, colourScheme, intl) {
-  if (shouldApplyDeletedStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
-    // Apply deleted styles directly to preserve natural block-level margins
-    applyDeletedStylesToElement(nodeView, targetNode, colourScheme);
-    dom.append(nodeView);
-  } else {
-    // Use wrapper approach for other block nodes
-    appendBlockNodeWithWrapper(dom, nodeView, targetNode, colourScheme, intl);
-  }
+export var createBlockChangedDecoration = function createBlockChangedDecoration(change, colourScheme) {
+  return Decoration.node(change.from, change.to, {
+    style: getEditorStyleNode(change.name, colourScheme),
+    'data-testid': 'show-diff-changed-decoration-node',
+    class: getNodeClass(change.name)
+  }, {});
 };
 export var createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
   var change = _ref.change,

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

@@ -0,0 +1,214 @@
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { trackChangesMessages } from '@atlaskit/editor-common/messages';
+import { getDeletedContentStyle } from './decorations';
+export var deletedStyleQuoteNode = convertToInlineCss({
+  borderLeft: "2px solid ".concat("var(--ds-border-accent-gray, #7D818A)")
+});
+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)")
+});
+var lozengeStyle = convertToInlineCss({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  position: 'static',
+  blockSize: 'min-content',
+  borderRadius: "var(--ds-radius-small, 4px)",
+  overflow: 'hidden',
+  paddingInlineStart: "var(--ds-space-050, 4px)",
+  paddingInlineEnd: "var(--ds-space-050, 4px)",
+  backgroundColor: "var(--ds-background-accent-gray-subtler, #DDDEE1)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-bold, 700)",
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  color: "var(--ds-text-warning-inverse, #292A2E)"
+});
+export var getDeletedStyleNode = function getDeletedStyleNode(nodeName) {
+  switch (nodeName) {
+    case 'blockquote':
+      return deletedStyleQuoteNode;
+    case 'expand':
+    case 'decisionList':
+      return deletedBlockOutline;
+    case 'panel':
+    case 'codeBlock':
+      return deletedBlockOutlineRounded;
+    default:
+      return undefined;
+  }
+};
+export var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
+  switch (nodeName) {
+    case 'expand':
+    case 'codeBlock':
+    case 'mediaSingle':
+    case 'panel':
+    case 'decisionList':
+      return true;
+    default:
+      return false;
+  }
+};
+export var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeClass(nodeName) {
+  switch (nodeName) {
+    case 'mediaSingle':
+    case 'embedCard':
+      return true;
+    default:
+      return false;
+  }
+};
+
+/**
+ * Checks if a node should apply deleted styles directly without wrapper
+ * to preserve natural block-level margins
+ */
+export var shouldApplyDeletedStylesDirectly = function shouldApplyDeletedStylesDirectly(nodeName) {
+  return nodeName === 'blockquote' || nodeName === 'heading';
+};
+
+/**
+ * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
+ */
+export var createRemovedLozenge = function createRemovedLozenge(intl, nodeName) {
+  var container = document.createElement('span');
+  var borderTopRightRadius;
+  if (['expand', 'decisionList'].includes(nodeName || '')) {
+    borderTopRightRadius = "var(--ds-radius-small, 4px)";
+  } else if (['panel', 'codeBlock', 'mediaSingle'].includes(nodeName || '')) {
+    borderTopRightRadius = "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)");
+  }
+  var containerStyle = convertToInlineCss({
+    position: 'absolute',
+    top: "var(--ds-space-0, 0px)",
+    right: "var(--ds-space-0, 0px)",
+    zIndex: 2,
+    pointerEvents: 'none',
+    display: 'flex',
+    overflow: 'hidden',
+    borderTopRightRadius: borderTopRightRadius
+  });
+  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');
+  lozengeElement.setAttribute('style', lozengeStyle);
+  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
+ */
+export var createBlockNodeWrapper = function createBlockNodeWrapper(nodeName) {
+  var wrapper = document.createElement('div');
+  var baseStyle = convertToInlineCss({
+    position: 'relative',
+    display: 'block',
+    opacity: 1
+  });
+  wrapper.setAttribute('style', baseStyle);
+  return wrapper;
+};
+
+/**
+ * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
+ */
+export var createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colourScheme) {
+  var wrapper = document.createElement('span');
+  wrapper.setAttribute('style', getDeletedContentStyle(colourScheme));
+  return wrapper;
+};
+
+/**
+ * Applies deleted styles directly to an HTML element by merging with existing styles
+ */
+export var applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colourScheme) {
+  var currentStyle = element.getAttribute('style') || '';
+  var deletedContentStyle = getDeletedContentStyle(colourScheme);
+  var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name) || '';
+  element.setAttribute('style', "".concat(currentStyle).concat(deletedContentStyle).concat(nodeSpecificStyle));
+};
+
+/**
+ * Creates a content wrapper with deleted styles for a block node
+ */
+export var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(nodeView, targetNode, colourScheme) {
+  var contentWrapper = document.createElement('div');
+  var nodeStyle = getDeletedStyleNode(targetNode.type.name);
+  contentWrapper.setAttribute('style', "".concat(getDeletedContentStyle(colourScheme)).concat(nodeStyle || ''));
+  contentWrapper.append(nodeView);
+  return contentWrapper;
+};
+
+/**
+ * Handles special mediaSingle node rendering with lozenge on child media element
+ * @returns true if mediaSingle was handled, false otherwise
+ */
+export var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge) {
+  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)) {
+    nodeView.classList.add('show-diff-deleted-node');
+  }
+  dom.append(nodeView);
+  return true;
+};
+
+/**
+ * Appends a block node with wrapper, lozenge, and appropriate styling
+ */
+export var appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeView, targetNode, colourScheme, intl) {
+  var blockWrapper = createBlockNodeWrapper(targetNode.type.name);
+  if (shouldShowRemovedLozenge(targetNode.type.name)) {
+    var lozenge = createRemovedLozenge(intl, targetNode.type.name);
+    if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge)) {
+      return;
+    }
+    blockWrapper.append(lozenge);
+  }
+  var contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colourScheme);
+  blockWrapper.append(contentWrapper);
+  if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
+    nodeView.classList.add('show-diff-deleted-node');
+  }
+  dom.append(blockWrapper);
+};
+
+/**
+ * Handles all block node rendering with appropriate deleted styling.
+ * For blockquote and heading nodes, applies styles directly to preserve natural margins.
+ * For other block nodes, uses wrapper approach with optional lozenge.
+ */
+export var handleBlockNodeView = function handleBlockNodeView(dom, nodeView, targetNode, colourScheme, intl) {
+  if (shouldApplyDeletedStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
+    // Apply deleted styles directly to preserve natural block-level margins
+    applyDeletedStylesToElement(nodeView, targetNode, colourScheme);
+    dom.append(nodeView);
+  } else {
+    // Use wrapper approach for other block nodes
+    appendBlockNodeWithWrapper(dom, nodeView, targetNode, colourScheme, intl);
+  }
+};

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

@@ -9,7 +9,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findSafeInsertPos } from './findSafeInsertPos';
 var deletedRowStyle = convertToInlineCss({
-  color: "var(--ds-text-accent-gray, #44546F)",
+  color: "var(--ds-text-accent-gray, #505258)",
   textDecoration: 'line-through',
   opacity: 0.6,
   display: 'table-row'

package/dist/types/pm-plugins/NodeViewSerializer.d.ts

@@ -67,7 +67,7 @@ export declare class NodeViewSerializer {
     /**
      * Serializes a fragment to a `DocumentFragment` using the schema's `DOMSerializer`.
      */
-    serializeFragment(fragment: Fragment): DocumentFragment | HTMLElement | null;
+    serializeFragment(fragment: Fragment): HTMLElement | DocumentFragment | null;
     /**
      * Returns a copy of the current node view blocklist.
      */

package/dist/types/pm-plugins/decorations.d.ts

@@ -13,6 +13,8 @@ export declare const createInlineChangedDecoration: (change: {
     fromB: number;
     toB: number;
 }, colourScheme?: "standard" | "traditional") => Decoration;
+export declare const getDeletedContentStyleUnbounded: (colourScheme?: "standard" | "traditional") => string;
+export declare const getDeletedContentStyle: (colourScheme?: "standard" | "traditional") => string;
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *

package/dist/types/pm-plugins/deletedBlocksHandler.d.ts

@@ -0,0 +1,48 @@
+import type { IntlShape } from 'react-intl-next';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const deletedStyleQuoteNode: string;
+export declare const deletedBlockOutline: string;
+export declare const deletedBlockOutlineRounded: string;
+export declare const getDeletedStyleNode: (nodeName: string) => string | undefined;
+export declare const shouldShowRemovedLozenge: (nodeName: string) => boolean;
+export declare const shouldAddShowDiffDeletedNodeClass: (nodeName: string) => boolean;
+/**
+ * Checks if a node should apply deleted styles directly without wrapper
+ * to preserve natural block-level margins
+ */
+export declare const shouldApplyDeletedStylesDirectly: (nodeName: string) => boolean;
+/**
+ * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
+ */
+export declare const createRemovedLozenge: (intl: IntlShape, nodeName?: string) => HTMLElement;
+/**
+ * Wraps a block node in a container with relative positioning to support absolute positioned lozenge
+ */
+export declare const createBlockNodeWrapper: (nodeName: string) => HTMLDivElement;
+/**
+ * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
+ */
+export declare const createDeletedStyleWrapperWithoutOpacity: (colourScheme?: "standard" | "traditional") => HTMLSpanElement;
+/**
+ * Applies deleted styles directly to an HTML element by merging with existing styles
+ */
+export declare const applyDeletedStylesToElement: (element: HTMLElement, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined) => void;
+/**
+ * Creates a content wrapper with deleted styles for a block node
+ */
+export declare const createBlockNodeContentWrapper: (nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined) => HTMLElement;
+/**
+ * Handles special mediaSingle node rendering with lozenge on child media element
+ * @returns true if mediaSingle was handled, false otherwise
+ */
+export declare const handleMediaSingleWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement) => boolean;
+/**
+ * Appends a block node with wrapper, lozenge, and appropriate styling
+ */
+export declare const appendBlockNodeWithWrapper: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;
+/**
+ * Handles all block node rendering with appropriate deleted styling.
+ * For blockquote and heading nodes, applies styles directly to preserve natural margins.
+ * For other block nodes, uses wrapper approach with optional lozenge.
+ */
+export declare const handleBlockNodeView: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;

package/dist/types-ts4.5/pm-plugins/NodeViewSerializer.d.ts

@@ -67,7 +67,7 @@ export declare class NodeViewSerializer {
     /**
      * Serializes a fragment to a `DocumentFragment` using the schema's `DOMSerializer`.
      */
-    serializeFragment(fragment: Fragment): DocumentFragment | HTMLElement | null;
+    serializeFragment(fragment: Fragment): HTMLElement | DocumentFragment | null;
     /**
      * Returns a copy of the current node view blocklist.
      */

package/dist/types-ts4.5/pm-plugins/decorations.d.ts

@@ -13,6 +13,8 @@ export declare const createInlineChangedDecoration: (change: {
     fromB: number;
     toB: number;
 }, colourScheme?: "standard" | "traditional") => Decoration;
+export declare const getDeletedContentStyleUnbounded: (colourScheme?: "standard" | "traditional") => string;
+export declare const getDeletedContentStyle: (colourScheme?: "standard" | "traditional") => string;
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *