@atlaskit/editor-plugin-type-ahead 1.13.0 → 1.13.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 1.13.2
+
+### Patch Changes
+
+- [#112186](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112186)
+  [`9462d8ca2405a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9462d8ca2405a) -
+  Bump adf-schema to 47.2.1
+
+## 1.13.1
+
+### Patch Changes
+
+- [#112096](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112096)
+  [`5d95afdd358ac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5d95afdd358ac) -
+  [ux] Creates a package for new QuickInsert and Right Rail UI and adds it under a FF
+- Updated dependencies
+
 ## 1.13.0
 
 ### Minor Changes

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

@@ -6,14 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.factoryDecorations = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _w3cKeyname = require("w3c-keyname");
 var _history = require("@atlaskit/editor-prosemirror/history");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _WrapperTypeAhead = require("../ui/WrapperTypeAhead");
 var _closeTypeAhead = require("./commands/close-type-ahead");
@@ -86,31 +84,9 @@ var factoryDecorations = exports.factoryDecorations = function factoryDecoration
         }
         return false;
       };
-      if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-        nodeViewPortalProviderAPI.render(function () {
-          var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
-          return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
-            locale: intl.locale || 'en',
-            messages: intl.messages,
-            formats: intl.formats
-          }, /*#__PURE__*/_react.default.createElement(_WrapperTypeAhead.WrapperTypeAhead, {
-            triggerHandler: triggerHandler,
-            editorView: editorView,
-            anchorElement: typeaheadComponent,
-            inputMethod: inputMethod,
-            getDecorationPosition: getDecorationPosition,
-            shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
-            popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
-            popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
-            popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
-            onUndoRedo: onUndoRedo,
-            reopenQuery: reopenQuery,
-            api: api
-          }));
-        }, typeaheadComponent, decorationId);
-      } else {
-        var _popupMountRef$curren4, _popupMountRef$curren5, _popupMountRef$curren6;
-        _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+      nodeViewPortalProviderAPI.render(function () {
+        var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
+        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
           locale: intl.locale || 'en',
           messages: intl.messages,
           formats: intl.formats
@@ -121,14 +97,14 @@ var factoryDecorations = exports.factoryDecorations = function factoryDecoration
           inputMethod: inputMethod,
           getDecorationPosition: getDecorationPosition,
           shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
-          popupsMountPoint: (_popupMountRef$curren4 = popupMountRef.current) === null || _popupMountRef$curren4 === void 0 ? void 0 : _popupMountRef$curren4.popupsMountPoint,
-          popupsBoundariesElement: (_popupMountRef$curren5 = popupMountRef.current) === null || _popupMountRef$curren5 === void 0 ? void 0 : _popupMountRef$curren5.popupsBoundariesElement,
-          popupsScrollableElement: (_popupMountRef$curren6 = popupMountRef.current) === null || _popupMountRef$curren6 === void 0 ? void 0 : _popupMountRef$curren6.popupsScrollableElement,
+          popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
+          popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
+          popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
           onUndoRedo: onUndoRedo,
           reopenQuery: reopenQuery,
           api: api
-        })), typeaheadComponent);
-      }
+        }));
+      }, typeaheadComponent, decorationId);
       shouldFocusCursorInsideQuery = false;
       return typeaheadComponent;
     }, {
@@ -170,11 +146,7 @@ var factoryDecorations = exports.factoryDecorations = function factoryDecoration
       if (!decoElement) {
         return;
       }
-      if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-        nodeViewPortalProviderAPI.remove(spec.key);
-      } else {
-        _reactDom.default.unmountComponentAtNode(decoElement);
-      }
+      nodeViewPortalProviderAPI.remove(spec.key);
     });
     return true;
   };

package/dist/cjs/ui/ContentComponent.js

@@ -7,8 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.ContentComponent = ContentComponent;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _TypeAheadMenu = require("./TypeAheadMenu");
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _TypeAheadMenu = require("./modern/TypeAheadMenu");
+var _TypeAheadMenu2 = require("./TypeAheadMenu");
 function ContentComponent(_ref) {
+  var _typeAheadState$trigg;
   var api = _ref.api,
     editorView = _ref.editorView,
     popupMountRef = _ref.popupMountRef;
@@ -17,10 +21,21 @@ function ContentComponent(_ref) {
   if (!typeAheadState) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_TypeAheadMenu.TypeAheadMenu, {
-    editorView: editorView,
-    popupMountRef: popupMountRef,
-    typeAheadState: typeAheadState,
-    api: api
-  });
+  if (
+  // TODO: Also requires a check for editor appearance (needs to be enabled for full-page/full-width editor only ?)
+  !(0, _experiments.editorExperiment)('platform_editor_controls', 'control') && ((_typeAheadState$trigg = typeAheadState.triggerHandler) === null || _typeAheadState$trigg === void 0 ? void 0 : _typeAheadState$trigg.id) === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT) {
+    return /*#__PURE__*/_react.default.createElement(_TypeAheadMenu.TypeAheadMenu, {
+      editorView: editorView,
+      popupMountRef: popupMountRef,
+      typeAheadState: typeAheadState,
+      api: api
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_TypeAheadMenu2.TypeAheadMenu, {
+      editorView: editorView,
+      popupMountRef: popupMountRef,
+      typeAheadState: typeAheadState,
+      api: api
+    });
+  }
 }

package/dist/cjs/ui/modern/TypeAheadMenu.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadMenu = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _useItemInsert3 = require("../hooks/use-item-insert");
+var _TypeAheadPopup = require("./TypeAheadPopup");
+var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
+  var editorView = _ref.editorView,
+    popupMountRef = _ref.popupMountRef,
+    typeAheadState = _ref.typeAheadState,
+    api = _ref.api;
+  var isOpen = typeAheadState.decorationSet.find().length > 0;
+  var triggerHandler = typeAheadState.triggerHandler,
+    items = typeAheadState.items,
+    errorInfo = typeAheadState.errorInfo,
+    decorationElement = typeAheadState.decorationElement,
+    decorationSet = typeAheadState.decorationSet,
+    query = typeAheadState.query;
+  var _useItemInsert = (0, _useItemInsert3.useItemInsert)(
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    triggerHandler, editorView, items, api),
+    _useItemInsert2 = (0, _slicedToArray2.default)(_useItemInsert, 2),
+    onItemInsert = _useItemInsert2[0],
+    onTextInsert = _useItemInsert2[1];
+  var insertItem = _react.default.useCallback(function () {
+    var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _typeAhead.SelectItemMode.SELECTED;
+    var index = arguments.length > 1 ? arguments[1] : undefined;
+    queueMicrotask(function () {
+      onItemInsert({
+        mode: mode,
+        index: index,
+        query: query
+      });
+    });
+  }, [onItemInsert, query]);
+  var cancel = _react.default.useCallback(function (_ref2) {
+    var setSelectionAt = _ref2.setSelectionAt,
+      addPrefixTrigger = _ref2.addPrefixTrigger,
+      forceFocusOnEditor = _ref2.forceFocusOnEditor;
+    var fullQuery = addPrefixTrigger ? "".concat(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger).concat(query) : query;
+    onTextInsert({
+      forceFocusOnEditor: forceFocusOnEditor,
+      setSelectionAt: setSelectionAt,
+      text: fullQuery
+    });
+  }, [triggerHandler, onTextInsert, query]);
+  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || items.length === 0 && !errorInfo) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_TypeAheadPopup.TypeAheadPopup, {
+    editorView: editorView,
+    popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
+    popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
+    popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
+    anchorElement: decorationElement,
+    triggerHandler: triggerHandler,
+    items: items,
+    errorInfo: errorInfo
+    // selectedIndex={selectedIndex}
+    // setSelectedItem={setSelectedItem}
+    ,
+    onItemInsert: insertItem,
+    decorationSet: decorationSet,
+    isEmptyQuery: !query,
+    query: query,
+    cancel: cancel,
+    api: api
+  });
+});

package/dist/cjs/ui/modern/TypeAheadPopup.js

@@ -0,0 +1,282 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadPopup = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _ui = require("@atlaskit/editor-common/ui");
+var _editorElementBrowser = require("@atlaskit/editor-element-browser");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _primitives = require("@atlaskit/primitives");
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("../../pm-plugins/constants");
+var _TypeAheadErrorFallback = require("../TypeAheadErrorFallback");
+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; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 520;
+// const DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW = 480;
+
+var ITEM_PADDING = 12;
+var typeAheadContent = (0, _react2.css)({
+  background: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(_colors.N60A, ", 0 4px 8px -2px ").concat(_colors.N50A), ")"),
+  padding: "var(--ds-space-050, 4px)".concat(" 0"),
+  width: '280px',
+  maxHeight: '520px' /* ~5.5 visibile items */,
+  overflowY: 'auto',
+  MsOverflowStyle: '-ms-autohiding-scrollbar',
+  position: 'relative'
+});
+// const typeAheadContentOverride = css({
+// 	maxHeight: `${DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW}px`,
+// });
+
+var viewAllButtonStyles = (0, _primitives.xcss)({
+  background: "var(--ds-background-input-pressed, #FFFFFF)",
+  position: 'sticky',
+  bottom: '-4px',
+  width: '100%',
+  height: '40px',
+  color: 'color.text.subtle',
+  fontWeight: "var(--ds-font-weight-medium, 500)",
+  ':hover': {
+    textDecoration: 'underline'
+  },
+  ':active': {
+    color: 'color.text'
+  }
+});
+var OFFSET = [0, 8];
+var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
+  var triggerHandler = props.triggerHandler,
+    anchorElement = props.anchorElement,
+    popupsMountPoint = props.popupsMountPoint,
+    popupsBoundariesElement = props.popupsBoundariesElement,
+    popupsScrollableElement = props.popupsScrollableElement,
+    items = props.items,
+    errorInfo = props.errorInfo,
+    onItemInsert = props.onItemInsert,
+    isEmptyQuery = props.isEmptyQuery,
+    cancel = props.cancel,
+    api = props.api,
+    query = props.query;
+  var ref = (0, _react.useRef)(null);
+  var defaultMenuHeight = DEFAULT_TYPEAHEAD_MENU_HEIGHT;
+  var startTime = (0, _react.useMemo)(function () {
+    return performance.now();
+  },
+  // In case those props changes
+  // we need to recreate the startTime
+  [items, isEmptyQuery, triggerHandler] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  (0, _react.useEffect)(function () {
+    var _api$analytics, _api$analytics2;
+    if (!(api !== null && api !== void 0 && (_api$analytics = api.analytics) !== null && _api$analytics !== void 0 && (_api$analytics = _api$analytics.actions) !== null && _api$analytics !== void 0 && _api$analytics.fireAnalyticsEvent)) {
+      return;
+    }
+    var stopTime = performance.now();
+    var time = stopTime - startTime;
+    api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.fireAnalyticsEvent({
+      action: _analytics.ACTION.RENDERED,
+      actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD,
+      eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        time: time,
+        items: items.length,
+        initial: isEmptyQuery
+      }
+    });
+  }, [startTime, items, isEmptyQuery,
+  // In case the current triggerHandler changes
+  // e.g: Inserting a mention using the quick insert
+  // we need to send the event again
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  triggerHandler, api]);
+
+  // useEffect(() => {
+  // 	if (!api?.analytics?.actions?.fireAnalyticsEvent) {
+  // 		return;
+  // 	}
+
+  // 	api?.analytics?.actions?.fireAnalyticsEvent({
+  // 		action: ACTION.VIEWED,
+  // 		actionSubject: ACTION_SUBJECT.TYPEAHEAD_ITEM,
+  // 		eventType: EVENT_TYPE.OPERATIONAL,
+  // 		attributes: {
+  // 			index: selectedIndex,
+  // 			items: items.length,
+  // 		},
+  // 	});
+  // }, [
+  // 	items,
+  // 	api,
+  // 	selectedIndex,
+  // 	// In case the current triggerHandler changes
+  // 	// e.g: Inserting a mention using the quick insert
+  // 	// we need to send the event again
+  // 	// eslint-disable-next-line react-hooks/exhaustive-deps
+  // 	triggerHandler,
+  // ]);
+
+  var _useState = (0, _react.useState)(defaultMenuHeight),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    fitHeight = _useState2[0],
+    setFitHeight = _useState2[1];
+  var getFitHeight = (0, _react.useCallback)(function () {
+    if (!anchorElement || !popupsMountPoint) {
+      return;
+    }
+    var target = anchorElement;
+    var _target$getBoundingCl = target.getBoundingClientRect(),
+      targetTop = _target$getBoundingCl.top,
+      targetHeight = _target$getBoundingCl.height;
+    var boundariesElement = popupsBoundariesElement || document.body;
+    var _boundariesElement$ge = boundariesElement.getBoundingClientRect(),
+      boundariesHeight = _boundariesElement$ge.height,
+      boundariesTop = _boundariesElement$ge.top;
+
+    // Calculating the space above and space below our decoration
+    var spaceAbove = targetTop - (boundariesTop - boundariesElement.scrollTop);
+    var spaceBelow = boundariesTop + boundariesHeight - (targetTop + targetHeight);
+
+    // Keep default height if more than enough space
+    if (spaceBelow >= defaultMenuHeight) {
+      return setFitHeight(defaultMenuHeight);
+    }
+
+    // Determines whether typeahead will fit above or below decoration
+    // and return the space available.
+    var newFitHeight = spaceBelow >= spaceAbove ? spaceBelow : spaceAbove;
+
+    // Each typeahead item has some padding
+    // We want to leave some space at the top so first item
+    // is not partially cropped
+    var fitHeightWithSpace = newFitHeight - ITEM_PADDING * 2;
+
+    // Ensure typeahead height is max its default height
+    var minFitHeight = Math.min(defaultMenuHeight, fitHeightWithSpace);
+    return setFitHeight(minFitHeight);
+  }, [anchorElement, defaultMenuHeight, popupsBoundariesElement, popupsMountPoint]);
+  var getFitHeightDebounced = (0, _rafSchd.default)(getFitHeight);
+  (0, _react.useLayoutEffect)(function () {
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    var scrollableElement = popupsScrollableElement || (0, _ui.findOverflowScrollParent)(anchorElement);
+    getFitHeight();
+    // Ignored via go/ees005
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    window.addEventListener('resize', getFitHeightDebounced);
+    if (scrollableElement) {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      scrollableElement.addEventListener('scroll', getFitHeightDebounced);
+    }
+    return function () {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      window.removeEventListener('resize', getFitHeightDebounced);
+      if (scrollableElement) {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        scrollableElement.removeEventListener('scroll', getFitHeightDebounced);
+      }
+    };
+  }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
+  (0, _react.useLayoutEffect)(function () {
+    var focusOut = function focusOut(event) {
+      var _window$getSelection;
+      var relatedTarget = event.relatedTarget;
+
+      // Given the user is changing the focus
+      // When the target is inside the TypeAhead Popup
+      // Then the popup should stay open
+      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(".".concat(_constants.TYPE_AHEAD_POPUP_CONTENT_CLASS)) || relatedTarget.closest("[data-type-ahead=\"".concat(_constants.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, "\"]")))) {
+        return;
+      }
+      if (!(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range')) {
+        return;
+      }
+      cancel({
+        addPrefixTrigger: true,
+        setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        forceFocusOnEditor: false
+      });
+    };
+    var element = ref.current;
+    // Ignored via go/ees005
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    element === null || element === void 0 || element.addEventListener('focusout', focusOut);
+    return function () {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      element === null || element === void 0 || element.removeEventListener('focusout', focusOut);
+    };
+  }, [ref, cancel]);
+
+  // ED-17443 When you press escape on typeahead panel, it should remove focus and close the panel
+  // This is the expected keyboard behaviour advised by the Accessibility team
+  (0, _react.useLayoutEffect)(function () {
+    var escape = function escape(event) {
+      if (event.key === 'Escape') {
+        cancel({
+          addPrefixTrigger: true,
+          setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
+          forceFocusOnEditor: true
+        });
+      }
+    };
+    var element = ref.current;
+    // Ignored via go/ees005
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    element === null || element === void 0 || element.addEventListener('keydown', escape);
+    return function () {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      element === null || element === void 0 || element.removeEventListener('keydown', escape);
+    };
+  }, [ref, cancel]);
+  return (0, _react2.jsx)(_ui.Popup, {
+    zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
+    target: anchorElement,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    fitHeight: fitHeight,
+    fitWidth: 280,
+    offset: OFFSET,
+    ariaLabel: null,
+    preventOverflow: true
+  }, (0, _react2.jsx)("div", {
+    css: [typeAheadContent]
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: _constants.TYPE_AHEAD_POPUP_CONTENT_CLASS,
+    ref: ref
+  }, errorInfo ? (0, _react2.jsx)(_TypeAheadErrorFallback.TypeAheadErrorFallback, null) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_editorElementBrowser.QuickInsertPanel, {
+    items: items,
+    onItemInsert: onItemInsert,
+    query: query
+  }), (0, _react2.jsx)(_primitives.Pressable, {
+    xcss: viewAllButtonStyles
+    // onClick={() => api?.contextPanel?.actions.showPanel()}
+  }, "View all inserts"))));
+});
+TypeAheadPopup.displayName = 'TypeAheadPopup';

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

@@ -1,12 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { IntlProvider } from 'react-intl-next';
 import uuid from 'uuid';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { redo, undo } from '@atlaskit/editor-prosemirror/history';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { B400 } from '@atlaskit/theme/colors';
 import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
 import { closeTypeAhead } from './commands/close-type-ahead';
@@ -85,31 +83,9 @@ export const factoryDecorations = ({
         }
         return false;
       };
-      if (fg('platform_editor_react18_plugin_portalprovider')) {
-        nodeViewPortalProviderAPI.render(() => {
-          var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
-          return /*#__PURE__*/React.createElement(IntlProvider, {
-            locale: intl.locale || 'en',
-            messages: intl.messages,
-            formats: intl.formats
-          }, /*#__PURE__*/React.createElement(WrapperTypeAhead, {
-            triggerHandler: triggerHandler,
-            editorView: editorView,
-            anchorElement: typeaheadComponent,
-            inputMethod: inputMethod,
-            getDecorationPosition: getDecorationPosition,
-            shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
-            popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
-            popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
-            popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
-            onUndoRedo: onUndoRedo,
-            reopenQuery: reopenQuery,
-            api: api
-          }));
-        }, typeaheadComponent, decorationId);
-      } else {
-        var _popupMountRef$curren4, _popupMountRef$curren5, _popupMountRef$curren6;
-        ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
+      nodeViewPortalProviderAPI.render(() => {
+        var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
+        return /*#__PURE__*/React.createElement(IntlProvider, {
           locale: intl.locale || 'en',
           messages: intl.messages,
           formats: intl.formats
@@ -120,14 +96,14 @@ export const factoryDecorations = ({
           inputMethod: inputMethod,
           getDecorationPosition: getDecorationPosition,
           shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
-          popupsMountPoint: (_popupMountRef$curren4 = popupMountRef.current) === null || _popupMountRef$curren4 === void 0 ? void 0 : _popupMountRef$curren4.popupsMountPoint,
-          popupsBoundariesElement: (_popupMountRef$curren5 = popupMountRef.current) === null || _popupMountRef$curren5 === void 0 ? void 0 : _popupMountRef$curren5.popupsBoundariesElement,
-          popupsScrollableElement: (_popupMountRef$curren6 = popupMountRef.current) === null || _popupMountRef$curren6 === void 0 ? void 0 : _popupMountRef$curren6.popupsScrollableElement,
+          popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
+          popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
+          popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
           onUndoRedo: onUndoRedo,
           reopenQuery: reopenQuery,
           api: api
-        })), typeaheadComponent);
-      }
+        }));
+      }, typeaheadComponent, decorationId);
       shouldFocusCursorInsideQuery = false;
       return typeaheadComponent;
     }, {
@@ -170,11 +146,7 @@ export const factoryDecorations = ({
       if (!decoElement) {
         return;
       }
-      if (fg('platform_editor_react18_plugin_portalprovider')) {
-        nodeViewPortalProviderAPI.remove(spec.key);
-      } else {
-        ReactDOM.unmountComponentAtNode(decoElement);
-      }
+      nodeViewPortalProviderAPI.remove(spec.key);
     });
     return true;
   };

package/dist/es2019/ui/ContentComponent.js

@@ -1,21 +1,36 @@
 import React from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { TypeAheadMenu as TypeAheadMenuModern } from './modern/TypeAheadMenu';
 import { TypeAheadMenu } from './TypeAheadMenu';
 export function ContentComponent({
   api,
   editorView,
   popupMountRef
 }) {
+  var _typeAheadState$trigg;
   const {
     typeAheadState
   } = useSharedPluginState(api, ['typeAhead']);
   if (!typeAheadState) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(TypeAheadMenu, {
-    editorView: editorView,
-    popupMountRef: popupMountRef,
-    typeAheadState: typeAheadState,
-    api: api
-  });
+  if (
+  // TODO: Also requires a check for editor appearance (needs to be enabled for full-page/full-width editor only ?)
+  !editorExperiment('platform_editor_controls', 'control') && ((_typeAheadState$trigg = typeAheadState.triggerHandler) === null || _typeAheadState$trigg === void 0 ? void 0 : _typeAheadState$trigg.id) === TypeAheadAvailableNodes.QUICK_INSERT) {
+    return /*#__PURE__*/React.createElement(TypeAheadMenuModern, {
+      editorView: editorView,
+      popupMountRef: popupMountRef,
+      typeAheadState: typeAheadState,
+      api: api
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(TypeAheadMenu, {
+      editorView: editorView,
+      popupMountRef: popupMountRef,
+      typeAheadState: typeAheadState,
+      api: api
+    });
+  }
 }