@atlaskit/editor-plugin-show-diff 12.0.3 → 12.1.1

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

@@ -37,7 +37,8 @@ export const createInlineChangedDecoration = ({
   diffType,
   hideAddedDiffsUnderline = false,
   inlineNodeName,
-  hasDeletedWidget = false
+  hasDeletedWidget = false,
+  isDeletedWidgetBelow = false
 }) => {
   const diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
@@ -94,14 +95,23 @@ export const createInlineChangedDecoration = ({
     // bar doesn't extend into the preceding block's margin.
     // Skip when the deleted-content widget is rendered — the anchor must
     // stay at the boundary to keep the indicator continuous.
+    //
+    // The widget only pins the end of the range it is anchored to. It sits at `change.fromB`
+    // by default, but `deletedDiffPlacement: 'bottom'` / `inlineDeletedDiffPlacement: 'after'`
+    // move it to `change.toB` so the deleted content reads after the added content. In that
+    // case the `from` anchor has no widget beside it any more and must be adjusted inward
+    // again, otherwise the over-long indicator bar that CCI-18224 fixed comes back.
     let anchorFrom = change.fromB;
     let anchorTo = change.toB;
-    if (!hasDeletedWidget) {
-      var _$from$nodeAfter, _$to$nodeBefore;
+    if (!hasDeletedWidget || isDeletedWidgetBelow) {
+      var _$from$nodeAfter;
       const $from = doc.resolve(anchorFrom);
       if (!$from.parent.inlineContent && (_$from$nodeAfter = $from.nodeAfter) !== null && _$from$nodeAfter !== void 0 && _$from$nodeAfter.isTextblock) {
         anchorFrom = anchorFrom + 1;
       }
+    }
+    if (!hasDeletedWidget) {
+      var _$to$nodeBefore;
       const $to = doc.resolve(anchorTo);
       if (!$to.parent.inlineContent && (_$to$nodeBefore = $to.nodeBefore) !== null && _$to$nodeBefore !== void 0 && _$to$nodeBefore.isTextblock) {
         anchorTo = anchorTo - 1;

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

@@ -1,4 +1,5 @@
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { isExperimentEnabled } from '@atlaskit/editor-common/deprecated-platform-feature-experiments';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const filterUndefined = x => !!x;
@@ -54,7 +55,7 @@ export const getAttrChangeRanges = (doc, steps, originalDoc) => {
     const nodeAtPos = doc.nodeAt(step.pos);
 
     // 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' && !expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) {
+    if (stepAttrs.some(v => dateAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date' && !isExperimentEnabled('platform_editor_improve_inline_diffs', () => expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true))) {
       return {
         fromB: step.pos,
         toB: step.pos + nodeAtPos.nodeSize,
@@ -66,7 +67,7 @@ export const getAttrChangeRanges = (doc, steps, originalDoc) => {
     // The following inline node attr changes are gated behind platform_editor_improve_inline_diffs.
     // The changeset path (createDecorationsForChange) handles the deletion widget via
     // prosemirror-changeset; we only need to add the inline insertion highlight here.
-    if (expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true) && nodeAtPos) {
+    if (isExperimentEnabled('platform_editor_improve_inline_diffs', () => expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) && nodeAtPos) {
       const nodeName = nodeAtPos.type.name;
       if (isInlineAttrChangeNodeName(nodeName)) {
         const watchedAttrs = inlineNodeAttrMap[nodeName];
@@ -119,7 +120,7 @@ export const getAttrChangeRanges = (doc, steps, originalDoc) => {
   // should produce only one decoration, not one per step.
   // Gated behind the same experiment as the inline node attr changes that introduced
   // the possibility of multiple ranges for the same node position.
-  .filter((range, i, arr) => !expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true) || arr.findIndex(r => r.fromB === range.fromB) === i);
+  .filter((range, i, arr) => !isExperimentEnabled('platform_editor_improve_inline_diffs', () => expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) || arr.findIndex(r => r.fromB === range.fromB) === i);
 };
 
 /**

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

@@ -0,0 +1,40 @@
+import { isDiffDecorationSpec } from './decorations/decorationKeys';
+import { showDiffPluginKey } from './main';
+
+// prosemirror-view does not type `Decoration.type`; a widget's `type.toDOM` is the node passed to
+// `Decoration.widget()` (an element or a factory — the `WidgetConstructor` union).
+
+// The element a deleted-content widget renders, or undefined if it renders via a factory.
+const getWidgetElement = decoration => {
+  var _type;
+  const {
+    toDOM
+  } = (_type = decoration.type) !== null && _type !== void 0 ? _type : {};
+  return toDOM instanceof HTMLElement ? toDOM : undefined;
+};
+
+/**
+ * The rendered deleted-content widgets in `editorState`, optionally restricted to `[from, to]`,
+ * ordered by position. Deleted content is rendered as widget decorations rather than document
+ * nodes, so this is how the element and the position it is anchored at are recovered.
+ *
+ * Kept internal and surfaced only through the `getDeletedWidgets` plugin action, so consumers never
+ * receive the plugin key or the decoration set (which would let them mutate plugin behaviour).
+ */
+export const getDeletedWidgets = (editorState, range) => {
+  var _showDiffPluginKey$ge;
+  const decorations = (_showDiffPluginKey$ge = showDiffPluginKey.getState(editorState)) === null || _showDiffPluginKey$ge === void 0 ? void 0 : _showDiffPluginKey$ge.decorations;
+  if (!decorations) {
+    return [];
+  }
+  return decorations.find(range === null || range === void 0 ? void 0 : range.from, range === null || range === void 0 ? void 0 : range.to, spec => isDiffDecorationSpec(spec) && spec.decorationType === 'widget').reduce((widgets, decoration) => {
+    const element = getWidgetElement(decoration);
+    if (element) {
+      widgets.push({
+        element,
+        position: decoration.from
+      });
+    }
+    return widgets;
+  }, []).sort((a, b) => a.position - b.position);
+};

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

@@ -11,7 +11,7 @@ import { isExtendedEnabled } from './isExtendedEnabled';
 import { NodeViewSerializer } from './NodeViewSerializer';
 import { scrollToActiveDecoration, scrollToFirstDecoration } from './scrollToDiff';
 export const showDiffPluginKey = new PluginKey('showDiffPlugin');
-export const createPlugin = (config, getIntl, api) => {
+export const createPlugin = (config, getIntl, api, onEditorView) => {
   enforceCustomStepRegisters();
   const nodeViewSerializer = new NodeViewSerializer({});
   const setNodeViewSerializer = editorView => {
@@ -171,6 +171,7 @@ export const createPlugin = (config, getIntl, api) => {
     },
     view(editorView) {
       setNodeViewSerializer(editorView);
+      onEditorView === null || onEditorView === void 0 ? void 0 : onEditorView(editorView);
       let isFirst = true;
       let previousActiveIndex;
       let cancelPendingScrollToDecoration = null;
@@ -221,6 +222,7 @@ export const createPlugin = (config, getIntl, api) => {
           var _cancelPendingScrollT3;
           (_cancelPendingScrollT3 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT3 === void 0 ? void 0 : _cancelPendingScrollT3();
           cancelPendingScrollToDecoration = null;
+          onEditorView === null || onEditorView === void 0 ? void 0 : onEditorView(undefined);
         }
       };
     },

package/dist/es2019/showDiffPlugin.js

@@ -1,93 +1,105 @@
 import React from 'react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { getDeletedWidgets } from './pm-plugins/getDeletedWidgets';
 import { getScrollableDecorations } from './pm-plugins/getScrollableDecorations';
 import { createPlugin, showDiffPluginKey } from './pm-plugins/main';
 import { IndicatorBarContentComponent } from './ui/IndicatorBar/IndicatorBarContentComponent';
 export const showDiffPlugin = ({
   api,
   config
-}) => ({
-  name: 'showDiff',
-  commands: {
-    showDiff: params => ({
-      tr
-    }) => {
-      if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-        var _api$userIntent;
-        api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('viewingDiff')({
-          tr
-        });
-      }
-      return tr.setMeta(showDiffPluginKey, {
-        ...params,
-        action: 'SHOW_DIFF'
-      });
+}) => {
+  // Captured from the plugin's view lifecycle (see `createPlugin`) so read-only actions can access
+  // the current state without exposing the plugin key to consumers.
+  let editorView;
+  const setEditorView = view => {
+    editorView = view;
+  };
+  return {
+    name: 'showDiff',
+    actions: {
+      getDeletedWidgets: range => editorView ? getDeletedWidgets(editorView.state, range) : []
     },
-    hideDiff: ({
-      tr
-    }) => {
-      if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-        var _api$userIntent2;
-        api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default')({
-          tr
+    commands: {
+      showDiff: params => ({
+        tr
+      }) => {
+        if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+          var _api$userIntent;
+          api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('viewingDiff')({
+            tr
+          });
+        }
+        return tr.setMeta(showDiffPluginKey, {
+          ...params,
+          action: 'SHOW_DIFF'
+        });
+      },
+      hideDiff: ({
+        tr
+      }) => {
+        if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+          var _api$userIntent2;
+          api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default')({
+            tr
+          });
+        }
+        return tr.setMeta(showDiffPluginKey, {
+          steps: [],
+          action: 'HIDE_DIFF'
+        });
+      },
+      scrollToNext: ({
+        tr
+      }) => {
+        return tr.setMeta(showDiffPluginKey, {
+          action: 'SCROLL_TO_NEXT'
+        });
+      },
+      scrollToPrevious: ({
+        tr
+      }) => {
+        return tr.setMeta(showDiffPluginKey, {
+          action: 'SCROLL_TO_PREVIOUS'
         });
       }
-      return tr.setMeta(showDiffPluginKey, {
-        steps: [],
-        action: 'HIDE_DIFF'
-      });
     },
-    scrollToNext: ({
-      tr
-    }) => {
-      return tr.setMeta(showDiffPluginKey, {
-        action: 'SCROLL_TO_NEXT'
-      });
+    pmPlugins() {
+      return [{
+        name: 'showDiffPlugin',
+        plugin: ({
+          getIntl
+        }) => createPlugin(config, getIntl, api, setEditorView)
+      }];
     },
-    scrollToPrevious: ({
-      tr
-    }) => {
-      return tr.setMeta(showDiffPluginKey, {
-        action: 'SCROLL_TO_PREVIOUS'
+    contentComponent: () => {
+      if (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(IndicatorBarContentComponent, {
+        api: api
       });
-    }
-  },
-  pmPlugins() {
-    return [{
-      name: 'showDiffPlugin',
-      plugin: ({
-        getIntl
-      }) => createPlugin(config, getIntl, api)
-    }];
-  },
-  contentComponent: () => {
-    if (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(IndicatorBarContentComponent, {
-      api: api
-    });
-  },
-  getSharedState: editorState => {
-    if (!editorState) {
+    },
+    getSharedState: editorState => {
+      if (!editorState) {
+        return {
+          isDisplayingChanges: false,
+          activeIndex: undefined,
+          ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+            diffDescriptors: []
+          } : {})
+        };
+      }
+      const pluginState = showDiffPluginKey.getState(editorState);
+      const decorationCount = getScrollableDecorations(pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorations, editorState.doc);
       return {
-        isDisplayingChanges: false,
-        activeIndex: undefined,
+        isDisplayingChanges: decorationCount.length > 0,
+        activeIndex: pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex,
+        numberOfChanges: decorationCount.length,
         ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-          diffDescriptors: []
+          diffDescriptors: pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffDescriptors,
+          showIndicators: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showIndicators
         } : {})
       };
     }
-    const pluginState = showDiffPluginKey.getState(editorState);
-    const decorationCount = 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,
-      numberOfChanges: decorationCount.length,
-      ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-        diffDescriptors: pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffDescriptors,
-        showIndicators: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showIndicators
-      } : {})
-    };
-  }
-});
+  };
+};

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

@@ -10,6 +10,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 import isEqual from 'lodash/isEqual';
 import memoizeOne from 'memoize-one';
 import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
+import { isExperimentEnabled } from '@atlaskit/editor-common/deprecated-platform-feature-experiments';
 import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -125,29 +126,52 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
   });
   return decorations;
 };
-var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3) {
-  var state = _ref3.state,
-    pluginState = _ref3.pluginState,
-    nodeViewSerializer = _ref3.nodeViewSerializer,
-    colorScheme = _ref3.colorScheme,
-    intl = _ref3.intl,
-    activeIndexPos = _ref3.activeIndexPos,
-    api = _ref3.api,
-    _ref3$isInverted = _ref3.isInverted,
-    isInverted = _ref3$isInverted === void 0 ? false : _ref3$isInverted,
-    _ref3$diffType = _ref3.diffType,
-    diffType = _ref3$diffType === void 0 ? 'inline' : _ref3$diffType,
-    _ref3$hideDeletedDiff = _ref3.hideDeletedDiffs,
-    hideDeletedDiffs = _ref3$hideDeletedDiff === void 0 ? false : _ref3$hideDeletedDiff,
-    _ref3$hideAddedDiffsU = _ref3.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderlineParam = _ref3$hideAddedDiffsU === void 0 ? false : _ref3$hideAddedDiffsU,
-    _ref3$showIndicators = _ref3.showIndicators,
-    showIndicators = _ref3$showIndicators === void 0 ? false : _ref3$showIndicators,
-    smartThresholds = _ref3.smartThresholds,
-    _ref3$deletedDiffPlac = _ref3.deletedDiffPlacement,
-    deletedDiffPlacement = _ref3$deletedDiffPlac === void 0 ? 'top' : _ref3$deletedDiffPlac,
-    _ref3$inlineDeletedDi = _ref3.inlineDeletedDiffPlacement,
-    inlineDeletedDiffPlacement = _ref3$inlineDeletedDi === void 0 ? 'before' : _ref3$inlineDeletedDi;
+/**
+ * Whether deleted content for `change` renders after the new content instead of before it.
+ *
+ * show-diff splits this across two options by change granularity, so the level decides which one
+ * applies:
+ * - node/paragraph-level: `deletedDiffPlacement` (default `'top'`). Pure deletions are promoted to
+ *   node level, so they are governed here too.
+ * - inline/sentence-level: `inlineDeletedDiffPlacement` (default `'before'`).
+ *
+ * Callers are responsible for the `smart` diffType and gate checks.
+ */
+export var isDeletedContentPlacedBelow = function isDeletedContentPlacedBelow(_ref3) {
+  var change = _ref3.change,
+    deletedDiffPlacement = _ref3.deletedDiffPlacement,
+    inlineDeletedDiffPlacement = _ref3.inlineDeletedDiffPlacement;
+  var level = smartChangeLevel(change);
+  if (level === 'node' || level === 'paragraph') {
+    return deletedDiffPlacement === 'bottom';
+  }
+
+  // Inline-level (undefined) and sentence-level changes.
+  return inlineDeletedDiffPlacement === 'after';
+};
+var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref4) {
+  var state = _ref4.state,
+    pluginState = _ref4.pluginState,
+    nodeViewSerializer = _ref4.nodeViewSerializer,
+    colorScheme = _ref4.colorScheme,
+    intl = _ref4.intl,
+    activeIndexPos = _ref4.activeIndexPos,
+    api = _ref4.api,
+    _ref4$isInverted = _ref4.isInverted,
+    isInverted = _ref4$isInverted === void 0 ? false : _ref4$isInverted,
+    _ref4$diffType = _ref4.diffType,
+    diffType = _ref4$diffType === void 0 ? 'inline' : _ref4$diffType,
+    _ref4$hideDeletedDiff = _ref4.hideDeletedDiffs,
+    hideDeletedDiffs = _ref4$hideDeletedDiff === void 0 ? false : _ref4$hideDeletedDiff,
+    _ref4$hideAddedDiffsU = _ref4.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderlineParam = _ref4$hideAddedDiffsU === void 0 ? false : _ref4$hideAddedDiffsU,
+    _ref4$showIndicators = _ref4.showIndicators,
+    showIndicators = _ref4$showIndicators === void 0 ? false : _ref4$showIndicators,
+    smartThresholds = _ref4.smartThresholds,
+    _ref4$deletedDiffPlac = _ref4.deletedDiffPlacement,
+    deletedDiffPlacement = _ref4$deletedDiffPlac === void 0 ? 'top' : _ref4$deletedDiffPlac,
+    _ref4$inlineDeletedDi = _ref4.inlineDeletedDiffPlacement,
+    inlineDeletedDiffPlacement = _ref4$inlineDeletedDi === void 0 ? 'before' : _ref4$inlineDeletedDi;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps,
     isDisplayingChanges = pluginState.isDisplayingChanges;
@@ -232,6 +256,15 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
   var isInserted = !isInverted;
   var createDecorationsForChange = function createDecorationsForChange(change, showGranularWithBlock) {
     var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
+
+    // Hoisted because it decides BOTH where the deleted widget is anchored and — since the
+    // widget pins whichever end of the range it sits at — how the indicator anchors below are
+    // allowed to move.
+    var isDeletedWidgetBelow = diffType === 'smart' && fg('platform_editor_ai_smart_diff') && isDeletedContentPlacedBelow({
+      change: change,
+      deletedDiffPlacement: deletedDiffPlacement,
+      inlineDeletedDiffPlacement: inlineDeletedDiffPlacement
+    });
     if (change.inserted.length > 0) {
       // shouldHideDeleted for block/node decorations: suppressed when isInverted + hideDeletedDiffs,
       // or when showGranularWithBlock (block reference widget is shown instead).
@@ -276,7 +309,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
               shouldHideDeleted: shouldHideDeleted,
               showIndicators: showIndicators,
               hideAddedDiffsUnderline: hideAddedDiffsUnderline,
-              hasDeletedWidget: willRenderDeletedWidget
+              hasDeletedWidget: willRenderDeletedWidget,
+              isDeletedWidgetBelow: isDeletedWidgetBelow
             }))));
           }
         } catch (err) {
@@ -296,7 +330,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
           shouldHideDeleted: shouldHideDeleted,
           showIndicators: showIndicators,
           hideAddedDiffsUnderline: hideAddedDiffsUnderline,
-          hasDeletedWidget: willRenderDeletedWidget
+          hasDeletedWidget: willRenderDeletedWidget,
+          isDeletedWidgetBelow: isDeletedWidgetBelow
         }))));
       }
       decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(_objectSpread(_objectSpread({
@@ -329,19 +364,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
           isInserted: !isInserted,
           diffType: diffType,
           hideAddedDiffsUnderline: hideAddedDiffsUnderline,
-          // For `smart` changes, optionally render the deleted content after the new
-          // content (gray + strikethrough) instead of before it. Two independent
-          // controls, split by change level:
-          // - node/paragraph-level: `deletedDiffPlacement` (default `'top'`).
-          // - inline/sentence-level: `inlineDeletedDiffPlacement` (default `'before'`).
-          placeBelow: diffType === 'smart' && fg('platform_editor_ai_smart_diff') && function () {
-            var level = smartChangeLevel(change);
-            if (level === 'node' || level === 'paragraph') {
-              return deletedDiffPlacement === 'bottom';
-            }
-            // Inline-level (undefined) and sentence-level changes.
-            return inlineDeletedDiffPlacement === 'after';
-          }()
+          placeBelow: isDeletedWidgetBelow
         }), {}, {
           showIndicators: showIndicators
         }))));
@@ -355,9 +378,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     // getChanges returns a flat Change[] with no per-step grouping, making this count impossible
     // to derive after the fact without re-introducing per-change metadata.
     var stepChanges = getStepChanges(originalDoc, steps);
-    stepChanges.forEach(function (_ref4) {
-      var isGranular = _ref4.isGranular,
-        stepChangeList = _ref4.changes;
+    stepChanges.forEach(function (_ref5) {
+      var isGranular = _ref5.isGranular,
+        stepChangeList = _ref5.changes;
       var granularCount = isGranular ? stepChangeList.length : 0;
 
       // Calculate the average ratio of changed content on both A (original) and B (new)
@@ -443,7 +466,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     if (change.isInline) {
       // Inline nodes (e.g. date, emoji, mention, status) need an inline decoration rather than a block decoration
       var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
-      var isAtomicInlineNodeFlag = expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true);
+      var isAtomicInlineNodeFlag = isExperimentEnabled('platform_editor_improve_inline_diffs', function () {
+        return expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true);
+      });
       decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration({
         change: change,
         colorScheme: colorScheme,
@@ -458,7 +483,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       })));
       // If we have the original node position, also render the old node as a "deleted" widget
       // so the user can see what it looked like before the change.
-      if (change.fromA !== undefined && change.toA !== undefined && expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) {
+      if (change.fromA !== undefined && change.toA !== undefined && isExperimentEnabled('platform_editor_improve_inline_diffs', function () {
+        return expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true);
+      })) {
         decorations.push.apply(decorations, _toConsumableArray(createNodeChangedDecorationWidget({
           change: {
             fromA: change.fromA,
@@ -497,42 +524,42 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
 };
 export var calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner,
 // Cache results unless relevant inputs change
-function (_ref5, _ref6) {
-  var _ref0;
-  var _ref7 = _slicedToArray(_ref5, 1),
-    _ref7$ = _ref7[0],
-    pluginState = _ref7$.pluginState,
-    state = _ref7$.state,
-    colorScheme = _ref7$.colorScheme,
-    intl = _ref7$.intl,
-    activeIndexPos = _ref7$.activeIndexPos,
-    isInverted = _ref7$.isInverted,
-    diffType = _ref7$.diffType,
-    hideDeletedDiffs = _ref7$.hideDeletedDiffs,
-    hideAddedDiffsUnderline = _ref7$.hideAddedDiffsUnderline,
-    showIndicators = _ref7$.showIndicators,
-    smartThresholds = _ref7$.smartThresholds,
-    deletedDiffPlacement = _ref7$.deletedDiffPlacement,
-    inlineDeletedDiffPlacement = _ref7$.inlineDeletedDiffPlacement;
+function (_ref6, _ref7) {
+  var _ref1;
   var _ref8 = _slicedToArray(_ref6, 1),
     _ref8$ = _ref8[0],
-    lastPluginState = _ref8$.pluginState,
-    lastState = _ref8$.state,
-    lastColorScheme = _ref8$.colorScheme,
-    lastIntl = _ref8$.intl,
-    lastActiveIndexPos = _ref8$.activeIndexPos,
-    lastIsInverted = _ref8$.isInverted,
-    lastDiffType = _ref8$.diffType,
-    lastHideDeletedDiffs = _ref8$.hideDeletedDiffs,
-    lastHideAddedDiffsUnderline = _ref8$.hideAddedDiffsUnderline,
-    lastShowIndicators = _ref8$.showIndicators,
-    lastSmartThresholds = _ref8$.smartThresholds,
-    lastDeletedDiffPlacement = _ref8$.deletedDiffPlacement,
-    lastInlineDeletedDiffPlacement = _ref8$.inlineDeletedDiffPlacement;
+    pluginState = _ref8$.pluginState,
+    state = _ref8$.state,
+    colorScheme = _ref8$.colorScheme,
+    intl = _ref8$.intl,
+    activeIndexPos = _ref8$.activeIndexPos,
+    isInverted = _ref8$.isInverted,
+    diffType = _ref8$.diffType,
+    hideDeletedDiffs = _ref8$.hideDeletedDiffs,
+    hideAddedDiffsUnderline = _ref8$.hideAddedDiffsUnderline,
+    showIndicators = _ref8$.showIndicators,
+    smartThresholds = _ref8$.smartThresholds,
+    deletedDiffPlacement = _ref8$.deletedDiffPlacement,
+    inlineDeletedDiffPlacement = _ref8$.inlineDeletedDiffPlacement;
+  var _ref9 = _slicedToArray(_ref7, 1),
+    _ref9$ = _ref9[0],
+    lastPluginState = _ref9$.pluginState,
+    lastState = _ref9$.state,
+    lastColorScheme = _ref9$.colorScheme,
+    lastIntl = _ref9$.intl,
+    lastActiveIndexPos = _ref9$.activeIndexPos,
+    lastIsInverted = _ref9$.isInverted,
+    lastDiffType = _ref9$.diffType,
+    lastHideDeletedDiffs = _ref9$.hideDeletedDiffs,
+    lastHideAddedDiffsUnderline = _ref9$.hideAddedDiffsUnderline,
+    lastShowIndicators = _ref9$.showIndicators,
+    lastSmartThresholds = _ref9$.smartThresholds,
+    lastDeletedDiffPlacement = _ref9$.deletedDiffPlacement,
+    lastInlineDeletedDiffPlacement = _ref9$.inlineDeletedDiffPlacement;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
   if (isExtendedEnabled(diffType)) {
-    var _ref9;
-    return (_ref9 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && isEqual(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement && inlineDeletedDiffPlacement === lastInlineDeletedDiffPlacement) !== null && _ref9 !== void 0 ? _ref9 : false;
+    var _ref0;
+    return (_ref0 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && isEqual(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement && inlineDeletedDiffPlacement === lastInlineDeletedDiffPlacement) !== null && _ref0 !== void 0 ? _ref0 : false;
   }
-  return (_ref0 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref0 !== void 0 ? _ref0 : false;
+  return (_ref1 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref1 !== void 0 ? _ref1 : false;
 });

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

@@ -48,7 +48,9 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     hideAddedDiffsUnderline = _ref$hideAddedDiffsUn === void 0 ? false : _ref$hideAddedDiffsUn,
     inlineNodeName = _ref.inlineNodeName,
     _ref$hasDeletedWidget = _ref.hasDeletedWidget,
-    hasDeletedWidget = _ref$hasDeletedWidget === void 0 ? false : _ref$hasDeletedWidget;
+    hasDeletedWidget = _ref$hasDeletedWidget === void 0 ? false : _ref$hasDeletedWidget,
+    _ref$isDeletedWidgetB = _ref.isDeletedWidgetBelow,
+    isDeletedWidgetBelow = _ref$isDeletedWidgetB === void 0 ? false : _ref$isDeletedWidgetB;
   var diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
     return [Decoration.inline(change.fromB, change.toB, {
@@ -104,14 +106,23 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     // bar doesn't extend into the preceding block's margin.
     // Skip when the deleted-content widget is rendered — the anchor must
     // stay at the boundary to keep the indicator continuous.
+    //
+    // The widget only pins the end of the range it is anchored to. It sits at `change.fromB`
+    // by default, but `deletedDiffPlacement: 'bottom'` / `inlineDeletedDiffPlacement: 'after'`
+    // move it to `change.toB` so the deleted content reads after the added content. In that
+    // case the `from` anchor has no widget beside it any more and must be adjusted inward
+    // again, otherwise the over-long indicator bar that CCI-18224 fixed comes back.
     var anchorFrom = change.fromB;
     var anchorTo = change.toB;
-    if (!hasDeletedWidget) {
-      var _$from$nodeAfter, _$to$nodeBefore;
+    if (!hasDeletedWidget || isDeletedWidgetBelow) {
+      var _$from$nodeAfter;
       var $from = doc.resolve(anchorFrom);
       if (!$from.parent.inlineContent && (_$from$nodeAfter = $from.nodeAfter) !== null && _$from$nodeAfter !== void 0 && _$from$nodeAfter.isTextblock) {
         anchorFrom = anchorFrom + 1;
       }
+    }
+    if (!hasDeletedWidget) {
+      var _$to$nodeBefore;
       var $to = doc.resolve(anchorTo);
       if (!$to.parent.inlineContent && (_$to$nodeBefore = $to.nodeBefore) !== null && _$to$nodeBefore !== void 0 && _$to$nodeBefore.isTextblock) {
         anchorTo = anchorTo - 1;