@atlaskit/editor-plugin-show-diff 14.3.2 → 14.4.2

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

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createLeftAnchorWidget = exports.createInlineIndicatorAnchorWidgets = exports.createDocMarginAnchorWidget = exports.createBlockIndicatorAnchorWidgets = void 0;
+exports.createLeftAnchorWidget = exports.createInlineIndicatorAnchorWidgets = exports.createDocMarginAnchorWidget = exports.createBlockIndicatorAnchorWidgets = exports.createAnchorNameSpan = exports.clampAnchorPosIntoCell = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _decorationKeys = require("./decorationKeys");
 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; }
@@ -322,7 +323,7 @@ var createBlockIndicatorAnchorWidgets = exports.createBlockIndicatorAnchorWidget
  * inward into the neighbouring cell (`direction: 1` forward, `-1` back). Positions
  * not on a row boundary are returned as-is.
  */
-var clampAnchorPosIntoCell = function clampAnchorPosIntoCell(doc, pos, direction) {
+var clampAnchorPosIntoCell = exports.clampAnchorPosIntoCell = function clampAnchorPosIntoCell(doc, pos, direction) {
   var $pos = doc.resolve(pos);
   if ($pos.parent.type.name !== 'tableRow') {
     return pos;
@@ -336,15 +337,43 @@ var clampAnchorPosIntoCell = function clampAnchorPosIntoCell(doc, pos, direction
   return direction === 1 ? pos + 2 : pos - 2;
 };
 
+/**
+ * A zero-size inline span carrying nothing but the `anchor-name` an overlay aligns against. A
+ * fragmented inline element reports the union of its line fragments, so aligning against one
+ * horizontally gives the enclosing block's content edge; a zero-size span is always a single
+ * fragment.
+ */
+var createAnchorNameSpan = exports.createAnchorNameSpan = function createAnchorNameSpan(anchorKey) {
+  var span = document.createElement('span');
+  span.style.setProperty('anchor-name', "--".concat(anchorKey));
+  return span;
+};
+var createAnchorSpanWidget = function createAnchorSpanWidget(_ref3) {
+  var pos = _ref3.pos,
+    diffId = _ref3.diffId,
+    anchorType = _ref3.anchorType,
+    side = _ref3.side;
+  return _view.Decoration.widget(pos, function () {
+    return createAnchorNameSpan((0, _decorationKeys.buildAnchorDecorationKey)({
+      diffId: diffId,
+      anchorType: anchorType
+    }));
+  }, (0, _decorationKeys.buildAnchorDecorationSpec)({
+    diffId: diffId,
+    anchorType: anchorType,
+    side: side
+  }));
+};
+
 /**
  * Invisible `from`/`to` (and optional `left`) anchor widgets for one inline diff
  * range, so the `IndicatorBar` can align itself via CSS anchor positioning.
  */
-var createInlineIndicatorAnchorWidgets = exports.createInlineIndicatorAnchorWidgets = function createInlineIndicatorAnchorWidgets(_ref3) {
-  var doc = _ref3.doc,
-    from = _ref3.from,
-    to = _ref3.to,
-    diffId = _ref3.diffId;
+var createInlineIndicatorAnchorWidgets = exports.createInlineIndicatorAnchorWidgets = function createInlineIndicatorAnchorWidgets(_ref4) {
+  var doc = _ref4.doc,
+    from = _ref4.from,
+    to = _ref4.to,
+    diffId = _ref4.diffId;
   var leftAnchor = createLeftAnchorWidget({
     doc: doc,
     from: from,
@@ -361,6 +390,22 @@ var createInlineIndicatorAnchorWidgets = exports.createInlineIndicatorAnchorWidg
    * IndicatorBar can determine top/bottom even if
    * the inline decoration is broken up by marks / between blocks.
    */
+  // Gated purely so the `createAnchorSpanWidget` rewrite can be rolled back independently of the
+  // contributor-tag anchors it was extracted for: both branches build the same two widgets at the
+  // same positions. Drop the fallback with the gate.
+  if ((0, _fg.fg)('confluence_ncs_step_diffing_version_history')) {
+    return [createAnchorSpanWidget({
+      pos: fromPos,
+      diffId: diffId,
+      anchorType: _decorationKeys.AnchorTypeKey.from,
+      side: 1
+    }), createAnchorSpanWidget({
+      pos: toPos,
+      diffId: diffId,
+      anchorType: _decorationKeys.AnchorTypeKey.to,
+      side: -1
+    })].concat(maybeLeftAnchor);
+  }
   var fromAnchorKey = (0, _decorationKeys.buildAnchorDecorationKey)({
     diffId: diffId,
     anchorType: _decorationKeys.AnchorTypeKey.from

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

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unmountContributorTag = exports.mountContributorTag = exports.createContributorTagWidget = exports.createContributorTagHost = exports.CONTRIBUTOR_TAG_HOST_ATTRIBUTE = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _ContributorTagWidget = require("../../ui/ContributorTag/ContributorTagWidget");
+var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
+var _decorationKeys = require("./decorationKeys");
+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; }
+/** Marks the host element of one tag, so a tag can be found in the document by its own diff. */
+var CONTRIBUTOR_TAG_HOST_ATTRIBUTE = exports.CONTRIBUTOR_TAG_HOST_ATTRIBUTE = 'data-contributor-tag-host';
+
+// Contributor tags only render behind this gate — see `areAttributionColorGatesEnabled`.
+var isContributorTagWidgetEnabled = function isContributorTagWidgetEnabled() {
+  return (0, _fg.fg)('confluence_ncs_step_diffing_version_history');
+};
+
+/**
+ * Everything a tag needs to mount itself into the document, plumbed down from the plugin. Absent in
+ * unit tests that build decorations directly: the hosts are still emitted, they just stay empty.
+ */
+
+/** A mounted tag, so whoever emitted the host can take it down again. */
+
+/**
+ * Unique per mount rather than per diff, because ProseMirror draws a replacement widget before it
+ * destroys the widget being replaced: on a shared key the outgoing widget's `destroy` would
+ * unregister the incoming widget's portal.
+ */
+var nextContributorTagPortalId = 0;
+
+/**
+ * Renders the tag into `host` through the editor's portal provider, the way the rest of the editor
+ * mounts React into decorations. The tag resolves its own model from plugin state, so a redraw of
+ * the host re-parents the tag instead of stranding it, and `isActive` changes arrive as a re-render.
+ */
+var mountContributorTag = exports.mountContributorTag = function mountContributorTag(_ref) {
+  var diffId = _ref.diffId,
+    host = _ref.host,
+    mountContext = _ref.mountContext;
+  if (!mountContext) {
+    return undefined;
+  }
+  var api = mountContext.api,
+    getEditorRoot = mountContext.getEditorRoot,
+    portalProviderAPI = mountContext.portalProviderAPI;
+  var key = "".concat(_decorationKeys.DecorationFamily.contributorTag, "-").concat(diffId, "-").concat(nextContributorTagPortalId++);
+  portalProviderAPI.render(function () {
+    return /*#__PURE__*/(0, _react.createElement)(_ContributorTagWidget.ContributorTagWidget, {
+      api: api,
+      diffId: diffId,
+      getEditorRoot: getEditorRoot
+    });
+  }, host, key);
+  return {
+    key: key,
+    portalProviderAPI: portalProviderAPI
+  };
+};
+var unmountContributorTag = exports.unmountContributorTag = function unmountContributorTag(mount) {
+  mount === null || mount === void 0 || mount.portalProviderAPI.remove(mount.key);
+};
+
+/**
+ * A zero-size inline host for one contributor tag. `position: relative` makes it the containing
+ * block of the absolutely positioned tag, so the tag sits on the change with no measurement.
+ */
+var buildContributorTagHost = function buildContributorTagHost(diffId) {
+  var host = document.createElement('span');
+  host.setAttribute(CONTRIBUTOR_TAG_HOST_ATTRIBUTE, diffId);
+  host.style.setProperty('position', 'relative');
+  return host;
+};
+
+/**
+ * The host for a tag on deleted content, which renders inside its own widget decoration rather than
+ * needing one of its own. Unmount with `unmountContributorTag` from that widget's `destroy`.
+ */
+var createContributorTagHost = exports.createContributorTagHost = function createContributorTagHost(diffId, mountContext) {
+  if (!isContributorTagWidgetEnabled()) {
+    return undefined;
+  }
+  var host = buildContributorTagHost(diffId);
+  return {
+    host: host,
+    mount: mountContributorTag({
+      diffId: diffId,
+      host: host,
+      mountContext: mountContext
+    })
+  };
+};
+
+/**
+ * The start of the inline content that `[from, to)` actually highlights.
+ *
+ * `from` is not sufficient: a range can begin at the tail of one paragraph and only cover text in a
+ * later block, and ProseMirror clips `Decoration.inline` to the content it can paint — so a host
+ * left at `from` would sit lines away from the highlight.
+ */
+var resolveInlineContentStart = function resolveInlineContentStart(doc, from, to) {
+  var edge;
+  doc.nodesBetween(from, to, function (node, nodePos) {
+    if (!node.isTextblock) {
+      return edge === undefined;
+    }
+
+    // The slice of this block the range actually covers; empty means nothing paintable.
+    var contentFrom = Math.max(nodePos + 1, from);
+    var contentTo = Math.min(nodePos + 1 + node.content.size, to);
+    if (contentTo > contentFrom && edge === undefined) {
+      edge = contentFrom;
+    }
+
+    // Textblocks have no block children to descend into.
+    return false;
+  });
+  return edge !== null && edge !== void 0 ? edge : from;
+};
+
+/**
+ * A widget hosting the contributor tag of one inline diff range, placed on the first character the
+ * range highlights.
+ *
+ * The tag is mounted in `toDOM` and taken down in `destroy`, so it lives exactly as long as the host
+ * element ProseMirror drew it into — see `mountContributorTag`.
+ */
+var createContributorTagWidget = exports.createContributorTagWidget = function createContributorTagWidget(_ref2) {
+  var doc = _ref2.doc,
+    from = _ref2.from,
+    to = _ref2.to,
+    diffId = _ref2.diffId,
+    mountContext = _ref2.mountContext;
+  if (!isContributorTagWidgetEnabled()) {
+    return undefined;
+  }
+
+  // Reassigned when ProseMirror redraws this decoration, which it may do more than once for the
+  // same `Decoration` instance.
+  var mount;
+  return _view.Decoration.widget(
+  // Keep the host out of the table row's grid (EDITOR-8442).
+  (0, _createAnchorDecorationWidgets.clampAnchorPosIntoCell)(doc, resolveInlineContentStart(doc, from, to), 1), function () {
+    var host = buildContributorTagHost(diffId);
+    mount = mountContributorTag({
+      diffId: diffId,
+      host: host,
+      mountContext: mountContext
+    });
+    return host;
+  }, _objectSpread(_objectSpread({}, (0, _decorationKeys.buildContributorTagDecorationSpec)(diffId)), {}, {
+    side: 1,
+    // The tag is chrome: it inherits no surrounding mark, and its own events are not the
+    // document's to handle.
+    marks: [],
+    ignoreSelection: true,
+    stopEvent: function stopEvent() {
+      return true;
+    },
+    destroy: function destroy() {
+      unmountContributorTag(mount);
+      mount = undefined;
+    }
+  }));
+};

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

@@ -14,6 +14,7 @@ var _isExtendedEnabled = require("../isExtendedEnabled");
 var _factory = require("./colorSchemes/factory");
 var _schemes = require("./colorSchemes/schemes");
 var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
+var _createContributorTagWidget = require("./createContributorTagWidget");
 var _createInlineChangedDecorationStyles = require("./createInlineChangedDecoration.styles.legacy");
 var _decorationKeys = require("./decorationKeys");
 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; }
@@ -109,7 +110,8 @@ var getAtomicInlineChangedAttrs = exports.getAtomicInlineChangedAttrs = function
  */
 
 var createInlineChangedDecoration = exports.createInlineChangedDecoration = function createInlineChangedDecoration(_ref2) {
-  var change = _ref2.change,
+  var attributionKey = _ref2.attributionKey,
+    change = _ref2.change,
     colorScheme = _ref2.colorScheme,
     _ref2$isActive = _ref2.isActive,
     isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
@@ -119,6 +121,8 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     isAtomicInlineNode = _ref2$isAtomicInlineN === void 0 ? false : _ref2$isAtomicInlineN,
     _ref2$shouldHideDelet = _ref2.shouldHideDeleted,
     shouldHideDeleted = _ref2$shouldHideDelet === void 0 ? false : _ref2$shouldHideDelet,
+    _ref2$showContributor = _ref2.showContributorTags,
+    showContributorTags = _ref2$showContributor === void 0 ? false : _ref2$showContributor,
     _ref2$showIndicators = _ref2.showIndicators,
     showIndicators = _ref2$showIndicators === void 0 ? false : _ref2$showIndicators,
     doc = _ref2.doc,
@@ -129,15 +133,23 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     _ref2$hasDeletedWidge = _ref2.hasDeletedWidget,
     hasDeletedWidget = _ref2$hasDeletedWidge === void 0 ? false : _ref2$hasDeletedWidge,
     _ref2$isDeletedWidget = _ref2.isDeletedWidgetBelow,
-    isDeletedWidgetBelow = _ref2$isDeletedWidget === void 0 ? false : _ref2$isDeletedWidget;
-  var diffId = crypto.randomUUID();
+    isDeletedWidgetBelow = _ref2$isDeletedWidget === void 0 ? false : _ref2$isDeletedWidget,
+    tagMountContext = _ref2.tagMountContext;
+  // Derived from the range so it survives a recalculation: stepping to the next/previous change
+  // rebuilds decorations without touching the doc, and a fresh id would change the React key and the
+  // tag host's key, remounting every tag mid-step. Random ids are kept when tags are off.
+  var diffId = showContributorTags ? "inline-".concat(change.fromB, "-").concat(change.toB) : crypto.randomUUID();
   if (shouldHideDeleted) {
     return [_view.Decoration.inline(change.fromB, change.toB, {
       style: displayNoneStyle
     }, (0, _decorationKeys.buildDiffDecorationSpec)({
+      // No attribution: this decoration paints nothing and emits no tag host, so a tag
+      // resolved from it would have nowhere to render.
+      colorScheme: colorScheme,
       decorationType: 'inline',
       diffId: diffId,
-      isActive: isActive
+      isActive: isActive,
+      isInserted: isInserted
     }))];
   }
   var colors = getColorScheme(colorScheme);
@@ -157,10 +169,15 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     class: atomicInlineAttrs.className
   }), {}, {
     'data-testid': 'show-diff-changed-decoration'
+  }, showContributorTags && {
+    'data-diff-id': diffId
   }), (0, _decorationKeys.buildDiffDecorationSpec)({
+    attributionKey: attributionKey,
+    colorScheme: colorScheme,
     decorationType: 'inline',
     diffId: diffId,
-    isActive: isActive
+    isActive: isActive,
+    isInserted: isInserted
   }))];
   if (showIndicators && doc && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     // For paragraphs, fromB/toB land on the outer block
@@ -197,5 +214,20 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
       diffId: diffId
     })));
   }
+
+  // Built from the raw change range, not the anchors above: a tag lines up with the changed text,
+  // while the bar's anchors are held on a block boundary when a deleted widget renders beside them.
+  if (showContributorTags && doc && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
+    var tagWidget = (0, _createContributorTagWidget.createContributorTagWidget)({
+      doc: doc,
+      from: change.fromB,
+      to: change.toB,
+      diffId: diffId,
+      mountContext: tagMountContext
+    });
+    if (tagWidget) {
+      decorations.push(tagWidget);
+    }
+  }
   return decorations;
 };

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

@@ -11,6 +11,7 @@ var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _isExtendedEnabled = require("../isExtendedEnabled");
 var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWidgets");
+var _createContributorTagWidget = require("./createContributorTagWidget");
 var _decorationKeys = require("./decorationKeys");
 var _findSafeInsertPos = require("./utils/findSafeInsertPos");
 var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
@@ -98,7 +99,8 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
  */
 var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref2) {
   var _slice$content, _slice$content2, _slice$content3, _$safeInsertPos$nodeB, _slice$content$firstC, _newDoc$firstChild, _slice$content$firstC2;
-  var change = _ref2.change,
+  var attributionKey = _ref2.attributionKey,
+    change = _ref2.change,
     doc = _ref2.doc,
     nodeViewSerializer = _ref2.nodeViewSerializer,
     colorScheme = _ref2.colorScheme,
@@ -107,13 +109,16 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     activeIndexPos = _ref2.activeIndexPos,
     _ref2$isInserted = _ref2.isInserted,
     isInserted = _ref2$isInserted === void 0 ? false : _ref2$isInserted,
+    _ref2$showContributor = _ref2.showContributorTags,
+    showContributorTags = _ref2$showContributor === void 0 ? false : _ref2$showContributor,
     _ref2$showIndicators = _ref2.showIndicators,
     showIndicators = _ref2$showIndicators === void 0 ? false : _ref2$showIndicators,
     _ref2$placeBelow = _ref2.placeBelow,
     placeBelow = _ref2$placeBelow === void 0 ? false : _ref2$placeBelow,
     diffType = _ref2.diffType,
     _ref2$hideAddedDiffsU = _ref2.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref2$hideAddedDiffsU === void 0 ? false : _ref2$hideAddedDiffsU;
+    hideAddedDiffsUnderline = _ref2$hideAddedDiffsU === void 0 ? false : _ref2$hideAddedDiffsU,
+    tagMountContext = _ref2.tagMountContext;
   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
@@ -211,7 +216,9 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
       subtree: true
     });
   }
-  var diffId = crypto.randomUUID();
+  // Derived from the deleted range so it survives a recalculation — see the same reasoning in
+  // `createInlineChangedDecoration`.
+  var diffId = showContributorTags ? "widget-".concat(change.fromA, "-").concat(change.toA) : crypto.randomUUID();
   var decorations = [];
   var replacementNode = newDoc.nodeAt(change.fromB);
   var firstReplacedNode = slice.content.firstChild;
@@ -334,23 +341,47 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
+
+  // Needed even when the indicator bar is off, because a contributor tag also anchors against the
+  // widget.
+  if ((showIndicators || showContributorTags) && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
+    dom.style.setProperty('anchor-name', "--".concat((0, _decorationKeys.buildAnchorDecorationKey)({
+      diffId: diffId
+    })));
+  }
+
+  // Taken down in the widget's `destroy` below: `dom` is rebuilt on every recalculation, so the tag
+  // mounted into it must not outlive the copy ProseMirror is drawing.
+  var tagMount;
+  if (showContributorTags) {
+    // Lets the contributor tag find the deleted content on hover.
+    dom.setAttribute('data-diff-id', diffId);
+
+    // Hosted at the start of the deleted run rather than on `dom` itself: `dom` is inline, so once
+    // the deleted content wraps its box is the union of its line fragments.
+    var tagHost = (0, _createContributorTagWidget.createContributorTagHost)(diffId, tagMountContext);
+    if (tagHost) {
+      dom.prepend(tagHost.host);
+      tagMount = tagHost.mount;
+    }
+  }
   if (showIndicators && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     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, _objectSpread(_objectSpread(_objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)(_objectSpread({
+    attributionKey: attributionKey,
+    colorScheme: colorScheme,
     decorationType: 'widget',
     diffId: diffId,
     isActive: isActive,
+    isInserted: isInserted,
     diffType: diffType
   }, (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && {
     // placeBelow anchors at the end of the new content, so render on the
@@ -361,7 +392,9 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   }), {}, {
     destroy: function destroy() {
       var _constrainMediaObserv2;
-      return (_constrainMediaObserv2 = constrainMediaObserver) === null || _constrainMediaObserv2 === void 0 ? void 0 : _constrainMediaObserv2.disconnect();
+      (_constrainMediaObserv2 = constrainMediaObserver) === null || _constrainMediaObserv2 === void 0 || _constrainMediaObserv2.disconnect();
+      (0, _createContributorTagWidget.unmountContributorTag)(tagMount);
+      tagMount = undefined;
     }
   })));
 

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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;
+exports.isDiffDecorationSpec = exports.isDiffDecoration = exports.isAnchorDecorationSpec = exports.extractDiffDescriptors = exports.buildDiffDecorationSpec = exports.buildDiffDecorationKey = exports.buildContributorTagDecorationSpec = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isExtendedEnabled = require("../isExtendedEnabled");
@@ -18,7 +18,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 var DecorationFamily = exports.DecorationFamily = {
   diff: 'diff',
-  anchor: 'anchor'
+  anchor: 'anchor',
+  contributorTag: 'contributor-tag'
 };
 var AnchorTypeKey = exports.AnchorTypeKey = {
   from: 'from',
@@ -26,6 +27,12 @@ var AnchorTypeKey = exports.AnchorTypeKey = {
   left: 'left',
   docMargin: 'doc-margin'
 };
+
+/**
+ * The host widget one contributor tag renders into. Its own family, so the tag never reaches the
+ * consumers that read diff decorations — change counting, navigation and `getDeletedWidgets`.
+ */
+
 /**
  * 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
@@ -59,13 +66,16 @@ var buildDiffDecorationKey = exports.buildDiffDecorationKey = function buildDiff
   return isActive !== undefined ? "".concat(decorationKeyPrefix, "-").concat(isActive ? 'active' : 'inactive') : decorationKeyPrefix;
 };
 var buildDiffDecorationSpec = exports.buildDiffDecorationSpec = function buildDiffDecorationSpec(_ref3) {
-  var decorationType = _ref3.decorationType,
+  var attributionKey = _ref3.attributionKey,
+    colorScheme = _ref3.colorScheme,
+    decorationType = _ref3.decorationType,
     diffId = _ref3.diffId,
     isActive = _ref3.isActive,
+    isInserted = _ref3.isInserted,
     nodeName = _ref3.nodeName,
     side = _ref3.side,
     diffType = _ref3.diffType;
-  return _objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
     decorationFamily: DecorationFamily.diff,
     decorationType: decorationType,
     diffId: diffId,
@@ -75,7 +85,15 @@ var buildDiffDecorationSpec = exports.buildDiffDecorationSpec = function buildDi
       isActive: isActive,
       diffType: diffType
     })
-  }, nodeName ? {
+  }, attributionKey ? {
+    attributionKey: attributionKey
+  } : {}), attributionKey && isActive !== undefined ? {
+    isActive: isActive
+  } : {}), attributionKey && isInserted !== undefined ? {
+    isInserted: isInserted
+  } : {}), attributionKey && colorScheme ? {
+    colorScheme: colorScheme
+  } : {}), nodeName ? {
     nodeName: nodeName
   } : {}), side !== undefined ? {
     side: side
@@ -109,6 +127,14 @@ function buildAnchorDecorationSpec(_ref4) {
     side: side
   } : {});
 }
+var buildContributorTagDecorationSpec = exports.buildContributorTagDecorationSpec = function buildContributorTagDecorationSpec(diffId) {
+  return {
+    decorationFamily: DecorationFamily.contributorTag,
+    diffId: diffId,
+    // Stable across recalculations, so ProseMirror keeps the host element the tag is portalled into.
+    key: "".concat(DecorationFamily.contributorTag, "-").concat(diffId)
+  };
+};
 var isDiffDecorationSpec = exports.isDiffDecorationSpec = function isDiffDecorationSpec(spec) {
   return Boolean(spec && (0, _typeof2.default)(spec) === 'object' && 'decorationFamily' in spec && spec.decorationFamily === DecorationFamily.diff);
 };