@atlaskit/editor-plugin-insert-block 3.2.7 → 3.2.9

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 3.2.9
+
+### Patch Changes
+
+- [#160575](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160575)
+  [`c340cf0e2d6c2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c340cf0e2d6c2) -
+  Expose emoji provider promise to initialise in the toolbar earlier.
+- Updated dependencies
+
+## 3.2.8
+
+### Patch Changes
+
+- [#154313](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154313)
+  [`36c5067417688`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/36c5067417688) -
+  Clean up platform_editor_insert_button_on_primary_toolbar feature gate
+- Updated dependencies
+
 ## 3.2.7
 
 ### Patch Changes

package/dist/cjs/insertBlockPlugin.js

@@ -15,6 +15,7 @@ var _types = require("@atlaskit/editor-common/types");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _consts = require("@atlaskit/editor-plugin-block-type/consts");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _toggleInsertBlock = require("./pm-plugins/toggleInsertBlock");
 var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
 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); }
@@ -137,6 +138,24 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
         appearance: options.appearance
       });
     };
+    if ((0, _experiments.editorExperiment)('platform_editor_prevent_toolbar_layout_shifts', true)) {
+      return /*#__PURE__*/_react.default.createElement(ToolbarInsertBlockWithInjectionApi, {
+        pluginInjectionApi: api,
+        editorView: editorView,
+        editorActions: editorActions,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        providerFactory: providerFactory,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        toolbarSize: toolbarSize,
+        disabled: disabled,
+        isToolbarReducedSpacing: isToolbarReducedSpacing,
+        isLastItem: isLastItem,
+        options: options,
+        appearance: options.appearance
+      });
+    }
     return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
       providerFactory: providerFactory,
       providers: ['emojiProvider'],
@@ -198,7 +217,9 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
   return plugin;
 };
 var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
-  var emojiProviderSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.emojiProvider');
+  var emojiProviderSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.emojiProvider', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_prevent_toolbar_layout_shifts', true)
+  });
   var showMediaPicker = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.showMediaPicker');
   var mediaAllowsUploads = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.allowsUploads');
   var showElementBrowser = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'insertBlock.showElementBrowser');
@@ -290,12 +311,17 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
     availableWrapperBlockTypes = _useSharedState.availableWrapperBlockTypes,
     canInsertLink = _useSharedState.canInsertLink,
     activeLinkMark = _useSharedState.activeLinkMark;
+  var emojiProviderPromise = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'emoji.emojiProviderPromise', {
+    disabled: !(0, _experiments.editorExperiment)('platform_editor_prevent_toolbar_layout_shifts', true)
+  });
   var getEmojiProvider = function getEmojiProvider() {
     if (emojiProviderSelector) {
       return Promise.resolve(emojiProviderSelector);
     }
   };
-  var emojiProvider = getEmojiProvider();
+  var emojiProvider = (0, _experiments.editorExperiment)('platform_editor_prevent_toolbar_layout_shifts', true, {
+    exposure: true
+  }) ? emojiProviderPromise : getEmojiProvider();
   var onShowMediaPicker = function onShowMediaPicker(mountInfo) {
     if (!showMediaPicker) {
       return;

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

@@ -13,6 +13,7 @@ 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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _item = require("./item");
 var _shallowEquals = require("./shallow-equals");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -53,6 +54,9 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
     linkDisabled = config.linkDisabled,
     emojiDisabled = config.emojiDisabled,
     emojiProvider = config.emojiProvider,
+    hasEmojiPlugin = config.hasEmojiPlugin,
+    hasMentionsPlugin = config.hasMentionsPlugin,
+    hasMediaPlugin = config.hasMediaPlugin,
     nativeStatusSupported = config.nativeStatusSupported,
     insertMenuItems = config.insertMenuItems,
     dateEnabled = config.dateEnabled,
@@ -81,34 +85,65 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
       'aria-haspopup': 'dialog'
     }));
   }
-  if (mediaSupported && mediaUploadsEnabled) {
-    items.push((0, _item.media)({
-      content: formatMessage(_messages.toolbarInsertBlockMessages.addMediaFiles),
-      tooltipDescription: formatMessage(_messages.toolbarInsertBlockMessages.mediaFilesDescription),
-      disabled: isOffline
-    }));
-  }
-  if (imageUploadSupported) {
-    items.push((0, _item.imageUpload)({
-      content: formatMessage(_messages.toolbarInsertBlockMessages.image),
-      disabled: !imageUploadEnabled || isOffline
-    }));
-  }
-  if (mentionsSupported) {
-    items.push((0, _item.mention)({
-      content: formatMessage(_messages.toolbarInsertBlockMessages.mention),
-      tooltipDescription: formatMessage(_messages.toolbarInsertBlockMessages.mentionDescription),
-      disabled: !isTypeAheadAllowed || !!mentionsDisabled,
-      'aria-haspopup': 'listbox'
-    }));
-  }
-  if (emojiProvider) {
-    items.push((0, _item.emoji)({
-      content: formatMessage(_messages.toolbarInsertBlockMessages.emoji),
-      tooltipDescription: formatMessage(_messages.toolbarInsertBlockMessages.emojiDescription),
-      disabled: emojiDisabled || !isTypeAheadAllowed,
-      'aria-haspopup': 'dialog'
-    }));
+  if ((0, _experiments.editorExperiment)('platform_editor_prevent_toolbar_layout_shifts', true)) {
+    if (imageUploadSupported) {
+      items.push((0, _item.imageUpload)({
+        content: formatMessage(_messages.toolbarInsertBlockMessages.image),
+        disabled: !imageUploadEnabled || isOffline
+      }));
+    } else if (hasMediaPlugin) {
+      items.push((0, _item.media)({
+        content: formatMessage(_messages.toolbarInsertBlockMessages.addMediaFiles),
+        tooltipDescription: formatMessage(_messages.toolbarInsertBlockMessages.mediaFilesDescription),
+        disabled: isOffline || !mediaSupported || !mediaUploadsEnabled
+      }));
+    }
+    if (hasMentionsPlugin) {
+      items.push((0, _item.mention)({
+        content: formatMessage(_messages.toolbarInsertBlockMessages.mention),
+        tooltipDescription: formatMessage(_messages.toolbarInsertBlockMessages.mentionDescription),
+        disabled: !isTypeAheadAllowed || !!mentionsDisabled || !mentionsSupported,
+        'aria-haspopup': 'listbox'
+      }));
+    }
+    if (hasEmojiPlugin) {
+      items.push((0, _item.emoji)({
+        content: formatMessage(_messages.toolbarInsertBlockMessages.emoji),
+        tooltipDescription: formatMessage(_messages.toolbarInsertBlockMessages.emojiDescription),
+        disabled: emojiDisabled || !isTypeAheadAllowed || !emojiProvider,
+        'aria-haspopup': 'dialog'
+      }));
+    }
+  } else {
+    if (mediaSupported && mediaUploadsEnabled) {
+      items.push((0, _item.media)({
+        content: formatMessage(_messages.toolbarInsertBlockMessages.addMediaFiles),
+        tooltipDescription: formatMessage(_messages.toolbarInsertBlockMessages.mediaFilesDescription),
+        disabled: isOffline
+      }));
+    }
+    if (imageUploadSupported) {
+      items.push((0, _item.imageUpload)({
+        content: formatMessage(_messages.toolbarInsertBlockMessages.image),
+        disabled: !imageUploadEnabled || isOffline
+      }));
+    }
+    if (mentionsSupported) {
+      items.push((0, _item.mention)({
+        content: formatMessage(_messages.toolbarInsertBlockMessages.mention),
+        tooltipDescription: formatMessage(_messages.toolbarInsertBlockMessages.mentionDescription),
+        disabled: !isTypeAheadAllowed || !!mentionsDisabled,
+        'aria-haspopup': 'listbox'
+      }));
+    }
+    if (emojiProvider) {
+      items.push((0, _item.emoji)({
+        content: formatMessage(_messages.toolbarInsertBlockMessages.emoji),
+        tooltipDescription: formatMessage(_messages.toolbarInsertBlockMessages.emojiDescription),
+        disabled: emojiDisabled || !isTypeAheadAllowed,
+        'aria-haspopup': 'dialog'
+      }));
+    }
   }
   if (tableSupported) {
     items.push((0, _item.table)({

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

@@ -805,7 +805,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         showElementBrowserLink: this.props.showElementBrowserLink || false,
         pluginInjectionApi: this.props.pluginInjectionApi,
         isFullPageAppearance: isFullPageAppearance
-      })), (!((_this$props$pluginInj = this.props.pluginInjectionApi) !== null && _this$props$pluginInj !== void 0 && _this$props$pluginInj.primaryToolbar) && this.props.showSeparator || isFullPageAppearance && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_insert_button_on_primary_toolbar')) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+      })), (!((_this$props$pluginInj = this.props.pluginInjectionApi) !== null && _this$props$pluginInj !== void 0 && _this$props$pluginInj.primaryToolbar) && this.props.showSeparator || isFullPageAppearance && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) && /* 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
@@ -814,6 +814,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
+      var _props$pluginInjectio, _props$pluginInjectio2, _props$pluginInjectio3;
       var _createItems = (0, _createItems3.createItems)({
           isTypeAheadAllowed: props.isTypeAheadAllowed,
           tableSupported: props.tableSupported,
@@ -830,6 +831,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           linkSupported: props.linkSupported,
           linkDisabled: props.linkDisabled,
           emojiDisabled: props.emojiDisabled,
+          hasEmojiPlugin: !!((_props$pluginInjectio = props.pluginInjectionApi) !== null && _props$pluginInjectio !== void 0 && _props$pluginInjectio.emoji),
+          hasMentionsPlugin: !!((_props$pluginInjectio2 = props.pluginInjectionApi) !== null && _props$pluginInjectio2 !== void 0 && _props$pluginInjectio2.mention),
+          hasMediaPlugin: !!((_props$pluginInjectio3 = props.pluginInjectionApi) !== null && _props$pluginInjectio3 !== void 0 && _props$pluginInjectio3.media),
           nativeStatusSupported: props.nativeStatusSupported,
           dateEnabled: props.dateEnabled,
           placeholderTextEnabled: props.placeholderTextEnabled,

package/dist/es2019/insertBlockPlugin.js

@@ -7,6 +7,7 @@ import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { toggleInsertBlockPmKey, toggleInsertBlockPmPlugin } from './pm-plugins/toggleInsertBlock';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
@@ -121,6 +122,24 @@ export const insertBlockPlugin = ({
         appearance: options.appearance
       });
     };
+    if (editorExperiment('platform_editor_prevent_toolbar_layout_shifts', true)) {
+      return /*#__PURE__*/React.createElement(ToolbarInsertBlockWithInjectionApi, {
+        pluginInjectionApi: api,
+        editorView: editorView,
+        editorActions: editorActions,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        providerFactory: providerFactory,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        toolbarSize: toolbarSize,
+        disabled: disabled,
+        isToolbarReducedSpacing: isToolbarReducedSpacing,
+        isLastItem: isLastItem,
+        options: options,
+        appearance: options.appearance
+      });
+    }
     return /*#__PURE__*/React.createElement(WithProviders, {
       providerFactory: providerFactory,
       providers: ['emojiProvider'],
@@ -181,7 +200,9 @@ export const insertBlockPlugin = ({
   return plugin;
 };
 const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const emojiProviderSelector = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
+  const emojiProviderSelector = useSharedPluginStateSelector(api, 'emoji.emojiProvider', {
+    disabled: editorExperiment('platform_editor_prevent_toolbar_layout_shifts', true)
+  });
   const showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
   const mediaAllowsUploads = useSharedPluginStateSelector(api, 'media.allowsUploads');
   const showElementBrowser = useSharedPluginStateSelector(api, 'insertBlock.showElementBrowser');
@@ -276,12 +297,17 @@ function ToolbarInsertBlockWithInjectionApi({
     canInsertLink,
     activeLinkMark
   } = useSharedState(pluginInjectionApi);
+  const emojiProviderPromise = useSharedPluginStateSelector(pluginInjectionApi, 'emoji.emojiProviderPromise', {
+    disabled: !editorExperiment('platform_editor_prevent_toolbar_layout_shifts', true)
+  });
   const getEmojiProvider = () => {
     if (emojiProviderSelector) {
       return Promise.resolve(emojiProviderSelector);
     }
   };
-  const emojiProvider = getEmojiProvider();
+  const emojiProvider = editorExperiment('platform_editor_prevent_toolbar_layout_shifts', true, {
+    exposure: true
+  }) ? emojiProviderPromise : getEmojiProvider();
   const onShowMediaPicker = mountInfo => {
     if (!showMediaPicker) {
       return;

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

@@ -4,6 +4,7 @@ import memoizeOne from 'memoize-one';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { blockTypeMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { action, blockquote, codeblock, date, decision, emoji, expand, horizontalrule, imageUpload, layout, link, media, mention, more, panel, placeholder, status, table, tableSelector } from './item';
 import { shallowEquals } from './shallow-equals';
 const buttonToItem = memoize(button => ({
@@ -39,6 +40,9 @@ const createInsertBlockItems = config => {
     linkDisabled,
     emojiDisabled,
     emojiProvider,
+    hasEmojiPlugin,
+    hasMentionsPlugin,
+    hasMediaPlugin,
     nativeStatusSupported,
     insertMenuItems,
     dateEnabled,
@@ -68,34 +72,65 @@ const createInsertBlockItems = config => {
       'aria-haspopup': 'dialog'
     }));
   }
-  if (mediaSupported && mediaUploadsEnabled) {
-    items.push(media({
-      content: formatMessage(messages.addMediaFiles),
-      tooltipDescription: formatMessage(messages.mediaFilesDescription),
-      disabled: isOffline
-    }));
-  }
-  if (imageUploadSupported) {
-    items.push(imageUpload({
-      content: formatMessage(messages.image),
-      disabled: !imageUploadEnabled || isOffline
-    }));
-  }
-  if (mentionsSupported) {
-    items.push(mention({
-      content: formatMessage(messages.mention),
-      tooltipDescription: formatMessage(messages.mentionDescription),
-      disabled: !isTypeAheadAllowed || !!mentionsDisabled,
-      'aria-haspopup': 'listbox'
-    }));
-  }
-  if (emojiProvider) {
-    items.push(emoji({
-      content: formatMessage(messages.emoji),
-      tooltipDescription: formatMessage(messages.emojiDescription),
-      disabled: emojiDisabled || !isTypeAheadAllowed,
-      'aria-haspopup': 'dialog'
-    }));
+  if (editorExperiment('platform_editor_prevent_toolbar_layout_shifts', true)) {
+    if (imageUploadSupported) {
+      items.push(imageUpload({
+        content: formatMessage(messages.image),
+        disabled: !imageUploadEnabled || isOffline
+      }));
+    } else if (hasMediaPlugin) {
+      items.push(media({
+        content: formatMessage(messages.addMediaFiles),
+        tooltipDescription: formatMessage(messages.mediaFilesDescription),
+        disabled: isOffline || !mediaSupported || !mediaUploadsEnabled
+      }));
+    }
+    if (hasMentionsPlugin) {
+      items.push(mention({
+        content: formatMessage(messages.mention),
+        tooltipDescription: formatMessage(messages.mentionDescription),
+        disabled: !isTypeAheadAllowed || !!mentionsDisabled || !mentionsSupported,
+        'aria-haspopup': 'listbox'
+      }));
+    }
+    if (hasEmojiPlugin) {
+      items.push(emoji({
+        content: formatMessage(messages.emoji),
+        tooltipDescription: formatMessage(messages.emojiDescription),
+        disabled: emojiDisabled || !isTypeAheadAllowed || !emojiProvider,
+        'aria-haspopup': 'dialog'
+      }));
+    }
+  } else {
+    if (mediaSupported && mediaUploadsEnabled) {
+      items.push(media({
+        content: formatMessage(messages.addMediaFiles),
+        tooltipDescription: formatMessage(messages.mediaFilesDescription),
+        disabled: isOffline
+      }));
+    }
+    if (imageUploadSupported) {
+      items.push(imageUpload({
+        content: formatMessage(messages.image),
+        disabled: !imageUploadEnabled || isOffline
+      }));
+    }
+    if (mentionsSupported) {
+      items.push(mention({
+        content: formatMessage(messages.mention),
+        tooltipDescription: formatMessage(messages.mentionDescription),
+        disabled: !isTypeAheadAllowed || !!mentionsDisabled,
+        'aria-haspopup': 'listbox'
+      }));
+    }
+    if (emojiProvider) {
+      items.push(emoji({
+        content: formatMessage(messages.emoji),
+        tooltipDescription: formatMessage(messages.emojiDescription),
+        disabled: emojiDisabled || !isTypeAheadAllowed,
+        'aria-haspopup': 'dialog'
+      }));
+    }
   }
   if (tableSupported) {
     items.push(table({

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

@@ -565,6 +565,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
     }));
   }
   static getDerivedStateFromProps(props, state) {
+    var _props$pluginInjectio, _props$pluginInjectio2, _props$pluginInjectio3;
     const [buttons, dropdownItems] = createItems({
       isTypeAheadAllowed: props.isTypeAheadAllowed,
       tableSupported: props.tableSupported,
@@ -581,6 +582,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
       linkSupported: props.linkSupported,
       linkDisabled: props.linkDisabled,
       emojiDisabled: props.emojiDisabled,
+      hasEmojiPlugin: !!((_props$pluginInjectio = props.pluginInjectionApi) !== null && _props$pluginInjectio !== void 0 && _props$pluginInjectio.emoji),
+      hasMentionsPlugin: !!((_props$pluginInjectio2 = props.pluginInjectionApi) !== null && _props$pluginInjectio2 !== void 0 && _props$pluginInjectio2.mention),
+      hasMediaPlugin: !!((_props$pluginInjectio3 = props.pluginInjectionApi) !== null && _props$pluginInjectio3 !== void 0 && _props$pluginInjectio3.media),
       nativeStatusSupported: props.nativeStatusSupported,
       dateEnabled: props.dateEnabled,
       placeholderTextEnabled: props.placeholderTextEnabled,
@@ -843,7 +847,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       showElementBrowserLink: this.props.showElementBrowserLink || false,
       pluginInjectionApi: this.props.pluginInjectionApi,
       isFullPageAppearance: isFullPageAppearance
-    })), (!((_this$props$pluginInj4 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj4 !== void 0 && _this$props$pluginInj4.primaryToolbar) && this.props.showSeparator || isFullPageAppearance && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_insert_button_on_primary_toolbar')) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+    })), (!((_this$props$pluginInj4 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj4 !== void 0 && _this$props$pluginInj4.primaryToolbar) && this.props.showSeparator || isFullPageAppearance && editorExperiment('platform_editor_controls', 'variant1')) && /* 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/insertBlockPlugin.js

@@ -7,6 +7,7 @@ import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { toggleInsertBlockPmKey, toggleInsertBlockPmPlugin } from './pm-plugins/toggleInsertBlock';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
@@ -126,6 +127,24 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
         appearance: options.appearance
       });
     };
+    if (editorExperiment('platform_editor_prevent_toolbar_layout_shifts', true)) {
+      return /*#__PURE__*/React.createElement(ToolbarInsertBlockWithInjectionApi, {
+        pluginInjectionApi: api,
+        editorView: editorView,
+        editorActions: editorActions,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        providerFactory: providerFactory,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        toolbarSize: toolbarSize,
+        disabled: disabled,
+        isToolbarReducedSpacing: isToolbarReducedSpacing,
+        isLastItem: isLastItem,
+        options: options,
+        appearance: options.appearance
+      });
+    }
     return /*#__PURE__*/React.createElement(WithProviders, {
       providerFactory: providerFactory,
       providers: ['emojiProvider'],
@@ -187,7 +206,9 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
   return plugin;
 };
 var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var emojiProviderSelector = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
+  var emojiProviderSelector = useSharedPluginStateSelector(api, 'emoji.emojiProvider', {
+    disabled: editorExperiment('platform_editor_prevent_toolbar_layout_shifts', true)
+  });
   var showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
   var mediaAllowsUploads = useSharedPluginStateSelector(api, 'media.allowsUploads');
   var showElementBrowser = useSharedPluginStateSelector(api, 'insertBlock.showElementBrowser');
@@ -279,12 +300,17 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
     availableWrapperBlockTypes = _useSharedState.availableWrapperBlockTypes,
     canInsertLink = _useSharedState.canInsertLink,
     activeLinkMark = _useSharedState.activeLinkMark;
+  var emojiProviderPromise = useSharedPluginStateSelector(pluginInjectionApi, 'emoji.emojiProviderPromise', {
+    disabled: !editorExperiment('platform_editor_prevent_toolbar_layout_shifts', true)
+  });
   var getEmojiProvider = function getEmojiProvider() {
     if (emojiProviderSelector) {
       return Promise.resolve(emojiProviderSelector);
     }
   };
-  var emojiProvider = getEmojiProvider();
+  var emojiProvider = editorExperiment('platform_editor_prevent_toolbar_layout_shifts', true, {
+    exposure: true
+  }) ? emojiProviderPromise : getEmojiProvider();
   var onShowMediaPicker = function onShowMediaPicker(mountInfo) {
     if (!showMediaPicker) {
       return;

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

@@ -8,6 +8,7 @@ import memoizeOne from 'memoize-one';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { blockTypeMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { action, blockquote, codeblock, date, decision, emoji, expand, horizontalrule, imageUpload, layout, link, media, mention, more, panel, placeholder, status, table, tableSelector } from './item';
 import { shallowEquals } from './shallow-equals';
 var buttonToItem = memoize(function (button) {
@@ -46,6 +47,9 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
     linkDisabled = config.linkDisabled,
     emojiDisabled = config.emojiDisabled,
     emojiProvider = config.emojiProvider,
+    hasEmojiPlugin = config.hasEmojiPlugin,
+    hasMentionsPlugin = config.hasMentionsPlugin,
+    hasMediaPlugin = config.hasMediaPlugin,
     nativeStatusSupported = config.nativeStatusSupported,
     insertMenuItems = config.insertMenuItems,
     dateEnabled = config.dateEnabled,
@@ -74,34 +78,65 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
       'aria-haspopup': 'dialog'
     }));
   }
-  if (mediaSupported && mediaUploadsEnabled) {
-    items.push(media({
-      content: formatMessage(messages.addMediaFiles),
-      tooltipDescription: formatMessage(messages.mediaFilesDescription),
-      disabled: isOffline
-    }));
-  }
-  if (imageUploadSupported) {
-    items.push(imageUpload({
-      content: formatMessage(messages.image),
-      disabled: !imageUploadEnabled || isOffline
-    }));
-  }
-  if (mentionsSupported) {
-    items.push(mention({
-      content: formatMessage(messages.mention),
-      tooltipDescription: formatMessage(messages.mentionDescription),
-      disabled: !isTypeAheadAllowed || !!mentionsDisabled,
-      'aria-haspopup': 'listbox'
-    }));
-  }
-  if (emojiProvider) {
-    items.push(emoji({
-      content: formatMessage(messages.emoji),
-      tooltipDescription: formatMessage(messages.emojiDescription),
-      disabled: emojiDisabled || !isTypeAheadAllowed,
-      'aria-haspopup': 'dialog'
-    }));
+  if (editorExperiment('platform_editor_prevent_toolbar_layout_shifts', true)) {
+    if (imageUploadSupported) {
+      items.push(imageUpload({
+        content: formatMessage(messages.image),
+        disabled: !imageUploadEnabled || isOffline
+      }));
+    } else if (hasMediaPlugin) {
+      items.push(media({
+        content: formatMessage(messages.addMediaFiles),
+        tooltipDescription: formatMessage(messages.mediaFilesDescription),
+        disabled: isOffline || !mediaSupported || !mediaUploadsEnabled
+      }));
+    }
+    if (hasMentionsPlugin) {
+      items.push(mention({
+        content: formatMessage(messages.mention),
+        tooltipDescription: formatMessage(messages.mentionDescription),
+        disabled: !isTypeAheadAllowed || !!mentionsDisabled || !mentionsSupported,
+        'aria-haspopup': 'listbox'
+      }));
+    }
+    if (hasEmojiPlugin) {
+      items.push(emoji({
+        content: formatMessage(messages.emoji),
+        tooltipDescription: formatMessage(messages.emojiDescription),
+        disabled: emojiDisabled || !isTypeAheadAllowed || !emojiProvider,
+        'aria-haspopup': 'dialog'
+      }));
+    }
+  } else {
+    if (mediaSupported && mediaUploadsEnabled) {
+      items.push(media({
+        content: formatMessage(messages.addMediaFiles),
+        tooltipDescription: formatMessage(messages.mediaFilesDescription),
+        disabled: isOffline
+      }));
+    }
+    if (imageUploadSupported) {
+      items.push(imageUpload({
+        content: formatMessage(messages.image),
+        disabled: !imageUploadEnabled || isOffline
+      }));
+    }
+    if (mentionsSupported) {
+      items.push(mention({
+        content: formatMessage(messages.mention),
+        tooltipDescription: formatMessage(messages.mentionDescription),
+        disabled: !isTypeAheadAllowed || !!mentionsDisabled,
+        'aria-haspopup': 'listbox'
+      }));
+    }
+    if (emojiProvider) {
+      items.push(emoji({
+        content: formatMessage(messages.emoji),
+        tooltipDescription: formatMessage(messages.emojiDescription),
+        disabled: emojiDisabled || !isTypeAheadAllowed,
+        'aria-haspopup': 'dialog'
+      }));
+    }
   }
   if (tableSupported) {
     items.push(table({

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

@@ -799,7 +799,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         showElementBrowserLink: this.props.showElementBrowserLink || false,
         pluginInjectionApi: this.props.pluginInjectionApi,
         isFullPageAppearance: isFullPageAppearance
-      })), (!((_this$props$pluginInj = this.props.pluginInjectionApi) !== null && _this$props$pluginInj !== void 0 && _this$props$pluginInj.primaryToolbar) && this.props.showSeparator || isFullPageAppearance && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_insert_button_on_primary_toolbar')) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+      })), (!((_this$props$pluginInj = this.props.pluginInjectionApi) !== null && _this$props$pluginInj !== void 0 && _this$props$pluginInj.primaryToolbar) && this.props.showSeparator || isFullPageAppearance && editorExperiment('platform_editor_controls', 'variant1')) && /* 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
@@ -808,6 +808,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
+      var _props$pluginInjectio, _props$pluginInjectio2, _props$pluginInjectio3;
       var _createItems = createItems({
           isTypeAheadAllowed: props.isTypeAheadAllowed,
           tableSupported: props.tableSupported,
@@ -824,6 +825,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           linkSupported: props.linkSupported,
           linkDisabled: props.linkDisabled,
           emojiDisabled: props.emojiDisabled,
+          hasEmojiPlugin: !!((_props$pluginInjectio = props.pluginInjectionApi) !== null && _props$pluginInjectio !== void 0 && _props$pluginInjectio.emoji),
+          hasMentionsPlugin: !!((_props$pluginInjectio2 = props.pluginInjectionApi) !== null && _props$pluginInjectio2 !== void 0 && _props$pluginInjectio2.mention),
+          hasMediaPlugin: !!((_props$pluginInjectio3 = props.pluginInjectionApi) !== null && _props$pluginInjectio3 !== void 0 && _props$pluginInjectio3.media),
           nativeStatusSupported: props.nativeStatusSupported,
           dateEnabled: props.dateEnabled,
           placeholderTextEnabled: props.placeholderTextEnabled,

package/dist/types/ui/ToolbarInsertBlock/create-items.d.ts

@@ -20,6 +20,9 @@ export interface CreateItemsConfig {
     linkSupported?: boolean;
     linkDisabled?: boolean;
     emojiDisabled?: boolean;
+    hasEmojiPlugin?: boolean;
+    hasMentionsPlugin?: boolean;
+    hasMediaPlugin?: boolean;
     nativeStatusSupported?: boolean;
     dateEnabled?: boolean;
     placeholderTextEnabled?: boolean;

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

@@ -20,6 +20,9 @@ export interface CreateItemsConfig {
     linkSupported?: boolean;
     linkDisabled?: boolean;
     emojiDisabled?: boolean;
+    hasEmojiPlugin?: boolean;
+    hasMentionsPlugin?: boolean;
+    hasMediaPlugin?: boolean;
     nativeStatusSupported?: boolean;
     dateEnabled?: boolean;
     placeholderTextEnabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "3.2.7",
+	"version": "3.2.9",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,23 +33,23 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/button": "^23.0.0",
-		"@atlaskit/editor-common": "^105.0.0",
-		"@atlaskit/editor-plugin-analytics": "^2.2.0",
+		"@atlaskit/button": "^23.2.0",
+		"@atlaskit/editor-common": "^105.10.0",
+		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-block-type": "^5.1.0",
 		"@atlaskit/editor-plugin-code-block": "^4.4.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
 		"@atlaskit/editor-plugin-date": "^4.3.0",
-		"@atlaskit/editor-plugin-emoji": "^3.6.0",
+		"@atlaskit/editor-plugin-emoji": "^3.7.0",
 		"@atlaskit/editor-plugin-expand": "^3.2.0",
-		"@atlaskit/editor-plugin-extension": "^5.3.0",
+		"@atlaskit/editor-plugin-extension": "^5.4.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.4.0",
 		"@atlaskit/editor-plugin-hyperlink": "^4.4.0",
 		"@atlaskit/editor-plugin-image-upload": "^2.0.0",
 		"@atlaskit/editor-plugin-layout": "^2.7.0",
 		"@atlaskit/editor-plugin-media": "^3.0.0",
 		"@atlaskit/editor-plugin-media-insert": "^6.3.0",
-		"@atlaskit/editor-plugin-mentions": "^4.6.0",
+		"@atlaskit/editor-plugin-mentions": "^4.7.0",
 		"@atlaskit/editor-plugin-metrics": "^3.4.0",
 		"@atlaskit/editor-plugin-panel": "^4.4.0",
 		"@atlaskit/editor-plugin-placeholder-text": "^2.3.0",
@@ -57,20 +57,20 @@
 		"@atlaskit/editor-plugin-quick-insert": "^2.5.0",
 		"@atlaskit/editor-plugin-rule": "^2.1.0",
 		"@atlaskit/editor-plugin-status": "^3.1.0",
-		"@atlaskit/editor-plugin-table": "^10.9.0",
+		"@atlaskit/editor-plugin-table": "^10.11.0",
 		"@atlaskit/editor-plugin-tasks-and-decisions": "^5.1.0",
-		"@atlaskit/editor-plugin-type-ahead": "^2.6.0",
+		"@atlaskit/editor-plugin-type-ahead": "^2.7.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
-		"@atlaskit/emoji": "^69.1.0",
+		"@atlaskit/emoji": "^69.2.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^26.0.0",
-		"@atlaskit/icon-lab": "^4.12.0",
+		"@atlaskit/icon": "^26.3.0",
+		"@atlaskit/icon-lab": "^4.16.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.7.0",
+		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.19.0",
-		"@atlaskit/tokens": "^4.8.0",
+		"@atlaskit/tmp-editor-statsig": "^5.0.0",
+		"@atlaskit/tokens": "^4.9.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -142,9 +142,6 @@
 		"platform_editor_add_media_from_url_rollout": {
 			"type": "boolean"
 		},
-		"platform_editor_insert_button_on_primary_toolbar": {
-			"type": "boolean"
-		},
 		"platform_editor_refactor_view_more": {
 			"type": "boolean"
 		}