@atlaskit/editor-plugin-show-diff 10.1.19 → 10.1.21

package/dist/es2019/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';
-const SIDE = 1;
-const 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).
+ */
+const resolveDocLevelNode = (doc, from) => {
+  var _$from$node;
+  const $from = doc.resolve(from);
+  const node = (_$from$node = $from.node(1)) !== null && _$from$node !== void 0 ? _$from$node : $from.nodeAfter;
   if (!node) {
     return undefined;
   }
-  const lastChild = node.lastChild;
-  if (!lastChild) {
-    return undefined;
-  }
-  const 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`.
+  const nodeStart = $from.node(1) ? $from.start(1) : from + 1;
+  return {
+    node,
+    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.
  */
 const edgeCases = (doc, from) => {
-  const $from = doc.resolve(from);
-  const docLevelNode = $from.node(1);
-  if (!docLevelNode) {
+  const resolved = resolveDocLevelNode(doc, from);
+  if (!resolved) {
     return undefined;
   }
-  switch (docLevelNode.type.name) {
+  const {
+    node,
+    nodeStart,
+    beforePos
+  } = resolved;
+
+  /**
+   * All resizable nodes will need dynamic calculations of the block indicator left anchor
+   */
+  if (node.marks.some(mark => 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':
       {
-        const lastRow = docLevelNode.lastChild;
-        if (!lastRow) {
-          return undefined;
-        }
-        const lastRowStart = $from.start(1) + docLevelNode.content.size - lastRow.nodeSize;
-        const firstCellOfLastRow = lastRow.firstChild;
-        const 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':
-      {
-        const 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':
-      {
-        const firstLayoutColumn = docLevelNode.firstChild;
-        const 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 const createDocMarginAnchorWidget = () => {
     const span = document.createElement('span');
     span.style.setProperty('anchor-name', `--${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
   }));
 };
 
@@ -118,20 +122,56 @@ export const createLeftAnchorWidget = ({
   if (edgeCase === undefined) {
     return undefined;
   }
+
+  // Render the widget right before the doc-level node so it lives outside the
+  // resizable block container.
+  const resolved = resolveDocLevelNode(doc, from);
+  if (!resolved) {
+    return undefined;
+  }
+  const {
+    beforePos
+  } = resolved;
   const leftAnchorKey = buildAnchorDecorationKey({
     diffId,
     anchorType: AnchorTypeKey.left
   });
-  return Decoration.widget(edgeCase.pos, () => {
-    const span = document.createElement('span');
-    span.style.setProperty('anchor-name', `--${leftAnchorKey}`);
-    span.style.setProperty('position', 'absolute');
-    span.style.setProperty('left', edgeCase.leftMargin);
-    return span;
+  return Decoration.widget(beforePos, (view, getPos) => {
+    // Outer span stays in the flow but takes up no space.
+    const 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.
+    const anchor = document.createElement('div');
+    anchor.style.setProperty('anchor-name', `--${leftAnchorKey}`);
+    anchor.style.setProperty('position', 'absolute');
+    anchor.style.setProperty('left', `calc(50% - ${(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(() => {
+      // 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;
+      }
+      const 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', `${dom.offsetWidth}px`);
+      }
+    });
+    return wrapper;
   }, buildAnchorDecorationSpec({
     diffId,
     anchorType: AnchorTypeKey.left,
-    side: edgeCase.side * SIDE
+    side: -999
   }));
 };
 const isFullNodeRange = (doc, from, to) => {
@@ -145,6 +185,111 @@ const 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 const createBlockIndicatorAnchorWidgets = ({
+  doc,
+  from,
+  to,
+  diffId
+}) => {
+  const leftAnchor = createLeftAnchorWidget({
+    doc,
+    from,
+    diffId
+  });
+  const 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.
+   */
+  const blockAnchorKey = buildAnchorDecorationKey({
+    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.
+   */
+  const $from = doc.resolve(from);
+  const parentTable = findParentNodeClosestToPos($from, ancestor => ancestor.type.name === 'table');
+  const parentCellOrRow = findParentNodeClosestToPos($from, ancestor => ['tableCell', 'tableHeader', 'tableRow'].includes(ancestor.type.name));
+
+  // Render outside the table when inside one; otherwise keep the original pos.
+  const widgetPos = parentTable ? parentTable.pos : from;
+  // Measure the actual cell/row DOM when inside one; otherwise measure the
+  // widget's own position.
+  const measurePos = parentCellOrRow ? parentCellOrRow.pos : from;
+  const blockWidget = Decoration.widget(widgetPos, (view, getPos) => {
+    // Outer span stays in the flow but takes up no space.
+    const 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.
+    const anchor = document.createElement('span');
+    anchor.style.setProperty('position', 'absolute');
+    anchor.style.setProperty('anchor-name', `--${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(() => {
+      // 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;
+      }
+      const dom = view.nodeDOM(measurePos);
+      if (dom instanceof HTMLElement) {
+        anchor.style.setProperty('height', `${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.
+        const wrapperTop = wrapper.getBoundingClientRect().top;
+        const domTop = dom.getBoundingClientRect().top;
+        const verticalOffset = domTop - wrapperTop;
+        anchor.style.setProperty('top', `${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,
+    // 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, ...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.
@@ -172,8 +317,8 @@ export const createInlineIndicatorAnchorWidgets = ({
 
   /**
    * 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.
    */
   const fromAnchorKey = buildAnchorDecorationKey({
     diffId,

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

@@ -3,6 +3,7 @@ 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';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
@@ -120,7 +121,9 @@ export const createBlockChangedDecoration = ({
   colorScheme,
   isInserted = true,
   isActive = false,
-  shouldHideDeleted = false
+  shouldHideDeleted = false,
+  showIndicators = false,
+  doc
 }) => {
   const decorations = [];
   const diffId = crypto.randomUUID();
@@ -174,5 +177,13 @@ export const createBlockChangedDecoration = ({
       nodeName: change.name
     })));
   }
+  if (decorations.length > 0 && showIndicators && doc && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    decorations.push(...createBlockIndicatorAnchorWidgets({
+      doc,
+      from: change.from,
+      to: change.to,
+      diffId
+    }));
+  }
   return decorations;
 };

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

@@ -24,6 +24,24 @@ const 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.
+        const 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 @@ const renderIndicatorBar = descriptor => {
           })
         });
       }
-    /**
-     * TODO EDITOR-7711:
-     * Support IndicatorBar for block-changed type diffs.
-     */
     default:
       return null;
   }

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

@@ -55,7 +55,9 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
     isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
     activeIndexPos = _ref2.activeIndexPos,
     _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;
   var decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, function (node, pos) {
@@ -71,7 +73,9 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
         colorScheme: colorScheme,
         isInserted: isInserted,
         isActive: isActive,
-        shouldHideDeleted: shouldHideDeleted
+        shouldHideDeleted: shouldHideDeleted,
+        showIndicators: showIndicators,
+        doc: doc
       })));
     }
   });
@@ -193,7 +197,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         colorScheme: colorScheme
       }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
         isInserted: isInserted,
-        shouldHideDeleted: shouldHideDeleted
+        shouldHideDeleted: shouldHideDeleted,
+        showIndicators: showIndicators
       }), {}, {
         activeIndexPos: activeIndexPos,
         intl: intl
@@ -328,7 +333,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         colorScheme: colorScheme,
         isInserted: true,
         activeIndexPos: activeIndexPos,
-        intl: intl
+        intl: intl,
+        showIndicators: showIndicators
       })));
     }
   });