@atlaskit/editor-plugin-insert-block 2.1.2 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 2.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.2.0
+
+### Minor Changes
+
+- [#144047](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144047)
+  [`0e77caf52a59d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0e77caf52a59d) -
+  add new full page toolbar breakpoints
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.2
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -26,7 +26,18 @@ var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBloc
 var _transformOptions = require("./ui/transformOptions");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize) {
+var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize, appearance) {
+  if (appearance === 'full-page' && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes')) {
+    switch (toolbarSize) {
+      case _types.ToolbarSize.XXL:
+      case _types.ToolbarSize.XL:
+        return 7;
+      case _types.ToolbarSize.L:
+        return 5;
+      default:
+        return 0;
+    }
+  }
   switch (toolbarSize) {
     case _types.ToolbarSize.XXL:
     case _types.ToolbarSize.XL:
@@ -60,7 +71,7 @@ function handleInsertBlockType(insertCodeBlock, insertPanel, insertBlockQuote) {
   };
 }
 var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_ref) {
-  var _api$primaryToolbar, _options$UNSAFE_edito4;
+  var _api$primaryToolbar, _options$appearance4;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
@@ -104,7 +115,8 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
         isLastItem: isLastItem,
         providers: providers,
         options: options,
-        registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions
+        registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions,
+        appearance: options.appearance
       });
     };
     return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
@@ -134,10 +146,10 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
      */
     // @ts-expect-error
     getSharedState: function getSharedState(editorState) {
-      var _options$UNSAFE_edito;
+      var _options$appearance;
       if (!editorState ||
       // @ts-ignore
-      !['full-page', 'full-width'].includes((_options$UNSAFE_edito = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito !== void 0 ? _options$UNSAFE_edito : '') || !(0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
+      !['full-page', 'full-width'].includes((_options$appearance = options.appearance) !== null && _options$appearance !== void 0 ? _options$appearance : '') || !(0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
         return;
       }
       var pluginState = _elementBrowser.elementBrowserPmKey.getState(editorState);
@@ -146,10 +158,10 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
       };
     },
     pmPlugins: function pmPlugins() {
-      var _options$UNSAFE_edito2;
+      var _options$appearance2;
       if (
       // @ts-ignore
-      !['full-page', 'full-width'].includes((_options$UNSAFE_edito2 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito2 !== void 0 ? _options$UNSAFE_edito2 : '') || !(0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
+      !['full-page', 'full-width'].includes((_options$appearance2 = options.appearance) !== null && _options$appearance2 !== void 0 ? _options$appearance2 : '') || !(0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
         [];
       }
       return [{
@@ -233,11 +245,11 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
       // If we decide to ship the feature, we will consider a separate plugin if needed.
       // Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3983684902/Experiment+Drive+element+usage+via+element+templates
       quickInsert: function quickInsert(intl) {
-        var _options$UNSAFE_edito3;
+        var _options$appearance3;
         var locale = intl.locale;
         var isEligible = locale.startsWith('en') &&
         // @ts-ignore
-        ['full-page', 'full-width'].includes((_options$UNSAFE_edito3 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito3 !== void 0 ? _options$UNSAFE_edito3 : '');
+        ['full-page', 'full-width'].includes((_options$appearance3 = options.appearance) !== null && _options$appearance3 !== void 0 ? _options$appearance3 : '');
         if (isEligible && (0, _experiments.editorExperiment)('element-level-templates', true, {
           exposure: true
         })) {
@@ -257,7 +269,7 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
   };
   if (
   // @ts-ignore
-  ['full-page', 'full-width'].includes((_options$UNSAFE_edito4 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito4 !== void 0 ? _options$UNSAFE_edito4 : '') && (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
+  ['full-page', 'full-width'].includes((_options$appearance4 = options.appearance) !== null && _options$appearance4 !== void 0 ? _options$appearance4 : '') && (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
@@ -289,8 +301,9 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     providers = _ref3.providers,
     pluginInjectionApi = _ref3.pluginInjectionApi,
     options = _ref3.options,
-    registerToggleDropdownMenuOptions = _ref3.registerToggleDropdownMenuOptions;
-  var buttons = toolbarSizeToButtons(toolbarSize);
+    registerToggleDropdownMenuOptions = _ref3.registerToggleDropdownMenuOptions,
+    appearance = _ref3.appearance;
+  var buttons = toolbarSizeToButtons(toolbarSize, appearance);
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']),
     dateState = _useSharedPluginState.dateState,
     hyperlinkState = _useSharedPluginState.hyperlinkState,
@@ -362,14 +375,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     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
+    registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions,
+    editorAppearance: options.appearance
   });
 }

package/dist/cjs/ui/ToolbarInsertBlock/create-items.js

@@ -12,6 +12,7 @@ var _memoize = _interopRequireDefault(require("lodash/memoize"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _item = require("./item");
 var _messages2 = require("./messages");
 var _shallowEquals = require("./shallow-equals");
@@ -215,7 +216,10 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
       disabled: false
     }));
   }
-  var numButtonsWithoutTableSelector = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
+  var numButtonsWithoutTableSelector = numberOfButtons;
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes')) {
+    numButtonsWithoutTableSelector = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
+  }
   var buttonItems = items.slice(0, numButtonsWithoutTableSelector).map(buttonToItem);
   var remainingItems = items.slice(numButtonsWithoutTableSelector).filter(function (_ref) {
     var name = _ref.value.name;

package/dist/es2019/plugin.js

@@ -16,7 +16,18 @@ import { InsertMenuRail } from './ui/ElementRail';
 import { templateOptions } from './ui/templateOptions';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 import { transformationOptions } from './ui/transformOptions';
-const toolbarSizeToButtons = toolbarSize => {
+const toolbarSizeToButtons = (toolbarSize, appearance) => {
+  if (appearance === 'full-page' && fg('platform_editor_toolbar_responsive_fixes')) {
+    switch (toolbarSize) {
+      case ToolbarSize.XXL:
+      case ToolbarSize.XL:
+        return 7;
+      case ToolbarSize.L:
+        return 5;
+      default:
+        return 0;
+    }
+  }
   switch (toolbarSize) {
     case ToolbarSize.XXL:
     case ToolbarSize.XL:
@@ -51,7 +62,7 @@ export const insertBlockPlugin = ({
   config: options = {},
   api
 }) => {
-  var _api$primaryToolbar, _options$UNSAFE_edito4;
+  var _api$primaryToolbar, _options$appearance4;
   const toggleDropdownMenuOptionsRef = {
     current: null
   };
@@ -93,7 +104,8 @@ export const insertBlockPlugin = ({
         isLastItem: isLastItem,
         providers: providers,
         options: options,
-        registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions
+        registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions,
+        appearance: options.appearance
       });
     };
     return /*#__PURE__*/React.createElement(WithProviders, {
@@ -123,10 +135,10 @@ export const insertBlockPlugin = ({
      */
     // @ts-expect-error
     getSharedState: editorState => {
-      var _options$UNSAFE_edito;
+      var _options$appearance;
       if (!editorState ||
       // @ts-ignore
-      !['full-page', 'full-width'].includes((_options$UNSAFE_edito = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito !== void 0 ? _options$UNSAFE_edito : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
+      !['full-page', 'full-width'].includes((_options$appearance = options.appearance) !== null && _options$appearance !== void 0 ? _options$appearance : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
         return;
       }
       const pluginState = elementBrowserPmKey.getState(editorState);
@@ -135,10 +147,10 @@ export const insertBlockPlugin = ({
       };
     },
     pmPlugins: () => {
-      var _options$UNSAFE_edito2;
+      var _options$appearance2;
       if (
       // @ts-ignore
-      !['full-page', 'full-width'].includes((_options$UNSAFE_edito2 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito2 !== void 0 ? _options$UNSAFE_edito2 : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
+      !['full-page', 'full-width'].includes((_options$appearance2 = options.appearance) !== null && _options$appearance2 !== void 0 ? _options$appearance2 : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
         [];
       }
       return [{
@@ -224,13 +236,13 @@ export const insertBlockPlugin = ({
       // If we decide to ship the feature, we will consider a separate plugin if needed.
       // Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3983684902/Experiment+Drive+element+usage+via+element+templates
       quickInsert: intl => {
-        var _options$UNSAFE_edito3;
+        var _options$appearance3;
         const {
           locale
         } = intl;
         const isEligible = locale.startsWith('en') &&
         // @ts-ignore
-        ['full-page', 'full-width'].includes((_options$UNSAFE_edito3 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito3 !== void 0 ? _options$UNSAFE_edito3 : '');
+        ['full-page', 'full-width'].includes((_options$appearance3 = options.appearance) !== null && _options$appearance3 !== void 0 ? _options$appearance3 : '');
         if (isEligible && editorExperiment('element-level-templates', true, {
           exposure: true
         })) {
@@ -250,7 +262,7 @@ export const insertBlockPlugin = ({
   };
   if (
   // @ts-ignore
-  ['full-page', 'full-width'].includes((_options$UNSAFE_edito4 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito4 !== void 0 ? _options$UNSAFE_edito4 : '') && editorExperiment('insert-menu-in-right-rail', true)) {
+  ['full-page', 'full-width'].includes((_options$appearance4 = options.appearance) !== null && _options$appearance4 !== void 0 ? _options$appearance4 : '') && 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
@@ -281,10 +293,11 @@ function ToolbarInsertBlockWithInjectionApi({
   providers,
   pluginInjectionApi,
   options,
-  registerToggleDropdownMenuOptions
+  registerToggleDropdownMenuOptions,
+  appearance
 }) {
   var _ref, _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
-  const buttons = toolbarSizeToButtons(toolbarSize);
+  const buttons = toolbarSizeToButtons(toolbarSize, appearance);
   const {
     dateState,
     hyperlinkState,
@@ -357,14 +370,7 @@ function ToolbarInsertBlockWithInjectionApi({
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     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
+    registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions,
+    editorAppearance: options.appearance
   });
 }

package/dist/es2019/ui/ToolbarInsertBlock/create-items.js

@@ -3,6 +3,7 @@ import memoize from 'lodash/memoize';
 import memoizeOne from 'memoize-one';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { action, blockquote, codeblock, date, decision, emoji, expand, horizontalrule, imageUpload, layout, link, media, mention, more, panel, placeholder, status, table, tableSelector } from './item';
 import { messages } from './messages';
 import { shallowEquals } from './shallow-equals';
@@ -196,7 +197,10 @@ const createInsertBlockItems = config => {
       disabled: false
     }));
   }
-  const numButtonsWithoutTableSelector = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
+  let numButtonsWithoutTableSelector = numberOfButtons;
+  if (!fg('platform_editor_toolbar_responsive_fixes')) {
+    numButtonsWithoutTableSelector = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
+  }
   const buttonItems = items.slice(0, numButtonsWithoutTableSelector).map(buttonToItem);
   const remainingItems = items.slice(numButtonsWithoutTableSelector).filter(({
     value: {

package/dist/esm/plugin.js

@@ -16,7 +16,18 @@ import { InsertMenuRail } from './ui/ElementRail';
 import { templateOptions } from './ui/templateOptions';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 import { transformationOptions } from './ui/transformOptions';
-var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize) {
+var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize, appearance) {
+  if (appearance === 'full-page' && fg('platform_editor_toolbar_responsive_fixes')) {
+    switch (toolbarSize) {
+      case ToolbarSize.XXL:
+      case ToolbarSize.XL:
+        return 7;
+      case ToolbarSize.L:
+        return 5;
+      default:
+        return 0;
+    }
+  }
   switch (toolbarSize) {
     case ToolbarSize.XXL:
     case ToolbarSize.XL:
@@ -50,7 +61,7 @@ function handleInsertBlockType(insertCodeBlock, insertPanel, insertBlockQuote) {
   };
 }
 export var insertBlockPlugin = function insertBlockPlugin(_ref) {
-  var _api$primaryToolbar, _options$UNSAFE_edito4;
+  var _api$primaryToolbar, _options$appearance4;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
@@ -94,7 +105,8 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
         isLastItem: isLastItem,
         providers: providers,
         options: options,
-        registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions
+        registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions,
+        appearance: options.appearance
       });
     };
     return /*#__PURE__*/React.createElement(WithProviders, {
@@ -124,10 +136,10 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
      */
     // @ts-expect-error
     getSharedState: function getSharedState(editorState) {
-      var _options$UNSAFE_edito;
+      var _options$appearance;
       if (!editorState ||
       // @ts-ignore
-      !['full-page', 'full-width'].includes((_options$UNSAFE_edito = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito !== void 0 ? _options$UNSAFE_edito : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
+      !['full-page', 'full-width'].includes((_options$appearance = options.appearance) !== null && _options$appearance !== void 0 ? _options$appearance : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
         return;
       }
       var pluginState = elementBrowserPmKey.getState(editorState);
@@ -136,10 +148,10 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
       };
     },
     pmPlugins: function pmPlugins() {
-      var _options$UNSAFE_edito2;
+      var _options$appearance2;
       if (
       // @ts-ignore
-      !['full-page', 'full-width'].includes((_options$UNSAFE_edito2 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito2 !== void 0 ? _options$UNSAFE_edito2 : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
+      !['full-page', 'full-width'].includes((_options$appearance2 = options.appearance) !== null && _options$appearance2 !== void 0 ? _options$appearance2 : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
         [];
       }
       return [{
@@ -223,11 +235,11 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
       // If we decide to ship the feature, we will consider a separate plugin if needed.
       // Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3983684902/Experiment+Drive+element+usage+via+element+templates
       quickInsert: function quickInsert(intl) {
-        var _options$UNSAFE_edito3;
+        var _options$appearance3;
         var locale = intl.locale;
         var isEligible = locale.startsWith('en') &&
         // @ts-ignore
-        ['full-page', 'full-width'].includes((_options$UNSAFE_edito3 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito3 !== void 0 ? _options$UNSAFE_edito3 : '');
+        ['full-page', 'full-width'].includes((_options$appearance3 = options.appearance) !== null && _options$appearance3 !== void 0 ? _options$appearance3 : '');
         if (isEligible && editorExperiment('element-level-templates', true, {
           exposure: true
         })) {
@@ -247,7 +259,7 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
   };
   if (
   // @ts-ignore
-  ['full-page', 'full-width'].includes((_options$UNSAFE_edito4 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito4 !== void 0 ? _options$UNSAFE_edito4 : '') && editorExperiment('insert-menu-in-right-rail', true)) {
+  ['full-page', 'full-width'].includes((_options$appearance4 = options.appearance) !== null && _options$appearance4 !== void 0 ? _options$appearance4 : '') && 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
@@ -279,8 +291,9 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     providers = _ref3.providers,
     pluginInjectionApi = _ref3.pluginInjectionApi,
     options = _ref3.options,
-    registerToggleDropdownMenuOptions = _ref3.registerToggleDropdownMenuOptions;
-  var buttons = toolbarSizeToButtons(toolbarSize);
+    registerToggleDropdownMenuOptions = _ref3.registerToggleDropdownMenuOptions,
+    appearance = _ref3.appearance;
+  var buttons = toolbarSizeToButtons(toolbarSize, appearance);
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']),
     dateState = _useSharedPluginState.dateState,
     hyperlinkState = _useSharedPluginState.hyperlinkState,
@@ -352,14 +365,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     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
+    registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions,
+    editorAppearance: options.appearance
   });
 }

package/dist/esm/ui/ToolbarInsertBlock/create-items.js

@@ -7,6 +7,7 @@ import memoize from 'lodash/memoize';
 import memoizeOne from 'memoize-one';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { action, blockquote, codeblock, date, decision, emoji, expand, horizontalrule, imageUpload, layout, link, media, mention, more, panel, placeholder, status, table, tableSelector } from './item';
 import { messages } from './messages';
 import { shallowEquals } from './shallow-equals';
@@ -208,7 +209,10 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
       disabled: false
     }));
   }
-  var numButtonsWithoutTableSelector = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
+  var numButtonsWithoutTableSelector = numberOfButtons;
+  if (!fg('platform_editor_toolbar_responsive_fixes')) {
+    numButtonsWithoutTableSelector = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
+  }
   var buttonItems = items.slice(0, numButtonsWithoutTableSelector).map(buttonToItem);
   var remainingItems = items.slice(numButtonsWithoutTableSelector).filter(function (_ref) {
     var name = _ref.value.name;

package/dist/types/plugin.d.ts

@@ -1,4 +1,4 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { EditorAppearance, NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { InsertBlockPluginDependencies } from './types';
 export interface InsertBlockOptions {
     allowTables?: boolean;
@@ -8,6 +8,7 @@ export interface InsertBlockOptions {
     nativeStatusSupported?: boolean;
     showElementBrowserLink?: boolean;
     tableSelectorSupported?: boolean;
+    appearance?: EditorAppearance;
 }
 export type InsertBlockPlugin = NextEditorPlugin<'insertBlock', {
     pluginConfiguration: InsertBlockOptions | undefined;

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

@@ -1,4 +1,4 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { EditorAppearance, NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { InsertBlockPluginDependencies } from './types';
 export interface InsertBlockOptions {
     allowTables?: boolean;
@@ -8,6 +8,7 @@ export interface InsertBlockOptions {
     nativeStatusSupported?: boolean;
     showElementBrowserLink?: boolean;
     tableSelectorSupported?: boolean;
+    appearance?: EditorAppearance;
 }
 export type InsertBlockPlugin = NextEditorPlugin<'insertBlock', {
     pluginConfiguration: InsertBlockOptions | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "2.1.2",
+	"version": "2.2.1",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,8 +31,8 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/editor-common": "^91.0.0",
+		"@atlaskit/button": "^20.2.0",
+		"@atlaskit/editor-common": "^91.1.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-block-type": "^3.15.0",
 		"@atlaskit/editor-plugin-code-block": "^3.3.0",
@@ -44,8 +44,8 @@
 		"@atlaskit/editor-plugin-hyperlink": "^2.9.0",
 		"@atlaskit/editor-plugin-image-upload": "^1.2.0",
 		"@atlaskit/editor-plugin-layout": "^1.8.0",
-		"@atlaskit/editor-plugin-media": "^1.32.0",
-		"@atlaskit/editor-plugin-media-insert": "^2.8.0",
+		"@atlaskit/editor-plugin-media": "^1.33.0",
+		"@atlaskit/editor-plugin-media-insert": "^3.0.0",
 		"@atlaskit/editor-plugin-mentions": "^2.6.0",
 		"@atlaskit/editor-plugin-panel": "^2.5.0",
 		"@atlaskit/editor-plugin-placeholder-text": "^1.7.0",
@@ -53,21 +53,21 @@
 		"@atlaskit/editor-plugin-quick-insert": "^1.4.0",
 		"@atlaskit/editor-plugin-rule": "^1.8.0",
 		"@atlaskit/editor-plugin-status": "^2.4.0",
-		"@atlaskit/editor-plugin-table": "^7.27.0",
+		"@atlaskit/editor-plugin-table": "^7.28.0",
 		"@atlaskit/editor-plugin-tasks-and-decisions": "^2.6.0",
 		"@atlaskit/editor-plugin-type-ahead": "^1.8.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
-		"@atlaskit/editor-shared-styles": "^2.13.0",
+		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/emoji": "^67.8.0",
-		"@atlaskit/heading": "2.4.5",
+		"@atlaskit/heading": "2.4.6",
 		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/icon-lab": "^0.2.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.1.0",
-		"@atlaskit/tokens": "^1.61.0",
-		"@atlaskit/tooltip": "18.7.2",
+		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tooltip": "18.7.3",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -124,6 +124,9 @@
 	"platform-feature-flags": {
 		"platform_editor_get_emoji_provider_from_config": {
 			"type": "boolean"
+		},
+		"platform_editor_toolbar_responsive_fixes": {
+			"type": "boolean"
 		}
 	}
 }