@atlaskit/editor-plugin-show-diff 8.4.5 → 8.4.7

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

@@ -11,7 +11,6 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _calculateDiffDecorations = require("./calculateDiff/calculateDiffDecorations");
 var _enforceCustomStepRegisters = require("./enforceCustomStepRegisters");
@@ -22,9 +21,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 createPlugin = exports.createPlugin = function createPlugin(config, getIntl, api) {
-  if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_equality_fallback')) {
-    (0, _enforceCustomStepRegisters.enforceCustomStepRegisters)();
-  }
+  (0, _enforceCustomStepRegisters.enforceCustomStepRegisters)();
   var nodeViewSerializer = new _NodeViewSerializer.NodeViewSerializer({});
   var setNodeViewSerializer = function setNodeViewSerializer(editorView) {
     nodeViewSerializer.init({
@@ -65,7 +62,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               nodeViewSerializer: nodeViewSerializer,
               colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
               intl: getIntl(),
-              activeIndexPos: (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined,
+              activeIndexPos: newPluginState.activeIndexPos,
               api: api
             }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
               isInverted: (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.isInverted,
@@ -84,7 +81,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               diffType: 'inline',
               hideDeletedDiffs: false
             } : {});
-          } 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')) {
+          } 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') {
             // Update the active index in plugin state and recalculate decorations
             var _decorations = (0, _getScrollableDecorations.getScrollableDecorations)(currentPluginState.decorations, newState.doc);
             if (_decorations.length > 0) {
@@ -170,19 +167,17 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
           }
 
           // Check for any potential scroll side-effects
-          if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
-            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) {
-              var _cancelPendingScrollT2, _api$expand;
-              (_cancelPendingScrollT2 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT2 === void 0 || _cancelPendingScrollT2();
-              var scrollableDecorations = (0, _getScrollableDecorations.getScrollableDecorations)(pluginState.decorations, view.state.doc);
-              var activeDecoration = scrollableDecorations[pluginState.activeIndex];
-              if (activeDecoration && api !== null && api !== void 0 && (_api$expand = api.expand) !== null && _api$expand !== void 0 && (_api$expand = _api$expand.commands) !== null && _api$expand !== void 0 && _api$expand.toggleExpandRange && (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
-                api === null || api === void 0 || api.core.actions.execute(api.expand.commands.toggleExpandRange(activeDecoration.from, activeDecoration.to, true));
-              }
-              cancelPendingScrollToDecoration = (0, _scrollToDiff.scrollToActiveDecoration)(view, scrollableDecorations, pluginState.activeIndex);
+          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) {
+            var _cancelPendingScrollT2, _api$expand;
+            (_cancelPendingScrollT2 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT2 === void 0 || _cancelPendingScrollT2();
+            var scrollableDecorations = (0, _getScrollableDecorations.getScrollableDecorations)(pluginState.decorations, view.state.doc);
+            var activeDecoration = scrollableDecorations[pluginState.activeIndex];
+            if (activeDecoration && api !== null && api !== void 0 && (_api$expand = api.expand) !== null && _api$expand !== void 0 && (_api$expand = _api$expand.commands) !== null && _api$expand !== void 0 && _api$expand.toggleExpandRange) {
+              api === null || api === void 0 || api.core.actions.execute(api.expand.commands.toggleExpandRange(activeDecoration.from, activeDecoration.to, true));
             }
+            cancelPendingScrollToDecoration = (0, _scrollToDiff.scrollToActiveDecoration)(view, scrollableDecorations, pluginState.activeIndex);
           }
         },
         destroy: function destroy() {

package/dist/cjs/showDiffPlugin.js

@@ -6,7 +6,6 @@ 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; }
@@ -55,7 +54,6 @@ var showDiffPlugin = exports.showDiffPlugin = function showDiffPlugin(_ref) {
       }];
     },
     getSharedState: function getSharedState(editorState) {
-      var _pluginState$decorati;
       if (!editorState) {
         return {
           isDisplayingChanges: false,
@@ -63,7 +61,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, _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()) || [];
+      var decorationCount = (0, _getScrollableDecorations.getScrollableDecorations)(pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorations, editorState.doc);
       return {
         isDisplayingChanges: decorationCount.length > 0,
         activeIndex: pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex,

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

@@ -1,5 +1,4 @@
 import { Transform } from '@atlaskit/editor-prosemirror/transform';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 /**
  * Returns a copy of the document with all marks removed from all text.
@@ -42,13 +41,10 @@ export function areDocsEqualByBlockStructureAndText(doc1, doc2) {
   if (doc1.textContent !== doc2.textContent) {
     return false;
   }
-  if (expValEquals('platform_editor_show_diff_improvements', 'isEnabled', true)) {
-    // Strip marks before comparing so that mark-driven text fragmentation
-    // (e.g. annotation mark reordering producing different childCounts) does not
-    // cause false inequalities.
-    const stripped1 = stripMarks(doc1);
-    const stripped2 = stripMarks(doc2);
-    return doc1.nodeSize === doc2.nodeSize && isBlockStructureEqual(stripped1, stripped2);
-  }
-  return doc1.nodeSize === doc2.nodeSize && isBlockStructureEqual(doc1, doc2);
+  // Strip marks before comparing so that mark-driven text fragmentation
+  // (e.g. annotation mark reordering producing different childCounts) does not
+  // cause false inequalities.
+  const stripped1 = stripMarks(doc1);
+  const stripped2 = stripMarks(doc2);
+  return doc1.nodeSize === doc2.nodeSize && isBlockStructureEqual(stripped1, stripped2);
 }

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

@@ -4,7 +4,6 @@ import memoizeOne from 'memoize-one';
 import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
 import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { areDocsEqualByBlockStructureAndText } from '../areDocsEqualByBlockStructureAndText';
 import { createBlockChangedDecoration } from '../decorations/createBlockChangedDecoration';
@@ -110,25 +109,19 @@ const calculateDiffDecorationsInner = ({
   // Rather than using .eq() we use a custom function that only checks for structural
   // changes and ignores differences in attributes which don't affect decoration positions
   if (!areNodesEqualIgnoreAttrs(steppedDoc, tr.doc)) {
-    const recoveredViaContentEquality = fg('platform_editor_show_diff_equality_fallback') ? areDocsEqualByBlockStructureAndText(steppedDoc, tr.doc) : undefined;
-    if (expValEquals('platform_editor_are_nodes_equal_ignore_mark_order', 'isEnabled', true)) {
-      var _api$analytics;
-      api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
-        eventType: 'track',
-        action: 'nodesNotEqual',
-        actionSubject: 'showDiff',
-        attributes: {
-          docSizeEqual: steppedDoc.nodeSize === tr.doc.nodeSize,
-          colorScheme,
-          recoveredViaContentEquality
-        }
-      });
-    }
-    if (fg('platform_editor_show_diff_equality_fallback')) {
-      if (!recoveredViaContentEquality) {
-        return DecorationSet.empty;
+    var _api$analytics;
+    const recoveredViaContentEquality = areDocsEqualByBlockStructureAndText(steppedDoc, tr.doc);
+    api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
+      eventType: 'track',
+      action: 'nodesNotEqual',
+      actionSubject: 'showDiff',
+      attributes: {
+        docSizeEqual: steppedDoc.nodeSize === tr.doc.nodeSize,
+        colorScheme,
+        recoveredViaContentEquality
       }
-    } else {
+    });
+    if (!recoveredViaContentEquality) {
       return DecorationSet.empty;
     }
   }
@@ -202,7 +195,7 @@ const calculateDiffDecorationsInner = ({
     }));
   });
   getAttrChangeRanges(tr.doc, attrSteps).forEach(change => {
-    if (expValEquals('platform_editor_show_diff_improvements', 'isEnabled', true) && change.isInline) {
+    if (change.isInline) {
       // Inline nodes (e.g. date) need an inline decoration rather than a block decoration
       const isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
       decorations.push(createInlineChangedDecoration({

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

@@ -4,6 +4,103 @@ import { Mapping, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { optimizeChanges } from './optimizeChanges';
 const mapPosition = (mapping, pos) => mapping.map(pos);
 
+/**
+ * Given a ProseMirror doc and a position range [from, to], expand
+ * both endpoints outward to the nearest word boundaries.
+ *
+ * A "word character" is any non-whitespace, non-punctuation character, plus hyphen.
+ * This covers accented/Unicode letters (e.g. é, ñ, ü) while still stopping at
+ * commas, periods, and other punctuation. Hyphens are explicitly included so that
+ * hyphenated words (e.g. "deep-sea") are treated as a single word.
+ * Expansion stops at whitespace, punctuation (excluding hyphen), or the textblock edges.
+ *
+ * If `from` and `to` resolve into different parent nodes, or if the
+ * parent is not a textblock, the range is returned unchanged.
+ */
+const expandToWordBoundaries = (doc, from, to) => {
+  const $from = doc.resolve(from);
+
+  // Only expand inside a textblock.
+  if (!$from.parent.isTextblock) {
+    return {
+      from,
+      to
+    };
+  }
+
+  // When `from !== to`, verify both ends are in the same textblock.
+  if (from !== to) {
+    const $to = doc.resolve(to);
+    if ($from.parent !== $to.parent) {
+      return {
+        from,
+        to
+      };
+    }
+  }
+  const parent = $from.parent;
+  const text = parent.textContent;
+  const parentStart = $from.start(); // absolute position of the first character in the textblock
+
+  // Convert absolute doc positions to zero-based string indices.
+  let fromIdx = from - parentStart;
+  let toIdx = to - parentStart;
+
+  // any non whitespace and non punctuation chars
+  // @ts-ignore TS1501: This regular expression flag is only available when targeting 'es6' or later.
+  const isWordChar = ch => /[\p{L}\p{N}_-]/u.test(ch);
+
+  // Detect whether the position sits mid-word: there is a word character
+  // on both sides of the position (or, for a non-empty range, on the
+  // outer side of each endpoint).
+  const isMidWord = idx => idx > 0 && idx < text.length && isWordChar(text[idx - 1]) && isWordChar(text[idx]);
+
+  // For a zero-width range (pure insertion / deletion point), only expand
+  // if the point is mid-word — i.e. both the char before and after are
+  // word characters. Otherwise the point is already at a word boundary.
+  if (from === to) {
+    if (!isMidWord(fromIdx)) {
+      return {
+        from,
+        to
+      };
+    }
+    // Expand both directions from the mid-word point.
+    while (fromIdx > 0 && isWordChar(text[fromIdx - 1])) {
+      fromIdx--;
+    }
+    while (toIdx < text.length && isWordChar(text[toIdx])) {
+      toIdx++;
+    }
+    return {
+      from: parentStart + fromIdx,
+      to: parentStart + toIdx
+    };
+  }
+
+  // Non-empty range: expand each endpoint outward if it is mid-word.
+
+  // Expand left only if `from` is truly mid-word: the character at `from`
+  // (inside the range) and the character before `from` are both word chars.
+  if (fromIdx > 0 && fromIdx < text.length && isWordChar(text[fromIdx]) && isWordChar(text[fromIdx - 1])) {
+    while (fromIdx > 0 && isWordChar(text[fromIdx - 1])) {
+      fromIdx--;
+    }
+  }
+
+  // Expand right only if `to` is truly mid-word: the character just before
+  // `to` (last char of the range) and the character at `to` are both word chars.
+  if (toIdx > 0 && toIdx < text.length && isWordChar(text[toIdx - 1]) && isWordChar(text[toIdx])) {
+    while (toIdx < text.length && isWordChar(text[toIdx])) {
+      toIdx++;
+    }
+  }
+  return {
+    from: parentStart + fromIdx,
+    to: parentStart + toIdx
+  };
+};
+
 /**
  * Compare marks between two nodes
  * We have to check each child because adding a mark splits text into multiple nodes
@@ -147,10 +244,46 @@ export const diffBySteps = (originalDoc, steps) => {
       // wrong text/positions. Use the post-step doc here.
       const optimizedGranularStepChanges = optimizeChanges(simplifyChanges(granularStepChanges.changes, rangedStep.doc));
       for (const granularChange of optimizedGranularStepChanges) {
-        const granularFromA = mapPosition(beforeStepToOriginal, granularChange.fromA);
-        const granularToA = mapPosition(beforeStepToOriginal, granularChange.toA);
-        const granularFromB = mapPosition(afterStepToFinal, granularChange.fromB);
-        const granularToB = mapPosition(afterStepToFinal, granularChange.toB);
+        // Expand each granular change to the nearest word boundaries in
+        // both the pre-step doc (A-side) and the post-step doc (B-side).
+        // This ensures that a mid-word edit like "sanitised" → "sanitized"
+        // shows as deleting the whole original word and inserting the whole
+        // new word, rather than a single-character swap.
+        const expandedA = expandToWordBoundaries(rangedStep.before, granularChange.fromA, granularChange.toA);
+        const expandedB = expandToWordBoundaries(rangedStep.doc, granularChange.fromB, granularChange.toB);
+
+        // When one side expanded further than the other (e.g. a space
+        // was inserted mid-word: "altogether" → "all together"), the
+        // less-expanded side must grow to match — otherwise the renderer
+        // shows a partial word as plain text next to a deletion/insertion.
+        // We compare left and right deltas independently so partial
+        // expansion on one side doesn't prevent the other side from
+        // being pulled out further.
+        const aLeftDelta = granularChange.fromA - expandedA.from;
+        const aRightDelta = expandedA.to - granularChange.toA;
+        const bLeftDelta = granularChange.fromB - expandedB.from;
+        const bRightDelta = expandedB.to - granularChange.toB;
+        let finalA = expandedA;
+        let finalB = expandedB;
+
+        // If A expanded further on either side, nudge B outward
+        // by the excess and re-expand to snap to word boundaries.
+        if (aLeftDelta > bLeftDelta || aRightDelta > bRightDelta) {
+          const extraLeft = Math.max(0, aLeftDelta - bLeftDelta);
+          const extraRight = Math.max(0, aRightDelta - bRightDelta);
+          finalB = expandToWordBoundaries(rangedStep.doc, Math.max(expandedB.from - extraLeft, 0), expandedB.to + extraRight);
+        }
+
+        // If B expanded further on either side, nudge A outward.
+        if (bLeftDelta > aLeftDelta || bRightDelta > aRightDelta) {
+          const extraLeft = Math.max(0, bLeftDelta - aLeftDelta);
+          const extraRight = Math.max(0, bRightDelta - aRightDelta);
+          finalA = expandToWordBoundaries(rangedStep.before, Math.max(expandedA.from - extraLeft, 0), expandedA.to + extraRight);
+        }
+        const granularFromA = mapPosition(beforeStepToOriginal, finalA.from);
+        const granularToA = mapPosition(beforeStepToOriginal, finalA.to);
+        const granularFromB = mapPosition(afterStepToFinal, finalB.from);
+        const granularToB = mapPosition(afterStepToFinal, finalB.to);
         changes.push({
           fromA: granularFromA,
           toA: granularToA,

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

@@ -1,9 +1,8 @@
 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 { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
-import { traditionalDecorationMarkerVariable, traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariable, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNode, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNode, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNode, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNode, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from './colorSchemes/traditional';
+import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from './colorSchemes/traditional';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
@@ -26,7 +25,7 @@ const getBlockNodeStyle = ({
   // Handle table separately to avoid border issues
   'tableRow', 'paragraph',
   // Paragraph and heading nodes do not need special styling
-  'heading', 'hardBreak', 'decisionList', 'taskList', ...(expValEquals('platform_editor_show_diff_improvements', 'isEnabled', true) ? [] : ['taskItem']), 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
+  'heading', 'hardBreak', 'decisionList', 'taskList', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
     // Layout nodes do not need special styling
     return undefined;
   }
@@ -43,51 +42,51 @@ const getBlockNodeStyle = ({
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? fg('platform_editor_show_diff_scroll_navigation') ? traditionalDecorationMarkerVariableNew : traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
+        return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariableNew : standardDecorationMarkerVariable;
       } else {
-        return isTraditional && isActive ? traditionalDeletedDecorationMarkerVariableActive : isTraditional ? fg('platform_editor_show_diff_scroll_navigation') ? traditionalDeletedDecorationMarkerVariableNew : traditionalDeletedDecorationMarkerVariable : deletedContentStyleNew;
+        return isTraditional && isActive ? traditionalDeletedDecorationMarkerVariableActive : isTraditional ? traditionalDeletedDecorationMarkerVariableNew : deletedContentStyleNew;
       }
     }
-    return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? fg('platform_editor_show_diff_scroll_navigation') ? traditionalDecorationMarkerVariableNew : traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
+    return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariableNew : standardDecorationMarkerVariable;
   }
   if (nodeName === 'blockquote') {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleQuoteNodeNew : traditionalStyleQuoteNode : editingStyleQuoteNode;
+        return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : traditionalStyleQuoteNodeNew : editingStyleQuoteNode;
       } else {
         return isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNode;
       }
     }
-    return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleQuoteNodeNew : traditionalStyleQuoteNode : editingStyleQuoteNode;
+    return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : traditionalStyleQuoteNodeNew : editingStyleQuoteNode;
   }
   if (nodeName === 'rule') {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? isActive ? traditionalStyleRuleNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleRuleNodeNew : traditionalStyleRuleNode : editingStyleRuleNode;
+        return isTraditional ? isActive ? traditionalStyleRuleNodeActive : traditionalStyleRuleNodeNew : editingStyleRuleNode;
       } else {
         return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedContentStyleNew;
       }
     }
-    return isTraditional ? isActive ? traditionalStyleRuleNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleRuleNodeNew : traditionalStyleRuleNode : editingStyleRuleNode;
+    return isTraditional ? isActive ? traditionalStyleRuleNodeActive : traditionalStyleRuleNodeNew : editingStyleRuleNode;
   }
   if (nodeName === 'blockCard') {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleCardBlockNodeNew : traditionalStyleCardBlockNode : editingStyleCardBlockNode;
+        return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : traditionalStyleCardBlockNodeNew : editingStyleCardBlockNode;
       } else {
         return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedContentStyleNew;
       }
     }
-    return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleCardBlockNodeNew : traditionalStyleCardBlockNode : editingStyleCardBlockNode;
+    return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : traditionalStyleCardBlockNodeNew : editingStyleCardBlockNode;
   }
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     if (isInserted) {
-      return isTraditional ? isActive ? traditionalStyleNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleNodeNew : traditionalStyleNode : editingStyleNode;
+      return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
     } else {
       return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedContentStyleNew;
     }
   }
-  return isTraditional ? isActive ? traditionalStyleNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleNodeNew : traditionalStyleNode : editingStyleNode;
+  return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
 };
 
 /**
@@ -140,20 +139,9 @@ export const createBlockChangedDecoration = ({
     });
   }
   const className = getNodeClass(change.name);
-  if (fg('platform_editor_show_diff_scroll_navigation')) {
-    if (style || className) {
-      decorations.push(Decoration.node(change.from, change.to, {
-        style: style,
-        'data-testid': 'show-diff-changed-decoration-node',
-        class: className
-      }, {
-        key: 'diff-block',
-        nodeName: change.name
-      }));
-    }
-  } else {
+  if (style || className) {
     decorations.push(Decoration.node(change.from, change.to, {
-      style,
+      style: style,
       'data-testid': 'show-diff-changed-decoration-node',
       class: className
     }, {

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

@@ -1,6 +1,5 @@
 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, deletedContentStyleUnbounded, deletedInlineContentBackground } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
@@ -42,21 +41,6 @@ const getDeletedContentStyle = (colorScheme, isActive = false) => {
   return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
 };
 
-/**
- * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
- */
-const createDeletedStyleWrapperWithoutOpacity = (colorScheme, isActive) => {
-  const wrapper = document.createElement('span');
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-    wrapper.setAttribute('style',
-    // Merge into existing styles when cleaning up
-    getDeletedContentStyle(colorScheme, isActive) + deletedInlineContentBackground);
-  } else {
-    wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
-  }
-  return wrapper;
-};
-
 /**
  * CSS backgrounds don't work when applied to a wrapper around a paragraph, so
  * the wrapper needs to be injected inside the node around the child content
@@ -117,7 +101,7 @@ export const createNodeChangedDecorationWidget = ({
 }) => {
   var _slice$content, _slice$content2, _slice$content2$first, _slice$content3, _slice$content3$first;
   const slice = doc.slice(change.fromA, change.toA);
-  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');
+  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;
   // 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);
@@ -228,22 +212,16 @@ export const createNodeChangedDecorationWidget = ({
     } else {
       const fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        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,
-              colorScheme,
-              isActive,
-              isInserted
-            });
-            dom.append(injectedNode);
-          } else {
-            const wrapper = createContentWrapper(colorScheme, isActive, isInserted);
-            wrapper.append(fallbackNode);
-            dom.append(wrapper);
-          }
+        if (fallbackNode instanceof HTMLElement) {
+          const injectedNode = injectInnerWrapper({
+            node: fallbackNode,
+            colorScheme,
+            isActive,
+            isInserted
+          });
+          dom.append(injectedNode);
         } else {
-          const wrapper = createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive);
+          const wrapper = createContentWrapper(colorScheme, isActive, isInserted);
           wrapper.append(fallbackNode);
           dom.append(wrapper);
         }

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

@@ -1,6 +1,5 @@
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const filterUndefined = x => !!x;
 
 // Attributes that indicate a change in media image
@@ -34,33 +33,32 @@ export const getAttrChangeRanges = (doc, steps) => {
     const stepAttrs = getStepAttrs(step);
     const $pos = doc.resolve(step.pos);
     const nodeAtPos = doc.nodeAt(step.pos);
-    if (expValEquals('platform_editor_show_diff_improvements', 'isEnabled', true)) {
-      // date node: timestamp attribute change — highlight the date node itself (inline)
-      if (stepAttrs.some(v => dateAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date') {
-        return {
-          fromB: step.pos,
-          toB: step.pos + nodeAtPos.nodeSize,
-          isInline: true
-        };
-      }
 
-      // taskItem node: state attribute change — highlight the taskItem node
-      if (stepAttrs.some(v => taskItemAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'taskItem') {
-        return {
-          fromB: step.pos,
-          toB: step.pos + nodeAtPos.nodeSize
-        };
-      }
+    // date node: timestamp attribute change — highlight the date node itself (inline)
+    if (stepAttrs.some(v => dateAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date') {
+      return {
+        fromB: step.pos,
+        toB: step.pos + nodeAtPos.nodeSize,
+        isInline: true
+      };
+    }
 
-      // extension nodes: any attribute change except localId — highlight the node
-      if (nodeAtPos && extensionNodeNames.includes(nodeAtPos.type.name) && stepAttrs.some(v => !extensionExcludedAttrs.includes(v))) {
-        const isInline = nodeAtPos.type.name === 'inlineExtension';
-        return {
-          fromB: step.pos,
-          toB: step.pos + nodeAtPos.nodeSize,
-          isInline
-        };
-      }
+    // taskItem node: state attribute change — highlight the taskItem node
+    if (stepAttrs.some(v => taskItemAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'taskItem') {
+      return {
+        fromB: step.pos,
+        toB: step.pos + nodeAtPos.nodeSize
+      };
+    }
+
+    // extension nodes: any attribute change except localId — highlight the node
+    if (nodeAtPos && extensionNodeNames.includes(nodeAtPos.type.name) && stepAttrs.some(v => !extensionExcludedAttrs.includes(v))) {
+      const isInline = nodeAtPos.type.name === 'inlineExtension';
+      return {
+        fromB: step.pos,
+        toB: step.pos + nodeAtPos.nodeSize,
+        isInline
+      };
     }
 
     // media node: id/collection/url attribute change — highlight the mediaSingle parent