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

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

@@ -12,8 +12,9 @@ import { createDocMarginAnchorWidget } from '../decorations/createAnchorDecorati
 import { createBlockChangedDecoration } from '../decorations/createBlockChangedDecoration';
 import { createInlineChangedDecoration } from '../decorations/createInlineChangedDecoration';
 import { createNodeChangedDecorationWidget } from '../decorations/createNodeChangedDecorationWidget';
-import { createAttributionColorMap, getAttributionKey, getColorSchemeForChange, isAttributionColoringEnabled } from '../decorations/colorSchemes/attributions';
+import { createAttributionColorMap, getAttributionKey, getAttributionKeyForChange, getColorSchemeForChange, isAttributionColoringEnabled, isContributorTagsEnabled } from '../decorations/colorSchemes/attributions';
 import { extractDiffDescriptors } from '../decorations/decorationKeys';
+import { extractContributorTags } from '../decorations/extractContributorTags';
 import { getAttrChangeRanges, stepIsValidAttrChange } from '../decorations/utils/getAttrChangeRanges';
 import { getMarkChangeRanges } from '../decorations/utils/getMarkChangeRanges';
 import { getDefaultDiffType, isExtendedEnabled } from '../isExtendedEnabled';
@@ -22,7 +23,7 @@ import { groupChangesByBlock } from './groupChangesByBlock';
 import { isMarkOnlyChange } from './isMarkOnlyChange';
 import { optimizeChanges } from './optimizeChanges';
 import { selectTokenEncoder } from './selectTokenEncoder';
-import { simplifyChangesWithAttribution } from './simplifyChangesWithAttribution';
+import { collapseOverlappingChanges, simplifyChangesWithAttribution } from './simplifyChangesWithAttribution';
 import { simplifySteps, simplifyStepsWithAttribution } from './simplifySteps';
 import { classifySmartChanges } from './smart/classifySmartChanges';
 import { smartChangeLevel } from './smart/helpers';
@@ -68,20 +69,13 @@ const getAttributedChanges = ({
   originalDoc,
   steppedDoc,
   diffType,
-  tr,
-  intl,
-  smartThresholds
+  tr
 }) => {
+  // `smart` is deliberately absent here, even though `getChanges` applies it: the classifier drops
+  // the step attribution and promotes ranges to sentence/paragraph/node granularity, so a promoted
+  // range covers several actors' steps and the latest-writer rule credits all of it to one of them.
+  // The attributed changeset keeps step granularity instead.
   if (isExtendedEnabled(diffType)) {
-    if (diffType === 'smart' && fg('platform_editor_ai_smart_diff')) {
-      return classifySmartChanges({
-        changes: simplifyChangesWithAttribution(attributedChanges, tr.doc),
-        originalDoc,
-        newDoc: tr.doc,
-        locale: intl.locale,
-        thresholds: smartThresholds
-      });
-    }
     if (diffType === 'step') {
       return attributedChanges;
     }
@@ -248,16 +242,19 @@ const calculateDiffDecorationsInner = ({
   showIndicators = false,
   smartThresholds,
   deletedDiffPlacement = 'top',
-  inlineDeletedDiffPlacement = 'before'
+  inlineDeletedDiffPlacement = 'before',
+  tagMountContext
 }) => {
   const {
     originalDoc,
     steps,
     stepAttributions,
+    contributors,
     isDisplayingChanges
   } = pluginState;
   if (!originalDoc || !isDisplayingChanges) {
     return {
+      contributorTags: [],
       decorations: DecorationSet.empty,
       diffDescriptors: []
     };
@@ -271,9 +268,12 @@ const calculateDiffDecorationsInner = ({
   } = state;
   let steppedDoc = originalDoc;
   const attributionColoringEnabled = isAttributionColoringEnabled(stepAttributions);
+  const showContributorTags = isContributorTagsEnabled(stepAttributions, contributors);
+  // Tags need the attributed changeset even on diffs with too few actors to be worth colouring.
+  const attributedChangesetEnabled = attributionColoringEnabled || showContributorTags;
   let simplifiedSteps;
   let simplifiedStepAttributions = [];
-  if (attributionColoringEnabled) {
+  if (attributedChangesetEnabled) {
     const simplifiedStepsWithAttribution = simplifyStepsWithAttribution(steps, stepAttributions !== null && stepAttributions !== void 0 ? stepAttributions : [], originalDoc);
     simplifiedSteps = simplifiedStepsWithAttribution.map(({
       step
@@ -350,6 +350,7 @@ const calculateDiffDecorationsInner = ({
     });
     if (!recoveredViaContentEquality) {
       return {
+        contributorTags: [],
         decorations: DecorationSet.empty,
         diffDescriptors: []
       };
@@ -363,7 +364,7 @@ const calculateDiffDecorationsInner = ({
   let changes;
   let attributedChanges = [];
   let attributionColors;
-  if (attributionColoringEnabled) {
+  if (attributedChangesetEnabled) {
     const changeset = ChangeSet.create(originalDoc, (left, right) => getAttributionKey(left) === getAttributionKey(right) ? left.stepIndex > right.stepIndex ? left : right :
     // `prosemirror-changeset` uses null as its incompatible-data sentinel even
     // though its public combine callback is typed as returning Data.
@@ -372,17 +373,22 @@ const calculateDiffDecorationsInner = ({
       stepIndex
     })));
     attributedChanges = diffBySteps(originalDoc, simplifiedSteps, simplifiedStepAttributions);
-    changes = getAttributedChanges({
+    // The attributed pipeline gives no guarantee that its output ranges are disjoint — see
+    // `collapseOverlappingChanges`.
+    const uncollapsedChanges = getAttributedChanges({
       changeset,
       originalDoc,
       steppedDoc,
       diffType,
       tr,
-      attributedChanges,
-      intl,
-      smartThresholds
+      attributedChanges
     });
-    attributionColors = createAttributionColorMap(simplifiedStepAttributions);
+    changes = collapseOverlappingChanges(uncollapsedChanges);
+
+    // Still colours-only: a tags-only diff keeps the plain colour scheme.
+    if (attributionColoringEnabled) {
+      attributionColors = createAttributionColorMap(simplifiedStepAttributions);
+    }
   } else {
     const changeset = ChangeSet.create(originalDoc, undefined, tokenEncoder).addSteps(steppedDoc, stepMaps, tr.doc);
     changes = getChanges({
@@ -409,6 +415,7 @@ const calculateDiffDecorationsInner = ({
   const isInserted = !isInverted;
   const createDecorationsForChange = change => {
     const changeColorScheme = attributionColors ? getColorSchemeForChange(change, attributedChanges, attributionColors, colorScheme) : colorScheme;
+    const attributionKey = showContributorTags ? getAttributionKeyForChange(change, attributedChanges) : undefined;
     const isActive = isRangeActive(activeIndexPos, change.fromB, change.toB);
 
     // The deleted side of a mark-only change is a byte-identical copy of the new text, so it is
@@ -462,6 +469,7 @@ const calculateDiffDecorationsInner = ({
             continue;
           }
           decorations.push(...createInlineChangedDecoration({
+            attributionKey,
             change: {
               fromB: from,
               toB: to
@@ -473,15 +481,18 @@ const calculateDiffDecorationsInner = ({
             ...(isExtendedEnabled(diffType) && {
               isInserted,
               shouldHideDeleted,
+              showContributorTags,
               showIndicators,
               hideAddedDiffsUnderline,
               hasDeletedWidget: willRenderDeletedWidget,
-              isDeletedWidgetBelow
+              isDeletedWidgetBelow,
+              tagMountContext
             })
           }));
         }
       } else {
         decorations.push(...createInlineChangedDecoration({
+          attributionKey,
           change,
           doc: tr.doc,
           colorScheme: changeColorScheme,
@@ -490,10 +501,12 @@ const calculateDiffDecorationsInner = ({
           ...(isExtendedEnabled(diffType) && {
             isInserted,
             shouldHideDeleted,
+            showContributorTags,
             showIndicators,
             hideAddedDiffsUnderline,
             hasDeletedWidget: willRenderDeletedWidget,
-            isDeletedWidgetBelow
+            isDeletedWidgetBelow,
+            tagMountContext
           })
         }));
       }
@@ -517,6 +530,8 @@ const calculateDiffDecorationsInner = ({
       const shouldHideDeleted = isExtendedEnabled(diffType) ? !isInverted && hideDeletedDiffs && change.inserted.length > 0 : false;
       if (!shouldHideDeleted) {
         decorations.push(...createNodeChangedDecorationWidget({
+          // The deleted side has no inline decoration, so the widget carries the actor.
+          attributionKey,
           change,
           doc: originalDoc,
           nodeViewSerializer,
@@ -524,6 +539,8 @@ const calculateDiffDecorationsInner = ({
           newDoc: tr.doc,
           intl,
           activeIndexPos,
+          showContributorTags,
+          tagMountContext,
           ...(isExtendedEnabled(diffType) && {
             isInserted: !isInserted,
             diffType,
@@ -635,12 +652,14 @@ const calculateDiffDecorationsInner = ({
   });
   const decorationSet = DecorationSet.empty.add(tr.doc, decorations);
   return {
+    contributorTags: showContributorTags ? extractContributorTags(decorationSet, contributors) : [],
     decorations: decorationSet,
     diffDescriptors: extractDiffDescriptors(decorationSet)
   };
 };
 export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner,
-// Cache results unless relevant inputs change
+// Cache results unless relevant inputs change. `tagMountContext` is deliberately absent: it is
+// built once per plugin instance, so it can never be the reason a diff needs recalculating.
 ([{
   pluginState,
   state,
@@ -674,7 +693,9 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
   const originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
   if (isExtendedEnabled(diffType)) {
     var _ref;
-    return (_ref = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && isEqual(pluginState.stepAttributions, lastPluginState.stepAttributions) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && isEqual(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement && inlineDeletedDiffPlacement === lastInlineDeletedDiffPlacement) !== 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) && isEqual(pluginState.stepAttributions, lastPluginState.stepAttributions) &&
+    // Contributors can arrive after the first calculation; without this, tags never appear.
+    isEqual(pluginState.contributors, lastPluginState.contributors) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && isEqual(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement && inlineDeletedDiffPlacement === lastInlineDeletedDiffPlacement) !== null && _ref !== void 0 ? _ref : false;
   }
-  return (_ref2 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && isEqual(pluginState.stepAttributions, lastPluginState.stepAttributions) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref2 !== void 0 ? _ref2 : false;
+  return (_ref2 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && isEqual(pluginState.stepAttributions, lastPluginState.stepAttributions) && isEqual(pluginState.contributors, lastPluginState.contributors) && 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/calculateDiff/simplifyChangesWithAttribution.js

@@ -17,6 +17,45 @@ const getAttributionIdentity = change => {
     mergeable: true
   };
 };
+const byNewDocRange = (left, right) => left.fromB - right.fromB || left.toB - right.toB;
+
+/**
+ * Collapses changes whose new-document ranges strictly overlap. Attribution runs are simplified
+ * independently, so runs either side of an unattributed step can come back covering the same
+ * characters — which stacks two inline decorations and renders one contributor tag per copy.
+ *
+ * Merging keeps every span from both sides, so the latest-writer rule still decides whose tag is
+ * shown. Ranges that merely touch are left alone, so an unattributed edit next to an attributed one
+ * is not credited to it.
+ */
+export const collapseOverlappingChanges = changes => {
+  if (changes.length <= 1) {
+    return changes;
+  }
+
+  // A zero-length new-document range paints no inline decoration, so it is kept aside rather than
+  // folded into a neighbouring insertion.
+  const emptyRanges = changes.filter(change => change.toB <= change.fromB);
+  const collapsed = [];
+  for (const change of changes.filter(change => change.toB > change.fromB).sort(byNewDocRange)) {
+    const current = collapsed[collapsed.length - 1];
+    if (current && change.fromB < current.toB) {
+      collapsed[collapsed.length - 1] = {
+        fromA: Math.min(current.fromA, change.fromA),
+        toA: Math.max(current.toA, change.toA),
+        fromB: Math.min(current.fromB, change.fromB),
+        toB: Math.max(current.toB, change.toB),
+        deleted: [...current.deleted, ...change.deleted],
+        inserted: [...current.inserted, ...change.inserted]
+      };
+    } else {
+      collapsed.push({
+        ...change
+      });
+    }
+  }
+  return [...collapsed, ...emptyRanges].sort(byNewDocRange);
+};
 
 /**
  * Simplifies and optimizes consecutive changes without crossing an attribution boundary.

package/dist/es2019/pm-plugins/decorations/colorSchemes/attributions.js

@@ -2,6 +2,11 @@ import { getParticipantColor } from '@atlaskit/editor-shared-styles/utils';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { PARTICIPANT_COLOR_SCHEMES } from './types';
+
+/** A contributor with both of its identities collapsed to internal attribution keys. */
+
+/** Contributors addressed by attribution key. The key format is internal. */
+
 /**
  * Normalise the attribution identity once so a valid lookup key always has a valid participant
  * colour seed. `userId` is primary; `agentId`, or `agentType` as its fallback, separates shared
@@ -36,6 +41,35 @@ export const getAttributionKey = attribution => {
   var _getAttributionIdenti;
   return (_getAttributionIdenti = getAttributionIdentity(attribution)) === null || _getAttributionIdenti === void 0 ? void 0 : _getAttributionIdenti.key;
 };
+
+/**
+ * Public contributor list to internal key-addressed record. A contributor whose attribution carries
+ * no identity is dropped, since it could never match a step. Later entries win.
+ */
+export const resolveContributors = contributors => {
+  if (!(contributors !== null && contributors !== void 0 && contributors.length)) {
+    return undefined;
+  }
+  const resolved = {};
+  for (const {
+    attribution,
+    connectedTo,
+    ...tagContributor
+  } of contributors) {
+    const key = getAttributionKey(attribution);
+    if (!key) {
+      continue;
+    }
+    const connectedToKey = connectedTo ? getAttributionKey(connectedTo) : undefined;
+    resolved[key] = {
+      ...tagContributor,
+      ...(connectedToKey ? {
+        connectedToKey
+      } : {})
+    };
+  }
+  return Object.keys(resolved).length > 0 ? resolved : undefined;
+};
 export const areAttributionColorGatesEnabled = () => fg('confluence_ncs_step_diffing_version_history') && isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor');
 export const isAttributionColoringEnabled = stepAttributions => {
   if (!areAttributionColorGatesEnabled() || !(stepAttributions !== null && stepAttributions !== void 0 && stepAttributions.length)) {
@@ -44,6 +78,12 @@ export const isAttributionColoringEnabled = stepAttributions => {
   const attributionKeys = new Set(stepAttributions.map(getAttributionKey).filter(key => key !== undefined));
   return attributionKeys.size > 1;
 };
+
+/**
+ * Shares the colours' gates, but with a lower bar: colouring needs two actors to tell apart, whereas
+ * a tag only has to name one.
+ */
+export const isContributorTagsEnabled = (stepAttributions, contributors) => areAttributionColorGatesEnabled() && Boolean(stepAttributions === null || stepAttributions === void 0 ? void 0 : stepAttributions.some(attribution => getAttributionKey(attribution) !== undefined)) && contributors !== undefined && Object.keys(contributors).length > 0;
 export const createAttributionColorMap = stepAttributions => {
   const colors = new Map();
   for (const attribution of stepAttributions) {
@@ -71,17 +111,19 @@ const changesOverlap = (change, attributedChange) => {
   const deletedOverlap = change.deleted.length > 0 && attributedChange.deleted.length > 0 && rangesOverlap(change.fromA, change.toA, attributedChange.fromA, attributedChange.toA);
   return insertedOverlap || deletedOverlap;
 };
-const getParticipantColorSchemeForChanges = (changes, attributionColors) => {
-  const key = getAttributionKey(getLatestAttribution(changes));
-  return key ? attributionColors.get(key) : undefined;
+const getAttributionKeyForChanges = changes => getAttributionKey(getLatestAttribution(changes));
+
+/**
+ * The attribution key owning a change. Inline and step changes retain direct attribution spans, so
+ * resolve those first. Grouped and smart-classified changes can lose that data; for those, fall
+ * back to the latest overlapping attributed step.
+ */
+export const getAttributionKeyForChange = (change, attributedChanges) => {
+  var _getAttributionKeyFor;
+  return (_getAttributionKeyFor = getAttributionKeyForChanges([change])) !== null && _getAttributionKeyFor !== void 0 ? _getAttributionKeyFor : getAttributionKeyForChanges(attributedChanges.filter(attributedChange => changesOverlap(change, attributedChange)));
 };
 export const getColorSchemeForChange = (change, attributedChanges, attributionColors, fallback) => {
-  var _ref, _getParticipantColorS;
-  return (// Inline and step changes retain their own attribution spans. Resolve those first so a broader
-    // change is not recoloured by a later contributor whose nested range happens to overlap it.
-    (_ref = (_getParticipantColorS = getParticipantColorSchemeForChanges([change], attributionColors)) !== null && _getParticipantColorS !== void 0 ? _getParticipantColorS :
-    // Grouping and smart classification can produce changes without direct attribution data. For
-    // those transformed changes, retain the overlap-based lookup as a fallback.
-    getParticipantColorSchemeForChanges(attributedChanges.filter(attributedChange => changesOverlap(change, attributedChange)), attributionColors)) !== null && _ref !== void 0 ? _ref : fallback
-  );
+  var _attributionColors$ge;
+  const key = getAttributionKeyForChange(change, attributedChanges);
+  return key ? (_attributionColors$ge = attributionColors.get(key)) !== null && _attributionColors$ge !== void 0 ? _attributionColors$ge : fallback : fallback;
 };

package/dist/es2019/pm-plugins/decorations/colorSchemes/factory.js

@@ -142,6 +142,15 @@ function textAccent(color) {
   return isParticipantColorScheme(color) ? participantColorTokenSets[color].textAccent : textAccentMap[color];
 }
 
+/** Presentation tokens for one diff colour, shared by highlights and contributor tags. */
+export function getAccentTokens(color) {
+  return {
+    background: bgSubtlest(color),
+    border: borderAccent(color),
+    text: textAccent(color)
+  };
+}
+
 /** Ring colour for an active (scroll-target) deleted block outline. */
 function deletedBlockOutlineActiveRing(colors) {
   return colors.deletedBlockOutlineActiveEmphasis === 'border' ? borderAccent(colors.deleteActiveColor) : bgSubtlerPressed(colors.deleteActiveColor);

package/dist/es2019/pm-plugins/decorations/colorSchemes/types.js

@@ -1,3 +1,5 @@
+/** Schemes consumers may explicitly request through the show-diff API. */
+
 /** Attribution-only participant slots selected by the plugin, never by consumers. */
 export const PARTICIPANT_COLOR_SCHEMES = ['red-bolder', 'blue-bolder', 'green-bolder', 'yellow-bolder', 'purple-bolder', 'magenta-bolder', 'teal-bolder', 'orange-bolder', 'lime-bolder', 'gray-bolder', 'blue-subtle', 'red-subtle', 'orange-subtle', 'yellow-subtle', 'green-subtle', 'teal-subtle', 'purple-subtle', 'magenta-subtle'];
 

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

@@ -1,5 +1,6 @@
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { buildAnchorDecorationKey, buildAnchorDecorationSpec, AnchorDocMarginKey, AnchorTypeKey } from './decorationKeys';
 
 /**
@@ -315,7 +316,7 @@ export const createBlockIndicatorAnchorWidgets = ({
  * inward into the neighbouring cell (`direction: 1` forward, `-1` back). Positions
  * not on a row boundary are returned as-is.
  */
-const clampAnchorPosIntoCell = (doc, pos, direction) => {
+export const clampAnchorPosIntoCell = (doc, pos, direction) => {
   const $pos = doc.resolve(pos);
   if ($pos.parent.type.name !== 'tableRow') {
     return pos;
@@ -329,6 +330,31 @@ const 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.
+ */
+export const createAnchorNameSpan = anchorKey => {
+  const span = document.createElement('span');
+  span.style.setProperty('anchor-name', `--${anchorKey}`);
+  return span;
+};
+const createAnchorSpanWidget = ({
+  pos,
+  diffId,
+  anchorType,
+  side
+}) => Decoration.widget(pos, () => createAnchorNameSpan(buildAnchorDecorationKey({
+  diffId,
+  anchorType
+})), buildAnchorDecorationSpec({
+  diffId,
+  anchorType,
+  side
+}));
+
 /**
  * Invisible `from`/`to` (and optional `left`) anchor widgets for one inline diff
  * range, so the `IndicatorBar` can align itself via CSS anchor positioning.
@@ -355,6 +381,22 @@ export const createInlineIndicatorAnchorWidgets = ({
    * 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 (fg('confluence_ncs_step_diffing_version_history')) {
+    return [createAnchorSpanWidget({
+      pos: fromPos,
+      diffId,
+      anchorType: AnchorTypeKey.from,
+      side: 1
+    }), createAnchorSpanWidget({
+      pos: toPos,
+      diffId,
+      anchorType: AnchorTypeKey.to,
+      side: -1
+    }), ...maybeLeftAnchor];
+  }
   const fromAnchorKey = buildAnchorDecorationKey({
     diffId,
     anchorType: AnchorTypeKey.from

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

@@ -0,0 +1,163 @@
+import { createElement } from 'react';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { ContributorTagWidget } from '../../ui/ContributorTag/ContributorTagWidget';
+import { clampAnchorPosIntoCell } from './createAnchorDecorationWidgets';
+import { buildContributorTagDecorationSpec, DecorationFamily } from './decorationKeys';
+
+/** Marks the host element of one tag, so a tag can be found in the document by its own diff. */
+export const CONTRIBUTOR_TAG_HOST_ATTRIBUTE = 'data-contributor-tag-host';
+
+// Contributor tags only render behind this gate — see `areAttributionColorGatesEnabled`.
+const isContributorTagWidgetEnabled = () => 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.
+ */
+let 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.
+ */
+export const mountContributorTag = ({
+  diffId,
+  host,
+  mountContext
+}) => {
+  if (!mountContext) {
+    return undefined;
+  }
+  const {
+    api,
+    getEditorRoot,
+    portalProviderAPI
+  } = mountContext;
+  const key = `${DecorationFamily.contributorTag}-${diffId}-${nextContributorTagPortalId++}`;
+  portalProviderAPI.render(() => /*#__PURE__*/createElement(ContributorTagWidget, {
+    api,
+    diffId,
+    getEditorRoot
+  }), host, key);
+  return {
+    key,
+    portalProviderAPI
+  };
+};
+export const unmountContributorTag = mount => {
+  mount === null || mount === void 0 ? 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.
+ */
+const buildContributorTagHost = diffId => {
+  const 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`.
+ */
+export const createContributorTagHost = (diffId, mountContext) => {
+  if (!isContributorTagWidgetEnabled()) {
+    return undefined;
+  }
+  const host = buildContributorTagHost(diffId);
+  return {
+    host,
+    mount: mountContributorTag({
+      diffId,
+      host,
+      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.
+ */
+const resolveInlineContentStart = (doc, from, to) => {
+  var _edge;
+  let edge;
+  doc.nodesBetween(from, to, (node, nodePos) => {
+    if (!node.isTextblock) {
+      return edge === undefined;
+    }
+
+    // The slice of this block the range actually covers; empty means nothing paintable.
+    const contentFrom = Math.max(nodePos + 1, from);
+    const 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 = 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`.
+ */
+export const createContributorTagWidget = ({
+  doc,
+  from,
+  to,
+  diffId,
+  mountContext
+}) => {
+  if (!isContributorTagWidgetEnabled()) {
+    return undefined;
+  }
+
+  // Reassigned when ProseMirror redraws this decoration, which it may do more than once for the
+  // same `Decoration` instance.
+  let mount;
+  return Decoration.widget(
+  // Keep the host out of the table row's grid (EDITOR-8442).
+  clampAnchorPosIntoCell(doc, resolveInlineContentStart(doc, from, to), 1), () => {
+    const host = buildContributorTagHost(diffId);
+    mount = mountContributorTag({
+      diffId,
+      host,
+      mountContext
+    });
+    return host;
+  }, {
+    ...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: () => true,
+    destroy: () => {
+      unmountContributorTag(mount);
+      mount = undefined;
+    }
+  });
+};