@atlaskit/editor-plugin-show-diff 20.0.11 → 21.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 21.0.0
+
+### Patch Changes
+
+- [`a302d2ba96967`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a302d2ba96967) -
+  Fix contributor tag placement so it no longer overflows onto the next line when a change wraps.
+- [`6563a0ae0eb6f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6563a0ae0eb6f) -
+  [EDITOR-9212] Fix AI Suggested Edits diff rendering for a table nested inside an expand. Behind
+  `platform_editor_ai_show_diff_patch_2`, the diff preview now keeps the node's `breakout` mark, and
+  renders against its own document so node positions are resolved within the preview instead of the
+  live document — nested tables are no longer sized as top-level and pushed out of their cell, and a
+  preview can no longer write to the live document. The changed-node outline and the "Removed"
+  lozenge are both placed at the breakout width rather than the content column. Selecting a
+  suggestion that targets a collapsed expand now opens it in both the live document and the diff
+  preview, so the change is visible instead of hidden behind a title bar.
+- Updated dependencies
+
 ## 20.0.11
 
 ### Patch Changes

package/dist/cjs/pm-plugins/NodeViewSerializer.js

@@ -8,8 +8,13 @@ exports.NodeViewSerializer = void 0;
 exports.isEditorViewWithNodeViews = isEditorViewWithNodeViews;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _expand = require("@atlaskit/editor-common/expand");
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _createEditorProxy = require("./createEditorProxy");
+var _markViews = require("./markViews");
 /**
  * Utilities for working with ProseMirror node views and DOM serialization within the
  * Show Diff editor plugin.
@@ -37,6 +42,16 @@ function isEditorViewWithNodeViews(view) {
   return view.nodeViews !== undefined;
 }
 
+/** Expand-family nodes whose expanded state lives in a node-keyed WeakMap. */
+var EXPAND_TYPES = new Set(['expand', 'nestedExpand']);
+
+/** Tables are the only node views that read and write positions, so only they need a preview. */
+var containsTable = function containsTable(node) {
+  var table = node.type.schema.nodes.table;
+  // `contains` only checks descendants, so the node itself is checked separately.
+  return !!table && (node.type === table || (0, _utils.contains)(node, table));
+};
+
 /**
  * Encapsulates DOM serialization and node view access/creation.
  *
@@ -82,11 +97,18 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
     key: "appendChildNodes",
     value: function appendChildNodes(children, contentDOM) {
       var _this = this;
+      var basePos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var editorProxy = arguments.length > 3 ? arguments[3] : undefined;
+      // A node's first child sits one position inside it, and each subsequent
+      // child is offset by the previous child's `nodeSize`. Tracking this lets nested node
+      // views resolve to their real depth instead of every one of them seeing depth 0.
+      var childPos = basePos + 1;
       children.forEach(function (child) {
-        var childNode = _this.tryCreateNodeView(child) || _this.serializeNode(child);
+        var childNode = _this.tryCreateNodeViewInner(child, childPos, editorProxy) || _this.serializeNode(child);
         if (childNode) {
           contentDOM === null || contentDOM === void 0 || contentDOM.append(childNode);
         }
+        childPos += child.nodeSize;
       });
     }
 
@@ -95,11 +117,29 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
      *
      * Returns `null` when there is no `EditorView`, no constructor for the node type,
      * or the node type is blocklisted. Otherwise returns the constructed node view instance.
+     *
+     * `$sourcePos` is where the node sits in the doc it came from, so nested tables keep their depth.
      */
   }, {
     key: "tryCreateNodeView",
     value: function tryCreateNodeView(targetNode) {
+      var _preview$rootPos;
+      var basePos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var $sourcePos = arguments.length > 2 ? arguments[2] : undefined;
+      if (!this.editorView) {
+        return null;
+      }
+      // The preview becomes the document every nested node view resolves its position against,
+      // so positions stay internally consistent.
+      var preview = (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') && containsTable(targetNode) ? (0, _createEditorProxy.createEditorProxy)(this.editorView, targetNode, $sourcePos) : null;
+      return this.tryCreateNodeViewInner(targetNode, (_preview$rootPos = preview === null || preview === void 0 ? void 0 : preview.rootPos) !== null && _preview$rootPos !== void 0 ? _preview$rootPos : basePos, preview === null || preview === void 0 ? void 0 : preview.editorProxy);
+    }
+  }, {
+    key: "tryCreateNodeViewInner",
+    value: function tryCreateNodeViewInner(targetNode) {
       var _this$nodeViews;
+      var basePos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var editorProxy = arguments.length > 2 ? arguments[2] : undefined;
       if (!this.editorView) {
         return null;
       }
@@ -145,23 +185,47 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
             if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_deleted_nodeview_content') && targetNode.type.name === 'paragraph' && targetNode.children.length === 1) {
               return this.serializeFragment(targetNode.content);
             }
-            this.appendChildNodes(targetNode.children, _contentDOM);
+            this.appendChildNodes(targetNode.children, _contentDOM, basePos, editorProxy);
           }
-          return _dom;
+          return this.withMarkViews(targetNode, _dom, editorProxy);
         }
-        var _constructor = constructor(targetNode, this.editorView, function () {
-            return 0;
+
+        // The expand node view reads `expandedState.get(node) ?? false`, never `attrs.__expanded`.
+        // Open the preview so its tables get real layout; an existing entry is the live expand's
+        // own state, so leave it alone.
+        if (EXPAND_TYPES.has(targetNode.type.name) && !_expand.expandedState.has(targetNode) && (0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) {
+          _expand.expandedState.set(targetNode, true);
+        }
+
+        // `isTableNested` is `doc.resolve(pos).depth > 0`, so the old hardcoded `0` made nested
+        // tables size as top-level. Positions are resolved against the preview document, so
+        // they are only meaningful with an editor proxy.
+        var view = editorProxy !== null && editorProxy !== void 0 ? editorProxy : this.editorView;
+        var docSize = view.state.doc.content.size;
+        var resolvedPos = editorProxy ? Math.max(0, Math.min(basePos, docSize)) : 0;
+        var _constructor = constructor(targetNode, view, function () {
+            return resolvedPos;
           }, [], {}),
           dom = _constructor.dom,
           contentDOM = _constructor.contentDOM;
         // Iteratively populate children
-        this.appendChildNodes(targetNode.children, contentDOM);
-        return dom;
+        this.appendChildNodes(targetNode.children, contentDOM, basePos, editorProxy);
+        return this.withMarkViews(targetNode, dom, editorProxy);
       } catch (_unused) {
         return null;
       }
     }
 
+    /** Wraps rendered DOM in its marks, rendered against the editor proxy when there is one. */
+  }, {
+    key: "withMarkViews",
+    value: function withMarkViews(targetNode, nodeDom, editorProxy) {
+      return (0, _markViews.wrapInMarkViews)(targetNode, nodeDom, {
+        nodeViews: this.nodeViews,
+        view: editorProxy !== null && editorProxy !== void 0 ? editorProxy : this.editorView
+      });
+    }
+
     /**
      * Serializes a node to a DOM `Node` using the schema's `DOMSerializer`.
      */

package/dist/cjs/pm-plugins/createEditorProxy.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createEditorProxy = createEditorProxy;
+var _selection = require("@atlaskit/editor-common/selection/gap-cursor/selection");
+/**
+ * A preview is rendered by the live view's own node views, which read `getPos()` against
+ * `view.state.doc` for both layout (`isTableNested`) and writes (`scaleTable` builds attribute
+ * steps at `getPos() + 1`). Handing them live positions makes the layout correct but points the
+ * writes at unrelated live nodes, so give them a view whose document *is* the preview instead.
+ *
+ * With `$sourcePos` (the node's position in the doc it came from) the node is swapped into a copy
+ * of its real top-level ancestor, so a table inside an expand still resolves as nested.
+ *
+ * Returns `null` when the node cannot be a top-level child (e.g. a bare `tableCell`), in which
+ * case the caller falls back to the live view and the previous stubbed positions.
+ */
+function createEditorProxy(liveView, rootNode, $sourcePos) {
+  var liveState = liveView.state;
+  var createDoc = function createDoc(topLevel) {
+    return liveState.schema.topNodeType.createChecked(null, topLevel);
+  };
+  var previewDoc;
+  var rootPos = 0;
+  try {
+    var _$sourcePos$nodeAfter;
+    if ($sourcePos && $sourcePos.depth > 0 && ((_$sourcePos$nodeAfter = $sourcePos.nodeAfter) === null || _$sourcePos$nodeAfter === void 0 ? void 0 : _$sourcePos$nodeAfter.type) === rootNode.type) {
+      var topLevel = rootNode;
+      for (var depth = $sourcePos.depth; depth > 0; depth--) {
+        var ancestor = $sourcePos.node(depth);
+        topLevel = ancestor.copy(ancestor.content.replaceChild($sourcePos.index(depth), topLevel));
+      }
+      previewDoc = createDoc(topLevel);
+      rootPos = $sourcePos.pos - $sourcePos.before(1);
+    } else {
+      previewDoc = createDoc(rootNode);
+    }
+  } catch (_unused) {
+    return null;
+  }
+
+  // A gap cursor just before the node selects nothing, so the table's node view doesn't render
+  // as selected or show its controls.
+  var previewSelection = new _selection.GapCursorSelection(previewDoc.resolve(rootPos), _selection.Side.LEFT);
+  // Proxy rather than `EditorState.create` so plugin state is shared as-is: re-initialising
+  // every plugin per preview would be costly and re-runs their side effects.
+  var stateProxy = new Proxy(liveState, {
+    get: function get(target, prop, receiver) {
+      if (prop === 'doc') {
+        return previewDoc;
+      }
+      if (prop === 'selection') {
+        return previewSelection;
+      }
+      return Reflect.get(target, prop, receiver);
+    }
+  });
+  var editorProxy = new Proxy(liveView, {
+    get: function get(target, prop, receiver) {
+      if (prop === 'state') {
+        return stateProxy;
+      }
+      if (prop === 'dispatch') {
+        // Keep the transaction inside the preview. It was built against `previewDoc`, so
+        // applying it to the live state would corrupt the real document.
+        return function (tr) {
+          try {
+            stateProxy = stateProxy.apply(tr);
+          } catch (_unused2) {
+            // A preview is throwaway; a failed self-update is not worth surfacing.
+          }
+        };
+      }
+      var value = Reflect.get(target, prop, receiver);
+      return typeof value === 'function' ? value.bind(target) : value;
+    }
+  });
+  return {
+    editorProxy: editorProxy,
+    rootPos: rootPos
+  };
+}

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

@@ -224,13 +224,14 @@ var resolveHoistedCodeBlockAnchor = exports.resolveHoistedCodeBlockAnchor = func
  * highlights — or, with `anchorAtRangeStart`, at `from` itself. A host inside a code block is
  * hoisted in front of it instead, anchored via `resolveHoistedCodeBlockAnchor` (EDITOR-9045).
  *
- * Returns one decoration normally, two (marker + tag) when hoisted out of a code block.
+ * Returns one decoration when a caller-supplied `anchorName` is used, two (marker + tag)
+ * otherwise — hoisted out of a code block, or anchored to its own point marker.
  *
  * The tag is mounted in `toDOM` and taken down in `destroy`, so it lives exactly as long as the host
  * element ProseMirror drew it into — see `mountContributorTag`.
  */
 var createContributorTagWidget = exports.createContributorTagWidget = function createContributorTagWidget(_ref4) {
-  var _hoisted$anchorName, _hoisted$codeBlockSta;
+  var _hoisted$codeBlockSta, _ref5, _hoisted$anchorName;
   var _ref4$anchorAtRangeSt = _ref4.anchorAtRangeStart,
     anchorAtRangeStart = _ref4$anchorAtRangeSt === void 0 ? false : _ref4$anchorAtRangeSt,
     anchorName = _ref4.anchorName,
@@ -250,15 +251,33 @@ var createContributorTagWidget = exports.createContributorTagWidget = function c
   // A change inside a code block is hoisted out of it, anchored to its own marker; anything else
   // keeps its own anchor.
   var hoisted = resolveHoistedCodeBlockAnchor(doc, anchorPos, diffId);
-  var effectiveAnchorName = (_hoisted$anchorName = hoisted === null || hoisted === void 0 ? void 0 : hoisted.anchorName) !== null && _hoisted$anchorName !== void 0 ? _hoisted$anchorName : anchorName;
+  // Keep the host out of the table row's grid (EDITOR-8442).
+  var hostPos = (0, _createAnchorDecorationWidgets.clampAnchorPosIntoCell)(doc, (_hoisted$codeBlockSta = hoisted === null || hoisted === void 0 ? void 0 : hoisted.codeBlockStart) !== null && _hoisted$codeBlockSta !== void 0 ? _hoisted$codeBlockSta : anchorPos, 1);
+
+  // Inline diffs pass no anchorName. Give them their own point anchor instead of the
+  // `position: relative` fallback, which drifts left once the range wraps a line (EDITOR-9286).
+  var ownAnchorName = (0, _decorationKeys.buildAnchorDecorationKey)({
+    diffId: diffId,
+    anchorType: _decorationKeys.AnchorTypeKey.tag
+  });
+  var effectiveAnchorName = (_ref5 = (_hoisted$anchorName = hoisted === null || hoisted === void 0 ? void 0 : hoisted.anchorName) !== null && _hoisted$anchorName !== void 0 ? _hoisted$anchorName : anchorName) !== null && _ref5 !== void 0 ? _ref5 : ownAnchorName;
   var tagAnchorName = effectiveAnchorName && supportsAnchorPositioning() ? effectiveAnchorName : undefined;
   var decorations = [];
   if (hoisted) {
     decorations.push(hoisted.marker);
+  } else if (!anchorName && tagAnchorName) {
+    decorations.push(_view.Decoration.widget(hostPos, function () {
+      return (0, _createAnchorDecorationWidgets.createAnchorNameSpan)(ownAnchorName);
+    }, _objectSpread(_objectSpread({}, (0, _decorationKeys.buildAnchorDecorationSpec)({
+      diffId: diffId,
+      anchorType: _decorationKeys.AnchorTypeKey.tag,
+      side: -1
+    })), {}, {
+      marks: [],
+      ignoreSelection: true
+    })));
   }
-  decorations.push(_view.Decoration.widget(
-  // Keep the host out of the table row's grid (EDITOR-8442).
-  (0, _createAnchorDecorationWidgets.clampAnchorPosIntoCell)(doc, (_hoisted$codeBlockSta = hoisted === null || hoisted === void 0 ? void 0 : hoisted.codeBlockStart) !== null && _hoisted$codeBlockSta !== void 0 ? _hoisted$codeBlockSta : anchorPos, 1), function () {
+  decorations.push(_view.Decoration.widget(hostPos, function () {
     var host = buildContributorTagHost(diffId, tagAnchorName);
     mount = mountContributorTag({
       anchorName: tagAnchorName,

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

@@ -24,6 +24,21 @@ var _tableDiffMode = require("./utils/tableDiffMode");
 var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Where a slice's `index`th child sits in `doc`: the children belong to the ancestor `openStart`
+ * levels above the change. `null` if out of range — `posAtIndex` throws past the last child.
+ */
+var getSourcePos = function getSourcePos(doc, $changeFrom, openStart, index) {
+  var depth = $changeFrom ? $changeFrom.depth - openStart : -1;
+  if (!$changeFrom || depth < 0) {
+    return null;
+  }
+  var childIndex = $changeFrom.index(depth) + index;
+  if (childIndex >= $changeFrom.node(depth).childCount) {
+    return null;
+  }
+  return (0, _safeResolve.safeResolve)(doc, $changeFrom.posAtIndex(childIndex, depth));
+};
 var isHeadingLevel = function isHeadingLevel(level) {
   return typeof level === 'number' && level >= 1 && level <= 6;
 };
@@ -291,7 +306,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
    * and if it's the first or last content, we go in however many the sliced Open
    * or sliced End depth is and match only the entire node.
    */
-  slice.content.forEach(function (node) {
+  slice.content.forEach(function (node, _offset, index) {
     var isFirst = firstReplacedNode === node;
     var isLast = lastReplacedNode === node;
     var isOpenAtSliceBoundary = isFirst && slice.openStart > 0 || isLast && slice.openEnd > 0;
@@ -362,7 +377,8 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     }
 
     // Try to create node view, fallback to serialization
-    var nodeView = serializer.tryCreateNodeView(node);
+    var $sourcePos = (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? getSourcePos(doc, $changeFromA, slice.openStart, index) : null;
+    var nodeView = serializer.tryCreateNodeView(node, 0, $sourcePos !== null && $sourcePos !== void 0 ? $sourcePos : undefined);
     if (nodeView) {
       if (node.isInline) {
         var wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted, reveal);
@@ -465,18 +481,27 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     });
   }
 
-  // Needed even when the indicator bar is off, because a contributor tag also anchors against the
-  // widget.
+  // Needed even with the indicator bar off, since it anchors its top/bottom to the widget.
   if (showIndicators || showContributorTags) {
     dom.style.setProperty('anchor-name', "--".concat((0, _decorationKeys.buildAnchorDecorationKey)({
       diffId: diffId
     })));
-    // The tag built below only anchors via `anchor()` if `contributorTagAnchorName` is set; without
-    // it the tag falls back to a non-anchored position (EDITOR-9045).
-    if ((0, _fg.fg)('confluence_ncs_step_diffing_version_history')) {
-      contributorTagAnchorName !== null && contributorTagAnchorName !== void 0 ? contributorTagAnchorName : contributorTagAnchorName = (0, _decorationKeys.buildAnchorDecorationKey)({
-        diffId: diffId
+    // `dom` is inline, so its box fragments across a line wrap and `anchor()` resolves to the
+    // wrong edge. The tag anchors to its own point marker instead (EDITOR-9286).
+    if ((0, _fg.fg)('confluence_ncs_step_diffing_version_history') && !contributorTagAnchorName) {
+      var tagPointAnchorName = (0, _decorationKeys.buildAnchorDecorationKey)({
+        diffId: diffId,
+        anchorType: _decorationKeys.AnchorTypeKey.tag
       });
+      contributorTagAnchorName = tagPointAnchorName;
+      decorations.push(_view.Decoration.widget(safeInsertPos, function () {
+        return (0, _createAnchorDecorationWidgets.createAnchorNameSpan)(tagPointAnchorName);
+      }, {
+        key: "contributor-tag-anchor-".concat(diffId),
+        side: -1,
+        marks: [],
+        ignoreSelection: true
+      }));
     }
   }
 
@@ -511,8 +536,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
         }
       })));
     } else {
-      // Hosted at the start of the deleted run rather than on `dom` itself: `dom` is inline, so once
-      // the deleted content wraps its box is the union of its line fragments.
+      // Anchored to the point marker pushed above, not to `dom` (EDITOR-9286).
       var tagHost = (0, _createContributorTagWidget.createContributorTagHost)({
         anchorName: contributorTagAnchorName,
         diffId: diffId,

package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeView.js

@@ -321,6 +321,21 @@ var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref8)
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
+/**
+ * The element that spans breakout width, for nodes carrying a `breakout` mark. The wrapper divs
+ * stay at editor-column width, so anything that should align to the node's visible edges —
+ * outlines, absolutely positioned lozenges — has to attach here instead.
+ */
+var findBreakoutElement = function findBreakoutElement(targetNode, nodeView) {
+  var _targetNode$marks;
+  var hasBreakoutMark = (_targetNode$marks = targetNode.marks) === null || _targetNode$marks === void 0 ? void 0 : _targetNode$marks.some(function (mark) {
+    return mark.type.name === 'breakout';
+  });
+  if (!hasBreakoutMark || !(nodeView instanceof HTMLElement)) {
+    return null;
+  }
+  return nodeView.matches('[data-node-type]') ? nodeView : nodeView.querySelector('[data-node-type]');
+};
 var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref9) {
   var nodeView = _ref9.nodeView,
     targetNode = _ref9.targetNode,
@@ -338,7 +353,16 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref9
   // should not also get the inline content style (borderBottom underline) on their container.
   var shouldSkipContentStyle = isInserted && nodeStyle !== undefined;
   var contentStyle = shouldSkipContentStyle ? '' : (0, _wrapBlockNodeViewStyles.getChangedContentStyle)(colorScheme, isActive, isInserted, hideAddedDiffsUnderline);
-  contentWrapper.setAttribute('style', "".concat(contentStyle).concat(nodeStyle || ''));
+
+  // A `breakout` node renders wider than the editor column while the wrapper divs
+  // stay at column width, so paint the outline on the node element that spans that width.
+  var breakoutTarget = nodeStyle ? findBreakoutElement(targetNode, nodeView) : null;
+  if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_2') && breakoutTarget) {
+    appendStyleToElement(breakoutTarget, nodeStyle !== null && nodeStyle !== void 0 ? nodeStyle : '');
+    contentWrapper.setAttribute('style', contentStyle || '');
+  } else {
+    contentWrapper.setAttribute('style', "".concat(contentStyle).concat(nodeStyle || ''));
+  }
   contentWrapper.append(nodeView);
   return contentWrapper;
 };
@@ -468,7 +492,19 @@ var wrapBlockNode = function wrapBlockNode(_ref10) {
     })) {
       return;
     }
-    blockWrapper.append(lozenge);
+
+    // `lozenge` is absolutely positioned, so it lands on the nearest positioned ancestor. For a
+    // breakout node that is the column-width wrapper, leaving the pill short of the node's
+    // right edge — host it on the breakout element, which must establish a containing block.
+    var breakoutHost = (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? findBreakoutElement(targetNode, nodeView) : null;
+    if (breakoutHost) {
+      appendStyleToElement(breakoutHost, (0, _lazyNodeView.convertToInlineCss)({
+        position: 'relative'
+      }));
+      breakoutHost.append(lozenge);
+    } else {
+      blockWrapper.append(lozenge);
+    }
   }
   var contentWrapper = createBlockNodeContentWrapper({
     nodeView: nodeView,

package/dist/cjs/pm-plugins/markViews.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapInMarkViews = void 0;
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+/**
+ * `@atlaskit/editor-prosemirror/view` doesn't re-export prosemirror-view's `MarkViewConstructor`,
+ * so it's typed locally, as `EditorSSRRenderer` does.
+ */
+
+/** Where to look up a mark's renderer, and the view to render it against. */
+
+/**
+ * Renders a mark as ProseMirror does: `view.nodeViews` also holds mark views, keyed by mark name,
+ * so `breakout` resolves whether it's registered under `markViews` or `nodeViews`. Falls back to
+ * `toDOM` — they can differ: `breakout` renders `.fabric-editor-breakout-mark-dom`, which the width
+ * CSS targets.
+ */
+var renderMarkView = function renderMarkView(mark, inline, _ref) {
+  var nodeViews = _ref.nodeViews,
+    view = _ref.view;
+  try {
+    var markView = nodeViews === null || nodeViews === void 0 ? void 0 : nodeViews[mark.type.name];
+    if (markView && view) {
+      var rendered = markView(mark, view, inline);
+      return {
+        dom: rendered.dom,
+        contentDOM: rendered.contentDOM
+      };
+    }
+    var toDOM = mark.type.spec.toDOM;
+    if (!toDOM) {
+      return null;
+    }
+    return _model.DOMSerializer.renderSpec(document, toDOM(mark, inline));
+  } catch (_unused) {
+    return null;
+  }
+};
+
+/**
+ * Wraps rendered DOM in its marks, as ProseMirror does for the live document. Without this a
+ * block node loses `breakout`, whose wrapper supplies the width. Marks nest
+ * outside-in, so `marks[0]` is outermost.
+ */
+var wrapInMarkViews = exports.wrapInMarkViews = function wrapInMarkViews(targetNode, nodeDom, sources) {
+  if (targetNode.marks.length === 0 || !(0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) {
+    return nodeDom;
+  }
+  var wrapped = nodeDom;
+  for (var index = targetNode.marks.length - 1; index >= 0; index--) {
+    var _mark = targetNode.marks[index];
+    var rendered = renderMarkView(_mark, targetNode.isInline, sources);
+    // No content hole means nowhere to nest the node, so skip the mark, not the node.
+    if (!(rendered !== null && rendered !== void 0 && rendered.contentDOM)) {
+      continue;
+    }
+    rendered.contentDOM.appendChild(wrapped);
+    wrapped = rendered.dom;
+  }
+  return wrapped;
+};

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

@@ -1,5 +1,10 @@
+import { expandedState } from '@atlaskit/editor-common/expand';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { contains } from '@atlaskit/editor-prosemirror/utils';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { createEditorProxy } from './createEditorProxy';
+import { wrapInMarkViews } from './markViews';
 
 /**
  * Utilities for working with ProseMirror node views and DOM serialization within the
@@ -28,6 +33,18 @@ export function isEditorViewWithNodeViews(view) {
   return view.nodeViews !== undefined;
 }
 
+/** Expand-family nodes whose expanded state lives in a node-keyed WeakMap. */
+const EXPAND_TYPES = new Set(['expand', 'nestedExpand']);
+
+/** Tables are the only node views that read and write positions, so only they need a preview. */
+const containsTable = node => {
+  const {
+    table
+  } = node.type.schema.nodes;
+  // `contains` only checks descendants, so the node itself is checked separately.
+  return !!table && (node.type === table || contains(node, table));
+};
+
 /**
  * Encapsulates DOM serialization and node view access/creation.
  *
@@ -66,12 +83,17 @@ export class NodeViewSerializer {
   /**
    * Appends serialized child nodes to the given contentDOM element.
    */
-  appendChildNodes(children, contentDOM) {
+  appendChildNodes(children, contentDOM, basePos = 0, editorProxy) {
+    // A node's first child sits one position inside it, and each subsequent
+    // child is offset by the previous child's `nodeSize`. Tracking this lets nested node
+    // views resolve to their real depth instead of every one of them seeing depth 0.
+    let childPos = basePos + 1;
     children.forEach(child => {
-      const childNode = this.tryCreateNodeView(child) || this.serializeNode(child);
+      const childNode = this.tryCreateNodeViewInner(child, childPos, editorProxy) || this.serializeNode(child);
       if (childNode) {
         contentDOM === null || contentDOM === void 0 ? void 0 : contentDOM.append(childNode);
       }
+      childPos += child.nodeSize;
     });
   }
 
@@ -80,8 +102,20 @@ export class NodeViewSerializer {
    *
    * Returns `null` when there is no `EditorView`, no constructor for the node type,
    * or the node type is blocklisted. Otherwise returns the constructed node view instance.
+   *
+   * `$sourcePos` is where the node sits in the doc it came from, so nested tables keep their depth.
    */
-  tryCreateNodeView(targetNode) {
+  tryCreateNodeView(targetNode, basePos = 0, $sourcePos) {
+    var _preview$rootPos;
+    if (!this.editorView) {
+      return null;
+    }
+    // The preview becomes the document every nested node view resolves its position against,
+    // so positions stay internally consistent.
+    const preview = fg('platform_editor_ai_show_diff_patch_2') && containsTable(targetNode) ? createEditorProxy(this.editorView, targetNode, $sourcePos) : null;
+    return this.tryCreateNodeViewInner(targetNode, (_preview$rootPos = preview === null || preview === void 0 ? void 0 : preview.rootPos) !== null && _preview$rootPos !== void 0 ? _preview$rootPos : basePos, preview === null || preview === void 0 ? void 0 : preview.editorProxy);
+  }
+  tryCreateNodeViewInner(targetNode, basePos = 0, editorProxy) {
     var _this$nodeViews;
     if (!this.editorView) {
       return null;
@@ -129,22 +163,44 @@ export class NodeViewSerializer {
           if (!isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') && targetNode.type.name === 'paragraph' && targetNode.children.length === 1) {
             return this.serializeFragment(targetNode.content);
           }
-          this.appendChildNodes(targetNode.children, contentDOM);
+          this.appendChildNodes(targetNode.children, contentDOM, basePos, editorProxy);
         }
-        return dom;
+        return this.withMarkViews(targetNode, dom, editorProxy);
       }
+
+      // The expand node view reads `expandedState.get(node) ?? false`, never `attrs.__expanded`.
+      // Open the preview so its tables get real layout; an existing entry is the live expand's
+      // own state, so leave it alone.
+      if (EXPAND_TYPES.has(targetNode.type.name) && !expandedState.has(targetNode) && fg('platform_editor_ai_show_diff_patch_2')) {
+        expandedState.set(targetNode, true);
+      }
+
+      // `isTableNested` is `doc.resolve(pos).depth > 0`, so the old hardcoded `0` made nested
+      // tables size as top-level. Positions are resolved against the preview document, so
+      // they are only meaningful with an editor proxy.
+      const view = editorProxy !== null && editorProxy !== void 0 ? editorProxy : this.editorView;
+      const docSize = view.state.doc.content.size;
+      const resolvedPos = editorProxy ? Math.max(0, Math.min(basePos, docSize)) : 0;
       const {
         dom,
         contentDOM
-      } = constructor(targetNode, this.editorView, () => 0, [], {});
+      } = constructor(targetNode, view, () => resolvedPos, [], {});
       // Iteratively populate children
-      this.appendChildNodes(targetNode.children, contentDOM);
-      return dom;
+      this.appendChildNodes(targetNode.children, contentDOM, basePos, editorProxy);
+      return this.withMarkViews(targetNode, dom, editorProxy);
     } catch {
       return null;
     }
   }
 
+  /** Wraps rendered DOM in its marks, rendered against the editor proxy when there is one. */
+  withMarkViews(targetNode, nodeDom, editorProxy) {
+    return wrapInMarkViews(targetNode, nodeDom, {
+      nodeViews: this.nodeViews,
+      view: editorProxy !== null && editorProxy !== void 0 ? editorProxy : this.editorView
+    });
+  }
+
   /**
    * Serializes a node to a DOM `Node` using the schema's `DOMSerializer`.
    */