@atlaskit/editor-plugin-type-ahead 31.0.16 → 31.0.18

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 31.0.18
+
+### Patch Changes
+
+- Updated dependencies
+
+## 31.0.17
+
+### Patch Changes
+
+- [`1935babc0509d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1935babc0509d) -
+  Improve editor interaction performance behind `platform_editor_block_control_inp`. Quick Insert
+  now reuses an unformatted empty paragraph that already immediately follows the target block
+  instead of inserting a new one, and the typeahead popup reuses a single memoized layout scheduler.
+  Paths that keep the cursor inside the target block, such as cell selections and text selections,
+  are unchanged.
+- Updated dependencies
+
 ## 31.0.16
 
 ### Patch Changes

package/dist/cjs/ui/TypeAheadPopup.js

@@ -16,6 +16,7 @@ var _utils = require("@atlaskit/editor-common/Popup/utils");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
 var _constants = require("@atlaskit/editor-shared-styles/constants");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _analytics = require("../pm-plugins/analytics");
 var _constants2 = require("../pm-plugins/constants");
@@ -89,6 +90,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     moreElementsInQuickInsertView = _useSharedPluginState.moreElementsInQuickInsertView;
   var moreElementsInQuickInsertViewEnabled = moreElementsInQuickInsertView && triggerHandler.id === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT;
   var isEditorControlsEnabled = (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1');
+  var typeAheadOptimizationsEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_inp');
   var defaultMenuHeight = (0, _react.useMemo)(function () {
     return moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT;
   }, [moreElementsInQuickInsertViewEnabled]);
@@ -192,7 +194,23 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     var minFitHeight = Math.min(defaultMenuHeight, fitHeightWithSpace);
     return setFitHeight(minFitHeight);
   }, [anchorElement, defaultMenuHeight, popupsBoundariesElement, popupsMountPoint]);
-  var getFitHeightDebounced = (0, _rafSchd.default)(getFitHeight);
+  var stableGetFitHeightDebounced = (0, _react.useMemo)(function () {
+    return typeAheadOptimizationsEnabled ? (0, _rafSchd.default)(getFitHeight) : undefined;
+  }, [getFitHeight, typeAheadOptimizationsEnabled]);
+  // A new rafSchedule instance on every render re-runs the layout effect below (two forced
+  // layouts plus listener re-binding) on every popup render; the memoised one keeps it stable.
+  var getFitHeightDebounced = stableGetFitHeightDebounced !== null && stableGetFitHeightDebounced !== void 0 ? stableGetFitHeightDebounced : (0, _rafSchd.default)(getFitHeight);
+  (0, _react.useEffect)(function () {
+    if (stableGetFitHeightDebounced) {
+      // eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- rAF-batched measurement keeps popup geometry fresh without re-binding listeners
+      stableGetFitHeightDebounced();
+    }
+    // Cancel our own pending frame so this effect does not rely on the layout effect cleanup
+    // below. raf-schd's cancel() is a no-op when nothing is scheduled, so double-cancel is safe.
+    return function () {
+      return stableGetFitHeightDebounced === null || stableGetFitHeightDebounced === void 0 ? void 0 : stableGetFitHeightDebounced.cancel();
+    };
+  }, [props.decorationSet, isEmptyQuery, items, stableGetFitHeightDebounced]);
   (0, _react.useLayoutEffect)(function () {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -215,8 +233,9 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         scrollableElement.removeEventListener('scroll', getFitHeightDebounced);
       }
+      stableGetFitHeightDebounced === null || stableGetFitHeightDebounced === void 0 || stableGetFitHeightDebounced.cancel();
     };
-  }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
+  }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight, stableGetFitHeightDebounced]);
   (0, _react.useLayoutEffect)(function () {
     var _ref2 = (0, _utils2.getPluginState)(editorView.state) || {},
       removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;

package/dist/es2019/ui/TypeAheadPopup.js

@@ -13,6 +13,7 @@ import { findOverflowScrollParent } from '@atlaskit/editor-common/Popup/utils';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles/constants';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
@@ -81,6 +82,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   });
   const moreElementsInQuickInsertViewEnabled = moreElementsInQuickInsertView && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT;
   const isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+  const typeAheadOptimizationsEnabled = isExperimentEnabled('platform_editor_block_control_inp');
   const defaultMenuHeight = useMemo(() => moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT, [moreElementsInQuickInsertViewEnabled]);
   const activityStateRef = useRef({
     inputMethod: null,
@@ -179,7 +181,19 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     const minFitHeight = Math.min(defaultMenuHeight, fitHeightWithSpace);
     return setFitHeight(minFitHeight);
   }, [anchorElement, defaultMenuHeight, popupsBoundariesElement, popupsMountPoint]);
-  const getFitHeightDebounced = rafSchedule(getFitHeight);
+  const stableGetFitHeightDebounced = useMemo(() => typeAheadOptimizationsEnabled ? rafSchedule(getFitHeight) : undefined, [getFitHeight, typeAheadOptimizationsEnabled]);
+  // A new rafSchedule instance on every render re-runs the layout effect below (two forced
+  // layouts plus listener re-binding) on every popup render; the memoised one keeps it stable.
+  const getFitHeightDebounced = stableGetFitHeightDebounced !== null && stableGetFitHeightDebounced !== void 0 ? stableGetFitHeightDebounced : rafSchedule(getFitHeight);
+  useEffect(() => {
+    if (stableGetFitHeightDebounced) {
+      // eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- rAF-batched measurement keeps popup geometry fresh without re-binding listeners
+      stableGetFitHeightDebounced();
+    }
+    // Cancel our own pending frame so this effect does not rely on the layout effect cleanup
+    // below. raf-schd's cancel() is a no-op when nothing is scheduled, so double-cancel is safe.
+    return () => stableGetFitHeightDebounced === null || stableGetFitHeightDebounced === void 0 ? void 0 : stableGetFitHeightDebounced.cancel();
+  }, [props.decorationSet, isEmptyQuery, items, stableGetFitHeightDebounced]);
   useLayoutEffect(() => {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -202,8 +216,9 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         scrollableElement.removeEventListener('scroll', getFitHeightDebounced);
       }
+      stableGetFitHeightDebounced === null || stableGetFitHeightDebounced === void 0 ? void 0 : stableGetFitHeightDebounced.cancel();
     };
-  }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
+  }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight, stableGetFitHeightDebounced]);
   useLayoutEffect(() => {
     const {
       removePrefixTriggerOnCancel

package/dist/esm/ui/TypeAheadPopup.js

@@ -14,6 +14,7 @@ import { findOverflowScrollParent } from '@atlaskit/editor-common/Popup/utils';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles/constants';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
@@ -79,6 +80,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     moreElementsInQuickInsertView = _useSharedPluginState.moreElementsInQuickInsertView;
   var moreElementsInQuickInsertViewEnabled = moreElementsInQuickInsertView && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT;
   var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+  var typeAheadOptimizationsEnabled = isExperimentEnabled('platform_editor_block_control_inp');
   var defaultMenuHeight = useMemo(function () {
     return moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT;
   }, [moreElementsInQuickInsertViewEnabled]);
@@ -182,7 +184,23 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     var minFitHeight = Math.min(defaultMenuHeight, fitHeightWithSpace);
     return setFitHeight(minFitHeight);
   }, [anchorElement, defaultMenuHeight, popupsBoundariesElement, popupsMountPoint]);
-  var getFitHeightDebounced = rafSchedule(getFitHeight);
+  var stableGetFitHeightDebounced = useMemo(function () {
+    return typeAheadOptimizationsEnabled ? rafSchedule(getFitHeight) : undefined;
+  }, [getFitHeight, typeAheadOptimizationsEnabled]);
+  // A new rafSchedule instance on every render re-runs the layout effect below (two forced
+  // layouts plus listener re-binding) on every popup render; the memoised one keeps it stable.
+  var getFitHeightDebounced = stableGetFitHeightDebounced !== null && stableGetFitHeightDebounced !== void 0 ? stableGetFitHeightDebounced : rafSchedule(getFitHeight);
+  useEffect(function () {
+    if (stableGetFitHeightDebounced) {
+      // eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- rAF-batched measurement keeps popup geometry fresh without re-binding listeners
+      stableGetFitHeightDebounced();
+    }
+    // Cancel our own pending frame so this effect does not rely on the layout effect cleanup
+    // below. raf-schd's cancel() is a no-op when nothing is scheduled, so double-cancel is safe.
+    return function () {
+      return stableGetFitHeightDebounced === null || stableGetFitHeightDebounced === void 0 ? void 0 : stableGetFitHeightDebounced.cancel();
+    };
+  }, [props.decorationSet, isEmptyQuery, items, stableGetFitHeightDebounced]);
   useLayoutEffect(function () {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -205,8 +223,9 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         scrollableElement.removeEventListener('scroll', getFitHeightDebounced);
       }
+      stableGetFitHeightDebounced === null || stableGetFitHeightDebounced === void 0 || stableGetFitHeightDebounced.cancel();
     };
-  }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
+  }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight, stableGetFitHeightDebounced]);
   useLayoutEffect(function () {
     var _ref2 = getPluginState(editorView.state) || {},
       removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "31.0.16",
+	"version": "31.0.18",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 		"@atlaskit/editor-plugin-metrics": "^31.0.0",
 		"@atlaskit/editor-plugin-ui-control-registry": "^24.0.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
-		"@atlaskit/editor-shared-styles": "^5.0.0",
+		"@atlaskit/editor-shared-styles": "^5.1.0",
 		"@atlaskit/editor-ui-control-model": "^3.0.0",
 		"@atlaskit/heading": "^8.0.0",
 		"@atlaskit/insm": "^3.0.0",
@@ -40,7 +40,7 @@
 		"@atlaskit/primitives": "^22.6.0",
 		"@atlaskit/prosemirror-history": "^1.3.0",
 		"@atlaskit/prosemirror-input-rules": "^4.1.0",
-		"@atlaskit/tmp-editor-statsig": "^257.0.0",
+		"@atlaskit/tmp-editor-statsig": "^258.0.0",
 		"@atlaskit/tokens": "^20.9.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",