@atlaskit/editor-plugin-show-diff 10.0.1 → 10.1.0

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

@@ -0,0 +1,203 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { buildAnchorDecorationKey, buildAnchorDecorationSpec, AnchorDocMarginKey, AnchorTypeKey } from './decorationKeys';
+var SIDE = 1;
+var findPosAfterLastChild = function findPosAfterLastChild(node, nodeStart) {
+  if (!node) {
+    return undefined;
+  }
+  var lastChild = node.lastChild;
+  if (!lastChild) {
+    return undefined;
+  }
+  var lastChildStart = nodeStart + node.content.size - lastChild.nodeSize;
+  return lastChildStart + lastChild.nodeSize;
+};
+
+/**
+ * Handles edge cases for block nodes whose inline content can exceed the doc
+ * margin (tables, layouts, expands). Returns an adjusted position to use as
+ * the left anchor, or `undefined` when no adjustment is needed.
+ */
+var edgeCases = function edgeCases(doc, from) {
+  var $from = doc.resolve(from);
+  var docLevelNode = $from.node(1);
+  if (!docLevelNode) {
+    return undefined;
+  }
+  switch (docLevelNode.type.name) {
+    /**
+     * For resizable blocks, inline content can exceed the doc margin.
+     * The widgets need to be placed inside the block as resizing the block will
+     * exceed the block container :')
+     */
+    case 'table':
+      {
+        var lastRow = docLevelNode.lastChild;
+        if (!lastRow) {
+          return undefined;
+        }
+        var lastRowStart = $from.start(1) + docLevelNode.content.size - lastRow.nodeSize;
+        var firstCellOfLastRow = lastRow.firstChild;
+        var tableAnchorPos = findPosAfterLastChild(firstCellOfLastRow, lastRowStart + 1);
+        if (tableAnchorPos === undefined) {
+          return undefined;
+        }
+        return {
+          /**
+           * We use the last row because the first row could be a sticky header -
+           * when it becomes sticky the anchor won't be defined since it will be rendered
+           * outside of the context
+           */
+          pos: tableAnchorPos,
+          leftMargin: "var(--ds-space-negative-025, -2px)",
+          side: -1
+        };
+      }
+    case 'expand':
+      {
+        var expandAnchorPos = findPosAfterLastChild(docLevelNode, $from.start(1));
+        if (expandAnchorPos === undefined) {
+          return undefined;
+        }
+        return {
+          pos: expandAnchorPos,
+          leftMargin: "var(--ds-space-0, 0px)",
+          side: -1
+        };
+      }
+    case 'layoutSection':
+      {
+        var firstLayoutColumn = docLevelNode.firstChild;
+        var layoutAnchorPos = findPosAfterLastChild(firstLayoutColumn, $from.start(1) + 1);
+        if (layoutAnchorPos === undefined) {
+          return undefined;
+        }
+        return {
+          pos: layoutAnchorPos,
+          leftMargin: "var(--ds-space-negative-025, -2px)",
+          side: 1
+        };
+      }
+    default:
+      return undefined;
+  }
+};
+
+/**
+ * Create a widget that marks the start of the doc margin.
+ * This is used to determine the position of the inline indicators
+ * when the inline content exceeds the doc margin.
+ */
+export var createDocMarginAnchorWidget = function createDocMarginAnchorWidget() {
+  return Decoration.widget(0, function () {
+    var span = document.createElement('span');
+    span.style.setProperty('anchor-name', "--".concat(AnchorDocMarginKey));
+    return span;
+  }, buildAnchorDecorationSpec({
+    anchorType: AnchorTypeKey.docMargin,
+    side: SIDE
+  }));
+};
+
+/**
+ * Creates an invisible left anchor widget for a diff inside a resizable block
+ * node (table, layout, expand), whose inline content can exceed the doc margin.
+ * Resolves the edge-case position from `doc`/`from`; returns `undefined` when
+ * the diff is not inside such a node and no left anchor is needed.
+ *
+ * The span is given an `anchor-name` (keyed by `diffId`) and positioned in the
+ * doc margin so the `IndicatorBar` can align its left edge against it via CSS
+ * anchor positioning. Shared by inline and node (widget) diff decorations.
+ */
+export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
+  var doc = _ref.doc,
+    from = _ref.from,
+    diffId = _ref.diffId;
+  var edgeCase = edgeCases(doc, from);
+  if (edgeCase === undefined) {
+    return undefined;
+  }
+  var leftAnchorKey = buildAnchorDecorationKey({
+    diffId: diffId,
+    anchorType: AnchorTypeKey.left
+  });
+  return Decoration.widget(edgeCase.pos, function () {
+    var span = document.createElement('span');
+    span.style.setProperty('anchor-name', "--".concat(leftAnchorKey));
+    span.style.setProperty('position', 'absolute');
+    span.style.setProperty('left', edgeCase.leftMargin);
+    return span;
+  }, buildAnchorDecorationSpec({
+    diffId: diffId,
+    anchorType: AnchorTypeKey.left,
+    side: edgeCase.side * SIDE
+  }));
+};
+var isFullNodeRange = function isFullNodeRange(doc, from, to) {
+  var matchesFullNodeRange = false;
+  doc.nodesBetween(from, to, function (node, pos) {
+    if (pos === from && pos + node.nodeSize === to) {
+      matchesFullNodeRange = true;
+      return false;
+    }
+    return true;
+  });
+  return matchesFullNodeRange;
+};
+/**
+ * Creates invisible anchor widgets for a single inline diff range so that the
+ * `IndicatorBar` can use CSS anchor positioning to align itself with the diff.
+ *
+ * - A `from` anchor is placed at the start of the range (top of the bar).
+ * - A `to` anchor is placed at the end of the range (bottom of the bar).
+ * - An optional `left` anchor is placed before the first textblock when the
+ *   diff is inside a resizable block node (table, layout, expand).
+ */
+export var createInlineIndicatorAnchorWidgets = function createInlineIndicatorAnchorWidgets(_ref2) {
+  var doc = _ref2.doc,
+    from = _ref2.from,
+    to = _ref2.to,
+    diffId = _ref2.diffId;
+  if (isFullNodeRange(doc, from, to)) {
+    return [];
+  }
+  var leftAnchor = createLeftAnchorWidget({
+    doc: doc,
+    from: from,
+    diffId: diffId
+  });
+  var maybeLeftAnchor = leftAnchor ? [leftAnchor] : [];
+
+  /**
+   * Two widgets mark the start and end of the inline range so the
+   * IndicatorBar can determine top/bottom even when the decoration
+   * spans multiple blocks.
+   */
+  var fromAnchorKey = buildAnchorDecorationKey({
+    diffId: diffId,
+    anchorType: AnchorTypeKey.from
+  });
+  var fromWidget = Decoration.widget(from, function () {
+    var span = document.createElement('span');
+    span.style.setProperty('anchor-name', "--".concat(fromAnchorKey));
+    return span;
+  }, buildAnchorDecorationSpec({
+    diffId: diffId,
+    anchorType: AnchorTypeKey.from,
+    side: 1
+  }));
+  var toAnchorKey = buildAnchorDecorationKey({
+    diffId: diffId,
+    anchorType: AnchorTypeKey.to
+  });
+  var toWidget = Decoration.widget(to, function () {
+    var span = document.createElement('span');
+    span.style.setProperty('anchor-name', "--".concat(toAnchorKey));
+    return span;
+  }, buildAnchorDecorationSpec({
+    diffId: diffId,
+    anchorType: AnchorTypeKey.to,
+    side: -1
+  }));
+  return [fromWidget, toWidget].concat(maybeLeftAnchor);
+};

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

@@ -1,8 +1,10 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editingStyle, editingStyleExtended, editingStyleActive, editingStyleActiveExtended, deletedContentStyle, deletedContentStyleActive, deletedInlineContentStyleExtended } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle } from './colorSchemes/traditional';
+import { createInlineIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
 import { buildDiffDecorationSpec } from './decorationKeys';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
@@ -22,7 +24,10 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     _ref$isInserted = _ref.isInserted,
     isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
     _ref$shouldHideDelete = _ref.shouldHideDeleted,
-    shouldHideDeleted = _ref$shouldHideDelete === void 0 ? false : _ref$shouldHideDelete;
+    shouldHideDeleted = _ref$shouldHideDelete === void 0 ? false : _ref$shouldHideDelete,
+    _ref$showIndicators = _ref.showIndicators,
+    showIndicators = _ref$showIndicators === void 0 ? false : _ref$showIndicators,
+    doc = _ref.doc;
   var diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
     return [Decoration.inline(change.fromB, change.toB, {
@@ -61,7 +66,7 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
       style = isActive ? editingStyleActive : editingStyle;
     }
   }
-  return [Decoration.inline(change.fromB, change.toB, {
+  var decorations = [Decoration.inline(change.fromB, change.toB, {
     style: style,
     'data-testid': 'show-diff-changed-decoration'
   }, buildDiffDecorationSpec({
@@ -69,4 +74,13 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     diffId: diffId,
     isActive: isActive
   }))];
+  if (showIndicators && doc && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    decorations.push.apply(decorations, _toConsumableArray(createInlineIndicatorAnchorWidgets({
+      doc: doc,
+      from: change.fromB,
+      to: change.toB,
+      diffId: diffId
+    })));
+  }
+  return decorations;
 };

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

@@ -7,8 +7,9 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editingStyle, editingStyleExtended, editingStyleActive, editingStyleActiveExtended, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
+import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
-import { buildDiffDecorationSpec } from './decorationKeys';
+import { buildDiffDecorationSpec, buildAnchorDecorationKey } from './decorationKeys';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { wrapBlockNodeView } from './utils/wrapBlockNodeView';
 var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
@@ -107,7 +108,9 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     intl = _ref2.intl,
     activeIndexPos = _ref2.activeIndexPos,
     _ref2$isInserted = _ref2.isInserted,
-    isInserted = _ref2$isInserted === void 0 ? false : _ref2$isInserted;
+    isInserted = _ref2$isInserted === void 0 ? false : _ref2$isInserted,
+    _ref2$showIndicators = _ref2.showIndicators,
+    showIndicators = _ref2$showIndicators === void 0 ? false : _ref2$showIndicators;
   var slice = doc.slice(change.fromA, change.toA);
   var shouldSkipDeletedEmptyParagraphDecoration = !isInserted && (slice === null || slice === void 0 || (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.childCount) === 1 && (slice === null || slice === void 0 || (_slice$content2 = slice.content) === null || _slice$content2 === void 0 || (_slice$content2 = _slice$content2.firstChild) === null || _slice$content2 === void 0 ? void 0 : _slice$content2.type.name) === 'paragraph' && (slice === null || slice === void 0 || (_slice$content3 = slice.content) === null || _slice$content3 === void 0 || (_slice$content3 = _slice$content3.firstChild) === null || _slice$content3 === void 0 ? void 0 : _slice$content3.content.size) === 0;
   // Widget decoration used for deletions as the content is not in the document
@@ -144,6 +147,8 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
 
   // For non-table content, use the existing span wrapper approach
   var dom = document.createElement('span');
+  var diffId = crypto.randomUUID();
+  var decorations = [];
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
@@ -249,8 +254,19 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
-  var diffId = crypto.randomUUID();
-  var decorations = [];
+  if (showIndicators && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    var leftAnchor = createLeftAnchorWidget({
+      doc: newDoc,
+      from: safeInsertPos,
+      diffId: diffId
+    });
+    dom.style.setProperty('anchor-name', "--".concat(buildAnchorDecorationKey({
+      diffId: diffId
+    })));
+    if (leftAnchor) {
+      decorations.push(leftAnchor);
+    }
+  }
   decorations.push(Decoration.widget(safeInsertPos, dom, buildDiffDecorationSpec(_objectSpread({
     decorationType: 'widget',
     diffId: diffId,

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

@@ -1,45 +1,61 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 /**
- * Shared prefix for every decoration key produced by the show-diff plugin.
- * All keys derive from this, so the full set of plugin decorations can be
- * identified by this single prefix.
+ * Decoration families produced by the show-diff plugin.
+ * Each family owns its own key space and spec shape.
  */
-var DIFF_DECORATION_FAMILY = 'diff';
+export var DecorationFamily = {
+  diff: 'diff',
+  anchor: 'anchor'
+};
+export var AnchorTypeKey = {
+  from: 'from',
+  to: 'to',
+  left: 'left',
+  docMargin: 'doc-margin'
+};
 /**
- * The kinds of decoration the show-diff plugin produces. Each value is the
- * leading segment of the generated key, so a decoration's kind can be matched
- * with `key?.startsWith(DiffDecorationKey.inline)` etc.
+ * The diff-decoration kinds produced by the show-diff plugin. Each value is
+ * the leading segment of the generated key, so a diff decoration's kind can be
+ * matched with `key?.startsWith(DiffDecorationKey.inline)` etc.
  */
 export var DiffDecorationKey = {
-  inline: "".concat(DIFF_DECORATION_FAMILY, "-inline"),
-  block: "".concat(DIFF_DECORATION_FAMILY, "-block"),
-  widget: "".concat(DIFF_DECORATION_FAMILY, "-widget")
+  inline: "".concat(DecorationFamily.diff, "-inline"),
+  block: "".concat(DecorationFamily.diff, "-block"),
+  widget: "".concat(DecorationFamily.diff, "-widget")
+};
+export var AnchorDocMarginKey = "".concat(DecorationFamily.anchor, "-").concat(AnchorTypeKey.docMargin);
+export var buildAnchorDecorationKey = function buildAnchorDecorationKey(_ref) {
+  var diffId = _ref.diffId,
+    anchorType = _ref.anchorType;
+  return "".concat(DecorationFamily.anchor, "-").concat(diffId).concat(anchorType ? "-".concat(anchorType) : '');
 };
 
 /**
- * Builds a decoration key in the form `{type}-{active|inactive}`
- * (e.g. `diff-inline-active`).
+ * Builds a diff decoration key. The extended experience includes the `diffId`
+ * in the key so independently rendered decorations for the same type remain
+ * distinguishable.
  */
-export var buildDiffDecorationKey = function buildDiffDecorationKey(_ref) {
-  var decorationKeyPrefix = _ref.decorationKeyPrefix,
-    isActive = _ref.isActive,
-    diffId = _ref.diffId;
+export var buildDiffDecorationKey = function buildDiffDecorationKey(_ref2) {
+  var decorationKeyPrefix = _ref2.decorationKeyPrefix,
+    isActive = _ref2.isActive,
+    diffId = _ref2.diffId;
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     return "".concat(decorationKeyPrefix, "-").concat(diffId, "-").concat(isActive ? 'active' : 'inactive');
   }
   return isActive !== undefined ? "".concat(decorationKeyPrefix, "-").concat(isActive ? 'active' : 'inactive') : decorationKeyPrefix;
 };
-export var buildDiffDecorationSpec = function buildDiffDecorationSpec(_ref2) {
-  var decorationType = _ref2.decorationType,
-    diffId = _ref2.diffId,
-    isActive = _ref2.isActive,
-    nodeName = _ref2.nodeName,
-    side = _ref2.side;
+export var buildDiffDecorationSpec = function buildDiffDecorationSpec(_ref3) {
+  var decorationType = _ref3.decorationType,
+    diffId = _ref3.diffId,
+    isActive = _ref3.isActive,
+    nodeName = _ref3.nodeName,
+    side = _ref3.side;
   return _objectSpread(_objectSpread({
-    decorationFamily: DIFF_DECORATION_FAMILY,
+    decorationFamily: DecorationFamily.diff,
     decorationType: decorationType,
     diffId: diffId,
     key: buildDiffDecorationKey({
@@ -53,11 +69,46 @@ export var buildDiffDecorationSpec = function buildDiffDecorationSpec(_ref2) {
     side: side
   } : {});
 };
+export function buildAnchorDecorationSpec(_ref4) {
+  var anchorType = _ref4.anchorType,
+    diffId = _ref4.diffId,
+    side = _ref4.side;
+  if (anchorType === AnchorTypeKey.docMargin) {
+    return _objectSpread({
+      decorationFamily: DecorationFamily.anchor,
+      anchorType: anchorType,
+      key: AnchorDocMarginKey
+    }, side !== undefined ? {
+      side: side
+    } : {});
+  }
+  if (!diffId) {
+    throw new Error("diffId is required for anchor type \"".concat(anchorType, "\""));
+  }
+  return _objectSpread({
+    decorationFamily: DecorationFamily.anchor,
+    anchorType: anchorType,
+    diffId: diffId,
+    key: buildAnchorDecorationKey({
+      diffId: diffId,
+      anchorType: anchorType
+    })
+  }, side !== undefined ? {
+    side: side
+  } : {});
+}
+export var isDiffDecorationSpec = function isDiffDecorationSpec(spec) {
+  return Boolean(spec && _typeof(spec) === 'object' && 'decorationFamily' in spec && spec.decorationFamily === DecorationFamily.diff);
+};
+export var isAnchorDecorationSpec = function isAnchorDecorationSpec(spec) {
+  return Boolean(spec && _typeof(spec) === 'object' && 'decorationFamily' in spec && spec.decorationFamily === DecorationFamily.anchor);
+};
+export var isDiffDecoration = function isDiffDecoration(decoration) {
+  return isDiffDecorationSpec(decoration.spec);
+};
 export var extractDiffDescriptors = function extractDiffDescriptors(decorations) {
-  return decorations.find(undefined, undefined, function (spec) {
-    return spec.decorationFamily === 'diff';
-  }).map(function (_ref3) {
-    var spec = _ref3.spec;
+  return decorations.find(undefined, undefined, isDiffDecorationSpec).filter(isDiffDecoration).map(function (_ref5) {
+    var spec = _ref5.spec;
     return {
       id: spec.diffId,
       type: spec.decorationType

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

@@ -1,5 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import { DiffDecorationKey } from './decorations/decorationKeys';
+import _typeof from "@babel/runtime/helpers/typeof";
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { DiffDecorationKey, isDiffDecoration, isDiffDecorationSpec } from './decorations/decorationKeys';
 
 /**
  * True if `fragment` contains at least one inline node (text, hardBreak, emoji, mention, etc.).
@@ -38,6 +40,9 @@ export function isInlineDiffDecorationRenderableInDoc(doc, from, to) {
 function isRangeFullyInside(range1Start, range1End, range2Start, range2End) {
   return range2Start <= range1Start && range1End <= range2End;
 }
+function specHasDiffKeyPrefix(spec, keyPrefix) {
+  return Boolean(spec && _typeof(spec) === 'object' && 'key' in spec && typeof spec.key === 'string' && spec.key.startsWith(keyPrefix));
+}
 
 /**
  * Gets scrollable decorations from a DecorationSet, filtering out overlapping decorations
@@ -61,43 +66,47 @@ export var getScrollableDecorations = function getScrollableDecorations(set, doc
   if (!set) {
     return [];
   }
+  var isBlockDecoration = function isBlockDecoration(decoration) {
+    var _decoration$spec$key$, _decoration$spec;
+    return expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isDiffDecoration(decoration) && decoration.spec.decorationType === 'block' : (_decoration$spec$key$ = (_decoration$spec = decoration.spec) === null || _decoration$spec === void 0 || (_decoration$spec = _decoration$spec.key) === null || _decoration$spec === void 0 ? void 0 : _decoration$spec.startsWith(DiffDecorationKey.block)) !== null && _decoration$spec$key$ !== void 0 ? _decoration$spec$key$ : false;
+  };
+  var isInlineDecoration = function isInlineDecoration(decoration) {
+    var _decoration$spec$key$2, _decoration$spec2;
+    return expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isDiffDecoration(decoration) && decoration.spec.decorationType === 'inline' : (_decoration$spec$key$2 = (_decoration$spec2 = decoration.spec) === null || _decoration$spec2 === void 0 || (_decoration$spec2 = _decoration$spec2.key) === null || _decoration$spec2 === void 0 ? void 0 : _decoration$spec2.startsWith(DiffDecorationKey.inline)) !== null && _decoration$spec$key$2 !== void 0 ? _decoration$spec$key$2 : false;
+  };
+  var isWidgetDecoration = function isWidgetDecoration(decoration) {
+    var _decoration$spec$key$3, _decoration$spec3;
+    return expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isDiffDecoration(decoration) && decoration.spec.decorationType === 'widget' : (_decoration$spec$key$3 = (_decoration$spec3 = decoration.spec) === null || _decoration$spec3 === void 0 || (_decoration$spec3 = _decoration$spec3.key) === null || _decoration$spec3 === void 0 ? void 0 : _decoration$spec3.startsWith(DiffDecorationKey.widget)) !== null && _decoration$spec$key$3 !== void 0 ? _decoration$spec$key$3 : false;
+  };
   var seenBlockKeys = new Set();
-  var allDecorations = set.find(undefined, undefined, function (spec) {
-    var _spec$key, _spec$key2, _spec$key3;
-    return ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith(DiffDecorationKey.inline)) || ((_spec$key2 = spec.key) === null || _spec$key2 === void 0 ? void 0 : _spec$key2.startsWith(DiffDecorationKey.widget)) || ((_spec$key3 = spec.key) === null || _spec$key3 === void 0 ? void 0 : _spec$key3.startsWith(DiffDecorationKey.block));
+  var allDecorations = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? set.find(undefined, undefined, isDiffDecorationSpec) : set.find(undefined, undefined, function (spec) {
+    return specHasDiffKeyPrefix(spec, DiffDecorationKey.inline) || specHasDiffKeyPrefix(spec, DiffDecorationKey.widget) || specHasDiffKeyPrefix(spec, DiffDecorationKey.block);
   });
 
   // First pass: filter out listItem blocks and deduplicates blocks
   var filtered = allDecorations.filter(function (dec) {
-    var _dec$spec, _dec$spec$nodeName, _dec$spec3;
-    if ((_dec$spec = dec.spec) !== null && _dec$spec !== void 0 && (_dec$spec = _dec$spec.key) !== null && _dec$spec !== void 0 && _dec$spec.startsWith(DiffDecorationKey.block)) {
-      var _dec$spec2;
+    if (!isBlockDecoration(dec) && !isInlineDecoration(dec) && !isWidgetDecoration(dec)) {
+      return false;
+    }
+    if (isBlockDecoration(dec)) {
+      var _dec$spec, _dec$spec$nodeName;
       // 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;
+      if (((_dec$spec = dec.spec) === null || _dec$spec === void 0 ? void 0 : _dec$spec.nodeName) === 'listItem') return false;
+      var key = "".concat(dec.from, "-").concat(dec.to, "-").concat((_dec$spec$nodeName = dec.spec.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);
     }
-    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;
   });
 
   // Separate decorations by type for easier processing
-  var blocks = filtered.filter(function (d) {
-    var _d$spec;
-    return (_d$spec = d.spec) === null || _d$spec === void 0 || (_d$spec = _d$spec.key) === null || _d$spec === void 0 ? void 0 : _d$spec.startsWith(DiffDecorationKey.block);
-  });
-  var rawInlines = filtered.filter(function (d) {
-    var _d$spec2;
-    return (_d$spec2 = d.spec) === null || _d$spec2 === void 0 || (_d$spec2 = _d$spec2.key) === null || _d$spec2 === void 0 ? void 0 : _d$spec2.startsWith(DiffDecorationKey.inline);
-  });
+  var blocks = filtered.filter(isBlockDecoration);
+  var rawInlines = filtered.filter(isInlineDecoration);
   var inlines = doc !== undefined ? rawInlines.filter(function (d) {
     return isInlineDiffDecorationRenderableInDoc(doc, d.from, d.to);
   }) : rawInlines;
-  var widgets = filtered.filter(function (d) {
-    var _d$spec3;
-    return (_d$spec3 = d.spec) === null || _d$spec3 === void 0 || (_d$spec3 = _d$spec3.key) === null || _d$spec3 === void 0 ? void 0 : _d$spec3.startsWith(DiffDecorationKey.widget);
-  });
+  var widgets = filtered.filter(isWidgetDecoration);
 
   // Second pass: exclude overlapping decorations
   // Rules:

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

@@ -35,6 +35,7 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
           isInverted: false,
           diffType: 'inline',
           hideDeletedDiffs: false,
+          showIndicators: false,
           diffDescriptors: []
         } : {});
       },
@@ -43,7 +44,7 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
         var newPluginState = currentPluginState;
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
-            var _newPluginState, _newPluginState2, _newPluginState3;
+            var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4;
             // Update the plugin state with the new metadata
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
               isDisplayingChanges: true,
@@ -61,7 +62,8 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
               }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
                 isInverted: (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.isInverted,
                 diffType: (_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.diffType,
-                hideDeletedDiffs: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.hideDeletedDiffs
+                hideDeletedDiffs: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.hideDeletedDiffs,
+                showIndicators: (_newPluginState4 = newPluginState) === null || _newPluginState4 === void 0 ? void 0 : _newPluginState4.showIndicators
               } : {})),
               decorations = _calculateDiffDecorat.decorations,
               diffDescriptors = _calculateDiffDecorat.diffDescriptors;
@@ -120,7 +122,8 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
                 }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
                   isInverted: newPluginState.isInverted,
                   diffType: newPluginState.diffType,
-                  hideDeletedDiffs: newPluginState.hideDeletedDiffs
+                  hideDeletedDiffs: newPluginState.hideDeletedDiffs,
+                  showIndicators: newPluginState.showIndicators
                 } : {})),
                 updatedDecorations = _calculateDiffDecorat2.decorations,
                 updatedDiffDescriptors = _calculateDiffDecorat2.diffDescriptors;
@@ -160,10 +163,9 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
 
           // Scroll to the first decoration when scrollIntoView was requested
           if (pluginState !== null && pluginState !== void 0 && pluginState.scrollIntoView && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-            var _cancelPendingScrollT, _pluginState$decorati;
+            var _cancelPendingScrollT;
             (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 || _cancelPendingScrollT();
-            var allDecorations = ((_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
-            cancelPendingScrollToDecoration = scrollToFirstDecoration(view, allDecorations);
+            cancelPendingScrollToDecoration = scrollToFirstDecoration(view, pluginState.decorations);
 
             // Reset the flag so we don't scroll again on subsequent updates
             view.dispatch(view.state.tr.setMeta(showDiffPluginKey, {

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

@@ -1,4 +1,4 @@
-import { DiffDecorationKey } from './decorations/decorationKeys';
+import { isDiffDecoration, isDiffDecorationSpec } from './decorations/decorationKeys';
 
 /**
  * Extra space above the scrolled-to element so it does not sit flush under the
@@ -41,16 +41,16 @@ function scrollToSelection(node) {
  *
  * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
  */
-export var scrollToFirstDecoration = function scrollToFirstDecoration(view, decorations) {
-  var decoration = decorations[0];
+export var scrollToFirstDecoration = function scrollToFirstDecoration(view, set) {
+  var decoration = set.find(undefined, undefined, isDiffDecorationSpec).find(isDiffDecoration);
   if (!decoration) {
     return function () {};
   }
   var rafId = requestAnimationFrame(function () {
-    var _decoration$spec, _decoration$type;
+    var _decoration$type;
     rafId = null;
     // @ts-expect-error - decoration.type is not typed public API
-    if ((_decoration$spec = decoration.spec) !== null && _decoration$spec !== void 0 && (_decoration$spec = _decoration$spec.key) !== null && _decoration$spec !== void 0 && _decoration$spec.startsWith(DiffDecorationKey.widget) && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
+    if (decoration.spec.decorationType === 'widget' && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
       // @ts-expect-error - decoration.type is not typed public API
       var widgetDom = decoration.type.toDOM;
       // Always scroll to the top of this decoration even if it's in view already
@@ -84,9 +84,8 @@ export var scrollToActiveDecoration = function scrollToActiveDecoration(view, de
     return function () {};
   }
   var rafId = requestAnimationFrame(function () {
-    var _decoration$spec2;
     rafId = null;
-    if ((_decoration$spec2 = decoration.spec) !== null && _decoration$spec2 !== void 0 && (_decoration$spec2 = _decoration$spec2.key) !== null && _decoration$spec2 !== void 0 && _decoration$spec2.startsWith(DiffDecorationKey.widget)) {
+    if (isDiffDecoration(decoration) && decoration.spec.decorationType === 'widget') {
       var _decoration$type2;
       // @ts-expect-error - decoration.type is not typed public API
       var widgetDom = decoration === null || decoration === void 0 || (_decoration$type2 = decoration.type) === null || _decoration$type2 === void 0 ? void 0 : _decoration$type2.toDOM;

package/dist/esm/showDiffPlugin.js

@@ -1,9 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getScrollableDecorations } from './pm-plugins/getScrollableDecorations';
 import { createPlugin, showDiffPluginKey } from './pm-plugins/main';
+import { IndicatorBarContentComponent } from './ui/IndicatorBar/IndicatorBarContentComponent';
 export var showDiffPlugin = function showDiffPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
@@ -59,6 +61,14 @@ export var showDiffPlugin = function showDiffPlugin(_ref) {
         }
       }];
     },
+    contentComponent: function contentComponent() {
+      if (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(IndicatorBarContentComponent, {
+        api: api
+      });
+    },
     getSharedState: function getSharedState(editorState) {
       if (!editorState) {
         return _objectSpread({
@@ -75,7 +85,8 @@ export var showDiffPlugin = function showDiffPlugin(_ref) {
         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
+        diffDescriptors: pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffDescriptors,
+        showIndicators: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showIndicators
       } : {});
     }
   };