@atlaskit/editor-plugin-show-diff 5.0.2 → 5.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 5.0.3
+
+### Patch Changes
+
+- [`8bddf4c001143`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8bddf4c001143) -
+  Improve scrolling to diffs on the page by focusing before scroll
+- Updated dependencies
+
 ## 5.0.2
 
 ### Patch Changes

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

@@ -14,6 +14,7 @@ var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _calculateDiffDecorations = require("./calculateDiffDecorations");
 var _NodeViewSerializer = require("./NodeViewSerializer");
+var _scrollToActiveDecoration = require("./scrollToActiveDecoration");
 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; }
 var showDiffPluginKey = exports.showDiffPluginKey = new _state2.PluginKey('showDiffPlugin');
@@ -32,40 +33,6 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl)
   };
   return new _safePlugin.SafePlugin({
     key: showDiffPluginKey,
-    appendTransaction: function appendTransaction(transactions, oldState, newState) {
-      var _pluginState$activeIn;
-      if (!(0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
-        return;
-      }
-      // Check if any transaction contains scroll actions
-      var scrollTransaction = transactions.find(function (tr) {
-        var _tr$getMeta, _tr$getMeta2;
-        return ((_tr$getMeta = tr.getMeta(showDiffPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.action) === 'SCROLL_TO_NEXT' || ((_tr$getMeta2 = tr.getMeta(showDiffPluginKey)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.action) === 'SCROLL_TO_PREVIOUS';
-      });
-      if (!scrollTransaction) {
-        return;
-      }
-      var pluginState = showDiffPluginKey.getState(newState);
-      if (!pluginState || pluginState.decorations.find().length === 0) {
-        return;
-      }
-      var decorations = getScrollableDecorations(pluginState.decorations);
-      var decoration = decorations[(_pluginState$activeIn = pluginState.activeIndex) !== null && _pluginState$activeIn !== void 0 ? _pluginState$activeIn : 0];
-      if (!decoration) {
-        return;
-      }
-      var from = decoration.from,
-        to = decoration.to;
-      var $pos = newState.doc.resolve(from);
-      var isNodeSelection = $pos.nodeAfter && $pos.nodeAfter.nodeSize === to - from && !$pos.nodeAfter.isInline;
-      var tr = newState.tr;
-      if (isNodeSelection) {
-        tr.setSelection(_state2.NodeSelection.create(newState.doc, from));
-      } else {
-        tr.setSelection(_state2.TextSelection.create(newState.doc, from));
-      }
-      return tr.scrollIntoView();
-    },
     state: {
       init: function init(_, _state) {
         // We do initial setup after we setup the editor view
@@ -145,6 +112,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl)
     view: function view(editorView) {
       setNodeViewSerializer(editorView);
       var isFirst = true;
+      var previousActiveIndex;
       return {
         update: function update(view) {
           // If we're using configuration to show diffs we initialise here once we setup the editor view
@@ -158,6 +126,16 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl)
               originalDoc: (0, _processRawValue.processRawValue)(view.state.schema, config.originalDoc)
             }));
           }
+
+          // Check for any potential scroll side-effects
+          if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
+            var pluginState = showDiffPluginKey.getState(view.state);
+            var activeIndexChanged = (pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && pluginState.activeIndex !== previousActiveIndex;
+            previousActiveIndex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex;
+            if (pluginState !== null && pluginState !== void 0 && pluginState.activeIndex && activeIndexChanged) {
+              (0, _scrollToActiveDecoration.scrollToActiveDecoration)(view, getScrollableDecorations(pluginState.decorations), pluginState.activeIndex);
+            }
+          }
         }
       };
     },

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollToActiveDecoration = void 0;
+/**
+ * Scrolls to the current position/selection of the document. It does the same as scrollIntoView()
+ * but without requiring the focus on the editor, thus it can be called at any time.
+ */
+function scrollToSelection(view, position) {
+  var _view$domAtPos = view.domAtPos(position),
+    node = _view$domAtPos.node;
+  if (node instanceof Element) {
+    node.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center'
+    });
+  }
+}
+
+/**
+ * Scrolls the editor view to the decoration at the given index.
+ */
+var scrollToActiveDecoration = exports.scrollToActiveDecoration = function scrollToActiveDecoration(view, decorations, activeIndex) {
+  var decoration = decorations[activeIndex];
+  if (!decoration) {
+    return;
+  }
+  scrollToSelection(view, decoration === null || decoration === void 0 ? void 0 : decoration.from);
+};

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

@@ -1,11 +1,12 @@
 import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey, NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { calculateDiffDecorations } from './calculateDiffDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
+import { scrollToActiveDecoration } from './scrollToActiveDecoration';
 export const showDiffPluginKey = new PluginKey('showDiffPlugin');
 export const getScrollableDecorations = set => {
   var _set$find;
@@ -20,42 +21,6 @@ export const createPlugin = (config, getIntl) => {
   };
   return new SafePlugin({
     key: showDiffPluginKey,
-    appendTransaction(transactions, oldState, newState) {
-      var _pluginState$activeIn;
-      if (!fg('platform_editor_show_diff_scroll_navigation')) {
-        return;
-      }
-      // Check if any transaction contains scroll actions
-      const scrollTransaction = transactions.find(tr => {
-        var _tr$getMeta, _tr$getMeta2;
-        return ((_tr$getMeta = tr.getMeta(showDiffPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.action) === 'SCROLL_TO_NEXT' || ((_tr$getMeta2 = tr.getMeta(showDiffPluginKey)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.action) === 'SCROLL_TO_PREVIOUS';
-      });
-      if (!scrollTransaction) {
-        return;
-      }
-      const pluginState = showDiffPluginKey.getState(newState);
-      if (!pluginState || pluginState.decorations.find().length === 0) {
-        return;
-      }
-      const decorations = getScrollableDecorations(pluginState.decorations);
-      const decoration = decorations[(_pluginState$activeIn = pluginState.activeIndex) !== null && _pluginState$activeIn !== void 0 ? _pluginState$activeIn : 0];
-      if (!decoration) {
-        return;
-      }
-      const {
-        from,
-        to
-      } = decoration;
-      const $pos = newState.doc.resolve(from);
-      const isNodeSelection = $pos.nodeAfter && $pos.nodeAfter.nodeSize === to - from && !$pos.nodeAfter.isInline;
-      const tr = newState.tr;
-      if (isNodeSelection) {
-        tr.setSelection(NodeSelection.create(newState.doc, from));
-      } else {
-        tr.setSelection(TextSelection.create(newState.doc, from));
-      }
-      return tr.scrollIntoView();
-    },
     state: {
       init(_, _state) {
         // We do initial setup after we setup the editor view
@@ -144,6 +109,7 @@ export const createPlugin = (config, getIntl) => {
     view(editorView) {
       setNodeViewSerializer(editorView);
       let isFirst = true;
+      let previousActiveIndex;
       return {
         update(view) {
           // If we're using configuration to show diffs we initialise here once we setup the editor view
@@ -155,6 +121,16 @@ export const createPlugin = (config, getIntl) => {
               originalDoc: processRawValue(view.state.schema, config.originalDoc)
             }));
           }
+
+          // Check for any potential scroll side-effects
+          if (fg('platform_editor_show_diff_scroll_navigation')) {
+            const pluginState = showDiffPluginKey.getState(view.state);
+            const activeIndexChanged = (pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && pluginState.activeIndex !== previousActiveIndex;
+            previousActiveIndex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex;
+            if (pluginState !== null && pluginState !== void 0 && pluginState.activeIndex && activeIndexChanged) {
+              scrollToActiveDecoration(view, getScrollableDecorations(pluginState.decorations), pluginState.activeIndex);
+            }
+          }
         }
       };
     },

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

@@ -0,0 +1,26 @@
+/**
+ * Scrolls to the current position/selection of the document. It does the same as scrollIntoView()
+ * but without requiring the focus on the editor, thus it can be called at any time.
+ */
+function scrollToSelection(view, position) {
+  const {
+    node
+  } = view.domAtPos(position);
+  if (node instanceof Element) {
+    node.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center'
+    });
+  }
+}
+
+/**
+ * Scrolls the editor view to the decoration at the given index.
+ */
+export const scrollToActiveDecoration = (view, decorations, activeIndex) => {
+  const decoration = decorations[activeIndex];
+  if (!decoration) {
+    return;
+  }
+  scrollToSelection(view, decoration === null || decoration === void 0 ? void 0 : decoration.from);
+};

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

@@ -3,12 +3,13 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 { processRawValue } from '@atlaskit/editor-common/process-raw-value';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey, NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { calculateDiffDecorations } from './calculateDiffDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
+import { scrollToActiveDecoration } from './scrollToActiveDecoration';
 export var showDiffPluginKey = new PluginKey('showDiffPlugin');
 export var getScrollableDecorations = function getScrollableDecorations(set) {
   var _set$find;
@@ -25,40 +26,6 @@ export var createPlugin = function createPlugin(config, getIntl) {
   };
   return new SafePlugin({
     key: showDiffPluginKey,
-    appendTransaction: function appendTransaction(transactions, oldState, newState) {
-      var _pluginState$activeIn;
-      if (!fg('platform_editor_show_diff_scroll_navigation')) {
-        return;
-      }
-      // Check if any transaction contains scroll actions
-      var scrollTransaction = transactions.find(function (tr) {
-        var _tr$getMeta, _tr$getMeta2;
-        return ((_tr$getMeta = tr.getMeta(showDiffPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.action) === 'SCROLL_TO_NEXT' || ((_tr$getMeta2 = tr.getMeta(showDiffPluginKey)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.action) === 'SCROLL_TO_PREVIOUS';
-      });
-      if (!scrollTransaction) {
-        return;
-      }
-      var pluginState = showDiffPluginKey.getState(newState);
-      if (!pluginState || pluginState.decorations.find().length === 0) {
-        return;
-      }
-      var decorations = getScrollableDecorations(pluginState.decorations);
-      var decoration = decorations[(_pluginState$activeIn = pluginState.activeIndex) !== null && _pluginState$activeIn !== void 0 ? _pluginState$activeIn : 0];
-      if (!decoration) {
-        return;
-      }
-      var from = decoration.from,
-        to = decoration.to;
-      var $pos = newState.doc.resolve(from);
-      var isNodeSelection = $pos.nodeAfter && $pos.nodeAfter.nodeSize === to - from && !$pos.nodeAfter.isInline;
-      var tr = newState.tr;
-      if (isNodeSelection) {
-        tr.setSelection(NodeSelection.create(newState.doc, from));
-      } else {
-        tr.setSelection(TextSelection.create(newState.doc, from));
-      }
-      return tr.scrollIntoView();
-    },
     state: {
       init: function init(_, _state) {
         // We do initial setup after we setup the editor view
@@ -138,6 +105,7 @@ export var createPlugin = function createPlugin(config, getIntl) {
     view: function view(editorView) {
       setNodeViewSerializer(editorView);
       var isFirst = true;
+      var previousActiveIndex;
       return {
         update: function update(view) {
           // If we're using configuration to show diffs we initialise here once we setup the editor view
@@ -151,6 +119,16 @@ export var createPlugin = function createPlugin(config, getIntl) {
               originalDoc: processRawValue(view.state.schema, config.originalDoc)
             }));
           }
+
+          // Check for any potential scroll side-effects
+          if (fg('platform_editor_show_diff_scroll_navigation')) {
+            var pluginState = showDiffPluginKey.getState(view.state);
+            var activeIndexChanged = (pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && pluginState.activeIndex !== previousActiveIndex;
+            previousActiveIndex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex;
+            if (pluginState !== null && pluginState !== void 0 && pluginState.activeIndex && activeIndexChanged) {
+              scrollToActiveDecoration(view, getScrollableDecorations(pluginState.decorations), pluginState.activeIndex);
+            }
+          }
         }
       };
     },

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

@@ -0,0 +1,25 @@
+/**
+ * Scrolls to the current position/selection of the document. It does the same as scrollIntoView()
+ * but without requiring the focus on the editor, thus it can be called at any time.
+ */
+function scrollToSelection(view, position) {
+  var _view$domAtPos = view.domAtPos(position),
+    node = _view$domAtPos.node;
+  if (node instanceof Element) {
+    node.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center'
+    });
+  }
+}
+
+/**
+ * Scrolls the editor view to the decoration at the given index.
+ */
+export var scrollToActiveDecoration = function scrollToActiveDecoration(view, decorations, activeIndex) {
+  var decoration = decorations[activeIndex];
+  if (!decoration) {
+    return;
+  }
+  scrollToSelection(view, decoration === null || decoration === void 0 ? void 0 : decoration.from);
+};

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

@@ -0,0 +1,5 @@
+import type { EditorView, Decoration } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Scrolls the editor view to the decoration at the given index.
+ */
+export declare const scrollToActiveDecoration: (view: EditorView, decorations: Decoration[], activeIndex: number) => void;

package/dist/types-ts4.5/pm-plugins/scrollToActiveDecoration.d.ts

@@ -0,0 +1,5 @@
+import type { EditorView, Decoration } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Scrolls the editor view to the decoration at the given index.
+ */
+export declare const scrollToActiveDecoration: (view: EditorView, decorations: Decoration[], activeIndex: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "5.0.2",
+	"version": "5.0.3",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^34.0.0",
+		"@atlaskit/tmp-editor-statsig": "^34.4.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
@@ -40,7 +40,7 @@
 		"prosemirror-changeset": "^2.3.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.28.0",
+		"@atlaskit/editor-common": "^111.29.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {