@atlaskit/editor-plugin-insert-block 4.3.3 → 4.3.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 4.3.4
+
+### Patch Changes
+
+- [`bcc3b620154b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bcc3b620154b0) -
+  [ux] ED-28739 [Register] [Primary toolbar] Insert button
+- Updated dependencies
+
 ## 4.3.3
 
 ### Patch Changes

package/dist/cjs/insertBlockPlugin.js

@@ -163,11 +163,17 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
     });
   };
   if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true)) {
-    var _api$toolbar;
+    var _api$toolbar, _api$codeBlock, _api$panel, _api$blockType;
     api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)({
       api: api,
       tableSelectorSupported: options.tableSelectorSupported,
-      toolbarShowPlusInsertOnly: options.toolbarShowPlusInsertOnly
+      toolbarShowPlusInsertOnly: options.toolbarShowPlusInsertOnly,
+      showElementBrowserLink: options.showElementBrowserLink,
+      onInsertBlockType: handleInsertBlockType(api === null || api === void 0 || (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 ? void 0 : _api$codeBlock.actions.insertCodeBlock, api === null || api === void 0 || (_api$panel = api.panel) === null || _api$panel === void 0 ? void 0 : _api$panel.actions.insertPanel, api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : _api$blockType.actions.insertBlockQuote),
+      nativeStatusSupported: options.nativeStatusSupported,
+      horizontalRuleEnabled: options.horizontalRuleEnabled,
+      expandEnabled: options.allowExpand,
+      insertMenuItems: options.insertMenuItems
     }));
   } else {
     var _api$primaryToolbar;

package/dist/cjs/ui/toolbar-components/EmojiButton.js

@@ -1,42 +1,26 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmojiButton = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
-var _ui = require("@atlaskit/editor-common/ui");
-var _uiReact = require("@atlaskit/editor-common/ui-react");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _picker = require("@atlaskit/emoji/picker");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _utils = require("./utils/utils");
+var _useEmojiPickerPopup = require("./hooks/useEmojiPickerPopup");
+var _EmojiPickerPopup = require("./popups/EmojiPickerPopup");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var EmojiPicker = function EmojiPicker(props) {
-  var setOutsideClickTargetRef = _react.default.useContext(_uiReact.OutsideClickTargetRefContext);
-  return /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
-    onPickerRef: setOutsideClickTargetRef,
-    emojiProvider: props.emojiProvider,
-    onSelection: props.onSelection
-  });
-};
-var EmojiPickerWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(EmojiPicker);
 var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    emojiPickerOpen = _useState2[0],
-    setEmojiPickerOpen = _useState2[1];
   var emojiButtonRef = (0, _react.useRef)(null);
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['emoji', 'typeAhead'], function (states) {
       var _states$emojiState, _states$emojiState2, _states$typeAheadStat;
@@ -49,75 +33,31 @@ var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
     emojiProviderSelector = _useSharedPluginState.emojiProviderSelector,
     emojiProviderPromise = _useSharedPluginState.emojiProviderPromise,
     isTypeAheadAllowed = _useSharedPluginState.isTypeAheadAllowed;
+  var emojiPickerPopup = (0, _useEmojiPickerPopup.useEmojiPickerPopup)({
+    api: api,
+    buttonRef: emojiButtonRef
+  });
   if (!(api !== null && api !== void 0 && api.emoji)) {
     return null;
   }
-  var toggleEmojiPickerOpen = function toggleEmojiPickerOpen(newState) {
-    var oldState = emojiPickerOpen;
-    if (newState === true && oldState === false) {
-      var _api$analytics;
-      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
-        action: _analytics.ACTION.OPENED,
-        actionSubject: _analytics.ACTION_SUBJECT.PICKER,
-        actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_EMOJI,
-        attributes: {
-          inputMethod: _analytics.INPUT_METHOD.TOOLBAR
-        },
-        eventType: _analytics.EVENT_TYPE.UI
-      });
-    }
-    setEmojiPickerOpen(newState);
-  };
   var getEmojiProvider = function getEmojiProvider() {
     if (emojiProviderSelector) {
       return Promise.resolve(emojiProviderSelector);
     }
   };
   var emojiProvider = (0, _expValEquals.expValEquals)('platform_editor_prevent_toolbar_layout_shifts', 'isEnabled', true) ? emojiProviderPromise : getEmojiProvider();
-  var onPopupUnmount = function onPopupUnmount() {
-    requestAnimationFrame(function () {
-      return api === null || api === void 0 ? void 0 : api.core.actions.focus();
-    });
-  };
-  var handleSelectedEmoji = function handleSelectedEmoji(emojiId) {
-    var _api$emoji;
-    api === null || api === void 0 || api.core.actions.focus();
-    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.commands.insertEmoji(emojiId, _analytics.INPUT_METHOD.PICKER));
-    toggleEmojiPickerOpen(false);
-    return true;
-  };
-  var handleEmojiClickOutside = function handleEmojiClickOutside(e) {
-    // Ignore click events for detached elements.
-    // Workaround for FS-1322 - where two onClicks fire - one when the upload button is
-    // still in the document, and one once it's detached. Does not always occur, and
-    // may be a side effect of a react render optimisation
-    if (e.target instanceof HTMLElement && !(0, _utils.isDetachedElement)(e.target)) {
-      toggleEmojiPickerOpen(false);
-    }
-  };
-  var handleEmojiPressEscape = function handleEmojiPressEscape() {
-    var _emojiButtonRef$curre;
-    toggleEmojiPickerOpen(false);
-    emojiButtonRef === null || emojiButtonRef === void 0 || (_emojiButtonRef$curre = emojiButtonRef.current) === null || _emojiButtonRef$curre === void 0 || _emojiButtonRef$curre.focus();
-  };
-  var onClick = function onClick() {
-    toggleEmojiPickerOpen(!emojiPickerOpen);
-  };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, emojiPickerOpen && emojiButtonRef.current && emojiProvider && /*#__PURE__*/_react.default.createElement(_ui.Popup, {
-    target: emojiButtonRef.current,
-    fitHeight: 350,
-    fitWidth: 350,
-    offset: [0, 3],
-    mountTo: emojiButtonRef.current,
-    onUnmount: onPopupUnmount,
-    focusTrap: true,
-    zIndex: _editorSharedStyles.akEditorMenuZIndex
-  }, /*#__PURE__*/_react.default.createElement(EmojiPickerWithListeners, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.EmojiPickerPopup, {
+    isOpen: emojiPickerPopup.isOpen,
+    targetRef: emojiButtonRef,
     emojiProvider: emojiProvider,
-    onSelection: handleSelectedEmoji,
-    handleClickOutside: handleEmojiClickOutside,
-    handleEscapeKeydown: handleEmojiPressEscape
-  })), /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    onSelection: emojiPickerPopup.handleSelectedEmoji,
+    onClickOutside: emojiPickerPopup.handleClickOutside,
+    onEscapeKeydown: emojiPickerPopup.handleEscapeKeydown,
+    onUnmount: emojiPickerPopup.onPopupUnmount,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement
+  }), /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
     content: formatMessage(_messages.toolbarInsertBlockMessages.emoji)
   }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
     iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.EmojiIcon, {
@@ -126,8 +66,10 @@ var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
     }),
     ariaKeyshortcuts: "Shift+;",
     ref: emojiButtonRef,
-    onClick: onClick,
-    isSelected: emojiPickerOpen,
+    onClick: function onClick() {
+      return emojiPickerPopup.toggle();
+    },
+    isSelected: emojiPickerPopup.isOpen,
     isDisabled: !isTypeAheadAllowed || !emojiProvider
   })));
 };

package/dist/cjs/ui/toolbar-components/InsertButton.js

@@ -0,0 +1,250 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InsertButton = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _ui = require("@atlaskit/editor-common/ui");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _InsertMenu = _interopRequireWildcard(require("../ElementBrowser/InsertMenu"));
+var _useEmojiPickerPopup = require("./hooks/useEmojiPickerPopup");
+var _useInsertButtonState2 = require("./hooks/useInsertButtonState");
+var _useTableSelectorPopup = require("./hooks/useTableSelectorPopup");
+var _EmojiPickerPopup = require("./popups/EmojiPickerPopup");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// This determines how the popup should fit. We prefer the insert menu
+// opening on the bottom as we have a search bar and should only open on
+// top if there is more than sufficient room.
+var FIT_HEIGHT_BUFFER = 100;
+var InsertButton = exports.InsertButton = function InsertButton(_ref) {
+  var api = _ref.api,
+    _ref$showElementBrows = _ref.showElementBrowserLink,
+    showElementBrowserLink = _ref$showElementBrows === void 0 ? false : _ref$showElementBrows,
+    _ref$isFullPageAppear = _ref.isFullPageAppearance,
+    isFullPageAppearance = _ref$isFullPageAppear === void 0 ? false : _ref$isFullPageAppear,
+    tableSelectorSupported = _ref.tableSelectorSupported,
+    nativeStatusSupported = _ref.nativeStatusSupported,
+    horizontalRuleEnabled = _ref.horizontalRuleEnabled,
+    expandEnabled = _ref.expandEnabled,
+    insertMenuItems = _ref.insertMenuItems,
+    numberOfButtons = _ref.numberOfButtons,
+    onInsertBlockType = _ref.onInsertBlockType;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var _useToolbarUI = (0, _editorToolbar.useToolbarUI)(),
+    isDisabled = _useToolbarUI.isDisabled,
+    popupsMountPoint = _useToolbarUI.popupsMountPoint,
+    popupsBoundariesElement = _useToolbarUI.popupsBoundariesElement,
+    popupsScrollableElement = _useToolbarUI.popupsScrollableElement;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    insertMenuOpen = _useState2[0],
+    setInsertMenuOpen = _useState2[1];
+  var insertButtonRef = (0, _react.useRef)(null);
+  var emojiPickerPopup = (0, _useEmojiPickerPopup.useEmojiPickerPopup)({
+    api: api,
+    buttonRef: insertButtonRef
+  });
+  var tableSelectorPopup = (0, _useTableSelectorPopup.useTableSelectorPopup)({
+    api: api,
+    buttonRef: insertButtonRef
+  });
+  var showMediaPicker = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.showMediaPicker');
+  var _useInsertButtonState = (0, _useInsertButtonState2.useInsertButtonState)({
+      api: api,
+      editorView: editorView || undefined,
+      horizontalRuleEnabled: horizontalRuleEnabled,
+      insertMenuItems: insertMenuItems,
+      nativeStatusSupported: nativeStatusSupported,
+      numberOfButtons: numberOfButtons,
+      tableSelectorSupported: tableSelectorSupported,
+      expandEnabled: expandEnabled,
+      showElementBrowserLink: showElementBrowserLink
+    }),
+    dropdownItems = _useInsertButtonState.dropdownItems,
+    emojiProvider = _useInsertButtonState.emojiProvider,
+    isTypeAheadAllowed = _useInsertButtonState.isTypeAheadAllowed;
+  if (!(api !== null && api !== void 0 && api.insertBlock)) {
+    return null;
+  }
+  var toggleInsertMenuOpen = function toggleInsertMenuOpen(newState) {
+    setInsertMenuOpen(newState);
+  };
+  var onPopupUnmount = function onPopupUnmount() {
+    requestAnimationFrame(function () {
+      return api === null || api === void 0 ? void 0 : api.core.actions.focus();
+    });
+  };
+  var onClick = function onClick() {
+    toggleInsertMenuOpen(!insertMenuOpen);
+  };
+  var onItemActivated = function onItemActivated(_ref2) {
+    var _api$core, _api$hyperlink, _api$imageUpload, _api$mention, _api$taskDecision, _api$rule, _api$core4, _api$date, _api$placeholderText, _api$layout, _api$core5, _api$status, _api$expand;
+    var item = _ref2.item,
+      inputMethod = _ref2.inputMethod;
+    if (!editorView) {
+      return;
+    }
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+
+    // need to do this before inserting nodes so scrollIntoView works properly
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+    switch (item.value.name) {
+      case 'link':
+        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$hyperlink = api.hyperlink) === null || _api$hyperlink === void 0 ? void 0 : _api$hyperlink.commands.showLinkToolbar(inputMethod));
+        break;
+      case 'table':
+        // workaround to solve race condition where cursor is not placed correctly inside table
+        queueMicrotask(function () {
+          var _api$table, _api$table$actions$in, _api$table$actions;
+          api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 || (_api$table$actions$in = (_api$table$actions = _api$table.actions).insertTable) === null || _api$table$actions$in === void 0 || _api$table$actions$in.call(_api$table$actions, {
+            action: _analytics.ACTION.INSERTED,
+            actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+            actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
+            attributes: {
+              inputMethod: inputMethod
+            },
+            eventType: _analytics.EVENT_TYPE.TRACK
+          })(state, dispatch);
+        });
+        break;
+      case 'table selector':
+        tableSelectorPopup.toggle(inputMethod);
+        break;
+      case 'image upload':
+        if (api !== null && api !== void 0 && (_api$imageUpload = api.imageUpload) !== null && _api$imageUpload !== void 0 && _api$imageUpload.actions.startUpload) {
+          api.imageUpload.actions.startUpload()(state, dispatch);
+        }
+        break;
+      case 'media':
+        if (showMediaPicker) {
+          if ((0, _platformFeatureFlags.fg)('platform_editor_add_media_from_url_rollout')) {
+            var _api$core2, _api$mediaInsert;
+            api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(api === null || api === void 0 || (_api$mediaInsert = api.mediaInsert) === null || _api$mediaInsert === void 0 ? void 0 : _api$mediaInsert.commands.showMediaInsertPopup());
+          } else {
+            showMediaPicker();
+          }
+        }
+        break;
+      case 'mention':
+        api === null || api === void 0 || (_api$mention = api.mention) === null || _api$mention === void 0 || (_api$mention = _api$mention.actions) === null || _api$mention === void 0 || _api$mention.openTypeAhead(inputMethod);
+        break;
+      case 'emoji':
+        emojiPickerPopup.toggle(inputMethod);
+        break;
+      case 'codeblock':
+      case 'blockquote':
+      case 'panel':
+        onInsertBlockType === null || onInsertBlockType === void 0 || onInsertBlockType(item.value.name)(state, dispatch);
+        break;
+      case 'action':
+      case 'decision':
+        var listType = item.value.name === 'action' ? 'taskList' : 'decisionList';
+        api === null || api === void 0 || (_api$taskDecision = api.taskDecision) === null || _api$taskDecision === void 0 || _api$taskDecision.actions.insertTaskDecision(listType, inputMethod)(state, dispatch);
+        break;
+      case 'horizontalrule':
+        api === null || api === void 0 || (_api$rule = api.rule) === null || _api$rule === void 0 || _api$rule.actions.insertHorizontalRule(inputMethod)(state, dispatch);
+        break;
+      case 'macro':
+        if (!(0, _platformFeatureFlags.fg)('platform_editor_refactor_view_more')) {
+          var _api$core3, _api$quickInsert;
+          api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.commands.openElementBrowserModal);
+        }
+        break;
+      case 'date':
+        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(api === null || api === void 0 || (_api$date = api.date) === null || _api$date === void 0 || (_api$date = _api$date.commands) === null || _api$date === void 0 ? void 0 : _api$date.insertDate({
+          inputMethod: inputMethod
+        }));
+        break;
+      case 'placeholder text':
+        api === null || api === void 0 || (_api$placeholderText = api.placeholderText) === null || _api$placeholderText === void 0 || _api$placeholderText.actions.showPlaceholderFloatingToolbar(state, dispatch);
+        break;
+      case 'layout':
+        api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 || _api$layout.actions.insertLayoutColumns(inputMethod)(state, dispatch);
+        break;
+      case 'status':
+        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(api === null || api === void 0 || (_api$status = api.status) === null || _api$status === void 0 || (_api$status = _api$status.commands) === null || _api$status === void 0 ? void 0 : _api$status.insertStatus(inputMethod));
+        break;
+      case 'expand':
+        api === null || api === void 0 || (_api$expand = api.expand) === null || _api$expand === void 0 || _api$expand.actions.insertExpand(state, dispatch);
+        break;
+      default:
+        if (item && item.onClick) {
+          item.onClick();
+        }
+        break;
+    }
+    toggleInsertMenuOpen(false);
+  };
+  var onInsert = function onInsert(_ref3) {
+    var item = _ref3.item;
+    onItemActivated({
+      item: item,
+      inputMethod: _analytics.INPUT_METHOD.INSERT_MENU
+    });
+  };
+  var toggleVisibility = function toggleVisibility() {
+    toggleInsertMenuOpen(!insertMenuOpen);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, insertMenuOpen && insertButtonRef.current && editorView && /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    target: insertButtonRef.current,
+    fitHeight: _InsertMenu.DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
+    fitWidth: 350,
+    offset: [0, 3],
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    onUnmount: onPopupUnmount,
+    focusTrap: true,
+    zIndex: _editorSharedStyles.akEditorMenuZIndex,
+    preventOverflow: true,
+    alignX: "right"
+  }, /*#__PURE__*/_react.default.createElement(_InsertMenu.default, {
+    editorView: editorView,
+    dropdownItems: dropdownItems,
+    onInsert: onInsert,
+    toggleVisiblity: toggleVisibility,
+    showElementBrowserLink: showElementBrowserLink,
+    pluginInjectionApi: api,
+    isFullPageAppearance: isFullPageAppearance
+  })), emojiProvider && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.EmojiPickerPopup, {
+    isOpen: emojiPickerPopup.isOpen,
+    targetRef: insertButtonRef,
+    emojiProvider: Promise.resolve(emojiProvider),
+    onSelection: emojiPickerPopup.handleSelectedEmoji,
+    onClickOutside: emojiPickerPopup.handleClickOutside,
+    onEscapeKeydown: emojiPickerPopup.handleEscapeKeydown,
+    onUnmount: emojiPickerPopup.onPopupUnmount,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement
+  }), /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: formatMessage(_messages.toolbarInsertBlockMessages.insertMenu)
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.AddIcon, {
+      size: "small",
+      label: formatMessage(_messages.toolbarInsertBlockMessages.insertMenu)
+    }),
+    ariaKeyshortcuts: "/",
+    ref: insertButtonRef,
+    onClick: onClick,
+    isSelected: insertMenuOpen,
+    isDisabled: !isTypeAheadAllowed || isDisabled
+  })));
+};

package/dist/cjs/ui/toolbar-components/TableSizePicker.js

@@ -1,20 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableSizePicker = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _toolbar = require("@atlaskit/editor-common/toolbar");
-var _ui = require("@atlaskit/editor-common/ui");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _utils = require("./utils/utils");
+var _useTableSelectorPopup = require("./hooks/useTableSelectorPopup");
+var _TableSelectorPopupWrapper = require("./popups/TableSelectorPopupWrapper");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var TableSizePicker = exports.TableSizePicker = function TableSizePicker(_ref) {
   var api = _ref.api,
@@ -23,55 +20,35 @@ var TableSizePicker = exports.TableSizePicker = function TableSizePicker(_ref) {
     formatMessage = _useIntl.formatMessage;
   var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
     editorView = _useEditorToolbar.editorView;
-  var _useToolbarUI = (0, _editorToolbar.useToolbarUI)(),
-    popupsMountPoint = _useToolbarUI.popupsMountPoint;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    tableSizePickerOpen = _useState2[0],
-    setTableSizePickerOpen = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isOpenedByKeyboard = _useState4[0],
-    setIsOpenedByKeyboard = _useState4[1];
   var tableSizePickerRef = (0, _react.useRef)(null);
+  var _useToolbarUI = (0, _editorToolbar.useToolbarUI)(),
+    popupsMountPoint = _useToolbarUI.popupsMountPoint,
+    popupsBoundariesElement = _useToolbarUI.popupsBoundariesElement,
+    popupsScrollableElement = _useToolbarUI.popupsScrollableElement;
+  var tableSelectorPopup = (0, _useTableSelectorPopup.useTableSelectorPopup)({
+    api: api,
+    buttonRef: tableSizePickerRef
+  });
   if (!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.table) || !tableSelectorSupported) {
     return null;
   }
-  var handleSelectedTableSize = function handleSelectedTableSize(rowsCount, colsCount) {
-    // workaround to solve race condition where cursor is not placed correctly inside table
-    queueMicrotask(function () {
-      var _api$core, _api$table;
-      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.commands.insertTableWithSize(rowsCount, colsCount, _analytics.INPUT_METHOD.PICKER));
-    });
-    setTableSizePickerOpen(false);
-  };
-  var handleTableSelectorClickOutside = function handleTableSelectorClickOutside(e) {
-    // Ignore click events for detached elements.
-    if (e.target instanceof HTMLElement && !(0, _utils.isDetachedElement)(e.target)) {
-      setTableSizePickerOpen(false);
-    }
-  };
-  var handleTableSelectorPressEscape = function handleTableSelectorPressEscape() {
-    var _tableSizePickerRef$c;
-    setTableSizePickerOpen(false);
-    (_tableSizePickerRef$c = tableSizePickerRef.current) === null || _tableSizePickerRef$c === void 0 || _tableSizePickerRef$c.focus();
-  };
-  var onUnmount = function onUnmount() {
-    api === null || api === void 0 || api.core.actions.focus();
-  };
   var onClick = function onClick(event) {
-    setIsOpenedByKeyboard(event.detail === 0 ? true : false);
-    setTableSizePickerOpen(!tableSizePickerOpen);
+    if (event.detail === 0) {
+      tableSelectorPopup.handleKeyboardOpen(event);
+    }
+    tableSelectorPopup.toggle();
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tableSizePickerRef.current && tableSizePickerOpen && /*#__PURE__*/_react.default.createElement(_ui.TableSelectorPopup, {
-    allowOutsideSelection: true,
-    target: tableSizePickerRef.current,
-    onUnmount: onUnmount,
-    onSelection: handleSelectedTableSize,
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TableSelectorPopupWrapper.TableSelectorPopupWrapper, {
+    isOpen: tableSelectorPopup.isOpen,
+    targetRef: tableSizePickerRef,
+    isOpenedByKeyboard: tableSelectorPopup.isOpenedByKeyboard,
+    onSelection: tableSelectorPopup.handleSelectedTableSize,
+    onClickOutside: tableSelectorPopup.handleClickOutside,
+    onEscapeKeydown: tableSelectorPopup.handleEscapeKeydown,
+    onUnmount: tableSelectorPopup.onPopupUnmount,
     popupsMountPoint: popupsMountPoint,
-    handleClickOutside: handleTableSelectorClickOutside,
-    handleEscapeKeydown: handleTableSelectorPressEscape,
-    isOpenedByKeyboard: isOpenedByKeyboard
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement
   }), /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
     content: formatMessage(_messages.toolbarInsertBlockMessages.tableSelector)
   }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
@@ -79,7 +56,7 @@ var TableSizePicker = exports.TableSizePicker = function TableSizePicker(_ref) {
       label: formatMessage(_messages.toolbarInsertBlockMessages.tableSelector)
     }),
     onClick: onClick,
-    isSelected: tableSizePickerOpen,
+    isSelected: tableSelectorPopup.isOpen,
     ref: tableSizePickerRef
   })));
 };

package/dist/cjs/ui/toolbar-components/hooks/useEmojiPickerPopup.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEmojiPickerPopup = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _usePopupManager = require("./usePopupManager");
+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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useEmojiPickerPopup = exports.useEmojiPickerPopup = function useEmojiPickerPopup(_ref) {
+  var api = _ref.api,
+    buttonRef = _ref.buttonRef;
+  var popupManager = (0, _usePopupManager.usePopupManager)({
+    focusTarget: buttonRef,
+    analytics: {
+      onToggle: function onToggle(isOpen) {
+        if (isOpen) {
+          var _api$analytics;
+          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+            action: _analytics.ACTION.OPENED,
+            actionSubject: _analytics.ACTION_SUBJECT.PICKER,
+            actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_EMOJI,
+            attributes: {
+              inputMethod: _analytics.INPUT_METHOD.TOOLBAR
+            },
+            eventType: _analytics.EVENT_TYPE.UI
+          });
+        }
+      }
+    }
+  });
+  var handleSelectedEmoji = (0, _react.useCallback)(function (emojiId) {
+    var _api$emoji;
+    api === null || api === void 0 || api.core.actions.focus();
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.commands.insertEmoji(emojiId, _analytics.INPUT_METHOD.PICKER));
+    popupManager.close();
+    return true;
+  }, [api, popupManager]);
+  var onPopupUnmount = (0, _react.useCallback)(function () {
+    requestAnimationFrame(function () {
+      return api === null || api === void 0 ? void 0 : api.core.actions.focus();
+    });
+  }, [api]);
+  return _objectSpread(_objectSpread({}, popupManager), {}, {
+    handleSelectedEmoji: handleSelectedEmoji,
+    onPopupUnmount: onPopupUnmount
+  });
+};