@atlaskit/editor-plugin-floating-toolbar 32.0.2 → 32.0.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 32.0.3
+
+### Patch Changes
+
+- [`946472ca53135`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/946472ca53135) -
+  Behind platform_editor_improve_inp, memoize historical floating-toolbar shared-state reads inside
+  getSharedState. Keep current editor-state reads fresh, avoid adding public plugin APIs, and
+  release cached results when the editor view is destroyed.
+- Updated dependencies
+
 ## 32.0.2
 
 ### Patch Changes

package/dist/cjs/floatingToolbarPlugin.js

@@ -23,6 +23,7 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _useSharedPluginState2 = require("@atlaskit/editor-common/useSharedPluginState");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _useToolbarExternalStore = require("./hooks/useToolbarExternalStore");
 var _commands = require("./pm-plugins/commands");
@@ -143,6 +144,39 @@ function filterUndefined(x) {
 }
 var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
   var api = _ref.api;
+  var editorView;
+  var sharedStateCache;
+  var getSharedState = function getSharedState(editorState) {
+    var _api$interaction, _pluginKey$getState$g, _pluginKey$getState, _pluginKey$getState$g2;
+    if (!editorState) {
+      return undefined;
+    }
+    var memoizePreviousState = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_improve_inp');
+    if (memoizePreviousState) {
+      // Current-state reads remain live: handlers can depend on mutable values
+      // outside EditorState. Only historical reads may reuse a computed result.
+      if (editorView && editorState !== editorView.state) {
+        var _sharedStateCache;
+        var cached = (_sharedStateCache = sharedStateCache) === null || _sharedStateCache === void 0 ? void 0 : _sharedStateCache.get(editorState);
+        if (cached) {
+          return cached;
+        }
+      }
+    } else {
+      sharedStateCache = undefined;
+    }
+    var interactionState = api === null || api === void 0 || (_api$interaction = api.interaction) === null || _api$interaction === void 0 || (_api$interaction = _api$interaction.sharedState.currentState()) === null || _api$interaction === void 0 ? void 0 : _api$interaction.interactionState;
+    var configWithNodeInfo = interactionState !== 'hasNotHadInteraction' ? (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 || (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined : undefined;
+    var sharedState = {
+      configWithNodeInfo: configWithNodeInfo,
+      floatingToolbarData: _pluginKey.pluginKey.getState(editorState)
+    };
+    if (memoizePreviousState && editorView) {
+      sharedStateCache !== null && sharedStateCache !== void 0 ? sharedStateCache : sharedStateCache = new WeakMap();
+      sharedStateCache.set(editorState, sharedState);
+    }
+    return sharedState;
+  };
   return {
     name: 'floatingToolbar',
     pmPlugins: function pmPlugins() {
@@ -172,6 +206,25 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
           return (0, _forceFocus.default)();
         }
       }];
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_improve_inp')) {
+        plugins.push({
+          name: 'floatingToolbarSharedStateCache',
+          plugin: function plugin() {
+            return new _safePlugin.SafePlugin({
+              view: function view(_view) {
+                editorView = _view;
+                sharedStateCache = undefined;
+                return {
+                  destroy: function destroy() {
+                    editorView = undefined;
+                    sharedStateCache = undefined;
+                  }
+                };
+              }
+            });
+          }
+        });
+      }
       return plugins;
     },
     actions: {
@@ -183,18 +236,7 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
         return (0, _commands.copyNode)(nodeType, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, inputMethod);
       }
     },
-    getSharedState: function getSharedState(editorState) {
-      var _api$interaction, _pluginKey$getState$g, _pluginKey$getState, _pluginKey$getState$g2;
-      if (!editorState) {
-        return undefined;
-      }
-      var interactionState = api === null || api === void 0 || (_api$interaction = api.interaction) === null || _api$interaction === void 0 || (_api$interaction = _api$interaction.sharedState.currentState()) === null || _api$interaction === void 0 ? void 0 : _api$interaction.interactionState;
-      var configWithNodeInfo = interactionState !== 'hasNotHadInteraction' ? (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 || (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined : undefined;
-      return {
-        configWithNodeInfo: configWithNodeInfo,
-        floatingToolbarData: _pluginKey.pluginKey.getState(editorState)
-      };
-    },
+    getSharedState: getSharedState,
     contentComponent: function contentComponent(_ref4) {
       var popupsMountPoint = _ref4.popupsMountPoint,
         popupsBoundariesElement = _ref4.popupsBoundariesElement,

package/dist/es2019/floatingToolbarPlugin.js

@@ -10,6 +10,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { useSharedPluginState } from '@atlaskit/editor-common/useSharedPluginState';
 import { AllSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useToolbarExternalStore } from './hooks/useToolbarExternalStore';
 import { copyNode } from './pm-plugins/commands';
@@ -130,6 +131,39 @@ function filterUndefined(x) {
 export const floatingToolbarPlugin = ({
   api
 }) => {
+  let editorView;
+  let sharedStateCache;
+  const getSharedState = editorState => {
+    var _api$interaction, _api$interaction$shar, _pluginKey$getState$g, _pluginKey$getState, _pluginKey$getState$g2;
+    if (!editorState) {
+      return undefined;
+    }
+    const memoizePreviousState = isExperimentEnabled('platform_editor_improve_inp');
+    if (memoizePreviousState) {
+      // Current-state reads remain live: handlers can depend on mutable values
+      // outside EditorState. Only historical reads may reuse a computed result.
+      if (editorView && editorState !== editorView.state) {
+        var _sharedStateCache;
+        const cached = (_sharedStateCache = sharedStateCache) === null || _sharedStateCache === void 0 ? void 0 : _sharedStateCache.get(editorState);
+        if (cached) {
+          return cached;
+        }
+      }
+    } else {
+      sharedStateCache = undefined;
+    }
+    const interactionState = api === null || api === void 0 ? void 0 : (_api$interaction = api.interaction) === null || _api$interaction === void 0 ? void 0 : (_api$interaction$shar = _api$interaction.sharedState.currentState()) === null || _api$interaction$shar === void 0 ? void 0 : _api$interaction$shar.interactionState;
+    const configWithNodeInfo = interactionState !== 'hasNotHadInteraction' ? (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 ? void 0 : (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined : undefined;
+    const sharedState = {
+      configWithNodeInfo,
+      floatingToolbarData: dataPluginKey.getState(editorState)
+    };
+    if (memoizePreviousState && editorView) {
+      sharedStateCache ??= new WeakMap();
+      sharedStateCache.set(editorState, sharedState);
+    }
+    return sharedState;
+  };
   return {
     name: 'floatingToolbar',
     pmPlugins(floatingToolbarHandlers = []) {
@@ -154,6 +188,23 @@ export const floatingToolbarPlugin = ({
         name: 'forceFocus',
         plugin: () => forceFocusPlugin()
       }];
+      if (isExperimentEnabled('platform_editor_improve_inp')) {
+        plugins.push({
+          name: 'floatingToolbarSharedStateCache',
+          plugin: () => new SafePlugin({
+            view: view => {
+              editorView = view;
+              sharedStateCache = undefined;
+              return {
+                destroy: () => {
+                  editorView = undefined;
+                  sharedStateCache = undefined;
+                }
+              };
+            }
+          })
+        });
+      }
       return plugins;
     },
     actions: {
@@ -165,18 +216,7 @@ export const floatingToolbarPlugin = ({
         return copyNode(nodeType, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, inputMethod);
       }
     },
-    getSharedState(editorState) {
-      var _api$interaction, _api$interaction$shar, _pluginKey$getState$g, _pluginKey$getState, _pluginKey$getState$g2;
-      if (!editorState) {
-        return undefined;
-      }
-      const interactionState = api === null || api === void 0 ? void 0 : (_api$interaction = api.interaction) === null || _api$interaction === void 0 ? void 0 : (_api$interaction$shar = _api$interaction.sharedState.currentState()) === null || _api$interaction$shar === void 0 ? void 0 : _api$interaction$shar.interactionState;
-      const configWithNodeInfo = interactionState !== 'hasNotHadInteraction' ? (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 ? void 0 : (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined : undefined;
-      return {
-        configWithNodeInfo,
-        floatingToolbarData: dataPluginKey.getState(editorState)
-      };
-    },
+    getSharedState,
     contentComponent({
       popupsMountPoint,
       popupsBoundariesElement,

package/dist/esm/floatingToolbarPlugin.js

@@ -14,6 +14,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { useSharedPluginState } from '@atlaskit/editor-common/useSharedPluginState';
 import { AllSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useToolbarExternalStore } from './hooks/useToolbarExternalStore';
 import { copyNode as _copyNode } from './pm-plugins/commands';
@@ -131,6 +132,39 @@ function filterUndefined(x) {
 }
 export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
   var api = _ref.api;
+  var editorView;
+  var sharedStateCache;
+  var getSharedState = function getSharedState(editorState) {
+    var _api$interaction, _pluginKey$getState$g, _pluginKey$getState, _pluginKey$getState$g2;
+    if (!editorState) {
+      return undefined;
+    }
+    var memoizePreviousState = isExperimentEnabled('platform_editor_improve_inp');
+    if (memoizePreviousState) {
+      // Current-state reads remain live: handlers can depend on mutable values
+      // outside EditorState. Only historical reads may reuse a computed result.
+      if (editorView && editorState !== editorView.state) {
+        var _sharedStateCache;
+        var cached = (_sharedStateCache = sharedStateCache) === null || _sharedStateCache === void 0 ? void 0 : _sharedStateCache.get(editorState);
+        if (cached) {
+          return cached;
+        }
+      }
+    } else {
+      sharedStateCache = undefined;
+    }
+    var interactionState = api === null || api === void 0 || (_api$interaction = api.interaction) === null || _api$interaction === void 0 || (_api$interaction = _api$interaction.sharedState.currentState()) === null || _api$interaction === void 0 ? void 0 : _api$interaction.interactionState;
+    var configWithNodeInfo = interactionState !== 'hasNotHadInteraction' ? (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 || (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined : undefined;
+    var sharedState = {
+      configWithNodeInfo: configWithNodeInfo,
+      floatingToolbarData: dataPluginKey.getState(editorState)
+    };
+    if (memoizePreviousState && editorView) {
+      sharedStateCache !== null && sharedStateCache !== void 0 ? sharedStateCache : sharedStateCache = new WeakMap();
+      sharedStateCache.set(editorState, sharedState);
+    }
+    return sharedState;
+  };
   return {
     name: 'floatingToolbar',
     pmPlugins: function pmPlugins() {
@@ -160,6 +194,25 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
           return forceFocusPlugin();
         }
       }];
+      if (isExperimentEnabled('platform_editor_improve_inp')) {
+        plugins.push({
+          name: 'floatingToolbarSharedStateCache',
+          plugin: function plugin() {
+            return new SafePlugin({
+              view: function view(_view) {
+                editorView = _view;
+                sharedStateCache = undefined;
+                return {
+                  destroy: function destroy() {
+                    editorView = undefined;
+                    sharedStateCache = undefined;
+                  }
+                };
+              }
+            });
+          }
+        });
+      }
       return plugins;
     },
     actions: {
@@ -171,18 +224,7 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
         return _copyNode(nodeType, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, inputMethod);
       }
     },
-    getSharedState: function getSharedState(editorState) {
-      var _api$interaction, _pluginKey$getState$g, _pluginKey$getState, _pluginKey$getState$g2;
-      if (!editorState) {
-        return undefined;
-      }
-      var interactionState = api === null || api === void 0 || (_api$interaction = api.interaction) === null || _api$interaction === void 0 || (_api$interaction = _api$interaction.sharedState.currentState()) === null || _api$interaction === void 0 ? void 0 : _api$interaction.interactionState;
-      var configWithNodeInfo = interactionState !== 'hasNotHadInteraction' ? (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 || (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined : undefined;
-      return {
-        configWithNodeInfo: configWithNodeInfo,
-        floatingToolbarData: dataPluginKey.getState(editorState)
-      };
-    },
+    getSharedState: getSharedState,
     contentComponent: function contentComponent(_ref4) {
       var popupsMountPoint = _ref4.popupsMountPoint,
         popupsBoundariesElement = _ref4.popupsBoundariesElement,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "32.0.2",
+	"version": "32.0.3",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",