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

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`.
    */

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

@@ -1,5 +1,7 @@
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getDiffableAttrNames } from '../decorations/utils/diffableAttrs';
+import { getComparableExcerptIncludeAttrs, isExcerptInclude } from '../decorations/utils/excerptIncludeAttrs';
 import { encodeCharacterWithMarks } from './encodeCharacterWithMarks';
 
 /**
@@ -11,14 +13,12 @@ import { encodeCharacterWithMarks } from './encodeCharacterWithMarks';
  */
 
 // Stable composite token; attr names are pre-ordered by the caller.
-const encodeNodeWithAttrs = (node, attrNames) => {
-  var _node$attrs;
-  const attrs = (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 ? _node$attrs : {};
+const encodeNodeWithAttrs = (nodeTypeName, attrs, attrNames) => {
   const parts = attrNames.map(name => {
     var _attrs$name;
     return `${name}=${JSON.stringify((_attrs$name = attrs[name]) !== null && _attrs$name !== void 0 ? _attrs$name : null)}`;
   });
-  return `${node.type.name}|${parts.join('|')}`;
+  return `${nodeTypeName}|${parts.join('|')}`;
 };
 
 // Like the library default, but node types with a `diffableAttrs` rule fold their
@@ -27,11 +27,13 @@ const encodeNodeWithAttrs = (node, attrNames) => {
 export const attrAwareTokenEncoder = {
   encodeCharacter: (char, marks) => encodeCharacterWithMarks(char, marks),
   encodeNodeStart: node => {
-    var _node$attrs2;
+    // A one-sided reference is not comparable from an isolated token. Attribute-step comparison
+    // checks the reference when both versions have one.
+    const attrs = fg('platform_editor_normalize_excerpt_diff') && node.type.name === 'extension' && isExcerptInclude(node.attrs) ? getComparableExcerptIncludeAttrs(node.attrs) : node.attrs;
     // Normalise variants (e.g. `panel_c1` → `panel`) so `diffableAttrs` needs one entry.
-    const attrNames = getDiffableAttrNames(getBaseNodeTypeName(node.type), (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 ? _node$attrs2 : {});
+    const attrNames = getDiffableAttrNames(getBaseNodeTypeName(node.type), attrs !== null && attrs !== void 0 ? attrs : {});
     if (attrNames && attrNames.length > 0) {
-      return encodeNodeWithAttrs(node, attrNames);
+      return encodeNodeWithAttrs(node.type.name, attrs, attrNames);
     }
     return node.type.name;
   },

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/excerptIncludeAttrs.js

@@ -0,0 +1,13 @@
+import pick from 'lodash/pick';
+const asRecord = value => value !== null && typeof value === 'object' && !Array.isArray(value) ? value : undefined;
+export const isExcerptInclude = attrs => attrs.extensionKey === 'excerpt-include';
+export const getReferencedContentId = attrs => {
+  var _asRecord;
+  const parameters = asRecord(attrs.parameters);
+  const macroParams = asRecord(parameters === null || parameters === void 0 ? void 0 : parameters.macroParams);
+  const value = (_asRecord = asRecord(macroParams === null || macroParams === void 0 ? void 0 : macroParams._referencedContentId)) === null || _asRecord === void 0 ? void 0 : _asRecord.value;
+  return typeof value === 'string' ? value : undefined;
+};
+
+/** Compare macro identity and authored options, excluding publish-time rendering metadata. */
+export const getComparableExcerptIncludeAttrs = attrs => pick(attrs, ['extensionType', 'layout', 'parameters.macroMetadata.macroId.value', 'parameters.macroParams[""].value', 'parameters.macroParams.name.value', 'parameters.macroParams.nopanel.value', 'parameters.macroParams.inline.value']);

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

@@ -3,7 +3,9 @@ import omit from 'lodash/omit';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps/set-attrs';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getRequiredIncludedDiffableAttrs, isDiffableAttr } from './diffableAttrs';
+import { getComparableExcerptIncludeAttrs, getReferencedContentId, isExcerptInclude } from './excerptIncludeAttrs';
 const filterUndefined = x => !!x;
 
 // Attr lists sourced from the shared `diffableAttrs` map (shared with the encoder).
@@ -34,7 +36,14 @@ const transientExtensionAttrPaths = ['localId', 'parameters.macroParams._parentI
  * extension's user-visible configuration.
  */
 const getComparableExtensionAttrs = node => omit(node.attrs, transientExtensionAttrPaths);
-const haveSameRelevantExtensionAttrs = (beforeNode, afterNode) => isEqual(getComparableExtensionAttrs(beforeNode), getComparableExtensionAttrs(afterNode));
+const haveSameRelevantExtensionAttrs = (beforeNode, afterNode) => {
+  if (fg('platform_editor_normalize_excerpt_diff') && isExcerptInclude(beforeNode.attrs) && isExcerptInclude(afterNode.attrs)) {
+    const beforeReference = getReferencedContentId(beforeNode.attrs);
+    const afterReference = getReferencedContentId(afterNode.attrs);
+    return isEqual(getComparableExcerptIncludeAttrs(beforeNode.attrs), getComparableExcerptIncludeAttrs(afterNode.attrs)) && (beforeReference === undefined || afterReference === undefined || beforeReference === afterReference);
+  }
+  return isEqual(getComparableExtensionAttrs(beforeNode), getComparableExtensionAttrs(afterNode));
+};
 const getStepAttrs = step => {
   if (step instanceof AttrStep) {
     return [step.attr];

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;
+};