@atlaskit/editor-plugin-show-diff 6.2.5 → 6.2.6

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.showDiffPluginKey = exports.getScrollableDecorations = exports.createPlugin = void 0;
+exports.showDiffPluginKey = exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _processRawValue = require("@atlaskit/editor-common/process-raw-value");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
@@ -15,33 +15,12 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _calculateDiffDecorations = require("./calculateDiff/calculateDiffDecorations");
 var _enforceCustomStepRegisters = require("./enforceCustomStepRegisters");
+var _getScrollableDecorations = require("./getScrollableDecorations");
 var _NodeViewSerializer = require("./NodeViewSerializer");
 var _scrollToActiveDecoration = require("./scrollToActiveDecoration");
 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 showDiffPluginKey = exports.showDiffPluginKey = new _state2.PluginKey('showDiffPlugin');
-var getScrollableDecorations = exports.getScrollableDecorations = function getScrollableDecorations(set) {
-  var _set$find;
-  var seenBlockKeys = new Set();
-  return ((_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, function (spec) {
-    var _spec$key;
-    return spec.key === 'diff-inline' || ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith('diff-widget')) || spec.key === 'diff-block';
-  })) !== null && _set$find !== void 0 ? _set$find : []).filter(function (dec) {
-    var _dec$spec;
-    if (((_dec$spec = dec.spec) === null || _dec$spec === void 0 ? void 0 : _dec$spec.key) === 'diff-block') {
-      var _dec$spec2, _dec$spec$nodeName, _dec$spec3;
-      // Skip listItem blocks as they are not scrollable
-      if (((_dec$spec2 = dec.spec) === null || _dec$spec2 === void 0 ? void 0 : _dec$spec2.nodeName) === 'listItem') return false;
-      var key = "".concat(dec.from, "-").concat(dec.to, "-").concat((_dec$spec$nodeName = (_dec$spec3 = dec.spec) === null || _dec$spec3 === void 0 ? void 0 : _dec$spec3.nodeName) !== null && _dec$spec$nodeName !== void 0 ? _dec$spec$nodeName : '');
-      // Skip blocks that have already been seen
-      if (seenBlockKeys.has(key)) return false;
-      seenBlockKeys.add(key);
-    }
-    return true;
-  }).sort(function (a, b) {
-    return a.from === b.from ? a.to - b.to : a.from - b.from;
-  });
-};
 var createPlugin = exports.createPlugin = function createPlugin(config, getIntl, api) {
   if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_equality_fallback')) {
     (0, _enforceCustomStepRegisters.enforceCustomStepRegisters)();
@@ -104,7 +83,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
             } : {});
           } else if (((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') && (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
             // Update the active index in plugin state and recalculate decorations
-            var _decorations = getScrollableDecorations(currentPluginState.decorations);
+            var _decorations = (0, _getScrollableDecorations.getScrollableDecorations)(currentPluginState.decorations, newState.doc);
             if (_decorations.length > 0) {
               var _currentPluginState$a;
               // Initialize to -1 if undefined so that the first "next" scroll takes us to index 0 (first change).
@@ -156,6 +135,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
       setNodeViewSerializer(editorView);
       var isFirst = true;
       var previousActiveIndex;
+      var cancelPendingScrollToDecoration = null;
       return {
         update: function update(view) {
           // If we're using configuration to show diffs we initialise here once we setup the editor view
@@ -176,9 +156,16 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
             var activeIndexChanged = (pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && pluginState.activeIndex !== previousActiveIndex;
             previousActiveIndex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex;
             if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && activeIndexChanged) {
-              (0, _scrollToActiveDecoration.scrollToActiveDecoration)(view, getScrollableDecorations(pluginState.decorations), pluginState.activeIndex);
+              var _cancelPendingScrollT;
+              (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 || _cancelPendingScrollT();
+              cancelPendingScrollToDecoration = (0, _scrollToActiveDecoration.scrollToActiveDecoration)(view, (0, _getScrollableDecorations.getScrollableDecorations)(pluginState.decorations, view.state.doc), pluginState.activeIndex);
             }
           }
+        },
+        destroy: function destroy() {
+          var _cancelPendingScrollT2;
+          (_cancelPendingScrollT2 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT2 === void 0 || _cancelPendingScrollT2();
+          cancelPendingScrollToDecoration = null;
         }
       };
     },

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

@@ -4,28 +4,69 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.scrollToActiveDecoration = void 0;
+/**
+ * Extra space above the scrolled-to element so it does not sit flush under the
+ * viewport edge (helps with sticky table headers, toolbars, etc.).
+ *
+ * Implemented with `scroll-margin-top` so we still use the browser’s native
+ * `scrollIntoView`, which scrolls every relevant scrollport (nested containers
+ * and the window). A single manual `scrollTop` on one ancestor often misses
+ * outer scroll or mis-identifies the active scroll container.
+ */
+var SCROLL_TOP_MARGIN_PX = 100;
+
 /**
  * Scrolls to the current position/selection of the document. It does the same as scrollIntoView()
  * but without requiring the focus on the editor, thus it can be called at any time.
  */
-function scrollToSelection(view, position) {
-  var _view$domAtPos = view.domAtPos(position),
-    node = _view$domAtPos.node;
-  if (node instanceof Element) {
-    node.scrollIntoView({
+function scrollToSelection(node) {
+  var element = node instanceof Element ? node : (node === null || node === void 0 ? void 0 : node.parentElement) instanceof Element ? node.parentElement : null;
+  if (!(element instanceof HTMLElement)) {
+    return;
+  }
+
+  // scroll-margin is included in scroll-into-view math; it does not change layout.
+  var previousScrollMarginTop = element.style.scrollMarginTop;
+  element.style.scrollMarginTop = "".concat(SCROLL_TOP_MARGIN_PX, "px");
+  try {
+    element.scrollIntoView({
       behavior: 'smooth',
-      block: 'center'
+      block: 'start'
     });
+  } finally {
+    element.style.scrollMarginTop = previousScrollMarginTop;
   }
 }
 
 /**
- * Scrolls the editor view to the decoration at the given index.
+ * Schedules scrolling to the decoration at the given index after the next frame.
+ *
+ * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
  */
 var scrollToActiveDecoration = exports.scrollToActiveDecoration = function scrollToActiveDecoration(view, decorations, activeIndex) {
   var decoration = decorations[activeIndex];
   if (!decoration) {
-    return;
+    return function () {};
   }
-  scrollToSelection(view, decoration === null || decoration === void 0 ? void 0 : decoration.from);
+  var rafId = requestAnimationFrame(function () {
+    var _decoration$spec;
+    rafId = null;
+    if (((_decoration$spec = decoration.spec) === null || _decoration$spec === void 0 ? void 0 : _decoration$spec.key) === 'diff-widget-active') {
+      var _decoration$type;
+      // @ts-expect-error - decoration.type is not typed public API
+      var widgetDom = decoration === null || decoration === void 0 || (_decoration$type = decoration.type) === null || _decoration$type === void 0 ? void 0 : _decoration$type.toDOM;
+      scrollToSelection(widgetDom);
+    } else {
+      var _view$domAtPos;
+      var targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
+      var node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
+      scrollToSelection(node);
+    }
+  });
+  return function () {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  };
 };

package/dist/cjs/showDiffPlugin.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.showDiffPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _getScrollableDecorations = require("./pm-plugins/getScrollableDecorations");
 var _main = require("./pm-plugins/main");
 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; }
@@ -62,7 +63,7 @@ var showDiffPlugin = exports.showDiffPlugin = function showDiffPlugin(_ref) {
         };
       }
       var pluginState = _main.showDiffPluginKey.getState(editorState);
-      var decorationCount = (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? (0, _main.getScrollableDecorations)(pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorations) : (pluginState === null || pluginState === void 0 || (_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
+      var decorationCount = (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? (0, _getScrollableDecorations.getScrollableDecorations)(pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorations, editorState.doc) : (pluginState === null || pluginState === void 0 || (_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
       return {
         isDisplayingChanges: decorationCount.length > 0,
         activeIndex: pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex,

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

@@ -155,7 +155,6 @@ const calculateDiffDecorationsInner = ({
       }));
     }
     if (change.deleted.length > 0) {
-      const isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.fromB === activeIndexPos.to;
       const decoration = createNodeChangedDecorationWidget({
         change,
         doc: originalDoc,
@@ -163,7 +162,7 @@ const calculateDiffDecorationsInner = ({
         colorScheme,
         newDoc: tr.doc,
         intl,
-        isActive,
+        activeIndexPos,
         ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
           isInserted: !isInserted
         })

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

@@ -59,14 +59,32 @@ export const deletedStyleQuoteNodeWithLozenge = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-gray, #7D818A)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+
+/** Stronger outline when this deleted block decoration is the active scroll target */
+export const deletedStyleQuoteNodeWithLozengeActive = 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 2px ${"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 deletedBlockOutlineActive = convertToInlineCss({
+  boxShadow: `0 0 0 2px ${"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 deletedBlockOutlineRoundedActive = convertToInlineCss({
+  boxShadow: `0 0 0 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
+});
 export const deletedRowStyle = convertToInlineCss({
   color: "var(--ds-text-accent-gray, #505258)",
   textDecoration: 'line-through',

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

@@ -44,7 +44,7 @@ export const deletedTraditionalContentStyleUnboundedActive = convertToInlineCss(
   top: '50%',
   width: '100%',
   display: 'inline-block',
-  borderTop: `1px solid ${"var(--ds-text-accent-red-bolder, #5D1F1A)"}`,
+  borderTop: `2px solid ${"var(--ds-border-accent-red, #E2483D)"}`,
   pointerEvents: 'none',
   zIndex: 1
 });
@@ -56,14 +56,30 @@ export const deletedTraditionalStyleQuoteNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+export const deletedTraditionalStyleQuoteNodeActive = 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 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  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 deletedTraditionalBlockOutlineActive = convertToInlineCss({
+  boxShadow: `0 0 0 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 export const deletedTraditionalBlockOutlineRounded = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
   borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
 });
+export const deletedTraditionalBlockOutlineRoundedActive = convertToInlineCss({
+  boxShadow: `0 0 0 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
+});
 export const deletedTraditionalRowStyle = convertToInlineCss({
   textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
   textDecoration: 'line-through',

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

@@ -1,5 +1,6 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedContentStyleUnbounded } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, deletedTraditionalContentStyle, deletedTraditionalContentStyleActive, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
@@ -74,13 +75,13 @@ const createContentWrapper = (colorScheme, isActive = false, isInserted = false)
     } else {
       wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive)}`);
       const strikethrough = document.createElement('span');
-      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
+      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
       wrapper.append(strikethrough);
     }
   } else {
     wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive)}`);
     const strikethrough = document.createElement('span');
-    strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
+    strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
     wrapper.append(strikethrough);
   }
   return wrapper;
@@ -97,12 +98,18 @@ export const createNodeChangedDecorationWidget = ({
   colorScheme,
   newDoc,
   intl,
-  isActive = false,
+  activeIndexPos,
   // This is false by default as this is generally used to show deleted content
   isInserted = false
 }) => {
+  var _slice$content, _slice$content2, _slice$content2$first, _slice$content3, _slice$content3$first;
   const slice = doc.slice(change.fromA, change.toA);
-  if (slice.content.content.length === 0) {
+  const shouldSkipDeletedEmptyParagraphDecoration = !isInserted && (slice === null || slice === void 0 ? void 0 : (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.childCount) === 1 && (slice === null || slice === void 0 ? void 0 : (_slice$content2 = slice.content) === null || _slice$content2 === void 0 ? void 0 : (_slice$content2$first = _slice$content2.firstChild) === null || _slice$content2$first === void 0 ? void 0 : _slice$content2$first.type.name) === 'paragraph' && (slice === null || slice === void 0 ? void 0 : (_slice$content3 = slice.content) === null || _slice$content3 === void 0 ? void 0 : (_slice$content3$first = _slice$content3.firstChild) === null || _slice$content3$first === void 0 ? void 0 : _slice$content3$first.content.size) === 0 && fg('platform_editor_show_diff_scroll_navigation');
+  // Widget decoration used for deletions as the content is not in the document
+  // and we want to display the deleted content with a style.
+  const safeInsertPos = findSafeInsertPos(newDoc, change.fromB, slice);
+  const isActive = activeIndexPos && safeInsertPos === activeIndexPos.from && safeInsertPos === activeIndexPos.to;
+  if (slice.content.content.length === 0 || shouldSkipDeletedEmptyParagraphDecoration) {
     return;
   }
   const isTableCellContent = slice.content.content.some(() => slice.content.content.some(siblingNode => ['tableHeader', 'tableCell'].includes(siblingNode.type.name)));
@@ -198,6 +205,7 @@ export const createNodeChangedDecorationWidget = ({
           targetNode: node,
           colorScheme,
           intl,
+          isActive,
           isInserted
         });
       }
@@ -207,7 +215,7 @@ export const createNodeChangedDecorationWidget = ({
     } else {
       const fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || fg('platform_editor_show_diff_scroll_navigation')) {
           if (fallbackNode instanceof HTMLElement) {
             const injectedNode = injectInnerWrapper({
               node: fallbackNode,
@@ -230,10 +238,6 @@ export const createNodeChangedDecorationWidget = ({
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
-
-  // Widget decoration used for deletions as the content is not in the document
-  // and we want to display the deleted content with a style.
-  const safeInsertPos = findSafeInsertPos(newDoc, change.fromB, slice);
   const decorations = [];
   decorations.push(Decoration.widget(safeInsertPos, dom, {
     key: `diff-widget-${isActive ? 'active' : 'inactive'}`

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

@@ -1,8 +1,8 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { deletedBlockOutline, deletedBlockOutlineRounded, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedStyleQuoteNodeWithLozenge, editingStyle, editingStyleActive, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
-import { deletedTraditionalBlockOutline, deletedTraditionalBlockOutlineRounded, deletedTraditionalContentStyle, deletedTraditionalStyleQuoteNode, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
+import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingStyle, editingStyleActive, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
+import { deletedTraditionalBlockOutline, deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineRounded, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalContentStyle, deletedTraditionalContentStyleActive, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
 const lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -19,6 +19,38 @@ const lozengeStyle = convertToInlineCss({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
+const lozengeStyleActiveStandard = 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-red-subtler-pressed, #FD9891)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-bold, 653)",
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  color: "var(--ds-text-warning-inverse, #292A2E)"
+});
+const lozengeStyleActiveTraditional = 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-red-subtler-pressed, #FD9891)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-bold, 653)",
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  color: "var(--ds-text-warning-inverse, #292A2E)"
+});
 const getChangedContentStyle = (colorScheme, isActive = false, isInserted = false) => {
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
     if (colorScheme === 'traditional') {
@@ -27,14 +59,14 @@ const getChangedContentStyle = (colorScheme, isActive = false, isInserted = fals
     return isActive ? editingStyleActive : editingStyle;
   }
   if (colorScheme === 'traditional') {
-    return deletedTraditionalContentStyle;
+    return isActive ? deletedTraditionalContentStyleActive : 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 getChangedNodeStyle = (nodeName, colorScheme, isInserted = false) => {
+const getChangedNodeStyle = (nodeName, colorScheme, isInserted = false, isActive = false) => {
   const isTraditional = colorScheme === 'traditional';
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
     if (shouldApplyStylesDirectly(nodeName)) {
@@ -47,13 +79,22 @@ const getChangedNodeStyle = (nodeName, colorScheme, isInserted = false) => {
   }
   switch (nodeName) {
     case 'blockquote':
-      return isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge;
+      if (isTraditional) {
+        return isActive ? deletedTraditionalStyleQuoteNodeActive : deletedTraditionalStyleQuoteNode;
+      }
+      return isActive ? deletedStyleQuoteNodeWithLozengeActive : deletedStyleQuoteNodeWithLozenge;
     case 'expand':
     case 'decisionList':
-      return isTraditional ? deletedTraditionalBlockOutline : deletedBlockOutline;
+      if (isTraditional) {
+        return isActive ? deletedTraditionalBlockOutlineActive : deletedTraditionalBlockOutline;
+      }
+      return isActive ? deletedBlockOutlineActive : deletedBlockOutline;
     case 'panel':
     case 'codeBlock':
-      return isTraditional ? deletedTraditionalBlockOutlineRounded : deletedBlockOutlineRounded;
+      if (isTraditional) {
+        return isActive ? deletedTraditionalBlockOutlineRoundedActive : deletedTraditionalBlockOutlineRounded;
+      }
+      return isActive ? deletedBlockOutlineRoundedActive : deletedBlockOutlineRounded;
     default:
       return undefined;
   }
@@ -106,7 +147,7 @@ const applyCellOverlayStyles = ({
 /**
  * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
  */
-const createRemovedLozenge = intl => {
+const createRemovedLozenge = (intl, isActive = false, colorScheme) => {
   const container = document.createElement('span');
   const containerStyle = convertToInlineCss({
     position: 'absolute',
@@ -121,7 +162,8 @@ const createRemovedLozenge = intl => {
 
   // Create vanilla HTML lozenge element with Atlaskit Lozenge styling (visual refresh)
   const lozengeElement = document.createElement('span');
-  lozengeElement.setAttribute('style', lozengeStyle);
+  const lozengeInnerStyle = isActive && colorScheme === 'traditional' ? lozengeStyleActiveTraditional : isActive ? lozengeStyleActiveStandard : lozengeStyle;
+  lozengeElement.setAttribute('style', lozengeInnerStyle);
   lozengeElement.textContent = intl.formatMessage(trackChangesMessages.removed).toUpperCase();
   container.appendChild(lozengeElement);
   return container;
@@ -148,11 +190,12 @@ const applyStylesToElement = ({
   element,
   targetNode,
   colorScheme,
+  isActive,
   isInserted
 }) => {
   const currentStyle = element.getAttribute('style') || '';
-  const contentStyle = getChangedContentStyle(colorScheme, false, isInserted);
-  const nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted) || '';
+  const contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted);
+  const nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
   element.setAttribute('style', `${currentStyle}${contentStyle}${nodeSpecificStyle}`);
 };
 
@@ -163,11 +206,12 @@ const createBlockNodeContentWrapper = ({
   nodeView,
   targetNode,
   colorScheme,
+  isActive,
   isInserted
 }) => {
   const contentWrapper = document.createElement('div');
-  const nodeStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted);
-  contentWrapper.setAttribute('style', `${getChangedContentStyle(colorScheme, false, isInserted)}${nodeStyle || ''}`);
+  const nodeStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive);
+  contentWrapper.setAttribute('style', `${getChangedContentStyle(colorScheme, isActive, isInserted)}${nodeStyle || ''}`);
   contentWrapper.append(nodeView);
   return contentWrapper;
 };
@@ -183,7 +227,8 @@ const handleEmbedCardWithLozenge = ({
   nodeView,
   targetNode,
   lozenge,
-  colorScheme
+  colorScheme,
+  isActive = false
 }) => {
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
@@ -207,6 +252,9 @@ const handleEmbedCardWithLozenge = ({
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
     const showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
+    if (isActive) {
+      nodeView.classList.add('show-diff-deleted-active');
+    }
   }
   dom.append(nodeView);
   return true;
@@ -221,7 +269,8 @@ const handleMediaSingleWithLozenge = ({
   nodeView,
   targetNode,
   lozenge,
-  colorScheme
+  colorScheme,
+  isActive = false
 }) => {
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
@@ -243,6 +292,9 @@ const handleMediaSingleWithLozenge = ({
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
     const showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
+    if (isActive) {
+      nodeView.classList.add('show-diff-deleted-active');
+    }
   }
   dom.append(nodeView);
   return true;
@@ -257,17 +309,19 @@ const wrapBlockNode = ({
   targetNode,
   colorScheme,
   intl,
+  isActive = false,
   isInserted = false
 }) => {
   const blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name) && (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isInserted)) {
-    const lozenge = createRemovedLozenge(intl);
+    const lozenge = createRemovedLozenge(intl, isActive, colorScheme);
     if (handleEmbedCardWithLozenge({
       dom,
       nodeView,
       targetNode,
       lozenge,
-      colorScheme
+      colorScheme,
+      isActive
     })) {
       return;
     }
@@ -276,7 +330,8 @@ const wrapBlockNode = ({
       nodeView,
       targetNode,
       lozenge,
-      colorScheme
+      colorScheme,
+      isActive
     })) {
       return;
     }
@@ -286,12 +341,16 @@ const wrapBlockNode = ({
     nodeView,
     targetNode,
     colorScheme,
+    isActive,
     isInserted
   });
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
     const showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
+    if (isActive) {
+      nodeView.classList.add('show-diff-deleted-active');
+    }
   }
   dom.append(blockWrapper);
 };
@@ -307,6 +366,7 @@ export const wrapBlockNodeView = ({
   targetNode,
   colorScheme,
   intl,
+  isActive = false,
   isInserted = false
 }) => {
   if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
@@ -315,6 +375,7 @@ export const wrapBlockNodeView = ({
       element: nodeView,
       targetNode,
       colorScheme,
+      isActive,
       isInserted
     });
     dom.append(nodeView);
@@ -333,6 +394,7 @@ export const wrapBlockNodeView = ({
       targetNode,
       colorScheme,
       intl,
+      isActive,
       isInserted
     });
   }