@atlaskit/editor-plugin-show-diff 15.1.8 → 15.1.9

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 15.1.9
+
+### Patch Changes
+
+- [`e3e068dfdea34`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3e068dfdea34) -
+  [ux] Behind `platform_editor_ai_show_diff_patch_1`, fix scrolling to a diff landing below the top
+  of the change when `confluence_ncs_step_diffing_version_history` is enabled. Deleted content shown
+  above the content that replaced it is a zero-width widget on a more negative `side` at the same
+  position, and grouping collapsed the pair into one entry represented by the added content — so
+  scrolling resolved that range and left the deleted block above the viewport. Decorations sharing a
+  position are now ranked by the side they paint on, and a group that starts with deleted content is
+  represented by that widget, so scrolling reaches the visual start of the edit.
+
 ## 15.1.8
 
 ### Patch Changes

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

@@ -6,12 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getScrollableDecorations = void 0;
 exports.isInlineDiffDecorationRenderableInDoc = isInlineDiffDecorationRenderableInDoc;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _decorationKeys = require("./decorations/decorationKeys");
 var _isExtendedEnabled = require("./isExtendedEnabled");
+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; }
 /**
  * True if `fragment` contains at least one inline node (text, hardBreak, emoji, mention, etc.).
  * Block-only subtrees (e.g. empty paragraphs, block cards with no inline children) return false.
@@ -49,6 +52,15 @@ function specHasDiffKeyPrefix(spec, keyPrefix) {
   return Boolean(spec && (0, _typeof2.default)(spec) === 'object' && 'key' in spec && typeof spec.key === 'string' && spec.key.startsWith(keyPrefix));
 }
 
+/**
+ * Where a decoration paints relative to others at the same position: negative before the node at
+ * that position, positive after it. Only deleted-content widgets carry one — everything else is
+ * ranged, and so paints where its range starts.
+ */
+function decorationSide(decoration) {
+  return (0, _decorationKeys.isDiffDecoration)(decoration) && decoration.spec.side || 0;
+}
+
 /**
  * Collapses decorations that represent one continuous customer-facing edit.
  *
@@ -94,13 +106,29 @@ function groupTouchingDecorations(decorations, isInlineDecoration) {
     var representative = (_ref2 = (_group$find = group.find(isInlineDecoration)) !== null && _group$find !== void 0 ? _group$find : group.find(function (decoration) {
       return decoration.from !== decoration.to;
     })) !== null && _ref2 !== void 0 ? _ref2 : group[0];
-    if (!representative || representative.from === from && representative.to === to) {
+    if (!representative) {
+      return representative;
+    }
+
+    // Deleted content is a widget at the start of the added content that replaced it, on a more
+    // negative side so it paints above. That makes it the visual start of the edit, reachable
+    // only through its own DOM — resolving the group's start position lands on the added content
+    // painted after it. The group keeps its range, which navigation and the active-range
+    // calculation both need, and reports the widget as what to scroll to.
+    var scrollTarget = (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? group.find(function (decoration) {
+      return decoration.from === from && decorationSide(decoration) < decorationSide(representative);
+    }) : undefined;
+    if (!scrollTarget && representative.from === from && representative.to === to) {
       return representative;
     }
 
     // This decoration is only used for navigation and active-range calculation. The actual
-    // visual decorations remain in the DecorationSet with their original ranges and styles.
-    return isInlineDecoration(representative) ? _view.Decoration.inline(from, to, {}, representative.spec) : _view.Decoration.node(from, to, {}, representative.spec);
+    // visual decorations remain in the DecorationSet with their original ranges and styles —
+    // including their spec, hence a copy to add `scrollTarget` for `scrollToDiff` to read.
+    var spec = _objectSpread(_objectSpread({}, representative.spec), {}, {
+      scrollTarget: scrollTarget
+    });
+    return isInlineDecoration(representative) ? _view.Decoration.inline(from, to, {}, spec) : _view.Decoration.node(from, to, {}, spec);
   });
 }
 
@@ -117,7 +145,10 @@ function groupTouchingDecorations(decorations, isInlineDecoration) {
  * 5. When `confluence_ncs_step_diffing_version_history` is enabled, groups overlapping or
  *    directly touching ranges across decoration types into one result, using the union of all
  *    grouped ranges
- *    (zero-width widgets can join a group without extending it)
+ *    (zero-width widgets can join a group without extending it). Under
+ *    `platform_editor_ai_show_diff_patch_1`, a group that starts with content painting above
+ * 	  the content that replaced it — reports that widget as its `scrollTarget` spec,
+ *    so scrolling reaches the visual start of the edit
  * 6. Results are sorted by from position, then by to position
  *
  * @param set - The DecorationSet to extract scrollable decorations from

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

@@ -51,17 +51,22 @@ var scrollToDecoration = exports.scrollToDecoration = function scrollToDecoratio
   if (!decoration) {
     return function () {};
   }
+
+  // A grouped decoration spans a whole customer-facing edit, which can visually start with a
+  // deleted-content widget rather than at the group's `from` position — see `scrollTarget` in
+  // `getScrollableDecorations`. Only set under `platform_editor_ai_show_diff_patch_1`.
+  var target = (0, _decorationKeys.isDiffDecoration)(decoration) && decoration.spec.scrollTarget || decoration;
   var rafId = requestAnimationFrame(function () {
     rafId = null;
-    if ((0, _decorationKeys.isDiffDecoration)(decoration) && decoration.spec.decorationType === 'widget') {
-      var _decoration$type;
+    if ((0, _decorationKeys.isDiffDecoration)(target) && target.spec.decorationType === 'widget') {
+      var _target$type;
       // @ts-expect-error - decoration.type is not typed public API
-      var widgetDom = decoration === null || decoration === void 0 || (_decoration$type = decoration.type) === null || _decoration$type === void 0 ? void 0 : _decoration$type.toDOM;
+      var widgetDom = target === null || target === void 0 || (_target$type = target.type) === null || _target$type === void 0 ? void 0 : _target$type.toDOM;
       scrollToSelection(widgetDom);
     } else {
       var _view$domAtPos;
-      var targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
-      var node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
+      var targetNode = view.nodeDOM(target === null || target === void 0 ? void 0 : target.from);
+      var node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(target === null || target === void 0 ? void 0 : target.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
       scrollToSelection(node);
     }
   });

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

@@ -40,6 +40,15 @@ function specHasDiffKeyPrefix(spec, keyPrefix) {
   return Boolean(spec && typeof spec === 'object' && 'key' in spec && typeof spec.key === 'string' && spec.key.startsWith(keyPrefix));
 }
 
+/**
+ * Where a decoration paints relative to others at the same position: negative before the node at
+ * that position, positive after it. Only deleted-content widgets carry one — everything else is
+ * ranged, and so paints where its range starts.
+ */
+function decorationSide(decoration) {
+  return isDiffDecoration(decoration) && decoration.spec.side || 0;
+}
+
 /**
  * Collapses decorations that represent one continuous customer-facing edit.
  *
@@ -82,13 +91,28 @@ function groupTouchingDecorations(decorations, isInlineDecoration) {
   }) => {
     var _ref, _group$find;
     const representative = (_ref = (_group$find = group.find(isInlineDecoration)) !== null && _group$find !== void 0 ? _group$find : group.find(decoration => decoration.from !== decoration.to)) !== null && _ref !== void 0 ? _ref : group[0];
-    if (!representative || representative.from === from && representative.to === to) {
+    if (!representative) {
+      return representative;
+    }
+
+    // Deleted content is a widget at the start of the added content that replaced it, on a more
+    // negative side so it paints above. That makes it the visual start of the edit, reachable
+    // only through its own DOM — resolving the group's start position lands on the added content
+    // painted after it. The group keeps its range, which navigation and the active-range
+    // calculation both need, and reports the widget as what to scroll to.
+    const scrollTarget = fg('platform_editor_ai_show_diff_patch_1') ? group.find(decoration => decoration.from === from && decorationSide(decoration) < decorationSide(representative)) : undefined;
+    if (!scrollTarget && representative.from === from && representative.to === to) {
       return representative;
     }
 
     // This decoration is only used for navigation and active-range calculation. The actual
-    // visual decorations remain in the DecorationSet with their original ranges and styles.
-    return isInlineDecoration(representative) ? Decoration.inline(from, to, {}, representative.spec) : Decoration.node(from, to, {}, representative.spec);
+    // visual decorations remain in the DecorationSet with their original ranges and styles —
+    // including their spec, hence a copy to add `scrollTarget` for `scrollToDiff` to read.
+    const spec = {
+      ...representative.spec,
+      scrollTarget
+    };
+    return isInlineDecoration(representative) ? Decoration.inline(from, to, {}, spec) : Decoration.node(from, to, {}, spec);
   });
 }
 
@@ -105,7 +129,10 @@ function groupTouchingDecorations(decorations, isInlineDecoration) {
  * 5. When `confluence_ncs_step_diffing_version_history` is enabled, groups overlapping or
  *    directly touching ranges across decoration types into one result, using the union of all
  *    grouped ranges
- *    (zero-width widgets can join a group without extending it)
+ *    (zero-width widgets can join a group without extending it). Under
+ *    `platform_editor_ai_show_diff_patch_1`, a group that starts with content painting above
+ * 	  the content that replaced it — reports that widget as its `scrollTarget` spec,
+ *    so scrolling reaches the visual start of the edit
  * 6. Results are sorted by from position, then by to position
  *
  * @param set - The DecorationSet to extract scrollable decorations from

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

@@ -45,17 +45,22 @@ export const scrollToDecoration = (view, decorations, activeIndex = 0) => {
   if (!decoration) {
     return () => {};
   }
+
+  // A grouped decoration spans a whole customer-facing edit, which can visually start with a
+  // deleted-content widget rather than at the group's `from` position — see `scrollTarget` in
+  // `getScrollableDecorations`. Only set under `platform_editor_ai_show_diff_patch_1`.
+  const target = isDiffDecoration(decoration) && decoration.spec.scrollTarget || decoration;
   let rafId = requestAnimationFrame(() => {
     rafId = null;
-    if (isDiffDecoration(decoration) && decoration.spec.decorationType === 'widget') {
-      var _decoration$type;
+    if (isDiffDecoration(target) && target.spec.decorationType === 'widget') {
+      var _target$type;
       // @ts-expect-error - decoration.type is not typed public API
-      const widgetDom = decoration === null || decoration === void 0 ? void 0 : (_decoration$type = decoration.type) === null || _decoration$type === void 0 ? void 0 : _decoration$type.toDOM;
+      const widgetDom = target === null || target === void 0 ? void 0 : (_target$type = target.type) === null || _target$type === void 0 ? void 0 : _target$type.toDOM;
       scrollToSelection(widgetDom);
     } else {
       var _view$domAtPos;
-      const targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
-      const node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
+      const targetNode = view.nodeDOM(target === null || target === void 0 ? void 0 : target.from);
+      const node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(target === null || target === void 0 ? void 0 : target.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
       scrollToSelection(node);
     }
   });

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

@@ -1,5 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _typeof from "@babel/runtime/helpers/typeof";
+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) { _defineProperty(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; }
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { DiffDecorationKey, isDiffDecoration, isDiffDecorationSpec } from './decorations/decorationKeys';
@@ -42,6 +45,15 @@ function specHasDiffKeyPrefix(spec, keyPrefix) {
   return Boolean(spec && _typeof(spec) === 'object' && 'key' in spec && typeof spec.key === 'string' && spec.key.startsWith(keyPrefix));
 }
 
+/**
+ * Where a decoration paints relative to others at the same position: negative before the node at
+ * that position, positive after it. Only deleted-content widgets carry one — everything else is
+ * ranged, and so paints where its range starts.
+ */
+function decorationSide(decoration) {
+  return isDiffDecoration(decoration) && decoration.spec.side || 0;
+}
+
 /**
  * Collapses decorations that represent one continuous customer-facing edit.
  *
@@ -87,13 +99,29 @@ function groupTouchingDecorations(decorations, isInlineDecoration) {
     var representative = (_ref2 = (_group$find = group.find(isInlineDecoration)) !== null && _group$find !== void 0 ? _group$find : group.find(function (decoration) {
       return decoration.from !== decoration.to;
     })) !== null && _ref2 !== void 0 ? _ref2 : group[0];
-    if (!representative || representative.from === from && representative.to === to) {
+    if (!representative) {
+      return representative;
+    }
+
+    // Deleted content is a widget at the start of the added content that replaced it, on a more
+    // negative side so it paints above. That makes it the visual start of the edit, reachable
+    // only through its own DOM — resolving the group's start position lands on the added content
+    // painted after it. The group keeps its range, which navigation and the active-range
+    // calculation both need, and reports the widget as what to scroll to.
+    var scrollTarget = fg('platform_editor_ai_show_diff_patch_1') ? group.find(function (decoration) {
+      return decoration.from === from && decorationSide(decoration) < decorationSide(representative);
+    }) : undefined;
+    if (!scrollTarget && representative.from === from && representative.to === to) {
       return representative;
     }
 
     // This decoration is only used for navigation and active-range calculation. The actual
-    // visual decorations remain in the DecorationSet with their original ranges and styles.
-    return isInlineDecoration(representative) ? Decoration.inline(from, to, {}, representative.spec) : Decoration.node(from, to, {}, representative.spec);
+    // visual decorations remain in the DecorationSet with their original ranges and styles —
+    // including their spec, hence a copy to add `scrollTarget` for `scrollToDiff` to read.
+    var spec = _objectSpread(_objectSpread({}, representative.spec), {}, {
+      scrollTarget: scrollTarget
+    });
+    return isInlineDecoration(representative) ? Decoration.inline(from, to, {}, spec) : Decoration.node(from, to, {}, spec);
   });
 }
 
@@ -110,7 +138,10 @@ function groupTouchingDecorations(decorations, isInlineDecoration) {
  * 5. When `confluence_ncs_step_diffing_version_history` is enabled, groups overlapping or
  *    directly touching ranges across decoration types into one result, using the union of all
  *    grouped ranges
- *    (zero-width widgets can join a group without extending it)
+ *    (zero-width widgets can join a group without extending it). Under
+ *    `platform_editor_ai_show_diff_patch_1`, a group that starts with content painting above
+ * 	  the content that replaced it — reports that widget as its `scrollTarget` spec,
+ *    so scrolling reaches the visual start of the edit
  * 6. Results are sorted by from position, then by to position
  *
  * @param set - The DecorationSet to extract scrollable decorations from

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

@@ -46,17 +46,22 @@ export var scrollToDecoration = function scrollToDecoration(view, decorations) {
   if (!decoration) {
     return function () {};
   }
+
+  // A grouped decoration spans a whole customer-facing edit, which can visually start with a
+  // deleted-content widget rather than at the group's `from` position — see `scrollTarget` in
+  // `getScrollableDecorations`. Only set under `platform_editor_ai_show_diff_patch_1`.
+  var target = isDiffDecoration(decoration) && decoration.spec.scrollTarget || decoration;
   var rafId = requestAnimationFrame(function () {
     rafId = null;
-    if (isDiffDecoration(decoration) && decoration.spec.decorationType === 'widget') {
-      var _decoration$type;
+    if (isDiffDecoration(target) && target.spec.decorationType === 'widget') {
+      var _target$type;
       // @ts-expect-error - decoration.type is not typed public API
-      var widgetDom = decoration === null || decoration === void 0 || (_decoration$type = decoration.type) === null || _decoration$type === void 0 ? void 0 : _decoration$type.toDOM;
+      var widgetDom = target === null || target === void 0 || (_target$type = target.type) === null || _target$type === void 0 ? void 0 : _target$type.toDOM;
       scrollToSelection(widgetDom);
     } else {
       var _view$domAtPos;
-      var targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
-      var node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
+      var targetNode = view.nodeDOM(target === null || target === void 0 ? void 0 : target.from);
+      var node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(target === null || target === void 0 ? void 0 : target.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
       scrollToSelection(node);
     }
   });

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

@@ -32,6 +32,14 @@ export type DiffDecorationSpec = BaseDecorationSpec<typeof DecorationFamily.diff
      */
     isInserted?: boolean;
     nodeName?: string;
+    /**
+     * The decoration to scroll to, when it is not the one carrying this spec: the member of a merged
+     * navigation group that paints first. Deleted content is a widget shown above the added content
+     * it replaces, and only that widget's own DOM can be scrolled to — resolving the group's `from`
+     * position lands on the added content painted after it. Set by `getScrollableDecorations`,
+     * consumed by `scrollToDiff`; never present on a decoration in the plugin's `DecorationSet`.
+     */
+    scrollTarget?: Decoration;
 };
 export declare const AnchorTypeKey: {
     readonly from: 'from';

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

@@ -20,7 +20,10 @@ export declare function isInlineDiffDecorationRenderableInDoc(doc: PMNode, from:
  * 5. When `confluence_ncs_step_diffing_version_history` is enabled, groups overlapping or
  *    directly touching ranges across decoration types into one result, using the union of all
  *    grouped ranges
- *    (zero-width widgets can join a group without extending it)
+ *    (zero-width widgets can join a group without extending it). Under
+ *    `platform_editor_ai_show_diff_patch_1`, a group that starts with content painting above
+ * 	  the content that replaced it — reports that widget as its `scrollTarget` spec,
+ *    so scrolling reaches the visual start of the edit
  * 6. Results are sorted by from position, then by to position
  *
  * @param set - The DecorationSet to extract scrollable decorations from

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "15.1.8",
+	"version": "15.1.9",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",