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

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

@@ -5,7 +5,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';
@@ -17,6 +17,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.
+ */
+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 safeResolve(doc, $changeFrom.posAtIndex(childIndex, depth));
+};
 var isHeadingLevel = function isHeadingLevel(level) {
   return typeof level === 'number' && level >= 1 && level <= 6;
 };
@@ -284,7 +300,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
    * 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;
@@ -355,7 +371,8 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     }
 
     // Try to create node view, fallback to serialization
-    var nodeView = serializer.tryCreateNodeView(node);
+    var $sourcePos = 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 = createContentWrapper(colorScheme, isActive, isInserted, reveal);
@@ -458,18 +475,27 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     });
   }
 
-  // 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(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 (fg('confluence_ncs_step_diffing_version_history')) {
-      contributorTagAnchorName !== null && contributorTagAnchorName !== void 0 ? contributorTagAnchorName : contributorTagAnchorName = 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 (fg('confluence_ncs_step_diffing_version_history') && !contributorTagAnchorName) {
+      var tagPointAnchorName = buildAnchorDecorationKey({
+        diffId: diffId,
+        anchorType: AnchorTypeKey.tag
       });
+      contributorTagAnchorName = tagPointAnchorName;
+      decorations.push(Decoration.widget(safeInsertPos, function () {
+        return createAnchorNameSpan(tagPointAnchorName);
+      }, {
+        key: "contributor-tag-anchor-".concat(diffId),
+        side: -1,
+        marks: [],
+        ignoreSelection: true
+      }));
     }
   }
 
@@ -504,8 +530,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
         }
       })));
     } 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 = createContributorTagHost({
         anchorName: contributorTagAnchorName,
         diffId: diffId,

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

@@ -314,6 +314,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,
@@ -331,7 +346,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 ? '' : 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 (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;
 };
@@ -461,7 +485,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 = 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);
+    }
   }
   var contentWrapper = createBlockNodeContentWrapper({
     nodeView: nodeView,

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

@@ -0,0 +1,60 @@
+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.
+ */
+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 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.
+ */
+export var wrapInMarkViews = function wrapInMarkViews(targetNode, nodeDom, sources) {
+  if (targetNode.marks.length === 0 || !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/types/pm-plugins/NodeViewSerializer.d.ts

@@ -1,5 +1,5 @@
 import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
-import type { Node as PMNode, Fragment } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode, Fragment, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 /**
  * Utilities for working with ProseMirror node views and DOM serialization within the
@@ -58,8 +58,13 @@ export declare 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: PMNode): Node | null;
+    tryCreateNodeView(targetNode: PMNode, basePos?: number, $sourcePos?: ResolvedPos): Node | null;
+    private tryCreateNodeViewInner;
+    /** Wraps rendered DOM in its marks, rendered against the editor proxy when there is one. */
+    private withMarkViews;
     /**
      * Serializes a node to a DOM `Node` using the schema's `DOMSerializer`.
      */

package/dist/types/pm-plugins/createEditorProxy.d.ts

@@ -0,0 +1,18 @@
+import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+/**
+ * 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 declare function createEditorProxy(liveView: EditorView, rootNode: PMNode, $sourcePos?: ResolvedPos): {
+    editorProxy: EditorView;
+    rootPos: number;
+} | null;

package/dist/types/pm-plugins/decorations/createContributorTagWidget.d.ts

@@ -68,7 +68,8 @@ export declare const resolveHoistedCodeBlockAnchor: (doc: PMNode, pos: number, d
  * 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`.

package/dist/types/pm-plugins/markViews.d.ts

@@ -0,0 +1,14 @@
+import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+/** Where to look up a mark's renderer, and the view to render it against. */
+export type MarkViewSources = {
+    nodeViews?: Record<string, NodeViewConstructor>;
+    view?: EditorView;
+};
+/**
+ * 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 declare const wrapInMarkViews: (targetNode: PMNode, nodeDom: Node, sources: MarkViewSources) => Node;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "20.0.11",
+	"version": "21.0.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,17 +29,17 @@
 		"@atlaskit/agent-color": "^1.0.0",
 		"@atlaskit/avatar": "^30.0.0",
 		"@atlaskit/custom-steps": "^1.1.0",
-		"@atlaskit/editor-plugin-accessibility-utils": "^22.0.0",
-		"@atlaskit/editor-plugin-analytics": "^22.0.0",
-		"@atlaskit/editor-plugin-limited-mode": "^19.0.0",
-		"@atlaskit/editor-plugin-user-intent": "^20.0.0",
+		"@atlaskit/editor-plugin-accessibility-utils": "^23.0.0",
+		"@atlaskit/editor-plugin-analytics": "^23.0.0",
+		"@atlaskit/editor-plugin-limited-mode": "^20.0.0",
+		"@atlaskit/editor-plugin-user-intent": "^21.0.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
 		"@atlaskit/editor-shared-styles": "^4.3.0",
 		"@atlaskit/editor-tables": "^3.2.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
-		"@atlaskit/tmp-editor-statsig": "^218.0.0",
+		"@atlaskit/tmp-editor-statsig": "^219.0.0",
 		"@atlaskit/tokens": "^20.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
@@ -53,7 +53,7 @@
 		"@atlaskit/button": "^25.4.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/dropdown-menu": "^20.0.0",
-		"@atlaskit/editor-core": "^232.0.0",
+		"@atlaskit/editor-core": "^233.0.0",
 		"@atlaskit/editor-json-transformer": "^10.0.0",
 		"@atlaskit/editor-plugins": "^16.1.0",
 		"@atlaskit/form": "^18.0.0",
@@ -63,15 +63,15 @@
 		"@atlaskit/util-data-test": "^19.1.0",
 		"@atlassian/confluence-presets": "workspace:^",
 		"@atlassian/content-reconciliation": "^0.1.3506",
-		"@atlassian/editor-ai-injected-editors": "^36.0.0",
-		"@atlassian/editor-plugin-ai": "^76.1.0",
+		"@atlassian/editor-ai-injected-editors": "^37.0.0",
+		"@atlassian/editor-plugin-ai": "^77.0.0",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^126.4.0",
+		"@atlaskit/editor-common": "^127.0.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"