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

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.getScrollableDecorations = void 0;
 exports.isInlineDiffDecorationRenderableInDoc = isInlineDiffDecorationRenderableInDoc;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _decorationKeys = require("./decorations/decorationKeys");
 /**
  * True if `fragment` contains at least one inline node (text, hardBreak, emoji, mention, etc.).
@@ -45,6 +47,9 @@ function isInlineDiffDecorationRenderableInDoc(doc, from, to) {
 function isRangeFullyInside(range1Start, range1End, range2Start, range2End) {
   return range2Start <= range1Start && range1End <= range2End;
 }
+function specHasDiffKeyPrefix(spec, keyPrefix) {
+  return Boolean(spec && (0, _typeof2.default)(spec) === 'object' && 'key' in spec && typeof spec.key === 'string' && spec.key.startsWith(keyPrefix));
+}
 
 /**
  * Gets scrollable decorations from a DecorationSet, filtering out overlapping decorations
@@ -68,43 +73,47 @@ var getScrollableDecorations = exports.getScrollableDecorations = function getSc
   if (!set) {
     return [];
   }
+  var isBlockDecoration = function isBlockDecoration(decoration) {
+    var _decoration$spec$key$, _decoration$spec;
+    return (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? (0, _decorationKeys.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(_decorationKeys.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 (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? (0, _decorationKeys.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(_decorationKeys.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 (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? (0, _decorationKeys.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(_decorationKeys.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(_decorationKeys.DiffDecorationKey.inline)) || ((_spec$key2 = spec.key) === null || _spec$key2 === void 0 ? void 0 : _spec$key2.startsWith(_decorationKeys.DiffDecorationKey.widget)) || ((_spec$key3 = spec.key) === null || _spec$key3 === void 0 ? void 0 : _spec$key3.startsWith(_decorationKeys.DiffDecorationKey.block));
+  var allDecorations = (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? set.find(undefined, undefined, _decorationKeys.isDiffDecorationSpec) : set.find(undefined, undefined, function (spec) {
+    return specHasDiffKeyPrefix(spec, _decorationKeys.DiffDecorationKey.inline) || specHasDiffKeyPrefix(spec, _decorationKeys.DiffDecorationKey.widget) || specHasDiffKeyPrefix(spec, _decorationKeys.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(_decorationKeys.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(_decorationKeys.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(_decorationKeys.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(_decorationKeys.DiffDecorationKey.widget);
-  });
+  var widgets = filtered.filter(isWidgetDecoration);
 
   // Second pass: exclude overlapping decorations
   // Rules:

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

@@ -42,6 +42,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
           isInverted: false,
           diffType: 'inline',
           hideDeletedDiffs: false,
+          showIndicators: false,
           diffDescriptors: []
         } : {});
       },
@@ -50,7 +51,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
         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,
@@ -68,7 +69,8 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               }, (0, _expValEquals.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;
@@ -127,7 +129,8 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
                 }, (0, _expValEquals.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;
@@ -167,10 +170,9 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
 
           // Scroll to the first decoration when scrollIntoView was requested
           if (pluginState !== null && pluginState !== void 0 && pluginState.scrollIntoView && (0, _expValEquals.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 = (0, _scrollToDiff.scrollToFirstDecoration)(view, allDecorations);
+            cancelPendingScrollToDecoration = (0, _scrollToDiff.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/cjs/pm-plugins/scrollToDiff.js

@@ -46,16 +46,16 @@ function scrollToSelection(node) {
  *
  * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
  */
-var scrollToFirstDecoration = exports.scrollToFirstDecoration = function scrollToFirstDecoration(view, decorations) {
-  var decoration = decorations[0];
+var scrollToFirstDecoration = exports.scrollToFirstDecoration = function scrollToFirstDecoration(view, set) {
+  var decoration = set.find(undefined, undefined, _decorationKeys.isDiffDecorationSpec).find(_decorationKeys.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(_decorationKeys.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
@@ -89,9 +89,8 @@ var scrollToActiveDecoration = exports.scrollToActiveDecoration = function scrol
     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(_decorationKeys.DiffDecorationKey.widget)) {
+    if ((0, _decorationKeys.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/cjs/showDiffPlugin.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.showDiffPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _getScrollableDecorations = require("./pm-plugins/getScrollableDecorations");
 var _main = require("./pm-plugins/main");
+var _IndicatorBarContentComponent = require("./ui/IndicatorBar/IndicatorBarContentComponent");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var showDiffPlugin = exports.showDiffPlugin = function showDiffPlugin(_ref) {
@@ -66,6 +68,14 @@ var showDiffPlugin = exports.showDiffPlugin = function showDiffPlugin(_ref) {
         }
       }];
     },
+    contentComponent: function contentComponent() {
+      if (!(0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(_IndicatorBarContentComponent.IndicatorBarContentComponent, {
+        api: api
+      });
+    },
     getSharedState: function getSharedState(editorState) {
       if (!editorState) {
         return _objectSpread({
@@ -82,7 +92,8 @@ var showDiffPlugin = exports.showDiffPlugin = function showDiffPlugin(_ref) {
         activeIndex: pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex,
         numberOfChanges: decorationCount.length
       }, (0, _expValEquals.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
       } : {});
     }
   };

package/dist/cjs/ui/IndicatorBar/IndicatorBar.compiled.css

@@ -0,0 +1,9 @@
+
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}._17c61i8t{position-visibility:anchors-valid}
+._18u0mgjw{margin-left:var(--ds-space-negative-200,-1pc)}
+._19pk196n{margin-top:var(--ds-space-negative-075,-6px)}
+._1bsb1l7b{width:3px}
+._bfhkvbh5{background-color:var(--ds-border-information,#357de8)}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
+._otyr196n{margin-bottom:var(--ds-space-negative-075,-6px)}

package/dist/cjs/ui/IndicatorBar/IndicatorBar.js

@@ -0,0 +1,33 @@
+/* IndicatorBar.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IndicatorBar = IndicatorBar;
+require("./IndicatorBar.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _decorationKeys = require("../../pm-plugins/decorations/decorationKeys");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var barStyles = null;
+function IndicatorBar(_ref) {
+  var anchorTop = _ref.anchorTop,
+    anchorBottom = _ref.anchorBottom,
+    anchorLeft = _ref.anchorLeft,
+    anchorLeftFallback = _ref.anchorLeftFallback;
+  var leftAnchors = [anchorLeft, anchorLeftFallback, _decorationKeys.AnchorDocMarginKey].filter(Boolean).map(function (anchor) {
+    return "anchor(--".concat(anchor, " left)");
+  }).join(', ');
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": "diff-indicator-bar",
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      left: "min(".concat(leftAnchors, ")"),
+      top: "anchor(--".concat(anchorTop, " top)"),
+      bottom: "anchor(--".concat(anchorBottom, " bottom)")
+    },
+    className: (0, _runtime.ax)(["_2rko1rr0 _kqswstnw _1bsb1l7b _bfhkvbh5 _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
+  });
+}

package/dist/cjs/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -0,0 +1,87 @@
+/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IndicatorBarContentComponent = void 0;
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _decorationKeys = require("../../pm-plugins/decorations/decorationKeys");
+var _IndicatorBar = require("./IndicatorBar");
+var renderIndicatorBar = function renderIndicatorBar(descriptor) {
+  switch (descriptor.type) {
+    case 'inline':
+      {
+        return /*#__PURE__*/_react.default.createElement(_IndicatorBar.IndicatorBar, {
+          key: descriptor.id,
+          anchorTop: (0, _decorationKeys.buildAnchorDecorationKey)({
+            diffId: descriptor.id,
+            anchorType: _decorationKeys.AnchorTypeKey.from
+          }),
+          anchorBottom: (0, _decorationKeys.buildAnchorDecorationKey)({
+            diffId: descriptor.id,
+            anchorType: _decorationKeys.AnchorTypeKey.to
+          }),
+          anchorLeft: (0, _decorationKeys.buildAnchorDecorationKey)({
+            diffId: descriptor.id,
+            anchorType: _decorationKeys.AnchorTypeKey.left
+          })
+        });
+      }
+    case 'widget':
+      {
+        return /*#__PURE__*/_react.default.createElement(_IndicatorBar.IndicatorBar, {
+          key: descriptor.id,
+          anchorTop: (0, _decorationKeys.buildAnchorDecorationKey)({
+            diffId: descriptor.id
+          }),
+          anchorBottom: (0, _decorationKeys.buildAnchorDecorationKey)({
+            diffId: descriptor.id
+          }),
+          anchorLeft: (0, _decorationKeys.buildAnchorDecorationKey)({
+            diffId: descriptor.id,
+            anchorType: _decorationKeys.AnchorTypeKey.left
+          }),
+          anchorLeftFallback: (0, _decorationKeys.buildAnchorDecorationKey)({
+            diffId: descriptor.id
+          })
+        });
+      }
+    /**
+     * TODO EDITOR-7711:
+     * Support IndicatorBar for block-changed type diffs.
+     */
+    default:
+      return null;
+  }
+};
+
+/**
+ * Renders IndicatorBar elements for each diff ID in the current plugin state.
+ *
+ * This is rendered as a contentComponent so that the IndicatorBar elements
+ * share the same DOM context as their CSS anchor spans, allowing the browser
+ * to resolve anchor-name references correctly.
+ */
+
+var IndicatorBarContentComponent = exports.IndicatorBarContentComponent = function IndicatorBarContentComponent(_ref) {
+  var api = _ref.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['showDiff'], function (state) {
+      var _state$showDiffState, _state$showDiffState2, _state$showDiffState3;
+      return {
+        showIndicators: (_state$showDiffState = state.showDiffState) === null || _state$showDiffState === void 0 ? void 0 : _state$showDiffState.showIndicators,
+        isDisplayingChanges: (_state$showDiffState2 = state.showDiffState) === null || _state$showDiffState2 === void 0 ? void 0 : _state$showDiffState2.isDisplayingChanges,
+        diffDescriptors: (_state$showDiffState3 = state.showDiffState) === null || _state$showDiffState3 === void 0 ? void 0 : _state$showDiffState3.diffDescriptors
+      };
+    }),
+    showIndicators = _useSharedPluginState.showIndicators,
+    isDisplayingChanges = _useSharedPluginState.isDisplayingChanges,
+    diffDescriptors = _useSharedPluginState.diffDescriptors;
+  if (!showIndicators || !isDisplayingChanges || !(diffDescriptors !== null && diffDescriptors !== void 0 && diffDescriptors.length)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, diffDescriptors.map(renderIndicatorBar));
+};

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

@@ -6,6 +6,7 @@ import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { areDocsEqualByBlockStructureAndText } from '../areDocsEqualByBlockStructureAndText';
+import { createDocMarginAnchorWidget } from '../decorations/createAnchorDecorationWidgets';
 import { createBlockChangedDecoration } from '../decorations/createBlockChangedDecoration';
 import { createInlineChangedDecoration } from '../decorations/createInlineChangedDecoration';
 import { createNodeChangedDecorationWidget } from '../decorations/createNodeChangedDecorationWidget';
@@ -77,13 +78,15 @@ const calculateDiffDecorationsInner = ({
   api,
   isInverted = false,
   diffType = 'inline',
-  hideDeletedDiffs = false
+  hideDeletedDiffs = false,
+  showIndicators = false
 }) => {
   const {
     originalDoc,
-    steps
+    steps,
+    isDisplayingChanges
   } = pluginState;
-  if (!originalDoc || !pluginState.isDisplayingChanges) {
+  if (!originalDoc || !isDisplayingChanges) {
     return {
       decorations: DecorationSet.empty,
       diffDescriptors: []
@@ -139,6 +142,13 @@ const calculateDiffDecorationsInner = ({
     steps
   });
   const decorations = [];
+
+  /**
+   * If showIndicators is on, we create an anchor widget here to mark the doc margin.
+   */
+  if (showIndicators && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    decorations.push(createDocMarginAnchorWidget());
+  }
   changes.forEach(change => {
     const isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     // Our default operations are insertions, so it should match the opposite of isInverted.
@@ -147,11 +157,13 @@ const calculateDiffDecorationsInner = ({
       const shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isInverted && hideDeletedDiffs : false;
       decorations.push(...createInlineChangedDecoration({
         change,
+        doc: tr.doc,
         colorScheme,
         isActive,
         ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
           isInserted,
-          shouldHideDeleted
+          shouldHideDeleted,
+          showIndicators
         })
       }));
       decorations.push(...calculateNodesForBlockDecoration({
@@ -181,7 +193,8 @@ const calculateDiffDecorationsInner = ({
           ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
             isInserted: !isInserted,
             diffType
-          })
+          }),
+          showIndicators
         }));
       }
     }
@@ -233,7 +246,8 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
   activeIndexPos,
   isInverted,
   diffType,
-  hideDeletedDiffs
+  hideDeletedDiffs,
+  showIndicators
 }], [{
   pluginState: lastPluginState,
   state: lastState,
@@ -242,13 +256,14 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
   activeIndexPos: lastActiveIndexPos,
   isInverted: lastIsInverted,
   diffType: lastDiffType,
-  hideDeletedDiffs: lastHideDeletedDiffs
+  hideDeletedDiffs: lastHideDeletedDiffs,
+  showIndicators: lastShowIndicators
 }]) => {
   var _ref2;
   const originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     var _ref;
-    return (_ref = 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) !== null && _ref !== void 0 ? _ref : false;
+    return (_ref = 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 && showIndicators === lastShowIndicators) !== null && _ref !== void 0 ? _ref : false;
   }
   return (_ref2 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref2 !== void 0 ? _ref2 : false;
 });

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

@@ -0,0 +1,205 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { buildAnchorDecorationKey, buildAnchorDecorationSpec, AnchorDocMarginKey, AnchorTypeKey } from './decorationKeys';
+const SIDE = 1;
+const findPosAfterLastChild = (node, nodeStart) => {
+  if (!node) {
+    return undefined;
+  }
+  const lastChild = node.lastChild;
+  if (!lastChild) {
+    return undefined;
+  }
+  const 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.
+ */
+const edgeCases = (doc, from) => {
+  const $from = doc.resolve(from);
+  const 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':
+      {
+        const lastRow = docLevelNode.lastChild;
+        if (!lastRow) {
+          return undefined;
+        }
+        const lastRowStart = $from.start(1) + docLevelNode.content.size - lastRow.nodeSize;
+        const firstCellOfLastRow = lastRow.firstChild;
+        const 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':
+      {
+        const expandAnchorPos = findPosAfterLastChild(docLevelNode, $from.start(1));
+        if (expandAnchorPos === undefined) {
+          return undefined;
+        }
+        return {
+          pos: expandAnchorPos,
+          leftMargin: "var(--ds-space-0, 0px)",
+          side: -1
+        };
+      }
+    case 'layoutSection':
+      {
+        const firstLayoutColumn = docLevelNode.firstChild;
+        const 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 const createDocMarginAnchorWidget = () => {
+  return Decoration.widget(0, () => {
+    const span = document.createElement('span');
+    span.style.setProperty('anchor-name', `--${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 const createLeftAnchorWidget = ({
+  doc,
+  from,
+  diffId
+}) => {
+  const edgeCase = edgeCases(doc, from);
+  if (edgeCase === undefined) {
+    return undefined;
+  }
+  const leftAnchorKey = buildAnchorDecorationKey({
+    diffId,
+    anchorType: AnchorTypeKey.left
+  });
+  return Decoration.widget(edgeCase.pos, () => {
+    const span = document.createElement('span');
+    span.style.setProperty('anchor-name', `--${leftAnchorKey}`);
+    span.style.setProperty('position', 'absolute');
+    span.style.setProperty('left', edgeCase.leftMargin);
+    return span;
+  }, buildAnchorDecorationSpec({
+    diffId,
+    anchorType: AnchorTypeKey.left,
+    side: edgeCase.side * SIDE
+  }));
+};
+const isFullNodeRange = (doc, from, to) => {
+  let matchesFullNodeRange = false;
+  doc.nodesBetween(from, to, (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 const createInlineIndicatorAnchorWidgets = ({
+  doc,
+  from,
+  to,
+  diffId
+}) => {
+  if (isFullNodeRange(doc, from, to)) {
+    return [];
+  }
+  const leftAnchor = createLeftAnchorWidget({
+    doc,
+    from,
+    diffId
+  });
+  const 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.
+   */
+  const fromAnchorKey = buildAnchorDecorationKey({
+    diffId,
+    anchorType: AnchorTypeKey.from
+  });
+  const fromWidget = Decoration.widget(from, () => {
+    const span = document.createElement('span');
+    span.style.setProperty('anchor-name', `--${fromAnchorKey}`);
+    return span;
+  }, buildAnchorDecorationSpec({
+    diffId,
+    anchorType: AnchorTypeKey.from,
+    side: 1
+  }));
+  const toAnchorKey = buildAnchorDecorationKey({
+    diffId,
+    anchorType: AnchorTypeKey.to
+  });
+  const toWidget = Decoration.widget(to, () => {
+    const span = document.createElement('span');
+    span.style.setProperty('anchor-name', `--${toAnchorKey}`);
+    return span;
+  }, buildAnchorDecorationSpec({
+    diffId,
+    anchorType: AnchorTypeKey.to,
+    side: -1
+  }));
+  return [fromWidget, toWidget, ...maybeLeftAnchor];
+};