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

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

@@ -0,0 +1,76 @@
+import { GapCursorSelection, Side } from '@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.
+ */
+export function createEditorProxy(liveView, rootNode, $sourcePos) {
+  const liveState = liveView.state;
+  const createDoc = topLevel => liveState.schema.topNodeType.createChecked(null, topLevel);
+  let previewDoc;
+  let 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) {
+      let topLevel = rootNode;
+      for (let depth = $sourcePos.depth; depth > 0; depth--) {
+        const 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 {
+    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.
+  const previewSelection = new GapCursorSelection(previewDoc.resolve(rootPos), 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.
+  let stateProxy = new Proxy(liveState, {
+    get(target, prop, receiver) {
+      if (prop === 'doc') {
+        return previewDoc;
+      }
+      if (prop === 'selection') {
+        return previewSelection;
+      }
+      return Reflect.get(target, prop, receiver);
+    }
+  });
+  const editorProxy = new Proxy(liveView, {
+    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 tr => {
+          try {
+            stateProxy = stateProxy.apply(tr);
+          } catch {
+            // A preview is throwaway; a failed self-update is not worth surfacing.
+          }
+        };
+      }
+      const value = Reflect.get(target, prop, receiver);
+      return typeof value === 'function' ? value.bind(target) : value;
+    }
+  });
+  return {
+    editorProxy,
+    rootPos
+  };
+}

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

@@ -2,8 +2,8 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { ContributorTagController } from '../../ui/ContributorTag/contributorTagController';
 import { buildCharsByOffset, isWhitespaceChar } from '../utils/charsByOffset';
-import { clampAnchorPosIntoCell } from './createAnchorDecorationWidgets';
-import { AnchorTypeKey, buildAnchorDecorationKey, buildContributorTagDecorationSpec } from './decorationKeys';
+import { clampAnchorPosIntoCell, createAnchorNameSpan } from './createAnchorDecorationWidgets';
+import { AnchorTypeKey, buildAnchorDecorationKey, buildAnchorDecorationSpec, buildContributorTagDecorationSpec } from './decorationKeys';
 
 /** Marks the host element of one tag, so a tag can be found in the document by its own diff. */
 export const CONTRIBUTOR_TAG_HOST_ATTRIBUTE = 'data-contributor-tag-host';
@@ -212,7 +212,8 @@ export const resolveHoistedCodeBlockAnchor = (doc, pos, diffId) => {
  * 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`.
@@ -226,7 +227,7 @@ export const createContributorTagWidget = ({
   diffId,
   mountContext
 }) => {
-  var _hoisted$anchorName, _hoisted$codeBlockSta;
+  var _hoisted$codeBlockSta, _ref2, _hoisted$anchorName;
   if (!isContributorTagWidgetEnabled()) {
     return undefined;
   }
@@ -238,15 +239,32 @@ export const createContributorTagWidget = ({
   // A change inside a code block is hoisted out of it, anchored to its own marker; anything else
   // keeps its own anchor.
   const hoisted = resolveHoistedCodeBlockAnchor(doc, anchorPos, diffId);
-  const 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).
+  const hostPos = 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).
+  const ownAnchorName = buildAnchorDecorationKey({
+    diffId,
+    anchorType: AnchorTypeKey.tag
+  });
+  const effectiveAnchorName = (_ref2 = (_hoisted$anchorName = hoisted === null || hoisted === void 0 ? void 0 : hoisted.anchorName) !== null && _hoisted$anchorName !== void 0 ? _hoisted$anchorName : anchorName) !== null && _ref2 !== void 0 ? _ref2 : ownAnchorName;
   const tagAnchorName = effectiveAnchorName && supportsAnchorPositioning() ? effectiveAnchorName : undefined;
   const decorations = [];
   if (hoisted) {
     decorations.push(hoisted.marker);
+  } else if (!anchorName && tagAnchorName) {
+    decorations.push(Decoration.widget(hostPos, () => createAnchorNameSpan(ownAnchorName), {
+      ...buildAnchorDecorationSpec({
+        diffId,
+        anchorType: AnchorTypeKey.tag,
+        side: -1
+      }),
+      marks: [],
+      ignoreSelection: true
+    }));
   }
-  decorations.push(Decoration.widget(
-  // Keep the host out of the table row's grid (EDITOR-8442).
-  clampAnchorPosIntoCell(doc, (_hoisted$codeBlockSta = hoisted === null || hoisted === void 0 ? void 0 : hoisted.codeBlockStart) !== null && _hoisted$codeBlockSta !== void 0 ? _hoisted$codeBlockSta : anchorPos, 1), () => {
+  decorations.push(Decoration.widget(hostPos, () => {
     const host = buildContributorTagHost(diffId, tagAnchorName);
     mount = mountContributorTag({
       anchorName: tagAnchorName,

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

@@ -2,7 +2,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { countEmptyTextBlockOnlySlice } from '../utils/emptyTextBlocks';
 import { isEmptyParagraphSlice } from '../utils/isEmptyParagraphSlice';
-import { clampAnchorPosIntoCell, createLeftAnchorWidget } from './createAnchorDecorationWidgets';
+import { clampAnchorPosIntoCell, createAnchorNameSpan, createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { createContributorTagHost, resolveHoistedCodeBlockAnchor, unmountContributorTag } from './createContributorTagWidget';
 import { AnchorTypeKey, buildContributorTagDecorationSpec, buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
@@ -14,6 +14,22 @@ import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { safeResolve } from './utils/safeResolve';
 import { getTableDiffMode } from './utils/tableDiffMode';
 import { wrapBlockNodeView, createRemovedLozenge, injectInnerWrapper, createContentWrapper } from './utils/wrapBlockNodeView';
+
+/**
+ * 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.
+ */
+const getSourcePos = (doc, $changeFrom, openStart, index) => {
+  const depth = $changeFrom ? $changeFrom.depth - openStart : -1;
+  if (!$changeFrom || depth < 0) {
+    return null;
+  }
+  const childIndex = $changeFrom.index(depth) + index;
+  if (childIndex >= $changeFrom.node(depth).childCount) {
+    return null;
+  }
+  return safeResolve(doc, $changeFrom.posAtIndex(childIndex, depth));
+};
 const isHeadingLevel = level => typeof level === 'number' && level >= 1 && level <= 6;
 
 /**
@@ -282,7 +298,7 @@ export const createNodeChangedDecorationWidget = ({
    * 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(node => {
+  slice.content.forEach((node, _offset, index) => {
     const isFirst = firstReplacedNode === node;
     const isLast = lastReplacedNode === node;
     const isOpenAtSliceBoundary = isFirst && slice.openStart > 0 || isLast && slice.openEnd > 0;
@@ -347,7 +363,8 @@ export const createNodeChangedDecorationWidget = ({
     }
 
     // Try to create node view, fallback to serialization
-    const nodeView = serializer.tryCreateNodeView(node);
+    const $sourcePos = fg('platform_editor_ai_show_diff_patch_2') ? getSourcePos(doc, $changeFromA, slice.openStart, index) : null;
+    const nodeView = serializer.tryCreateNodeView(node, 0, $sourcePos !== null && $sourcePos !== void 0 ? $sourcePos : undefined);
     if (nodeView) {
       if (node.isInline) {
         const wrapper = createContentWrapper(colorScheme, isActive, isInserted, reveal);
@@ -450,18 +467,25 @@ export const createNodeChangedDecorationWidget = ({
     });
   }
 
-  // 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', `--${buildAnchorDecorationKey({
       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 (fg('confluence_ncs_step_diffing_version_history')) {
-      contributorTagAnchorName ??= buildAnchorDecorationKey({
-        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 (fg('confluence_ncs_step_diffing_version_history') && !contributorTagAnchorName) {
+      const tagPointAnchorName = buildAnchorDecorationKey({
+        diffId,
+        anchorType: AnchorTypeKey.tag
       });
+      contributorTagAnchorName = tagPointAnchorName;
+      decorations.push(Decoration.widget(safeInsertPos, () => createAnchorNameSpan(tagPointAnchorName), {
+        key: `contributor-tag-anchor-${diffId}`,
+        side: -1,
+        marks: [],
+        ignoreSelection: true
+      }));
     }
   }
 
@@ -495,8 +519,7 @@ export const createNodeChangedDecorationWidget = ({
         }
       }));
     } 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).
       const tagHost = createContributorTagHost({
         anchorName: contributorTagAnchorName,
         diffId,

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

@@ -311,6 +311,19 @@ const applyTextLikeBlockNodeStyles = ({
 /**
  * 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.
+ */
+const findBreakoutElement = (targetNode, nodeView) => {
+  var _targetNode$marks;
+  const hasBreakoutMark = (_targetNode$marks = targetNode.marks) === null || _targetNode$marks === void 0 ? void 0 : _targetNode$marks.some(mark => mark.type.name === 'breakout');
+  if (!hasBreakoutMark || !(nodeView instanceof HTMLElement)) {
+    return null;
+  }
+  return nodeView.matches('[data-node-type]') ? nodeView : nodeView.querySelector('[data-node-type]');
+};
 const createBlockNodeContentWrapper = ({
   nodeView,
   targetNode,
@@ -328,7 +341,16 @@ const createBlockNodeContentWrapper = ({
   // should not also get the inline content style (borderBottom underline) on their container.
   const shouldSkipContentStyle = isInserted && nodeStyle !== undefined;
   const contentStyle = shouldSkipContentStyle ? '' : getChangedContentStyle(colorScheme, isActive, isInserted, hideAddedDiffsUnderline);
-  contentWrapper.setAttribute('style', `${contentStyle}${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.
+  const breakoutTarget = nodeStyle ? findBreakoutElement(targetNode, nodeView) : null;
+  if (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', `${contentStyle}${nodeStyle || ''}`);
+  }
   contentWrapper.append(nodeView);
   return contentWrapper;
 };
@@ -456,7 +478,19 @@ const wrapBlockNode = ({
     })) {
       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.
+    const breakoutHost = fg('platform_editor_ai_show_diff_patch_2') ? findBreakoutElement(targetNode, nodeView) : null;
+    if (breakoutHost) {
+      appendStyleToElement(breakoutHost, convertToInlineCss({
+        position: 'relative'
+      }));
+      breakoutHost.append(lozenge);
+    } else {
+      blockWrapper.append(lozenge);
+    }
   }
   const contentWrapper = createBlockNodeContentWrapper({
     nodeView,

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

@@ -0,0 +1,61 @@
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@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.
+ */
+const renderMarkView = (mark, inline, {
+  nodeViews,
+  view
+}) => {
+  try {
+    const markView = nodeViews === null || nodeViews === void 0 ? void 0 : nodeViews[mark.type.name];
+    if (markView && view) {
+      const rendered = markView(mark, view, inline);
+      return {
+        dom: rendered.dom,
+        contentDOM: rendered.contentDOM
+      };
+    }
+    const toDOM = mark.type.spec.toDOM;
+    if (!toDOM) {
+      return null;
+    }
+    return DOMSerializer.renderSpec(document, toDOM(mark, inline));
+  } catch {
+    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.
+ */
+export const wrapInMarkViews = (targetNode, nodeDom, sources) => {
+  if (targetNode.marks.length === 0 || !fg('platform_editor_ai_show_diff_patch_2')) {
+    return nodeDom;
+  }
+  let wrapped = nodeDom;
+  for (let index = targetNode.marks.length - 1; index >= 0; index--) {
+    const mark = targetNode.marks[index];
+    const 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/esm/pm-plugins/NodeViewSerializer.js

@@ -1,7 +1,12 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+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
@@ -30,6 +35,16 @@ export 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 || contains(node, table));
+};
+
 /**
  * Encapsulates DOM serialization and node view access/creation.
  *
@@ -75,11 +90,18 @@ export var 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;
       });
     }
 
@@ -88,11 +110,29 @@ export var 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 = 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);
+    }
+  }, {
+    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;
       }
@@ -138,23 +178,47 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
             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);
         }
-        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) && !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.
+        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 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/esm/pm-plugins/createEditorProxy.js

@@ -0,0 +1,78 @@
+import { GapCursorSelection, Side } from '@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.
+ */
+export 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 GapCursorSelection(previewDoc.resolve(rootPos), 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/esm/pm-plugins/decorations/createContributorTagWidget.js

@@ -5,8 +5,8 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { ContributorTagController } from '../../ui/ContributorTag/contributorTagController';
 import { buildCharsByOffset, isWhitespaceChar } from '../utils/charsByOffset';
-import { clampAnchorPosIntoCell } from './createAnchorDecorationWidgets';
-import { AnchorTypeKey, buildAnchorDecorationKey, buildContributorTagDecorationSpec } from './decorationKeys';
+import { clampAnchorPosIntoCell, createAnchorNameSpan } from './createAnchorDecorationWidgets';
+import { AnchorTypeKey, buildAnchorDecorationKey, buildAnchorDecorationSpec, buildContributorTagDecorationSpec } from './decorationKeys';
 
 /** Marks the host element of one tag, so a tag can be found in the document by its own diff. */
 export var CONTRIBUTOR_TAG_HOST_ATTRIBUTE = 'data-contributor-tag-host';
@@ -218,13 +218,14 @@ export var resolveHoistedCodeBlockAnchor = function resolveHoistedCodeBlockAncho
  * 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`.
  */
 export var 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,
@@ -244,15 +245,33 @@ export var createContributorTagWidget = function createContributorTagWidget(_ref
   // 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 = 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 = buildAnchorDecorationKey({
+    diffId: diffId,
+    anchorType: 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(Decoration.widget(hostPos, function () {
+      return createAnchorNameSpan(ownAnchorName);
+    }, _objectSpread(_objectSpread({}, buildAnchorDecorationSpec({
+      diffId: diffId,
+      anchorType: AnchorTypeKey.tag,
+      side: -1
+    })), {}, {
+      marks: [],
+      ignoreSelection: true
+    })));
   }
-  decorations.push(Decoration.widget(
-  // Keep the host out of the table row's grid (EDITOR-8442).
-  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(Decoration.widget(hostPos, function () {
     var host = buildContributorTagHost(diffId, tagAnchorName);
     mount = mountContributorTag({
       anchorName: tagAnchorName,