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

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

@@ -0,0 +1,243 @@
+import React, { useRef, useState } 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 { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { ToolbarButton, ToolbarTooltip, AddIcon, useToolbarUI } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
+import InsertMenu, { DEFAULT_HEIGHT } from '../ElementBrowser/InsertMenu';
+import { useEmojiPickerPopup } from './hooks/useEmojiPickerPopup';
+import { useInsertButtonState } from './hooks/useInsertButtonState';
+import { useTableSelectorPopup } from './hooks/useTableSelectorPopup';
+import { EmojiPickerPopup } from './popups/EmojiPickerPopup';
+
+// 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.
+const FIT_HEIGHT_BUFFER = 100;
+export const InsertButton = ({
+  api,
+  showElementBrowserLink = false,
+  isFullPageAppearance = false,
+  tableSelectorSupported,
+  nativeStatusSupported,
+  horizontalRuleEnabled,
+  expandEnabled,
+  insertMenuItems,
+  numberOfButtons,
+  onInsertBlockType
+}) => {
+  const {
+    editorView
+  } = useEditorToolbar();
+  const {
+    isDisabled,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement
+  } = useToolbarUI();
+  const {
+    formatMessage
+  } = useIntl();
+  const [insertMenuOpen, setInsertMenuOpen] = useState(false);
+  const insertButtonRef = useRef(null);
+  const emojiPickerPopup = useEmojiPickerPopup({
+    api,
+    buttonRef: insertButtonRef
+  });
+  const tableSelectorPopup = useTableSelectorPopup({
+    api,
+    buttonRef: insertButtonRef
+  });
+  const showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
+  const {
+    dropdownItems,
+    emojiProvider,
+    isTypeAheadAllowed
+  } = useInsertButtonState({
+    api,
+    editorView: editorView || undefined,
+    horizontalRuleEnabled,
+    insertMenuItems,
+    nativeStatusSupported,
+    numberOfButtons,
+    tableSelectorSupported,
+    expandEnabled,
+    showElementBrowserLink
+  });
+  if (!(api !== null && api !== void 0 && api.insertBlock)) {
+    return null;
+  }
+  const toggleInsertMenuOpen = newState => {
+    setInsertMenuOpen(newState);
+  };
+  const onPopupUnmount = () => {
+    requestAnimationFrame(() => api === null || api === void 0 ? void 0 : api.core.actions.focus());
+  };
+  const onClick = () => {
+    toggleInsertMenuOpen(!insertMenuOpen);
+  };
+  const onItemActivated = ({
+    item,
+    inputMethod
+  }) => {
+    var _api$core, _api$hyperlink, _api$imageUpload, _api$mention, _api$mention$actions, _api$taskDecision, _api$rule, _api$core4, _api$date, _api$date$commands, _api$placeholderText, _api$layout, _api$core5, _api$status, _api$status$commands, _api$expand;
+    if (!editorView) {
+      return;
+    }
+    const {
+      state,
+      dispatch
+    } = editorView;
+
+    // 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 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? 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(() => {
+          var _api$table, _api$table$actions$in, _api$table$actions;
+          api === null || api === void 0 ? void 0 : (_api$table = api.table) === null || _api$table === void 0 ? void 0 : (_api$table$actions$in = (_api$table$actions = _api$table.actions).insertTable) === null || _api$table$actions$in === void 0 ? void 0 : _api$table$actions$in.call(_api$table$actions, {
+            action: ACTION.INSERTED,
+            actionSubject: ACTION_SUBJECT.DOCUMENT,
+            actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+            attributes: {
+              inputMethod
+            },
+            eventType: 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 (fg('platform_editor_add_media_from_url_rollout')) {
+            var _api$core2, _api$mediaInsert;
+            api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(api === null || api === void 0 ? 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 ? void 0 : (_api$mention = api.mention) === null || _api$mention === void 0 ? void 0 : (_api$mention$actions = _api$mention.actions) === null || _api$mention$actions === void 0 ? void 0 : _api$mention$actions.openTypeAhead(inputMethod);
+        break;
+      case 'emoji':
+        emojiPickerPopup.toggle(inputMethod);
+        break;
+      case 'codeblock':
+      case 'blockquote':
+      case 'panel':
+        onInsertBlockType === null || onInsertBlockType === void 0 ? void 0 : onInsertBlockType(item.value.name)(state, dispatch);
+        break;
+      case 'action':
+      case 'decision':
+        const listType = item.value.name === 'action' ? 'taskList' : 'decisionList';
+        api === null || api === void 0 ? void 0 : (_api$taskDecision = api.taskDecision) === null || _api$taskDecision === void 0 ? void 0 : _api$taskDecision.actions.insertTaskDecision(listType, inputMethod)(state, dispatch);
+        break;
+      case 'horizontalrule':
+        api === null || api === void 0 ? void 0 : (_api$rule = api.rule) === null || _api$rule === void 0 ? void 0 : _api$rule.actions.insertHorizontalRule(inputMethod)(state, dispatch);
+        break;
+      case 'macro':
+        if (!fg('platform_editor_refactor_view_more')) {
+          var _api$core3, _api$quickInsert;
+          api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? 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 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(api === null || api === void 0 ? void 0 : (_api$date = api.date) === null || _api$date === void 0 ? void 0 : (_api$date$commands = _api$date.commands) === null || _api$date$commands === void 0 ? void 0 : _api$date$commands.insertDate({
+          inputMethod
+        }));
+        break;
+      case 'placeholder text':
+        api === null || api === void 0 ? void 0 : (_api$placeholderText = api.placeholderText) === null || _api$placeholderText === void 0 ? void 0 : _api$placeholderText.actions.showPlaceholderFloatingToolbar(state, dispatch);
+        break;
+      case 'layout':
+        api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.actions.insertLayoutColumns(inputMethod)(state, dispatch);
+        break;
+      case 'status':
+        api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(api === null || api === void 0 ? void 0 : (_api$status = api.status) === null || _api$status === void 0 ? void 0 : (_api$status$commands = _api$status.commands) === null || _api$status$commands === void 0 ? void 0 : _api$status$commands.insertStatus(inputMethod));
+        break;
+      case 'expand':
+        api === null || api === void 0 ? void 0 : (_api$expand = api.expand) === null || _api$expand === void 0 ? void 0 : _api$expand.actions.insertExpand(state, dispatch);
+        break;
+      default:
+        if (item && item.onClick) {
+          item.onClick();
+        }
+        break;
+    }
+    toggleInsertMenuOpen(false);
+  };
+  const onInsert = ({
+    item
+  }) => {
+    onItemActivated({
+      item,
+      inputMethod: INPUT_METHOD.INSERT_MENU
+    });
+  };
+  const toggleVisibility = () => {
+    toggleInsertMenuOpen(!insertMenuOpen);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, insertMenuOpen && insertButtonRef.current && editorView && /*#__PURE__*/React.createElement(Popup, {
+    target: insertButtonRef.current,
+    fitHeight: DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
+    fitWidth: 350,
+    offset: [0, 3],
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    onUnmount: onPopupUnmount,
+    focusTrap: true,
+    zIndex: akEditorMenuZIndex,
+    preventOverflow: true,
+    alignX: "right"
+  }, /*#__PURE__*/React.createElement(InsertMenu, {
+    editorView: editorView,
+    dropdownItems: dropdownItems,
+    onInsert: onInsert,
+    toggleVisiblity: toggleVisibility,
+    showElementBrowserLink: showElementBrowserLink,
+    pluginInjectionApi: api,
+    isFullPageAppearance: isFullPageAppearance
+  })), emojiProvider && /*#__PURE__*/React.createElement(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.createElement(ToolbarTooltip, {
+    content: formatMessage(messages.insertMenu)
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(AddIcon, {
+      size: "small",
+      label: formatMessage(messages.insertMenu)
+    }),
+    ariaKeyshortcuts: "/",
+    ref: insertButtonRef,
+    onClick: onClick,
+    isSelected: insertMenuOpen,
+    isDisabled: !isTypeAheadAllowed || isDisabled
+  })));
+};

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

@@ -1,11 +1,10 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import { useIntl } from 'react-intl-next';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
-import { TableSelectorPopup } from '@atlaskit/editor-common/ui';
 import { MoreItemsIcon, ToolbarButton, ToolbarTooltip, useToolbarUI } from '@atlaskit/editor-toolbar';
-import { isDetachedElement } from './utils/utils';
+import { useTableSelectorPopup } from './hooks/useTableSelectorPopup';
+import { TableSelectorPopupWrapper } from './popups/TableSelectorPopupWrapper';
 export const TableSizePicker = ({
   api,
   tableSelectorSupported
@@ -16,50 +15,36 @@ export const TableSizePicker = ({
   const {
     editorView
   } = useEditorToolbar();
+  const tableSizePickerRef = useRef(null);
   const {
-    popupsMountPoint
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement
   } = useToolbarUI();
-  const [tableSizePickerOpen, setTableSizePickerOpen] = useState(false);
-  const [isOpenedByKeyboard, setIsOpenedByKeyboard] = useState(false);
-  const tableSizePickerRef = useRef(null);
+  const tableSelectorPopup = useTableSelectorPopup({
+    api,
+    buttonRef: tableSizePickerRef
+  });
   if (!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.table) || !tableSelectorSupported) {
     return null;
   }
-  const handleSelectedTableSize = (rowsCount, colsCount) => {
-    // workaround to solve race condition where cursor is not placed correctly inside table
-    queueMicrotask(() => {
-      var _api$core, _api$table;
-      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
-    });
-    setTableSizePickerOpen(false);
-  };
-  const handleTableSelectorClickOutside = e => {
-    // Ignore click events for detached elements.
-    if (e.target instanceof HTMLElement && !isDetachedElement(e.target)) {
-      setTableSizePickerOpen(false);
-    }
-  };
-  const handleTableSelectorPressEscape = () => {
-    var _tableSizePickerRef$c;
-    setTableSizePickerOpen(false);
-    (_tableSizePickerRef$c = tableSizePickerRef.current) === null || _tableSizePickerRef$c === void 0 ? void 0 : _tableSizePickerRef$c.focus();
-  };
-  const onUnmount = () => {
-    api === null || api === void 0 ? void 0 : api.core.actions.focus();
-  };
   const onClick = event => {
-    setIsOpenedByKeyboard(event.detail === 0 ? true : false);
-    setTableSizePickerOpen(!tableSizePickerOpen);
+    if (event.detail === 0) {
+      tableSelectorPopup.handleKeyboardOpen(event);
+    }
+    tableSelectorPopup.toggle();
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, tableSizePickerRef.current && tableSizePickerOpen && /*#__PURE__*/React.createElement(TableSelectorPopup, {
-    allowOutsideSelection: true,
-    target: tableSizePickerRef.current,
-    onUnmount: onUnmount,
-    onSelection: handleSelectedTableSize,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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.createElement(ToolbarTooltip, {
     content: formatMessage(messages.tableSelector)
   }, /*#__PURE__*/React.createElement(ToolbarButton, {
@@ -67,7 +52,7 @@ export const TableSizePicker = ({
       label: formatMessage(messages.tableSelector)
     }),
     onClick: onClick,
-    isSelected: tableSizePickerOpen,
+    isSelected: tableSelectorPopup.isOpen,
     ref: tableSizePickerRef
   })));
 };

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

@@ -0,0 +1,42 @@
+import { useCallback } from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { usePopupManager } from './usePopupManager';
+export const useEmojiPickerPopup = ({
+  api,
+  buttonRef
+}) => {
+  const popupManager = usePopupManager({
+    focusTarget: buttonRef,
+    analytics: {
+      onToggle: isOpen => {
+        if (isOpen) {
+          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
+          });
+        }
+      }
+    }
+  });
+  const handleSelectedEmoji = useCallback(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));
+    popupManager.close();
+    return true;
+  }, [api, popupManager]);
+  const onPopupUnmount = useCallback(() => {
+    requestAnimationFrame(() => api === null || api === void 0 ? void 0 : api.core.actions.focus());
+  }, [api]);
+  return {
+    ...popupManager,
+    handleSelectedEmoji,
+    onPopupUnmount
+  };
+};

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

@@ -0,0 +1,81 @@
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { createItems } from '../../ToolbarInsertBlock/create-items';
+export const useInsertButtonState = ({
+  api,
+  editorView,
+  horizontalRuleEnabled,
+  insertMenuItems,
+  nativeStatusSupported,
+  numberOfButtons,
+  tableSelectorSupported,
+  expandEnabled,
+  showElementBrowserLink
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const isTypeAheadAllowed = useSharedPluginStateSelector(api, 'typeAhead.isAllowed');
+  const imageUploadEnabled = useSharedPluginStateSelector(api, 'imageUpload.enabled');
+  const mentionsSupported = !!useSharedPluginStateSelector(api, 'mention.mentionProvider');
+  const canInsertMention = useSharedPluginStateSelector(api, 'mention.canInsertMention');
+  const dateEnabled = useSharedPluginStateSelector(api, 'date.isInitialised');
+  const placeholderTextEnabled = useSharedPluginStateSelector(api, 'placeholderText.allowInserting');
+  const mediaAllowsUploads = useSharedPluginStateSelector(api, 'media.allowsUploads');
+  const canInsertLink = useSharedPluginStateSelector(api, 'hyperlink.canInsertLink');
+  const activeLinkMark = useSharedPluginStateSelector(api, 'hyperlink.activeLinkMark');
+  const connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
+  const emojiProvider = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
+  const availableWrapperBlockTypes = useSharedPluginStateSelector(api, 'blockType.availableWrapperBlockTypes');
+
+  // Computed values
+  const mediaUploadsEnabled = mediaAllowsUploads;
+  const mediaSupported = mediaAllowsUploads !== undefined;
+  const isEditorOffline = connectivityMode === 'offline';
+  const imageUploadSupported = !!(api !== null && api !== void 0 && api.imageUpload);
+  const mentionsDisabled = !canInsertMention;
+  const linkSupported = canInsertLink !== undefined;
+  const linkDisabled = !canInsertLink || !!activeLinkMark;
+  const emojiDisabled = !emojiProvider;
+  const actionSupported = !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.taskItem);
+  const decisionSupported = !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.decisionItem);
+  const layoutSectionEnabled = !!(api !== null && api !== void 0 && api.layout);
+  const [, dropdownItems] = editorView !== null && editorView !== void 0 && editorView.state.schema ? createItems({
+    isTypeAheadAllowed: isTypeAheadAllowed,
+    tableSupported: !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.table),
+    tableSelectorSupported,
+    mediaUploadsEnabled,
+    mediaSupported,
+    isEditorOffline,
+    imageUploadSupported,
+    imageUploadEnabled,
+    mentionsSupported,
+    mentionsDisabled,
+    actionSupported,
+    decisionSupported,
+    linkSupported,
+    linkDisabled,
+    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,
+    dateEnabled,
+    placeholderTextEnabled,
+    horizontalRuleEnabled,
+    layoutSectionEnabled,
+    expandEnabled,
+    showElementBrowserLink,
+    emojiProvider,
+    availableWrapperBlockTypes,
+    insertMenuItems,
+    schema: editorView === null || editorView === void 0 ? void 0 : editorView.state.schema,
+    numberOfButtons: numberOfButtons || 0,
+    formatMessage
+  }) : [, []];
+  return {
+    dropdownItems,
+    emojiProvider,
+    isTypeAheadAllowed
+  };
+};

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

@@ -0,0 +1,50 @@
+import { useState, useCallback } from 'react';
+import { isDetachedElement } from '../utils/utils';
+export const usePopupManager = (config = {}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isOpenedByKeyboard, setIsOpenedByKeyboard] = useState(false);
+  const toggle = useCallback(inputMethod => {
+    var _config$analytics, _config$analytics$onT;
+    const newState = !isOpen;
+    setIsOpen(newState);
+    if (newState) {
+      var _config$onOpen;
+      (_config$onOpen = config.onOpen) === null || _config$onOpen === void 0 ? void 0 : _config$onOpen.call(config, inputMethod);
+    } else {
+      var _config$onClose;
+      (_config$onClose = config.onClose) === null || _config$onClose === void 0 ? void 0 : _config$onClose.call(config);
+    }
+    (_config$analytics = config.analytics) === null || _config$analytics === void 0 ? void 0 : (_config$analytics$onT = _config$analytics.onToggle) === null || _config$analytics$onT === void 0 ? void 0 : _config$analytics$onT.call(_config$analytics, newState, inputMethod);
+  }, [isOpen, config]);
+  const close = useCallback(() => {
+    var _config$onClose2, _config$analytics2, _config$analytics2$on;
+    setIsOpen(false);
+    (_config$onClose2 = config.onClose) === null || _config$onClose2 === void 0 ? void 0 : _config$onClose2.call(config);
+    (_config$analytics2 = config.analytics) === null || _config$analytics2 === void 0 ? void 0 : (_config$analytics2$on = _config$analytics2.onToggle) === null || _config$analytics2$on === void 0 ? void 0 : _config$analytics2$on.call(_config$analytics2, false);
+  }, [config]);
+  const handleEscapeKeydown = useCallback(() => {
+    var _config$focusTarget, _config$focusTarget$c;
+    close();
+    (_config$focusTarget = config.focusTarget) === null || _config$focusTarget === void 0 ? void 0 : (_config$focusTarget$c = _config$focusTarget.current) === null || _config$focusTarget$c === void 0 ? void 0 : _config$focusTarget$c.focus();
+  }, [close, config.focusTarget]);
+  const handleClickOutside = useCallback(e => {
+    if (e.target instanceof HTMLElement && !isDetachedElement(e.target)) {
+      close();
+    }
+  }, [close]);
+  const handleKeyboardOpen = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      setIsOpenedByKeyboard(true);
+      event.preventDefault();
+    }
+  }, []);
+  return {
+    isOpen,
+    isOpenedByKeyboard,
+    toggle,
+    close,
+    handleEscapeKeydown,
+    handleClickOutside,
+    handleKeyboardOpen
+  };
+};

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

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { usePopupManager } from './usePopupManager';
+export const useTableSelectorPopup = ({
+  api,
+  buttonRef
+}) => {
+  const popupManager = usePopupManager({
+    focusTarget: buttonRef
+  });
+  const handleSelectedTableSize = useCallback((rowsCount, colsCount) => {
+    // workaround to solve race condition where cursor is not placed correctly inside table
+    queueMicrotask(() => {
+      var _api$core, _api$table;
+      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
+    });
+    popupManager.close();
+  }, [api, popupManager]);
+  const onPopupUnmount = useCallback(() => {
+    api === null || api === void 0 ? void 0 : api.core.actions.focus();
+  }, [api]);
+  return {
+    ...popupManager,
+    handleSelectedTableSize,
+    onPopupUnmount
+  };
+};

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

@@ -0,0 +1,47 @@
+import React from 'react';
+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 { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
+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);
+export const EmojiPickerPopup = ({
+  isOpen,
+  targetRef,
+  emojiProvider,
+  onSelection,
+  onClickOutside,
+  onEscapeKeydown,
+  onUnmount,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement
+}) => {
+  if (!isOpen || !targetRef.current || !emojiProvider) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Popup, {
+    target: targetRef.current,
+    fitHeight: 350,
+    fitWidth: 350,
+    offset: [0, 3],
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    onUnmount: onUnmount,
+    focusTrap: true,
+    zIndex: akEditorMenuZIndex
+  }, /*#__PURE__*/React.createElement(EmojiPickerWithListeners, {
+    emojiProvider: emojiProvider,
+    onSelection: onSelection,
+    handleClickOutside: onClickOutside,
+    handleEscapeKeydown: onEscapeKeydown
+  }));
+};

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { TableSelectorPopup } from '@atlaskit/editor-common/ui';
+export const TableSelectorPopupWrapper = ({
+  isOpen,
+  targetRef,
+  isOpenedByKeyboard,
+  onSelection,
+  onClickOutside,
+  onEscapeKeydown,
+  onUnmount,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement
+}) => {
+  if (!isOpen || !targetRef.current) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(TableSelectorPopup, {
+    allowOutsideSelection: true,
+    target: targetRef.current,
+    onUnmount: onUnmount,
+    onSelection: onSelection,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    handleClickOutside: onClickOutside,
+    handleEscapeKeydown: onEscapeKeydown,
+    isOpenedByKeyboard: isOpenedByKeyboard
+  });
+};

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

@@ -0,0 +1,12 @@
+export const POPUP_Z_INDEX = 'akEditorMenuZIndex';
+export const POPUP_DIMENSIONS = {
+  EMOJI_PICKER: {
+    fitHeight: 350,
+    fitWidth: 350,
+    offset: [0, 3]
+  }
+};
+export const FOCUS_DELAY = {
+  ANIMATION_FRAME: 'requestAnimationFrame',
+  MICROTASK: 'queueMicrotask'
+};

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

@@ -0,0 +1 @@
+export {};