@atlaskit/editor-plugin-insert-block 1.11.1 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 1.12.0
+
+### Minor Changes
+
+- [#137041](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137041)
+  [`060aff106c5ac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/060aff106c5ac) -
+  Add new experiment for insert menu in right rail, allow right menu to be opened from main toolbar
+  '+' button
+
+### Patch Changes
+
+- [#137041](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137041)
+  [`060aff106c5ac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/060aff106c5ac) -
+  Add insert-right-rail experiment and reimplement right rail logic
+
 ## 1.11.1
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -17,6 +17,8 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _consts = require("@atlaskit/editor-plugin-block-type/consts");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _switch = _interopRequireDefault(require("./assets/switch"));
+var _elementBrowser = require("./pm-plugins/elementBrowser");
+var _ElementRail = require("./ui/ElementRail");
 var _templateOptions = require("./ui/templateOptions");
 var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
 var _transformOptions = require("./ui/transformOptions");
@@ -110,7 +112,7 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
     name: 'insertBlock',
     component: primaryToolbarComponent
   });
-  return {
+  var plugin = {
     name: 'insertBlock',
     actions: {
       toggleAdditionalMenu: function toggleAdditionalMenu() {
@@ -121,6 +123,17 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
         toggle();
       }
     },
+    pmPlugins: function pmPlugins() {
+      if (!(0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
+        [];
+      }
+      return [{
+        name: 'elementBrowserPmPlugin',
+        plugin: function plugin() {
+          return (0, _elementBrowser.elementBrowserPmPlugin)();
+        }
+      }];
+    },
     pluginsOptions: {
       // This is added for basic text transformations experiment.
       // This may not be the most ideal plugin to add this to, but it is suitable for experiment purpose
@@ -201,6 +214,20 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
     },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
+  if ((0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
+    plugin.pluginsOptions.contextPanel = function (state) {
+      // api.getSharedState() will have an outdated reference to editorState on first mount of this component
+      // so instead just rely on plugin key as we don't need to be reactive to changes here
+      var pluginState = _elementBrowser.elementBrowserPmKey.getState(state);
+      if (pluginState !== null && pluginState !== void 0 && pluginState.menuBrowserOpen) {
+        return /*#__PURE__*/_react.default.createElement(_ElementRail.InsertMenuRail, {
+          api: api
+        });
+      }
+      return;
+    };
+  }
+  return plugin;
 };
 function ToolbarInsertBlockWithInjectionApi(_ref3) {
   var _ref4, _ref5, _pluginInjectionApi$i, _pluginInjectionApi$c, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleInsertMenuRightRail = void 0;
+var _elementBrowser = require("./elementBrowser");
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+var toggleInsertMenuRightRail = exports.toggleInsertMenuRightRail = function toggleInsertMenuRightRail(tr) {
+  return tr.setMeta(_elementBrowser.elementBrowserPmKey, {
+    update: true
+  });
+};

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.elementBrowserPmPlugin = exports.elementBrowserPmKey = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+var elementBrowserPmKey = exports.elementBrowserPmKey = new _state.PluginKey('elementBrowserPmPlugin');
+
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+var elementBrowserPmPlugin = exports.elementBrowserPmPlugin = function elementBrowserPmPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: elementBrowserPmKey,
+    state: {
+      init: function init() {
+        return {
+          menuBrowserOpen: false
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(elementBrowserPmKey);
+        if (!meta) {
+          return pluginState;
+        }
+        return {
+          menuBrowserOpen: !pluginState.menuBrowserOpen
+        };
+      }
+    }
+  });
+};

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

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InsertMenuRail = void 0;
+var _react = _interopRequireDefault(require("react"));
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+var InsertMenuRail = exports.InsertMenuRail = function InsertMenuRail(_ref) {
+  var api = _ref.api;
+  return /*#__PURE__*/_react.default.createElement("div", null);
+};

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

@@ -26,6 +26,8 @@ var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _picker = require("@atlaskit/emoji/picker");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _commands = require("../../pm-plugins/commands");
 var _blockInsertMenu = require("./block-insert-menu");
 var _createItems3 = require("./create-items");
 var _messages = require("./messages");
@@ -210,10 +212,44 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       (_this$unregisterToggl = (_this2 = _this).unregisterToggleDropdownMenuOptions) === null || _this$unregisterToggl === void 0 || _this$unregisterToggl.call(_this2);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
+      /**
+       * For insert menu in right rail experiment
+       * - Clean up ticket ED-24801
+       */
+      if ((0, _experiments.editorExperiment)('insert-menu-in-right-rail', true, {
+        exposure: true
+      })) {
+        var _this$props$pluginInj;
+        (_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.core.actions.execute(function (_ref3) {
+          var _this$props$pluginInj2;
+          var tr = _ref3.tr;
+          (0, _commands.toggleInsertMenuRightRail)(tr);
+          (_this$props$pluginInj2 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.contextPanel) === null || _this$props$pluginInj2 === void 0 || _this$props$pluginInj2.actions.applyChange(tr);
+          return tr;
+        });
+        return;
+      }
       _this.togglePlusMenuVisibility();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenByKeyboard", function (event) {
       if (event.key === 'Enter' || event.key === ' ') {
+        /**
+         * For insert menu in right rail experiment
+         * - Clean up ticket ED-24801
+         */
+        if ((0, _experiments.editorExperiment)('insert-menu-in-right-rail', true, {
+          exposure: true
+        })) {
+          var _this$props$pluginInj3;
+          (_this$props$pluginInj3 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj3 === void 0 || _this$props$pluginInj3.core.actions.execute(function (_ref4) {
+            var _this$props$pluginInj4;
+            var tr = _ref4.tr;
+            (0, _commands.toggleInsertMenuRightRail)(tr);
+            (_this$props$pluginInj4 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj4 === void 0 || (_this$props$pluginInj4 = _this$props$pluginInj4.contextPanel) === null || _this$props$pluginInj4 === void 0 || _this$props$pluginInj4.actions.applyChange(tr);
+            return tr;
+          });
+          return;
+        }
         _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
           isOpenedByKeyboard: true
         }));
@@ -382,9 +418,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       var pluginInjectionApi = _this.props.pluginInjectionApi;
       pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c7 = pluginInjectionApi.core) === null || _pluginInjectionApi$c7 === void 0 || _pluginInjectionApi$c7.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onItemActivated", function (_ref3) {
-      var item = _ref3.item,
-        inputMethod = _ref3.inputMethod;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onItemActivated", function (_ref5) {
+      var item = _ref5.item,
+        inputMethod = _ref5.inputMethod;
       var _this$props10 = _this.props,
         editorView = _this$props10.editorView,
         editorActions = _this$props10.editorActions,
@@ -474,8 +510,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         inputMethod: _analytics.INPUT_METHOD.TOOLBAR
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertInsertMenuItem", function (_ref4) {
-      var item = _ref4.item;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertInsertMenuItem", function (_ref6) {
+      var item = _ref6.item;
       return _this.onItemActivated({
         item: item,
         inputMethod: _analytics.INPUT_METHOD.INSERT_MENU
@@ -521,8 +557,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         popupsScrollableElement = _this$props11.popupsScrollableElement,
         emojiProvider = _this$props11.emojiProvider,
         replacePlusMenuWithElementBrowser = _this$props11.replacePlusMenuWithElementBrowser;
-      var dropdownEmoji = this.state.dropdownItems.some(function (_ref5) {
-        var name = _ref5.value.name;
+      var dropdownEmoji = this.state.dropdownItems.some(function (_ref7) {
+        var name = _ref7.value.name;
         return name === 'emoji';
       });
       var dropDownButtonRef = replacePlusMenuWithElementBrowser ? this.plusButtonRef : this.dropdownButtonRef;
@@ -611,7 +647,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         _tableSelectorButton6,
         _this$props$isDisable,
         _this$props$replacePl,
-        _this$props$pluginInj;
+        _this$props$pluginInj5;
       var _this$state2 = this.state,
         buttons = _this$state2.buttons,
         dropdownItems = _this$state2.dropdownItems,
@@ -620,12 +656,12 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       var _this$props13 = this.props,
         isDisabled = _this$props13.isDisabled,
         isReducedSpacing = _this$props13.isReducedSpacing;
-      var isTableButtonVisible = buttons.some(function (_ref6) {
-        var value = _ref6.value;
+      var isTableButtonVisible = buttons.some(function (_ref8) {
+        var value = _ref8.value;
         return value.name === 'table';
       });
-      var isTableSizeVisible = buttons.some(function (_ref7) {
-        var value = _ref7.value;
+      var isTableSizeVisible = buttons.some(function (_ref9) {
+        var value = _ref9.value;
         return value.name === 'table selector';
       });
       if (buttons.length === 0 && dropdownItems.length === 0) {
@@ -739,7 +775,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           replacePlusMenuWithElementBrowser: (_this$props$replacePl = this.props.replacePlusMenuWithElementBrowser) !== null && _this$props$replacePl !== void 0 ? _this$props$replacePl : false,
           showElementBrowserLink: this.props.showElementBrowserLink || false,
           pluginInjectionApi: this.props.pluginInjectionApi
-        })), !((_this$props$pluginInj = this.props.pluginInjectionApi) !== null && _this$props$pluginInj !== void 0 && _this$props$pluginInj.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+        })), !((_this$props$pluginInj5 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj5 !== void 0 && _this$props$pluginInj5.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         (0, _react2.jsx)("span", {
           css: _styles.separatorStyles

package/dist/es2019/plugin.js

@@ -9,6 +9,8 @@ import { getWrappingOptions } from '@atlaskit/editor-common/utils';
 import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import SwitchIcon from './assets/switch';
+import { elementBrowserPmKey, elementBrowserPmPlugin } from './pm-plugins/elementBrowser';
+import { InsertMenuRail } from './ui/ElementRail';
 import { templateOptions } from './ui/templateOptions';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 import { transformationOptions } from './ui/transformOptions';
@@ -99,7 +101,7 @@ export const insertBlockPlugin = ({
     name: 'insertBlock',
     component: primaryToolbarComponent
   });
-  return {
+  const plugin = {
     name: 'insertBlock',
     actions: {
       toggleAdditionalMenu: () => {
@@ -110,6 +112,15 @@ export const insertBlockPlugin = ({
         toggle();
       }
     },
+    pmPlugins: () => {
+      if (!editorExperiment('insert-menu-in-right-rail', true)) {
+        [];
+      }
+      return [{
+        name: 'elementBrowserPmPlugin',
+        plugin: () => elementBrowserPmPlugin()
+      }];
+    },
     pluginsOptions: {
       // This is added for basic text transformations experiment.
       // This may not be the most ideal plugin to add this to, but it is suitable for experiment purpose
@@ -194,6 +205,20 @@ export const insertBlockPlugin = ({
     },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
+  if (editorExperiment('insert-menu-in-right-rail', true)) {
+    plugin.pluginsOptions.contextPanel = state => {
+      // api.getSharedState() will have an outdated reference to editorState on first mount of this component
+      // so instead just rely on plugin key as we don't need to be reactive to changes here
+      const pluginState = elementBrowserPmKey.getState(state);
+      if (pluginState !== null && pluginState !== void 0 && pluginState.menuBrowserOpen) {
+        return /*#__PURE__*/React.createElement(InsertMenuRail, {
+          api: api
+        });
+      }
+      return;
+    };
+  }
+  return plugin;
 };
 function ToolbarInsertBlockWithInjectionApi({
   editorView,

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

@@ -0,0 +1,11 @@
+import { elementBrowserPmKey } from './elementBrowser';
+
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export const toggleInsertMenuRightRail = tr => {
+  return tr.setMeta(elementBrowserPmKey, {
+    update: true
+  });
+};

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

@@ -0,0 +1,31 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export const elementBrowserPmKey = new PluginKey('elementBrowserPmPlugin');
+
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export const elementBrowserPmPlugin = () => new SafePlugin({
+  key: elementBrowserPmKey,
+  state: {
+    init() {
+      return {
+        menuBrowserOpen: false
+      };
+    },
+    apply(tr, pluginState) {
+      const meta = tr.getMeta(elementBrowserPmKey);
+      if (!meta) {
+        return pluginState;
+      }
+      return {
+        menuBrowserOpen: !pluginState.menuBrowserOpen
+      };
+    }
+  }
+});

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

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export const InsertMenuRail = ({
+  api
+}) => {
+  return /*#__PURE__*/React.createElement("div", null);
+};

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

@@ -16,6 +16,8 @@ import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlask
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
 import * as colors from '@atlaskit/theme/colors';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { toggleInsertMenuRightRail } from '../../pm-plugins/commands';
 import { BlockInsertMenu } from './block-insert-menu';
 import { createItems } from './create-items';
 import { messages } from './messages';
@@ -208,10 +210,46 @@ export class ToolbarInsertBlock extends React.PureComponent {
       (_this$unregisterToggl = this.unregisterToggleDropdownMenuOptions) === null || _this$unregisterToggl === void 0 ? void 0 : _this$unregisterToggl.call(this);
     });
     _defineProperty(this, "handleClick", () => {
+      /**
+       * For insert menu in right rail experiment
+       * - Clean up ticket ED-24801
+       */
+      if (editorExperiment('insert-menu-in-right-rail', true, {
+        exposure: true
+      })) {
+        var _this$props$pluginInj;
+        (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.core.actions.execute(({
+          tr
+        }) => {
+          var _this$props$pluginInj2, _this$props$pluginInj3;
+          toggleInsertMenuRightRail(tr);
+          (_this$props$pluginInj2 = this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.contextPanel) === null || _this$props$pluginInj3 === void 0 ? void 0 : _this$props$pluginInj3.actions.applyChange(tr);
+          return tr;
+        });
+        return;
+      }
       this.togglePlusMenuVisibility();
     });
     _defineProperty(this, "handleOpenByKeyboard", event => {
       if (event.key === 'Enter' || event.key === ' ') {
+        /**
+         * For insert menu in right rail experiment
+         * - Clean up ticket ED-24801
+         */
+        if (editorExperiment('insert-menu-in-right-rail', true, {
+          exposure: true
+        })) {
+          var _this$props$pluginInj4;
+          (_this$props$pluginInj4 = this.props.pluginInjectionApi) === null || _this$props$pluginInj4 === void 0 ? void 0 : _this$props$pluginInj4.core.actions.execute(({
+            tr
+          }) => {
+            var _this$props$pluginInj5, _this$props$pluginInj6;
+            toggleInsertMenuRightRail(tr);
+            (_this$props$pluginInj5 = this.props.pluginInjectionApi) === null || _this$props$pluginInj5 === void 0 ? void 0 : (_this$props$pluginInj6 = _this$props$pluginInj5.contextPanel) === null || _this$props$pluginInj6 === void 0 ? void 0 : _this$props$pluginInj6.actions.applyChange(tr);
+            return tr;
+          });
+          return;
+        }
         this.setState({
           ...this.state,
           isOpenedByKeyboard: true
@@ -590,8 +628,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
     }
     const onUnmount = () => {
       requestAnimationFrame(() => {
-        var _this$props$pluginInj, _this$props$pluginInj2, _this$props$pluginInj3;
-        return (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.core) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.actions) === null || _this$props$pluginInj3 === void 0 ? void 0 : _this$props$pluginInj3.focus();
+        var _this$props$pluginInj7, _this$props$pluginInj8, _this$props$pluginInj9;
+        return (_this$props$pluginInj7 = this.props.pluginInjectionApi) === null || _this$props$pluginInj7 === void 0 ? void 0 : (_this$props$pluginInj8 = _this$props$pluginInj7.core) === null || _this$props$pluginInj8 === void 0 ? void 0 : (_this$props$pluginInj9 = _this$props$pluginInj8.actions) === null || _this$props$pluginInj9 === void 0 ? void 0 : _this$props$pluginInj9.focus();
       });
     };
     return jsx(Popup, {
@@ -651,7 +689,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
     });
   }
   render() {
-    var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$props$replacePl, _this$props$pluginInj4;
+    var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$props$replacePl, _this$props$pluginInj10;
     const {
       buttons,
       dropdownItems,
@@ -770,7 +808,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
         replacePlusMenuWithElementBrowser: (_this$props$replacePl = this.props.replacePlusMenuWithElementBrowser) !== null && _this$props$replacePl !== void 0 ? _this$props$replacePl : false,
         showElementBrowserLink: this.props.showElementBrowserLink || false,
         pluginInjectionApi: this.props.pluginInjectionApi
-      })), !((_this$props$pluginInj4 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj4 !== void 0 && _this$props$pluginInj4.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+      })), !((_this$props$pluginInj10 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj10 !== void 0 && _this$props$pluginInj10.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       jsx("span", {
         css: separatorStyles

package/dist/esm/plugin.js

@@ -9,6 +9,8 @@ import { getWrappingOptions } from '@atlaskit/editor-common/utils';
 import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import SwitchIcon from './assets/switch';
+import { elementBrowserPmKey, elementBrowserPmPlugin } from './pm-plugins/elementBrowser';
+import { InsertMenuRail } from './ui/ElementRail';
 import { templateOptions } from './ui/templateOptions';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 import { transformationOptions } from './ui/transformOptions';
@@ -100,7 +102,7 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
     name: 'insertBlock',
     component: primaryToolbarComponent
   });
-  return {
+  var plugin = {
     name: 'insertBlock',
     actions: {
       toggleAdditionalMenu: function toggleAdditionalMenu() {
@@ -111,6 +113,17 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
         toggle();
       }
     },
+    pmPlugins: function pmPlugins() {
+      if (!editorExperiment('insert-menu-in-right-rail', true)) {
+        [];
+      }
+      return [{
+        name: 'elementBrowserPmPlugin',
+        plugin: function plugin() {
+          return elementBrowserPmPlugin();
+        }
+      }];
+    },
     pluginsOptions: {
       // This is added for basic text transformations experiment.
       // This may not be the most ideal plugin to add this to, but it is suitable for experiment purpose
@@ -191,6 +204,20 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
     },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
+  if (editorExperiment('insert-menu-in-right-rail', true)) {
+    plugin.pluginsOptions.contextPanel = function (state) {
+      // api.getSharedState() will have an outdated reference to editorState on first mount of this component
+      // so instead just rely on plugin key as we don't need to be reactive to changes here
+      var pluginState = elementBrowserPmKey.getState(state);
+      if (pluginState !== null && pluginState !== void 0 && pluginState.menuBrowserOpen) {
+        return /*#__PURE__*/React.createElement(InsertMenuRail, {
+          api: api
+        });
+      }
+      return;
+    };
+  }
+  return plugin;
 };
 function ToolbarInsertBlockWithInjectionApi(_ref3) {
   var _ref4, _ref5, _pluginInjectionApi$i, _pluginInjectionApi$c, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;

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

@@ -0,0 +1,11 @@
+import { elementBrowserPmKey } from './elementBrowser';
+
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export var toggleInsertMenuRightRail = function toggleInsertMenuRightRail(tr) {
+  return tr.setMeta(elementBrowserPmKey, {
+    update: true
+  });
+};

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

@@ -0,0 +1,33 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export var elementBrowserPmKey = new PluginKey('elementBrowserPmPlugin');
+
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export var elementBrowserPmPlugin = function elementBrowserPmPlugin() {
+  return new SafePlugin({
+    key: elementBrowserPmKey,
+    state: {
+      init: function init() {
+        return {
+          menuBrowserOpen: false
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(elementBrowserPmKey);
+        if (!meta) {
+          return pluginState;
+        }
+        return {
+          menuBrowserOpen: !pluginState.menuBrowserOpen
+        };
+      }
+    }
+  });
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export var InsertMenuRail = function InsertMenuRail(_ref) {
+  var api = _ref.api;
+  return /*#__PURE__*/React.createElement("div", null);
+};

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

@@ -32,6 +32,8 @@ import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlask
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
 import * as colors from '@atlaskit/theme/colors';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { toggleInsertMenuRightRail } from '../../pm-plugins/commands';
 import { BlockInsertMenu } from './block-insert-menu';
 import { createItems } from './create-items';
 import { messages } from './messages';
@@ -201,10 +203,44 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       (_this$unregisterToggl = (_this2 = _this).unregisterToggleDropdownMenuOptions) === null || _this$unregisterToggl === void 0 || _this$unregisterToggl.call(_this2);
     });
     _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
+      /**
+       * For insert menu in right rail experiment
+       * - Clean up ticket ED-24801
+       */
+      if (editorExperiment('insert-menu-in-right-rail', true, {
+        exposure: true
+      })) {
+        var _this$props$pluginInj;
+        (_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.core.actions.execute(function (_ref3) {
+          var _this$props$pluginInj2;
+          var tr = _ref3.tr;
+          toggleInsertMenuRightRail(tr);
+          (_this$props$pluginInj2 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.contextPanel) === null || _this$props$pluginInj2 === void 0 || _this$props$pluginInj2.actions.applyChange(tr);
+          return tr;
+        });
+        return;
+      }
       _this.togglePlusMenuVisibility();
     });
     _defineProperty(_assertThisInitialized(_this), "handleOpenByKeyboard", function (event) {
       if (event.key === 'Enter' || event.key === ' ') {
+        /**
+         * For insert menu in right rail experiment
+         * - Clean up ticket ED-24801
+         */
+        if (editorExperiment('insert-menu-in-right-rail', true, {
+          exposure: true
+        })) {
+          var _this$props$pluginInj3;
+          (_this$props$pluginInj3 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj3 === void 0 || _this$props$pluginInj3.core.actions.execute(function (_ref4) {
+            var _this$props$pluginInj4;
+            var tr = _ref4.tr;
+            toggleInsertMenuRightRail(tr);
+            (_this$props$pluginInj4 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj4 === void 0 || (_this$props$pluginInj4 = _this$props$pluginInj4.contextPanel) === null || _this$props$pluginInj4 === void 0 || _this$props$pluginInj4.actions.applyChange(tr);
+            return tr;
+          });
+          return;
+        }
         _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
           isOpenedByKeyboard: true
         }));
@@ -373,9 +409,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       var pluginInjectionApi = _this.props.pluginInjectionApi;
       pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c7 = pluginInjectionApi.core) === null || _pluginInjectionApi$c7 === void 0 || _pluginInjectionApi$c7.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
     });
-    _defineProperty(_assertThisInitialized(_this), "onItemActivated", function (_ref3) {
-      var item = _ref3.item,
-        inputMethod = _ref3.inputMethod;
+    _defineProperty(_assertThisInitialized(_this), "onItemActivated", function (_ref5) {
+      var item = _ref5.item,
+        inputMethod = _ref5.inputMethod;
       var _this$props10 = _this.props,
         editorView = _this$props10.editorView,
         editorActions = _this$props10.editorActions,
@@ -465,8 +501,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         inputMethod: INPUT_METHOD.TOOLBAR
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "insertInsertMenuItem", function (_ref4) {
-      var item = _ref4.item;
+    _defineProperty(_assertThisInitialized(_this), "insertInsertMenuItem", function (_ref6) {
+      var item = _ref6.item;
       return _this.onItemActivated({
         item: item,
         inputMethod: INPUT_METHOD.INSERT_MENU
@@ -512,8 +548,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         popupsScrollableElement = _this$props11.popupsScrollableElement,
         emojiProvider = _this$props11.emojiProvider,
         replacePlusMenuWithElementBrowser = _this$props11.replacePlusMenuWithElementBrowser;
-      var dropdownEmoji = this.state.dropdownItems.some(function (_ref5) {
-        var name = _ref5.value.name;
+      var dropdownEmoji = this.state.dropdownItems.some(function (_ref7) {
+        var name = _ref7.value.name;
         return name === 'emoji';
       });
       var dropDownButtonRef = replacePlusMenuWithElementBrowser ? this.plusButtonRef : this.dropdownButtonRef;
@@ -602,7 +638,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         _tableSelectorButton6,
         _this$props$isDisable,
         _this$props$replacePl,
-        _this$props$pluginInj;
+        _this$props$pluginInj5;
       var _this$state2 = this.state,
         buttons = _this$state2.buttons,
         dropdownItems = _this$state2.dropdownItems,
@@ -611,12 +647,12 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props13 = this.props,
         isDisabled = _this$props13.isDisabled,
         isReducedSpacing = _this$props13.isReducedSpacing;
-      var isTableButtonVisible = buttons.some(function (_ref6) {
-        var value = _ref6.value;
+      var isTableButtonVisible = buttons.some(function (_ref8) {
+        var value = _ref8.value;
         return value.name === 'table';
       });
-      var isTableSizeVisible = buttons.some(function (_ref7) {
-        var value = _ref7.value;
+      var isTableSizeVisible = buttons.some(function (_ref9) {
+        var value = _ref9.value;
         return value.name === 'table selector';
       });
       if (buttons.length === 0 && dropdownItems.length === 0) {
@@ -730,7 +766,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           replacePlusMenuWithElementBrowser: (_this$props$replacePl = this.props.replacePlusMenuWithElementBrowser) !== null && _this$props$replacePl !== void 0 ? _this$props$replacePl : false,
           showElementBrowserLink: this.props.showElementBrowserLink || false,
           pluginInjectionApi: this.props.pluginInjectionApi
-        })), !((_this$props$pluginInj = this.props.pluginInjectionApi) !== null && _this$props$pluginInj !== void 0 && _this$props$pluginInj.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+        })), !((_this$props$pluginInj5 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj5 !== void 0 && _this$props$pluginInj5.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         jsx("span", {
           css: separatorStyles

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

@@ -0,0 +1,6 @@
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export declare const toggleInsertMenuRightRail: (tr: Transaction) => Transaction;

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

@@ -0,0 +1,16 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+type ElementBrowserPmPluginState = {
+    menuBrowserOpen: boolean;
+};
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export declare const elementBrowserPmKey: PluginKey<ElementBrowserPmPluginState>;
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export declare const elementBrowserPmPlugin: () => SafePlugin<ElementBrowserPmPluginState>;
+export {};

package/dist/types/types.d.ts

@@ -2,6 +2,7 @@ import type { OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockTypePlugin } from '@atlaskit/editor-plugin-block-type';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
+import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 import type { DatePlugin } from '@atlaskit/editor-plugin-date';
 import type { EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
 import type { ExpandPlugin } from '@atlaskit/editor-plugin-expand';
@@ -43,5 +44,6 @@ export type InsertBlockPluginDependencies = [
     OptionalPlugin<ExtensionPlugin>,
     OptionalPlugin<TasksAndDecisionsPlugin>,
     OptionalPlugin<PrimaryToolbarPlugin>,
-    OptionalPlugin<FeatureFlagsPlugin>
+    OptionalPlugin<FeatureFlagsPlugin>,
+    OptionalPlugin<ContextPanelPlugin>
 ];

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type InsertBlockPlugin } from '../../plugin';
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export declare const InsertMenuRail: ({ api }: {
+    api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"insertBlock", {
+        pluginConfiguration: import("../../plugin").InsertBlockOptions | undefined;
+        dependencies: import("../..").InsertBlockPluginDependencies;
+        actions: {
+            toggleAdditionalMenu: () => void;
+        };
+    }> | undefined;
+}) => JSX.Element;

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

@@ -0,0 +1,6 @@
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export declare const toggleInsertMenuRightRail: (tr: Transaction) => Transaction;

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

@@ -0,0 +1,16 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+type ElementBrowserPmPluginState = {
+    menuBrowserOpen: boolean;
+};
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export declare const elementBrowserPmKey: PluginKey<ElementBrowserPmPluginState>;
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export declare const elementBrowserPmPlugin: () => SafePlugin<ElementBrowserPmPluginState>;
+export {};

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

@@ -2,6 +2,7 @@ import type { OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockTypePlugin } from '@atlaskit/editor-plugin-block-type';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
+import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 import type { DatePlugin } from '@atlaskit/editor-plugin-date';
 import type { EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
 import type { ExpandPlugin } from '@atlaskit/editor-plugin-expand';
@@ -43,5 +44,6 @@ export type InsertBlockPluginDependencies = [
     OptionalPlugin<ExtensionPlugin>,
     OptionalPlugin<TasksAndDecisionsPlugin>,
     OptionalPlugin<PrimaryToolbarPlugin>,
-    OptionalPlugin<FeatureFlagsPlugin>
+    OptionalPlugin<FeatureFlagsPlugin>,
+    OptionalPlugin<ContextPanelPlugin>
 ];

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type InsertBlockPlugin } from '../../plugin';
+/**
+ * For insert menu in right rail experiment
+ * - Clean up ticket ED-24801
+ */
+export declare const InsertMenuRail: ({ api }: {
+    api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"insertBlock", {
+        pluginConfiguration: import("../../plugin").InsertBlockOptions | undefined;
+        dependencies: import("../..").InsertBlockPluginDependencies;
+        actions: {
+            toggleAdditionalMenu: () => void;
+        };
+    }> | undefined;
+}) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "1.11.1",
+	"version": "1.12.0",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",