@atlaskit/editor-plugin-base 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-base
 
+## 0.3.2
+
+### Patch Changes
+
+- [#63346](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63346) [`7ab6b24559c0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7ab6b24559c0) - Minor performance optimisation for scroll gutter.
+- [#65031](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65031) [`a00094111b5a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a00094111b5a) - ED-21609 Update adf-schema to 35.3.0
+- Updated dependencies
+
+## 0.3.1
+
+### Patch Changes
+
+- [#64064](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64064) [`77394053290a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77394053290a) - Comment change to trigger builds
+
 ## 0.3.0
 
 ### Minor 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 _commands2 = require("./commands");
 var _contextIdentifier = _interopRequireWildcard(require("./pm-plugins/context-identifier"));
 var _disableSpellChecking = _interopRequireDefault(require("./pm-plugins/disable-spell-checking"));
@@ -19,6 +20,7 @@ var _frozenEditor = _interopRequireDefault(require("./pm-plugins/frozen-editor")
 var _inlineCursorTarget = _interopRequireDefault(require("./pm-plugins/inline-cursor-target"));
 var _newlinePreserveMarks = _interopRequireDefault(require("./pm-plugins/newline-preserve-marks"));
 var _scrollGutter = _interopRequireWildcard(require("./pm-plugins/scroll-gutter"));
+var _pluginDeprecated = _interopRequireDefault(require("./pm-plugins/scroll-gutter/plugin-deprecated"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -50,10 +52,13 @@ var basePlugin = function basePlugin(_ref) {
 
       // In Chrome, when the selection is placed between adjacent nodes which are not contenteditatble
       // the cursor appears at the right most point of the parent container.
+      //
       // In Firefox, when the selection is placed between adjacent nodes which are not contenteditatble
       // no cursor is presented to users.
+      //
       // In Safari, when the selection is placed between adjacent nodes which are not contenteditatble
       // it is not possible to navigate with arrow keys.
+      //
       // This plugin works around the issues by inserting decorations between
       // inline nodes which are set as contenteditable, and have a zero width space.
       plugins.push({
@@ -103,7 +108,7 @@ var basePlugin = function basePlugin(_ref) {
         plugins.push({
           name: 'scrollGutterPlugin',
           plugin: function plugin() {
-            return (0, _scrollGutter.default)(options.allowScrollGutter);
+            return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.scroll-gutter.reflow-optimisation') ? (0, _scrollGutter.default)(options.allowScrollGutter) : (0, _pluginDeprecated.default)(options.allowScrollGutter);
           }
         });
       }

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

@@ -7,6 +7,9 @@ exports.getKeyboardHeight = exports.default = void 0;
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
 var _pluginKey = require("./plugin-key");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var getKeyboardHeight = exports.getKeyboardHeight = function getKeyboardHeight(state) {
   if (state) {
     var scrollGutterPluginState = (0, _pluginKey.getScrollGutterPluginState)(state);
@@ -205,17 +208,78 @@ var _default = exports.default = function _default() {
       scrollElement = getScrollElement(view);
       var editorElement = view.dom;
       var editorParentElement = editorElement.parentElement;
+      var viewportElementHeight = 0;
+      var contentElementHeight = 0;
+      var addAndObserveGutter = function addAndObserveGutter() {
+        if (!gutter.isMounted()) {
+          gutter.observe(scrollElement);
+          gutter.addGutter(editorParentElement);
+        }
+      };
+      var toggleGutter = function toggleGutter(viewPortSize, contentSize) {
+        if (pluginOptions.persistScrollGutter) {
+          if (!(0, _utils.isEmptyDocument)(view.state.doc)) {
+            addAndObserveGutter();
+          } else {
+            gutter.removeGutter();
+          }
+          return;
+        }
+
+        // Add or remove the gutter based on whether the content is about to exceed the viewport height.
+        // We do this to ensure there is sufficient white space below the last content node in order to
+        // see any UI control elements which may sit beneath it.
+        var gutterThresholdHeight = viewPortSize - gutterSize;
+        if (contentSize >= gutterThresholdHeight) {
+          addAndObserveGutter();
+        } else {
+          if (gutter.isMounted()) {
+            gutter.removeGutter();
+          }
+        }
+      };
+      var observerCallback = function observerCallback(entries) {
+        var _iterator = _createForOfIteratorHelper(entries),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var entry = _step.value;
+            var elementHeight = Math.round(entry.contentRect.height);
+            if (entry.target === scrollElement) {
+              var _getKeyboardHeight;
+              var keyboardHeight = (_getKeyboardHeight = getKeyboardHeight(view === null || view === void 0 ? void 0 : view.state)) !== null && _getKeyboardHeight !== void 0 ? _getKeyboardHeight : 0;
+              viewportElementHeight = elementHeight - keyboardHeight;
+            } else if (entry.target === editorParentElement) {
+              contentElementHeight = elementHeight - (gutter.isMounted() ? gutterSize : 0);
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+        toggleGutter(viewportElementHeight, contentElementHeight);
+      };
+
+      // Subscribe to updates of the height of the viewport and content elements
+      // We toggle the value when it is set here or when PM updates to ensure we're using
+      // the latest.
+      var resizeObserver = new ResizeObserver(observerCallback);
+      if (scrollElement && editorParentElement) {
+        resizeObserver.observe(scrollElement);
+        resizeObserver.observe(editorParentElement);
+      }
       return {
         destroy: function destroy() {
           // Remove if it's mounted
           gutter.destroy();
           scrollElement = editorParentElement = editorElement = null;
+          resizeObserver.disconnect();
         },
         /**
          * Toggle the Scroll Gutter Element
          */
         update: function update(view, prevState) {
-          var _getKeyboardHeight;
           if (!scrollElement || !editorParentElement) {
             return;
           }
@@ -224,37 +288,7 @@ var _default = exports.default = function _default() {
             // No need to recheck if the selected node hasn't changed.
             return;
           }
-          var gutterMounted = gutter.isMounted();
-          var addAndObserveGutter = function addAndObserveGutter() {
-            if (!gutterMounted) {
-              gutter.observe(scrollElement);
-              gutter.addGutter(editorParentElement);
-            }
-          };
-          if (pluginOptions.persistScrollGutter) {
-            if (!(0, _utils.isEmptyDocument)(state.doc)) {
-              addAndObserveGutter();
-            } else {
-              gutter.removeGutter();
-            }
-            return;
-          }
-          // Determine whether we need to consider Keyboard Height
-          var keyboardHeight = (_getKeyboardHeight = getKeyboardHeight(state)) !== null && _getKeyboardHeight !== void 0 ? _getKeyboardHeight : 0;
-          var viewportHeight = scrollElement.offsetHeight - keyboardHeight;
-          var contentHeight = editorParentElement.offsetHeight - (gutterMounted ? gutterSize : 0);
-
-          // Add or remove the gutter based on whether the content is about to exceed the viewport height.
-          // We do this to ensure there is sufficient white space below the last content node in order to
-          // see any UI control elements which may sit beneath it.
-          var gutterThresholdHeight = viewportHeight - gutterSize;
-          if (contentHeight >= gutterThresholdHeight) {
-            addAndObserveGutter();
-          } else {
-            if (gutterMounted) {
-              gutter.removeGutter();
-            }
-          }
+          toggleGutter(viewportElementHeight, contentElementHeight);
         }
       };
     })

package/dist/cjs/pm-plugins/scroll-gutter/plugin-deprecated.js

@@ -0,0 +1,262 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getKeyboardHeight = exports.default = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _utils = require("@atlaskit/editor-common/utils");
+var _pluginKey = require("./plugin-key");
+var getKeyboardHeight = exports.getKeyboardHeight = function getKeyboardHeight(state) {
+  if (state) {
+    var scrollGutterPluginState = (0, _pluginKey.getScrollGutterPluginState)(state);
+    return scrollGutterPluginState ? scrollGutterPluginState.keyboardHeight : undefined;
+  }
+};
+var MIN_TAP_SIZE_IN_PX = 40;
+function supportsIntersectionObserver() {
+  if (typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  window.IntersectionObserverEntry.prototype) {
+    return true;
+  }
+  return false;
+}
+function listenForGutterVisibilityChanges(scrollElement, gutterIsVisible) {
+  if (supportsIntersectionObserver()) {
+    var observer = new IntersectionObserver(function (entries, _) {
+      entries.forEach(function (entry) {
+        gutterIsVisible(entry.intersectionRatio > 0);
+      });
+    }, {
+      root: scrollElement,
+      rootMargin: '0px',
+      threshold: 0
+    });
+    return observer;
+  }
+  return undefined;
+}
+
+/**
+ * Create a gutter element that can be added or removed from the DOM.
+ */
+function createGutter(gutterSize) {
+  var gutter = document.createElement('div');
+  gutter.style.paddingBottom = "".concat(gutterSize, "px");
+  gutter.id = _utils.GUTTER_SELECTOR.substr(1);
+  var initialized = false;
+  var mounted = false;
+  var currentParent = null;
+  var observer;
+  var isVisible = false;
+  return {
+    addGutter: function addGutter(parent) {
+      if (parent) {
+        currentParent = parent;
+        parent.appendChild(gutter);
+        mounted = true;
+        if (observer) {
+          observer.observe(gutter);
+        }
+      }
+    },
+    removeGutter: function removeGutter() {
+      if (currentParent && mounted) {
+        mounted = false;
+        currentParent.removeChild(gutter);
+        if (observer) {
+          observer.unobserve(gutter);
+        }
+      }
+    },
+    element: function element() {
+      return gutter;
+    },
+    isMounted: function isMounted() {
+      return mounted;
+    },
+    visible: function visible() {
+      // If we know whether it's visible we can avoid expensive calculations
+      if (observer) {
+        return isVisible;
+      }
+      // Fallback for legacy browsers assumes it's visible (if mounted)
+      return mounted;
+    },
+    observe: function observe(scrollElement) {
+      if (!initialized) {
+        initialized = true;
+        observer = listenForGutterVisibilityChanges(scrollElement, function (visible) {
+          return isVisible = visible;
+        });
+      }
+    },
+    destroy: function destroy() {
+      if (observer) {
+        observer.disconnect();
+      }
+      observer = undefined;
+      this.removeGutter();
+      initialized = mounted = false;
+    }
+  };
+}
+
+/**
+ * Get caret top position given the current selection,
+ * use start container position as fallback
+ */
+function getCaretTopPosition() {
+  var windowSelection = window.getSelection();
+  if (windowSelection && windowSelection.rangeCount > 0) {
+    var range = windowSelection.getRangeAt(0);
+    if (range) {
+      var clientRects = range.getClientRects();
+      // Return client rects
+      if (clientRects && clientRects.length > 0) {
+        return clientRects[0].top;
+      }
+
+      // Return container top
+      var container = range.startContainer;
+      if (container && container.getBoundingClientRect) {
+        return container.getBoundingClientRect().top;
+      }
+    }
+  }
+  return;
+}
+function scrollToGutterElement(scrollContainer, gutterElement, gutterSize) {
+  var viewportHeight = scrollContainer.offsetHeight;
+  var viewportOffsetY = scrollContainer.getBoundingClientRect().top;
+  var caretTopPosition = getCaretTopPosition();
+  if (!caretTopPosition) {
+    return false;
+  }
+  var caretTopFromContainer = caretTopPosition - viewportOffsetY;
+  var gutterThresholdTop = viewportHeight - gutterSize - MIN_TAP_SIZE_IN_PX * 2;
+  if (caretTopFromContainer < gutterThresholdTop) {
+    return false;
+  }
+
+  // Clamp the scroll position to above the scroll gutter element.
+  gutterElement.scrollIntoView(false);
+
+  // Mark scrolling as handled so that other plugin's don't override our position.
+  return true;
+}
+var _default = exports.default = function _default() {
+  var pluginOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var getScrollElement = pluginOptions.getScrollElement,
+    allowCustomScrollHandler = pluginOptions.allowCustomScrollHandler,
+    _pluginOptions$gutter = pluginOptions.gutterSize,
+    gutterSize = _pluginOptions$gutter === void 0 ? _utils.GUTTER_SIZE_IN_PX : _pluginOptions$gutter;
+  if (!getScrollElement) {
+    return undefined;
+  }
+  var gutter = createGutter(gutterSize);
+  var scrollElement = null; // | 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 / 2,
+      // 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,
+      // Called when the view, after updating its state, tries to scroll the selection into view
+      // https://prosemirror.net/docs/ref/#view.EditorProps.handleScrollToSelection
+      handleScrollToSelection: function handleScrollToSelection() {
+        if (allowCustomScrollHandler === false) {
+          return false;
+        }
+        if (!gutter.isMounted() || !gutter.visible() || !scrollElement) {
+          // Avoid scrolling until applicable
+          return false;
+        }
+        return scrollToGutterElement(scrollElement, gutter.element(), gutterSize);
+      }
+    },
+    view: function (_view) {
+      function view(_x) {
+        return _view.apply(this, arguments);
+      }
+      view.toString = function () {
+        return _view.toString();
+      };
+      return view;
+    }(function (view) {
+      // Store references to avoid lookups on successive checks.
+      scrollElement = getScrollElement(view);
+      var editorElement = view.dom;
+      var editorParentElement = editorElement.parentElement;
+      return {
+        destroy: function destroy() {
+          // Remove if it's mounted
+          gutter.destroy();
+          scrollElement = editorParentElement = editorElement = null;
+        },
+        /**
+         * Toggle the Scroll Gutter Element
+         */
+        update: function update(view, prevState) {
+          var _getKeyboardHeight;
+          if (!scrollElement || !editorParentElement) {
+            return;
+          }
+          var state = view.state;
+          if (prevState.selection === state.selection) {
+            // No need to recheck if the selected node hasn't changed.
+            return;
+          }
+          var gutterMounted = gutter.isMounted();
+          var addAndObserveGutter = function addAndObserveGutter() {
+            if (!gutterMounted) {
+              gutter.observe(scrollElement);
+              gutter.addGutter(editorParentElement);
+            }
+          };
+          if (pluginOptions.persistScrollGutter) {
+            if (!(0, _utils.isEmptyDocument)(state.doc)) {
+              addAndObserveGutter();
+            } else {
+              gutter.removeGutter();
+            }
+            return;
+          }
+          // Determine whether we need to consider Keyboard Height
+          var keyboardHeight = (_getKeyboardHeight = getKeyboardHeight(state)) !== null && _getKeyboardHeight !== void 0 ? _getKeyboardHeight : 0;
+          var viewportHeight = scrollElement.offsetHeight - keyboardHeight;
+          var contentHeight = editorParentElement.offsetHeight - (gutterMounted ? gutterSize : 0);
+
+          // Add or remove the gutter based on whether the content is about to exceed the viewport height.
+          // We do this to ensure there is sufficient white space below the last content node in order to
+          // see any UI control elements which may sit beneath it.
+          var gutterThresholdHeight = viewportHeight - gutterSize;
+          if (contentHeight >= gutterThresholdHeight) {
+            addAndObserveGutter();
+          } else {
+            if (gutterMounted) {
+              gutter.removeGutter();
+            }
+          }
+        }
+      };
+    })
+  });
+};

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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { setKeyboardHeight } from './commands';
 import contextIdentifierPlugin, { getContextIdentifier } from './pm-plugins/context-identifier';
 import disableSpellcheckingPlugin from './pm-plugins/disable-spell-checking';
@@ -10,6 +11,7 @@ import frozenEditor from './pm-plugins/frozen-editor';
 import inlineCursorTargetPlugin from './pm-plugins/inline-cursor-target';
 import newlinePreserveMarksPlugin from './pm-plugins/newline-preserve-marks';
 import scrollGutter, { getKeyboardHeight } from './pm-plugins/scroll-gutter';
+import deprecatedScrollGutter from './pm-plugins/scroll-gutter/plugin-deprecated';
 const basePlugin = ({
   config: options,
   api
@@ -37,10 +39,13 @@ const basePlugin = ({
 
       // In Chrome, when the selection is placed between adjacent nodes which are not contenteditatble
       // the cursor appears at the right most point of the parent container.
+      //
       // In Firefox, when the selection is placed between adjacent nodes which are not contenteditatble
       // no cursor is presented to users.
+      //
       // In Safari, when the selection is placed between adjacent nodes which are not contenteditatble
       // it is not possible to navigate with arrow keys.
+      //
       // This plugin works around the issues by inserting decorations between
       // inline nodes which are set as contenteditable, and have a zero width space.
       plugins.push({
@@ -80,7 +85,7 @@ const basePlugin = ({
       if (options && options.allowScrollGutter) {
         plugins.push({
           name: 'scrollGutterPlugin',
-          plugin: () => scrollGutter(options.allowScrollGutter)
+          plugin: () => getBooleanFF('platform.editor.scroll-gutter.reflow-optimisation') ? scrollGutter(options.allowScrollGutter) : deprecatedScrollGutter(options.allowScrollGutter)
         });
       }
       plugins.push({

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

@@ -187,17 +187,69 @@ export default ((pluginOptions = {}) => {
       scrollElement = getScrollElement(view);
       let editorElement = view.dom;
       let editorParentElement = editorElement.parentElement;
+      let viewportElementHeight = 0;
+      let contentElementHeight = 0;
+      const addAndObserveGutter = () => {
+        if (!gutter.isMounted()) {
+          gutter.observe(scrollElement);
+          gutter.addGutter(editorParentElement);
+        }
+      };
+      const toggleGutter = (viewPortSize, contentSize) => {
+        if (pluginOptions.persistScrollGutter) {
+          if (!isEmptyDocument(view.state.doc)) {
+            addAndObserveGutter();
+          } else {
+            gutter.removeGutter();
+          }
+          return;
+        }
+
+        // Add or remove the gutter based on whether the content is about to exceed the viewport height.
+        // We do this to ensure there is sufficient white space below the last content node in order to
+        // see any UI control elements which may sit beneath it.
+        const gutterThresholdHeight = viewPortSize - gutterSize;
+        if (contentSize >= gutterThresholdHeight) {
+          addAndObserveGutter();
+        } else {
+          if (gutter.isMounted()) {
+            gutter.removeGutter();
+          }
+        }
+      };
+      const observerCallback = entries => {
+        for (const entry of entries) {
+          const elementHeight = Math.round(entry.contentRect.height);
+          if (entry.target === scrollElement) {
+            var _getKeyboardHeight;
+            const keyboardHeight = (_getKeyboardHeight = getKeyboardHeight(view === null || view === void 0 ? void 0 : view.state)) !== null && _getKeyboardHeight !== void 0 ? _getKeyboardHeight : 0;
+            viewportElementHeight = elementHeight - keyboardHeight;
+          } else if (entry.target === editorParentElement) {
+            contentElementHeight = elementHeight - (gutter.isMounted() ? gutterSize : 0);
+          }
+        }
+        toggleGutter(viewportElementHeight, contentElementHeight);
+      };
+
+      // Subscribe to updates of the height of the viewport and content elements
+      // We toggle the value when it is set here or when PM updates to ensure we're using
+      // the latest.
+      const resizeObserver = new ResizeObserver(observerCallback);
+      if (scrollElement && editorParentElement) {
+        resizeObserver.observe(scrollElement);
+        resizeObserver.observe(editorParentElement);
+      }
       return {
         destroy() {
           // Remove if it's mounted
           gutter.destroy();
           scrollElement = editorParentElement = editorElement = null;
+          resizeObserver.disconnect();
         },
         /**
          * Toggle the Scroll Gutter Element
          */
         update(view, prevState) {
-          var _getKeyboardHeight;
           if (!scrollElement || !editorParentElement) {
             return;
           }
@@ -206,37 +258,7 @@ export default ((pluginOptions = {}) => {
             // No need to recheck if the selected node hasn't changed.
             return;
           }
-          const gutterMounted = gutter.isMounted();
-          const addAndObserveGutter = () => {
-            if (!gutterMounted) {
-              gutter.observe(scrollElement);
-              gutter.addGutter(editorParentElement);
-            }
-          };
-          if (pluginOptions.persistScrollGutter) {
-            if (!isEmptyDocument(state.doc)) {
-              addAndObserveGutter();
-            } else {
-              gutter.removeGutter();
-            }
-            return;
-          }
-          // Determine whether we need to consider Keyboard Height
-          const keyboardHeight = (_getKeyboardHeight = getKeyboardHeight(state)) !== null && _getKeyboardHeight !== void 0 ? _getKeyboardHeight : 0;
-          const viewportHeight = scrollElement.offsetHeight - keyboardHeight;
-          const contentHeight = editorParentElement.offsetHeight - (gutterMounted ? gutterSize : 0);
-
-          // Add or remove the gutter based on whether the content is about to exceed the viewport height.
-          // We do this to ensure there is sufficient white space below the last content node in order to
-          // see any UI control elements which may sit beneath it.
-          const gutterThresholdHeight = viewportHeight - gutterSize;
-          if (contentHeight >= gutterThresholdHeight) {
-            addAndObserveGutter();
-          } else {
-            if (gutterMounted) {
-              gutter.removeGutter();
-            }
-          }
+          toggleGutter(viewportElementHeight, contentElementHeight);
         }
       };
     }