@atlaskit/editor-plugin-insert-block 3.2.6 → 3.2.8

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 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
+
+- [#152768](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152768)
+  [`2e80bc703b181`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2e80bc703b181) -
+  [ED-27555] Migrate to useSharedPluginStateSelector for insert-block, layout, loom plugins
+- Updated dependencies
+
 ## 3.2.6
 
 ### Patch Changes

package/dist/cjs/insertBlockPlugin.js

@@ -12,6 +12,7 @@ var _elementBrowser = require("@atlaskit/editor-common/element-browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 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 _toggleInsertBlock = require("./pm-plugins/toggleInsertBlock");
@@ -196,8 +197,69 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
   };
   return plugin;
 };
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var emojiProviderSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.emojiProvider');
+  var showMediaPicker = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.showMediaPicker');
+  var mediaAllowsUploads = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.allowsUploads');
+  var showElementBrowser = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'insertBlock.showElementBrowser');
+  var isTypeAheadAllowed = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isAllowed');
+  var mentionProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'mention.mentionProvider');
+  var canInsertMention = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'mention.canInsertMention');
+  var dateEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'date.isInitialised');
+  var placeholderTextAllowInserting = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'placeholderText.allowInserting');
+  var connectivityMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode');
+  var imageUploadEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'imageUpload.enabled');
+  var availableWrapperBlockTypes = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.availableWrapperBlockTypes');
+  var canInsertLink = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'hyperlink.canInsertLink');
+  var activeLinkMark = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'hyperlink.activeLinkMark');
+  return {
+    emojiProviderSelector: emojiProviderSelector,
+    showMediaPicker: showMediaPicker,
+    mediaAllowsUploads: mediaAllowsUploads,
+    showElementBrowser: showElementBrowser,
+    isTypeAheadAllowed: isTypeAheadAllowed,
+    mentionProvider: mentionProvider,
+    canInsertMention: canInsertMention,
+    dateEnabled: dateEnabled,
+    placeholderTextAllowInserting: placeholderTextAllowInserting,
+    connectivityMode: connectivityMode,
+    imageUploadEnabled: imageUploadEnabled,
+    availableWrapperBlockTypes: availableWrapperBlockTypes,
+    canInsertLink: canInsertLink,
+    activeLinkMark: activeLinkMark
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity']),
+    dateState = _useSharedPluginState.dateState,
+    hyperlinkState = _useSharedPluginState.hyperlinkState,
+    imageUploadState = _useSharedPluginState.imageUploadState,
+    mentionState = _useSharedPluginState.mentionState,
+    emojiState = _useSharedPluginState.emojiState,
+    blockTypeState = _useSharedPluginState.blockTypeState,
+    mediaState = _useSharedPluginState.mediaState,
+    typeAheadState = _useSharedPluginState.typeAheadState,
+    placeholderTextState = _useSharedPluginState.placeholderTextState,
+    insertBlockState = _useSharedPluginState.insertBlockState,
+    connectivityState = _useSharedPluginState.connectivityState;
+  return {
+    emojiProviderSelector: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
+    showMediaPicker: mediaState === null || mediaState === void 0 ? void 0 : mediaState.showMediaPicker,
+    mediaAllowsUploads: mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads,
+    showElementBrowser: insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.showElementBrowser,
+    isTypeAheadAllowed: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed,
+    mentionProvider: mentionState === null || mentionState === void 0 ? void 0 : mentionState.mentionProvider,
+    canInsertMention: mentionState === null || mentionState === void 0 ? void 0 : mentionState.canInsertMention,
+    dateEnabled: dateState === null || dateState === void 0 ? void 0 : dateState.isInitialised,
+    placeholderTextAllowInserting: placeholderTextState === null || placeholderTextState === void 0 ? void 0 : placeholderTextState.allowInserting,
+    connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode,
+    imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
+    availableWrapperBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableWrapperBlockTypes,
+    canInsertLink: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.canInsertLink,
+    activeLinkMark: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.activeLinkMark
+  };
+});
 function ToolbarInsertBlockWithInjectionApi(_ref4) {
-  var _ref5, _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
+  var _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
   var editorView = _ref4.editorView,
     editorActions = _ref4.editorActions,
     dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent,
@@ -213,64 +275,67 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
     options = _ref4.options,
     appearance = _ref4.appearance;
   var buttons = toolbarSizeToButtons(toolbarSize, appearance);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity']),
-    dateState = _useSharedPluginState.dateState,
-    hyperlinkState = _useSharedPluginState.hyperlinkState,
-    imageUploadState = _useSharedPluginState.imageUploadState,
-    mentionState = _useSharedPluginState.mentionState,
-    emojiState = _useSharedPluginState.emojiState,
-    blockTypeState = _useSharedPluginState.blockTypeState,
-    mediaState = _useSharedPluginState.mediaState,
-    typeAheadState = _useSharedPluginState.typeAheadState,
-    placeholderTextState = _useSharedPluginState.placeholderTextState,
-    insertBlockState = _useSharedPluginState.insertBlockState,
-    connectivityState = _useSharedPluginState.connectivityState;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    emojiProviderSelector = _useSharedState.emojiProviderSelector,
+    showMediaPicker = _useSharedState.showMediaPicker,
+    mediaAllowsUploads = _useSharedState.mediaAllowsUploads,
+    showElementBrowser = _useSharedState.showElementBrowser,
+    isTypeAheadAllowed = _useSharedState.isTypeAheadAllowed,
+    mentionProvider = _useSharedState.mentionProvider,
+    canInsertMention = _useSharedState.canInsertMention,
+    dateEnabled = _useSharedState.dateEnabled,
+    placeholderTextAllowInserting = _useSharedState.placeholderTextAllowInserting,
+    connectivityMode = _useSharedState.connectivityMode,
+    imageUploadEnabled = _useSharedState.imageUploadEnabled,
+    availableWrapperBlockTypes = _useSharedState.availableWrapperBlockTypes,
+    canInsertLink = _useSharedState.canInsertLink,
+    activeLinkMark = _useSharedState.activeLinkMark;
   var getEmojiProvider = function getEmojiProvider() {
-    if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
-      return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
+    if (emojiProviderSelector) {
+      return Promise.resolve(emojiProviderSelector);
     }
   };
   var emojiProvider = getEmojiProvider();
   var onShowMediaPicker = function onShowMediaPicker(mountInfo) {
-    if (!mediaState) {
+    if (!showMediaPicker) {
       return;
     }
     if ((0, _platformFeatureFlags.fg)('platform_editor_add_media_from_url_rollout')) {
       var _pluginInjectionApi$c, _pluginInjectionApi$m;
       pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup(mountInfo));
     } else {
-      mediaState.showMediaPicker();
+      showMediaPicker();
     }
   };
   return /*#__PURE__*/_react.default.createElement(_ToolbarInsertBlock.default, {
-    showElementBrowser: (insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.showElementBrowser) || false,
+    showElementBrowser: showElementBrowser || false,
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
     isReducedSpacing: isToolbarReducedSpacing,
     isDisabled: disabled,
-    isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
+    isTypeAheadAllowed: Boolean(isTypeAheadAllowed),
     editorView: editorView,
     tableSupported: !!editorView.state.schema.nodes.table,
     tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
     actionSupported: !!editorView.state.schema.nodes.taskItem,
-    mentionsSupported: !!(mentionState && mentionState.mentionProvider),
-    mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
+    mentionsSupported: !!mentionProvider,
+    mentionsDisabled: !canInsertMention,
     decisionSupported: !!editorView.state.schema.nodes.decisionItem,
-    dateEnabled: !!dateState,
-    placeholderTextEnabled: placeholderTextState && placeholderTextState.allowInserting,
+    dateEnabled: !!dateEnabled,
+    placeholderTextEnabled: !!placeholderTextAllowInserting,
     layoutSectionEnabled: Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.layout),
     expandEnabled: !!options.allowExpand,
-    mediaUploadsEnabled: (_ref5 = mediaState && mediaState.allowsUploads) !== null && _ref5 !== void 0 ? _ref5 : undefined,
+    mediaUploadsEnabled: mediaAllowsUploads !== null && mediaAllowsUploads !== void 0 ? mediaAllowsUploads : undefined,
     onShowMediaPicker: onShowMediaPicker,
-    mediaSupported: !!mediaState,
-    isEditorOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline',
+    mediaSupported: mediaAllowsUploads !== undefined,
+    isEditorOffline: connectivityMode === 'offline',
     imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.imageUpload),
-    imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
+    imageUploadEnabled: imageUploadEnabled,
     handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$i = pluginInjectionApi.imageUpload) === null || _pluginInjectionApi$i === void 0 ? void 0 : _pluginInjectionApi$i.actions.startUpload,
-    availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
-    linkSupported: !!hyperlinkState,
-    linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
-    emojiDisabled: !emojiState || !emojiProvider,
+    availableWrapperBlockTypes: availableWrapperBlockTypes,
+    linkSupported: canInsertLink !== undefined,
+    linkDisabled: !canInsertLink || !!activeLinkMark,
+    emojiDisabled: !emojiProvider,
     emojiProvider: emojiProvider,
     nativeStatusSupported: options.nativeStatusSupported,
     horizontalRuleEnabled: options.horizontalRuleEnabled,

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

@@ -18,6 +18,7 @@ var _elementBrowser = require("@atlaskit/editor-common/element-browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _theme = require("@atlaskit/theme");
 var _colors = require("@atlaskit/theme/colors");
@@ -28,6 +29,18 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var DEFAULT_HEIGHT = exports.DEFAULT_HEIGHT = 560;
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var connectivityMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode');
+  return {
+    connectivityMode: connectivityMode
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['connectivity']),
+    connectivityState = _useSharedPluginState.connectivityState;
+  return {
+    connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode
+  };
+});
 var InsertMenu = function InsertMenu(_ref) {
   var _pluginInjectionApi$q6, _pluginInjectionApi$q7;
   var editorView = _ref.editorView,
@@ -102,8 +115,8 @@ var InsertMenu = function InsertMenu(_ref) {
     }
     pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 || _pluginInjectionApi$q.actions.insertItem(item, _analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
   }, [editorView, toggleVisiblity, pluginInjectionApi]);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['connectivity']),
-    connectivityState = _useSharedPluginState.connectivityState;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    connectivityMode = _useSharedState.connectivityMode;
   var getItems = (0, _react.useCallback)(function (query, category) {
     var result;
     /**
@@ -118,7 +131,7 @@ var InsertMenu = function InsertMenu(_ref) {
         query: query,
         category: category
       })) === null || _pluginInjectionApi$q3 === void 0 ? void 0 : _pluginInjectionApi$q3.map(function (item) {
-        return (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline' && item.isDisabledOffline ? _objectSpread(_objectSpread({}, item), {}, {
+        return connectivityMode === 'offline' && item.isDisabledOffline ? _objectSpread(_objectSpread({}, item), {}, {
           isDisabled: true
         }) : item;
       })) !== null && _pluginInjectionApi$q2 !== void 0 ? _pluginInjectionApi$q2 : [];
@@ -128,7 +141,7 @@ var InsertMenu = function InsertMenu(_ref) {
         category: category,
         featuredItems: true
       })) === null || _pluginInjectionApi$q5 === void 0 ? void 0 : _pluginInjectionApi$q5.map(function (item) {
-        return (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline' && item.isDisabledOffline ? _objectSpread(_objectSpread({}, item), {}, {
+        return connectivityMode === 'offline' && item.isDisabledOffline ? _objectSpread(_objectSpread({}, item), {}, {
           isDisabled: true
         }) : item;
       })) !== null && _pluginInjectionApi$q4 !== void 0 ? _pluginInjectionApi$q4 : [];
@@ -136,7 +149,7 @@ var InsertMenu = function InsertMenu(_ref) {
     }
     setItemCount(result.length);
     return result;
-  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions, quickInsertDropdownItems, connectivityState]);
+  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions, quickInsertDropdownItems, connectivityMode]);
   var emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 || (_pluginInjectionApi$q7 = _pluginInjectionApi$q7.sharedState.currentState()) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.emptyStateHandler;
   var onViewMore = (0, _react.useCallback)(function () {
     var _pluginInjectionApi$c, _pluginInjectionApi$q8;

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

@@ -9,10 +9,34 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _createItems = require("../ToolbarInsertBlock/create-items");
-var useInsertMenuRailItems = exports.useInsertMenuRailItems = function useInsertMenuRailItems(editorView, options, api) {
-  var _useIntl = (0, _reactIntlNext.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var dateEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'date.isInitialised');
+  var canInsertLink = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'hyperlink.canInsertLink');
+  var activeLinkMark = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'hyperlink.activeLinkMark');
+  var isTypeAheadAllowed = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isAllowed');
+  var availableWrapperBlockTypes = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.availableWrapperBlockTypes');
+  var imageUploadEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'imageUpload.enabled');
+  var placeholderTextAllowInserting = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'placeholderText.allowInserting');
+  var emojiProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.emojiProvider');
+  var mentionProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'mention.mentionProvider');
+  var canInsertMention = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'mention.canInsertMention');
+  var mediaAllowsUploads = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.allowsUploads');
+  return {
+    dateEnabled: dateEnabled,
+    canInsertLink: canInsertLink,
+    activeLinkMark: activeLinkMark,
+    isTypeAheadAllowed: isTypeAheadAllowed,
+    availableWrapperBlockTypes: availableWrapperBlockTypes,
+    imageUploadEnabled: imageUploadEnabled,
+    placeholderTextAllowInserting: placeholderTextAllowInserting,
+    emojiProvider: emojiProvider,
+    mentionProvider: mentionProvider,
+    canInsertMention: canInsertMention,
+    mediaAllowsUploads: mediaAllowsUploads
+  };
+}, function (api) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']),
     dateState = _useSharedPluginState.dateState,
     hyperlinkState = _useSharedPluginState.hyperlinkState,
@@ -23,32 +47,60 @@ var useInsertMenuRailItems = exports.useInsertMenuRailItems = function useInsert
     mediaState = _useSharedPluginState.mediaState,
     typeAheadState = _useSharedPluginState.typeAheadState,
     placeholderTextState = _useSharedPluginState.placeholderTextState;
+  return {
+    dateEnabled: dateState === null || dateState === void 0 ? void 0 : dateState.isInitialised,
+    canInsertLink: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.canInsertLink,
+    activeLinkMark: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.activeLinkMark,
+    isTypeAheadAllowed: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed,
+    availableWrapperBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableWrapperBlockTypes,
+    imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
+    placeholderTextAllowInserting: placeholderTextState === null || placeholderTextState === void 0 ? void 0 : placeholderTextState.allowInserting,
+    emojiProvider: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
+    mentionProvider: mentionState === null || mentionState === void 0 ? void 0 : mentionState.mentionProvider,
+    canInsertMention: mentionState === null || mentionState === void 0 ? void 0 : mentionState.canInsertMention,
+    mediaAllowsUploads: mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads
+  };
+});
+var useInsertMenuRailItems = exports.useInsertMenuRailItems = function useInsertMenuRailItems(editorView, options, api) {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedState = useSharedState(api),
+    dateEnabled = _useSharedState.dateEnabled,
+    canInsertLink = _useSharedState.canInsertLink,
+    activeLinkMark = _useSharedState.activeLinkMark,
+    isTypeAheadAllowed = _useSharedState.isTypeAheadAllowed,
+    availableWrapperBlockTypes = _useSharedState.availableWrapperBlockTypes,
+    imageUploadEnabled = _useSharedState.imageUploadEnabled,
+    placeholderTextAllowInserting = _useSharedState.placeholderTextAllowInserting,
+    emojiProvider = _useSharedState.emojiProvider,
+    mentionProvider = _useSharedState.mentionProvider,
+    canInsertMention = _useSharedState.canInsertMention,
+    mediaAllowsUploads = _useSharedState.mediaAllowsUploads;
   var _useMemo = (0, _react.useMemo)(function () {
-      var _ref;
       return (0, _createItems.createItems)({
-        isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
+        isTypeAheadAllowed: Boolean(isTypeAheadAllowed),
         tableSupported: !!editorView.state.schema.nodes.table,
         tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
-        mediaUploadsEnabled: (_ref = mediaState && mediaState.allowsUploads) !== null && _ref !== void 0 ? _ref : undefined,
-        mediaSupported: !!mediaState,
+        mediaUploadsEnabled: mediaAllowsUploads !== null && mediaAllowsUploads !== void 0 ? mediaAllowsUploads : undefined,
+        mediaSupported: mediaAllowsUploads !== undefined,
         imageUploadSupported: !!(api !== null && api !== void 0 && api.imageUpload),
-        imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
-        mentionsSupported: !!(mentionState && mentionState.mentionProvider),
-        mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
+        imageUploadEnabled: imageUploadEnabled,
+        mentionsSupported: !!mentionProvider,
+        mentionsDisabled: !canInsertMention,
         actionSupported: !!editorView.state.schema.nodes.taskItem,
         decisionSupported: !!editorView.state.schema.nodes.decisionItem,
-        linkSupported: !!hyperlinkState,
-        linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
-        emojiDisabled: !emojiState || !emojiState.emojiProvider,
+        linkSupported: canInsertLink !== undefined,
+        linkDisabled: !canInsertLink || !!activeLinkMark,
+        emojiDisabled: !emojiProvider,
         nativeStatusSupported: options.nativeStatusSupported,
-        dateEnabled: !!dateState,
-        placeholderTextEnabled: placeholderTextState && placeholderTextState.allowInserting,
+        dateEnabled: !!dateEnabled,
+        placeholderTextEnabled: placeholderTextAllowInserting,
         horizontalRuleEnabled: options.horizontalRuleEnabled,
         layoutSectionEnabled: Boolean(api === null || api === void 0 ? void 0 : api.layout),
         expandEnabled: !!options.allowExpand,
         showElementBrowserLink: options.showElementBrowserLink,
-        emojiProvider: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
-        availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
+        emojiProvider: emojiProvider,
+        availableWrapperBlockTypes: availableWrapperBlockTypes,
         insertMenuItems: options.insertMenuItems,
         schema: editorView.state.schema,
         // numberOfButtons controls what items are returned and eventually display in the insert menu - but it relies on the main toolbar width which
@@ -57,7 +109,7 @@ var useInsertMenuRailItems = exports.useInsertMenuRailItems = function useInsert
         formatMessage: formatMessage,
         isNewMenuEnabled: true
       });
-    }, [api === null || api === void 0 ? void 0 : api.imageUpload, api === null || api === void 0 ? void 0 : api.layout, blockTypeState, dateState, editorView.state.schema, emojiState, formatMessage, hyperlinkState, imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled, mediaState, mentionState, options.allowExpand, options.horizontalRuleEnabled, options.insertMenuItems, options.nativeStatusSupported, options.showElementBrowserLink, options.tableSelectorSupported, placeholderTextState, typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed]),
+    }, [activeLinkMark, api === null || api === void 0 ? void 0 : api.imageUpload, api === null || api === void 0 ? void 0 : api.layout, availableWrapperBlockTypes, canInsertLink, canInsertMention, dateEnabled, editorView.state.schema, emojiProvider, formatMessage, imageUploadEnabled, isTypeAheadAllowed, mediaAllowsUploads, mentionProvider, options.allowExpand, options.horizontalRuleEnabled, options.insertMenuItems, options.nativeStatusSupported, options.showElementBrowserLink, options.tableSelectorSupported, placeholderTextAllowInserting]),
     _useMemo2 = (0, _slicedToArray2.default)(_useMemo, 2),
     _ = _useMemo2[0],
     dropdownItems = _useMemo2[1];

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

package/dist/es2019/insertBlockPlugin.js

@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 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 { toggleInsertBlockPmKey, toggleInsertBlockPmPlugin } from './pm-plugins/toggleInsertBlock';
@@ -179,6 +180,68 @@ export const insertBlockPlugin = ({
   };
   return plugin;
 };
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const emojiProviderSelector = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
+  const showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
+  const mediaAllowsUploads = useSharedPluginStateSelector(api, 'media.allowsUploads');
+  const showElementBrowser = useSharedPluginStateSelector(api, 'insertBlock.showElementBrowser');
+  const isTypeAheadAllowed = useSharedPluginStateSelector(api, 'typeAhead.isAllowed');
+  const mentionProvider = useSharedPluginStateSelector(api, 'mention.mentionProvider');
+  const canInsertMention = useSharedPluginStateSelector(api, 'mention.canInsertMention');
+  const dateEnabled = useSharedPluginStateSelector(api, 'date.isInitialised');
+  const placeholderTextAllowInserting = useSharedPluginStateSelector(api, 'placeholderText.allowInserting');
+  const connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
+  const imageUploadEnabled = useSharedPluginStateSelector(api, 'imageUpload.enabled');
+  const availableWrapperBlockTypes = useSharedPluginStateSelector(api, 'blockType.availableWrapperBlockTypes');
+  const canInsertLink = useSharedPluginStateSelector(api, 'hyperlink.canInsertLink');
+  const activeLinkMark = useSharedPluginStateSelector(api, 'hyperlink.activeLinkMark');
+  return {
+    emojiProviderSelector,
+    showMediaPicker,
+    mediaAllowsUploads,
+    showElementBrowser,
+    isTypeAheadAllowed,
+    mentionProvider,
+    canInsertMention,
+    dateEnabled,
+    placeholderTextAllowInserting,
+    connectivityMode,
+    imageUploadEnabled,
+    availableWrapperBlockTypes,
+    canInsertLink,
+    activeLinkMark
+  };
+}, api => {
+  const {
+    dateState,
+    hyperlinkState,
+    imageUploadState,
+    mentionState,
+    emojiState,
+    blockTypeState,
+    mediaState,
+    typeAheadState,
+    placeholderTextState,
+    insertBlockState,
+    connectivityState
+  } = useSharedPluginState(api, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity']);
+  return {
+    emojiProviderSelector: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
+    showMediaPicker: mediaState === null || mediaState === void 0 ? void 0 : mediaState.showMediaPicker,
+    mediaAllowsUploads: mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads,
+    showElementBrowser: insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.showElementBrowser,
+    isTypeAheadAllowed: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed,
+    mentionProvider: mentionState === null || mentionState === void 0 ? void 0 : mentionState.mentionProvider,
+    canInsertMention: mentionState === null || mentionState === void 0 ? void 0 : mentionState.canInsertMention,
+    dateEnabled: dateState === null || dateState === void 0 ? void 0 : dateState.isInitialised,
+    placeholderTextAllowInserting: placeholderTextState === null || placeholderTextState === void 0 ? void 0 : placeholderTextState.allowInserting,
+    connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode,
+    imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
+    availableWrapperBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableWrapperBlockTypes,
+    canInsertLink: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.canInsertLink,
+    activeLinkMark: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.activeLinkMark
+  };
+});
 function ToolbarInsertBlockWithInjectionApi({
   editorView,
   editorActions,
@@ -195,67 +258,70 @@ function ToolbarInsertBlockWithInjectionApi({
   options,
   appearance
 }) {
-  var _ref, _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
+  var _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
   const buttons = toolbarSizeToButtons(toolbarSize, appearance);
   const {
-    dateState,
-    hyperlinkState,
-    imageUploadState,
-    mentionState,
-    emojiState,
-    blockTypeState,
-    mediaState,
-    typeAheadState,
-    placeholderTextState,
-    insertBlockState,
-    connectivityState
-  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity']);
+    emojiProviderSelector,
+    showMediaPicker,
+    mediaAllowsUploads,
+    showElementBrowser,
+    isTypeAheadAllowed,
+    mentionProvider,
+    canInsertMention,
+    dateEnabled,
+    placeholderTextAllowInserting,
+    connectivityMode,
+    imageUploadEnabled,
+    availableWrapperBlockTypes,
+    canInsertLink,
+    activeLinkMark
+  } = useSharedState(pluginInjectionApi);
   const getEmojiProvider = () => {
-    if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
-      return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
+    if (emojiProviderSelector) {
+      return Promise.resolve(emojiProviderSelector);
     }
   };
   const emojiProvider = getEmojiProvider();
   const onShowMediaPicker = mountInfo => {
-    if (!mediaState) {
+    if (!showMediaPicker) {
       return;
     }
     if (fg('platform_editor_add_media_from_url_rollout')) {
       var _pluginInjectionApi$c, _pluginInjectionApi$m;
       pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup(mountInfo));
     } else {
-      mediaState.showMediaPicker();
+      showMediaPicker();
     }
   };
   return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
-    showElementBrowser: (insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.showElementBrowser) || false,
+    showElementBrowser: showElementBrowser || false,
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
     isReducedSpacing: isToolbarReducedSpacing,
     isDisabled: disabled,
-    isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
+    isTypeAheadAllowed: Boolean(isTypeAheadAllowed),
     editorView: editorView,
     tableSupported: !!editorView.state.schema.nodes.table,
     tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
     actionSupported: !!editorView.state.schema.nodes.taskItem,
-    mentionsSupported: !!(mentionState && mentionState.mentionProvider),
-    mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
+    mentionsSupported: !!mentionProvider,
+    mentionsDisabled: !canInsertMention,
     decisionSupported: !!editorView.state.schema.nodes.decisionItem,
-    dateEnabled: !!dateState,
-    placeholderTextEnabled: placeholderTextState && placeholderTextState.allowInserting,
+    dateEnabled: !!dateEnabled,
+    placeholderTextEnabled: !!placeholderTextAllowInserting,
     layoutSectionEnabled: Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.layout),
     expandEnabled: !!options.allowExpand,
-    mediaUploadsEnabled: (_ref = mediaState && mediaState.allowsUploads) !== null && _ref !== void 0 ? _ref : undefined,
+    mediaUploadsEnabled: mediaAllowsUploads !== null && mediaAllowsUploads !== void 0 ? mediaAllowsUploads : undefined,
     onShowMediaPicker: onShowMediaPicker,
-    mediaSupported: !!mediaState,
-    isEditorOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline',
+    mediaSupported: mediaAllowsUploads !== undefined,
+    isEditorOffline: connectivityMode === 'offline',
     imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.imageUpload),
-    imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
+    imageUploadEnabled: imageUploadEnabled,
     handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$i = pluginInjectionApi.imageUpload) === null || _pluginInjectionApi$i === void 0 ? void 0 : _pluginInjectionApi$i.actions.startUpload,
-    availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
-    linkSupported: !!hyperlinkState,
-    linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
-    emojiDisabled: !emojiState || !emojiProvider,
+    availableWrapperBlockTypes: availableWrapperBlockTypes,
+    linkSupported: canInsertLink !== undefined,
+    linkDisabled: !canInsertLink || !!activeLinkMark,
+    emojiDisabled: !emojiProvider,
     emojiProvider: emojiProvider,
     nativeStatusSupported: options.nativeStatusSupported,
     horizontalRuleEnabled: options.horizontalRuleEnabled,