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

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

@@ -0,0 +1,25 @@
+/* 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';
+var barStyles = null;
+export function IndicatorBar(_ref) {
+  var anchorTop = _ref.anchorTop,
+    anchorBottom = _ref.anchorBottom,
+    anchorLeft = _ref.anchorLeft,
+    anchorLeftFallback = _ref.anchorLeftFallback;
+  var leftAnchors = [anchorLeft, anchorLeftFallback, AnchorDocMarginKey].filter(Boolean).map(function (anchor) {
+    return "anchor(--".concat(anchor, " left)");
+  }).join(', ');
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": "diff-indicator-bar",
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      left: "min(".concat(leftAnchors, ")"),
+      top: "anchor(--".concat(anchorTop, " top)"),
+      bottom: "anchor(--".concat(anchorBottom, " bottom)")
+    },
+    className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _bfhkvbh5 _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
+  });
+}

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

@@ -0,0 +1,80 @@
+/* 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';
+var renderIndicatorBar = function 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 var IndicatorBarContentComponent = function IndicatorBarContentComponent(_ref) {
+  var api = _ref.api;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['showDiff'], function (state) {
+      var _state$showDiffState, _state$showDiffState2, _state$showDiffState3;
+      return {
+        showIndicators: (_state$showDiffState = state.showDiffState) === null || _state$showDiffState === void 0 ? void 0 : _state$showDiffState.showIndicators,
+        isDisplayingChanges: (_state$showDiffState2 = state.showDiffState) === null || _state$showDiffState2 === void 0 ? void 0 : _state$showDiffState2.isDisplayingChanges,
+        diffDescriptors: (_state$showDiffState3 = state.showDiffState) === null || _state$showDiffState3 === void 0 ? void 0 : _state$showDiffState3.diffDescriptors
+      };
+    }),
+    showIndicators = _useSharedPluginState.showIndicators,
+    isDisplayingChanges = _useSharedPluginState.isDisplayingChanges,
+    diffDescriptors = _useSharedPluginState.diffDescriptors;
+  if (!showIndicators || !isDisplayingChanges || !(diffDescriptors !== null && diffDescriptors !== void 0 && diffDescriptors.length)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, diffDescriptors.map(renderIndicatorBar));
+};

package/dist/types/pm-plugins/calculateDiff/calculateDiffDecorations.d.ts

@@ -10,7 +10,7 @@ type CalculatedDiffs = {
     decorations: DecorationSet;
     diffDescriptors: DiffDescriptor[];
 };
-export declare const calculateDiffDecorations: MemoizedFn<({ state, pluginState, nodeViewSerializer, colorScheme, intl, activeIndexPos, api, hideDeletedDiffs, }: {
+export declare const calculateDiffDecorations: MemoizedFn<({ state, pluginState, nodeViewSerializer, colorScheme, intl, activeIndexPos, api, hideDeletedDiffs, showIndicators, }: {
     activeIndexPos?: {
         from: number;
         to: number;
@@ -21,6 +21,7 @@ export declare const calculateDiffDecorations: MemoizedFn<({ state, pluginState,
     intl: IntlShape;
     nodeViewSerializer: NodeViewSerializer;
     pluginState: Omit<ShowDiffPluginState, 'decorations'>;
+    showIndicators?: boolean;
     state: EditorState;
 }) => CalculatedDiffs>;
 export {};

package/dist/types/pm-plugins/decorations/createAnchorDecorationWidgets.d.ts

@@ -0,0 +1,38 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Create a widget that marks the start of the doc margin.
+ * This is used to determine the position of the inline indicators
+ * when the inline content exceeds the doc margin.
+ */
+export declare const createDocMarginAnchorWidget: () => Decoration;
+/**
+ * Creates an invisible left anchor widget for a diff inside a resizable block
+ * node (table, layout, expand), whose inline content can exceed the doc margin.
+ * Resolves the edge-case position from `doc`/`from`; returns `undefined` when
+ * the diff is not inside such a node and no left anchor is needed.
+ *
+ * The span is given an `anchor-name` (keyed by `diffId`) and positioned in the
+ * doc margin so the `IndicatorBar` can align its left edge against it via CSS
+ * anchor positioning. Shared by inline and node (widget) diff decorations.
+ */
+export declare const createLeftAnchorWidget: ({ doc, from, diffId, }: {
+    diffId: string;
+    doc: PMNode;
+    from: number;
+}) => Decoration | undefined;
+/**
+ * Creates invisible anchor widgets for a single inline diff range so that the
+ * `IndicatorBar` can use CSS anchor positioning to align itself with the diff.
+ *
+ * - A `from` anchor is placed at the start of the range (top of the bar).
+ * - A `to` anchor is placed at the end of the range (bottom of the bar).
+ * - An optional `left` anchor is placed before the first textblock when the
+ *   diff is inside a resizable block node (table, layout, expand).
+ */
+export declare const createInlineIndicatorAnchorWidgets: ({ doc, from, to, diffId, }: {
+    diffId: string;
+    doc: PMNode;
+    from: number;
+    to: number;
+}) => Decoration[];

package/dist/types/pm-plugins/decorations/createInlineChangedDecoration.d.ts

@@ -1,3 +1,4 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { ColorScheme } from '../../showDiffPluginType';
 /**
@@ -6,13 +7,15 @@ import type { ColorScheme } from '../../showDiffPluginType';
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export declare const createInlineChangedDecoration: ({ change, colorScheme, isActive, isInserted, shouldHideDeleted, }: {
+export declare const createInlineChangedDecoration: ({ change, colorScheme, isActive, isInserted, shouldHideDeleted, showIndicators, doc, }: {
     change: {
         fromB: number;
         toB: number;
     };
     colorScheme?: ColorScheme;
+    doc?: PMNode;
     isActive?: boolean;
     isInserted?: boolean;
     shouldHideDeleted?: boolean;
+    showIndicators?: boolean;
 }) => Decoration[];

package/dist/types/pm-plugins/decorations/createNodeChangedDecorationWidget.d.ts

@@ -8,7 +8,7 @@ import type { NodeViewSerializer } from '../NodeViewSerializer';
  * This function is used to create a decoration widget to show content
  * that is not in the current document.
  */
-export declare const createNodeChangedDecorationWidget: ({ change, doc, nodeViewSerializer, colorScheme, newDoc, intl, activeIndexPos, isInserted, }: {
+export declare const createNodeChangedDecorationWidget: ({ change, doc, nodeViewSerializer, colorScheme, newDoc, intl, activeIndexPos, isInserted, showIndicators, }: {
     activeIndexPos?: {
         from: number;
         to: number;
@@ -20,4 +20,5 @@ export declare const createNodeChangedDecorationWidget: ({ change, doc, nodeView
     isInserted?: boolean;
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
+    showIndicators?: boolean;
 }) => Decoration[];

package/dist/types/pm-plugins/decorations/decorationKeys.d.ts

@@ -1,32 +1,57 @@
-import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { DiffDescriptor } from '../../showDiffPluginType';
 /**
- * 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.
  */
-declare const DIFF_DECORATION_FAMILY: "diff";
-export type DiffDecorationSpec = {
-    decorationFamily: typeof DIFF_DECORATION_FAMILY;
+export declare const DecorationFamily: {
+    readonly diff: "diff";
+    readonly anchor: "anchor";
+};
+type DecorationFamilyValue = (typeof DecorationFamily)[keyof typeof DecorationFamily];
+type BaseDecorationSpec<TFamily extends DecorationFamilyValue> = {
+    decorationFamily: TFamily;
+    key: string;
+    side?: number;
+};
+export type DiffDecorationSpec = BaseDecorationSpec<typeof DecorationFamily.diff> & {
     decorationType: DiffDescriptor['type'];
     diffId: string;
-    key: string;
     nodeName?: string;
-    side?: number;
 };
+export declare const AnchorTypeKey: {
+    readonly from: "from";
+    readonly to: "to";
+    readonly left: "left";
+    readonly docMargin: "doc-margin";
+};
+type InlineAnchorType = Exclude<(typeof AnchorTypeKey)[keyof typeof AnchorTypeKey], typeof AnchorTypeKey.docMargin>;
+export type AnchorDecorationSpec = (BaseDecorationSpec<typeof DecorationFamily.anchor> & {
+    anchorType: typeof AnchorTypeKey.docMargin;
+}) | (BaseDecorationSpec<typeof DecorationFamily.anchor> & {
+    anchorType: InlineAnchorType;
+    diffId: string;
+});
+export type ShowDiffDecorationSpec = DiffDecorationSpec | AnchorDecorationSpec;
 /**
- * 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 declare const DiffDecorationKey: Readonly<{
-    block: `${typeof DIFF_DECORATION_FAMILY}-block`;
-    inline: `${typeof DIFF_DECORATION_FAMILY}-inline`;
-    widget: `${typeof DIFF_DECORATION_FAMILY}-widget`;
+    block: `${typeof DecorationFamily.diff}-block`;
+    inline: `${typeof DecorationFamily.diff}-inline`;
+    widget: `${typeof DecorationFamily.diff}-widget`;
 }>;
+export declare const AnchorDocMarginKey: `${typeof DecorationFamily.anchor}-${typeof AnchorTypeKey.docMargin}`;
+export declare const buildAnchorDecorationKey: ({ diffId, anchorType, }: {
+    anchorType?: InlineAnchorType;
+    diffId: string;
+}) => string;
 /**
- * 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 declare const buildDiffDecorationKey: ({ decorationKeyPrefix, isActive, diffId, }: {
     decorationKeyPrefix: (typeof DiffDecorationKey)[DiffDescriptor["type"]];
@@ -40,5 +65,19 @@ export declare const buildDiffDecorationSpec: ({ decorationType, diffId, isActiv
     nodeName?: string;
     side?: number;
 }) => DiffDecorationSpec;
+export declare function buildAnchorDecorationSpec(args: {
+    anchorType: typeof AnchorTypeKey.docMargin;
+    side?: number;
+}): AnchorDecorationSpec;
+export declare function buildAnchorDecorationSpec(args: {
+    anchorType: InlineAnchorType;
+    diffId: string;
+    side?: number;
+}): AnchorDecorationSpec;
+export declare const isDiffDecorationSpec: (spec: unknown) => spec is DiffDecorationSpec;
+export declare const isAnchorDecorationSpec: (spec: unknown) => spec is AnchorDecorationSpec;
+export declare const isDiffDecoration: (decoration: Decoration) => decoration is Decoration & {
+    spec: DiffDecorationSpec;
+};
 export declare const extractDiffDescriptors: (decorations: DecorationSet) => DiffDescriptor[];
 export {};

package/dist/types/pm-plugins/main.d.ts

@@ -29,6 +29,7 @@ export type ShowDiffPluginState = {
      * and then reset this flag.
      */
     scrollIntoView?: boolean;
+    showIndicators?: boolean;
     steps: ProseMirrorStep[];
 };
 export declare const createPlugin: (config: DiffParams | undefined, getIntl: () => IntlShape, api: ExtractInjectionAPI<ShowDiffPlugin> | undefined) => SafePlugin<ShowDiffPluginState>;

package/dist/types/pm-plugins/scrollToDiff.d.ts

@@ -1,4 +1,4 @@
-import type { EditorView, Decoration } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView, Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 /**
  * Schedules scrolling to the first diff decoration after the next frame.
  * Unlike `scrollToActiveDecoration`, this does not require an active index —
@@ -6,7 +6,7 @@ import type { EditorView, Decoration } from '@atlaskit/editor-prosemirror/view';
  *
  * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
  */
-export declare const scrollToFirstDecoration: (view: EditorView, decorations: Decoration[]) => (() => void);
+export declare const scrollToFirstDecoration: (view: EditorView, set: DecorationSet) => (() => void);
 /**
  * Schedules scrolling to the decoration at the given index after the next frame.
  *

package/dist/types/showDiffPluginType.d.ts

@@ -35,6 +35,10 @@ export type PMDiffParams = {
      * after the diff is shown.
      */
     scrollIntoView?: boolean;
+    /**
+     * Whether to show indicators at the doc margin for the diffs.
+     */
+    showIndicators?: boolean;
     /**
      * Prosemirror steps. This is used to calculate and show the diff in the editor
      */
@@ -73,5 +77,9 @@ export type ShowDiffPlugin = NextEditorPlugin<'showDiff', {
          * The number of changes being displayed
          */
         numberOfChanges?: number;
+        /**
+         * Whether to show indicators at the doc margin for the diffs.
+         */
+        showIndicators?: boolean;
     };
 }>;

package/dist/types/ui/IndicatorBar/IndicatorBar.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+export declare function IndicatorBar({ anchorTop, anchorBottom, anchorLeft, anchorLeftFallback, }: {
+    anchorBottom: string;
+    anchorLeft: string;
+    anchorLeftFallback?: string;
+    anchorTop: string;
+}): JSX.Element;

package/dist/types/ui/IndicatorBar/IndicatorBarContentComponent.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag React.Fragment
+ */
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ShowDiffPlugin } from '../../showDiffPluginType';
+/**
+ * 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 declare const IndicatorBarContentComponent: ({ api, }: {
+    api?: ExtractInjectionAPI<ShowDiffPlugin>;
+}) => JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "10.0.2",
+	"version": "10.1.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -20,7 +20,7 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^55.0.0",
+		"@atlaskit/adf-schema": "^55.2.0",
 		"@atlaskit/custom-steps": "^1.0.0",
 		"@atlaskit/editor-plugin-analytics": "^12.0.0",
 		"@atlaskit/editor-plugin-expand": "^13.0.0",
@@ -28,9 +28,10 @@
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-tables": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
-		"@atlaskit/tmp-editor-statsig": "^106.0.0",
+		"@atlaskit/tmp-editor-statsig": "^107.1.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.20.0",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",
 		"prosemirror-changeset": "^2.3.1"
@@ -39,7 +40,7 @@
 		"@atlaskit/adf-utils": "^20.0.0",
 		"@atlaskit/button": "^24.0.0",
 		"@atlaskit/css": "^1.0.0",
-		"@atlaskit/editor-core": "^221.0.0",
+		"@atlaskit/editor-core": "^221.1.0",
 		"@atlaskit/editor-json-transformer": "^9.0.0",
 		"@atlaskit/form": "^16.0.0",
 		"@atlaskit/primitives": "^20.0.0",
@@ -52,7 +53,7 @@
 		"react-intl": "^6.6.2"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.2.0",
+		"@atlaskit/editor-common": "^116.3.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {