@atlaskit/editor-plugin-insert-block 1.14.3 → 1.14.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 1.14.4
+
+### Patch Changes
+
+- [#140550](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140550)
+  [`b4f8f21029b8f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b4f8f21029b8f) -
+  Update main toolbar icon for right rail experiment, add analytics
+- Updated dependencies
+
 ## 1.14.3
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -329,5 +329,13 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     showElementBrowserLink: options.showElementBrowserLink,
     showSeparator: !isLastItem && toolbarSize <= _types.ToolbarSize.S,
     registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions
+    /**
+     * For insert menu in right rail experiment, ignore for now since editorAppearance has been kept
+     * internal due to temporary nature of experiment
+     * - Clean up ticket ED-24801
+     */
+    // @ts-expect-error
+    ,
+    editorAppearance: options.UNSAFE_editorAppearance
   });
 }

package/dist/cjs/ui/ElementBrowser/InsertMenu.js

@@ -169,10 +169,10 @@ var insertMenuWrapper = function insertMenuWrapper(itemCount) {
     return (0, _react2.css)({
       display: 'flex',
       flexDirection: 'column',
-      width: '310px',
+      width: '314px',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       height: 'calc(100% - 32px)',
-      margin: "0 -10px",
+      margin: "0 -12px",
       backgroundColor: "".concat("var(--ds-surface-overlay, ".concat(_colors.N0, ")")),
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       borderRadius: "".concat((0, _theme.borderRadius)(), "px")

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RightRailIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
+var _primitives = require("@atlaskit/primitives");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var wrapperStyles = (0, _primitives.xcss)({
+  width: '32px',
+  height: '32px',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var buttonStyles = (0, _primitives.xcss)({
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: "var(--ds-space-300, 24px)",
+  width: "var(--ds-space-300, 24px)",
+  border: 'none',
+  backgroundColor: 'color.background.neutral',
+  borderRadius: 'border.radius.circle',
+  color: 'color.text',
+  zIndex: 'card',
+  outline: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.pressed'
+  },
+  ':focus': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+  }
+});
+var RightRailIcon = exports.RightRailIcon = function RightRailIcon(_ref) {
+  var onClick = _ref.onClick;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: [wrapperStyles]
+  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent
+    // Re-using insertRightRailTitle for tooltip, both messages are the same
+    , {
+      description: formatMessage(_messages.toolbarInsertBlockMessages.insertRightRailTitle),
+      shortcutOverride: "/"
+    })
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    type: "button",
+    "aria-label": formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
+    xcss: [buttonStyles],
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_add.default, {
+    label: formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
+    size: "medium"
+  }))));
+};

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

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InsertMenuRail = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _new = require("@atlaskit/button/new");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -16,6 +17,8 @@ var _primitives = require("@atlaskit/primitives");
 var _commands = require("../../pm-plugins/commands");
 var _InsertMenu = _interopRequireDefault(require("../ElementBrowser/InsertMenu"));
 var _useInsertMenuRailItems = require("./useInsertMenuRailItems");
+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; }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var panelWrapper = (0, _primitives.xcss)({
@@ -165,6 +168,38 @@ var InsertMenuRail = exports.InsertMenuRail = function InsertMenuRail(_ref) {
       // leaving this blank for now
     }
   };
+  (0, _react.useEffect)(function () {
+    if (!api) {
+      return;
+    }
+    api.core.actions.execute(function (_ref3) {
+      var _api$analytics2;
+      var tr = _ref3.tr;
+      (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
+        action: _analytics.ACTION.OPENED,
+        // @ts-expect-error
+        actionSubject: _analytics.INPUT_METHOD.INSERT_MENU_RIGHT_RAIL,
+        eventType: _analytics.EVENT_TYPE.UI
+      })(tr);
+      return tr;
+    });
+    return function () {
+      if (!api) {
+        return;
+      }
+      api.core.actions.execute(function (_ref4) {
+        var _api$analytics3;
+        var tr = _ref4.tr;
+        (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || _api$analytics3.actions.attachAnalyticsEvent({
+          action: _analytics.ACTION.CLOSED,
+          // @ts-expect-error
+          actionSubject: _analytics.INPUT_METHOD.INSERT_MENU_RIGHT_RAIL,
+          eventType: _analytics.EVENT_TYPE.UI
+        })(tr);
+        return tr;
+      });
+    };
+  }, [api]);
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: panelWrapper
   }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
@@ -181,9 +216,9 @@ var InsertMenuRail = exports.InsertMenuRail = function InsertMenuRail(_ref) {
       if (!api) {
         return;
       }
-      api.core.actions.execute(function (_ref3) {
+      api.core.actions.execute(function (_ref5) {
         var _api$contextPanel;
-        var tr = _ref3.tr;
+        var tr = _ref5.tr;
         (0, _commands.toggleInsertMenuRightRail)(tr);
         (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 || _api$contextPanel.actions.applyChange(tr);
         return tr;

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

@@ -51,7 +51,9 @@ var useInsertMenuRailItems = exports.useInsertMenuRailItems = function useInsert
         availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
         insertMenuItems: options.insertMenuItems,
         schema: editorView.state.schema,
-        numberOfButtons: 10,
+        // numberOfButtons controls what items are returned and eventually display in the insert menu - but it relies on the main toolbar width which
+        // is not easily available here. I've used 7 as it's the value used for most widths see toolbarSizeToButtons
+        numberOfButtons: 7,
         formatMessage: formatMessage,
         isNewMenuEnabled: true
       });

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

@@ -28,6 +28,7 @@ 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 _MainToolBarIcon = require("../ElementRail/MainToolBarIcon");
 var _blockInsertMenu = require("./block-insert-menu");
 var _createItems3 = require("./create-items");
 var _messages = require("./messages");
@@ -219,12 +220,23 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       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 pluginInjectionApi = _this.props.pluginInjectionApi;
+        if (!pluginInjectionApi) {
+          return;
+        }
+        pluginInjectionApi.core.actions.execute(function (_ref3) {
+          var _pluginInjectionApi$c, _pluginInjectionApi$a;
           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);
+          (_pluginInjectionApi$c = pluginInjectionApi.contextPanel) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.applyChange(tr);
+          (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.attachAnalyticsEvent({
+            action: _analytics.ACTION.CLICKED,
+            // @ts-expect-error
+            actionSubject: _analytics.ACTION_SUBJECT.TOOLBAR_BUTTON,
+            // @ts-expect-error
+            actionSubjectId: _analytics.INPUT_METHOD.INSERT_MENU_RIGHT_RAIL,
+            eventType: _analytics.EVENT_TYPE.UI
+          })(tr);
           return tr;
         });
         return;
@@ -240,12 +252,12 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         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 _this$props$pluginInj;
+          (_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.core.actions.execute(function (_ref4) {
+            var _this$props$pluginInj2;
             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);
+            (_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;
@@ -265,9 +277,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleLinkPanel", function (inputMethod) {
-      var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$h;
+      var _pluginInjectionApi$c2, _pluginInjectionApi$c3, _pluginInjectionApi$h;
       var pluginInjectionApi = _this.props.pluginInjectionApi;
-      return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
+      return (_pluginInjectionApi$c2 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c2 !== void 0 ? _pluginInjectionApi$c2 : false;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertMention", function (inputMethod) {
       var _pluginInjectionApi$m, _pluginInjectionApi$m2;
@@ -310,15 +322,15 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
 
         // workaround to solve race condition where cursor is not placed correctly inside table
         queueMicrotask(function () {
-          var _pluginInjectionApi$c3, _pluginInjectionApi$t4;
-          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 || _pluginInjectionApi$c3.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t4 = pluginInjectionApi.table) === null || _pluginInjectionApi$t4 === void 0 ? void 0 : _pluginInjectionApi$t4.commands.insertTableWithSize(rowsCount, colsCount, _analytics.INPUT_METHOD.PICKER));
+          var _pluginInjectionApi$c4, _pluginInjectionApi$t4;
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 || _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t4 = pluginInjectionApi.table) === null || _pluginInjectionApi$t4 === void 0 ? void 0 : _pluginInjectionApi$t4.commands.insertTableWithSize(rowsCount, colsCount, _analytics.INPUT_METHOD.PICKER));
         });
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createDate", function (inputMethod) {
-      var _pluginInjectionApi$c4, _pluginInjectionApi$d;
+      var _pluginInjectionApi$c5, _pluginInjectionApi$d;
       var pluginInjectionApi = _this.props.pluginInjectionApi;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 || _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 || (_pluginInjectionApi$d = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.insertDate({
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c5 = pluginInjectionApi.core) === null || _pluginInjectionApi$c5 === void 0 || _pluginInjectionApi$c5.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 || (_pluginInjectionApi$d = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.insertDate({
         inputMethod: inputMethod
       }));
       return true;
@@ -340,9 +352,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       return true;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createStatus", function (inputMethod) {
-      var _pluginInjectionApi$c5, _pluginInjectionApi$s;
+      var _pluginInjectionApi$c6, _pluginInjectionApi$s;
       var pluginInjectionApi = _this.props.pluginInjectionApi;
-      return Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c5 = pluginInjectionApi.core) === null || _pluginInjectionApi$c5 === void 0 ? void 0 : _pluginInjectionApi$c5.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.status) === null || _pluginInjectionApi$s === void 0 || (_pluginInjectionApi$s = _pluginInjectionApi$s.commands) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.insertStatus(inputMethod)));
+      return Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c6 = pluginInjectionApi.core) === null || _pluginInjectionApi$c6 === void 0 ? void 0 : _pluginInjectionApi$c6.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.status) === null || _pluginInjectionApi$s === void 0 || (_pluginInjectionApi$s = _pluginInjectionApi$s.commands) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.insertStatus(inputMethod)));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openMediaPicker", function (inputMethod) {
       var _this$props5 = _this.props,
@@ -406,17 +418,17 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectedEmoji", function (emojiId) {
-      var _pluginInjectionApi$c6, _pluginInjectionApi$e3;
+      var _pluginInjectionApi$c7, _pluginInjectionApi$e3;
       var pluginInjectionApi = _this.props.pluginInjectionApi;
       _this.props.editorView.focus();
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c6 = pluginInjectionApi.core) === null || _pluginInjectionApi$c6 === void 0 || _pluginInjectionApi$c6.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, _analytics.INPUT_METHOD.PICKER));
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c7 = pluginInjectionApi.core) === null || _pluginInjectionApi$c7 === void 0 || _pluginInjectionApi$c7.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, _analytics.INPUT_METHOD.PICKER));
       _this.toggleEmojiPicker();
       return true;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openElementBrowser", function () {
-      var _pluginInjectionApi$c7, _pluginInjectionApi$q;
+      var _pluginInjectionApi$c8, _pluginInjectionApi$q;
       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);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c8 = pluginInjectionApi.core) === null || _pluginInjectionApi$c8 === void 0 || _pluginInjectionApi$c8.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 (_ref5) {
       var item = _ref5.item,
@@ -613,8 +625,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       // Popup will be unmounted to ensure that the new table has a selection with a blinking cursor.
       // So we can start typing right away.
       var onUnmount = function onUnmount() {
-        var _pluginInjectionApi$c8;
-        return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c8 = pluginInjectionApi.core) === null || _pluginInjectionApi$c8 === void 0 || (_pluginInjectionApi$c8 = _pluginInjectionApi$c8.actions) === null || _pluginInjectionApi$c8 === void 0 ? void 0 : _pluginInjectionApi$c8.focus();
+        var _pluginInjectionApi$c9;
+        return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c9 = pluginInjectionApi.core) === null || _pluginInjectionApi$c9 === void 0 || (_pluginInjectionApi$c9 = _pluginInjectionApi$c9.actions) === null || _pluginInjectionApi$c9 === void 0 ? void 0 : _pluginInjectionApi$c9.focus();
       };
       return (0, _react2.jsx)(_tableSelectorPopupWithListeners.default, {
         target: ref,
@@ -647,7 +659,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         _tableSelectorButton6,
         _this$props$isDisable,
         _this$props$replacePl,
-        _this$props$pluginInj5;
+        _this$props$pluginInj3;
       var _this$state2 = this.state,
         buttons = _this$state2.buttons,
         dropdownItems = _this$state2.dropdownItems,
@@ -655,7 +667,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         isTableSelectorOpen = _this$state2.isTableSelectorOpen;
       var _this$props13 = this.props,
         isDisabled = _this$props13.isDisabled,
-        isReducedSpacing = _this$props13.isReducedSpacing;
+        isReducedSpacing = _this$props13.isReducedSpacing,
+        editorAppearance = _this$props13.editorAppearance;
       var isTableButtonVisible = buttons.some(function (_ref8) {
         var value = _ref8.value;
         return value.name === 'table';
@@ -753,7 +766,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           onKeyDown: this.handleTableSelectorOpenByKeyboard
         })), (0, _react2.jsx)("span", {
           css: _styles.wrapperStyle
-        }, this.renderPopup(), this.renderTableSelectorPopup(), (0, _react2.jsx)(_blockInsertMenu.BlockInsertMenu, {
+        }, this.renderPopup(), this.renderTableSelectorPopup(), (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true) && ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '') ? (0, _react2.jsx)(_MainToolBarIcon.RightRailIcon, {
+          onClick: this.handleClick
+        }) : (0, _react2.jsx)(_blockInsertMenu.BlockInsertMenu, {
           popupsMountPoint: this.props.popupsMountPoint,
           popupsBoundariesElement: this.props.popupsBoundariesElement,
           popupsScrollableElement: this.props.popupsScrollableElement,
@@ -775,7 +790,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$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 */
+        })), !((_this$props$pluginInj3 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj3 !== void 0 && _this$props$pluginInj3.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

@@ -322,5 +322,13 @@ function ToolbarInsertBlockWithInjectionApi({
     showElementBrowserLink: options.showElementBrowserLink,
     showSeparator: !isLastItem && toolbarSize <= ToolbarSize.S,
     registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions
+    /**
+     * For insert menu in right rail experiment, ignore for now since editorAppearance has been kept
+     * internal due to temporary nature of experiment
+     * - Clean up ticket ED-24801
+     */
+    // @ts-expect-error
+    ,
+    editorAppearance: options.UNSAFE_editorAppearance
   });
 }

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -154,10 +154,10 @@ const insertMenuWrapper = itemCount => {
     return css({
       display: 'flex',
       flexDirection: 'column',
-      width: '310px',
+      width: '314px',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       height: 'calc(100% - 32px)',
-      margin: `0 -10px`,
+      margin: `0 -12px`,
       backgroundColor: `${`var(--ds-surface-overlay, ${N0})`}`,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       borderRadius: `${borderRadius()}px`

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
+import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
+import { Box, Pressable, xcss } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+const wrapperStyles = xcss({
+  width: '32px',
+  height: '32px',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const buttonStyles = xcss({
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: "var(--ds-space-300, 24px)",
+  width: "var(--ds-space-300, 24px)",
+  border: 'none',
+  backgroundColor: 'color.background.neutral',
+  borderRadius: 'border.radius.circle',
+  color: 'color.text',
+  zIndex: 'card',
+  outline: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.pressed'
+  },
+  ':focus': {
+    outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
+  }
+});
+export const RightRailIcon = ({
+  onClick
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: [wrapperStyles]
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(ToolTipContent
+    // Re-using insertRightRailTitle for tooltip, both messages are the same
+    , {
+      description: formatMessage(toolbarInsertBlockMessages.insertRightRailTitle),
+      shortcutOverride: "/"
+    })
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    type: "button",
+    "aria-label": formatMessage(toolbarInsertBlockMessages.insertMenu),
+    xcss: [buttonStyles],
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(EditorAddIcon, {
+    label: formatMessage(toolbarInsertBlockMessages.insertMenu),
+    size: "medium"
+  }))));
+};

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

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl-next';
 import { IconButton } from '@atlaskit/button/new';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -162,6 +162,40 @@ export const InsertMenuRail = ({
       // leaving this blank for now
     }
   };
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    api.core.actions.execute(({
+      tr
+    }) => {
+      var _api$analytics2;
+      (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.attachAnalyticsEvent({
+        action: ACTION.OPENED,
+        // @ts-expect-error
+        actionSubject: INPUT_METHOD.INSERT_MENU_RIGHT_RAIL,
+        eventType: EVENT_TYPE.UI
+      })(tr);
+      return tr;
+    });
+    return () => {
+      if (!api) {
+        return;
+      }
+      api.core.actions.execute(({
+        tr
+      }) => {
+        var _api$analytics3;
+        (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.attachAnalyticsEvent({
+          action: ACTION.CLOSED,
+          // @ts-expect-error
+          actionSubject: INPUT_METHOD.INSERT_MENU_RIGHT_RAIL,
+          eventType: EVENT_TYPE.UI
+        })(tr);
+        return tr;
+      });
+    };
+  }, [api]);
   return /*#__PURE__*/React.createElement(Box, {
     xcss: panelWrapper
   }, /*#__PURE__*/React.createElement(Box, {

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

@@ -45,7 +45,9 @@ export const useInsertMenuRailItems = (editorView, options, api) => {
       availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
       insertMenuItems: options.insertMenuItems,
       schema: editorView.state.schema,
-      numberOfButtons: 10,
+      // numberOfButtons controls what items are returned and eventually display in the insert menu - but it relies on the main toolbar width which
+      // is not easily available here. I've used 7 as it's the value used for most widths see toolbarSizeToButtons
+      numberOfButtons: 7,
       formatMessage,
       isNewMenuEnabled: true
     });

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

@@ -18,6 +18,7 @@ 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 { RightRailIcon } from '../ElementRail/MainToolBarIcon';
 import { BlockInsertMenu } from './block-insert-menu';
 import { createItems } from './create-items';
 import { messages } from './messages';
@@ -217,13 +218,26 @@ export class ToolbarInsertBlock extends React.PureComponent {
       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(({
+        const {
+          pluginInjectionApi
+        } = this.props;
+        if (!pluginInjectionApi) {
+          return;
+        }
+        pluginInjectionApi.core.actions.execute(({
           tr
         }) => {
-          var _this$props$pluginInj2, _this$props$pluginInj3;
+          var _pluginInjectionApi$c, _pluginInjectionApi$a;
           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);
+          (_pluginInjectionApi$c = pluginInjectionApi.contextPanel) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.applyChange(tr);
+          (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.attachAnalyticsEvent({
+            action: ACTION.CLICKED,
+            // @ts-expect-error
+            actionSubject: ACTION_SUBJECT.TOOLBAR_BUTTON,
+            // @ts-expect-error
+            actionSubjectId: INPUT_METHOD.INSERT_MENU_RIGHT_RAIL,
+            eventType: EVENT_TYPE.UI
+          })(tr);
           return tr;
         });
         return;
@@ -239,13 +253,13 @@ export class ToolbarInsertBlock extends React.PureComponent {
         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(({
+          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$pluginInj5, _this$props$pluginInj6;
+            var _this$props$pluginInj2, _this$props$pluginInj3;
             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);
+            (_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;
@@ -266,11 +280,11 @@ export class ToolbarInsertBlock extends React.PureComponent {
       }
     });
     _defineProperty(this, "toggleLinkPanel", inputMethod => {
-      var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$h;
+      var _pluginInjectionApi$c2, _pluginInjectionApi$c3, _pluginInjectionApi$h;
       const {
         pluginInjectionApi
       } = this.props;
-      return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
+      return (_pluginInjectionApi$c2 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c2 !== void 0 ? _pluginInjectionApi$c2 : false;
     });
     _defineProperty(this, "insertMention", inputMethod => {
       var _pluginInjectionApi$m, _pluginInjectionApi$m2, _pluginInjectionApi$m3;
@@ -318,16 +332,16 @@ export class ToolbarInsertBlock extends React.PureComponent {
 
       // workaround to solve race condition where cursor is not placed correctly inside table
       queueMicrotask(() => {
-        var _pluginInjectionApi$c3, _pluginInjectionApi$t4;
-        pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$t4 = pluginInjectionApi.table) === null || _pluginInjectionApi$t4 === void 0 ? void 0 : _pluginInjectionApi$t4.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
+        var _pluginInjectionApi$c4, _pluginInjectionApi$t4;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$t4 = pluginInjectionApi.table) === null || _pluginInjectionApi$t4 === void 0 ? void 0 : _pluginInjectionApi$t4.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
       });
     });
     _defineProperty(this, "createDate", inputMethod => {
-      var _pluginInjectionApi$c4, _pluginInjectionApi$d, _pluginInjectionApi$d2;
+      var _pluginInjectionApi$c5, _pluginInjectionApi$d, _pluginInjectionApi$d2;
       const {
         pluginInjectionApi
       } = this.props;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.insertDate({
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c5 = pluginInjectionApi.core) === null || _pluginInjectionApi$c5 === void 0 ? void 0 : _pluginInjectionApi$c5.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.insertDate({
         inputMethod
       }));
       return true;
@@ -351,11 +365,11 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return true;
     });
     _defineProperty(this, "createStatus", inputMethod => {
-      var _pluginInjectionApi$c5, _pluginInjectionApi$s, _pluginInjectionApi$s2;
+      var _pluginInjectionApi$c6, _pluginInjectionApi$s, _pluginInjectionApi$s2;
       const {
         pluginInjectionApi
       } = this.props;
-      return Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c5 = pluginInjectionApi.core) === null || _pluginInjectionApi$c5 === void 0 ? void 0 : _pluginInjectionApi$c5.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$s = pluginInjectionApi.status) === null || _pluginInjectionApi$s === void 0 ? void 0 : (_pluginInjectionApi$s2 = _pluginInjectionApi$s.commands) === null || _pluginInjectionApi$s2 === void 0 ? void 0 : _pluginInjectionApi$s2.insertStatus(inputMethod)));
+      return Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c6 = pluginInjectionApi.core) === null || _pluginInjectionApi$c6 === void 0 ? void 0 : _pluginInjectionApi$c6.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$s = pluginInjectionApi.status) === null || _pluginInjectionApi$s === void 0 ? void 0 : (_pluginInjectionApi$s2 = _pluginInjectionApi$s.commands) === null || _pluginInjectionApi$s2 === void 0 ? void 0 : _pluginInjectionApi$s2.insertStatus(inputMethod)));
     });
     _defineProperty(this, "openMediaPicker", inputMethod => {
       const {
@@ -425,21 +439,21 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return true;
     });
     _defineProperty(this, "handleSelectedEmoji", emojiId => {
-      var _pluginInjectionApi$c6, _pluginInjectionApi$e3;
+      var _pluginInjectionApi$c7, _pluginInjectionApi$e3;
       const {
         pluginInjectionApi
       } = this.props;
       this.props.editorView.focus();
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c6 = pluginInjectionApi.core) === null || _pluginInjectionApi$c6 === void 0 ? void 0 : _pluginInjectionApi$c6.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c7 = pluginInjectionApi.core) === null || _pluginInjectionApi$c7 === void 0 ? void 0 : _pluginInjectionApi$c7.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
       this.toggleEmojiPicker();
       return true;
     });
     _defineProperty(this, "openElementBrowser", () => {
-      var _pluginInjectionApi$c7, _pluginInjectionApi$q;
+      var _pluginInjectionApi$c8, _pluginInjectionApi$q;
       const {
         pluginInjectionApi
       } = this.props;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c7 = pluginInjectionApi.core) === null || _pluginInjectionApi$c7 === void 0 ? void 0 : _pluginInjectionApi$c7.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c8 = pluginInjectionApi.core) === null || _pluginInjectionApi$c8 === void 0 ? void 0 : _pluginInjectionApi$c8.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
     });
     _defineProperty(this, "onItemActivated", ({
       item,
@@ -628,8 +642,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
     }
     const onUnmount = () => {
       requestAnimationFrame(() => {
-        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();
+        var _this$props$pluginInj4, _this$props$pluginInj5, _this$props$pluginInj6;
+        return (_this$props$pluginInj4 = this.props.pluginInjectionApi) === null || _this$props$pluginInj4 === void 0 ? void 0 : (_this$props$pluginInj5 = _this$props$pluginInj4.core) === null || _this$props$pluginInj5 === void 0 ? void 0 : (_this$props$pluginInj6 = _this$props$pluginInj5.actions) === null || _this$props$pluginInj6 === void 0 ? void 0 : _this$props$pluginInj6.focus();
       });
     };
     return jsx(Popup, {
@@ -673,8 +687,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
     // Popup will be unmounted to ensure that the new table has a selection with a blinking cursor.
     // So we can start typing right away.
     const onUnmount = () => {
-      var _pluginInjectionApi$c8, _pluginInjectionApi$c9;
-      return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c8 = pluginInjectionApi.core) === null || _pluginInjectionApi$c8 === void 0 ? void 0 : (_pluginInjectionApi$c9 = _pluginInjectionApi$c8.actions) === null || _pluginInjectionApi$c9 === void 0 ? void 0 : _pluginInjectionApi$c9.focus();
+      var _pluginInjectionApi$c9, _pluginInjectionApi$c10;
+      return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c9 = pluginInjectionApi.core) === null || _pluginInjectionApi$c9 === void 0 ? void 0 : (_pluginInjectionApi$c10 = _pluginInjectionApi$c9.actions) === null || _pluginInjectionApi$c10 === void 0 ? void 0 : _pluginInjectionApi$c10.focus();
     };
     return jsx(TableSelectorPopup, {
       target: ref,
@@ -689,7 +703,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$pluginInj10;
+    var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$props$replacePl, _this$props$pluginInj7;
     const {
       buttons,
       dropdownItems,
@@ -698,7 +712,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
     } = this.state;
     const {
       isDisabled,
-      isReducedSpacing
+      isReducedSpacing,
+      editorAppearance
     } = this.props;
     const isTableButtonVisible = buttons.some(({
       value
@@ -786,7 +801,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
         onKeyDown: this.handleTableSelectorOpenByKeyboard
       })), jsx("span", {
         css: wrapperStyle
-      }, this.renderPopup(), this.renderTableSelectorPopup(), jsx(BlockInsertMenu, {
+      }, this.renderPopup(), this.renderTableSelectorPopup(), editorExperiment('insert-menu-in-right-rail', true) && ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '') ? jsx(RightRailIcon, {
+        onClick: this.handleClick
+      }) : jsx(BlockInsertMenu, {
         popupsMountPoint: this.props.popupsMountPoint,
         popupsBoundariesElement: this.props.popupsBoundariesElement,
         popupsScrollableElement: this.props.popupsScrollableElement,
@@ -808,7 +825,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$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 */
+      })), !((_this$props$pluginInj7 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj7 !== void 0 && _this$props$pluginInj7.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

@@ -319,5 +319,13 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     showElementBrowserLink: options.showElementBrowserLink,
     showSeparator: !isLastItem && toolbarSize <= ToolbarSize.S,
     registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions
+    /**
+     * For insert menu in right rail experiment, ignore for now since editorAppearance has been kept
+     * internal due to temporary nature of experiment
+     * - Clean up ticket ED-24801
+     */
+    // @ts-expect-error
+    ,
+    editorAppearance: options.UNSAFE_editorAppearance
   });
 }

package/dist/esm/ui/ElementBrowser/InsertMenu.js

@@ -164,10 +164,10 @@ var insertMenuWrapper = function insertMenuWrapper(itemCount) {
     return css({
       display: 'flex',
       flexDirection: 'column',
-      width: '310px',
+      width: '314px',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       height: 'calc(100% - 32px)',
-      margin: "0 -10px",
+      margin: "0 -12px",
       backgroundColor: "".concat("var(--ds-surface-overlay, ".concat(N0, ")")),
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       borderRadius: "".concat(borderRadius(), "px")

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
+import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
+import { Box, Pressable, xcss } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+var wrapperStyles = xcss({
+  width: '32px',
+  height: '32px',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var buttonStyles = xcss({
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: "var(--ds-space-300, 24px)",
+  width: "var(--ds-space-300, 24px)",
+  border: 'none',
+  backgroundColor: 'color.background.neutral',
+  borderRadius: 'border.radius.circle',
+  color: 'color.text',
+  zIndex: 'card',
+  outline: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.pressed'
+  },
+  ':focus': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+  }
+});
+export var RightRailIcon = function RightRailIcon(_ref) {
+  var onClick = _ref.onClick;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: [wrapperStyles]
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(ToolTipContent
+    // Re-using insertRightRailTitle for tooltip, both messages are the same
+    , {
+      description: formatMessage(toolbarInsertBlockMessages.insertRightRailTitle),
+      shortcutOverride: "/"
+    })
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    type: "button",
+    "aria-label": formatMessage(toolbarInsertBlockMessages.insertMenu),
+    xcss: [buttonStyles],
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(EditorAddIcon, {
+    label: formatMessage(toolbarInsertBlockMessages.insertMenu),
+    size: "medium"
+  }))));
+};

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

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl-next';
 import { IconButton } from '@atlaskit/button/new';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -157,6 +157,38 @@ export var InsertMenuRail = function InsertMenuRail(_ref) {
       // leaving this blank for now
     }
   };
+  useEffect(function () {
+    if (!api) {
+      return;
+    }
+    api.core.actions.execute(function (_ref3) {
+      var _api$analytics2;
+      var tr = _ref3.tr;
+      (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
+        action: ACTION.OPENED,
+        // @ts-expect-error
+        actionSubject: INPUT_METHOD.INSERT_MENU_RIGHT_RAIL,
+        eventType: EVENT_TYPE.UI
+      })(tr);
+      return tr;
+    });
+    return function () {
+      if (!api) {
+        return;
+      }
+      api.core.actions.execute(function (_ref4) {
+        var _api$analytics3;
+        var tr = _ref4.tr;
+        (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || _api$analytics3.actions.attachAnalyticsEvent({
+          action: ACTION.CLOSED,
+          // @ts-expect-error
+          actionSubject: INPUT_METHOD.INSERT_MENU_RIGHT_RAIL,
+          eventType: EVENT_TYPE.UI
+        })(tr);
+        return tr;
+      });
+    };
+  }, [api]);
   return /*#__PURE__*/React.createElement(Box, {
     xcss: panelWrapper
   }, /*#__PURE__*/React.createElement(Box, {
@@ -173,9 +205,9 @@ export var InsertMenuRail = function InsertMenuRail(_ref) {
       if (!api) {
         return;
       }
-      api.core.actions.execute(function (_ref3) {
+      api.core.actions.execute(function (_ref5) {
         var _api$contextPanel;
-        var tr = _ref3.tr;
+        var tr = _ref5.tr;
         toggleInsertMenuRightRail(tr);
         (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 || _api$contextPanel.actions.applyChange(tr);
         return tr;

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

@@ -44,7 +44,9 @@ export var useInsertMenuRailItems = function useInsertMenuRailItems(editorView,
         availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
         insertMenuItems: options.insertMenuItems,
         schema: editorView.state.schema,
-        numberOfButtons: 10,
+        // numberOfButtons controls what items are returned and eventually display in the insert menu - but it relies on the main toolbar width which
+        // is not easily available here. I've used 7 as it's the value used for most widths see toolbarSizeToButtons
+        numberOfButtons: 7,
         formatMessage: formatMessage,
         isNewMenuEnabled: true
       });

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

@@ -34,6 +34,7 @@ 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 { RightRailIcon } from '../ElementRail/MainToolBarIcon';
 import { BlockInsertMenu } from './block-insert-menu';
 import { createItems } from './create-items';
 import { messages } from './messages';
@@ -210,12 +211,23 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       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 pluginInjectionApi = _this.props.pluginInjectionApi;
+        if (!pluginInjectionApi) {
+          return;
+        }
+        pluginInjectionApi.core.actions.execute(function (_ref3) {
+          var _pluginInjectionApi$c, _pluginInjectionApi$a;
           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);
+          (_pluginInjectionApi$c = pluginInjectionApi.contextPanel) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.applyChange(tr);
+          (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.attachAnalyticsEvent({
+            action: ACTION.CLICKED,
+            // @ts-expect-error
+            actionSubject: ACTION_SUBJECT.TOOLBAR_BUTTON,
+            // @ts-expect-error
+            actionSubjectId: INPUT_METHOD.INSERT_MENU_RIGHT_RAIL,
+            eventType: EVENT_TYPE.UI
+          })(tr);
           return tr;
         });
         return;
@@ -231,12 +243,12 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         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 _this$props$pluginInj;
+          (_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.core.actions.execute(function (_ref4) {
+            var _this$props$pluginInj2;
             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);
+            (_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;
@@ -256,9 +268,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "toggleLinkPanel", function (inputMethod) {
-      var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$h;
+      var _pluginInjectionApi$c2, _pluginInjectionApi$c3, _pluginInjectionApi$h;
       var pluginInjectionApi = _this.props.pluginInjectionApi;
-      return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
+      return (_pluginInjectionApi$c2 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c2 !== void 0 ? _pluginInjectionApi$c2 : false;
     });
     _defineProperty(_assertThisInitialized(_this), "insertMention", function (inputMethod) {
       var _pluginInjectionApi$m, _pluginInjectionApi$m2;
@@ -301,15 +313,15 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
 
         // workaround to solve race condition where cursor is not placed correctly inside table
         queueMicrotask(function () {
-          var _pluginInjectionApi$c3, _pluginInjectionApi$t4;
-          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 || _pluginInjectionApi$c3.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t4 = pluginInjectionApi.table) === null || _pluginInjectionApi$t4 === void 0 ? void 0 : _pluginInjectionApi$t4.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
+          var _pluginInjectionApi$c4, _pluginInjectionApi$t4;
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 || _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t4 = pluginInjectionApi.table) === null || _pluginInjectionApi$t4 === void 0 ? void 0 : _pluginInjectionApi$t4.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
         });
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createDate", function (inputMethod) {
-      var _pluginInjectionApi$c4, _pluginInjectionApi$d;
+      var _pluginInjectionApi$c5, _pluginInjectionApi$d;
       var pluginInjectionApi = _this.props.pluginInjectionApi;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 || _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 || (_pluginInjectionApi$d = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.insertDate({
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c5 = pluginInjectionApi.core) === null || _pluginInjectionApi$c5 === void 0 || _pluginInjectionApi$c5.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 || (_pluginInjectionApi$d = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.insertDate({
         inputMethod: inputMethod
       }));
       return true;
@@ -331,9 +343,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       return true;
     });
     _defineProperty(_assertThisInitialized(_this), "createStatus", function (inputMethod) {
-      var _pluginInjectionApi$c5, _pluginInjectionApi$s;
+      var _pluginInjectionApi$c6, _pluginInjectionApi$s;
       var pluginInjectionApi = _this.props.pluginInjectionApi;
-      return Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c5 = pluginInjectionApi.core) === null || _pluginInjectionApi$c5 === void 0 ? void 0 : _pluginInjectionApi$c5.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.status) === null || _pluginInjectionApi$s === void 0 || (_pluginInjectionApi$s = _pluginInjectionApi$s.commands) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.insertStatus(inputMethod)));
+      return Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c6 = pluginInjectionApi.core) === null || _pluginInjectionApi$c6 === void 0 ? void 0 : _pluginInjectionApi$c6.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.status) === null || _pluginInjectionApi$s === void 0 || (_pluginInjectionApi$s = _pluginInjectionApi$s.commands) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.insertStatus(inputMethod)));
     });
     _defineProperty(_assertThisInitialized(_this), "openMediaPicker", function (inputMethod) {
       var _this$props5 = _this.props,
@@ -397,17 +409,17 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       };
     });
     _defineProperty(_assertThisInitialized(_this), "handleSelectedEmoji", function (emojiId) {
-      var _pluginInjectionApi$c6, _pluginInjectionApi$e3;
+      var _pluginInjectionApi$c7, _pluginInjectionApi$e3;
       var pluginInjectionApi = _this.props.pluginInjectionApi;
       _this.props.editorView.focus();
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c6 = pluginInjectionApi.core) === null || _pluginInjectionApi$c6 === void 0 || _pluginInjectionApi$c6.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c7 = pluginInjectionApi.core) === null || _pluginInjectionApi$c7 === void 0 || _pluginInjectionApi$c7.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
       _this.toggleEmojiPicker();
       return true;
     });
     _defineProperty(_assertThisInitialized(_this), "openElementBrowser", function () {
-      var _pluginInjectionApi$c7, _pluginInjectionApi$q;
+      var _pluginInjectionApi$c8, _pluginInjectionApi$q;
       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);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c8 = pluginInjectionApi.core) === null || _pluginInjectionApi$c8 === void 0 || _pluginInjectionApi$c8.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 (_ref5) {
       var item = _ref5.item,
@@ -604,8 +616,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       // Popup will be unmounted to ensure that the new table has a selection with a blinking cursor.
       // So we can start typing right away.
       var onUnmount = function onUnmount() {
-        var _pluginInjectionApi$c8;
-        return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c8 = pluginInjectionApi.core) === null || _pluginInjectionApi$c8 === void 0 || (_pluginInjectionApi$c8 = _pluginInjectionApi$c8.actions) === null || _pluginInjectionApi$c8 === void 0 ? void 0 : _pluginInjectionApi$c8.focus();
+        var _pluginInjectionApi$c9;
+        return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c9 = pluginInjectionApi.core) === null || _pluginInjectionApi$c9 === void 0 || (_pluginInjectionApi$c9 = _pluginInjectionApi$c9.actions) === null || _pluginInjectionApi$c9 === void 0 ? void 0 : _pluginInjectionApi$c9.focus();
       };
       return jsx(TableSelectorPopup, {
         target: ref,
@@ -638,7 +650,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         _tableSelectorButton6,
         _this$props$isDisable,
         _this$props$replacePl,
-        _this$props$pluginInj5;
+        _this$props$pluginInj3;
       var _this$state2 = this.state,
         buttons = _this$state2.buttons,
         dropdownItems = _this$state2.dropdownItems,
@@ -646,7 +658,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         isTableSelectorOpen = _this$state2.isTableSelectorOpen;
       var _this$props13 = this.props,
         isDisabled = _this$props13.isDisabled,
-        isReducedSpacing = _this$props13.isReducedSpacing;
+        isReducedSpacing = _this$props13.isReducedSpacing,
+        editorAppearance = _this$props13.editorAppearance;
       var isTableButtonVisible = buttons.some(function (_ref8) {
         var value = _ref8.value;
         return value.name === 'table';
@@ -744,7 +757,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           onKeyDown: this.handleTableSelectorOpenByKeyboard
         })), jsx("span", {
           css: wrapperStyle
-        }, this.renderPopup(), this.renderTableSelectorPopup(), jsx(BlockInsertMenu, {
+        }, this.renderPopup(), this.renderTableSelectorPopup(), editorExperiment('insert-menu-in-right-rail', true) && ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '') ? jsx(RightRailIcon, {
+          onClick: this.handleClick
+        }) : jsx(BlockInsertMenu, {
           popupsMountPoint: this.props.popupsMountPoint,
           popupsBoundariesElement: this.props.popupsBoundariesElement,
           popupsScrollableElement: this.props.popupsScrollableElement,
@@ -766,7 +781,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$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 */
+        })), !((_this$props$pluginInj3 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj3 !== void 0 && _this$props$pluginInj3.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/ui/ElementRail/MainToolBarIcon.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    onClick: () => void;
+};
+export declare const RightRailIcon: ({ onClick }: Props) => JSX.Element;
+export {};

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

@@ -1,6 +1,6 @@
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { MacroProvider } from '@atlaskit/editor-common/provider-factory';
-import type { Command, EditorActionsOptions as EditorActions, ExtractInjectionAPI, ImageUploadPluginReferenceEvent } from '@atlaskit/editor-common/types';
+import type { Command, EditorActionsOptions as EditorActions, EditorAppearance, ExtractInjectionAPI, ImageUploadPluginReferenceEvent } from '@atlaskit/editor-common/types';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { BlockType } from '@atlaskit/editor-plugin-block-type';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
@@ -49,6 +49,7 @@ export interface Props {
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     pluginInjectionApi?: ExtractInjectionAPI<InsertBlockPlugin>;
     mentionsDisabled?: boolean;
+    editorAppearance?: EditorAppearance;
 }
 export interface State {
     isPlusMenuOpen: boolean;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    onClick: () => void;
+};
+export declare const RightRailIcon: ({ onClick }: Props) => JSX.Element;
+export {};

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

@@ -1,6 +1,6 @@
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { MacroProvider } from '@atlaskit/editor-common/provider-factory';
-import type { Command, EditorActionsOptions as EditorActions, ExtractInjectionAPI, ImageUploadPluginReferenceEvent } from '@atlaskit/editor-common/types';
+import type { Command, EditorActionsOptions as EditorActions, EditorAppearance, ExtractInjectionAPI, ImageUploadPluginReferenceEvent } from '@atlaskit/editor-common/types';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { BlockType } from '@atlaskit/editor-plugin-block-type';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
@@ -49,6 +49,7 @@ export interface Props {
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     pluginInjectionApi?: ExtractInjectionAPI<InsertBlockPlugin>;
     mentionsDisabled?: boolean;
+    editorAppearance?: EditorAppearance;
 }
 export interface State {
     isPlusMenuOpen: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "1.14.3",
+	"version": "1.14.4",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/editor-common": "^89.0.0",
+		"@atlaskit/editor-common": "^89.1.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-block-type": "^3.14.0",
 		"@atlaskit/editor-plugin-code-block": "^3.3.0",
@@ -53,18 +53,19 @@
 		"@atlaskit/editor-plugin-rule": "^1.8.0",
 		"@atlaskit/editor-plugin-status": "^2.4.0",
 		"@atlaskit/editor-plugin-table": "^7.25.0",
-		"@atlaskit/editor-plugin-tasks-and-decisions": "^2.4.0",
+		"@atlaskit/editor-plugin-tasks-and-decisions": "^2.5.0",
 		"@atlaskit/editor-plugin-type-ahead": "^1.8.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/emoji": "^67.7.0",
 		"@atlaskit/heading": "2.4.5",
-		"@atlaskit/icon": "^22.16.0",
+		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.1.0",
 		"@atlaskit/tokens": "^1.59.0",
+		"@atlaskit/tooltip": "18.7.2",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",