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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 2.3.0
+
+### Minor Changes
+
+- [`e961ab7307a56`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e961ab7307a56) -
+  Refactored toggle insert block logic
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.2.12
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -1,12 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.insertBlockPlugin = void 0;
-var _react = _interopRequireWildcard(require("react"));
+exports.toolbarSizeToButtons = exports.insertBlockPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _insert = require("@atlaskit/editor-common/insert");
@@ -20,13 +19,12 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _switch = _interopRequireDefault(require("./assets/switch"));
 var _elementBrowser = require("./pm-plugins/elementBrowser");
+var _toggleInsertBlock = require("./pm-plugins/toggleInsertBlock");
 var _ElementRail = require("./ui/ElementRail");
 var _templateOptions = require("./ui/templateOptions");
 var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
 var _transformOptions = require("./ui/transformOptions");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize, appearance) {
+var toolbarSizeToButtons = exports.toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize, appearance) {
   // Different button numbers for full-page to better match full page toolbar breakpoints
   if (appearance === 'full-page' && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes')) {
     switch (toolbarSize) {
@@ -92,18 +90,9 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
   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,
@@ -132,7 +121,6 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
         isLastItem: isLastItem,
         providers: providers,
         options: options,
-        registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions,
         appearance: options.appearance
       });
     };
@@ -150,54 +138,62 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
     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(_toggleInsertBlock.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 : '') || !(0, _experiments.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 = _elementBrowser.elementBrowserPmKey.getState(editorState);
+      var toggleInsertBlockPluginState = _toggleInsertBlock.toggleInsertBlockPmKey.getState(editorState);
+      var elementBrowserPluginState = _elementBrowser.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: (0, _experiments.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 : '') || !(0, _experiments.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 (0, _elementBrowser.elementBrowserPmPlugin)();
-        }
-      }, {
-        name: 'elementBrowserEditorViewRef',
+      var plugins = [];
+      if ((0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
+        plugins.push({
+          name: 'elementBrowserPmPlugin',
+          plugin: function plugin() {
+            return (0, _elementBrowser.elementBrowserPmPlugin)();
+          }
+        }, {
+          name: 'elementBrowserEditorViewRef',
+          plugin: function plugin() {
+            return new _safePlugin.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.SafePlugin({
-            view: function view(editorView) {
-              // Workaround - need reference to editorView for contextPanel component
-              editorViewRef.current = editorView;
-              return {};
-            }
-          });
+          return (0, _toggleInsertBlock.toggleInsertBlockPmPlugin)();
         }
-      }];
+      });
+      return plugins;
     },
     pluginsOptions: {
       // This is added for basic text transformations experiment.
@@ -275,13 +271,6 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
         return [];
       }
     },
-    usePluginHook: function usePluginHook() {
-      (0, _react.useLayoutEffect)(function () {
-        return function () {
-          toggleDropdownMenuOptionsRef.current = null;
-        };
-      }, []);
-    },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
   if (
@@ -303,25 +292,24 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
   }
   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 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock']),
     dateState = _useSharedPluginState.dateState,
     hyperlinkState = _useSharedPluginState.hyperlinkState,
     imageUploadState = _useSharedPluginState.imageUploadState,
@@ -330,7 +318,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);
@@ -349,6 +338,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     }
   };
   return /*#__PURE__*/_react.default.createElement(_ToolbarInsertBlock.default, {
+    showElementBrowser: (insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.showElementBrowser) || false,
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
     isReducedSpacing: isToolbarReducedSpacing,
@@ -365,7 +355,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),
@@ -388,7 +378,6 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     showElementBrowserLink: options.showElementBrowserLink,
     showSeparator: !isLastItem && toolbarSize <= _types.ToolbarSize.S,
-    registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions,
     editorAppearance: options.appearance
   });
 }

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleInsertBlockPmPlugin = exports.toggleInsertBlockPmKey = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var toggleInsertBlockPmKey = exports.toggleInsertBlockPmKey = new _state.PluginKey('toggleInsertBlockPmKey');
+var toggleInsertBlockPmPlugin = exports.toggleInsertBlockPmPlugin = function toggleInsertBlockPmPlugin() {
+  return new _safePlugin.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/cjs/ui/ElementRail/MainToolBarIcon.js

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

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

@@ -68,6 +68,7 @@ var tableButtonWrapper = exports.tableButtonWrapper = function tableButtonWrappe
     (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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
 var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(ToolbarInsertBlock, _React$PureComponent);
@@ -81,7 +82,6 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
     _this = _super.call.apply(_super, [this].concat(_args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableButtonRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableSelectorButtonRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unregisterToggleDropdownMenuOptions", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       isPlusMenuOpen: false,
       emojiPickerOpen: false,
@@ -214,13 +214,6 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         _this.toggleTableSelector(_analytics.INPUT_METHOD.TOOLBAR);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidMount", function () {
-      _this.unregisterToggleDropdownMenuOptions = _this.props.registerToggleDropdownMenuOptions ? _this.props.registerToggleDropdownMenuOptions(_this.handleClick) : null;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillUnmount", function () {
-      var _this$unregisterToggl, _this2;
-      (_this$unregisterToggl = (_this2 = _this).unregisterToggleDropdownMenuOptions) === null || _this$unregisterToggl === void 0 || _this$unregisterToggl.call(_this2);
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
       var _this$props$editorApp;
       /**
@@ -572,11 +565,17 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           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,
@@ -594,8 +593,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       }
       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 (0, _react2.jsx)(_ui.Popup, {
@@ -657,7 +656,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this,
+      var _this3 = this,
         _tableButton,
         _tableButton2,
         _tableButton3,
@@ -726,7 +725,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           return (0, _react2.jsx)(_uiMenu.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,
@@ -736,7 +735,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
             "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) && (0, _react2.jsx)("div", {
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/es2019/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';
-const toolbarSizeToButtons = (toolbarSize, appearance) => {
+export const 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) {
@@ -80,18 +81,9 @@ export const insertBlockPlugin = ({
   api
 }) => {
   var _api$primaryToolbar, _options$appearance4;
-  const toggleDropdownMenuOptionsRef = {
-    current: null
-  };
   const editorViewRef = {
     current: null
   };
-  const registerToggleDropdownMenuOptions = cb => {
-    toggleDropdownMenuOptionsRef.current = cb;
-    return () => {
-      toggleDropdownMenuOptionsRef.current = null;
-    };
-  };
   const primaryToolbarComponent = ({
     editorView,
     editorActions,
@@ -121,7 +113,6 @@ export const insertBlockPlugin = ({
         isLastItem: isLastItem,
         providers: providers,
         options: options,
-        registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions,
         appearance: options.appearance
       });
     };
@@ -139,52 +130,59 @@ export const insertBlockPlugin = ({
     name: 'insertBlock',
     actions: {
       toggleAdditionalMenu: () => {
-        const toggle = toggleDropdownMenuOptionsRef.current;
-        if (!toggle) {
-          return;
-        }
-        toggle();
+        var _api$core;
+        api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+          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: 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;
       }
-      const pluginState = elementBrowserPmKey.getState(editorState);
+      const toggleInsertBlockPluginState = toggleInsertBlockPmKey.getState(editorState);
+      const 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: () => {
       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: () => elementBrowserPmPlugin()
-      }, {
-        name: 'elementBrowserEditorViewRef',
-        plugin: () => {
-          return new SafePlugin({
-            view: editorView => {
-              // Workaround - need reference to editorView for contextPanel component
-              editorViewRef.current = editorView;
-              return {};
-            }
-          });
-        }
-      }];
+      const plugins = [];
+      if (editorExperiment('insert-menu-in-right-rail', true)) {
+        plugins.push({
+          name: 'elementBrowserPmPlugin',
+          plugin: () => elementBrowserPmPlugin()
+        }, {
+          name: 'elementBrowserEditorViewRef',
+          plugin: () => {
+            return new SafePlugin({
+              view: editorView => {
+                // Workaround - need reference to editorView for contextPanel component
+                editorViewRef.current = editorView;
+                return {};
+              }
+            });
+          }
+        });
+      }
+      plugins.push({
+        name: 'toggleInsertBlockPmPlugin',
+        plugin: () => toggleInsertBlockPmPlugin()
+      });
+      return plugins;
     },
     pluginsOptions: {
       // This is added for basic text transformations experiment.
@@ -268,13 +266,6 @@ export const insertBlockPlugin = ({
         return [];
       }
     },
-    usePluginHook: () => {
-      useLayoutEffect(() => {
-        return () => {
-          toggleDropdownMenuOptionsRef.current = null;
-        };
-      }, []);
-    },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
   if (
@@ -310,7 +301,6 @@ function ToolbarInsertBlockWithInjectionApi({
   providers,
   pluginInjectionApi,
   options,
-  registerToggleDropdownMenuOptions,
   appearance
 }) {
   var _ref, _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
@@ -324,8 +314,9 @@ function ToolbarInsertBlockWithInjectionApi({
     blockTypeState,
     mediaState,
     typeAheadState,
-    placeholderTextState
-  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']);
+    placeholderTextState,
+    insertBlockState
+  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock']);
   const getEmojiProvider = () => {
     if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
       return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
@@ -344,6 +335,7 @@ function ToolbarInsertBlockWithInjectionApi({
     }
   };
   return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
+    showElementBrowser: (insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.showElementBrowser) || false,
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
     isReducedSpacing: isToolbarReducedSpacing,
@@ -383,7 +375,6 @@ function ToolbarInsertBlockWithInjectionApi({
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     showElementBrowserLink: options.showElementBrowserLink,
     showSeparator: !isLastItem && toolbarSize <= ToolbarSize.S,
-    registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions,
     editorAppearance: options.appearance
   });
 }

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

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

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

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

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

@@ -71,13 +71,13 @@ css`
 			border-bottom-left-radius: ${"var(--ds-border-radius-200, 0px)"} !important;
 		}
 	`;
+
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class ToolbarInsertBlock extends React.PureComponent {
   constructor(..._args) {
     super(..._args);
     _defineProperty(this, "tableButtonRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "tableSelectorButtonRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "unregisterToggleDropdownMenuOptions", null);
     _defineProperty(this, "state", {
       isPlusMenuOpen: false,
       emojiPickerOpen: false,
@@ -210,13 +210,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
         this.toggleTableSelector(INPUT_METHOD.TOOLBAR);
       }
     });
-    _defineProperty(this, "componentDidMount", () => {
-      this.unregisterToggleDropdownMenuOptions = this.props.registerToggleDropdownMenuOptions ? this.props.registerToggleDropdownMenuOptions(this.handleClick) : null;
-    });
-    _defineProperty(this, "componentWillUnmount", () => {
-      var _this$unregisterToggl;
-      (_this$unregisterToggl = this.unregisterToggleDropdownMenuOptions) === null || _this$unregisterToggl === void 0 ? void 0 : _this$unregisterToggl.call(this);
-    });
     _defineProperty(this, "handleClick", () => {
       var _this$props$editorApp;
       /**
@@ -630,6 +623,13 @@ export class ToolbarInsertBlock extends React.PureComponent {
         isTableSelectorOpenedByKeyboard: false
       });
     }
+    if (this.props.showElementBrowser !== prevProps.showElementBrowser) {
+      this.handleClick();
+      this.setState({
+        ...this.state,
+        isPlusMenuOpen: this.props.showElementBrowser
+      });
+    }
   }
   renderPopup() {
     const {

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.0",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -60,7 +60,7 @@
 		"@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",