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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 10.1.20
+
+### Patch Changes
+
+- [`afd15695098bb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/afd15695098bb) -
+  EDItOR-7711: Show block changed diff indicators.
+- Updated dependencies
+
 ## 10.1.19
 
 ### Patch Changes

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

@@ -61,7 +61,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) {
@@ -77,7 +79,9 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
         colorScheme: colorScheme,
         isInserted: isInserted,
         isActive: isActive,
-        shouldHideDeleted: shouldHideDeleted
+        shouldHideDeleted: shouldHideDeleted,
+        showIndicators: showIndicators,
+        doc: doc
       })));
     }
   });
@@ -199,7 +203,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         colorScheme: colorScheme
       }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
         isInserted: isInserted,
-        shouldHideDeleted: shouldHideDeleted
+        shouldHideDeleted: shouldHideDeleted,
+        showIndicators: showIndicators
       }), {}, {
         activeIndexPos: activeIndexPos,
         intl: intl
@@ -334,7 +339,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         colorScheme: colorScheme,
         isInserted: true,
         activeIndexPos: activeIndexPos,
-        intl: intl
+        intl: intl,
+        showIndicators: showIndicators
       })));
     }
   });

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

@@ -3,87 +3,88 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createLeftAnchorWidget = exports.createInlineIndicatorAnchorWidgets = exports.createDocMarginAnchorWidget = void 0;
+exports.createLeftAnchorWidget = exports.createInlineIndicatorAnchorWidgets = exports.createDocMarginAnchorWidget = exports.createBlockIndicatorAnchorWidgets = void 0;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _decorationKeys = require("./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;
   }
@@ -99,9 +100,11 @@ var createDocMarginAnchorWidget = exports.createDocMarginAnchorWidget = function
     var span = document.createElement('span');
     span.style.setProperty('anchor-name', "--".concat(_decorationKeys.AnchorDocMarginKey));
     return span;
-  }, (0, _decorationKeys.buildAnchorDecorationSpec)({
+  },
+  // set the side to -999 so that it is always rendered before any other anchors
+  (0, _decorationKeys.buildAnchorDecorationSpec)({
     anchorType: _decorationKeys.AnchorTypeKey.docMargin,
-    side: SIDE
+    side: -999
   }));
 };
 
@@ -123,20 +126,54 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
   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 = (0, _decorationKeys.buildAnchorDecorationKey)({
     diffId: diffId,
     anchorType: _decorationKeys.AnchorTypeKey.left
   });
-  return _view.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 _view.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;
   }, (0, _decorationKeys.buildAnchorDecorationSpec)({
     diffId: diffId,
     anchorType: _decorationKeys.AnchorTypeKey.left,
-    side: edgeCase.side * SIDE
+    side: -999
   }));
 };
 var isFullNodeRange = function isFullNodeRange(doc, from, to) {
@@ -150,6 +187,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.
+ */
+var createBlockIndicatorAnchorWidgets = exports.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 = (0, _decorationKeys.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 = (0, _utils.findParentNodeClosestToPos)($from, function (ancestor) {
+    return ancestor.type.name === 'table';
+  });
+  var parentCellOrRow = (0, _utils.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 = _view.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;
+  }, (0, _decorationKeys.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: _decorationKeys.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.
@@ -159,11 +304,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).
  */
-var createInlineIndicatorAnchorWidgets = exports.createInlineIndicatorAnchorWidgets = function createInlineIndicatorAnchorWidgets(_ref2) {
-  var doc = _ref2.doc,
-    from = _ref2.from,
-    to = _ref2.to,
-    diffId = _ref2.diffId;
+var createInlineIndicatorAnchorWidgets = exports.createInlineIndicatorAnchorWidgets = function createInlineIndicatorAnchorWidgets(_ref3) {
+  var doc = _ref3.doc,
+    from = _ref3.from,
+    to = _ref3.to,
+    diffId = _ref3.diffId;
   if (isFullNodeRange(doc, from, to)) {
     return [];
   }
@@ -176,8 +321,8 @@ var createInlineIndicatorAnchorWidgets = exports.createInlineIndicatorAnchorWidg
 
   /**
    * 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 = (0, _decorationKeys.buildAnchorDecorationKey)({
     diffId: diffId,

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

@@ -1,14 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createBlockChangedDecoration = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
+var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _decorationKeys = require("./decorationKeys");
 var displayNoneStyle = (0, _lazyNodeView.convertToInlineCss)({
   display: 'none'
@@ -130,7 +133,10 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
     _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) {
@@ -183,5 +189,13 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
       nodeName: change.name
     })));
   }
+  if (decorations.length > 0 && showIndicators && doc && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createAnchorDecorationWidgets.createBlockIndicatorAnchorWidgets)({
+      doc: doc,
+      from: change.from,
+      to: change.to,
+      diffId: diffId
+    })));
+  }
   return decorations;
 };

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

@@ -31,6 +31,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 = (0, _decorationKeys.buildAnchorDecorationKey)({
+          diffId: descriptor.id
+        });
+        return /*#__PURE__*/_react.default.createElement(_IndicatorBar.IndicatorBar, {
+          key: descriptor.id,
+          anchorTop: blockAnchor,
+          anchorBottom: blockAnchor,
+          anchorLeft: (0, _decorationKeys.buildAnchorDecorationKey)({
+            diffId: descriptor.id,
+            anchorType: _decorationKeys.AnchorTypeKey.left
+          })
+        });
+      }
     case 'widget':
       {
         return /*#__PURE__*/_react.default.createElement(_IndicatorBar.IndicatorBar, {
@@ -50,10 +68,6 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
           })
         });
       }
-    /**
-     * TODO EDITOR-7711:
-     * Support IndicatorBar for block-changed type diffs.
-     */
     default:
       return null;
   }

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

@@ -46,7 +46,8 @@ const calculateNodesForBlockDecoration = ({
   colorScheme,
   isInserted = true,
   activeIndexPos,
-  shouldHideDeleted = false
+  shouldHideDeleted = false,
+  showIndicators = false
 }) => {
   const decorations = [];
   // Iterate over the document nodes within the range
@@ -63,7 +64,9 @@ const calculateNodesForBlockDecoration = ({
         colorScheme,
         isInserted,
         isActive,
-        shouldHideDeleted
+        shouldHideDeleted,
+        showIndicators,
+        doc
       }));
     }
   });
@@ -178,7 +181,8 @@ const calculateDiffDecorationsInner = ({
         colorScheme,
         ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
           isInserted,
-          shouldHideDeleted
+          shouldHideDeleted,
+          showIndicators
         }),
         activeIndexPos,
         intl
@@ -310,7 +314,8 @@ const calculateDiffDecorationsInner = ({
         colorScheme,
         isInserted: true,
         activeIndexPos,
-        intl
+        intl,
+        showIndicators
       }));
     }
   });