@atlaskit/editor-plugin-show-diff 10.1.18 → 10.1.20

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

@@ -1,83 +1,85 @@
+import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { buildAnchorDecorationKey, buildAnchorDecorationSpec, AnchorDocMarginKey, AnchorTypeKey } from './decorationKeys';
-var SIDE = 1;
-var findPosAfterLastChild = function findPosAfterLastChild(node, nodeStart) {
+
+/**
+ * Resolves the doc-level block node (table/expand/layout) for `from`, along with
+ * the position right before it (`beforePos`). Falls back to `$from.nodeAfter`
+ * when there is no depth-1 ancestor (e.g. `from` sits just before the block).
+ */
+var resolveDocLevelNode = function resolveDocLevelNode(doc, from) {
+  var _$from$node;
+  var $from = doc.resolve(from);
+  var node = (_$from$node = $from.node(1)) !== null && _$from$node !== void 0 ? _$from$node : $from.nodeAfter;
   if (!node) {
     return undefined;
   }
-  var lastChild = node.lastChild;
-  if (!lastChild) {
-    return undefined;
-  }
-  var lastChildStart = nodeStart + node.content.size - lastChild.nodeSize;
-  return lastChildStart + lastChild.nodeSize;
+
+  // Content start of the block. For the depth-1 case this is `$from.start(1)`;
+  // for the `nodeAfter` fallback, `from` is the position just before the block
+  // node, so its content starts at `from + 1`.
+  var nodeStart = $from.node(1) ? $from.start(1) : from + 1;
+  return {
+    node: node,
+    nodeStart: nodeStart,
+    // Position of the block node itself (one before its content start).
+    beforePos: nodeStart - 1
+  };
 };
 
 /**
  * Handles edge cases for block nodes whose inline content can exceed the doc
- * margin (tables, layouts, expands). Returns an adjusted position to use as
- * the left anchor, or `undefined` when no adjustment is needed.
+ * margin (tables, layouts, expands). Returns the position whose DOM should be
+ * measured to size the left anchor, or `undefined` when the diff is not inside
+ * such a node.
  */
 var edgeCases = function edgeCases(doc, from) {
-  var $from = doc.resolve(from);
-  var docLevelNode = $from.node(1);
-  if (!docLevelNode) {
+  var resolved = resolveDocLevelNode(doc, from);
+  if (!resolved) {
     return undefined;
   }
-  switch (docLevelNode.type.name) {
+  var node = resolved.node,
+    nodeStart = resolved.nodeStart,
+    beforePos = resolved.beforePos;
+
+  /**
+   * All resizable nodes will need dynamic calculations of the block indicator left anchor
+   */
+  if (node.marks.some(function (mark) {
+    return mark.type.name === 'breakout';
+  })) {
+    /**
+     * Layouts and Expands have extra padding around the container
+     */
+    return {
+      measurePos: beforePos
+    };
+  }
+  switch (node.type.name) {
     /**
      * For resizable blocks, inline content can exceed the doc margin.
-     * The widgets need to be placed inside the block as resizing the block will
-     * exceed the block container :')
+     * The widget is placed before the block; the anchor is sized against the
+     * block's DOM so it doesn't get clipped when the block is resized :')
      */
     case 'table':
       {
-        var lastRow = docLevelNode.lastChild;
-        if (!lastRow) {
-          return undefined;
-        }
-        var lastRowStart = $from.start(1) + docLevelNode.content.size - lastRow.nodeSize;
-        var firstCellOfLastRow = lastRow.firstChild;
-        var tableAnchorPos = findPosAfterLastChild(firstCellOfLastRow, lastRowStart + 1);
-        if (tableAnchorPos === undefined) {
-          return undefined;
-        }
-        return {
-          /**
-           * We use the last row because the first row could be a sticky header -
-           * when it becomes sticky the anchor won't be defined since it will be rendered
-           * outside of the context
-           */
-          pos: tableAnchorPos,
-          leftMargin: "var(--ds-space-negative-025, -2px)",
-          side: -1
-        };
-      }
-    case 'expand':
-      {
-        var expandAnchorPos = findPosAfterLastChild(docLevelNode, $from.start(1));
-        if (expandAnchorPos === undefined) {
+        // A table with no rows has nothing to measure.
+        if (!node.firstChild) {
           return undefined;
         }
+
+        // Measure the first row (`nodeStart` is just inside the table, i.e. the
+        // position of the first row): its width matches the table's.
         return {
-          pos: expandAnchorPos,
-          leftMargin: "var(--ds-space-0, 0px)",
-          side: -1
+          measurePos: nodeStart
         };
       }
     case 'layoutSection':
-      {
-        var firstLayoutColumn = docLevelNode.firstChild;
-        var layoutAnchorPos = findPosAfterLastChild(firstLayoutColumn, $from.start(1) + 1);
-        if (layoutAnchorPos === undefined) {
-          return undefined;
-        }
-        return {
-          pos: layoutAnchorPos,
-          leftMargin: "var(--ds-space-negative-025, -2px)",
-          side: 1
-        };
-      }
+    case 'expand':
+      // Measure the block itself (the widget is rendered outside the block).
+      return {
+        leftOffset: 12
+      };
     default:
       return undefined;
   }
@@ -93,9 +95,11 @@ export var createDocMarginAnchorWidget = function createDocMarginAnchorWidget()
     var span = document.createElement('span');
     span.style.setProperty('anchor-name', "--".concat(AnchorDocMarginKey));
     return span;
-  }, buildAnchorDecorationSpec({
+  },
+  // set the side to -999 so that it is always rendered before any other anchors
+  buildAnchorDecorationSpec({
     anchorType: AnchorTypeKey.docMargin,
-    side: SIDE
+    side: -999
   }));
 };
 
@@ -117,20 +121,54 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
   if (edgeCase === undefined) {
     return undefined;
   }
+
+  // Render the widget right before the doc-level node so it lives outside the
+  // resizable block container.
+  var resolved = resolveDocLevelNode(doc, from);
+  if (!resolved) {
+    return undefined;
+  }
+  var beforePos = resolved.beforePos;
   var leftAnchorKey = buildAnchorDecorationKey({
     diffId: diffId,
     anchorType: AnchorTypeKey.left
   });
-  return Decoration.widget(edgeCase.pos, function () {
-    var span = document.createElement('span');
-    span.style.setProperty('anchor-name', "--".concat(leftAnchorKey));
-    span.style.setProperty('position', 'absolute');
-    span.style.setProperty('left', edgeCase.leftMargin);
-    return span;
+  return Decoration.widget(beforePos, function (view, getPos) {
+    // Outer span stays in the flow but takes up no space.
+    var wrapper = document.createElement('div');
+    wrapper.style.setProperty('position', 'relative');
+    wrapper.style.setProperty('width', '100%');
+
+    // Inner span is absolutely positioned in the doc margin; it carries the
+    // `anchor-name` the IndicatorBar aligns its left edge against.
+    var anchor = document.createElement('div');
+    anchor.style.setProperty('anchor-name', "--".concat(leftAnchorKey));
+    anchor.style.setProperty('position', 'absolute');
+    anchor.style.setProperty('left', "calc(50% - ".concat((edgeCase === null || edgeCase === void 0 ? void 0 : edgeCase.leftOffset) || 0, "px)"));
+    anchor.style.setProperty('transform', 'translateX(-50%)');
+    wrapper.appendChild(anchor);
+
+    // The block DOM may not be settled synchronously (e.g. after a
+    // transaction), so defer the measurement like the gap cursor does.
+    requestAnimationFrame(function () {
+      // The widget may have been unmounted; bail if its position is gone.
+      // We still measure the stable block node position, not the widget's
+      // own position.
+      if (getPos() === undefined || edgeCase.measurePos === undefined) {
+        return;
+      }
+      var dom = view.nodeDOM(edgeCase.measurePos);
+      if (dom instanceof HTMLElement) {
+        // The left anchor only needs the container width so the
+        // IndicatorBar can align against the block's horizontal extent.
+        anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
+      }
+    });
+    return wrapper;
   }, buildAnchorDecorationSpec({
     diffId: diffId,
     anchorType: AnchorTypeKey.left,
-    side: edgeCase.side * SIDE
+    side: -999
   }));
 };
 var isFullNodeRange = function isFullNodeRange(doc, from, to) {
@@ -144,6 +182,114 @@ var isFullNodeRange = function isFullNodeRange(doc, from, to) {
   });
   return matchesFullNodeRange;
 };
+/**
+ * Creates invisible anchor widgets for a single block-changed diff so that the
+ * `IndicatorBar` can use CSS anchor positioning to align itself with the diff.
+ *
+ * The interface mirrors `createInlineIndicatorAnchorWidgets`:
+ * - A `from` anchor is placed at the start of the node range (top of the bar).
+ * - A `to` anchor is placed at the end of the node range (bottom of the bar).
+ * - An optional `left` anchor is placed inside a resizable container (table,
+ *   layout, expand) so the bar aligns within the container boundary.
+ *
+ * Unlike the inline variant there is no `isFullNodeRange` guard — block diffs
+ * always span exactly one block node so the anchors are always needed.
+ */
+export var createBlockIndicatorAnchorWidgets = function createBlockIndicatorAnchorWidgets(_ref2) {
+  var doc = _ref2.doc,
+    from = _ref2.from,
+    to = _ref2.to,
+    diffId = _ref2.diffId;
+  var leftAnchor = createLeftAnchorWidget({
+    doc: doc,
+    from: from,
+    diffId: diffId
+  });
+  var maybeLeftAnchor = leftAnchor ? [leftAnchor] : [];
+
+  /**
+   * A single anchor widget spans the full height of the block node, mimicking
+   * the gap cursor placement logic (see `place-gap-cursor.ts`): an element
+   * whose height is measured from the block's DOM so its box covers the block.
+   *
+   * Because the anchor rect covers the whole block, the `IndicatorBar` can
+   * resolve `top`, `bottom` and `left` against this one anchor (keyed by
+   * `diffId` with no `anchorType`) instead of separate `from`/`to` anchors.
+   */
+  var blockAnchorKey = buildAnchorDecorationKey({
+    diffId: diffId
+  });
+
+  /**
+   * If `from` lands inside a table cell/header or a table row, the widget must
+   * still be rendered *outside* the table (widgets placed inside a table are
+   * clipped/mis-laid-out), but we want the anchor to be sized against the
+   * actual cell/row DOM. So we split into two positions:
+   * - `widgetPos`: where the widget DOM is rendered (outside the table).
+   * - `measurePos`: the closest cell/row whose DOM we measure for the height.
+   */
+  var $from = doc.resolve(from);
+  var parentTable = findParentNodeClosestToPos($from, function (ancestor) {
+    return ancestor.type.name === 'table';
+  });
+  var parentCellOrRow = findParentNodeClosestToPos($from, function (ancestor) {
+    return ['tableCell', 'tableHeader', 'tableRow'].includes(ancestor.type.name);
+  });
+
+  // Render outside the table when inside one; otherwise keep the original pos.
+  var widgetPos = parentTable ? parentTable.pos : from;
+  // Measure the actual cell/row DOM when inside one; otherwise measure the
+  // widget's own position.
+  var measurePos = parentCellOrRow ? parentCellOrRow.pos : from;
+  var blockWidget = Decoration.widget(widgetPos, function (view, getPos) {
+    // Outer span stays in the flow but takes up no space.
+    var wrapper = document.createElement('span');
+    wrapper.style.setProperty('position', 'relative');
+
+    // Inner span is absolutely positioned and sized to the block height;
+    // it carries the `anchor-name` the IndicatorBar aligns against.
+    var anchor = document.createElement('span');
+    anchor.style.setProperty('position', 'absolute');
+    anchor.style.setProperty('anchor-name', "--".concat(blockAnchorKey));
+    wrapper.appendChild(anchor);
+
+    // The block DOM may not be settled synchronously (e.g. after a
+    // transaction), so defer the measurement like the gap cursor does.
+    requestAnimationFrame(function () {
+      // The widget may have been unmounted; bail if its position is gone.
+      // We still measure the stable cell/row node position, not the
+      // widget's own position.
+      if (getPos() === undefined) {
+        return;
+      }
+      var dom = view.nodeDOM(measurePos);
+      if (dom instanceof HTMLElement) {
+        anchor.style.setProperty('height', "".concat(dom.offsetHeight, "px"));
+
+        // The wrapper renders outside the table, so there is a vertical
+        // gap between it and the cell/row we're anchoring to. Measure
+        // that delta and offset the (absolutely positioned) anchor by it
+        // so its box lines up with the cell/row.
+        var wrapperTop = wrapper.getBoundingClientRect().top;
+        var domTop = dom.getBoundingClientRect().top;
+        var verticalOffset = domTop - wrapperTop;
+        anchor.style.setProperty('top', "".concat(verticalOffset, "px"));
+        // The offset already accounts for the cell/row's position, so the
+        // margin-top must not be double-applied.
+        anchor.style.setProperty('margin-top', '0px');
+      }
+    });
+    return wrapper;
+  }, buildAnchorDecorationSpec({
+    diffId: diffId,
+    // Reuse the `from` anchor type slot; the generated key intentionally
+    // omits the anchor type so the single element backs top/bottom/left.
+    anchorType: AnchorTypeKey.from,
+    side: -1
+  }));
+  return [blockWidget].concat(maybeLeftAnchor);
+};
+
 /**
  * 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.
@@ -153,11 +299,11 @@ var isFullNodeRange = function isFullNodeRange(doc, from, to) {
  * - An optional `left` anchor is placed before the first textblock when the
  *   diff is inside a resizable block node (table, layout, expand).
  */
-export var createInlineIndicatorAnchorWidgets = function createInlineIndicatorAnchorWidgets(_ref2) {
-  var doc = _ref2.doc,
-    from = _ref2.from,
-    to = _ref2.to,
-    diffId = _ref2.diffId;
+export var createInlineIndicatorAnchorWidgets = function createInlineIndicatorAnchorWidgets(_ref3) {
+  var doc = _ref3.doc,
+    from = _ref3.from,
+    to = _ref3.to,
+    diffId = _ref3.diffId;
   if (isFullNodeRange(doc, from, to)) {
     return [];
   }
@@ -170,8 +316,8 @@ export var createInlineIndicatorAnchorWidgets = function createInlineIndicatorAn
 
   /**
    * Two widgets mark the start and end of the inline range so the
-   * IndicatorBar can determine top/bottom even when the decoration
-   * spans multiple blocks.
+   * IndicatorBar can determine top/bottom even if
+   * the inline decoration is broken up by marks / between blocks.
    */
   var fromAnchorKey = buildAnchorDecorationKey({
     diffId: diffId,

package/dist/esm/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -1,8 +1,10 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { standardDecorationMarkerVariable, deletedDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
 import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from './colorSchemes/traditional';
+import { createBlockIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
 import { buildDiffDecorationSpec } from './decorationKeys';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
@@ -124,7 +126,10 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
     _ref2$isActive = _ref2.isActive,
     isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
     _ref2$shouldHideDelet = _ref2.shouldHideDeleted,
-    shouldHideDeleted = _ref2$shouldHideDelet === void 0 ? false : _ref2$shouldHideDelet;
+    shouldHideDeleted = _ref2$shouldHideDelet === void 0 ? false : _ref2$shouldHideDelet,
+    _ref2$showIndicators = _ref2.showIndicators,
+    showIndicators = _ref2$showIndicators === void 0 ? false : _ref2$showIndicators,
+    doc = _ref2.doc;
   var decorations = [];
   var diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
@@ -177,5 +182,13 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
       nodeName: change.name
     })));
   }
+  if (decorations.length > 0 && showIndicators && doc && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    decorations.push.apply(decorations, _toConsumableArray(createBlockIndicatorAnchorWidgets({
+      doc: doc,
+      from: change.from,
+      to: change.to,
+      diffId: diffId
+    })));
+  }
   return decorations;
 };

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

@@ -24,6 +24,24 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
           })
         });
       }
+    case 'block':
+      {
+        // The block anchor is a single element (keyed by diffId with no
+        // anchorType) sized to the full height of the block node, so top,
+        // bottom and left all resolve against it.
+        var blockAnchor = buildAnchorDecorationKey({
+          diffId: descriptor.id
+        });
+        return /*#__PURE__*/React.createElement(IndicatorBar, {
+          key: descriptor.id,
+          anchorTop: blockAnchor,
+          anchorBottom: blockAnchor,
+          anchorLeft: buildAnchorDecorationKey({
+            diffId: descriptor.id,
+            anchorType: AnchorTypeKey.left
+          })
+        });
+      }
     case 'widget':
       {
         return /*#__PURE__*/React.createElement(IndicatorBar, {
@@ -43,10 +61,6 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
           })
         });
       }
-    /**
-     * TODO EDITOR-7711:
-     * Support IndicatorBar for block-changed type diffs.
-     */
     default:
       return null;
   }

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

@@ -21,6 +21,25 @@ export declare const createLeftAnchorWidget: ({ doc, from, diffId, }: {
     doc: PMNode;
     from: number;
 }) => Decoration | undefined;
+/**
+ * Creates invisible anchor widgets for a single block-changed diff so that the
+ * `IndicatorBar` can use CSS anchor positioning to align itself with the diff.
+ *
+ * The interface mirrors `createInlineIndicatorAnchorWidgets`:
+ * - A `from` anchor is placed at the start of the node range (top of the bar).
+ * - A `to` anchor is placed at the end of the node range (bottom of the bar).
+ * - An optional `left` anchor is placed inside a resizable container (table,
+ *   layout, expand) so the bar aligns within the container boundary.
+ *
+ * Unlike the inline variant there is no `isFullNodeRange` guard — block diffs
+ * always span exactly one block node so the anchors are always needed.
+ */
+export declare const createBlockIndicatorAnchorWidgets: ({ doc, from, to, diffId, }: {
+    diffId: string;
+    doc: PMNode;
+    from: number;
+    to: number;
+}) => Decoration[];
 /**
  * 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.

package/dist/types/pm-plugins/decorations/createBlockChangedDecoration.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';
 /**
@@ -8,14 +9,16 @@ import type { ColorScheme } from '../../showDiffPluginType';
  * @param isActive Whether this node is part of the currently active/focused change
  * @returns Prosemirror node decoration or undefined
  */
-export declare const createBlockChangedDecoration: ({ change, colorScheme, isInserted, isActive, shouldHideDeleted, }: {
+export declare const createBlockChangedDecoration: ({ change, colorScheme, isInserted, isActive, shouldHideDeleted, showIndicators, doc, }: {
     change: {
         from: number;
         name: string;
         to: number;
     };
     colorScheme?: ColorScheme;
+    doc?: PMNode;
     isActive?: boolean;
     isInserted?: boolean;
     shouldHideDeleted?: boolean;
+    showIndicators?: boolean;
 }) => Decoration[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "10.1.18",
+	"version": "10.1.20",
 	"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": "^56.0.0",
+		"@atlaskit/adf-schema": "^56.1.0",
 		"@atlaskit/custom-steps": "^1.0.0",
 		"@atlaskit/editor-plugin-analytics": "^12.0.0",
 		"@atlaskit/editor-plugin-expand": "^13.1.0",
@@ -28,8 +28,8 @@
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-tables": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
-		"@atlaskit/tmp-editor-statsig": "^120.0.0",
-		"@atlaskit/tokens": "^15.3.0",
+		"@atlaskit/tmp-editor-statsig": "^121.2.0",
+		"@atlaskit/tokens": "^15.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"lodash": "^4.17.21",
@@ -37,13 +37,13 @@
 		"prosemirror-changeset": "^2.3.1"
 	},
 	"devDependencies": {
-		"@atlaskit/adf-utils": "^20.2.0",
+		"@atlaskit/adf-utils": "^20.3.0",
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/css": "^1.0.0",
-		"@atlaskit/editor-core": "^221.5.0",
+		"@atlaskit/editor-core": "^221.7.0",
 		"@atlaskit/editor-json-transformer": "^9.0.0",
 		"@atlaskit/form": "^16.1.0",
-		"@atlaskit/primitives": "^20.3.0",
+		"@atlaskit/primitives": "^20.4.0",
 		"@atlaskit/section-message": "^9.2.0",
 		"@atlaskit/textarea": "^9.1.0",
 		"@atlassian/confluence-presets": "workspace:^",
@@ -53,7 +53,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.20.0",
+		"@atlaskit/editor-common": "^116.23.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {