@atlaskit/editor-plugin-base 1.12.2 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/editor-plugin-base
 
+## 2.0.1
+
+### Patch Changes
+
+- [#155735](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155735)
+  [`1beeeda29023a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1beeeda29023a) -
+  Upgrades editor packages to react 18
+
+## 2.0.0
+
+### Major Changes
+
+- [#154731](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154731)
+  [`c07d9c6cecf8e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c07d9c6cecf8e) -
+  EDF-1411 Removed UFO experience events from Editor.
+
+### Patch Changes
+
+- [#154843](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154843)
+  [`33209df89f059`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/33209df89f059) -
+  [ux] Improve how the scroll gutter at the bottom of the screen works to prevent flickering while
+  typing.
+- [#154186](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154186)
+  [`5c316170d29dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c316170d29dd) -
+  Bump @atlaskit/adf-schema to 42.3.1
+- Updated dependencies
+
 ## 1.12.2
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -11,6 +11,7 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _history = require("@atlaskit/editor-prosemirror/history");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands2 = require("./commands");
 var _disableSpellChecking = _interopRequireDefault(require("./pm-plugins/disable-spell-checking"));
@@ -20,6 +21,7 @@ var _inlineCursorTarget = _interopRequireDefault(require("./pm-plugins/inline-cu
 var _lazyNodeViewDecoration = require("./pm-plugins/lazy-node-view-decoration");
 var _newlinePreserveMarks = _interopRequireDefault(require("./pm-plugins/newline-preserve-marks"));
 var _scrollGutter = _interopRequireWildcard(require("./pm-plugins/scroll-gutter"));
+var _next = _interopRequireDefault(require("./pm-plugins/scroll-gutter/next"));
 var _inputTrackingConfig = require("./utils/inputTrackingConfig");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -83,7 +85,7 @@ var basePlugin = function basePlugin(_ref) {
         name: 'frozenEditor',
         plugin: function plugin(_ref3) {
           var dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
-          return (0, _frozenEditor.default)(api === null || api === void 0 ? void 0 : api.contextIdentifier)(dispatchAnalyticsEvent, _inputTrackingConfig.inputTracking, undefined, undefined);
+          return (0, _frozenEditor.default)(api === null || api === void 0 ? void 0 : api.contextIdentifier)(dispatchAnalyticsEvent, _inputTrackingConfig.inputTracking, undefined);
         }
       }, {
         name: 'history',
@@ -106,12 +108,21 @@ var basePlugin = function basePlugin(_ref) {
         }
       });
       if (options && options.allowScrollGutter) {
-        plugins.push({
-          name: 'scrollGutterPlugin',
-          plugin: function plugin() {
-            return (0, _scrollGutter.default)(options.allowScrollGutter);
-          }
-        });
+        if ((0, _platformFeatureFlags.fg)('platform_editor_improved_scroll_gutter')) {
+          plugins.push({
+            name: 'scrollGutterPlugin',
+            plugin: function plugin() {
+              return (0, _next.default)(options.allowScrollGutter);
+            }
+          });
+        } else {
+          plugins.push({
+            name: 'scrollGutterPlugin',
+            plugin: function plugin() {
+              return (0, _scrollGutter.default)(options.allowScrollGutter);
+            }
+          });
+        }
       }
       plugins.push({
         name: 'disableSpellcheckingPlugin',

package/dist/cjs/pm-plugins/frozen-editor.js

@@ -10,7 +10,6 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _countNodes = require("@atlaskit/editor-common/count-nodes");
 var _isPerformanceApiAvailable = require("@atlaskit/editor-common/is-performance-api-available");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _ufo = require("@atlaskit/editor-common/ufo");
 var _analytics2 = require("@atlaskit/editor-common/utils/analytics");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _frozenEditor = require("../utils/frozen-editor");
@@ -47,7 +46,7 @@ var dispatchLongTaskEvent = function dispatchLongTaskEvent(contextIdentifierPlug
   };
 };
 var _default = exports.default = function _default(contextIdentifierPlugin) {
-  return function (dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, ufo) {
+  return function (dispatchAnalyticsEvent, inputTracking, browserFreezeTracking) {
     var interactionType;
     var inputLatencyTracker = null;
     if (browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType) {
@@ -152,38 +151,15 @@ var _default = exports.default = function _default(contextIdentifierPlugin) {
         if (!(0, _isPerformanceApiAvailable.isPerformanceObserverAvailable)()) {
           return {};
         }
-        var experienceStore = _ufo.ExperienceStore.getInstance(_view);
         inputLatencyTracker = new _inputLatencyTracking.default({
           samplingRate: samplingRate,
           slowThreshold: slowThreshold,
           normalThreshold: severityThresholdNormal,
           degradedThreshold: severityThresholdDegraded,
-          onSampleStart: function onSampleStart() {
-            experienceStore === null || experienceStore === void 0 || experienceStore.start(_ufo.EditorExperience.typing);
-          },
-          onSampleEnd: function onSampleEnd(time, _ref2) {
-            var _contextIdentifierPlu4;
-            var isSlow = _ref2.isSlow,
-              severity = _ref2.severity;
-            var state = _view.state;
-            var nodesCount = getNodeCount(state);
-            if (isSlow) {
-              experienceStore === null || experienceStore === void 0 || experienceStore.addMetadata(_ufo.EditorExperience.typing, {
-                slowInput: true
-              });
-            }
-            experienceStore === null || experienceStore === void 0 || experienceStore.success(_ufo.EditorExperience.typing, _objectSpread(_objectSpread({
-              nodeSize: state.doc.nodeSize
-            }, nodesCount), {}, {
-              objectId: contextIdentifierPlugin === null || contextIdentifierPlugin === void 0 || (_contextIdentifierPlu4 = contextIdentifierPlugin.sharedState.currentState()) === null || _contextIdentifierPlu4 === void 0 || (_contextIdentifierPlu4 = _contextIdentifierPlu4.contextIdentifierProvider) === null || _contextIdentifierPlu4 === void 0 ? void 0 : _contextIdentifierPlu4.objectId,
-              time: time,
-              severity: shouldTrackSeverity ? severity : undefined
-            }));
-          },
           dispatchSample: createDispatchSample(_analytics.ACTION.INPUT_PERF_SAMPLING, _view),
           dispatchAverage: createDispatchAverage(_analytics.ACTION.INPUT_PERF_SAMPLING_AVG, _view),
           onSlowInput: function onSlowInput(time) {
-            var _contextIdentifierPlu5;
+            var _contextIdentifierPlu4;
             var state = _view.state;
             var nodesCount = getNodeCount(state);
             dispatchAnalyticsEvent({
@@ -193,7 +169,7 @@ var _default = exports.default = function _default(contextIdentifierPlugin) {
                 time: time,
                 nodeSize: state.doc.nodeSize
               }, nodesCount), {}, {
-                objectId: contextIdentifierPlugin === null || contextIdentifierPlugin === void 0 || (_contextIdentifierPlu5 = contextIdentifierPlugin.sharedState.currentState()) === null || _contextIdentifierPlu5 === void 0 || (_contextIdentifierPlu5 = _contextIdentifierPlu5.contextIdentifierProvider) === null || _contextIdentifierPlu5 === void 0 ? void 0 : _contextIdentifierPlu5.objectId
+                objectId: contextIdentifierPlugin === null || contextIdentifierPlugin === void 0 || (_contextIdentifierPlu4 = contextIdentifierPlugin.sharedState.currentState()) === null || _contextIdentifierPlu4 === void 0 || (_contextIdentifierPlu4 = _contextIdentifierPlu4.contextIdentifierProvider) === null || _contextIdentifierPlu4 === void 0 ? void 0 : _contextIdentifierPlu4.objectId
               }),
               eventType: _analytics.EVENT_TYPE.OPERATIONAL
             });

package/dist/cjs/pm-plugins/scroll-gutter/next.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getKeyboardHeight = exports.default = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _pluginKey = require("./plugin-key");
+var GUTTER_SIZE_IN_PX = 120;
+var GUTTER_SELECTOR_NAME = 'editor-scroll-gutter';
+var getKeyboardHeight = exports.getKeyboardHeight = function getKeyboardHeight(state) {
+  if (state) {
+    var scrollGutterPluginState = (0, _pluginKey.getScrollGutterPluginState)(state);
+    return scrollGutterPluginState ? scrollGutterPluginState.keyboardHeight : undefined;
+  }
+};
+
+/**
+ * Create a gutter element that can be added or removed from the DOM.
+ */
+function createGutter(gutterSize, parent) {
+  var gutter = document.createElement('div');
+  gutter.style.paddingBottom = "".concat(gutterSize, "px");
+  gutter.id = GUTTER_SELECTOR_NAME;
+  if (parent) {
+    parent.appendChild(gutter);
+  }
+  return function () {
+    return parent === null || parent === void 0 ? void 0 : parent.removeChild(gutter);
+  };
+}
+var _default = exports.default = function _default() {
+  var pluginOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var getScrollElement = pluginOptions.getScrollElement,
+    _pluginOptions$gutter = pluginOptions.gutterSize,
+    gutterSize = _pluginOptions$gutter === void 0 ? GUTTER_SIZE_IN_PX : _pluginOptions$gutter;
+  if (!getScrollElement) {
+    return undefined;
+  }
+  return new _safePlugin.SafePlugin({
+    key: _pluginKey.scrollGutterPluginKey,
+    state: {
+      init: function init() {
+        return {};
+      },
+      apply: function apply(tr, pluginState) {
+        if (tr.getMeta(_pluginKey.scrollGutterPluginKey)) {
+          return tr.getMeta(_pluginKey.scrollGutterPluginKey);
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      // Determines the distance (in pixels) between the cursor and the end of the visible viewport at which point,
+      // when scrolling the cursor into view, scrolling takes place.
+      // Defaults to 0: https://prosemirror.net/docs/ref/#view.EditorProps.scrollThreshold
+      scrollThreshold: gutterSize,
+      // Determines the extra space (in pixels) that is left above or below the cursor when it is scrolled into view.
+      // Defaults to 5: https://prosemirror.net/docs/ref/#view.EditorProps.scrollMargin
+      scrollMargin: gutterSize
+    },
+    view: function view(_view) {
+      var _editorElement;
+      // Store references to avoid lookups on successive checks.
+      var scrollElement = getScrollElement(_view);
+      var editorElement = _view.dom instanceof HTMLElement ? _view.dom : null;
+      var editorParentElement = (_editorElement = editorElement) === null || _editorElement === void 0 ? void 0 : _editorElement.parentElement;
+      var cleanup = function cleanup() {};
+      if (editorParentElement && scrollElement) {
+        cleanup = createGutter(gutterSize, editorParentElement);
+      }
+      return {
+        destroy: function destroy() {
+          cleanup();
+          editorParentElement = editorElement = null;
+        }
+      };
+    }
+  });
+};

package/dist/es2019/plugin.js

@@ -2,6 +2,7 @@ import { doc, paragraph, text } from '@atlaskit/adf-schema';
 import { keymap } from '@atlaskit/editor-common/keymaps';
 import { baseKeymap } from '@atlaskit/editor-prosemirror/commands';
 import { history } from '@atlaskit/editor-prosemirror/history';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setKeyboardHeight } from './commands';
 import disableSpellcheckingPlugin from './pm-plugins/disable-spell-checking';
@@ -11,6 +12,7 @@ import inlineCursorTargetPlugin from './pm-plugins/inline-cursor-target';
 import { createLazyNodeViewDecorationPlugin } from './pm-plugins/lazy-node-view-decoration';
 import newlinePreserveMarksPlugin from './pm-plugins/newline-preserve-marks';
 import scrollGutter, { getKeyboardHeight } from './pm-plugins/scroll-gutter';
+import scrollGutterNext from './pm-plugins/scroll-gutter/next';
 import { inputTracking } from './utils/inputTrackingConfig';
 const basePlugin = ({
   config: options,
@@ -67,7 +69,7 @@ const basePlugin = ({
         plugin: ({
           dispatchAnalyticsEvent
         }) => {
-          return frozenEditor(api === null || api === void 0 ? void 0 : api.contextIdentifier)(dispatchAnalyticsEvent, inputTracking, undefined, undefined);
+          return frozenEditor(api === null || api === void 0 ? void 0 : api.contextIdentifier)(dispatchAnalyticsEvent, inputTracking, undefined);
         }
       }, {
         name: 'history',
@@ -83,10 +85,17 @@ const basePlugin = ({
         })
       });
       if (options && options.allowScrollGutter) {
-        plugins.push({
-          name: 'scrollGutterPlugin',
-          plugin: () => scrollGutter(options.allowScrollGutter)
-        });
+        if (fg('platform_editor_improved_scroll_gutter')) {
+          plugins.push({
+            name: 'scrollGutterPlugin',
+            plugin: () => scrollGutterNext(options.allowScrollGutter)
+          });
+        } else {
+          plugins.push({
+            name: 'scrollGutterPlugin',
+            plugin: () => scrollGutter(options.allowScrollGutter)
+          });
+        }
       }
       plugins.push({
         name: 'disableSpellcheckingPlugin',

package/dist/es2019/pm-plugins/frozen-editor.js

@@ -2,7 +2,6 @@ import { ACTION, ACTION_SUBJECT, BROWSER_FREEZE_INTERACTION_TYPE, EVENT_TYPE } f
 import { countNodes } from '@atlaskit/editor-common/count-nodes';
 import { isPerformanceAPIAvailable, isPerformanceObserverAvailable } from '@atlaskit/editor-common/is-performance-api-available';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { EditorExperience, ExperienceStore } from '@atlaskit/editor-common/ufo';
 import { getAnalyticsEventSeverity } from '@atlaskit/editor-common/utils/analytics';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { setInteractionType } from '../utils/frozen-editor';
@@ -36,7 +35,7 @@ const dispatchLongTaskEvent = contextIdentifierPlugin => (dispatchAnalyticsEvent
     eventType: EVENT_TYPE.OPERATIONAL
   });
 };
-export default (contextIdentifierPlugin => (dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, ufo) => {
+export default (contextIdentifierPlugin => (dispatchAnalyticsEvent, inputTracking, browserFreezeTracking) => {
   let interactionType;
   let inputLatencyTracker = null;
   if (browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType) {
@@ -142,41 +141,15 @@ export default (contextIdentifierPlugin => (dispatchAnalyticsEvent, inputTrackin
       if (!isPerformanceObserverAvailable()) {
         return {};
       }
-      const experienceStore = ExperienceStore.getInstance(view);
       inputLatencyTracker = new InputLatencyTracker({
         samplingRate,
         slowThreshold,
         normalThreshold: severityThresholdNormal,
         degradedThreshold: severityThresholdDegraded,
-        onSampleStart: () => {
-          experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.start(EditorExperience.typing);
-        },
-        onSampleEnd: (time, {
-          isSlow,
-          severity
-        }) => {
-          var _contextIdentifierPlu7, _contextIdentifierPlu8;
-          const {
-            state
-          } = view;
-          const nodesCount = getNodeCount(state);
-          if (isSlow) {
-            experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.addMetadata(EditorExperience.typing, {
-              slowInput: true
-            });
-          }
-          experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.success(EditorExperience.typing, {
-            nodeSize: state.doc.nodeSize,
-            ...nodesCount,
-            objectId: contextIdentifierPlugin === null || contextIdentifierPlugin === void 0 ? void 0 : (_contextIdentifierPlu7 = contextIdentifierPlugin.sharedState.currentState()) === null || _contextIdentifierPlu7 === void 0 ? void 0 : (_contextIdentifierPlu8 = _contextIdentifierPlu7.contextIdentifierProvider) === null || _contextIdentifierPlu8 === void 0 ? void 0 : _contextIdentifierPlu8.objectId,
-            time,
-            severity: shouldTrackSeverity ? severity : undefined
-          });
-        },
         dispatchSample: createDispatchSample(ACTION.INPUT_PERF_SAMPLING, view),
         dispatchAverage: createDispatchAverage(ACTION.INPUT_PERF_SAMPLING_AVG, view),
         onSlowInput: time => {
-          var _contextIdentifierPlu9, _contextIdentifierPlu10;
+          var _contextIdentifierPlu7, _contextIdentifierPlu8;
           const {
             state
           } = view;
@@ -188,7 +161,7 @@ export default (contextIdentifierPlugin => (dispatchAnalyticsEvent, inputTrackin
               time,
               nodeSize: state.doc.nodeSize,
               ...nodesCount,
-              objectId: contextIdentifierPlugin === null || contextIdentifierPlugin === void 0 ? void 0 : (_contextIdentifierPlu9 = contextIdentifierPlugin.sharedState.currentState()) === null || _contextIdentifierPlu9 === void 0 ? void 0 : (_contextIdentifierPlu10 = _contextIdentifierPlu9.contextIdentifierProvider) === null || _contextIdentifierPlu10 === void 0 ? void 0 : _contextIdentifierPlu10.objectId
+              objectId: contextIdentifierPlugin === null || contextIdentifierPlugin === void 0 ? void 0 : (_contextIdentifierPlu7 = contextIdentifierPlugin.sharedState.currentState()) === null || _contextIdentifierPlu7 === void 0 ? void 0 : (_contextIdentifierPlu8 = _contextIdentifierPlu7.contextIdentifierProvider) === null || _contextIdentifierPlu8 === void 0 ? void 0 : _contextIdentifierPlu8.objectId
             },
             eventType: EVENT_TYPE.OPERATIONAL
           });

package/dist/es2019/pm-plugins/scroll-gutter/next.js

@@ -0,0 +1,70 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getScrollGutterPluginState, scrollGutterPluginKey } from './plugin-key';
+const GUTTER_SIZE_IN_PX = 120;
+const GUTTER_SELECTOR_NAME = 'editor-scroll-gutter';
+export const getKeyboardHeight = state => {
+  if (state) {
+    const scrollGutterPluginState = getScrollGutterPluginState(state);
+    return scrollGutterPluginState ? scrollGutterPluginState.keyboardHeight : undefined;
+  }
+};
+
+/**
+ * Create a gutter element that can be added or removed from the DOM.
+ */
+function createGutter(gutterSize, parent) {
+  const gutter = document.createElement('div');
+  gutter.style.paddingBottom = `${gutterSize}px`;
+  gutter.id = GUTTER_SELECTOR_NAME;
+  if (parent) {
+    parent.appendChild(gutter);
+  }
+  return () => parent === null || parent === void 0 ? void 0 : parent.removeChild(gutter);
+}
+export default ((pluginOptions = {}) => {
+  const {
+    getScrollElement,
+    gutterSize = GUTTER_SIZE_IN_PX
+  } = pluginOptions;
+  if (!getScrollElement) {
+    return undefined;
+  }
+  return new SafePlugin({
+    key: scrollGutterPluginKey,
+    state: {
+      init: () => ({}),
+      apply: (tr, pluginState) => {
+        if (tr.getMeta(scrollGutterPluginKey)) {
+          return tr.getMeta(scrollGutterPluginKey);
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      // Determines the distance (in pixels) between the cursor and the end of the visible viewport at which point,
+      // when scrolling the cursor into view, scrolling takes place.
+      // Defaults to 0: https://prosemirror.net/docs/ref/#view.EditorProps.scrollThreshold
+      scrollThreshold: gutterSize,
+      // Determines the extra space (in pixels) that is left above or below the cursor when it is scrolled into view.
+      // Defaults to 5: https://prosemirror.net/docs/ref/#view.EditorProps.scrollMargin
+      scrollMargin: gutterSize
+    },
+    view(view) {
+      var _editorElement;
+      // Store references to avoid lookups on successive checks.
+      const scrollElement = getScrollElement(view);
+      let editorElement = view.dom instanceof HTMLElement ? view.dom : null;
+      let editorParentElement = (_editorElement = editorElement) === null || _editorElement === void 0 ? void 0 : _editorElement.parentElement;
+      let cleanup = () => {};
+      if (editorParentElement && scrollElement) {
+        cleanup = createGutter(gutterSize, editorParentElement);
+      }
+      return {
+        destroy() {
+          cleanup();
+          editorParentElement = editorElement = null;
+        }
+      };
+    }
+  });
+});

package/dist/esm/plugin.js

@@ -5,6 +5,7 @@ import { doc, paragraph, text } from '@atlaskit/adf-schema';
 import { keymap } from '@atlaskit/editor-common/keymaps';
 import { baseKeymap } from '@atlaskit/editor-prosemirror/commands';
 import { history } from '@atlaskit/editor-prosemirror/history';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setKeyboardHeight } from './commands';
 import disableSpellcheckingPlugin from './pm-plugins/disable-spell-checking';
@@ -14,6 +15,7 @@ import inlineCursorTargetPlugin from './pm-plugins/inline-cursor-target';
 import { createLazyNodeViewDecorationPlugin } from './pm-plugins/lazy-node-view-decoration';
 import newlinePreserveMarksPlugin from './pm-plugins/newline-preserve-marks';
 import scrollGutter, { getKeyboardHeight } from './pm-plugins/scroll-gutter';
+import scrollGutterNext from './pm-plugins/scroll-gutter/next';
 import { inputTracking } from './utils/inputTrackingConfig';
 var basePlugin = function basePlugin(_ref) {
   var _api$featureFlags;
@@ -73,7 +75,7 @@ var basePlugin = function basePlugin(_ref) {
         name: 'frozenEditor',
         plugin: function plugin(_ref3) {
           var dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
-          return frozenEditor(api === null || api === void 0 ? void 0 : api.contextIdentifier)(dispatchAnalyticsEvent, inputTracking, undefined, undefined);
+          return frozenEditor(api === null || api === void 0 ? void 0 : api.contextIdentifier)(dispatchAnalyticsEvent, inputTracking, undefined);
         }
       }, {
         name: 'history',
@@ -96,12 +98,21 @@ var basePlugin = function basePlugin(_ref) {
         }
       });
       if (options && options.allowScrollGutter) {
-        plugins.push({
-          name: 'scrollGutterPlugin',
-          plugin: function plugin() {
-            return scrollGutter(options.allowScrollGutter);
-          }
-        });
+        if (fg('platform_editor_improved_scroll_gutter')) {
+          plugins.push({
+            name: 'scrollGutterPlugin',
+            plugin: function plugin() {
+              return scrollGutterNext(options.allowScrollGutter);
+            }
+          });
+        } else {
+          plugins.push({
+            name: 'scrollGutterPlugin',
+            plugin: function plugin() {
+              return scrollGutter(options.allowScrollGutter);
+            }
+          });
+        }
       }
       plugins.push({
         name: 'disableSpellcheckingPlugin',

package/dist/esm/pm-plugins/frozen-editor.js

@@ -5,7 +5,6 @@ import { ACTION, ACTION_SUBJECT, BROWSER_FREEZE_INTERACTION_TYPE, EVENT_TYPE } f
 import { countNodes } from '@atlaskit/editor-common/count-nodes';
 import { isPerformanceAPIAvailable, isPerformanceObserverAvailable } from '@atlaskit/editor-common/is-performance-api-available';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { EditorExperience, ExperienceStore } from '@atlaskit/editor-common/ufo';
 import { getAnalyticsEventSeverity } from '@atlaskit/editor-common/utils/analytics';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { setInteractionType } from '../utils/frozen-editor';
@@ -40,7 +39,7 @@ var dispatchLongTaskEvent = function dispatchLongTaskEvent(contextIdentifierPlug
   };
 };
 export default (function (contextIdentifierPlugin) {
-  return function (dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, ufo) {
+  return function (dispatchAnalyticsEvent, inputTracking, browserFreezeTracking) {
     var interactionType;
     var inputLatencyTracker = null;
     if (browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType) {
@@ -145,38 +144,15 @@ export default (function (contextIdentifierPlugin) {
         if (!isPerformanceObserverAvailable()) {
           return {};
         }
-        var experienceStore = ExperienceStore.getInstance(_view);
         inputLatencyTracker = new InputLatencyTracker({
           samplingRate: samplingRate,
           slowThreshold: slowThreshold,
           normalThreshold: severityThresholdNormal,
           degradedThreshold: severityThresholdDegraded,
-          onSampleStart: function onSampleStart() {
-            experienceStore === null || experienceStore === void 0 || experienceStore.start(EditorExperience.typing);
-          },
-          onSampleEnd: function onSampleEnd(time, _ref2) {
-            var _contextIdentifierPlu4;
-            var isSlow = _ref2.isSlow,
-              severity = _ref2.severity;
-            var state = _view.state;
-            var nodesCount = getNodeCount(state);
-            if (isSlow) {
-              experienceStore === null || experienceStore === void 0 || experienceStore.addMetadata(EditorExperience.typing, {
-                slowInput: true
-              });
-            }
-            experienceStore === null || experienceStore === void 0 || experienceStore.success(EditorExperience.typing, _objectSpread(_objectSpread({
-              nodeSize: state.doc.nodeSize
-            }, nodesCount), {}, {
-              objectId: contextIdentifierPlugin === null || contextIdentifierPlugin === void 0 || (_contextIdentifierPlu4 = contextIdentifierPlugin.sharedState.currentState()) === null || _contextIdentifierPlu4 === void 0 || (_contextIdentifierPlu4 = _contextIdentifierPlu4.contextIdentifierProvider) === null || _contextIdentifierPlu4 === void 0 ? void 0 : _contextIdentifierPlu4.objectId,
-              time: time,
-              severity: shouldTrackSeverity ? severity : undefined
-            }));
-          },
           dispatchSample: createDispatchSample(ACTION.INPUT_PERF_SAMPLING, _view),
           dispatchAverage: createDispatchAverage(ACTION.INPUT_PERF_SAMPLING_AVG, _view),
           onSlowInput: function onSlowInput(time) {
-            var _contextIdentifierPlu5;
+            var _contextIdentifierPlu4;
             var state = _view.state;
             var nodesCount = getNodeCount(state);
             dispatchAnalyticsEvent({
@@ -186,7 +162,7 @@ export default (function (contextIdentifierPlugin) {
                 time: time,
                 nodeSize: state.doc.nodeSize
               }, nodesCount), {}, {
-                objectId: contextIdentifierPlugin === null || contextIdentifierPlugin === void 0 || (_contextIdentifierPlu5 = contextIdentifierPlugin.sharedState.currentState()) === null || _contextIdentifierPlu5 === void 0 || (_contextIdentifierPlu5 = _contextIdentifierPlu5.contextIdentifierProvider) === null || _contextIdentifierPlu5 === void 0 ? void 0 : _contextIdentifierPlu5.objectId
+                objectId: contextIdentifierPlugin === null || contextIdentifierPlugin === void 0 || (_contextIdentifierPlu4 = contextIdentifierPlugin.sharedState.currentState()) === null || _contextIdentifierPlu4 === void 0 || (_contextIdentifierPlu4 = _contextIdentifierPlu4.contextIdentifierProvider) === null || _contextIdentifierPlu4 === void 0 ? void 0 : _contextIdentifierPlu4.objectId
               }),
               eventType: EVENT_TYPE.OPERATIONAL
             });

package/dist/esm/pm-plugins/scroll-gutter/next.js

@@ -0,0 +1,74 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getScrollGutterPluginState, scrollGutterPluginKey } from './plugin-key';
+var GUTTER_SIZE_IN_PX = 120;
+var GUTTER_SELECTOR_NAME = 'editor-scroll-gutter';
+export var getKeyboardHeight = function getKeyboardHeight(state) {
+  if (state) {
+    var scrollGutterPluginState = getScrollGutterPluginState(state);
+    return scrollGutterPluginState ? scrollGutterPluginState.keyboardHeight : undefined;
+  }
+};
+
+/**
+ * Create a gutter element that can be added or removed from the DOM.
+ */
+function createGutter(gutterSize, parent) {
+  var gutter = document.createElement('div');
+  gutter.style.paddingBottom = "".concat(gutterSize, "px");
+  gutter.id = GUTTER_SELECTOR_NAME;
+  if (parent) {
+    parent.appendChild(gutter);
+  }
+  return function () {
+    return parent === null || parent === void 0 ? void 0 : parent.removeChild(gutter);
+  };
+}
+export default (function () {
+  var pluginOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var getScrollElement = pluginOptions.getScrollElement,
+    _pluginOptions$gutter = pluginOptions.gutterSize,
+    gutterSize = _pluginOptions$gutter === void 0 ? GUTTER_SIZE_IN_PX : _pluginOptions$gutter;
+  if (!getScrollElement) {
+    return undefined;
+  }
+  return new SafePlugin({
+    key: scrollGutterPluginKey,
+    state: {
+      init: function init() {
+        return {};
+      },
+      apply: function apply(tr, pluginState) {
+        if (tr.getMeta(scrollGutterPluginKey)) {
+          return tr.getMeta(scrollGutterPluginKey);
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      // Determines the distance (in pixels) between the cursor and the end of the visible viewport at which point,
+      // when scrolling the cursor into view, scrolling takes place.
+      // Defaults to 0: https://prosemirror.net/docs/ref/#view.EditorProps.scrollThreshold
+      scrollThreshold: gutterSize,
+      // Determines the extra space (in pixels) that is left above or below the cursor when it is scrolled into view.
+      // Defaults to 5: https://prosemirror.net/docs/ref/#view.EditorProps.scrollMargin
+      scrollMargin: gutterSize
+    },
+    view: function view(_view) {
+      var _editorElement;
+      // Store references to avoid lookups on successive checks.
+      var scrollElement = getScrollElement(_view);
+      var editorElement = _view.dom instanceof HTMLElement ? _view.dom : null;
+      var editorParentElement = (_editorElement = editorElement) === null || _editorElement === void 0 ? void 0 : _editorElement.parentElement;
+      var cleanup = function cleanup() {};
+      if (editorParentElement && scrollElement) {
+        cleanup = createGutter(gutterSize, editorParentElement);
+      }
+      return {
+        destroy: function destroy() {
+          cleanup();
+          editorParentElement = editorElement = null;
+        }
+      };
+    }
+  });
+});

package/dist/types/plugin.d.ts

@@ -14,7 +14,6 @@ export interface BasePluginOptions {
      * @deprecated do not use
      */
     browserFreezeTracking?: BrowserFreezetracking;
-    ufo?: boolean;
 }
 export type BasePluginState = {
     /** Current height of keyboard (+ custom toolbar) in iOS app */

package/dist/types/pm-plugins/frozen-editor.d.ts

@@ -9,5 +9,5 @@ export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 export declare const DEFAULT_TRACK_SEVERITY_THRESHOLD_NORMAL = 100;
 export declare const DEFAULT_TRACK_SEVERITY_THRESHOLD_DEGRADED = 500;
-declare const _default: (contextIdentifierPlugin: ExtractInjectionAPI<BasePlugin>['contextIdentifier'] | undefined) => (dispatchAnalyticsEvent: DispatchAnalyticsEvent, inputTracking?: InputTracking, browserFreezeTracking?: BrowserFreezetracking, ufo?: boolean) => SafePlugin<any>;
+declare const _default: (contextIdentifierPlugin: ExtractInjectionAPI<BasePlugin>['contextIdentifier'] | undefined) => (dispatchAnalyticsEvent: DispatchAnalyticsEvent, inputTracking?: InputTracking, browserFreezeTracking?: BrowserFreezetracking) => SafePlugin<any>;
 export default _default;

package/dist/types/pm-plugins/scroll-gutter/next.d.ts

@@ -0,0 +1,26 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const getKeyboardHeight: (state?: EditorState) => number | undefined;
+export type ScrollGutterPluginOptions = {
+    /** Element the page uses for scrolling */
+    getScrollElement?: (view: EditorView) => HTMLElement | null;
+    /**
+     * @deprecated
+     *
+     * Whether to allow custom functionality to scroll to gutter element in
+     * plugin's handleScrollToSelection function
+     * Default is true
+     */
+    allowCustomScrollHandler?: boolean;
+    /**
+     * @deprecated
+     *
+     * Persist scroll gutter when the mobile appearance is COMPACT
+     * Default is false
+     */
+    persistScrollGutter?: boolean;
+    gutterSize?: number;
+};
+declare const _default: (pluginOptions?: ScrollGutterPluginOptions) => SafePlugin<{}> | undefined;
+export default _default;

package/dist/types-ts4.5/plugin.d.ts

@@ -14,7 +14,6 @@ export interface BasePluginOptions {
      * @deprecated do not use
      */
     browserFreezeTracking?: BrowserFreezetracking;
-    ufo?: boolean;
 }
 export type BasePluginState = {
     /** Current height of keyboard (+ custom toolbar) in iOS app */

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

@@ -9,5 +9,5 @@ export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 export declare const DEFAULT_TRACK_SEVERITY_THRESHOLD_NORMAL = 100;
 export declare const DEFAULT_TRACK_SEVERITY_THRESHOLD_DEGRADED = 500;
-declare const _default: (contextIdentifierPlugin: ExtractInjectionAPI<BasePlugin>['contextIdentifier'] | undefined) => (dispatchAnalyticsEvent: DispatchAnalyticsEvent, inputTracking?: InputTracking, browserFreezeTracking?: BrowserFreezetracking, ufo?: boolean) => SafePlugin<any>;
+declare const _default: (contextIdentifierPlugin: ExtractInjectionAPI<BasePlugin>['contextIdentifier'] | undefined) => (dispatchAnalyticsEvent: DispatchAnalyticsEvent, inputTracking?: InputTracking, browserFreezeTracking?: BrowserFreezetracking) => SafePlugin<any>;
 export default _default;

package/dist/types-ts4.5/pm-plugins/scroll-gutter/next.d.ts

@@ -0,0 +1,26 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const getKeyboardHeight: (state?: EditorState) => number | undefined;
+export type ScrollGutterPluginOptions = {
+    /** Element the page uses for scrolling */
+    getScrollElement?: (view: EditorView) => HTMLElement | null;
+    /**
+     * @deprecated
+     *
+     * Whether to allow custom functionality to scroll to gutter element in
+     * plugin's handleScrollToSelection function
+     * Default is true
+     */
+    allowCustomScrollHandler?: boolean;
+    /**
+     * @deprecated
+     *
+     * Persist scroll gutter when the mobile appearance is COMPACT
+     * Default is false
+     */
+    persistScrollGutter?: boolean;
+    gutterSize?: number;
+};
+declare const _default: (pluginOptions?: ScrollGutterPluginOptions) => SafePlugin<{}> | undefined;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-base",
-	"version": "1.12.2",
+	"version": "2.0.1",
 	"description": "Base plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -10,7 +10,7 @@
 	"atlassian": {
 		"team": "Editor: Lego",
 		"singleton": true,
-		"runReact18": false
+		"runReact18": true
 	},
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"main": "dist/cjs/index.js",
@@ -31,12 +31,13 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^42.0.2",
-		"@atlaskit/editor-common": "^93.6.0",
+		"@atlaskit/adf-schema": "^42.3.1",
+		"@atlaskit/editor-common": "^94.2.0",
 		"@atlaskit/editor-plugin-context-identifier": "^1.3.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.6.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/tmp-editor-statsig": "^2.8.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"techstack": {
@@ -73,5 +74,10 @@
 		"no-unused-dependencies": {
 			"checkDevDependencies": true
 		}
+	},
+	"platform-feature-flags": {
+		"platform_editor_improved_scroll_gutter": {
+			"type": "boolean"
+		}
 	}
 }