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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 10.1.0
+
+### Minor Changes
+
+- [`96a8a99060dfc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/96a8a99060dfc) -
+  EDITOR-7523: Add diff indicators to the left doc margin
+
+## 10.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.0.1
 
 ### Patch Changes

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

@@ -15,6 +15,7 @@ var _document = require("@atlaskit/editor-common/utils/document");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _areDocsEqualByBlockStructureAndText = require("../areDocsEqualByBlockStructureAndText");
+var _createAnchorDecorationWidgets = require("../decorations/createAnchorDecorationWidgets");
 var _createBlockChangedDecoration = require("../decorations/createBlockChangedDecoration");
 var _createInlineChangedDecoration = require("../decorations/createInlineChangedDecoration");
 var _createNodeChangedDecorationWidget = require("../decorations/createNodeChangedDecorationWidget");
@@ -94,10 +95,13 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     _ref3$diffType = _ref3.diffType,
     diffType = _ref3$diffType === void 0 ? 'inline' : _ref3$diffType,
     _ref3$hideDeletedDiff = _ref3.hideDeletedDiffs,
-    hideDeletedDiffs = _ref3$hideDeletedDiff === void 0 ? false : _ref3$hideDeletedDiff;
+    hideDeletedDiffs = _ref3$hideDeletedDiff === void 0 ? false : _ref3$hideDeletedDiff,
+    _ref3$showIndicators = _ref3.showIndicators,
+    showIndicators = _ref3$showIndicators === void 0 ? false : _ref3$showIndicators;
   var originalDoc = pluginState.originalDoc,
-    steps = pluginState.steps;
-  if (!originalDoc || !pluginState.isDisplayingChanges) {
+    steps = pluginState.steps,
+    isDisplayingChanges = pluginState.isDisplayingChanges;
+  if (!originalDoc || !isDisplayingChanges) {
     return {
       decorations: _view.DecorationSet.empty,
       diffDescriptors: []
@@ -160,6 +164,13 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     steps: steps
   });
   var decorations = [];
+
+  /**
+   * If showIndicators is on, we create an anchor widget here to mark the doc margin.
+   */
+  if (showIndicators && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    decorations.push((0, _createAnchorDecorationWidgets.createDocMarginAnchorWidget)());
+  }
   changes.forEach(function (change) {
     var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     // Our default operations are insertions, so it should match the opposite of isInverted.
@@ -168,11 +179,13 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       var shouldHideDeleted = (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isInverted && hideDeletedDiffs : false;
       decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createInlineChangedDecoration.createInlineChangedDecoration)(_objectSpread({
         change: change,
+        doc: tr.doc,
         colorScheme: colorScheme,
         isActive: isActive
       }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
         isInserted: isInserted,
-        shouldHideDeleted: shouldHideDeleted
+        shouldHideDeleted: shouldHideDeleted,
+        showIndicators: showIndicators
       }))));
       decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(_objectSpread(_objectSpread({
         doc: tr.doc,
@@ -190,7 +203,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     if (change.deleted.length > 0) {
       var _shouldHideDeleted = (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && hideDeletedDiffs : false;
       if (!_shouldHideDeleted) {
-        decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createNodeChangedDecorationWidget.createNodeChangedDecorationWidget)(_objectSpread({
+        decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createNodeChangedDecorationWidget.createNodeChangedDecorationWidget)(_objectSpread(_objectSpread({
           change: change,
           doc: originalDoc,
           nodeViewSerializer: nodeViewSerializer,
@@ -201,6 +214,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
           isInserted: !isInserted,
           diffType: diffType
+        }), {}, {
+          showIndicators: showIndicators
         }))));
       }
     }
@@ -255,7 +270,8 @@ function (_ref4, _ref5) {
     activeIndexPos = _ref6$.activeIndexPos,
     isInverted = _ref6$.isInverted,
     diffType = _ref6$.diffType,
-    hideDeletedDiffs = _ref6$.hideDeletedDiffs;
+    hideDeletedDiffs = _ref6$.hideDeletedDiffs,
+    showIndicators = _ref6$.showIndicators;
   var _ref7 = (0, _slicedToArray2.default)(_ref5, 1),
     _ref7$ = _ref7[0],
     lastPluginState = _ref7$.pluginState,
@@ -265,11 +281,12 @@ function (_ref4, _ref5) {
     lastActiveIndexPos = _ref7$.activeIndexPos,
     lastIsInverted = _ref7$.isInverted,
     lastDiffType = _ref7$.diffType,
-    lastHideDeletedDiffs = _ref7$.hideDeletedDiffs;
+    lastHideDeletedDiffs = _ref7$.hideDeletedDiffs,
+    lastShowIndicators = _ref7$.showIndicators;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
   if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     var _ref8;
-    return (_ref8 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref8 !== void 0 ? _ref8 : false;
+    return (_ref8 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && showIndicators === lastShowIndicators) !== null && _ref8 !== void 0 ? _ref8 : false;
   }
   return (_ref9 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref9 !== void 0 ? _ref9 : false;
 });

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

@@ -0,0 +1,209 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createLeftAnchorWidget = exports.createInlineIndicatorAnchorWidgets = exports.createDocMarginAnchorWidget = void 0;
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _decorationKeys = require("./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.
+ */
+var createDocMarginAnchorWidget = exports.createDocMarginAnchorWidget = function createDocMarginAnchorWidget() {
+  return _view.Decoration.widget(0, function () {
+    var span = document.createElement('span');
+    span.style.setProperty('anchor-name', "--".concat(_decorationKeys.AnchorDocMarginKey));
+    return span;
+  }, (0, _decorationKeys.buildAnchorDecorationSpec)({
+    anchorType: _decorationKeys.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.
+ */
+var createLeftAnchorWidget = exports.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 = (0, _decorationKeys.buildAnchorDecorationKey)({
+    diffId: diffId,
+    anchorType: _decorationKeys.AnchorTypeKey.left
+  });
+  return _view.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;
+  }, (0, _decorationKeys.buildAnchorDecorationSpec)({
+    diffId: diffId,
+    anchorType: _decorationKeys.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).
+ */
+var createInlineIndicatorAnchorWidgets = exports.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 = (0, _decorationKeys.buildAnchorDecorationKey)({
+    diffId: diffId,
+    anchorType: _decorationKeys.AnchorTypeKey.from
+  });
+  var fromWidget = _view.Decoration.widget(from, function () {
+    var span = document.createElement('span');
+    span.style.setProperty('anchor-name', "--".concat(fromAnchorKey));
+    return span;
+  }, (0, _decorationKeys.buildAnchorDecorationSpec)({
+    diffId: diffId,
+    anchorType: _decorationKeys.AnchorTypeKey.from,
+    side: 1
+  }));
+  var toAnchorKey = (0, _decorationKeys.buildAnchorDecorationKey)({
+    diffId: diffId,
+    anchorType: _decorationKeys.AnchorTypeKey.to
+  });
+  var toWidget = _view.Decoration.widget(to, function () {
+    var span = document.createElement('span');
+    span.style.setProperty('anchor-name', "--".concat(toAnchorKey));
+    return span;
+  }, (0, _decorationKeys.buildAnchorDecorationSpec)({
+    diffId: diffId,
+    anchorType: _decorationKeys.AnchorTypeKey.to,
+    side: -1
+  }));
+  return [fromWidget, toWidget].concat(maybeLeftAnchor);
+};

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

@@ -1,14 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createInlineChangedDecoration = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
+var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _decorationKeys = require("./decorationKeys");
 var displayNoneStyle = (0, _lazyNodeView.convertToInlineCss)({
   display: 'none'
@@ -28,7 +31,10 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     _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 [_view.Decoration.inline(change.fromB, change.toB, {
@@ -67,7 +73,7 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
       style = isActive ? _standard.editingStyleActive : _standard.editingStyle;
     }
   }
-  return [_view.Decoration.inline(change.fromB, change.toB, {
+  var decorations = [_view.Decoration.inline(change.fromB, change.toB, {
     style: style,
     'data-testid': 'show-diff-changed-decoration'
   }, (0, _decorationKeys.buildDiffDecorationSpec)({
@@ -75,4 +81,13 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     diffId: diffId,
     isActive: isActive
   }))];
+  if (showIndicators && doc && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createAnchorDecorationWidgets.createInlineIndicatorAnchorWidgets)({
+      doc: doc,
+      from: change.fromB,
+      to: change.toB,
+      diffId: diffId
+    })));
+  }
+  return decorations;
 };

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

@@ -12,6 +12,7 @@ var _view = require("@atlaskit/editor-prosemirror/view");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
+var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWidgets");
 var _decorationKeys = require("./decorationKeys");
 var _findSafeInsertPos = require("./utils/findSafeInsertPos");
@@ -114,7 +115,9 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     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
@@ -151,6 +154,8 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
 
   // 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
@@ -256,8 +261,19 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
-  var diffId = crypto.randomUUID();
-  var decorations = [];
+  if (showIndicators && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    var leftAnchor = (0, _createAnchorDecorationWidgets.createLeftAnchorWidget)({
+      doc: newDoc,
+      from: safeInsertPos,
+      diffId: diffId
+    });
+    dom.style.setProperty('anchor-name', "--".concat((0, _decorationKeys.buildAnchorDecorationKey)({
+      diffId: diffId
+    })));
+    if (leftAnchor) {
+      decorations.push(leftAnchor);
+    }
+  }
   decorations.push(_view.Decoration.widget(safeInsertPos, dom, (0, _decorationKeys.buildDiffDecorationSpec)(_objectSpread({
     decorationType: 'widget',
     diffId: diffId,

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

@@ -4,49 +4,67 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractDiffDescriptors = exports.buildDiffDecorationSpec = exports.buildDiffDecorationKey = exports.DiffDecorationKey = void 0;
+exports.buildAnchorDecorationKey = exports.DiffDecorationKey = exports.DecorationFamily = exports.AnchorTypeKey = exports.AnchorDocMarginKey = void 0;
+exports.buildAnchorDecorationSpec = buildAnchorDecorationSpec;
+exports.isDiffDecorationSpec = exports.isDiffDecoration = exports.isAnchorDecorationSpec = exports.extractDiffDescriptors = exports.buildDiffDecorationSpec = exports.buildDiffDecorationKey = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 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; }
 /**
- * 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';
+var DecorationFamily = exports.DecorationFamily = {
+  diff: 'diff',
+  anchor: 'anchor'
+};
+var AnchorTypeKey = exports.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.
  */
 var DiffDecorationKey = exports.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")
+};
+var AnchorDocMarginKey = exports.AnchorDocMarginKey = "".concat(DecorationFamily.anchor, "-").concat(AnchorTypeKey.docMargin);
+var buildAnchorDecorationKey = exports.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.
  */
-var buildDiffDecorationKey = exports.buildDiffDecorationKey = function buildDiffDecorationKey(_ref) {
-  var decorationKeyPrefix = _ref.decorationKeyPrefix,
-    isActive = _ref.isActive,
-    diffId = _ref.diffId;
+var buildDiffDecorationKey = exports.buildDiffDecorationKey = function buildDiffDecorationKey(_ref2) {
+  var decorationKeyPrefix = _ref2.decorationKeyPrefix,
+    isActive = _ref2.isActive,
+    diffId = _ref2.diffId;
   if ((0, _expValEquals.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;
 };
-var buildDiffDecorationSpec = exports.buildDiffDecorationSpec = function buildDiffDecorationSpec(_ref2) {
-  var decorationType = _ref2.decorationType,
-    diffId = _ref2.diffId,
-    isActive = _ref2.isActive,
-    nodeName = _ref2.nodeName,
-    side = _ref2.side;
+var buildDiffDecorationSpec = exports.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({
@@ -60,11 +78,46 @@ var buildDiffDecorationSpec = exports.buildDiffDecorationSpec = function buildDi
     side: side
   } : {});
 };
+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
+  } : {});
+}
+var isDiffDecorationSpec = exports.isDiffDecorationSpec = function isDiffDecorationSpec(spec) {
+  return Boolean(spec && (0, _typeof2.default)(spec) === 'object' && 'decorationFamily' in spec && spec.decorationFamily === DecorationFamily.diff);
+};
+var isAnchorDecorationSpec = exports.isAnchorDecorationSpec = function isAnchorDecorationSpec(spec) {
+  return Boolean(spec && (0, _typeof2.default)(spec) === 'object' && 'decorationFamily' in spec && spec.decorationFamily === DecorationFamily.anchor);
+};
+var isDiffDecoration = exports.isDiffDecoration = function isDiffDecoration(decoration) {
+  return isDiffDecorationSpec(decoration.spec);
+};
 var extractDiffDescriptors = exports.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