@atlaskit/editor-plugin-insert-block 2.2.12 → 2.3.1

package/dist/esm/plugin.js

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect } from 'react';
+import React from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { contentAllowedInCodeBlock, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
@@ -12,11 +12,12 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import SwitchIcon from './assets/switch';
 import { elementBrowserPmKey, elementBrowserPmPlugin } from './pm-plugins/elementBrowser';
+import { toggleInsertBlockPmKey, toggleInsertBlockPmPlugin } from './pm-plugins/toggleInsertBlock';
 import { InsertMenuRail } from './ui/ElementRail';
 import { templateOptions } from './ui/templateOptions';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 import { transformationOptions } from './ui/transformOptions';
-var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize, appearance) {
+export var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize, appearance) {
   // Different button numbers for full-page to better match full page toolbar breakpoints
   if (appearance === 'full-page' && fg('platform_editor_toolbar_responsive_fixes')) {
     switch (toolbarSize) {
@@ -82,18 +83,9 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
-  var toggleDropdownMenuOptionsRef = {
-    current: null
-  };
   var editorViewRef = {
     current: null
   };
-  var registerToggleDropdownMenuOptions = function registerToggleDropdownMenuOptions(cb) {
-    toggleDropdownMenuOptionsRef.current = cb;
-    return function () {
-      toggleDropdownMenuOptionsRef.current = null;
-    };
-  };
   var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
     var editorView = _ref2.editorView,
       editorActions = _ref2.editorActions,
@@ -122,7 +114,6 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
         isLastItem: isLastItem,
         providers: providers,
         options: options,
-        registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions,
         appearance: options.appearance
       });
     };
@@ -140,54 +131,62 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
     name: 'insertBlock',
     actions: {
       toggleAdditionalMenu: function toggleAdditionalMenu() {
-        var toggle = toggleDropdownMenuOptionsRef.current;
-        if (!toggle) {
-          return;
-        }
-        toggle();
+        var _api$core;
+        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
+          var tr = _ref3.tr;
+          return tr.setMeta(toggleInsertBlockPmKey, true);
+        });
       }
     },
-    /**
-     * For insert menu in right rail experiment - I don't want to expose state as it might not ship
-     * - Clean up ticket ED-24801
-     */
-    // @ts-expect-error
     getSharedState: function getSharedState(editorState) {
       var _options$appearance;
-      if (!editorState ||
-      // @ts-ignore
-      !['full-page', 'full-width'].includes((_options$appearance = options.appearance) !== null && _options$appearance !== void 0 ? _options$appearance : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
+      if (!editorState || !['full-page', 'full-width'].includes((_options$appearance = options.appearance) !== null && _options$appearance !== void 0 ? _options$appearance : '')) {
         return;
       }
-      var pluginState = elementBrowserPmKey.getState(editorState);
+      var toggleInsertBlockPluginState = toggleInsertBlockPmKey.getState(editorState);
+      var elementBrowserPluginState = elementBrowserPmKey.getState(editorState);
       return {
-        menuBrowserOpen: pluginState === null || pluginState === void 0 ? void 0 : pluginState.menuBrowserOpen
+        showElementBrowser: (toggleInsertBlockPluginState === null || toggleInsertBlockPluginState === void 0 ? void 0 : toggleInsertBlockPluginState.showElementBrowser) || false,
+        /**
+         * For insert menu in right rail experiment
+         * - Clean up ticket ED-24801
+         * Experiment: `insert-menu-in-right-rail`
+         */
+        menuBrowserOpen: editorExperiment('insert-menu-in-right-rail', true) ? elementBrowserPluginState === null || elementBrowserPluginState === void 0 ? void 0 : elementBrowserPluginState.menuBrowserOpen : false
       };
     },
     pmPlugins: function pmPlugins() {
       var _options$appearance2;
-      if (
-      // @ts-ignore
-      !['full-page', 'full-width'].includes((_options$appearance2 = options.appearance) !== null && _options$appearance2 !== void 0 ? _options$appearance2 : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
+      if (!['full-page', 'full-width'].includes((_options$appearance2 = options.appearance) !== null && _options$appearance2 !== void 0 ? _options$appearance2 : '')) {
         [];
       }
-      return [{
-        name: 'elementBrowserPmPlugin',
-        plugin: function plugin() {
-          return elementBrowserPmPlugin();
-        }
-      }, {
-        name: 'elementBrowserEditorViewRef',
+      var plugins = [];
+      if (editorExperiment('insert-menu-in-right-rail', true)) {
+        plugins.push({
+          name: 'elementBrowserPmPlugin',
+          plugin: function plugin() {
+            return elementBrowserPmPlugin();
+          }
+        }, {
+          name: 'elementBrowserEditorViewRef',
+          plugin: function plugin() {
+            return new SafePlugin({
+              view: function view(editorView) {
+                // Workaround - need reference to editorView for contextPanel component
+                editorViewRef.current = editorView;
+                return {};
+              }
+            });
+          }
+        });
+      }
+      plugins.push({
+        name: 'toggleInsertBlockPmPlugin',
         plugin: function plugin() {
-          return new SafePlugin({
-            view: function view(editorView) {
-              // Workaround - need reference to editorView for contextPanel component
-              editorViewRef.current = editorView;
-              return {};
-            }
-          });
+          return toggleInsertBlockPmPlugin();
         }
-      }];
+      });
+      return plugins;
     },
     pluginsOptions: {
       // This is added for basic text transformations experiment.
@@ -265,13 +264,6 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
         return [];
       }
     },
-    usePluginHook: function usePluginHook() {
-      useLayoutEffect(function () {
-        return function () {
-          toggleDropdownMenuOptionsRef.current = null;
-        };
-      }, []);
-    },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
   if (
@@ -293,25 +285,24 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
   }
   return plugin;
 };
-function ToolbarInsertBlockWithInjectionApi(_ref3) {
-  var _ref4, _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
-  var editorView = _ref3.editorView,
-    editorActions = _ref3.editorActions,
-    dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
-    popupsMountPoint = _ref3.popupsMountPoint,
-    popupsBoundariesElement = _ref3.popupsBoundariesElement,
-    popupsScrollableElement = _ref3.popupsScrollableElement,
-    toolbarSize = _ref3.toolbarSize,
-    disabled = _ref3.disabled,
-    isToolbarReducedSpacing = _ref3.isToolbarReducedSpacing,
-    isLastItem = _ref3.isLastItem,
-    providers = _ref3.providers,
-    pluginInjectionApi = _ref3.pluginInjectionApi,
-    options = _ref3.options,
-    registerToggleDropdownMenuOptions = _ref3.registerToggleDropdownMenuOptions,
-    appearance = _ref3.appearance;
+function ToolbarInsertBlockWithInjectionApi(_ref4) {
+  var _ref5, _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
+  var editorView = _ref4.editorView,
+    editorActions = _ref4.editorActions,
+    dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent,
+    popupsMountPoint = _ref4.popupsMountPoint,
+    popupsBoundariesElement = _ref4.popupsBoundariesElement,
+    popupsScrollableElement = _ref4.popupsScrollableElement,
+    toolbarSize = _ref4.toolbarSize,
+    disabled = _ref4.disabled,
+    isToolbarReducedSpacing = _ref4.isToolbarReducedSpacing,
+    isLastItem = _ref4.isLastItem,
+    providers = _ref4.providers,
+    pluginInjectionApi = _ref4.pluginInjectionApi,
+    options = _ref4.options,
+    appearance = _ref4.appearance;
   var buttons = toolbarSizeToButtons(toolbarSize, appearance);
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']),
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock']),
     dateState = _useSharedPluginState.dateState,
     hyperlinkState = _useSharedPluginState.hyperlinkState,
     imageUploadState = _useSharedPluginState.imageUploadState,
@@ -320,7 +311,8 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     blockTypeState = _useSharedPluginState.blockTypeState,
     mediaState = _useSharedPluginState.mediaState,
     typeAheadState = _useSharedPluginState.typeAheadState,
-    placeholderTextState = _useSharedPluginState.placeholderTextState;
+    placeholderTextState = _useSharedPluginState.placeholderTextState,
+    insertBlockState = _useSharedPluginState.insertBlockState;
   var getEmojiProvider = function getEmojiProvider() {
     if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
       return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
@@ -339,6 +331,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     }
   };
   return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
+    showElementBrowser: (insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.showElementBrowser) || false,
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
     isReducedSpacing: isToolbarReducedSpacing,
@@ -355,7 +348,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     placeholderTextEnabled: placeholderTextState && placeholderTextState.allowInserting,
     layoutSectionEnabled: Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.layout),
     expandEnabled: !!options.allowExpand,
-    mediaUploadsEnabled: (_ref4 = mediaState && mediaState.allowsUploads) !== null && _ref4 !== void 0 ? _ref4 : undefined,
+    mediaUploadsEnabled: (_ref5 = mediaState && mediaState.allowsUploads) !== null && _ref5 !== void 0 ? _ref5 : undefined,
     onShowMediaPicker: onShowMediaPicker,
     mediaSupported: !!mediaState,
     imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.imageUpload),
@@ -378,7 +371,6 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     showElementBrowserLink: options.showElementBrowserLink,
     showSeparator: !isLastItem && toolbarSize <= ToolbarSize.S,
-    registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions,
     editorAppearance: options.appearance
   });
 }

package/dist/esm/pm-plugins/toggleInsertBlock.js

@@ -0,0 +1,24 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var toggleInsertBlockPmKey = new PluginKey('toggleInsertBlockPmKey');
+export var toggleInsertBlockPmPlugin = function toggleInsertBlockPmPlugin() {
+  return new SafePlugin({
+    key: toggleInsertBlockPmKey,
+    state: {
+      init: function init() {
+        return {
+          showElementBrowser: false
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(toggleInsertBlockPmKey);
+        if (!meta) {
+          return pluginState;
+        }
+        return {
+          showElementBrowser: !pluginState.showElementBrowser
+        };
+      }
+    }
+  });
+};

package/dist/esm/ui/ElementRail/MainToolBarIcon.js

@@ -64,8 +64,6 @@ export var RightRailIcon = function RightRailIcon(_ref) {
     formatMessage = _useIntl.formatMessage;
   var _useSharedPluginState = useSharedPluginState(api, ['insertBlock']),
     insertBlockState = _useSharedPluginState.insertBlockState;
-
-  // @ts-expect-error
   var isOpen = insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.menuBrowserOpen;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: [wrapperStyles]

package/dist/esm/ui/ToolbarInsertBlock/index.js

@@ -59,6 +59,7 @@ export var tableButtonWrapper = function tableButtonWrapper(_ref) {
     css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\tdisplay: flex;\n\t\t", "\n\t\t", "\n\n  .table-toolbar-btn {\n\t\t\tborder-top-right-radius: ", ";\n\t\t\tborder-bottom-right-radius: ", ";\n\t\t\tmargin-right: ", ";\n\t\t\tpadding: ", ";\n\t\t\t& > span {\n\t\t\t\tmin-width: 16px;\n\t\t\t\tmargin: ", ";\n\t\t\t}\n\t\t}\n\t\t.table-selector-toolbar-btn {\n\t\t\tpadding: ", ";\n\t\t\t& > span {\n\t\t\t\tmargin: ", ";\n\t\t\t\twidth: 16px !important;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t}\n\n\t\t\tborder-top-left-radius: ", " !important;\n\t\t\tborder-bottom-left-radius: ", " !important;\n\t\t}\n\t"])), !isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-selector-toolbar-btn'), !isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-toolbar-btn'), "var(--ds-border-radius-200, 0px)", "var(--ds-border-radius-200, 0px)", "var(--ds-space-025, 1px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius-200, 0px)", "var(--ds-border-radius-200, 0px)")
   );
 };
+
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(ToolbarInsertBlock, _React$PureComponent);
@@ -72,7 +73,6 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     _this = _super.call.apply(_super, [this].concat(_args));
     _defineProperty(_assertThisInitialized(_this), "tableButtonRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "tableSelectorButtonRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "unregisterToggleDropdownMenuOptions", null);
     _defineProperty(_assertThisInitialized(_this), "state", {
       isPlusMenuOpen: false,
       emojiPickerOpen: false,
@@ -205,13 +205,6 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         _this.toggleTableSelector(INPUT_METHOD.TOOLBAR);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
-      _this.unregisterToggleDropdownMenuOptions = _this.props.registerToggleDropdownMenuOptions ? _this.props.registerToggleDropdownMenuOptions(_this.handleClick) : null;
-    });
-    _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
-      var _this$unregisterToggl, _this2;
-      (_this$unregisterToggl = (_this2 = _this).unregisterToggleDropdownMenuOptions) === null || _this$unregisterToggl === void 0 || _this$unregisterToggl.call(_this2);
-    });
     _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
       var _this$props$editorApp;
       /**
@@ -563,11 +556,17 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           isTableSelectorOpenedByKeyboard: false
         });
       }
+      if (this.props.showElementBrowser !== prevProps.showElementBrowser) {
+        this.handleClick();
+        this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
+          isPlusMenuOpen: this.props.showElementBrowser
+        }));
+      }
     }
   }, {
     key: "renderPopup",
     value: function renderPopup() {
-      var _this3 = this;
+      var _this2 = this;
       var emojiPickerOpen = this.state.emojiPickerOpen;
       var _this$props11 = this.props,
         popupsMountPoint = _this$props11.popupsMountPoint,
@@ -585,8 +584,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       }
       var onUnmount = function onUnmount() {
         requestAnimationFrame(function () {
-          var _this3$props$pluginIn;
-          return (_this3$props$pluginIn = _this3.props.pluginInjectionApi) === null || _this3$props$pluginIn === void 0 || (_this3$props$pluginIn = _this3$props$pluginIn.core) === null || _this3$props$pluginIn === void 0 || (_this3$props$pluginIn = _this3$props$pluginIn.actions) === null || _this3$props$pluginIn === void 0 ? void 0 : _this3$props$pluginIn.focus();
+          var _this2$props$pluginIn;
+          return (_this2$props$pluginIn = _this2.props.pluginInjectionApi) === null || _this2$props$pluginIn === void 0 || (_this2$props$pluginIn = _this2$props$pluginIn.core) === null || _this2$props$pluginIn === void 0 || (_this2$props$pluginIn = _this2$props$pluginIn.actions) === null || _this2$props$pluginIn === void 0 ? void 0 : _this2$props$pluginIn.focus();
         });
       };
       return jsx(Popup, {
@@ -648,7 +647,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this,
+      var _this3 = this,
         _tableButton,
         _tableButton2,
         _tableButton3,
@@ -717,7 +716,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           return jsx(ToolbarButton, {
             item: btn,
             testId: String(btn.content),
-            ref: _this4.handleToolbarRef(btn.value.name),
+            ref: _this3.handleToolbarRef(btn.value.name),
             key: btn.value.name,
             spacing: isReducedSpacing ? 'none' : 'default',
             disabled: isDisabled || btn.isDisabled,
@@ -727,7 +726,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
             "aria-label": btn['aria-label'],
             "aria-haspopup": btn['aria-haspopup'],
             "aria-keyshortcuts": btn['aria-keyshortcuts'],
-            onItemClick: _this4.insertToolbarMenuItem
+            onItemClick: _this3.insertToolbarMenuItem
           });
         }), this.props.tableSelectorSupported && (isTableButtonVisible || isTableSizeVisible) && jsx("div", {
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { insertBlockPlugin } from './plugin';
-export type { InsertBlockPlugin, InsertBlockOptions } from './plugin';
+export type { InsertBlockPlugin, InsertBlockOptions, InsertBlockPluginState } from './plugin';
 export type { InsertBlockPluginDependencies } from './types';

package/dist/types/plugin.d.ts

@@ -1,5 +1,7 @@
+import { ToolbarSize } from '@atlaskit/editor-common/types';
 import type { EditorAppearance, NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { InsertBlockPluginDependencies } from './types';
+export declare const toolbarSizeToButtons: (toolbarSize: ToolbarSize, appearance?: EditorAppearance) => 2 | 0 | 3 | 5 | 7;
 export interface InsertBlockOptions {
     allowTables?: boolean;
     allowExpand?: boolean;
@@ -10,11 +12,16 @@ export interface InsertBlockOptions {
     tableSelectorSupported?: boolean;
     appearance?: EditorAppearance;
 }
+export interface InsertBlockPluginState {
+    showElementBrowser: boolean;
+    menuBrowserOpen?: boolean;
+}
 export type InsertBlockPlugin = NextEditorPlugin<'insertBlock', {
     pluginConfiguration: InsertBlockOptions | undefined;
     dependencies: InsertBlockPluginDependencies;
     actions: {
         toggleAdditionalMenu: () => void;
     };
+    sharedState: InsertBlockPluginState | undefined;
 }>;
 export declare const insertBlockPlugin: InsertBlockPlugin;

package/dist/types/pm-plugins/toggleInsertBlock.d.ts

@@ -0,0 +1,8 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+type ToggleInsertBlockPmPluginState = {
+    showElementBrowser: boolean;
+};
+export declare const toggleInsertBlockPmKey: PluginKey<ToggleInsertBlockPmPluginState>;
+export declare const toggleInsertBlockPmPlugin: () => SafePlugin<ToggleInsertBlockPmPluginState>;
+export {};

package/dist/types/ui/ElementRail/index.d.ts

@@ -15,5 +15,6 @@ export declare const InsertMenuRail: ({ editorView, options, api, }: {
         actions: {
             toggleAdditionalMenu: () => void;
         };
+        sharedState: import("../../plugin").InsertBlockPluginState | undefined;
     }> | undefined;
 }) => JSX.Element;

package/dist/types/ui/ToolbarInsertBlock/index.d.ts

@@ -10,17 +10,13 @@ export declare const tableButtonWrapper: ({ isTableSelectorOpen, isButtonDisable
     isTableSelectorOpen: boolean;
     isButtonDisabled: boolean | undefined;
 }) => import("@emotion/react").SerializedStyles;
-type InternalActions = {
-    registerToggleDropdownMenuOptions?: (cb: () => void) => () => void;
-};
-export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps & InternalActions, State> {
+export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps, State> {
     private dropdownButtonRef?;
     private emojiButtonRef?;
     private mediaButtonRef?;
     private plusButtonRef?;
     private tableButtonRef;
     private tableSelectorButtonRef;
-    private unregisterToggleDropdownMenuOptions;
     state: State;
     static getDerivedStateFromProps(props: Props & WrappedComponentProps, state: State): State | null;
     componentDidUpdate(prevProps: Props): void;
@@ -38,8 +34,6 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     private handleSelectedTableSize;
     private handleTableSelectorPressEscape;
     private handleTableSelectorClickOutside;
-    componentDidMount: () => void;
-    componentWillUnmount: () => void;
     render(): jsx.JSX.Element | null;
     private handleClick;
     private handleOpenByKeyboard;
@@ -63,7 +57,7 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     private insertToolbarMenuItem;
     private insertInsertMenuItem;
 }
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps & InternalActions>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps & InternalActions>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
 export default _default;

package/dist/types/ui/ToolbarInsertBlock/types.d.ts

@@ -10,6 +10,7 @@ import type { InsertBlockPlugin } from '../../index';
 import type { BlockMenuItem } from './create-items';
 export interface Props {
     buttons: number;
+    showElementBrowser: boolean;
     isReducedSpacing: boolean;
     isDisabled?: boolean;
     isTypeAheadAllowed?: boolean;

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +1,3 @@
 export { insertBlockPlugin } from './plugin';
-export type { InsertBlockPlugin, InsertBlockOptions } from './plugin';
+export type { InsertBlockPlugin, InsertBlockOptions, InsertBlockPluginState } from './plugin';
 export type { InsertBlockPluginDependencies } from './types';

package/dist/types-ts4.5/plugin.d.ts

@@ -1,5 +1,7 @@
+import { ToolbarSize } from '@atlaskit/editor-common/types';
 import type { EditorAppearance, NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { InsertBlockPluginDependencies } from './types';
+export declare const toolbarSizeToButtons: (toolbarSize: ToolbarSize, appearance?: EditorAppearance) => 2 | 0 | 3 | 5 | 7;
 export interface InsertBlockOptions {
     allowTables?: boolean;
     allowExpand?: boolean;
@@ -10,11 +12,16 @@ export interface InsertBlockOptions {
     tableSelectorSupported?: boolean;
     appearance?: EditorAppearance;
 }
+export interface InsertBlockPluginState {
+    showElementBrowser: boolean;
+    menuBrowserOpen?: boolean;
+}
 export type InsertBlockPlugin = NextEditorPlugin<'insertBlock', {
     pluginConfiguration: InsertBlockOptions | undefined;
     dependencies: InsertBlockPluginDependencies;
     actions: {
         toggleAdditionalMenu: () => void;
     };
+    sharedState: InsertBlockPluginState | undefined;
 }>;
 export declare const insertBlockPlugin: InsertBlockPlugin;

package/dist/types-ts4.5/pm-plugins/toggleInsertBlock.d.ts

@@ -0,0 +1,8 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+type ToggleInsertBlockPmPluginState = {
+    showElementBrowser: boolean;
+};
+export declare const toggleInsertBlockPmKey: PluginKey<ToggleInsertBlockPmPluginState>;
+export declare const toggleInsertBlockPmPlugin: () => SafePlugin<ToggleInsertBlockPmPluginState>;
+export {};

package/dist/types-ts4.5/ui/ElementRail/index.d.ts

@@ -15,5 +15,6 @@ export declare const InsertMenuRail: ({ editorView, options, api, }: {
         actions: {
             toggleAdditionalMenu: () => void;
         };
+        sharedState: import("../../plugin").InsertBlockPluginState | undefined;
     }> | undefined;
 }) => JSX.Element;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/index.d.ts

@@ -10,17 +10,13 @@ export declare const tableButtonWrapper: ({ isTableSelectorOpen, isButtonDisable
     isTableSelectorOpen: boolean;
     isButtonDisabled: boolean | undefined;
 }) => import("@emotion/react").SerializedStyles;
-type InternalActions = {
-    registerToggleDropdownMenuOptions?: (cb: () => void) => () => void;
-};
-export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps & InternalActions, State> {
+export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps, State> {
     private dropdownButtonRef?;
     private emojiButtonRef?;
     private mediaButtonRef?;
     private plusButtonRef?;
     private tableButtonRef;
     private tableSelectorButtonRef;
-    private unregisterToggleDropdownMenuOptions;
     state: State;
     static getDerivedStateFromProps(props: Props & WrappedComponentProps, state: State): State | null;
     componentDidUpdate(prevProps: Props): void;
@@ -38,8 +34,6 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     private handleSelectedTableSize;
     private handleTableSelectorPressEscape;
     private handleTableSelectorClickOutside;
-    componentDidMount: () => void;
-    componentWillUnmount: () => void;
     render(): jsx.JSX.Element | null;
     private handleClick;
     private handleOpenByKeyboard;
@@ -63,7 +57,7 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     private insertToolbarMenuItem;
     private insertInsertMenuItem;
 }
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps & InternalActions>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps & InternalActions>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
 export default _default;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/types.d.ts

@@ -10,6 +10,7 @@ import type { InsertBlockPlugin } from '../../index';
 import type { BlockMenuItem } from './create-items';
 export interface Props {
     buttons: number;
+    showElementBrowser: boolean;
     isReducedSpacing: boolean;
     isDisabled?: boolean;
     isTypeAheadAllowed?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "2.2.12",
+	"version": "2.3.1",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,42 +32,42 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.2.0",
-		"@atlaskit/editor-common": "^93.1.0",
-		"@atlaskit/editor-plugin-analytics": "^1.8.0",
-		"@atlaskit/editor-plugin-block-type": "^3.15.0",
-		"@atlaskit/editor-plugin-code-block": "^3.4.0",
-		"@atlaskit/editor-plugin-date": "^2.3.0",
-		"@atlaskit/editor-plugin-emoji": "^2.6.0",
-		"@atlaskit/editor-plugin-expand": "^2.8.0",
-		"@atlaskit/editor-plugin-extension": "^1.14.0",
+		"@atlaskit/editor-common": "^93.4.0",
+		"@atlaskit/editor-plugin-analytics": "^1.9.0",
+		"@atlaskit/editor-plugin-block-type": "^3.16.0",
+		"@atlaskit/editor-plugin-code-block": "^3.5.0",
+		"@atlaskit/editor-plugin-date": "^2.4.0",
+		"@atlaskit/editor-plugin-emoji": "^2.7.0",
+		"@atlaskit/editor-plugin-expand": "^2.9.0",
+		"@atlaskit/editor-plugin-extension": "^1.15.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
-		"@atlaskit/editor-plugin-hyperlink": "^3.0.0",
+		"@atlaskit/editor-plugin-hyperlink": "^3.1.0",
 		"@atlaskit/editor-plugin-image-upload": "^1.2.0",
-		"@atlaskit/editor-plugin-layout": "^1.8.0",
-		"@atlaskit/editor-plugin-media": "^1.34.0",
-		"@atlaskit/editor-plugin-media-insert": "^3.1.0",
-		"@atlaskit/editor-plugin-mentions": "^2.7.0",
-		"@atlaskit/editor-plugin-panel": "^2.5.0",
-		"@atlaskit/editor-plugin-placeholder-text": "^1.7.0",
+		"@atlaskit/editor-plugin-layout": "^1.9.0",
+		"@atlaskit/editor-plugin-media": "^1.35.0",
+		"@atlaskit/editor-plugin-media-insert": "^3.2.0",
+		"@atlaskit/editor-plugin-mentions": "^2.8.0",
+		"@atlaskit/editor-plugin-panel": "^2.6.0",
+		"@atlaskit/editor-plugin-placeholder-text": "^1.8.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^2.0.0",
 		"@atlaskit/editor-plugin-quick-insert": "^1.4.0",
-		"@atlaskit/editor-plugin-rule": "^1.8.0",
-		"@atlaskit/editor-plugin-status": "^2.4.0",
-		"@atlaskit/editor-plugin-table": "^7.28.0",
-		"@atlaskit/editor-plugin-tasks-and-decisions": "^2.9.0",
-		"@atlaskit/editor-plugin-type-ahead": "^1.8.0",
+		"@atlaskit/editor-plugin-rule": "^1.9.0",
+		"@atlaskit/editor-plugin-status": "^2.5.0",
+		"@atlaskit/editor-plugin-table": "^7.29.0",
+		"@atlaskit/editor-plugin-tasks-and-decisions": "^2.11.0",
+		"@atlaskit/editor-plugin-type-ahead": "^1.9.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/emoji": "^67.8.0",
 		"@atlaskit/heading": "2.4.6",
-		"@atlaskit/icon": "^22.21.0",
+		"@atlaskit/icon": "^22.22.0",
 		"@atlaskit/icon-lab": "^1.0.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.3.0",
 		"@atlaskit/tokens": "^2.0.0",
-		"@atlaskit/tooltip": "18.8.2",
+		"@atlaskit/tooltip": "18.8.3",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",