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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 4.2.0
+
+### Minor Changes
+
+- [`c3b98666f3840`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c3b98666f3840) -
+  [ux] ED-28740 register insert block items to new toolbar behind platform_editor_toolbar_aifc
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.1.7
 
 ### Patch Changes

package/dist/cjs/insertBlockPlugin.js

@@ -15,8 +15,10 @@ var _types = require("@atlaskit/editor-common/types");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _consts = require("@atlaskit/editor-plugin-block-type/consts");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _toggleInsertBlock = require("./pm-plugins/toggleInsertBlock");
+var _toolbarComponents = require("./ui/toolbar-components");
 var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // Ignored via go/ees005
@@ -102,7 +104,6 @@ function delayUntilIdle(cb) {
   });
 }
 var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_ref) {
-  var _api$primaryToolbar;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
@@ -161,10 +162,19 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
       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 ((0, _expValEquals.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((0, _toolbarComponents.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/cjs/ui/toolbar-components/EmojiButton.js

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

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var ImageButton = exports.ImageButton = function ImageButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.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 = (0, _toolbar.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.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: formatMessage(_messages.toolbarInsertBlockMessages.image)
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ImageIcon, {
+      label: formatMessage(_messages.toolbarInsertBlockMessages.image)
+    }),
+    onClick: onClick,
+    isDisabled: !imageUploadEnabled || isOffline
+  }));
+};

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

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var LayoutButton = exports.LayoutButton = function LayoutButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEditorToolbar = (0, _toolbar.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(_analytics.INPUT_METHOD.TOOLBAR)(state, dispatch);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: formatMessage(_messages.toolbarInsertBlockMessages.columns)
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.LayoutIcon, {
+      label: formatMessage(_messages.toolbarInsertBlockMessages.columns)
+    }),
+    onClick: onClick
+  }));
+};

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var MediaButton = exports.MediaButton = function MediaButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.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 = (0, _react.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 && (0, _platformFeatureFlags.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: _analytics.ACTION.OPENED,
+      actionSubject: _analytics.ACTION_SUBJECT.PICKER,
+      actionSubjectId: (0, _platformFeatureFlags.fg)('platform_editor_add_media_from_url_rollout') ? _analytics.ACTION_SUBJECT_ID.PICKER_MEDIA : _analytics.ACTION_SUBJECT_ID.PICKER_CLOUD,
+      attributes: {
+        inputMethod: _analytics.INPUT_METHOD.TOOLBAR
+      },
+      eventType: _analytics.EVENT_TYPE.UI
+    });
+  };
+  var isOffline = connectivityMode === 'offline';
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: formatMessage(_messages.toolbarInsertBlockMessages.addMediaFiles)
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ImageIcon, {
+      label: formatMessage(_messages.toolbarInsertBlockMessages.addMediaFiles)
+    }),
+    onClick: onClick,
+    ref: mediaButtonRef,
+    isDisabled: isOffline || !allowsUploads
+  }));
+};

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MentionButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var MentionButton = exports.MentionButton = function MentionButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.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(_analytics.INPUT_METHOD.TOOLBAR);
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: formatMessage(_messages.toolbarInsertBlockMessages.mention)
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.MentionIcon, {
+      label: formatMessage(_messages.toolbarInsertBlockMessages.mention)
+    }),
+    onClick: onClick,
+    ariaKeyshortcuts: "Shift+2 Space",
+    isDisabled: !canInsertMention || !mentionProvider || !isTypeAheadAllowed
+  }));
+};

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var TableButton = exports.TableButton = function TableButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEditorToolbar = (0, _toolbar.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: _analytics.ACTION.INSERTED,
+          actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
+          attributes: {
+            inputMethod: _analytics.INPUT_METHOD.TOOLBAR
+          },
+          eventType: _analytics.EVENT_TYPE.TRACK
+        })(state, dispatch);
+      });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: formatMessage(_messages.toolbarInsertBlockMessages.table)
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableIcon, {
+      label: formatMessage(_messages.toolbarInsertBlockMessages.table)
+    }),
+    onClick: onClick,
+    ariaKeyshortcuts: (0, _keymaps.formatShortcut)(_keymaps.toggleTable)
+  }));
+};

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

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

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TaskListButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var TaskListButton = exports.TaskListButton = function TaskListButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  if (!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.taskItem)) {
+    return null;
+  }
+  var onClick = function onClick() {
+    if (editorView) {
+      var _api$taskDecision;
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      api === null || api === void 0 || (_api$taskDecision = api.taskDecision) === null || _api$taskDecision === void 0 || _api$taskDecision.actions.insertTaskDecision('taskList', _analytics.INPUT_METHOD.TOOLBAR)(state, dispatch);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: formatMessage(_messages.toolbarInsertBlockMessages.action)
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TaskIcon, {
+      label: formatMessage(_messages.toolbarInsertBlockMessages.action)
+    }),
+    onClick: onClick,
+    ariaKeyshortcuts: "[ ] Space"
+  }));
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDetachedElement = void 0;
+/**
+ * Checks if an element is detached (i.e. not in the current document)
+ */
+var isDetachedElement = exports.isDetachedElement = function isDetachedElement(el) {
+  return !document.body.contains(el);
+};