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

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

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInsertButtonState = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactIntlNext = require("react-intl-next");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _createItems = require("../../ToolbarInsertBlock/create-items");
+var useInsertButtonState = exports.useInsertButtonState = function useInsertButtonState(_ref) {
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    horizontalRuleEnabled = _ref.horizontalRuleEnabled,
+    insertMenuItems = _ref.insertMenuItems,
+    nativeStatusSupported = _ref.nativeStatusSupported,
+    numberOfButtons = _ref.numberOfButtons,
+    tableSelectorSupported = _ref.tableSelectorSupported,
+    expandEnabled = _ref.expandEnabled,
+    showElementBrowserLink = _ref.showElementBrowserLink;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var isTypeAheadAllowed = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isAllowed');
+  var imageUploadEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'imageUpload.enabled');
+  var mentionsSupported = !!(0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'mention.mentionProvider');
+  var canInsertMention = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'mention.canInsertMention');
+  var dateEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'date.isInitialised');
+  var placeholderTextEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'placeholderText.allowInserting');
+  var mediaAllowsUploads = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.allowsUploads');
+  var canInsertLink = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'hyperlink.canInsertLink');
+  var activeLinkMark = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'hyperlink.activeLinkMark');
+  var connectivityMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode');
+  var emojiProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.emojiProvider');
+  var availableWrapperBlockTypes = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.availableWrapperBlockTypes');
+
+  // Computed values
+  var mediaUploadsEnabled = mediaAllowsUploads;
+  var mediaSupported = mediaAllowsUploads !== undefined;
+  var isEditorOffline = connectivityMode === 'offline';
+  var imageUploadSupported = !!(api !== null && api !== void 0 && api.imageUpload);
+  var mentionsDisabled = !canInsertMention;
+  var linkSupported = canInsertLink !== undefined;
+  var linkDisabled = !canInsertLink || !!activeLinkMark;
+  var emojiDisabled = !emojiProvider;
+  var actionSupported = !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.taskItem);
+  var decisionSupported = !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.decisionItem);
+  var layoutSectionEnabled = !!(api !== null && api !== void 0 && api.layout);
+  var _ref2 = editorView !== null && editorView !== void 0 && editorView.state.schema ? (0, _createItems.createItems)({
+      isTypeAheadAllowed: isTypeAheadAllowed,
+      tableSupported: !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.table),
+      tableSelectorSupported: tableSelectorSupported,
+      mediaUploadsEnabled: mediaUploadsEnabled,
+      mediaSupported: mediaSupported,
+      isEditorOffline: isEditorOffline,
+      imageUploadSupported: imageUploadSupported,
+      imageUploadEnabled: imageUploadEnabled,
+      mentionsSupported: mentionsSupported,
+      mentionsDisabled: mentionsDisabled,
+      actionSupported: actionSupported,
+      decisionSupported: decisionSupported,
+      linkSupported: linkSupported,
+      linkDisabled: linkDisabled,
+      emojiDisabled: emojiDisabled,
+      hasEmojiPlugin: !!(api !== null && api !== void 0 && api.emoji),
+      hasMentionsPlugin: !!(api !== null && api !== void 0 && api.mention),
+      hasMediaPlugin: !!(api !== null && api !== void 0 && api.media),
+      nativeStatusSupported: nativeStatusSupported,
+      dateEnabled: dateEnabled,
+      placeholderTextEnabled: placeholderTextEnabled,
+      horizontalRuleEnabled: horizontalRuleEnabled,
+      layoutSectionEnabled: layoutSectionEnabled,
+      expandEnabled: expandEnabled,
+      showElementBrowserLink: showElementBrowserLink,
+      emojiProvider: emojiProvider,
+      availableWrapperBlockTypes: availableWrapperBlockTypes,
+      insertMenuItems: insertMenuItems,
+      schema: editorView === null || editorView === void 0 ? void 0 : editorView.state.schema,
+      numberOfButtons: numberOfButtons || 0,
+      formatMessage: formatMessage
+    }) : [, []],
+    _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+    dropdownItems = _ref3[1];
+  return {
+    dropdownItems: dropdownItems,
+    emojiProvider: emojiProvider,
+    isTypeAheadAllowed: isTypeAheadAllowed
+  };
+};

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

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePopupManager = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _utils = require("../utils/utils");
+var usePopupManager = exports.usePopupManager = function usePopupManager() {
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isOpenedByKeyboard = _useState4[0],
+    setIsOpenedByKeyboard = _useState4[1];
+  var toggle = (0, _react.useCallback)(function (inputMethod) {
+    var _config$analytics, _config$analytics$onT;
+    var newState = !isOpen;
+    setIsOpen(newState);
+    if (newState) {
+      var _config$onOpen;
+      (_config$onOpen = config.onOpen) === null || _config$onOpen === void 0 || _config$onOpen.call(config, inputMethod);
+    } else {
+      var _config$onClose;
+      (_config$onClose = config.onClose) === null || _config$onClose === void 0 || _config$onClose.call(config);
+    }
+    (_config$analytics = config.analytics) === null || _config$analytics === void 0 || (_config$analytics$onT = _config$analytics.onToggle) === null || _config$analytics$onT === void 0 || _config$analytics$onT.call(_config$analytics, newState, inputMethod);
+  }, [isOpen, config]);
+  var close = (0, _react.useCallback)(function () {
+    var _config$onClose2, _config$analytics2, _config$analytics2$on;
+    setIsOpen(false);
+    (_config$onClose2 = config.onClose) === null || _config$onClose2 === void 0 || _config$onClose2.call(config);
+    (_config$analytics2 = config.analytics) === null || _config$analytics2 === void 0 || (_config$analytics2$on = _config$analytics2.onToggle) === null || _config$analytics2$on === void 0 || _config$analytics2$on.call(_config$analytics2, false);
+  }, [config]);
+  var handleEscapeKeydown = (0, _react.useCallback)(function () {
+    var _config$focusTarget;
+    close();
+    (_config$focusTarget = config.focusTarget) === null || _config$focusTarget === void 0 || (_config$focusTarget = _config$focusTarget.current) === null || _config$focusTarget === void 0 || _config$focusTarget.focus();
+  }, [close, config.focusTarget]);
+  var handleClickOutside = (0, _react.useCallback)(function (e) {
+    if (e.target instanceof HTMLElement && !(0, _utils.isDetachedElement)(e.target)) {
+      close();
+    }
+  }, [close]);
+  var handleKeyboardOpen = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      setIsOpenedByKeyboard(true);
+      event.preventDefault();
+    }
+  }, []);
+  return {
+    isOpen: isOpen,
+    isOpenedByKeyboard: isOpenedByKeyboard,
+    toggle: toggle,
+    close: close,
+    handleEscapeKeydown: handleEscapeKeydown,
+    handleClickOutside: handleClickOutside,
+    handleKeyboardOpen: handleKeyboardOpen
+  };
+};

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableSelectorPopup = 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 useTableSelectorPopup = exports.useTableSelectorPopup = function useTableSelectorPopup(_ref) {
+  var api = _ref.api,
+    buttonRef = _ref.buttonRef;
+  var popupManager = (0, _usePopupManager.usePopupManager)({
+    focusTarget: buttonRef
+  });
+  var handleSelectedTableSize = (0, _react.useCallback)(function (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));
+    });
+    popupManager.close();
+  }, [api, popupManager]);
+  var onPopupUnmount = (0, _react.useCallback)(function () {
+    api === null || api === void 0 || api.core.actions.focus();
+  }, [api]);
+  return _objectSpread(_objectSpread({}, popupManager), {}, {
+    handleSelectedTableSize: handleSelectedTableSize,
+    onPopupUnmount: onPopupUnmount
+  });
+};

package/dist/cjs/ui/toolbar-components/popups/EmojiPickerPopup.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmojiPickerPopup = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _picker = require("@atlaskit/emoji/picker");
+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 EmojiPickerPopup = exports.EmojiPickerPopup = function EmojiPickerPopup(_ref) {
+  var isOpen = _ref.isOpen,
+    targetRef = _ref.targetRef,
+    emojiProvider = _ref.emojiProvider,
+    onSelection = _ref.onSelection,
+    onClickOutside = _ref.onClickOutside,
+    onEscapeKeydown = _ref.onEscapeKeydown,
+    onUnmount = _ref.onUnmount,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement;
+  if (!isOpen || !targetRef.current || !emojiProvider) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    target: targetRef.current,
+    fitHeight: 350,
+    fitWidth: 350,
+    offset: [0, 3],
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    onUnmount: onUnmount,
+    focusTrap: true,
+    zIndex: _editorSharedStyles.akEditorMenuZIndex
+  }, /*#__PURE__*/_react.default.createElement(EmojiPickerWithListeners, {
+    emojiProvider: emojiProvider,
+    onSelection: onSelection,
+    handleClickOutside: onClickOutside,
+    handleEscapeKeydown: onEscapeKeydown
+  }));
+};

package/dist/cjs/ui/toolbar-components/popups/TableSelectorPopupWrapper.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableSelectorPopupWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ui = require("@atlaskit/editor-common/ui");
+var TableSelectorPopupWrapper = exports.TableSelectorPopupWrapper = function TableSelectorPopupWrapper(_ref) {
+  var isOpen = _ref.isOpen,
+    targetRef = _ref.targetRef,
+    isOpenedByKeyboard = _ref.isOpenedByKeyboard,
+    onSelection = _ref.onSelection,
+    onClickOutside = _ref.onClickOutside,
+    onEscapeKeydown = _ref.onEscapeKeydown,
+    onUnmount = _ref.onUnmount,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement;
+  if (!isOpen || !targetRef.current) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_ui.TableSelectorPopup, {
+    allowOutsideSelection: true,
+    target: targetRef.current,
+    onUnmount: onUnmount,
+    onSelection: onSelection,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    handleClickOutside: onClickOutside,
+    handleEscapeKeydown: onEscapeKeydown,
+    isOpenedByKeyboard: isOpenedByKeyboard
+  });
+};

package/dist/cjs/ui/toolbar-components/shared/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.POPUP_Z_INDEX = exports.POPUP_DIMENSIONS = exports.FOCUS_DELAY = void 0;
+var POPUP_Z_INDEX = exports.POPUP_Z_INDEX = 'akEditorMenuZIndex';
+var POPUP_DIMENSIONS = exports.POPUP_DIMENSIONS = {
+  EMOJI_PICKER: {
+    fitHeight: 350,
+    fitWidth: 350,
+    offset: [0, 3]
+  }
+};
+var FOCUS_DELAY = exports.FOCUS_DELAY = {
+  ANIMATION_FRAME: 'requestAnimationFrame',
+  MICROTASK: 'queueMicrotask'
+};

package/dist/cjs/ui/toolbar-components/shared/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _EmojiButton = require("./toolbar-components/EmojiButton");
 var _ImageButton = require("./toolbar-components/ImageButton");
+var _InsertButton = require("./toolbar-components/InsertButton");
 var _LayoutButton = require("./toolbar-components/LayoutButton");
 var _MediaButton = require("./toolbar-components/MediaButton");
 var _MentionButton = require("./toolbar-components/MentionButton");
@@ -19,8 +20,42 @@ var _TaskListButton = require("./toolbar-components/TaskListButton");
 var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(_ref) {
   var api = _ref.api,
     tableSelectorSupported = _ref.tableSelectorSupported,
-    toolbarShowPlusInsertOnly = _ref.toolbarShowPlusInsertOnly;
-  return (0, _toConsumableArray2.default)(toolbarShowPlusInsertOnly ? [] : [{
+    toolbarShowPlusInsertOnly = _ref.toolbarShowPlusInsertOnly,
+    showElementBrowserLink = _ref.showElementBrowserLink,
+    onInsertBlockType = _ref.onInsertBlockType,
+    nativeStatusSupported = _ref.nativeStatusSupported,
+    horizontalRuleEnabled = _ref.horizontalRuleEnabled,
+    expandEnabled = _ref.expandEnabled,
+    insertMenuItems = _ref.insertMenuItems;
+  return (0, _toConsumableArray2.default)(toolbarShowPlusInsertOnly ? [{
+    type: _toolbar.INSERT_GROUP.type,
+    key: _toolbar.INSERT_GROUP.key,
+    parents: [{
+      type: _toolbar.INSERT_BLOCK_SECTION.type,
+      key: _toolbar.INSERT_BLOCK_SECTION.key,
+      rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.INSERT_BUTTON.type,
+    key: _toolbar.INSERT_BUTTON.key,
+    parents: [{
+      type: _toolbar.INSERT_GROUP.type,
+      key: _toolbar.INSERT_GROUP.key,
+      rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_InsertButton.InsertButton, {
+        api: api,
+        showElementBrowserLink: showElementBrowserLink,
+        tableSelectorSupported: tableSelectorSupported,
+        onInsertBlockType: onInsertBlockType,
+        nativeStatusSupported: nativeStatusSupported,
+        horizontalRuleEnabled: horizontalRuleEnabled,
+        expandEnabled: expandEnabled,
+        insertMenuItems: insertMenuItems
+      });
+    }
+  }] : [{
     type: _toolbar.TASK_LIST_GROUP.type,
     key: _toolbar.TASK_LIST_GROUP.key,
     parents: [{
@@ -162,5 +197,34 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
         tableSelectorSupported: tableSelectorSupported
       });
     }
+  }, {
+    type: _toolbar.INSERT_GROUP.type,
+    key: _toolbar.INSERT_GROUP.key,
+    parents: [{
+      type: _toolbar.INSERT_BLOCK_SECTION.type,
+      key: _toolbar.INSERT_BLOCK_SECTION.key,
+      rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.INSERT_BUTTON.type,
+    key: _toolbar.INSERT_BUTTON.key,
+    parents: [{
+      type: _toolbar.INSERT_GROUP.type,
+      key: _toolbar.INSERT_GROUP.key,
+      rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_InsertButton.InsertButton, {
+        api: api,
+        showElementBrowserLink: showElementBrowserLink,
+        tableSelectorSupported: tableSelectorSupported,
+        onInsertBlockType: onInsertBlockType,
+        nativeStatusSupported: nativeStatusSupported,
+        horizontalRuleEnabled: horizontalRuleEnabled,
+        expandEnabled: expandEnabled,
+        insertMenuItems: insertMenuItems,
+        numberOfButtons: 7 // TODO: ED-28759 - Default to 7 buttons - Remove this once we have a proper way to do toolbar responsiveness
+      });
+    }
   }]);
 };

package/dist/es2019/insertBlockPlugin.js

@@ -148,11 +148,17 @@ export const insertBlockPlugin = ({
     });
   };
   if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
-    var _api$toolbar;
+    var _api$toolbar, _api$codeBlock, _api$panel, _api$blockType;
     api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents({
       api,
       tableSelectorSupported: options.tableSelectorSupported,
-      toolbarShowPlusInsertOnly: options.toolbarShowPlusInsertOnly
+      toolbarShowPlusInsertOnly: options.toolbarShowPlusInsertOnly,
+      showElementBrowserLink: options.showElementBrowserLink,
+      onInsertBlockType: handleInsertBlockType(api === null || api === void 0 ? void 0 : (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 ? void 0 : _api$codeBlock.actions.insertCodeBlock, api === null || api === void 0 ? void 0 : (_api$panel = api.panel) === null || _api$panel === void 0 ? void 0 : _api$panel.actions.insertPanel, api === null || api === void 0 ? 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/es2019/ui/toolbar-components/EmojiButton.js

@@ -1,31 +1,20 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import { useIntl } from 'react-intl-next';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { Popup } from '@atlaskit/editor-common/ui';
-import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
-import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarButton, ToolbarTooltip, EmojiIcon } from '@atlaskit/editor-toolbar';
-import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { isDetachedElement } from './utils/utils';
-const EmojiPicker = props => {
-  const setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
-  return /*#__PURE__*/React.createElement(AkEmojiPicker, {
-    onPickerRef: setOutsideClickTargetRef,
-    emojiProvider: props.emojiProvider,
-    onSelection: props.onSelection
-  });
-};
-const EmojiPickerWithListeners = withOuterListeners(EmojiPicker);
+import { useEmojiPickerPopup } from './hooks/useEmojiPickerPopup';
+import { EmojiPickerPopup } from './popups/EmojiPickerPopup';
 export const EmojiButton = ({
-  api
+  api,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement
 }) => {
   const {
     formatMessage
   } = useIntl();
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
   const emojiButtonRef = useRef(null);
   const {
     emojiProviderSelector,
@@ -39,73 +28,31 @@ export const EmojiButton = ({
       isTypeAheadAllowed: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isAllowed
     };
   });
+  const emojiPickerPopup = useEmojiPickerPopup({
+    api,
+    buttonRef: emojiButtonRef
+  });
   if (!(api !== null && api !== void 0 && api.emoji)) {
     return null;
   }
-  const toggleEmojiPickerOpen = newState => {
-    const oldState = emojiPickerOpen;
-    if (newState === true && oldState === false) {
-      var _api$analytics;
-      api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
-        action: ACTION.OPENED,
-        actionSubject: ACTION_SUBJECT.PICKER,
-        actionSubjectId: ACTION_SUBJECT_ID.PICKER_EMOJI,
-        attributes: {
-          inputMethod: INPUT_METHOD.TOOLBAR
-        },
-        eventType: EVENT_TYPE.UI
-      });
-    }
-    setEmojiPickerOpen(newState);
-  };
   const getEmojiProvider = () => {
     if (emojiProviderSelector) {
       return Promise.resolve(emojiProviderSelector);
     }
   };
   const emojiProvider = expValEquals('platform_editor_prevent_toolbar_layout_shifts', 'isEnabled', true) ? emojiProviderPromise : getEmojiProvider();
-  const onPopupUnmount = () => {
-    requestAnimationFrame(() => api === null || api === void 0 ? void 0 : api.core.actions.focus());
-  };
-  const handleSelectedEmoji = emojiId => {
-    var _api$emoji;
-    api === null || api === void 0 ? void 0 : api.core.actions.focus();
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
-    toggleEmojiPickerOpen(false);
-    return true;
-  };
-  const 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 && !isDetachedElement(e.target)) {
-      toggleEmojiPickerOpen(false);
-    }
-  };
-  const handleEmojiPressEscape = () => {
-    var _emojiButtonRef$curre;
-    toggleEmojiPickerOpen(false);
-    emojiButtonRef === null || emojiButtonRef === void 0 ? void 0 : (_emojiButtonRef$curre = emojiButtonRef.current) === null || _emojiButtonRef$curre === void 0 ? void 0 : _emojiButtonRef$curre.focus();
-  };
-  const onClick = () => {
-    toggleEmojiPickerOpen(!emojiPickerOpen);
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, emojiPickerOpen && emojiButtonRef.current && emojiProvider && /*#__PURE__*/React.createElement(Popup, {
-    target: emojiButtonRef.current,
-    fitHeight: 350,
-    fitWidth: 350,
-    offset: [0, 3],
-    mountTo: emojiButtonRef.current,
-    onUnmount: onPopupUnmount,
-    focusTrap: true,
-    zIndex: akEditorMenuZIndex
-  }, /*#__PURE__*/React.createElement(EmojiPickerWithListeners, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiPickerPopup, {
+    isOpen: emojiPickerPopup.isOpen,
+    targetRef: emojiButtonRef,
     emojiProvider: emojiProvider,
-    onSelection: handleSelectedEmoji,
-    handleClickOutside: handleEmojiClickOutside,
-    handleEscapeKeydown: handleEmojiPressEscape
-  })), /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    onSelection: emojiPickerPopup.handleSelectedEmoji,
+    onClickOutside: emojiPickerPopup.handleClickOutside,
+    onEscapeKeydown: emojiPickerPopup.handleEscapeKeydown,
+    onUnmount: emojiPickerPopup.onPopupUnmount,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement
+  }), /*#__PURE__*/React.createElement(ToolbarTooltip, {
     content: formatMessage(messages.emoji)
   }, /*#__PURE__*/React.createElement(ToolbarButton, {
     iconBefore: /*#__PURE__*/React.createElement(EmojiIcon, {
@@ -114,8 +61,8 @@ export const EmojiButton = ({
     }),
     ariaKeyshortcuts: "Shift+;",
     ref: emojiButtonRef,
-    onClick: onClick,
-    isSelected: emojiPickerOpen,
+    onClick: () => emojiPickerPopup.toggle(),
+    isSelected: emojiPickerPopup.isOpen,
     isDisabled: !isTypeAheadAllowed || !emojiProvider
   })));
 };