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

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

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarComponents = void 0;
+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 _LayoutButton = require("./toolbar-components/LayoutButton");
+var _MediaButton = require("./toolbar-components/MediaButton");
+var _MentionButton = require("./toolbar-components/MentionButton");
+var _TableButton = require("./toolbar-components/TableButton");
+var _TableSizePicker = require("./toolbar-components/TableSizePicker");
+var _TaskListButton = require("./toolbar-components/TaskListButton");
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(_ref) {
+  var api = _ref.api,
+    tableSelectorSupported = _ref.tableSelectorSupported;
+  return [{
+    type: _toolbar.INSERT_BLOCK_SECTION.type,
+    key: _toolbar.INSERT_BLOCK_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.INSERT_BLOCK_SECTION.key]
+    }]
+  }, {
+    type: _toolbar.TASK_LIST_GROUP.type,
+    key: _toolbar.TASK_LIST_GROUP.key,
+    parents: [{
+      type: _toolbar.INSERT_BLOCK_SECTION.type,
+      key: _toolbar.INSERT_BLOCK_SECTION.key,
+      rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.TASK_LIST_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.TASK_LIST_BUTTON.type,
+    key: _toolbar.TASK_LIST_BUTTON.key,
+    parents: [{
+      type: _toolbar.TASK_LIST_GROUP.type,
+      key: _toolbar.TASK_LIST_GROUP.key,
+      rank: _toolbar.TASK_LIST_GROUP_RANK[_toolbar.TASK_LIST_BUTTON.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_TaskListButton.TaskListButton, {
+        api: api
+      });
+    }
+  }, {
+    type: _toolbar.MEDIA_GROUP.type,
+    key: _toolbar.MEDIA_GROUP.key,
+    parents: [{
+      type: _toolbar.INSERT_BLOCK_SECTION.type,
+      key: _toolbar.INSERT_BLOCK_SECTION.key,
+      rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.MEDIA_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.MEDIA_BUTTON.type,
+    key: _toolbar.MEDIA_BUTTON.key,
+    parents: [{
+      type: _toolbar.MEDIA_GROUP.type,
+      key: _toolbar.MEDIA_GROUP.key,
+      rank: _toolbar.MEDIA_GROUP_RANK[_toolbar.MEDIA_BUTTON.key]
+    }],
+    component: function component() {
+      return !!(api !== null && api !== void 0 && api.imageUpload) ? /*#__PURE__*/_react.default.createElement(_ImageButton.ImageButton, {
+        api: api
+      }) : /*#__PURE__*/_react.default.createElement(_MediaButton.MediaButton, {
+        api: api
+      });
+    }
+  }, {
+    type: _toolbar.MENTION_GROUP.type,
+    key: _toolbar.MENTION_GROUP.key,
+    parents: [{
+      type: _toolbar.INSERT_BLOCK_SECTION.type,
+      key: _toolbar.INSERT_BLOCK_SECTION.key,
+      rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.MENTION_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.MENTION_BUTTON.type,
+    key: _toolbar.MENTION_BUTTON.key,
+    parents: [{
+      type: _toolbar.MENTION_GROUP.type,
+      key: _toolbar.MENTION_GROUP.key,
+      rank: _toolbar.MENTION_GROUP_RANK[_toolbar.MENTION_BUTTON.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_MentionButton.MentionButton, {
+        api: api
+      });
+    }
+  }, {
+    type: _toolbar.EMOJI_GROUP.type,
+    key: _toolbar.EMOJI_GROUP.key,
+    parents: [{
+      type: _toolbar.INSERT_BLOCK_SECTION.type,
+      key: _toolbar.INSERT_BLOCK_SECTION.key,
+      rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.EMOJI_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.EMOJI_BUTTON.type,
+    key: _toolbar.EMOJI_BUTTON.key,
+    parents: [{
+      type: _toolbar.EMOJI_GROUP.type,
+      key: _toolbar.EMOJI_GROUP.key,
+      rank: _toolbar.EMOJI_GROUP_RANK[_toolbar.EMOJI_BUTTON.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_EmojiButton.EmojiButton, {
+        api: api
+      });
+    }
+  }, {
+    type: _toolbar.LAYOUT_GROUP.type,
+    key: _toolbar.LAYOUT_GROUP.key,
+    parents: [{
+      type: _toolbar.INSERT_BLOCK_SECTION.type,
+      key: _toolbar.INSERT_BLOCK_SECTION.key,
+      rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.LAYOUT_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.LAYOUT_BUTTON.type,
+    key: _toolbar.LAYOUT_BUTTON.key,
+    parents: [{
+      type: _toolbar.LAYOUT_GROUP.type,
+      key: _toolbar.LAYOUT_GROUP.key,
+      rank: _toolbar.LAYOUT_GROUP_RANK[_toolbar.LAYOUT_BUTTON.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_LayoutButton.LayoutButton, {
+        api: api
+      });
+    }
+  }, {
+    type: _toolbar.TABLE_GROUP.type,
+    key: _toolbar.TABLE_GROUP.key,
+    parents: [{
+      type: _toolbar.INSERT_BLOCK_SECTION.type,
+      key: _toolbar.INSERT_BLOCK_SECTION.key,
+      rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.TABLE_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.TABLE_BUTTON.type,
+    key: _toolbar.TABLE_BUTTON.key,
+    parents: [{
+      type: _toolbar.TABLE_GROUP.type,
+      key: _toolbar.TABLE_GROUP.key,
+      rank: _toolbar.TABLE_GROUP_RANK[_toolbar.TABLE_BUTTON.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_TableButton.TableButton, {
+        api: api
+      });
+    }
+  }, {
+    type: _toolbar.TABLE_SIZE_PICKER.type,
+    key: _toolbar.TABLE_SIZE_PICKER.key,
+    parents: [{
+      type: _toolbar.TABLE_GROUP.type,
+      key: _toolbar.TABLE_GROUP.key,
+      rank: _toolbar.TABLE_GROUP_RANK[_toolbar.TABLE_SIZE_PICKER.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_TableSizePicker.TableSizePicker, {
+        api: api,
+        tableSelectorSupported: tableSelectorSupported
+      });
+    }
+  }];
+};

package/dist/es2019/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';
@@ -89,7 +91,6 @@ export const insertBlockPlugin = ({
   config: options = {},
   api
 }) => {
-  var _api$primaryToolbar;
   const primaryToolbarComponent = ({
     editorView,
     editorActions,
@@ -146,10 +147,19 @@ export const insertBlockPlugin = ({
       renderNode: renderNode
     });
   };
-  api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? 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 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents({
+      api,
+      tableSelectorSupported: options.tableSelectorSupported
+    }));
+  } else {
+    var _api$primaryToolbar;
+    api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
+      name: 'insertBlock',
+      component: primaryToolbarComponent
+    });
+  }
   const plugin = {
     name: 'insertBlock',
     actions: {

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

@@ -0,0 +1,120 @@
+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';
+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 EmojiButton = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+  const emojiButtonRef = useRef(null);
+  const {
+    emojiProviderSelector,
+    emojiProviderPromise,
+    isTypeAheadAllowed
+  } = useSharedPluginStateWithSelector(api, ['emoji', 'typeAhead'], 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
+    };
+  });
+  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, {
+    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/es2019/ui/toolbar-components/ImageButton.js

@@ -0,0 +1,46 @@
+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 const ImageButton = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    connectivityMode,
+    imageUploadEnabled
+  } = useSharedPluginStateWithSelector(api, ['connectivity', 'imageUpload'], 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
+    };
+  });
+  const {
+    editorView
+  } = useEditorToolbar();
+  const isOffline = connectivityMode === 'offline';
+  const onClick = () => {
+    if (editorView) {
+      var _api$imageUpload;
+      const {
+        state,
+        dispatch
+      } = editorView;
+      api === null || api === void 0 ? void 0 : (_api$imageUpload = api.imageUpload) === null || _api$imageUpload === void 0 ? 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/es2019/ui/toolbar-components/LayoutButton.js

@@ -0,0 +1,37 @@
+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 const LayoutButton = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    editorView
+  } = useEditorToolbar();
+  if (!(api !== null && api !== void 0 && api.layout)) {
+    return null;
+  }
+  const onClick = () => {
+    if (editorView) {
+      var _api$layout;
+      const {
+        state,
+        dispatch
+      } = editorView;
+      api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? 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/es2019/ui/toolbar-components/MediaButton.js

@@ -0,0 +1,66 @@
+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 const MediaButton = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    showMediaPicker,
+    connectivityMode,
+    allowsUploads
+  } = useSharedPluginStateWithSelector(api, ['media', 'connectivity'], 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
+    };
+  });
+  const mediaButtonRef = useRef(null);
+  if (!(api !== null && api !== void 0 && api.media)) {
+    return null;
+  }
+  const onClick = () => {
+    var _api$mediaInsert, _api$mediaInsert$comm, _api$analytics;
+    if (!showMediaPicker) {
+      return;
+    }
+    if (api !== null && api !== void 0 && (_api$mediaInsert = api.mediaInsert) !== null && _api$mediaInsert !== void 0 && (_api$mediaInsert$comm = _api$mediaInsert.commands) !== null && _api$mediaInsert$comm !== void 0 && _api$mediaInsert$comm.showMediaInsertPopup && fg('platform_editor_add_media_from_url_rollout')) {
+      var _api$core, _api$mediaInsert2;
+      const mountInfo = mediaButtonRef.current ? {
+        ref: mediaButtonRef.current,
+        mountPoint: mediaButtonRef.current
+      } : undefined;
+      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$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.commands.showMediaInsertPopup(mountInfo));
+    } else {
+      showMediaPicker();
+    }
+    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: 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
+    });
+  };
+  const 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/es2019/ui/toolbar-components/MentionButton.js

@@ -0,0 +1,42 @@
+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 const MentionButton = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    canInsertMention,
+    mentionProvider,
+    isTypeAheadAllowed
+  } = useSharedPluginStateWithSelector(api, ['mention', 'typeAhead'], 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
+    };
+  });
+  if (!(api !== null && api !== void 0 && api.mention)) {
+    return null;
+  }
+  const onClick = () => {
+    var _api$mention, _api$mention$actions;
+    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(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/es2019/ui/toolbar-components/TableButton.js

@@ -0,0 +1,50 @@
+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 const TableButton = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    editorView
+  } = useEditorToolbar();
+  if (!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.table)) {
+    return null;
+  }
+  const onClick = () => {
+    if (editorView) {
+      const {
+        state,
+        dispatch
+      } = editorView;
+      // 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: 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/es2019/ui/toolbar-components/TableSizePicker.js

@@ -0,0 +1,70 @@
+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 const TableSizePicker = ({
+  api,
+  tableSelectorSupported
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    editorView
+  } = useEditorToolbar();
+  const [tableSizePickerOpen, setTableSizePickerOpen] = useState(false);
+  const [isOpenedByKeyboard, setIsOpenedByKeyboard] = useState(false);
+  const tableSizePickerRef = useRef(null);
+  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);
+  };
+  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
+  })));
+};