@atlaskit/editor-plugin-media 3.0.2 → 3.0.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-media
 
+## 3.0.4
+
+### Patch Changes
+
+- [#153009](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/153009)
+  [`c8a0f30534d85`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c8a0f30534d85) -
+  Refactor to use sharedPluginStateHookMigratorFactory
+- Updated dependencies
+
+## 3.0.3
+
+### Patch Changes
+
+- [#153256](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/153256)
+  [`3644fbe36073d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3644fbe36073d) -
+  [ux] When ViewAll dropdown closes via ESC key press or submenus close via ESC or Enter, the focus
+  is set on ViewAll button.
+- Updated dependencies
+
 ## 3.0.2
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -43,45 +43,66 @@ var _toolbar = require("./ui/toolbar");
 var _ToolbarMedia = _interopRequireDefault(require("./ui/ToolbarMedia"));
 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 useMediaPickerSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var onPopupToggle = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.onPopupToggle');
+  var setBrowseFn = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.setBrowseFn');
+  return {
+    onPopupToggle: onPopupToggle,
+    setBrowseFn: setBrowseFn
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  return {
+    onPopupToggle: mediaState === null || mediaState === void 0 ? void 0 : mediaState.onPopupToggle,
+    setBrowseFn: mediaState === null || mediaState === void 0 ? void 0 : mediaState.setBrowseFn
+  };
+});
 var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_ref) {
   var api = _ref.api,
     editorDomElement = _ref.editorDomElement,
     appearance = _ref.appearance;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media']),
-    mediaState = _useSharedPluginState.mediaState;
-  if (!mediaState) {
+  var _useMediaPickerShared = useMediaPickerSharedState(api),
+    onPopupToggle = _useMediaPickerShared.onPopupToggle,
+    setBrowseFn = _useMediaPickerShared.setBrowseFn;
+  if (!onPopupToggle || !setBrowseFn) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_MediaPicker.MediaPickerComponents, {
+    onPopupToggle: onPopupToggle,
+    setBrowseFn: setBrowseFn,
     editorDomElement: editorDomElement,
-    mediaState: mediaState,
     appearance: appearance,
     api: api
   });
 };
+var useMediaViewerSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var isMediaViewerVisible = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.isMediaViewerVisible');
+  var mediaViewerSelectedMedia = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaViewerSelectedMedia');
+  var mediaClientConfig = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaClientConfig');
+  return {
+    isMediaViewerVisible: isMediaViewerVisible,
+    mediaViewerSelectedMedia: mediaViewerSelectedMedia,
+    mediaClientConfig: mediaClientConfig
+  };
+}, function (api) {
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media']),
+    mediaState = _useSharedPluginState2.mediaState;
+  return {
+    isMediaViewerVisible: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isMediaViewerVisible,
+    mediaViewerSelectedMedia: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaViewerSelectedMedia,
+    mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig
+  };
+});
 var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_ref2) {
   var api = _ref2.api,
     editorView = _ref2.editorView;
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    mediaState = _useSharedPluginState2.mediaState;
-  var isMediaViewerVisibleSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.isMediaViewerVisible', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mediaViewerSelectedMediaSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaViewerSelectedMedia', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mediaClientConfigSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaClientConfig', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isMediaViewerVisible = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isMediaViewerVisibleSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.isMediaViewerVisible;
-  var mediaViewerSelectedMedia = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? mediaViewerSelectedMediaSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaViewerSelectedMedia;
-  var mediaClientConfig = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? mediaClientConfigSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig;
-
   // Only traverse document once when media viewer is visible, media viewer items will not update
   // when document changes are made while media viewer is open
-
+  var _useMediaViewerShared = useMediaViewerSharedState(api),
+    isMediaViewerVisible = _useMediaViewerShared.isMediaViewerVisible,
+    mediaViewerSelectedMedia = _useMediaViewerShared.mediaViewerSelectedMedia,
+    mediaClientConfig = _useMediaViewerShared.mediaClientConfig;
   var mediaItems = (0, _react.useMemo)(function () {
     if (isMediaViewerVisible) {
       var mediaNodes = (0, _mediaCommon2.extractMediaNodes)(editorView.state.doc);

package/dist/cjs/nodeviews/mediaGroup.js

@@ -309,26 +309,30 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
 (0, _defineProperty2.default)(MediaGroup, "displayName", 'MediaGroup');
 var IntlMediaGroup = (0, _reactIntlNext.injectIntl)(MediaGroup);
 var _default = exports.default = IntlMediaGroup;
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  var editorDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorDisabled.editorDisabled');
+  var editorViewMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    editorDisabled: editorDisabled,
+    editorViewMode: editorViewMode
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorDisabled', 'editorViewMode']),
+    editorDisabledPlugin = _useSharedPluginState.editorDisabledState,
+    editorViewModePlugin = _useSharedPluginState.editorViewModeState;
+  return {
+    editorDisabled: editorDisabledPlugin === null || editorDisabledPlugin === void 0 ? void 0 : editorDisabledPlugin.editorDisabled,
+    editorViewMode: editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode
+  };
+});
 function MediaGroupNodeViewInternal(_ref3) {
   var renderFn = _ref3.renderFn,
     pluginInjectionApi = _ref3.pluginInjectionApi;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorDisabled', 'editorViewMode'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    editorDisabledPlugin = _useSharedPluginState.editorDisabledState,
-    editorViewModePlugin = _useSharedPluginState.editorViewModeState;
-  var editorDisabledSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorDisabled.editorDisabled', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var editorViewModeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var editorDisabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledPlugin === null || editorDisabledPlugin === void 0 ? void 0 : editorDisabledPlugin.editorDisabled;
-  var editorViewMode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorViewModeSelector : editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    editorDisabled = _useSharedState.editorDisabled,
+    editorViewMode = _useSharedState.editorViewMode;
   var mediaProvider = (0, _useMediaProvider.useMediaProvider)(pluginInjectionApi);
   return renderFn({
-    editorDisabledPlugin: editorDisabledPlugin,
-    editorViewModePlugin: editorViewModePlugin,
     editorDisabled: editorDisabled,
     editorViewMode: editorViewMode,
     mediaProvider: mediaProvider
@@ -354,9 +358,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
         renderNode: function renderNode(_ref4) {
           var contextIdentifierProvider = _ref4.contextIdentifierProvider;
           var renderFn = function renderFn(_ref5) {
-            var editorDisabledPlugin = _ref5.editorDisabledPlugin,
-              editorViewModePlugin = _ref5.editorViewModePlugin,
-              mediaProviderFromState = _ref5.mediaProvider,
+            var mediaProviderFromState = _ref5.mediaProvider,
               editorDisabled = _ref5.editorDisabled,
               editorViewMode = _ref5.editorViewMode;
             var mediaProvider = mediaProviderFromState ? Promise.resolve(mediaProviderFromState) : undefined;
@@ -385,7 +387,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
               getPos: getPos,
               view: _this3.view,
               forwardRef: forwardRef,
-              disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorDisabled : (editorDisabledPlugin || {}).editorDisabled,
+              disabled: editorDisabled,
               allowLazyLoading: mediaOptions.allowLazyLoading,
               mediaProvider: mediaProvider,
               contextIdentifierProvider: contextIdentifierProvider,
@@ -393,7 +395,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
               anchorPos: _this3.view.state.selection.$anchor.pos,
               headPos: _this3.view.state.selection.$head.pos,
               mediaOptions: mediaOptions,
-              editorViewMode: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorViewMode === 'view' : (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
+              editorViewMode: editorViewMode === 'view'
             });
           };
           return /*#__PURE__*/_react.default.createElement(MediaGroupNodeViewInternal, {

package/dist/cjs/nodeviews/mediaInline.js

@@ -25,7 +25,6 @@ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-
 var _mediaCard = require("@atlaskit/media-card");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaUi = require("@atlaskit/media-ui");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _isType = require("../pm-plugins/utils/is-type");
 var _MediaViewerContainer = require("../ui/MediaViewer/MediaViewerContainer");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
@@ -223,6 +222,40 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
     mediaClientConfig: viewMediaClientConfig
   }));
 };
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var viewMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode');
+  var mediaProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaProvider');
+  var handleMediaNodeMount = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.handleMediaNodeMount');
+  var handleMediaNodeUnmount = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.handleMediaNodeUnmount');
+  var allowInlineImages = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.allowInlineImages');
+  var addPendingTask = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.addPendingTask');
+  var selectedMediaContainerNode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.selectedMediaContainerNode');
+  var mediaClientConfig = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaClientConfig');
+  return {
+    viewMode: viewMode,
+    mediaProvider: mediaProvider,
+    handleMediaNodeMount: handleMediaNodeMount,
+    handleMediaNodeUnmount: handleMediaNodeUnmount,
+    allowInlineImages: allowInlineImages,
+    addPendingTask: addPendingTask,
+    selectedMediaContainerNode: selectedMediaContainerNode,
+    mediaClientConfig: mediaClientConfig
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode', 'media']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState,
+    mediaState = _useSharedPluginState.mediaState;
+  return {
+    viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+    mediaProvider: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider,
+    handleMediaNodeMount: mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeMount,
+    handleMediaNodeUnmount: mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeUnmount,
+    allowInlineImages: mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowInlineImages,
+    addPendingTask: mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask,
+    selectedMediaContainerNode: mediaState === null || mediaState === void 0 ? void 0 : mediaState.selectedMediaContainerNode,
+    mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig
+  };
+});
 var MediaInlineSharedState = function MediaInlineSharedState(_ref3) {
   var identifier = _ref3.identifier,
     node = _ref3.node,
@@ -231,43 +264,15 @@ var MediaInlineSharedState = function MediaInlineSharedState(_ref3) {
     contextIdentifierProvider = _ref3.contextIdentifierProvider,
     api = _ref3.api,
     view = _ref3.view;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode', 'media'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    editorViewModeState = _useSharedPluginState.editorViewModeState,
-    mediaState = _useSharedPluginState.mediaState;
-  var viewModeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mediaProviderSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaProvider', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var handleMediaNodeMountSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.handleMediaNodeMount', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var handleMediaNodeUnmountSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.handleMediaNodeUnmount', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var allowInlineImagesSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.allowInlineImages', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var addPendingTaskSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.addPendingTask', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selectedMediaContainerNodeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.selectedMediaContainerNode', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mediaClientConfigSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaClientConfig', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var viewMode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? viewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
-  var mediaProvider = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
-  var handleMediaNodeMount = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? handleMediaNodeMountSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeMount;
-  var handleMediaNodeUnmount = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? handleMediaNodeUnmountSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeUnmount;
-  var allowInlineImages = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? allowInlineImagesSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowInlineImages;
-  var addPendingTask = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? addPendingTaskSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask;
-  var selectedMediaContainerNode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectedMediaContainerNodeSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.selectedMediaContainerNode;
-  var mediaClientConfig = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? mediaClientConfigSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig;
+  var _useSharedState = useSharedState(api),
+    mediaProvider = _useSharedState.mediaProvider,
+    allowInlineImages = _useSharedState.allowInlineImages,
+    handleMediaNodeMount = _useSharedState.handleMediaNodeMount,
+    handleMediaNodeUnmount = _useSharedState.handleMediaNodeUnmount,
+    addPendingTask = _useSharedState.addPendingTask,
+    selectedMediaContainerNode = _useSharedState.selectedMediaContainerNode,
+    mediaClientConfig = _useSharedState.mediaClientConfig,
+    viewMode = _useSharedState.viewMode;
   var newMediaProvider = (0, _react.useMemo)(function () {
     return mediaProvider ? Promise.resolve(mediaProvider) : undefined;
   }, [mediaProvider]);

package/dist/cjs/nodeviews/mediaNodeView/index.js

@@ -20,7 +20,6 @@ var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _mediaClient = require("@atlaskit/media-client");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _helpers = require("../../pm-plugins/commands/helpers");
 var _mediaCommon = require("../../pm-plugins/utils/media-common");
 var _media = _interopRequireDefault(require("./media"));
@@ -31,20 +30,30 @@ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0,
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; } // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  var mediaProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'media.mediaProvider');
+  return {
+    mediaProvider: mediaProvider,
+    widthState: undefined
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media']),
+    widthState = _useSharedPluginState.widthState,
+    mediaState = _useSharedPluginState.mediaState;
+  return {
+    mediaProvider: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider,
+    widthState: widthState
+  };
+});
 var MediaNodeWithProviders = function MediaNodeWithProviders(_ref) {
   var pluginInjectionApi = _ref.pluginInjectionApi,
     innerComponent = _ref.innerComponent;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    widthState = _useSharedPluginState.widthState,
-    mediaState = _useSharedPluginState.mediaState;
-  var mediaProviderSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'media.mediaProvider', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mediaProvider = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    mediaProvider = _useSharedState.mediaProvider,
+    widthState = _useSharedState.widthState;
   return innerComponent({
-    width: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? widthState : undefined,
+    width: widthState,
+    // Remove when platform_editor_usesharedpluginstateselector is cleaned up
     mediaProvider: mediaProvider ? Promise.resolve(mediaProvider) : undefined
   });
 };

package/dist/cjs/nodeviews/mediaSingle.js

@@ -31,7 +31,6 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _mediaClient = require("@atlaskit/media-client");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _captions = require("../pm-plugins/commands/captions");
 var _main = require("../pm-plugins/main");
 var _mediaCommon = require("../pm-plugins/utils/media-common");
@@ -553,6 +552,43 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   mediaOptions: {}
 });
 (0, _defineProperty2.default)(MediaSingleNode, "displayName", 'MediaSingleNode');
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  var mediaProviderPromise = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'media.mediaProvider');
+  var addPendingTask = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'media.addPendingTask');
+  var isDrafting = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'annotation.isDrafting');
+  var targetNodeId = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'annotation.targetNodeId');
+  var width = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'width.width');
+  var lineLength = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'width.lineLength');
+  var editorDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorDisabled.editorDisabled');
+  var viewMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    mediaProviderPromise: mediaProviderPromise,
+    addPendingTask: addPendingTask,
+    isDrafting: isDrafting,
+    targetNodeId: targetNodeId,
+    width: width,
+    lineLength: lineLength,
+    editorDisabled: editorDisabled,
+    viewMode: viewMode
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
+    widthState = _useSharedPluginState.widthState,
+    mediaState = _useSharedPluginState.mediaState,
+    annotationState = _useSharedPluginState.annotationState,
+    editorDisabledState = _useSharedPluginState.editorDisabledState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  return {
+    mediaProviderPromise: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider,
+    addPendingTask: mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask,
+    isDrafting: annotationState === null || annotationState === void 0 ? void 0 : annotationState.isDrafting,
+    targetNodeId: annotationState === null || annotationState === void 0 ? void 0 : annotationState.targetNodeId,
+    width: widthState === null || widthState === void 0 ? void 0 : widthState.width,
+    lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
+    viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
 var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
   var pluginInjectionApi = _ref6.pluginInjectionApi,
     contextIdentifierProvider = _ref6.contextIdentifierProvider,
@@ -566,50 +602,19 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
     dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
     forwardRef = _ref6.forwardRef,
     editorAppearance = _ref6.editorAppearance;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    widthState = _useSharedPluginState.widthState,
-    mediaState = _useSharedPluginState.mediaState,
-    annotationState = _useSharedPluginState.annotationState,
-    editorDisabledState = _useSharedPluginState.editorDisabledState,
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
-  var mediaProviderSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'media.mediaProvider', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var addPendingTaskSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'media.addPendingTask', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isDraftingSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'annotation.isDrafting', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var targetNodeIdSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'annotation.targetNodeId', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var widthSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'width.width', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var lineLengthSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'width.lineLength', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var editorDisabledSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorDisabled.editorDisabled', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var viewModeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mediaProviderState = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
-  var addPendingTask = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? addPendingTaskSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask;
-  var isDrafting = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isDraftingSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isDrafting;
-  var targetNodeId = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? targetNodeIdSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.targetNodeId;
-  var width = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? widthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.width;
-  var lineLength = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
-  var editorDisabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled;
-  var viewMode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? viewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    mediaProviderPromise = _useSharedState.mediaProviderPromise,
+    addPendingTask = _useSharedState.addPendingTask,
+    isDrafting = _useSharedState.isDrafting,
+    targetNodeId = _useSharedState.targetNodeId,
+    width = _useSharedState.width,
+    lineLength = _useSharedState.lineLength,
+    editorDisabled = _useSharedState.editorDisabled,
+    viewMode = _useSharedState.viewMode;
   var hasHadInteraction = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.hasHadInteraction');
   var mediaProvider = (0, _react.useMemo)(function () {
-    return mediaProviderState ? Promise.resolve(mediaProviderState) : undefined;
-  }, [mediaProviderState]);
+    return mediaProviderPromise ? Promise.resolve(mediaProviderPromise) : undefined;
+  }, [mediaProviderPromise]);
   var isSelectedAndInteracted = (0, _react.useCallback)(function () {
     return Boolean(selected() && hasHadInteraction !== false);
   }, [hasHadInteraction, selected]);

package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -22,7 +22,9 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
 var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../commands");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
@@ -93,11 +95,15 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         (0, _commands.closeMediaAltTextMenu)(view.state, view.dispatch);
       }
     });
+    (0, _defineProperty2.default)(_this, "closeMediaAltTextMenuAndSetFocus", function () {
+      var _this$props$onEnter, _this$props;
+      _this.closeMediaAltTextMenu();
+      (_this$props$onEnter = (_this$props = _this.props).onEnter) === null || _this$props$onEnter === void 0 || _this$props$onEnter.call(_this$props);
+    });
     (0, _defineProperty2.default)(_this, "dispatchCancelEvent", function (event) {
-      var _this$props = _this.props,
-        view = _this$props.view,
-        onEscape = _this$props.onEscape;
-
+      var _this$props2 = _this.props,
+        view = _this$props2.view,
+        onEscape = _this$props2.onEscape;
       // We need to pass down the ESCAPE keymap
       // because when we focus on the Toolbar, Prosemirror blur,
       // making all keyboard shortcuts not working
@@ -130,7 +136,11 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
     (0, _defineProperty2.default)(_this, "handleOnBlur", function (e) {
       // prevent other selection transaction gets triggered
       e.stopPropagation();
-      _this.closeMediaAltTextMenu();
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8')) {
+        _this.closeMediaAltTextMenuAndSetFocus();
+      } else {
+        _this.closeMediaAltTextMenu(); // Why do we close the menu on blur? Is it a bug?
+      }
     });
     (0, _defineProperty2.default)(_this, "handleClearText", function () {
       _this.handleOnChange('');
@@ -188,6 +198,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         }, error);
       });
       var hasErrors = !!errorsList.length;
+      var onSubmit = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8') ? this.closeMediaAltTextMenuAndSetFocus : this.closeMediaAltTextMenu;
       return (0, _react2.jsx)("div", {
         css: containerStyles
       }, (0, _react2.jsx)("section", {
@@ -210,7 +221,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         onCancel: this.dispatchCancelEvent,
         onChange: this.handleOnChange,
         onBlur: this.handleOnBlur,
-        onSubmit: this.closeMediaAltTextMenu,
+        onSubmit: onSubmit,
         maxLength: MAX_ALT_TEXT_LENGTH,
         ariaRequired: true,
         ariaInvalid: hasErrors,
@@ -240,10 +251,10 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
   }, {
     key: "fireAnalytics",
     value: function fireAnalytics(actionType) {
-      var _this$props2 = this.props,
-        createAnalyticsEvent = _this$props2.createAnalyticsEvent,
-        nodeType = _this$props2.nodeType,
-        mediaType = _this$props2.mediaType;
+      var _this$props3 = this.props,
+        createAnalyticsEvent = _this$props3.createAnalyticsEvent,
+        nodeType = _this$props3.nodeType,
+        mediaType = _this$props3.mediaType;
       if (createAnalyticsEvent && this.fireCustomAnalytics) {
         this.fireCustomAnalytics({
           payload: {

package/dist/cjs/pm-plugins/pixel-resizing/ui/index.js

@@ -26,14 +26,15 @@ 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 PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
-  var _pluginInjectionApi$w, _pluginInjectionApi$m;
+  var _pluginInjectionApi$w, _pluginInjectionApi$m, _pluginInjectionApi$f;
   var editorView = _ref.editorView,
     selectedMediaSingleNode = _ref.selectedMediaSingleNode,
     pluginInjectionApi = _ref.pluginInjectionApi,
     intl = _ref.intl,
     pluginState = _ref.pluginState,
     hoverDecoration = _ref.hoverDecoration,
-    isEditorFullWidthEnabled = _ref.isEditorFullWidthEnabled;
+    isEditorFullWidthEnabled = _ref.isEditorFullWidthEnabled,
+    triggerButtonSelector = _ref.triggerButtonSelector;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var mediaSingle = state.schema.nodes.mediaSingle;
@@ -68,6 +69,7 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
   // get pos of media node
   mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH);
   var pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
+  var forceFocusSelector = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector;
   return (0, _react2.jsx)(_pixelEntry.PixelEntryComponent, {
     intl: intl,
     width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
@@ -98,19 +100,28 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
       }));
       tr.setMeta('scrollIntoView', false);
       tr.setSelection(_state.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+      if (triggerButtonSelector) {
+        var newTr = forceFocusSelector && forceFocusSelector(triggerButtonSelector)(tr);
+        tr = newTr !== undefined ? newTr : tr;
+      }
       dispatch(tr);
     },
-    onCloseAndSave: function onCloseAndSave(_ref3) {
+    onCloseAndSave: function onCloseAndSave(_ref3, setFocus) {
       var width = _ref3.width,
         validation = _ref3.validation;
       var tr = updateNodeWithTr(width, validation);
+      if (setFocus && triggerButtonSelector) {
+        var newTr = forceFocusSelector && tr && forceFocusSelector(triggerButtonSelector)(tr);
+        tr = newTr !== undefined ? newTr : tr;
+      }
       if (tr) {
         return (0, _commands2.closePixelEditorAndSave)(function () {
           return tr;
         })(state, dispatch);
       }
     },
-    isViewMode: pluginState.isResizing
+    isViewMode: pluginState.isResizing,
+    triggerButtonSelector: triggerButtonSelector
   });
 };
 var FullWidthDisplay = exports.FullWidthDisplay = function FullWidthDisplay(_ref4) {