@atlaskit/editor-plugin-media 3.0.2 → 3.0.4

package/dist/esm/ui/MediaPicker/ClipboardWrapper.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { Clipboard } from '@atlaskit/media-picker';
 import PickerFacadeProvider from './PickerFacadeProvider';
 export var ClipboardWrapper = function ClipboardWrapper(_ref) {
-  var mediaState = _ref.mediaState,
-    featureFlags = _ref.featureFlags,
-    container = _ref.container;
+  var api = _ref.api,
+    container = _ref.container,
+    featureFlags = _ref.featureFlags;
   return /*#__PURE__*/React.createElement(PickerFacadeProvider, {
-    mediaState: mediaState,
+    api: api,
     analyticsName: "clipboard"
   }, function (_ref2) {
     var mediaClientConfig = _ref2.mediaClientConfig,

package/dist/esm/ui/MediaPicker/DropzoneWrapper.js

@@ -2,45 +2,86 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { Dropzone } from '@atlaskit/media-picker';
 import PickerFacadeProvider from './PickerFacadeProvider';
-export var DropzoneWrapper = function DropzoneWrapper(_ref) {
-  var mediaState = _ref.mediaState,
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var options = useSharedPluginStateSelector(api, 'media.options');
+  var handleDrag = useSharedPluginStateSelector(api, 'media.handleDrag');
+  return {
+    options: options,
+    handleDrag: handleDrag
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  return {
+    options: mediaState === null || mediaState === void 0 ? void 0 : mediaState.options,
+    handleDrag: mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleDrag
+  };
+});
+var DropzoneWrapperInternal = function DropzoneWrapperInternal(_ref) {
+  var api = _ref.api,
     isActive = _ref.isActive,
     featureFlags = _ref.featureFlags,
     editorDomElement = _ref.editorDomElement,
-    appearance = _ref.appearance;
+    appearance = _ref.appearance,
+    mediaClientConfig = _ref.mediaClientConfig,
+    config = _ref.config,
+    pickerFacadeInstance = _ref.pickerFacadeInstance;
+  var _useSharedState = useSharedState(api),
+    options = _useSharedState.options,
+    handleDrag = _useSharedState.handleDrag;
+  var _ref2 = options || {},
+    customDropzoneContainer = _ref2.customDropzoneContainer;
+
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  var editorHtmlElement = editorDomElement;
+  var scrollParent = appearance === 'full-page' && findOverflowScrollParent(editorHtmlElement);
+  var container = customDropzoneContainer || (scrollParent ? scrollParent : editorHtmlElement);
+  var dropzoneConfig = _objectSpread(_objectSpread({}, config), {}, {
+    container: container
+  });
+  return isActive ? /*#__PURE__*/React.createElement(Dropzone, {
+    mediaClientConfig: mediaClientConfig,
+    config: dropzoneConfig,
+    onError: pickerFacadeInstance.handleUploadError,
+    onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
+    onEnd: pickerFacadeInstance.handleReady,
+    onDragEnter: function onDragEnter() {
+      return handleDrag === null || handleDrag === void 0 ? void 0 : handleDrag('enter');
+    },
+    onDragLeave: function onDragLeave() {
+      return handleDrag === null || handleDrag === void 0 ? void 0 : handleDrag('leave');
+    },
+    featureFlags: featureFlags
+  }) : null;
+};
+export var DropzoneWrapper = function DropzoneWrapper(_ref3) {
+  var api = _ref3.api,
+    isActive = _ref3.isActive,
+    featureFlags = _ref3.featureFlags,
+    editorDomElement = _ref3.editorDomElement,
+    appearance = _ref3.appearance;
   return /*#__PURE__*/React.createElement(PickerFacadeProvider, {
-    mediaState: mediaState,
+    api: api,
     analyticsName: "dropzone"
-  }, function (_ref2) {
-    var mediaClientConfig = _ref2.mediaClientConfig,
-      config = _ref2.config,
-      pickerFacadeInstance = _ref2.pickerFacadeInstance;
-    var customDropzoneContainer = mediaState.options.customDropzoneContainer,
-      handleDrag = mediaState.handleDrag;
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    var editorHtmlElement = editorDomElement;
-    var scrollParent = appearance === 'full-page' && findOverflowScrollParent(editorHtmlElement);
-    var container = customDropzoneContainer || (scrollParent ? scrollParent : editorHtmlElement);
-    var dropzoneConfig = _objectSpread(_objectSpread({}, config), {}, {
-      container: container
-    });
-    return isActive ? /*#__PURE__*/React.createElement(Dropzone, {
+  }, function (_ref4) {
+    var mediaClientConfig = _ref4.mediaClientConfig,
+      config = _ref4.config,
+      pickerFacadeInstance = _ref4.pickerFacadeInstance;
+    return /*#__PURE__*/React.createElement(DropzoneWrapperInternal, {
+      api: api,
+      isActive: isActive,
+      featureFlags: featureFlags,
+      editorDomElement: editorDomElement,
+      appearance: appearance,
       mediaClientConfig: mediaClientConfig,
-      config: dropzoneConfig,
-      onError: pickerFacadeInstance.handleUploadError,
-      onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
-      onEnd: pickerFacadeInstance.handleReady,
-      onDragEnter: function onDragEnter() {
-        return handleDrag('enter');
-      },
-      onDragLeave: function onDragLeave() {
-        return handleDrag('leave');
-      },
-      featureFlags: featureFlags
-    }) : null;
+      config: config,
+      pickerFacadeInstance: pickerFacadeInstance
+    });
   });
 };

package/dist/esm/ui/MediaPicker/PickerFacadeProvider.js

@@ -3,6 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { flushSync } from 'react-dom';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { ErrorReporter } from '@atlaskit/editor-common/utils';
 import PickerFacade from '../../pm-plugins/picker-facade';
 var dummyMediaPickerObject = {
@@ -12,8 +14,32 @@ var dummyMediaPickerObject = {
   destroy: function destroy() {},
   setUploadParams: function setUploadParams() {}
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var mediaProvider = useSharedPluginStateSelector(api, 'media.mediaProvider');
+  var mediaOptions = useSharedPluginStateSelector(api, 'media.mediaOptions');
+  var insertFile = useSharedPluginStateSelector(api, 'media.insertFile');
+  var options = useSharedPluginStateSelector(api, 'media.options');
+  return {
+    mediaProvider: mediaProvider,
+    mediaOptions: mediaOptions,
+    insertFile: insertFile,
+    options: options
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  var mediaProvider = useMemo(function () {
+    return mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
+  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+  return {
+    mediaProvider: mediaProvider,
+    mediaOptions: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaOptions,
+    insertFile: mediaState === null || mediaState === void 0 ? void 0 : mediaState.insertFile,
+    options: mediaState === null || mediaState === void 0 ? void 0 : mediaState.options
+  };
+});
 export default function PickerFacadeProvider(_ref) {
-  var mediaState = _ref.mediaState,
+  var api = _ref.api,
     analyticsName = _ref.analyticsName,
     children = _ref.children;
   var _useState = useState({
@@ -24,9 +50,11 @@ export default function PickerFacadeProvider(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
     setState = _useState2[1];
-  var mediaProvider = useMemo(function () {
-    return mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
-  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+  var _useSharedState = useSharedState(api),
+    mediaProvider = _useSharedState.mediaProvider,
+    mediaOptions = _useSharedState.mediaOptions,
+    insertFile = _useSharedState.insertFile,
+    options = _useSharedState.options;
   var handleMediaProvider = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_name, provider) {
       var mediaProvider, resolvedMediaClientConfig, pickerFacadeConfig, pickerFacadeInstance, config;
@@ -37,7 +65,7 @@ export default function PickerFacadeProvider(_ref) {
             return provider;
           case 2:
             mediaProvider = _context.sent;
-            if (!(!mediaProvider || !mediaProvider.uploadParams)) {
+            if (!(!mediaProvider || !mediaProvider.uploadParams || !insertFile)) {
               _context.next = 5;
               break;
             }
@@ -65,14 +93,14 @@ export default function PickerFacadeProvider(_ref) {
           case 15:
             pickerFacadeConfig = {
               mediaClientConfig: resolvedMediaClientConfig,
-              errorReporter: mediaState.options.errorReporter || new ErrorReporter(),
-              featureFlags: mediaState.mediaOptions && mediaState.mediaOptions.featureFlags
+              errorReporter: (options === null || options === void 0 ? void 0 : options.errorReporter) || new ErrorReporter(),
+              featureFlags: mediaOptions && mediaOptions.featureFlags
             };
             _context.next = 18;
             return new PickerFacade('customMediaPicker', pickerFacadeConfig, dummyMediaPickerObject, analyticsName).init();
           case 18:
             pickerFacadeInstance = _context.sent;
-            pickerFacadeInstance.onNewMedia(mediaState.insertFile);
+            pickerFacadeInstance.onNewMedia(insertFile);
             pickerFacadeInstance.setUploadParams(mediaProvider.uploadParams);
             config = {
               uploadParams: mediaProvider.uploadParams
@@ -93,7 +121,7 @@ export default function PickerFacadeProvider(_ref) {
     return function (_x, _x2) {
       return _ref2.apply(this, arguments);
     };
-  }(), [analyticsName, mediaState.insertFile, mediaState.mediaOptions, mediaState.options.errorReporter]);
+  }(), [analyticsName, insertFile, mediaOptions, options === null || options === void 0 ? void 0 : options.errorReporter]);
   useEffect(function () {
     if (mediaProvider) {
       handleMediaProvider('mediaProvider', Promise.resolve(mediaProvider));

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

@@ -7,34 +7,43 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { BrowserWrapper } from './BrowserWrapper';
 import { ClipboardWrapper } from './ClipboardWrapper';
 import { DropzoneWrapper } from './DropzoneWrapper';
+var useMediaPickerState = sharedPluginStateHookMigratorFactory(function (api) {
+  var hasFocus = useSharedPluginStateSelector(api, 'focus.hasFocus');
+  var connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
+  var mediaOptions = useSharedPluginStateSelector(api, 'media.mediaOptions');
+  return {
+    hasFocus: hasFocus,
+    connectivityMode: connectivityMode,
+    mediaOptions: mediaOptions
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['focus', 'connectivity', 'media']),
+    focusState = _useSharedPluginState.focusState,
+    connectivityState = _useSharedPluginState.connectivityState,
+    mediaState = _useSharedPluginState.mediaState;
+  return {
+    hasFocus: focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus,
+    connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode,
+    mediaOptions: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaOptions
+  };
+});
 var MediaPicker = function MediaPicker(_ref) {
   var _editorDom$parentElem;
   var api = _ref.api,
     isPopupOpened = _ref.isPopupOpened,
     appearance = _ref.appearance,
-    mediaState = _ref.mediaState,
     onBrowseFn = _ref.onBrowseFn,
     editorDomElement = _ref.editorDomElement;
-  var _useSharedPluginState = useSharedPluginState(api, ['focus', 'connectivity'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    focusState = _useSharedPluginState.focusState,
-    connectivityState = _useSharedPluginState.connectivityState;
-  var hasFocusSelector = useSharedPluginStateSelector(api, 'focus.hasFocus', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var connectivityModeSelector = useSharedPluginStateSelector(api, 'connectivity.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var hasFocus = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hasFocusSelector : focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus;
-  var connectivityMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? connectivityModeSelector : connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode;
-  var featureFlags = mediaState.mediaOptions && mediaState.mediaOptions.featureFlags;
+  var _useMediaPickerState = useMediaPickerState(api),
+    hasFocus = _useMediaPickerState.hasFocus,
+    connectivityMode = _useMediaPickerState.connectivityMode,
+    mediaOptions = _useMediaPickerState.mediaOptions;
+  var featureFlags = mediaOptions && mediaOptions.featureFlags;
 
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -49,12 +58,12 @@ var MediaPicker = function MediaPicker(_ref) {
    */
   var container = editorParent;
   var clipboard = hasFocus ? /*#__PURE__*/React.createElement(ClipboardWrapper, {
-    mediaState: mediaState,
+    api: api,
     featureFlags: featureFlags,
     container: container
   }) : null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, clipboard, /*#__PURE__*/React.createElement(DropzoneWrapper, {
-    mediaState: mediaState,
+    api: api,
     isActive: !isPopupOpened &&
     // If we're offline don't show the dropzone
     connectivityMode !== 'offline',
@@ -62,8 +71,8 @@ var MediaPicker = function MediaPicker(_ref) {
     editorDomElement: editorDomElement,
     appearance: appearance
   }), /*#__PURE__*/React.createElement(BrowserWrapper, {
+    api: api,
     onBrowseFn: onBrowseFn,
-    mediaState: mediaState,
     featureFlags: featureFlags
   }));
 };
@@ -81,8 +90,8 @@ export var MediaPickerComponents = /*#__PURE__*/function (_React$Component) {
       isPopupOpened: false
     });
     _defineProperty(_this, "onBrowseFn", function (nativeBrowseFn) {
-      var mediaState = _this.props.mediaState;
-      mediaState && mediaState.setBrowseFn(nativeBrowseFn);
+      var setBrowseFn = _this.props.setBrowseFn;
+      setBrowseFn(nativeBrowseFn);
     });
     return _this;
   }
@@ -91,8 +100,8 @@ export var MediaPickerComponents = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-      var mediaState = this.props.mediaState;
-      mediaState.onPopupToggle(function (isPopupOpened) {
+      var onPopupToggle = this.props.onPopupToggle;
+      onPopupToggle(function (isPopupOpened) {
         _this2.setState({
           isPopupOpened: isPopupOpened
         });
@@ -103,12 +112,10 @@ export var MediaPickerComponents = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props = this.props,
         api = _this$props.api,
-        mediaState = _this$props.mediaState,
         editorDomElement = _this$props.editorDomElement,
         appearance = _this$props.appearance;
       var isPopupOpened = this.state.isPopupOpened;
       return /*#__PURE__*/React.createElement(MediaPicker, {
-        mediaState: mediaState,
         editorDomElement: editorDomElement,
         appearance: appearance,
         isPopupOpened: isPopupOpened,

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

@@ -1,34 +1,39 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { toolbarMediaMessages } from '@atlaskit/editor-common/media';
 import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import AttachmentIcon from '@atlaskit/icon/core/migration/attachment--editor-attachment';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 var onClickMediaButton = function onClickMediaButton(showMediaPicker) {
   return function () {
     showMediaPicker();
     return true;
   };
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var allowsUploads = useSharedPluginStateSelector(api, 'media.allowsUploads');
+  var showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
+  return {
+    allowsUploads: allowsUploads,
+    showMediaPicker: showMediaPicker
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  return {
+    allowsUploads: mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads,
+    showMediaPicker: mediaState === null || mediaState === void 0 ? void 0 : mediaState.showMediaPicker
+  };
+});
 var ToolbarMedia = function ToolbarMedia(_ref) {
   var isDisabled = _ref.isDisabled,
     isReducedSpacing = _ref.isReducedSpacing,
     intl = _ref.intl,
     api = _ref.api;
-  var _useSharedPluginState = useSharedPluginState(api, ['media'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    mediaState = _useSharedPluginState.mediaState;
-  var allowsUploadsSelector = useSharedPluginStateSelector(api, 'media.allowsUploads', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var showMediaPickerSelector = useSharedPluginStateSelector(api, 'media.showMediaPicker', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var allowsUploads = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? allowsUploadsSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads;
-  var showMediaPicker = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? showMediaPickerSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.showMediaPicker;
+  var _useSharedState = useSharedState(api),
+    allowsUploads = _useSharedState.allowsUploads,
+    showMediaPicker = _useSharedState.showMediaPicker;
   if (!allowsUploads || !showMediaPicker) {
     return null;
   }

package/dist/esm/ui/hooks/useMediaProvider.js

@@ -1,16 +1,21 @@
 import { useMemo } from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-export var useMediaProvider = function useMediaProvider(pluginInjectionApi) {
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['media'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
+var useSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var mediaProvider = useSharedPluginStateSelector(pluginInjectionApi, 'media.mediaProvider');
+  return {
+    mediaProvider: mediaProvider
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['media']),
     mediaState = _useSharedPluginState.mediaState;
-  var mediaProviderSelector = useSharedPluginStateSelector(pluginInjectionApi, 'media.mediaProvider', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mediaProvider = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
+  return {
+    mediaProvider: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider
+  };
+});
+export var useMediaProvider = function useMediaProvider(pluginInjectionApi) {
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    mediaProvider = _useSharedState.mediaProvider;
   var provider = useMemo(function () {
     return mediaProvider;
   }, [mediaProvider]);

package/dist/esm/ui/toolbar/alt-text.js

@@ -8,6 +8,8 @@ import { MediaSharedClassNames as ClassNames } from '@atlaskit/editor-common/sty
 import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import TextIcon from '@atlaskit/icon/core/text';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { openMediaAltTextMenu } from '../../pm-plugins/alt-text/commands';
 import AltTextEdit from '../../pm-plugins/alt-text/ui/AltTextEdit';
 import { isImage } from '../../pm-plugins/utils/is-type';
@@ -48,11 +50,12 @@ var altTextEditComponent = function altTextEditComponent(options) {
       /** Focus should move to the 'Alt text' button when the toolbar closes
        * and not close the floating toolbar.
        */
-      var handleEsc = function handleEsc() {
+      var setFocus = function setFocus() {
         var _options$forceFocusSe;
         var tr = view.state.tr,
           dispatch = view.dispatch;
-        var newTr = options === null || options === void 0 || (_options$forceFocusSe = options.forceFocusSelector) === null || _options$forceFocusSe === void 0 ? void 0 : _options$forceFocusSe.call(options, "[data-testid=\"".concat(testId, "\"]"))(tr);
+        var elementSelector = options !== null && options !== void 0 && options.triggerButtonSelector && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8') ? options.triggerButtonSelector : "[data-testid=\"".concat(testId, "\"]");
+        var newTr = options === null || options === void 0 || (_options$forceFocusSe = options.forceFocusSelector) === null || _options$forceFocusSe === void 0 ? void 0 : _options$forceFocusSe.call(options, elementSelector)(tr);
         if (newTr) {
           dispatch(newTr);
         }
@@ -65,7 +68,8 @@ var altTextEditComponent = function altTextEditComponent(options) {
         mediaType: mediaNode.attrs.type,
         value: mediaNode.attrs.alt,
         altTextValidator: options && options.altTextValidator,
-        onEscape: handleEsc
+        onEscape: setFocus,
+        onEnter: setFocus
       });
     }
   };

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

@@ -738,6 +738,7 @@ var getMediaTypeMessage = function getMediaTypeMessage(selectedNodeTypeSingle) {
   });
   return mediaType ? mediaTypeMessages[mediaType] : messages.file_unknown_is_selected;
 };
+export var overflowDropdwonBtnTriggerTestId = 'media-overflow-dropdown-trigger';
 export var floatingToolbar = function floatingToolbar(state, intl) {
   var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -783,13 +784,18 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
       return linkingToolbar;
     }
   }
+
+  // testId is required to show focus on trigger button on ESC key press
+  // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
+  var overflowButtonSelector = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8') ? "[data-testid=\"".concat(overflowDropdwonBtnTriggerTestId, "\"]") : undefined;
   if (allowAltTextOnImages) {
     var mediaAltTextPluginState = getMediaAltTextPluginState(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
       var _pluginInjectionApi$f;
       return getAltTextToolbar(baseToolbar, {
         altTextValidator: altTextValidator,
-        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
+        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,
+        triggerButtonSelector: overflowButtonSelector
       });
     }
   }
@@ -803,7 +809,8 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
         pluginInjectionApi: pluginInjectionApi,
         pluginState: mediaPluginState,
         hoverDecoration: hoverDecoration,
-        isEditorFullWidthEnabled: options.fullWidthEnabled
+        isEditorFullWidthEnabled: options.fullWidthEnabled,
+        triggerButtonSelector: overflowButtonSelector
       });
     }
   }
@@ -856,6 +863,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     items.push({
       type: 'overflow-dropdown',
       id: 'media',
+      testId: overflowDropdwonBtnTriggerTestId,
       options: [].concat(_toConsumableArray(customOptions), [_objectSpread({
         title: intl === null || intl === void 0 ? void 0 : intl.formatMessage(commonMessages.copyToClipboard),
         onClick: function onClick() {

package/dist/esm/ui/toolbar/linking.js

@@ -9,11 +9,13 @@ import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit
 import LinkIcon from '@atlaskit/icon/core/link';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { hideLinkingToolbar, setUrlToMedia, showLinkingToolbar, unlink } from '../../pm-plugins/commands/linking';
 import { getMediaLinkingState } from '../../pm-plugins/linking';
 import { currentMediaInlineNode, currentMediaNode } from '../../pm-plugins/utils/current-media-node';
 import MediaLinkingToolbar from '../../ui/MediaLinkingToolbar';
 var FORCE_FOCUS_SELECTOR = '[data-testid="add-link-button"],[data-testid="edit-link-button"]';
+var FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS = '[data-testid="media-overflow-dropdown-trigger"]';
 export function shouldShowMediaLinkToolbar(editorState) {
   var mediaLinkingState = getMediaLinkingState(editorState);
   if (!mediaLinkingState || mediaLinkingState.mediaPos === null) {
@@ -52,38 +54,51 @@ export var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, med
             if (!view || !providerFactory) {
               return null;
             }
+            var setFocusOnFloatingToolbar = function setFocusOnFloatingToolbar(setFocus) {
+              if (setFocus && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8')) {
+                var _pluginInjectionApi$f;
+                var tr = view.state.tr,
+                  dispatch = view.dispatch;
+                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 || _pluginInjectionApi$f.forceFocusSelector(FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS)(tr);
+                dispatch(tr);
+              }
+            };
             return /*#__PURE__*/React.createElement(MediaLinkingToolbar, {
               key: idx,
               displayUrl: link,
               providerFactory: providerFactory,
               intl: intl,
               editing: editing,
-              onUnlink: function onUnlink() {
+              onUnlink: function onUnlink(setFocus) {
                 var _pluginInjectionApi$a;
-                return unlink(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
+                unlink(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
+                setFocusOnFloatingToolbar(setFocus);
               },
-              onBack: function onBack(href, meta) {
+              onBack: function onBack(href, meta, setFocus) {
                 if (href.trim() && meta.inputMethod) {
                   var _pluginInjectionApi$a2;
                   setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(view.state, view.dispatch, view);
                 }
                 hideLinkingToolbar(view.state, view.dispatch, view);
+                setFocusOnFloatingToolbar(setFocus);
               },
               onCancel: function onCancel() {
-                var _pluginInjectionApi$f;
+                var _pluginInjectionApi$f2;
                 hideLinkingToolbar(view.state, view.dispatch, view, true);
                 /** Focus should move to the 'Add link' button when the toolbar closes
                  * and not close the floating toolbar.
                  */
                 var tr = view.state.tr,
                   dispatch = view.dispatch;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 || _pluginInjectionApi$f.forceFocusSelector(FORCE_FOCUS_SELECTOR)(tr);
+                var selector = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8') ? FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS : FORCE_FOCUS_SELECTOR;
+                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 || _pluginInjectionApi$f2.forceFocusSelector(selector)(tr);
                 dispatch(tr);
               },
               onSubmit: function onSubmit(href, meta) {
                 var _pluginInjectionApi$a3;
                 setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(view.state, view.dispatch, view);
                 hideLinkingToolbar(view.state, view.dispatch, view);
+                setFocusOnFloatingToolbar(true);
               },
               onBlur: function onBlur() {
                 hideLinkingToolbar(view.state, view.dispatch, view);

package/dist/esm/ui/toolbar/pixel-resizing.js

@@ -16,7 +16,8 @@ export var getPixelResizingToolbar = function getPixelResizingToolbar(toolbarBas
     intl = _ref.intl,
     pluginState = _ref.pluginState,
     hoverDecoration = _ref.hoverDecoration,
-    isEditorFullWidthEnabled = _ref.isEditorFullWidthEnabled;
+    isEditorFullWidthEnabled = _ref.isEditorFullWidthEnabled,
+    triggerButtonSelector = _ref.triggerButtonSelector;
   return _objectSpread(_objectSpread({}, toolbarBaseConfig), {}, {
     width: PIXEL_RESIZING_TOOLBAR_WIDTH,
     scrollable: true,
@@ -38,7 +39,8 @@ export var getPixelResizingToolbar = function getPixelResizingToolbar(toolbarBas
           pluginInjectionApi: pluginInjectionApi,
           pluginState: pluginState,
           hoverDecoration: hoverDecoration,
-          isEditorFullWidthEnabled: isEditorFullWidthEnabled
+          isEditorFullWidthEnabled: isEditorFullWidthEnabled,
+          triggerButtonSelector: triggerButtonSelector
         });
       }
     }]

package/dist/types/pm-plugins/alt-text/ui/AltTextEdit.d.ts

@@ -11,6 +11,7 @@ type Props = {
     value?: string;
     altTextValidator?: (value: string) => string[];
     onEscape?: () => void;
+    onEnter?: () => void;
 } & WrappedComponentProps & WithAnalyticsEventsProps;
 export type AltTextEditComponentState = {
     showClearTextButton: boolean;
@@ -32,6 +33,7 @@ export declare class AltTextEditComponent extends React.Component<Props, AltText
     private getValidationErrors;
     render(): jsx.JSX.Element;
     private closeMediaAltTextMenu;
+    private closeMediaAltTextMenuAndSetFocus;
     private fireAnalytics;
     private dispatchCancelEvent;
     private handleOnChange;

package/dist/types/pm-plugins/pixel-resizing/ui/index.d.ts

@@ -14,8 +14,9 @@ export type Props = {
     pluginState: MediaPluginState;
     hoverDecoration: HoverDecorationHandler | undefined;
     isEditorFullWidthEnabled?: boolean;
+    triggerButtonSelector?: string;
 };
-export declare const PixelEntry: ({ editorView, selectedMediaSingleNode, pluginInjectionApi, intl, pluginState, hoverDecoration, isEditorFullWidthEnabled, }: Props) => jsx.JSX.Element | null;
+export declare const PixelEntry: ({ editorView, selectedMediaSingleNode, pluginInjectionApi, intl, pluginState, hoverDecoration, isEditorFullWidthEnabled, triggerButtonSelector, }: Props) => jsx.JSX.Element | null;
 export declare const FullWidthDisplay: ({ intl: { formatMessage } }: {
     intl: IntlShape;
 }) => jsx.JSX.Element;