@atlaskit/editor-plugin-show-diff 10.0.2 → 10.1.1

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

@@ -3,6 +3,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editingStyle, editingStyleExtended, editingStyleActive, editingStyleActiveExtended, deletedContentStyle, deletedContentStyleActive, deletedInlineContentStyleExtended } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle } from './colorSchemes/traditional';
+import { createInlineIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
 import { buildDiffDecorationSpec } from './decorationKeys';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
@@ -19,7 +20,9 @@ export const createInlineChangedDecoration = ({
   colorScheme,
   isActive = false,
   isInserted = true,
-  shouldHideDeleted = false
+  shouldHideDeleted = false,
+  showIndicators = false,
+  doc
 }) => {
   const diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
@@ -59,7 +62,7 @@ export const createInlineChangedDecoration = ({
       style = isActive ? editingStyleActive : editingStyle;
     }
   }
-  return [Decoration.inline(change.fromB, change.toB, {
+  const decorations = [Decoration.inline(change.fromB, change.toB, {
     style,
     'data-testid': 'show-diff-changed-decoration'
   }, buildDiffDecorationSpec({
@@ -67,4 +70,13 @@ export const createInlineChangedDecoration = ({
     diffId,
     isActive
   }))];
+  if (showIndicators && doc && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    decorations.push(...createInlineIndicatorAnchorWidgets({
+      doc,
+      from: change.fromB,
+      to: change.toB,
+      diffId
+    }));
+  }
+  return decorations;
 };

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

@@ -3,8 +3,9 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editingStyle, editingStyleExtended, editingStyleActive, editingStyleActiveExtended, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
+import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
-import { buildDiffDecorationSpec } from './decorationKeys';
+import { buildDiffDecorationSpec, buildAnchorDecorationKey } from './decorationKeys';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { wrapBlockNodeView } from './utils/wrapBlockNodeView';
 const getDeletedContentStyleUnbounded = (colorScheme, isActive = false) => {
@@ -98,7 +99,8 @@ export const createNodeChangedDecorationWidget = ({
   intl,
   activeIndexPos,
   // This is false by default as this is generally used to show deleted content
-  isInserted = false
+  isInserted = false,
+  showIndicators = false
 }) => {
   var _slice$content, _slice$content2, _slice$content2$first, _slice$content3, _slice$content3$first;
   const slice = doc.slice(change.fromA, change.toA);
@@ -129,6 +131,8 @@ export const createNodeChangedDecorationWidget = ({
 
   // For non-table content, use the existing span wrapper approach
   const dom = document.createElement('span');
+  const diffId = crypto.randomUUID();
+  const decorations = [];
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
@@ -230,8 +234,19 @@ export const createNodeChangedDecorationWidget = ({
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
-  const diffId = crypto.randomUUID();
-  const decorations = [];
+  if (showIndicators && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    const leftAnchor = createLeftAnchorWidget({
+      doc: newDoc,
+      from: safeInsertPos,
+      diffId
+    });
+    dom.style.setProperty('anchor-name', `--${buildAnchorDecorationKey({
+      diffId
+    })}`);
+    if (leftAnchor) {
+      decorations.push(leftAnchor);
+    }
+  }
   decorations.push(Decoration.widget(safeInsertPos, dom, buildDiffDecorationSpec({
     decorationType: 'widget',
     diffId,

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

@@ -1,24 +1,40 @@
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 /**
- * Shared prefix for every decoration key produced by the show-diff plugin.
- * All keys derive from this, so the full set of plugin decorations can be
- * identified by this single prefix.
+ * Decoration families produced by the show-diff plugin.
+ * Each family owns its own key space and spec shape.
  */
-const DIFF_DECORATION_FAMILY = 'diff';
+export const DecorationFamily = {
+  diff: 'diff',
+  anchor: 'anchor'
+};
+export const AnchorTypeKey = {
+  from: 'from',
+  to: 'to',
+  left: 'left',
+  docMargin: 'doc-margin'
+};
 /**
- * The kinds of decoration the show-diff plugin produces. Each value is the
- * leading segment of the generated key, so a decoration's kind can be matched
- * with `key?.startsWith(DiffDecorationKey.inline)` etc.
+ * The diff-decoration kinds produced by the show-diff plugin. Each value is
+ * the leading segment of the generated key, so a diff decoration's kind can be
+ * matched with `key?.startsWith(DiffDecorationKey.inline)` etc.
  */
 export const DiffDecorationKey = {
-  inline: `${DIFF_DECORATION_FAMILY}-inline`,
-  block: `${DIFF_DECORATION_FAMILY}-block`,
-  widget: `${DIFF_DECORATION_FAMILY}-widget`
+  inline: `${DecorationFamily.diff}-inline`,
+  block: `${DecorationFamily.diff}-block`,
+  widget: `${DecorationFamily.diff}-widget`
+};
+export const AnchorDocMarginKey = `${DecorationFamily.anchor}-${AnchorTypeKey.docMargin}`;
+export const buildAnchorDecorationKey = ({
+  diffId,
+  anchorType
+}) => {
+  return `${DecorationFamily.anchor}-${diffId}${anchorType ? `-${anchorType}` : ''}`;
 };
 
 /**
- * Builds a decoration key in the form `{type}-{active|inactive}`
- * (e.g. `diff-inline-active`).
+ * Builds a diff decoration key. The extended experience includes the `diffId`
+ * in the key so independently rendered decorations for the same type remain
+ * distinguishable.
  */
 export const buildDiffDecorationKey = ({
   decorationKeyPrefix,
@@ -37,7 +53,7 @@ export const buildDiffDecorationSpec = ({
   nodeName,
   side
 }) => ({
-  decorationFamily: DIFF_DECORATION_FAMILY,
+  decorationFamily: DecorationFamily.diff,
   decorationType,
   diffId,
   key: buildDiffDecorationKey({
@@ -52,7 +68,41 @@ export const buildDiffDecorationSpec = ({
     side
   } : {})
 });
-export const extractDiffDescriptors = decorations => decorations.find(undefined, undefined, spec => spec.decorationFamily === 'diff').map(({
+export function buildAnchorDecorationSpec({
+  anchorType,
+  diffId,
+  side
+}) {
+  if (anchorType === AnchorTypeKey.docMargin) {
+    return {
+      decorationFamily: DecorationFamily.anchor,
+      anchorType,
+      key: AnchorDocMarginKey,
+      ...(side !== undefined ? {
+        side
+      } : {})
+    };
+  }
+  if (!diffId) {
+    throw new Error(`diffId is required for anchor type "${anchorType}"`);
+  }
+  return {
+    decorationFamily: DecorationFamily.anchor,
+    anchorType,
+    diffId,
+    key: buildAnchorDecorationKey({
+      diffId,
+      anchorType
+    }),
+    ...(side !== undefined ? {
+      side
+    } : {})
+  };
+}
+export const isDiffDecorationSpec = spec => Boolean(spec && typeof spec === 'object' && 'decorationFamily' in spec && spec.decorationFamily === DecorationFamily.diff);
+export const isAnchorDecorationSpec = spec => Boolean(spec && typeof spec === 'object' && 'decorationFamily' in spec && spec.decorationFamily === DecorationFamily.anchor);
+export const isDiffDecoration = decoration => isDiffDecorationSpec(decoration.spec);
+export const extractDiffDescriptors = decorations => decorations.find(undefined, undefined, isDiffDecorationSpec).filter(isDiffDecoration).map(({
   spec
 }) => {
   return {

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

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

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

@@ -32,6 +32,7 @@ export const createPlugin = (config, getIntl, api) => {
             isInverted: false,
             diffType: 'inline',
             hideDeletedDiffs: false,
+            showIndicators: false,
             diffDescriptors: []
           } : {})
         };
@@ -41,7 +42,7 @@ export const createPlugin = (config, getIntl, api) => {
         let 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 = {
               ...currentPluginState,
@@ -64,7 +65,8 @@ export const createPlugin = (config, getIntl, api) => {
               ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
                 isInverted: (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.isInverted,
                 diffType: (_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.diffType,
-                hideDeletedDiffs: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.hideDeletedDiffs
+                hideDeletedDiffs: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.hideDeletedDiffs,
+                showIndicators: (_newPluginState4 = newPluginState) === null || _newPluginState4 === void 0 ? void 0 : _newPluginState4.showIndicators
               } : {})
             });
             // Update the decorations and their ids
@@ -133,7 +135,8 @@ export const createPlugin = (config, getIntl, api) => {
                 ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
                   isInverted: newPluginState.isInverted,
                   diffType: newPluginState.diffType,
-                  hideDeletedDiffs: newPluginState.hideDeletedDiffs
+                  hideDeletedDiffs: newPluginState.hideDeletedDiffs,
+                  showIndicators: newPluginState.showIndicators
                 } : {})
               });
               newPluginState.decorations = updatedDecorations;
@@ -174,10 +177,9 @@ export const createPlugin = (config, getIntl, api) => {
 
           // Scroll to the first decoration when scrollIntoView was requested
           if (pluginState !== null && pluginState !== void 0 && pluginState.scrollIntoView && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-            var _cancelPendingScrollT, _pluginState$decorati;
+            var _cancelPendingScrollT;
             (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 ? void 0 : _cancelPendingScrollT();
-            const allDecorations = ((_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
-            cancelPendingScrollToDecoration = scrollToFirstDecoration(view, allDecorations);
+            cancelPendingScrollToDecoration = scrollToFirstDecoration(view, pluginState.decorations);
 
             // Reset the flag so we don't scroll again on subsequent updates
             view.dispatch(view.state.tr.setMeta(showDiffPluginKey, {

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

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

package/dist/es2019/showDiffPlugin.js

@@ -1,6 +1,8 @@
+import React from 'react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getScrollableDecorations } from './pm-plugins/getScrollableDecorations';
 import { createPlugin, showDiffPluginKey } from './pm-plugins/main';
+import { IndicatorBarContentComponent } from './ui/IndicatorBar/IndicatorBarContentComponent';
 export const showDiffPlugin = ({
   api,
   config
@@ -58,6 +60,14 @@ export const showDiffPlugin = ({
       }) => createPlugin(config, getIntl, api)
     }];
   },
+  contentComponent: () => {
+    if (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(IndicatorBarContentComponent, {
+      api: api
+    });
+  },
   getSharedState: editorState => {
     if (!editorState) {
       return {
@@ -75,7 +85,8 @@ export const showDiffPlugin = ({
       activeIndex: pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex,
       numberOfChanges: decorationCount.length,
       ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-        diffDescriptors: pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffDescriptors
+        diffDescriptors: pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffDescriptors,
+        showIndicators: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showIndicators
       } : {})
     };
   }

package/dist/es2019/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/es2019/ui/IndicatorBar/IndicatorBar.js

@@ -0,0 +1,24 @@
+/* IndicatorBar.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./IndicatorBar.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { AnchorDocMarginKey } from '../../pm-plugins/decorations/decorationKeys';
+const barStyles = null;
+export function IndicatorBar({
+  anchorTop,
+  anchorBottom,
+  anchorLeft,
+  anchorLeftFallback
+}) {
+  const leftAnchors = [anchorLeft, anchorLeftFallback, AnchorDocMarginKey].filter(Boolean).map(anchor => `anchor(--${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(${leftAnchors})`,
+      top: `anchor(--${anchorTop} top)`,
+      bottom: `anchor(--${anchorBottom} bottom)`
+    },
+    className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _bfhkvbh5 _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
+  });
+}

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

@@ -0,0 +1,82 @@
+/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v0.39.1 */
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { buildAnchorDecorationKey, AnchorTypeKey } from '../../pm-plugins/decorations/decorationKeys';
+import { IndicatorBar } from './IndicatorBar';
+const renderIndicatorBar = descriptor => {
+  switch (descriptor.type) {
+    case 'inline':
+      {
+        return /*#__PURE__*/React.createElement(IndicatorBar, {
+          key: descriptor.id,
+          anchorTop: buildAnchorDecorationKey({
+            diffId: descriptor.id,
+            anchorType: AnchorTypeKey.from
+          }),
+          anchorBottom: buildAnchorDecorationKey({
+            diffId: descriptor.id,
+            anchorType: AnchorTypeKey.to
+          }),
+          anchorLeft: buildAnchorDecorationKey({
+            diffId: descriptor.id,
+            anchorType: AnchorTypeKey.left
+          })
+        });
+      }
+    case 'widget':
+      {
+        return /*#__PURE__*/React.createElement(IndicatorBar, {
+          key: descriptor.id,
+          anchorTop: buildAnchorDecorationKey({
+            diffId: descriptor.id
+          }),
+          anchorBottom: buildAnchorDecorationKey({
+            diffId: descriptor.id
+          }),
+          anchorLeft: buildAnchorDecorationKey({
+            diffId: descriptor.id,
+            anchorType: AnchorTypeKey.left
+          }),
+          anchorLeftFallback: 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.
+ */
+
+export const IndicatorBarContentComponent = ({
+  api
+}) => {
+  const {
+    showIndicators,
+    isDisplayingChanges,
+    diffDescriptors
+  } = useSharedPluginStateWithSelector(api, ['showDiff'], 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
+    };
+  });
+  if (!showIndicators || !isDisplayingChanges || !(diffDescriptors !== null && diffDescriptors !== void 0 && diffDescriptors.length)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, diffDescriptors.map(renderIndicatorBar));
+};

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

@@ -14,6 +14,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';
@@ -88,10 +89,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: DecorationSet.empty,
       diffDescriptors: []
@@ -154,6 +158,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 && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    decorations.push(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.
@@ -162,11 +173,13 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       var shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isInverted && hideDeletedDiffs : false;
       decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration(_objectSpread({
         change: change,
+        doc: tr.doc,
         colorScheme: colorScheme,
         isActive: isActive
       }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
         isInserted: isInserted,
-        shouldHideDeleted: shouldHideDeleted
+        shouldHideDeleted: shouldHideDeleted,
+        showIndicators: showIndicators
       }))));
       decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(_objectSpread(_objectSpread({
         doc: tr.doc,
@@ -184,7 +197,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     if (change.deleted.length > 0) {
       var _shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && hideDeletedDiffs : false;
       if (!_shouldHideDeleted) {
-        decorations.push.apply(decorations, _toConsumableArray(createNodeChangedDecorationWidget(_objectSpread({
+        decorations.push.apply(decorations, _toConsumableArray(createNodeChangedDecorationWidget(_objectSpread(_objectSpread({
           change: change,
           doc: originalDoc,
           nodeViewSerializer: nodeViewSerializer,
@@ -195,6 +208,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
           isInserted: !isInserted,
           diffType: diffType
+        }), {}, {
+          showIndicators: showIndicators
         }))));
       }
     }
@@ -249,7 +264,8 @@ function (_ref4, _ref5) {
     activeIndexPos = _ref6$.activeIndexPos,
     isInverted = _ref6$.isInverted,
     diffType = _ref6$.diffType,
-    hideDeletedDiffs = _ref6$.hideDeletedDiffs;
+    hideDeletedDiffs = _ref6$.hideDeletedDiffs,
+    showIndicators = _ref6$.showIndicators;
   var _ref7 = _slicedToArray(_ref5, 1),
     _ref7$ = _ref7[0],
     lastPluginState = _ref7$.pluginState,
@@ -259,11 +275,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 (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     var _ref8;
-    return (_ref8 = 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 && _ref8 !== void 0 ? _ref8 : false;
+    return (_ref8 = 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 && _ref8 !== void 0 ? _ref8 : false;
   }
   return (_ref9 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref9 !== void 0 ? _ref9 : false;
 });