@atlaskit/editor-plugin-media 3.0.2 → 3.0.4

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

@@ -15,6 +15,7 @@ var _new = require("@atlaskit/button/new");
 var _media = require("@atlaskit/editor-common/media");
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -100,7 +101,7 @@ var PixelEntryComponent = exports.PixelEntryComponent = function PixelEntryCompo
   };
 
   // Handle submit when user presses enter or click close button in PixelEntryComponentNext
-  var handleCloseAndSave = (0, _react.useCallback)(function (data) {
+  var handleCloseAndSave = (0, _react.useCallback)(function (data, setFocus) {
     if (data.inputWidth === '' || data.inputHeight === '') {
       return;
     }
@@ -126,7 +127,7 @@ var PixelEntryComponent = exports.PixelEntryComponent = function PixelEntryCompo
       onCloseAndSave({
         width: widthToBeSubmitted,
         validation: validation
-      });
+      }, setFocus);
     }
   }, [maxWidth, minWidth, onCloseAndSave, ratioWidth]);
 
@@ -292,10 +293,11 @@ var PixelEntryComponentNext = exports.PixelEntryComponentNext = function PixelEn
   }, [isViewMode, widthInputRef]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     if (event.key === 'Enter') {
+      var shouldSetFocus = true;
       handleCloseAndSave({
         inputWidth: computedWidth,
         inputHeight: computedHeight
-      });
+      }, shouldSetFocus);
     }
   }, [computedWidth, computedHeight, handleCloseAndSave]);
   return (0, _react2.jsx)(_primitives.Box, {
@@ -364,6 +366,7 @@ var PixelEntryComponentNext = exports.PixelEntryComponentNext = function PixelEn
         inputWidth: computedWidth,
         inputHeight: computedHeight
       });
-    }
+    },
+    onKeyDown: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8') ? handleKeyDown : undefined
   }))));
 };

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

@@ -13,9 +13,26 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 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 useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var selectedAnnotations = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.selectedAnnotations');
+  var isInlineCommentViewClosed = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.isInlineCommentViewClosed');
+  var annotations = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.annotations');
+  return {
+    selectedAnnotations: selectedAnnotations,
+    isInlineCommentViewClosed: isInlineCommentViewClosed,
+    annotations: annotations
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['annotation']),
+    annotationState = _useSharedPluginState.annotationState;
+  return {
+    selectedAnnotations: annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations,
+    isInlineCommentViewClosed: annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed,
+    annotations: annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations
+  };
+});
 var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
   var api = _ref.api,
     mediaNode = _ref.mediaNode,
@@ -24,26 +41,14 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     intl = _ref.intl,
     isDrafting = _ref.isDrafting,
     badgeOffsetRight = _ref.badgeOffsetRight;
+  var _useSharedState = useSharedState(api),
+    selectedAnnotations = _useSharedState.selectedAnnotations,
+    isInlineCommentViewClosed = _useSharedState.isInlineCommentViewClosed,
+    annotations = _useSharedState.annotations;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     entered = _useState2[0],
     setEntered = _useState2[1];
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['annotation'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    annotationState = _useSharedPluginState.annotationState;
-  var selectedAnnotationsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.selectedAnnotations', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isInlineCommentViewClosedSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.isInlineCommentViewClosed', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var annotationsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.annotations', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selectedAnnotations = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations;
-  var isInlineCommentViewClosed = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed;
-  var annotations = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? annotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations;
   var _view$state$schema = view.state.schema,
     media = _view$state$schema.nodes.media,
     annotation = _view$state$schema.marks.annotation,
@@ -114,22 +119,10 @@ var CommentBadgeNextWrapper = exports.CommentBadgeNextWrapper = function Comment
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     entered = _useState4[0],
     setEntered = _useState4[1];
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['annotation'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    annotationState = _useSharedPluginState2.annotationState;
-  var selectedAnnotationsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.selectedAnnotations', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isInlineCommentViewClosedSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.isInlineCommentViewClosed', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var annotationsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.annotations', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selectedAnnotations = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations;
-  var isInlineCommentViewClosed = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed;
-  var annotations = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? annotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations;
+  var _useSharedState2 = useSharedState(api),
+    selectedAnnotations = _useSharedState2.selectedAnnotations,
+    isInlineCommentViewClosed = _useSharedState2.isInlineCommentViewClosed,
+    annotations = _useSharedState2.annotations;
   var _view$state$schema2 = view.state.schema,
     media = _view$state$schema2.nodes.media,
     annotation = _view$state$schema2.marks.annotation,

package/dist/cjs/ui/MediaLinkingToolbar.js

@@ -63,14 +63,14 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
         inputMethod: inputMethod
       });
     });
-    (0, _defineProperty2.default)(_this, "handleOnBack", function (_ref2) {
+    (0, _defineProperty2.default)(_this, "handleOnBack", function (_ref2, setFocus) {
       var url = _ref2.url,
         inputMethod = _ref2.inputMethod;
       var onBack = _this.props.onBack;
       if (onBack) {
         onBack(url, {
           inputMethod: inputMethod
-        });
+        }, setFocus);
       }
     });
     (0, _defineProperty2.default)(_this, "handleCancel", function () {
@@ -79,10 +79,10 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
         onCancel();
       }
     });
-    (0, _defineProperty2.default)(_this, "handleUnlink", function () {
+    (0, _defineProperty2.default)(_this, "handleUnlink", function (setFocus) {
       var onUnlink = _this.props.onUnlink;
       if (onUnlink) {
-        onUnlink();
+        onUnlink(setFocus);
       }
     });
     (0, _defineProperty2.default)(_this, "handleOnBlur", function (options) {
@@ -132,6 +132,14 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
               url: value,
               inputMethod: currentInputMethod
             });
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === 'Enter') {
+              _this.handleOnBack({
+                url: value,
+                inputMethod: currentInputMethod
+              }, true);
+            }
           }
         })), (0, _react2.jsx)(_ui.PanelTextInput, {
           inputId: "media-link-search-input",
@@ -164,7 +172,14 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
           icon: (0, _react2.jsx)(_linkBrokenEditorUnlink.default, {
             label: formatUnlinkText
           }),
-          onClick: _this.handleUnlink
+          onClick: function onClick() {
+            return _this.handleUnlink();
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === 'Enter') {
+              _this.handleUnlink(true);
+            }
+          }
         }))), !!errorsList.length && (0, _react2.jsx)("section", {
           css: validationWrapper
         }, errorsList), renderRecentList()))

package/dist/cjs/ui/MediaPicker/BrowserWrapper.js

@@ -12,12 +12,12 @@ var _PickerFacadeProvider = _interopRequireDefault(require("./PickerFacadeProvid
 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) { (0, _defineProperty2.default)(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; }
 var BrowserWrapper = exports.BrowserWrapper = function BrowserWrapper(_ref) {
-  var mediaState = _ref.mediaState,
+  var api = _ref.api,
     isOpen = _ref.isOpen,
     onBrowseFn = _ref.onBrowseFn,
     featureFlags = _ref.featureFlags;
   return /*#__PURE__*/_react.default.createElement(_PickerFacadeProvider.default, {
-    mediaState: mediaState,
+    api: api,
     analyticsName: "browser"
   }, function (_ref2) {
     var mediaClientConfig = _ref2.mediaClientConfig,

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

@@ -9,11 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 var _mediaPicker = require("@atlaskit/media-picker");
 var _PickerFacadeProvider = _interopRequireDefault(require("./PickerFacadeProvider"));
 var ClipboardWrapper = exports.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.default.createElement(_PickerFacadeProvider.default, {
-    mediaState: mediaState,
+    api: api,
     analyticsName: "clipboard"
   }, function (_ref2) {
     var mediaClientConfig = _ref2.mediaClientConfig,

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

@@ -7,47 +7,88 @@ Object.defineProperty(exports, "__esModule", {
 exports.DropzoneWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _mediaPicker = require("@atlaskit/media-picker");
 var _PickerFacadeProvider = _interopRequireDefault(require("./PickerFacadeProvider"));
 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) { (0, _defineProperty2.default)(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; }
-var DropzoneWrapper = exports.DropzoneWrapper = function DropzoneWrapper(_ref) {
-  var mediaState = _ref.mediaState,
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var options = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.options');
+  var handleDrag = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.handleDrag');
+  return {
+    options: options,
+    handleDrag: handleDrag
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.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' && (0, _ui.findOverflowScrollParent)(editorHtmlElement);
+  var container = customDropzoneContainer || (scrollParent ? scrollParent : editorHtmlElement);
+  var dropzoneConfig = _objectSpread(_objectSpread({}, config), {}, {
+    container: container
+  });
+  return isActive ? /*#__PURE__*/_react.default.createElement(_mediaPicker.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;
+};
+var DropzoneWrapper = exports.DropzoneWrapper = function DropzoneWrapper(_ref3) {
+  var api = _ref3.api,
+    isActive = _ref3.isActive,
+    featureFlags = _ref3.featureFlags,
+    editorDomElement = _ref3.editorDomElement,
+    appearance = _ref3.appearance;
   return /*#__PURE__*/_react.default.createElement(_PickerFacadeProvider.default, {
-    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' && (0, _ui.findOverflowScrollParent)(editorHtmlElement);
-    var container = customDropzoneContainer || (scrollParent ? scrollParent : editorHtmlElement);
-    var dropzoneConfig = _objectSpread(_objectSpread({}, config), {}, {
-      container: container
-    });
-    return isActive ? /*#__PURE__*/_react.default.createElement(_mediaPicker.Dropzone, {
+  }, function (_ref4) {
+    var mediaClientConfig = _ref4.mediaClientConfig,
+      config = _ref4.config,
+      pickerFacadeInstance = _ref4.pickerFacadeInstance;
+    return /*#__PURE__*/_react.default.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/cjs/ui/MediaPicker/PickerFacadeProvider.js

@@ -10,6 +10,8 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _reactDom = require("react-dom");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
 var _pickerFacade = _interopRequireDefault(require("../../pm-plugins/picker-facade"));
 var dummyMediaPickerObject = {
@@ -19,8 +21,32 @@ var dummyMediaPickerObject = {
   destroy: function destroy() {},
   setUploadParams: function setUploadParams() {}
 };
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var mediaProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaProvider');
+  var mediaOptions = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaOptions');
+  var insertFile = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.insertFile');
+  var options = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.options');
+  return {
+    mediaProvider: mediaProvider,
+    mediaOptions: mediaOptions,
+    insertFile: insertFile,
+    options: options
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  var mediaProvider = (0, _react.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
+  };
+});
 function PickerFacadeProvider(_ref) {
-  var mediaState = _ref.mediaState,
+  var api = _ref.api,
     analyticsName = _ref.analyticsName,
     children = _ref.children;
   var _useState = (0, _react.useState)({
@@ -31,9 +57,11 @@ function PickerFacadeProvider(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     state = _useState2[0],
     setState = _useState2[1];
-  var mediaProvider = (0, _react.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 = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, provider) {
       var mediaProvider, resolvedMediaClientConfig, pickerFacadeConfig, pickerFacadeInstance, config;
@@ -44,7 +72,7 @@ function PickerFacadeProvider(_ref) {
             return provider;
           case 2:
             mediaProvider = _context.sent;
-            if (!(!mediaProvider || !mediaProvider.uploadParams)) {
+            if (!(!mediaProvider || !mediaProvider.uploadParams || !insertFile)) {
               _context.next = 5;
               break;
             }
@@ -72,14 +100,14 @@ function PickerFacadeProvider(_ref) {
           case 15:
             pickerFacadeConfig = {
               mediaClientConfig: resolvedMediaClientConfig,
-              errorReporter: mediaState.options.errorReporter || new _utils.ErrorReporter(),
-              featureFlags: mediaState.mediaOptions && mediaState.mediaOptions.featureFlags
+              errorReporter: (options === null || options === void 0 ? void 0 : options.errorReporter) || new _utils.ErrorReporter(),
+              featureFlags: mediaOptions && mediaOptions.featureFlags
             };
             _context.next = 18;
             return new _pickerFacade.default('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
@@ -100,7 +128,7 @@ 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]);
   (0, _react.useEffect)(function () {
     if (mediaProvider) {
       handleMediaProvider('mediaProvider', Promise.resolve(mediaProvider));

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

@@ -14,34 +14,43 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _BrowserWrapper = require("./BrowserWrapper");
 var _ClipboardWrapper = require("./ClipboardWrapper");
 var _DropzoneWrapper = require("./DropzoneWrapper");
 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; })(); }
+var useMediaPickerState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var hasFocus = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'focus.hasFocus');
+  var connectivityMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode');
+  var mediaOptions = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaOptions');
+  return {
+    hasFocus: hasFocus,
+    connectivityMode: connectivityMode,
+    mediaOptions: mediaOptions
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.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 = (0, _hooks.useSharedPluginState)(api, ['focus', 'connectivity'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    focusState = _useSharedPluginState.focusState,
-    connectivityState = _useSharedPluginState.connectivityState;
-  var hasFocusSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'focus.hasFocus', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var connectivityModeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var hasFocus = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? hasFocusSelector : focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus;
-  var connectivityMode = (0, _experiments.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
@@ -56,12 +65,12 @@ var MediaPicker = function MediaPicker(_ref) {
    */
   var container = editorParent;
   var clipboard = hasFocus ? /*#__PURE__*/_react.default.createElement(_ClipboardWrapper.ClipboardWrapper, {
-    mediaState: mediaState,
+    api: api,
     featureFlags: featureFlags,
     container: container
   }) : null;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, clipboard, /*#__PURE__*/_react.default.createElement(_DropzoneWrapper.DropzoneWrapper, {
-    mediaState: mediaState,
+    api: api,
     isActive: !isPopupOpened &&
     // If we're offline don't show the dropzone
     connectivityMode !== 'offline',
@@ -69,8 +78,8 @@ var MediaPicker = function MediaPicker(_ref) {
     editorDomElement: editorDomElement,
     appearance: appearance
   }), /*#__PURE__*/_react.default.createElement(_BrowserWrapper.BrowserWrapper, {
+    api: api,
     onBrowseFn: onBrowseFn,
-    mediaState: mediaState,
     featureFlags: featureFlags
   }));
 };
@@ -88,8 +97,8 @@ var MediaPickerComponents = exports.MediaPickerComponents = /*#__PURE__*/functio
       isPopupOpened: false
     });
     (0, _defineProperty2.default)(_this, "onBrowseFn", function (nativeBrowseFn) {
-      var mediaState = _this.props.mediaState;
-      mediaState && mediaState.setBrowseFn(nativeBrowseFn);
+      var setBrowseFn = _this.props.setBrowseFn;
+      setBrowseFn(nativeBrowseFn);
     });
     return _this;
   }
@@ -98,8 +107,8 @@ var MediaPickerComponents = exports.MediaPickerComponents = /*#__PURE__*/functio
     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
         });
@@ -110,12 +119,10 @@ var MediaPickerComponents = exports.MediaPickerComponents = /*#__PURE__*/functio
     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.default.createElement(MediaPicker, {
-        mediaState: mediaState,
         editorDomElement: editorDomElement,
         appearance: appearance,
         isPopupOpened: isPopupOpened,

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

@@ -12,30 +12,35 @@ var _media = require("@atlaskit/editor-common/media");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _attachmentEditorAttachment = _interopRequireDefault(require("@atlaskit/icon/core/migration/attachment--editor-attachment"));
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var onClickMediaButton = function onClickMediaButton(showMediaPicker) {
   return function () {
     showMediaPicker();
     return true;
   };
 };
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var allowsUploads = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.allowsUploads');
+  var showMediaPicker = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.showMediaPicker');
+  return {
+    allowsUploads: allowsUploads,
+    showMediaPicker: showMediaPicker
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.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 = (0, _hooks.useSharedPluginState)(api, ['media'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    mediaState = _useSharedPluginState.mediaState;
-  var allowsUploadsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.allowsUploads', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var showMediaPickerSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.showMediaPicker', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var allowsUploads = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? allowsUploadsSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads;
-  var showMediaPicker = (0, _experiments.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/cjs/ui/hooks/useMediaProvider.js

@@ -7,16 +7,21 @@ exports.useMediaProvider = void 0;
 var _react = require("react");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var useMediaProvider = exports.useMediaProvider = function useMediaProvider(pluginInjectionApi) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['media'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  var mediaProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'media.mediaProvider');
+  return {
+    mediaProvider: mediaProvider
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['media']),
     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;
+  return {
+    mediaProvider: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider
+  };
+});
+var useMediaProvider = exports.useMediaProvider = function useMediaProvider(pluginInjectionApi) {
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    mediaProvider = _useSharedState.mediaProvider;
   var provider = (0, _react.useMemo)(function () {
     return mediaProvider;
   }, [mediaProvider]);