@atlaskit/editor-plugin-show-diff 3.2.8 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 3.3.1
+
+### Patch Changes
+
+- [`be40850b186a8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be40850b186a8) -
+  Rolled up editor AIFC beta gates into the parent streaming gate. Also decoupled the placholder
+  from the main AIFC FG by utilising the withEmptyParagraph plugin option, since this prop is only
+  set when AIFC is enabled. This means we don't need refs to this gate in the plugin because it's
+  already controlled by a prop.
+- Updated dependencies
+
+## 3.3.0
+
+### Minor Changes
+
+- [`a36ac8c9961b1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a36ac8c9961b1) -
+  [ux] [EDITOR-2608] updated show diff deleted block nodes design
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.2.8
 
 ### Patch Changes

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

@@ -199,9 +199,6 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
 
   // For non-table content, use the existing span wrapper approach
   var dom = document.createElement('span');
-  if (!(0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2')) {
-    dom.setAttribute('style', getDeletedContentStyle(colourScheme));
-  }
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
@@ -240,13 +237,9 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
             // Fallback to serializing the individual child node
             var serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              if ((0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2')) {
-                var _wrapper = createWrapperWithStrikethrough();
-                _wrapper.append(serializedChild);
-                dom.append(_wrapper);
-              } else {
-                dom.append(serializedChild);
-              }
+              var _wrapper = createWrapperWithStrikethrough();
+              _wrapper.append(serializedChild);
+              dom.append(_wrapper);
             }
           }
         });
@@ -302,11 +295,9 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
         var wrapper = createWrapperWithStrikethrough();
         wrapper.append(nodeView);
         dom.append(wrapper);
-      } else if ((0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2')) {
+      } else {
         // Handle all block nodes with unified function
         (0, _deletedBlocksHandler.handleBlockNodeView)(dom, nodeView, targetNode, colourScheme, intl);
-      } else {
-        dom.append(nodeView);
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(targetNode.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
@@ -314,13 +305,9 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     } else {
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        if ((0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2')) {
-          var _wrapper2 = (0, _deletedBlocksHandler.createDeletedStyleWrapperWithoutOpacity)(colourScheme);
-          _wrapper2.append(fallbackNode);
-          dom.append(_wrapper2);
-        } else {
-          dom.append(fallbackNode);
-        }
+        var _wrapper2 = (0, _deletedBlocksHandler.createDeletedStyleWrapperWithoutOpacity)(colourScheme);
+        _wrapper2.append(fallbackNode);
+        dom.append(_wrapper2);
       }
     }
   });

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

@@ -1,23 +1,52 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldShowRemovedLozenge = exports.shouldApplyDeletedStylesDirectly = exports.shouldAddShowDiffDeletedNodeClass = exports.handleMediaSingleWithLozenge = exports.handleBlockNodeView = exports.getDeletedStyleNode = exports.deletedStyleQuoteNode = exports.deletedBlockOutlineRounded = exports.deletedBlockOutline = exports.createRemovedLozenge = exports.createDeletedStyleWrapperWithoutOpacity = exports.createBlockNodeWrapper = exports.createBlockNodeContentWrapper = exports.applyDeletedStylesToElement = exports.appendBlockNodeWithWrapper = void 0;
+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;
+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");
+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',
@@ -34,16 +63,17 @@ var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
-var getDeletedStyleNode = exports.getDeletedStyleNode = function getDeletedStyleNode(nodeName) {
+var getDeletedStyleNode = exports.getDeletedStyleNode = function getDeletedStyleNode(nodeName, colourScheme) {
+  var isTraditional = colourScheme === 'traditional';
   switch (nodeName) {
     case 'blockquote':
-      return deletedStyleQuoteNode;
+      return (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge : deletedStyleQuoteNode;
     case 'expand':
     case 'decisionList':
-      return deletedBlockOutline;
+      return isTraditional && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutline : deletedBlockOutline;
     case 'panel':
     case 'codeBlock':
-      return deletedBlockOutlineRounded;
+      return isTraditional && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutlineRounded : deletedBlockOutlineRounded;
     default:
       return undefined;
   }
@@ -56,6 +86,9 @@ var shouldShowRemovedLozenge = exports.shouldShowRemovedLozenge = function shoul
     case 'panel':
     case 'decisionList':
       return true;
+    case 'embedCard':
+    case 'blockquote':
+      return (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers');
     default:
       return false;
   }
@@ -65,6 +98,8 @@ var shouldAddShowDiffDeletedNodeClass = exports.shouldAddShowDiffDeletedNodeClas
     case 'mediaSingle':
     case 'embedCard':
       return true;
+    case 'blockquote':
+      return (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers');
     default:
       return false;
   }
@@ -75,7 +110,7 @@ var shouldAddShowDiffDeletedNodeClass = exports.shouldAddShowDiffDeletedNodeClas
  * to preserve natural block-level margins
  */
 var shouldApplyDeletedStylesDirectly = exports.shouldApplyDeletedStylesDirectly = function shouldApplyDeletedStylesDirectly(nodeName) {
-  return nodeName === 'blockquote' || nodeName === 'heading';
+  return nodeName === 'heading' || nodeName === 'blockquote' && !(0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers');
 };
 
 /**
@@ -89,16 +124,17 @@ var createRemovedLozenge = exports.createRemovedLozenge = function createRemoved
   } else if (['panel', 'codeBlock', 'mediaSingle'].includes(nodeName || '')) {
     borderTopRightRadius = "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)");
   }
-  var containerStyle = (0, _lazyNodeView.convertToInlineCss)({
+  var containerStyle = (0, _lazyNodeView.convertToInlineCss)(_objectSpread({
     position: 'absolute',
-    top: "var(--ds-space-0, 0px)",
-    right: "var(--ds-space-0, 0px)",
+    top: (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? "var(--ds-space-075, 6px)" : "var(--ds-space-0, 0px)",
+    right: (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? "var(--ds-space-075, 6px)" : "var(--ds-space-0, 0px)",
     zIndex: 2,
     pointerEvents: 'none',
-    display: 'flex',
+    display: 'flex'
+  }, !(0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? {
     overflow: 'hidden',
     borderTopRightRadius: borderTopRightRadius
-  });
+  } : {}));
   container.setAttribute('style', containerStyle);
   container.setAttribute('data-testid', 'show-diff-removed-lozenge');
 
@@ -113,7 +149,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(nodeName) {
+var createBlockNodeWrapper = exports.createBlockNodeWrapper = function createBlockNodeWrapper() {
   var wrapper = document.createElement('div');
   var baseStyle = (0, _lazyNodeView.convertToInlineCss)({
     position: 'relative',
@@ -139,7 +175,7 @@ var createDeletedStyleWrapperWithoutOpacity = exports.createDeletedStyleWrapperW
 var applyDeletedStylesToElement = exports.applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colourScheme) {
   var currentStyle = element.getAttribute('style') || '';
   var deletedContentStyle = (0, _decorations.getDeletedContentStyle)(colourScheme);
-  var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name) || '';
+  var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colourScheme) || '';
   element.setAttribute('style', "".concat(currentStyle).concat(deletedContentStyle).concat(nodeSpecificStyle));
 };
 
@@ -148,17 +184,51 @@ var applyDeletedStylesToElement = exports.applyDeletedStylesToElement = function
  */
 var createBlockNodeContentWrapper = exports.createBlockNodeContentWrapper = function createBlockNodeContentWrapper(nodeView, targetNode, colourScheme) {
   var contentWrapper = document.createElement('div');
-  var nodeStyle = getDeletedStyleNode(targetNode.type.name);
+  var nodeStyle = getDeletedStyleNode(targetNode.type.name, colourScheme);
   contentWrapper.setAttribute('style', "".concat((0, _decorations.getDeletedContentStyle)(colourScheme)).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 = exports.handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) {
+  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 = colourScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    nodeView.classList.add(showDiffDeletedNodeClass);
+  }
+  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 = exports.handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge) {
+var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) {
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -177,7 +247,8 @@ var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = functi
 
   // Add deleted node class if needed
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    nodeView.classList.add('show-diff-deleted-node');
+    var showDiffDeletedNodeClass = colourScheme === 'traditional' && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    nodeView.classList.add(showDiffDeletedNodeClass);
   }
   dom.append(nodeView);
   return true;
@@ -187,10 +258,13 @@ var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = functi
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
 var appendBlockNodeWithWrapper = exports.appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeView, targetNode, colourScheme, intl) {
-  var blockWrapper = createBlockNodeWrapper(targetNode.type.name);
+  var blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name)) {
-    var lozenge = createRemovedLozenge(intl, targetNode.type.name);
-    if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge)) {
+    var lozenge = createRemovedLozenge(intl);
+    if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers')) {
+      return;
+    }
+    if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme)) {
       return;
     }
     blockWrapper.append(lozenge);
@@ -198,14 +272,15 @@ var appendBlockNodeWithWrapper = exports.appendBlockNodeWithWrapper = function a
   var contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colourScheme);
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    nodeView.classList.add('show-diff-deleted-node');
+    var showDiffDeletedNodeClass = colourScheme === 'traditional' && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    nodeView.classList.add(showDiffDeletedNodeClass);
   }
   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 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, colourScheme, intl) {

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

@@ -179,9 +179,6 @@ export const createDeletedContentDecoration = ({
 
   // For non-table content, use the existing span wrapper approach
   const dom = document.createElement('span');
-  if (!fg('platform_editor_ai_aifc_patch_beta_2')) {
-    dom.setAttribute('style', getDeletedContentStyle(colourScheme));
-  }
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
@@ -220,13 +217,9 @@ export const createDeletedContentDecoration = ({
             // Fallback to serializing the individual child node
             const serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              if (fg('platform_editor_ai_aifc_patch_beta_2')) {
-                const wrapper = createWrapperWithStrikethrough();
-                wrapper.append(serializedChild);
-                dom.append(wrapper);
-              } else {
-                dom.append(serializedChild);
-              }
+              const wrapper = createWrapperWithStrikethrough();
+              wrapper.append(serializedChild);
+              dom.append(wrapper);
             }
           }
         });
@@ -278,11 +271,9 @@ export const createDeletedContentDecoration = ({
         const wrapper = createWrapperWithStrikethrough();
         wrapper.append(nodeView);
         dom.append(wrapper);
-      } else if (fg('platform_editor_ai_aifc_patch_beta_2')) {
+      } else {
         // Handle all block nodes with unified function
         handleBlockNodeView(dom, nodeView, targetNode, colourScheme, intl);
-      } else {
-        dom.append(nodeView);
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(targetNode.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
@@ -290,13 +281,9 @@ export const createDeletedContentDecoration = ({
     } else {
       const fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        if (fg('platform_editor_ai_aifc_patch_beta_2')) {
-          const wrapper = createDeletedStyleWrapperWithoutOpacity(colourScheme);
-          wrapper.append(fallbackNode);
-          dom.append(wrapper);
-        } else {
-          dom.append(fallbackNode);
-        }
+        const wrapper = createDeletedStyleWrapperWithoutOpacity(colourScheme);
+        wrapper.append(fallbackNode);
+        dom.append(wrapper);
       }
     }
   });

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

@@ -1,17 +1,42 @@
 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)`
+});
 const lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -28,16 +53,17 @@ const lozengeStyle = convertToInlineCss({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
-export const getDeletedStyleNode = nodeName => {
+export const getDeletedStyleNode = (nodeName, colourScheme) => {
+  const isTraditional = colourScheme === 'traditional';
   switch (nodeName) {
     case 'blockquote':
-      return deletedStyleQuoteNode;
+      return fg('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge : deletedStyleQuoteNode;
     case 'expand':
     case 'decisionList':
-      return deletedBlockOutline;
+      return isTraditional && fg('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutline : deletedBlockOutline;
     case 'panel':
     case 'codeBlock':
-      return deletedBlockOutlineRounded;
+      return isTraditional && fg('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutlineRounded : deletedBlockOutlineRounded;
     default:
       return undefined;
   }
@@ -50,6 +76,9 @@ export const shouldShowRemovedLozenge = nodeName => {
     case 'panel':
     case 'decisionList':
       return true;
+    case 'embedCard':
+    case 'blockquote':
+      return fg('platform_editor_ai_aifc_patch_ga_blockers');
     default:
       return false;
   }
@@ -59,6 +88,8 @@ export const shouldAddShowDiffDeletedNodeClass = nodeName => {
     case 'mediaSingle':
     case 'embedCard':
       return true;
+    case 'blockquote':
+      return fg('platform_editor_ai_aifc_patch_ga_blockers');
     default:
       return false;
   }
@@ -69,7 +100,7 @@ export const shouldAddShowDiffDeletedNodeClass = nodeName => {
  * to preserve natural block-level margins
  */
 export const shouldApplyDeletedStylesDirectly = nodeName => {
-  return nodeName === 'blockquote' || nodeName === 'heading';
+  return nodeName === 'heading' || nodeName === 'blockquote' && !fg('platform_editor_ai_aifc_patch_ga_blockers');
 };
 
 /**
@@ -85,13 +116,15 @@ export const createRemovedLozenge = (intl, nodeName) => {
   }
   const containerStyle = convertToInlineCss({
     position: 'absolute',
-    top: "var(--ds-space-0, 0px)",
-    right: "var(--ds-space-0, 0px)",
+    top: fg('platform_editor_ai_aifc_patch_ga_blockers') ? "var(--ds-space-075, 6px)" : "var(--ds-space-0, 0px)",
+    right: fg('platform_editor_ai_aifc_patch_ga_blockers') ? "var(--ds-space-075, 6px)" : "var(--ds-space-0, 0px)",
     zIndex: 2,
     pointerEvents: 'none',
     display: 'flex',
-    overflow: 'hidden',
-    borderTopRightRadius
+    ...(!fg('platform_editor_ai_aifc_patch_ga_blockers') ? {
+      overflow: 'hidden',
+      borderTopRightRadius
+    } : {})
   });
   container.setAttribute('style', containerStyle);
   container.setAttribute('data-testid', 'show-diff-removed-lozenge');
@@ -107,7 +140,7 @@ export const createRemovedLozenge = (intl, nodeName) => {
 /**
  * Wraps a block node in a container with relative positioning to support absolute positioned lozenge
  */
-export const createBlockNodeWrapper = nodeName => {
+export const createBlockNodeWrapper = () => {
   const wrapper = document.createElement('div');
   const baseStyle = convertToInlineCss({
     position: 'relative',
@@ -133,7 +166,7 @@ export const createDeletedStyleWrapperWithoutOpacity = colourScheme => {
 export const applyDeletedStylesToElement = (element, targetNode, colourScheme) => {
   const currentStyle = element.getAttribute('style') || '';
   const deletedContentStyle = getDeletedContentStyle(colourScheme);
-  const nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name) || '';
+  const nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colourScheme) || '';
   element.setAttribute('style', `${currentStyle}${deletedContentStyle}${nodeSpecificStyle}`);
 };
 
@@ -142,17 +175,51 @@ export const applyDeletedStylesToElement = (element, targetNode, colourScheme) =
  */
 export const createBlockNodeContentWrapper = (nodeView, targetNode, colourScheme) => {
   const contentWrapper = document.createElement('div');
-  const nodeStyle = getDeletedStyleNode(targetNode.type.name);
+  const nodeStyle = getDeletedStyleNode(targetNode.type.name, colourScheme);
   contentWrapper.setAttribute('style', `${getDeletedContentStyle(colourScheme)}${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
+ */
+export const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge, colourScheme) => {
+  if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
+    return false;
+  }
+  const richMediaItem = nodeView.querySelector('.rich-media-item');
+  if (richMediaItem instanceof HTMLElement) {
+    richMediaItem.appendChild(lozenge);
+  } else {
+    const observer = new MutationObserver((_, obs) => {
+      const 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)) {
+    const showDiffDeletedNodeClass = colourScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    nodeView.classList.add(showDiffDeletedNodeClass);
+  }
+  dom.append(nodeView);
+  return true;
+};
+
 /**
  * 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) => {
+export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge, colourScheme) => {
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -171,7 +238,8 @@ export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge)
 
   // Add deleted node class if needed
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    nodeView.classList.add('show-diff-deleted-node');
+    const showDiffDeletedNodeClass = colourScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    nodeView.classList.add(showDiffDeletedNodeClass);
   }
   dom.append(nodeView);
   return true;
@@ -181,10 +249,13 @@ export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge)
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
 export const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colourScheme, intl) => {
-  const blockWrapper = createBlockNodeWrapper(targetNode.type.name);
+  const blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name)) {
-    const lozenge = createRemovedLozenge(intl, targetNode.type.name);
-    if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge)) {
+    const lozenge = createRemovedLozenge(intl);
+    if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) && fg('platform_editor_ai_aifc_patch_ga_blockers')) {
+      return;
+    }
+    if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme)) {
       return;
     }
     blockWrapper.append(lozenge);
@@ -192,14 +263,15 @@ export const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colourSche
   const contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colourScheme);
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    nodeView.classList.add('show-diff-deleted-node');
+    const showDiffDeletedNodeClass = colourScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    nodeView.classList.add(showDiffDeletedNodeClass);
   }
   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 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, colourScheme, intl) => {

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

@@ -193,9 +193,6 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
 
   // For non-table content, use the existing span wrapper approach
   var dom = document.createElement('span');
-  if (!fg('platform_editor_ai_aifc_patch_beta_2')) {
-    dom.setAttribute('style', getDeletedContentStyle(colourScheme));
-  }
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
@@ -234,13 +231,9 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
             // Fallback to serializing the individual child node
             var serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              if (fg('platform_editor_ai_aifc_patch_beta_2')) {
-                var _wrapper = createWrapperWithStrikethrough();
-                _wrapper.append(serializedChild);
-                dom.append(_wrapper);
-              } else {
-                dom.append(serializedChild);
-              }
+              var _wrapper = createWrapperWithStrikethrough();
+              _wrapper.append(serializedChild);
+              dom.append(_wrapper);
             }
           }
         });
@@ -296,11 +289,9 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
         var wrapper = createWrapperWithStrikethrough();
         wrapper.append(nodeView);
         dom.append(wrapper);
-      } else if (fg('platform_editor_ai_aifc_patch_beta_2')) {
+      } else {
         // Handle all block nodes with unified function
         handleBlockNodeView(dom, nodeView, targetNode, colourScheme, intl);
-      } else {
-        dom.append(nodeView);
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(targetNode.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
@@ -308,13 +299,9 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
     } else {
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        if (fg('platform_editor_ai_aifc_patch_beta_2')) {
-          var _wrapper2 = createDeletedStyleWrapperWithoutOpacity(colourScheme);
-          _wrapper2.append(fallbackNode);
-          dom.append(_wrapper2);
-        } else {
-          dom.append(fallbackNode);
-        }
+        var _wrapper2 = createDeletedStyleWrapperWithoutOpacity(colourScheme);
+        _wrapper2.append(fallbackNode);
+        dom.append(_wrapper2);
       }
     }
   });

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

@@ -1,17 +1,45 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 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 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 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 deletedBlockOutline = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
   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 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 deletedTraditionalBlockOutlineRounded = convertToInlineCss({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+});
 var lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -28,16 +56,17 @@ var lozengeStyle = convertToInlineCss({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
-export var getDeletedStyleNode = function getDeletedStyleNode(nodeName) {
+export var getDeletedStyleNode = function getDeletedStyleNode(nodeName, colourScheme) {
+  var isTraditional = colourScheme === 'traditional';
   switch (nodeName) {
     case 'blockquote':
-      return deletedStyleQuoteNode;
+      return fg('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge : deletedStyleQuoteNode;
     case 'expand':
     case 'decisionList':
-      return deletedBlockOutline;
+      return isTraditional && fg('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutline : deletedBlockOutline;
     case 'panel':
     case 'codeBlock':
-      return deletedBlockOutlineRounded;
+      return isTraditional && fg('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutlineRounded : deletedBlockOutlineRounded;
     default:
       return undefined;
   }
@@ -50,6 +79,9 @@ export var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName
     case 'panel':
     case 'decisionList':
       return true;
+    case 'embedCard':
+    case 'blockquote':
+      return fg('platform_editor_ai_aifc_patch_ga_blockers');
     default:
       return false;
   }
@@ -59,6 +91,8 @@ export var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeleted
     case 'mediaSingle':
     case 'embedCard':
       return true;
+    case 'blockquote':
+      return fg('platform_editor_ai_aifc_patch_ga_blockers');
     default:
       return false;
   }
@@ -69,7 +103,7 @@ export var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeleted
  * to preserve natural block-level margins
  */
 export var shouldApplyDeletedStylesDirectly = function shouldApplyDeletedStylesDirectly(nodeName) {
-  return nodeName === 'blockquote' || nodeName === 'heading';
+  return nodeName === 'heading' || nodeName === 'blockquote' && !fg('platform_editor_ai_aifc_patch_ga_blockers');
 };
 
 /**
@@ -83,16 +117,17 @@ export var createRemovedLozenge = function createRemovedLozenge(intl, nodeName)
   } else if (['panel', 'codeBlock', 'mediaSingle'].includes(nodeName || '')) {
     borderTopRightRadius = "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)");
   }
-  var containerStyle = convertToInlineCss({
+  var containerStyle = convertToInlineCss(_objectSpread({
     position: 'absolute',
-    top: "var(--ds-space-0, 0px)",
-    right: "var(--ds-space-0, 0px)",
+    top: fg('platform_editor_ai_aifc_patch_ga_blockers') ? "var(--ds-space-075, 6px)" : "var(--ds-space-0, 0px)",
+    right: fg('platform_editor_ai_aifc_patch_ga_blockers') ? "var(--ds-space-075, 6px)" : "var(--ds-space-0, 0px)",
     zIndex: 2,
     pointerEvents: 'none',
-    display: 'flex',
+    display: 'flex'
+  }, !fg('platform_editor_ai_aifc_patch_ga_blockers') ? {
     overflow: 'hidden',
     borderTopRightRadius: borderTopRightRadius
-  });
+  } : {}));
   container.setAttribute('style', containerStyle);
   container.setAttribute('data-testid', 'show-diff-removed-lozenge');
 
@@ -107,7 +142,7 @@ export var createRemovedLozenge = function createRemovedLozenge(intl, nodeName)
 /**
  * Wraps a block node in a container with relative positioning to support absolute positioned lozenge
  */
-export var createBlockNodeWrapper = function createBlockNodeWrapper(nodeName) {
+export var createBlockNodeWrapper = function createBlockNodeWrapper() {
   var wrapper = document.createElement('div');
   var baseStyle = convertToInlineCss({
     position: 'relative',
@@ -133,7 +168,7 @@ export var createDeletedStyleWrapperWithoutOpacity = function createDeletedStyle
 export var applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colourScheme) {
   var currentStyle = element.getAttribute('style') || '';
   var deletedContentStyle = getDeletedContentStyle(colourScheme);
-  var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name) || '';
+  var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colourScheme) || '';
   element.setAttribute('style', "".concat(currentStyle).concat(deletedContentStyle).concat(nodeSpecificStyle));
 };
 
@@ -142,17 +177,51 @@ export var applyDeletedStylesToElement = function applyDeletedStylesToElement(el
  */
 export var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(nodeView, targetNode, colourScheme) {
   var contentWrapper = document.createElement('div');
-  var nodeStyle = getDeletedStyleNode(targetNode.type.name);
+  var nodeStyle = getDeletedStyleNode(targetNode.type.name, colourScheme);
   contentWrapper.setAttribute('style', "".concat(getDeletedContentStyle(colourScheme)).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
+ */
+export var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) {
+  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 = colourScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    nodeView.classList.add(showDiffDeletedNodeClass);
+  }
+  dom.append(nodeView);
+  return true;
+};
+
 /**
  * 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) {
+export var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) {
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -171,7 +240,8 @@ export var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(
 
   // Add deleted node class if needed
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    nodeView.classList.add('show-diff-deleted-node');
+    var showDiffDeletedNodeClass = colourScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    nodeView.classList.add(showDiffDeletedNodeClass);
   }
   dom.append(nodeView);
   return true;
@@ -181,10 +251,13 @@ export var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(
  * 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);
+  var blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name)) {
-    var lozenge = createRemovedLozenge(intl, targetNode.type.name);
-    if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge)) {
+    var lozenge = createRemovedLozenge(intl);
+    if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) && fg('platform_editor_ai_aifc_patch_ga_blockers')) {
+      return;
+    }
+    if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme)) {
       return;
     }
     blockWrapper.append(lozenge);
@@ -192,14 +265,15 @@ export var appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom,
   var contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colourScheme);
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    nodeView.classList.add('show-diff-deleted-node');
+    var showDiffDeletedNodeClass = colourScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    nodeView.classList.add(showDiffDeletedNodeClass);
   }
   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 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) {

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

@@ -1,9 +1,13 @@
 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 deletedStyleQuoteNodeWithLozenge: string;
+export declare const deletedTraditionalStyleQuoteNode: string;
 export declare const deletedBlockOutline: string;
+export declare const deletedTraditionalBlockOutline: string;
 export declare const deletedBlockOutlineRounded: string;
-export declare const getDeletedStyleNode: (nodeName: string) => string | undefined;
+export declare const deletedTraditionalBlockOutlineRounded: string;
+export declare const getDeletedStyleNode: (nodeName: string, colourScheme?: "standard" | "traditional") => string | undefined;
 export declare const shouldShowRemovedLozenge: (nodeName: string) => boolean;
 export declare const shouldAddShowDiffDeletedNodeClass: (nodeName: string) => boolean;
 /**
@@ -18,7 +22,7 @@ export declare const createRemovedLozenge: (intl: IntlShape, nodeName?: string)
 /**
  * Wraps a block node in a container with relative positioning to support absolute positioned lozenge
  */
-export declare const createBlockNodeWrapper: (nodeName: string) => HTMLDivElement;
+export declare const createBlockNodeWrapper: () => HTMLDivElement;
 /**
  * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
  */
@@ -31,18 +35,25 @@ export declare const applyDeletedStylesToElement: (element: HTMLElement, targetN
  * 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 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
+ */
+export declare const handleEmbedCardWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colourScheme: "standard" | "traditional" | undefined) => boolean;
 /**
  * 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;
+export declare const handleMediaSingleWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colourScheme: "standard" | "traditional" | undefined) => 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 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/deletedBlocksHandler.d.ts

@@ -1,9 +1,13 @@
 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 deletedStyleQuoteNodeWithLozenge: string;
+export declare const deletedTraditionalStyleQuoteNode: string;
 export declare const deletedBlockOutline: string;
+export declare const deletedTraditionalBlockOutline: string;
 export declare const deletedBlockOutlineRounded: string;
-export declare const getDeletedStyleNode: (nodeName: string) => string | undefined;
+export declare const deletedTraditionalBlockOutlineRounded: string;
+export declare const getDeletedStyleNode: (nodeName: string, colourScheme?: "standard" | "traditional") => string | undefined;
 export declare const shouldShowRemovedLozenge: (nodeName: string) => boolean;
 export declare const shouldAddShowDiffDeletedNodeClass: (nodeName: string) => boolean;
 /**
@@ -18,7 +22,7 @@ export declare const createRemovedLozenge: (intl: IntlShape, nodeName?: string)
 /**
  * Wraps a block node in a container with relative positioning to support absolute positioned lozenge
  */
-export declare const createBlockNodeWrapper: (nodeName: string) => HTMLDivElement;
+export declare const createBlockNodeWrapper: () => HTMLDivElement;
 /**
  * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
  */
@@ -31,18 +35,25 @@ export declare const applyDeletedStylesToElement: (element: HTMLElement, targetN
  * 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 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
+ */
+export declare const handleEmbedCardWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colourScheme: "standard" | "traditional" | undefined) => boolean;
 /**
  * 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;
+export declare const handleMediaSingleWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colourScheme: "standard" | "traditional" | undefined) => 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 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "3.2.8",
+	"version": "3.3.1",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,7 @@
 		"prosemirror-changeset": "^2.2.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.38.0",
+		"@atlaskit/editor-common": "^110.40.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {
@@ -79,10 +79,10 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform_editor_ai_aifc_patch_beta_2": {
+		"platform_editor_ai_aifc_patch_ga": {
 			"type": "boolean"
 		},
-		"platform_editor_ai_aifc_patch_ga": {
+		"platform_editor_ai_aifc_patch_ga_blockers": {
 			"type": "boolean"
 		}
 	}