@atlaskit/editor-plugin-insert-block 4.1.7 → 4.2.0

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

@@ -0,0 +1,38 @@
+import React 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 { ToolbarButton, ToolbarTooltip, TaskIcon } from '@atlaskit/editor-toolbar';
+export const TaskListButton = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    editorView
+  } = useEditorToolbar();
+  if (!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.taskItem)) {
+    return null;
+  }
+  const onClick = () => {
+    if (editorView) {
+      var _api$taskDecision;
+      const {
+        state,
+        dispatch
+      } = editorView;
+      api === null || api === void 0 ? void 0 : (_api$taskDecision = api.taskDecision) === null || _api$taskDecision === void 0 ? void 0 : _api$taskDecision.actions.insertTaskDecision('taskList', INPUT_METHOD.TOOLBAR)(state, dispatch);
+    }
+  };
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(messages.action)
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(TaskIcon, {
+      label: formatMessage(messages.action)
+    }),
+    onClick: onClick,
+    ariaKeyshortcuts: "[ ] Space"
+  }));
+};

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

@@ -0,0 +1,4 @@
+/**
+ * Checks if an element is detached (i.e. not in the current document)
+ */
+export const isDetachedElement = el => !document.body.contains(el);

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

@@ -0,0 +1,152 @@
+import React from 'react';
+import { INSERT_BLOCK_SECTION, TASK_LIST_GROUP, MEDIA_GROUP, TOOLBAR_RANK, TOOLBARS, INSERT_BLOCK_SECTION_RANK, TASK_LIST_BUTTON, TASK_LIST_GROUP_RANK, MEDIA_BUTTON, MENTION_GROUP, MEDIA_GROUP_RANK, MENTION_BUTTON, MENTION_GROUP_RANK, EMOJI_GROUP, EMOJI_BUTTON, EMOJI_GROUP_RANK, LAYOUT_GROUP, LAYOUT_BUTTON, LAYOUT_GROUP_RANK, TABLE_GROUP_RANK, TABLE_BUTTON, TABLE_GROUP, TABLE_SIZE_PICKER } from "@atlaskit/editor-common/toolbar";
+import { EmojiButton } from './toolbar-components/EmojiButton';
+import { ImageButton } from './toolbar-components/ImageButton';
+import { LayoutButton } from './toolbar-components/LayoutButton';
+import { MediaButton } from './toolbar-components/MediaButton';
+import { MentionButton } from './toolbar-components/MentionButton';
+import { TableButton } from './toolbar-components/TableButton';
+import { TableSizePicker } from './toolbar-components/TableSizePicker';
+import { TaskListButton } from "./toolbar-components/TaskListButton";
+export const getToolbarComponents = ({
+  api,
+  tableSelectorSupported
+}) => {
+  return [{
+    type: INSERT_BLOCK_SECTION.type,
+    key: INSERT_BLOCK_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[INSERT_BLOCK_SECTION.key]
+    }]
+  }, {
+    type: TASK_LIST_GROUP.type,
+    key: TASK_LIST_GROUP.key,
+    parents: [{
+      type: INSERT_BLOCK_SECTION.type,
+      key: INSERT_BLOCK_SECTION.key,
+      rank: INSERT_BLOCK_SECTION_RANK[TASK_LIST_GROUP.key]
+    }]
+  }, {
+    type: TASK_LIST_BUTTON.type,
+    key: TASK_LIST_BUTTON.key,
+    parents: [{
+      type: TASK_LIST_GROUP.type,
+      key: TASK_LIST_GROUP.key,
+      rank: TASK_LIST_GROUP_RANK[TASK_LIST_BUTTON.key]
+    }],
+    component: () => /*#__PURE__*/React.createElement(TaskListButton, {
+      api: api
+    })
+  }, {
+    type: MEDIA_GROUP.type,
+    key: MEDIA_GROUP.key,
+    parents: [{
+      type: INSERT_BLOCK_SECTION.type,
+      key: INSERT_BLOCK_SECTION.key,
+      rank: INSERT_BLOCK_SECTION_RANK[MEDIA_GROUP.key]
+    }]
+  }, {
+    type: MEDIA_BUTTON.type,
+    key: MEDIA_BUTTON.key,
+    parents: [{
+      type: MEDIA_GROUP.type,
+      key: MEDIA_GROUP.key,
+      rank: MEDIA_GROUP_RANK[MEDIA_BUTTON.key]
+    }],
+    component: () => !!(api !== null && api !== void 0 && api.imageUpload) ? /*#__PURE__*/React.createElement(ImageButton, {
+      api: api
+    }) : /*#__PURE__*/React.createElement(MediaButton, {
+      api: api
+    })
+  }, {
+    type: MENTION_GROUP.type,
+    key: MENTION_GROUP.key,
+    parents: [{
+      type: INSERT_BLOCK_SECTION.type,
+      key: INSERT_BLOCK_SECTION.key,
+      rank: INSERT_BLOCK_SECTION_RANK[MENTION_GROUP.key]
+    }]
+  }, {
+    type: MENTION_BUTTON.type,
+    key: MENTION_BUTTON.key,
+    parents: [{
+      type: MENTION_GROUP.type,
+      key: MENTION_GROUP.key,
+      rank: MENTION_GROUP_RANK[MENTION_BUTTON.key]
+    }],
+    component: () => /*#__PURE__*/React.createElement(MentionButton, {
+      api: api
+    })
+  }, {
+    type: EMOJI_GROUP.type,
+    key: EMOJI_GROUP.key,
+    parents: [{
+      type: INSERT_BLOCK_SECTION.type,
+      key: INSERT_BLOCK_SECTION.key,
+      rank: INSERT_BLOCK_SECTION_RANK[EMOJI_GROUP.key]
+    }]
+  }, {
+    type: EMOJI_BUTTON.type,
+    key: EMOJI_BUTTON.key,
+    parents: [{
+      type: EMOJI_GROUP.type,
+      key: EMOJI_GROUP.key,
+      rank: EMOJI_GROUP_RANK[EMOJI_BUTTON.key]
+    }],
+    component: () => /*#__PURE__*/React.createElement(EmojiButton, {
+      api: api
+    })
+  }, {
+    type: LAYOUT_GROUP.type,
+    key: LAYOUT_GROUP.key,
+    parents: [{
+      type: INSERT_BLOCK_SECTION.type,
+      key: INSERT_BLOCK_SECTION.key,
+      rank: INSERT_BLOCK_SECTION_RANK[LAYOUT_GROUP.key]
+    }]
+  }, {
+    type: LAYOUT_BUTTON.type,
+    key: LAYOUT_BUTTON.key,
+    parents: [{
+      type: LAYOUT_GROUP.type,
+      key: LAYOUT_GROUP.key,
+      rank: LAYOUT_GROUP_RANK[LAYOUT_BUTTON.key]
+    }],
+    component: () => /*#__PURE__*/React.createElement(LayoutButton, {
+      api: api
+    })
+  }, {
+    type: TABLE_GROUP.type,
+    key: TABLE_GROUP.key,
+    parents: [{
+      type: INSERT_BLOCK_SECTION.type,
+      key: INSERT_BLOCK_SECTION.key,
+      rank: INSERT_BLOCK_SECTION_RANK[TABLE_GROUP.key]
+    }]
+  }, {
+    type: TABLE_BUTTON.type,
+    key: TABLE_BUTTON.key,
+    parents: [{
+      type: TABLE_GROUP.type,
+      key: TABLE_GROUP.key,
+      rank: TABLE_GROUP_RANK[TABLE_BUTTON.key]
+    }],
+    component: () => /*#__PURE__*/React.createElement(TableButton, {
+      api: api
+    })
+  }, {
+    type: TABLE_SIZE_PICKER.type,
+    key: TABLE_SIZE_PICKER.key,
+    parents: [{
+      type: TABLE_GROUP.type,
+      key: TABLE_GROUP.key,
+      rank: TABLE_GROUP_RANK[TABLE_SIZE_PICKER.key]
+    }],
+    component: () => /*#__PURE__*/React.createElement(TableSizePicker, {
+      api: api,
+      tableSelectorSupported: tableSelectorSupported
+    })
+  }];
+};

package/dist/esm/insertBlockPlugin.js

@@ -7,8 +7,10 @@ import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { toggleInsertBlockPmKey, toggleInsertBlockPmPlugin } from './pm-plugins/toggleInsertBlock';
+import { getToolbarComponents } from './ui/toolbar-components';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
@@ -92,7 +94,6 @@ function delayUntilIdle(cb) {
   });
 }
 export var insertBlockPlugin = function insertBlockPlugin(_ref) {
-  var _api$primaryToolbar;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
@@ -151,10 +152,19 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
       renderNode: renderNode
     });
   };
-  api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-    name: 'insertBlock',
-    component: primaryToolbarComponent
-  });
+  if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents({
+      api: api,
+      tableSelectorSupported: options.tableSelectorSupported
+    }));
+  } else {
+    var _api$primaryToolbar;
+    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+      name: 'insertBlock',
+      component: primaryToolbarComponent
+    });
+  }
   var plugin = {
     name: 'insertBlock',
     actions: {

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

@@ -0,0 +1,123 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 { 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';
+var EmojiPicker = function EmojiPicker(props) {
+  var setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
+  return /*#__PURE__*/React.createElement(AkEmojiPicker, {
+    onPickerRef: setOutsideClickTargetRef,
+    emojiProvider: props.emojiProvider,
+    onSelection: props.onSelection
+  });
+};
+var EmojiPickerWithListeners = withOuterListeners(EmojiPicker);
+export var EmojiButton = function EmojiButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    emojiPickerOpen = _useState2[0],
+    setEmojiPickerOpen = _useState2[1];
+  var emojiButtonRef = useRef(null);
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['emoji', 'typeAhead'], function (states) {
+      var _states$emojiState, _states$emojiState2, _states$typeAheadStat;
+      return {
+        emojiProviderSelector: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.emojiProvider,
+        emojiProviderPromise: (_states$emojiState2 = states.emojiState) === null || _states$emojiState2 === void 0 ? void 0 : _states$emojiState2.emojiProviderPromise,
+        isTypeAheadAllowed: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isAllowed
+      };
+    }),
+    emojiProviderSelector = _useSharedPluginState.emojiProviderSelector,
+    emojiProviderPromise = _useSharedPluginState.emojiProviderPromise,
+    isTypeAheadAllowed = _useSharedPluginState.isTypeAheadAllowed;
+  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: ACTION.OPENED,
+        actionSubject: ACTION_SUBJECT.PICKER,
+        actionSubjectId: ACTION_SUBJECT_ID.PICKER_EMOJI,
+        attributes: {
+          inputMethod: INPUT_METHOD.TOOLBAR
+        },
+        eventType: EVENT_TYPE.UI
+      });
+    }
+    setEmojiPickerOpen(newState);
+  };
+  var getEmojiProvider = function getEmojiProvider() {
+    if (emojiProviderSelector) {
+      return Promise.resolve(emojiProviderSelector);
+    }
+  };
+  var emojiProvider = 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, 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 && !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.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, {
+    emojiProvider: emojiProvider,
+    onSelection: handleSelectedEmoji,
+    handleClickOutside: handleEmojiClickOutside,
+    handleEscapeKeydown: handleEmojiPressEscape
+  })), /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(messages.emoji)
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(EmojiIcon, {
+      label: formatMessage(messages.emoji)
+    }),
+    ariaKeyshortcuts: "Shift+;",
+    ref: emojiButtonRef,
+    onClick: onClick,
+    isSelected: emojiPickerOpen,
+    isDisabled: !isTypeAheadAllowed || !emojiProvider
+  })));
+};

package/dist/esm/ui/toolbar-components/ImageButton.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { ToolbarButton, ToolbarTooltip, ImageIcon } from '@atlaskit/editor-toolbar';
+export var ImageButton = function ImageButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity', 'imageUpload'], function (states) {
+      var _states$connectivityS, _states$imageUploadSt;
+      return {
+        connectivityMode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode,
+        imageUploadEnabled: (_states$imageUploadSt = states.imageUploadState) === null || _states$imageUploadSt === void 0 ? void 0 : _states$imageUploadSt.enabled
+      };
+    }),
+    connectivityMode = _useSharedPluginState.connectivityMode,
+    imageUploadEnabled = _useSharedPluginState.imageUploadEnabled;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  var isOffline = connectivityMode === 'offline';
+  var onClick = function onClick() {
+    if (editorView) {
+      var _api$imageUpload;
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      api === null || api === void 0 || (_api$imageUpload = api.imageUpload) === null || _api$imageUpload === void 0 || _api$imageUpload.actions.startUpload()(state, dispatch);
+    }
+  };
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(messages.image)
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(ImageIcon, {
+      label: formatMessage(messages.image)
+    }),
+    onClick: onClick,
+    isDisabled: !imageUploadEnabled || isOffline
+  }));
+};

package/dist/esm/ui/toolbar-components/LayoutButton.js

@@ -0,0 +1,32 @@
+import React 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 { ToolbarButton, ToolbarTooltip, LayoutIcon } from '@atlaskit/editor-toolbar';
+export var LayoutButton = function LayoutButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  if (!(api !== null && api !== void 0 && api.layout)) {
+    return null;
+  }
+  var onClick = function onClick() {
+    if (editorView) {
+      var _api$layout;
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 || _api$layout.actions.insertLayoutColumns(INPUT_METHOD.TOOLBAR)(state, dispatch);
+    }
+  };
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(messages.columns)
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(LayoutIcon, {
+      label: formatMessage(messages.columns)
+    }),
+    onClick: onClick
+  }));
+};

package/dist/esm/ui/toolbar-components/MediaButton.js

@@ -0,0 +1,63 @@
+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 { ToolbarButton, ToolbarTooltip, ImageIcon } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
+export var MediaButton = function MediaButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['media', 'connectivity'], function (states) {
+      var _states$mediaState, _states$mediaState2, _states$connectivityS;
+      return {
+        showMediaPicker: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.showMediaPicker,
+        allowsUploads: (_states$mediaState2 = states.mediaState) === null || _states$mediaState2 === void 0 ? void 0 : _states$mediaState2.allowsUploads,
+        connectivityMode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
+      };
+    }),
+    showMediaPicker = _useSharedPluginState.showMediaPicker,
+    connectivityMode = _useSharedPluginState.connectivityMode,
+    allowsUploads = _useSharedPluginState.allowsUploads;
+  var mediaButtonRef = useRef(null);
+  if (!(api !== null && api !== void 0 && api.media)) {
+    return null;
+  }
+  var onClick = function onClick() {
+    var _api$mediaInsert, _api$analytics;
+    if (!showMediaPicker) {
+      return;
+    }
+    if (api !== null && api !== void 0 && (_api$mediaInsert = api.mediaInsert) !== null && _api$mediaInsert !== void 0 && (_api$mediaInsert = _api$mediaInsert.commands) !== null && _api$mediaInsert !== void 0 && _api$mediaInsert.showMediaInsertPopup && fg('platform_editor_add_media_from_url_rollout')) {
+      var _api$core, _api$mediaInsert2;
+      var mountInfo = mediaButtonRef.current ? {
+        ref: mediaButtonRef.current,
+        mountPoint: mediaButtonRef.current
+      } : undefined;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.commands.showMediaInsertPopup(mountInfo));
+    } else {
+      showMediaPicker();
+    }
+    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+      action: ACTION.OPENED,
+      actionSubject: ACTION_SUBJECT.PICKER,
+      actionSubjectId: fg('platform_editor_add_media_from_url_rollout') ? ACTION_SUBJECT_ID.PICKER_MEDIA : ACTION_SUBJECT_ID.PICKER_CLOUD,
+      attributes: {
+        inputMethod: INPUT_METHOD.TOOLBAR
+      },
+      eventType: EVENT_TYPE.UI
+    });
+  };
+  var isOffline = connectivityMode === 'offline';
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(messages.addMediaFiles)
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(ImageIcon, {
+      label: formatMessage(messages.addMediaFiles)
+    }),
+    onClick: onClick,
+    ref: mediaButtonRef,
+    isDisabled: isOffline || !allowsUploads
+  }));
+};

package/dist/esm/ui/toolbar-components/MentionButton.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { ToolbarButton, ToolbarTooltip, MentionIcon } from '@atlaskit/editor-toolbar';
+export var MentionButton = function MentionButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['mention', 'typeAhead'], function (states) {
+      var _states$mentionState, _states$mentionState2, _states$typeAheadStat;
+      return {
+        canInsertMention: (_states$mentionState = states.mentionState) === null || _states$mentionState === void 0 ? void 0 : _states$mentionState.canInsertMention,
+        mentionProvider: (_states$mentionState2 = states.mentionState) === null || _states$mentionState2 === void 0 ? void 0 : _states$mentionState2.mentionProvider,
+        isTypeAheadAllowed: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isAllowed
+      };
+    }),
+    canInsertMention = _useSharedPluginState.canInsertMention,
+    mentionProvider = _useSharedPluginState.mentionProvider,
+    isTypeAheadAllowed = _useSharedPluginState.isTypeAheadAllowed;
+  if (!(api !== null && api !== void 0 && api.mention)) {
+    return null;
+  }
+  var onClick = function onClick() {
+    var _api$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(INPUT_METHOD.TOOLBAR);
+  };
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(messages.mention)
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(MentionIcon, {
+      label: formatMessage(messages.mention)
+    }),
+    onClick: onClick,
+    ariaKeyshortcuts: "Shift+2 Space",
+    isDisabled: !canInsertMention || !mentionProvider || !isTypeAheadAllowed
+  }));
+};

package/dist/esm/ui/toolbar-components/TableButton.js

@@ -0,0 +1,45 @@
+import React 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 { formatShortcut, toggleTable } from '@atlaskit/editor-common/keymaps';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { ToolbarButton, ToolbarTooltip, TableIcon } from '@atlaskit/editor-toolbar';
+export var TableButton = function TableButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  if (!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.table)) {
+    return null;
+  }
+  var onClick = function onClick() {
+    if (editorView) {
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      // 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: ACTION.INSERTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+          attributes: {
+            inputMethod: INPUT_METHOD.TOOLBAR
+          },
+          eventType: EVENT_TYPE.TRACK
+        })(state, dispatch);
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(messages.table)
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(TableIcon, {
+      label: formatMessage(messages.table)
+    }),
+    onClick: onClick,
+    ariaKeyshortcuts: formatShortcut(toggleTable)
+  }));
+};

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

@@ -0,0 +1,74 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useRef, useState } 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 } from '@atlaskit/editor-toolbar';
+import { isDetachedElement } from './utils/utils';
+export var TableSizePicker = function TableSizePicker(_ref) {
+  var api = _ref.api,
+    tableSelectorSupported = _ref.tableSelectorSupported;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    tableSizePickerOpen = _useState2[0],
+    setTableSizePickerOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpenedByKeyboard = _useState4[0],
+    setIsOpenedByKeyboard = _useState4[1];
+  var tableSizePickerRef = useRef(null);
+  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, INPUT_METHOD.PICKER));
+    });
+    setTableSizePickerOpen(false);
+  };
+  var handleTableSelectorClickOutside = function handleTableSelectorClickOutside(e) {
+    // Ignore click events for detached elements.
+    if (e.target instanceof HTMLElement && !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);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, tableSizePickerRef.current && tableSizePickerOpen && /*#__PURE__*/React.createElement(TableSelectorPopup, {
+    allowOutsideSelection: true,
+    target: tableSizePickerRef.current,
+    onUnmount: onUnmount,
+    onSelection: handleSelectedTableSize,
+    popupsMountPoint: tableSizePickerRef.current,
+    handleClickOutside: handleTableSelectorClickOutside,
+    handleEscapeKeydown: handleTableSelectorPressEscape,
+    isOpenedByKeyboard: isOpenedByKeyboard
+  }), /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(messages.tableSelector)
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(MoreItemsIcon, {
+      label: formatMessage(messages.tableSelector)
+    }),
+    onClick: onClick,
+    isSelected: tableSizePickerOpen,
+    ref: tableSizePickerRef
+  })));
+};