@atlaskit/editor-plugin-media 0.2.0 → 0.3.0

package/dist/cjs/ui/MediaLinkingToolbar.js

@@ -0,0 +1,196 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LinkAddToolbar = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _link = require("@atlaskit/editor-common/link");
+var _messages = require("@atlaskit/editor-common/messages");
+var _ui = require("@atlaskit/editor-common/ui");
+var _utils = require("@atlaskit/editor-common/utils");
+var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
+var _unlink = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/unlink"));
+var _colors = require("@atlaskit/theme/colors");
+var _mediaLinkingToolbarMessages = require("./media-linking-toolbar-messages");
+var _templateObject, _templateObject2;
+/** @jsx jsx */
+// Common Translations will live here
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var validationWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 0;\n  padding: ", " ", "\n    ", " 0;\n  margin: 0 ", " 0 ", ";\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)", "var(--ds-space-050, 4px)", "var(--ds-space-400, 32px)", "var(--ds-border-danger, ".concat(_colors.R400, ")"));
+var buttonWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " ", "\n    ", " 0px;\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var LinkAddToolbar = exports.LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(LinkAddToolbar, _React$PureComponent);
+  var _super = _createSuper(LinkAddToolbar);
+  function LinkAddToolbar() {
+    var _this;
+    (0, _classCallCheck2.default)(this, LinkAddToolbar);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      validationErrors: []
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSubmit", function (_ref) {
+      var url = _ref.url,
+        inputMethod = _ref.inputMethod;
+      _this.props.onSubmit(url, {
+        inputMethod: inputMethod
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnBack", function (_ref2) {
+      var url = _ref2.url,
+        inputMethod = _ref2.inputMethod;
+      var onBack = _this.props.onBack;
+      if (onBack) {
+        onBack(url, {
+          inputMethod: inputMethod
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCancel", function () {
+      var onCancel = _this.props.onCancel;
+      if (onCancel) {
+        onCancel();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleUnlink", function () {
+      var onUnlink = _this.props.onUnlink;
+      if (onUnlink) {
+        onUnlink();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnBlur", function (options) {
+      _this.props.onBlur(options.url);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderContainer", function (_ref3) {
+      var activityProvider = _ref3.activityProvider,
+        _ref3$inputProps = _ref3.inputProps,
+        _onChange = _ref3$inputProps.onChange,
+        onKeyDown = _ref3$inputProps.onKeyDown,
+        _onSubmit = _ref3$inputProps.onSubmit,
+        value = _ref3$inputProps.value,
+        currentInputMethod = _ref3.currentInputMethod,
+        renderRecentList = _ref3.renderRecentList;
+      var _this$props = _this.props,
+        formatMessage = _this$props.intl.formatMessage,
+        displayUrl = _this$props.displayUrl;
+      var getPlaceholder = function getPlaceholder(hasActivityProvider) {
+        return formatMessage(hasActivityProvider ? _messages.linkToolbarMessages.placeholder : _messages.linkToolbarMessages.linkPlaceholder);
+      };
+      var formatLinkAddressText = formatMessage(_mediaLinkingToolbarMessages.mediaLinkToolbarMessages.backLink);
+      var formatUnlinkText = formatMessage(_messages.linkToolbarMessages.unlink);
+      var errorsList = _this.state.validationErrors.map(function (error, index) {
+        return (0, _react2.jsx)(_ui.ErrorMessage, {
+          key: index
+        }, error);
+      });
+      return (0, _react2.jsx)("div", {
+        className: "recent-list"
+      }, (0, _react2.jsx)("div", {
+        css: [_link.container, !!activityProvider && _link.containerWithProvider]
+      }, (0, _react2.jsx)("div", {
+        css: _link.inputWrapper
+      }, (0, _react2.jsx)("span", {
+        css: buttonWrapper
+      }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+        title: formatLinkAddressText,
+        icon: (0, _react2.jsx)(_chevronLeftLarge.default, {
+          label: formatLinkAddressText
+        }),
+        onClick: function onClick() {
+          return _this.handleOnBack({
+            url: value,
+            inputMethod: currentInputMethod
+          });
+        }
+      })), (0, _react2.jsx)(_ui.PanelTextInput, {
+        testId: "media-link-input",
+        placeholder: getPlaceholder(!!activityProvider),
+        autoFocus: true,
+        onCancel: _this.handleCancel,
+        defaultValue: value,
+        onSubmit: function onSubmit(inputValue) {
+          var validationErrors = _this.getValidationErrors(inputValue, currentInputMethod);
+          _this.setState({
+            validationErrors: validationErrors
+          });
+          if (!validationErrors.length) {
+            _onSubmit();
+          }
+        },
+        onChange: function onChange(value) {
+          _this.setState({
+            validationErrors: []
+          });
+          _onChange(value);
+        },
+        onKeyDown: onKeyDown
+      }), (0, _utils.normalizeUrl)(displayUrl) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+        title: formatUnlinkText,
+        icon: (0, _react2.jsx)(_unlink.default, {
+          label: formatUnlinkText
+        }),
+        onClick: _this.handleUnlink
+      }))), !!errorsList.length && (0, _react2.jsx)("section", {
+        css: validationWrapper
+      }, errorsList), renderRecentList()));
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(LinkAddToolbar, [{
+    key: "getValidationErrors",
+    value: function getValidationErrors(value, inputMethod) {
+      var formatMessage = this.props.intl.formatMessage;
+
+      // dont show validation errors if input method is typeahed, which means user selects from search list
+      if (inputMethod === _analytics.INPUT_METHOD.TYPEAHEAD) {
+        return [];
+      }
+      if (!value) {
+        return [formatMessage(_messages.linkToolbarMessages.emptyLink)];
+      }
+      // if url can be normalized - we consider it is a valid url
+      // also don't show validaition errors for empty values
+      if ((0, _utils.normalizeUrl)(value)) {
+        return [];
+      } else {
+        return [formatMessage(_messages.linkToolbarMessages.invalidLink)];
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        providerFactory = _this$props2.providerFactory,
+        displayUrl = _this$props2.displayUrl;
+      return (0, _react2.jsx)(_link.RecentSearch, {
+        defaultUrl: (0, _utils.normalizeUrl)(displayUrl),
+        providerFactory: providerFactory,
+        onSubmit: this.handleSubmit,
+        onBlur: this.handleOnBlur,
+        render: this.renderContainer
+      });
+    }
+  }]);
+  return LinkAddToolbar;
+}(_react.default.PureComponent);
+var _default = exports.default = LinkAddToolbar;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BrowserWrapper = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+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 BrowserWrapper = exports.BrowserWrapper = function BrowserWrapper(_ref) {
+  var mediaState = _ref.mediaState,
+    isOpen = _ref.isOpen,
+    onBrowseFn = _ref.onBrowseFn,
+    featureFlags = _ref.featureFlags;
+  return /*#__PURE__*/_react.default.createElement(_PickerFacadeProvider.default, {
+    mediaState: mediaState,
+    analyticsName: "browser"
+  }, function (_ref2) {
+    var mediaClientConfig = _ref2.mediaClientConfig,
+      config = _ref2.config,
+      pickerFacadeInstance = _ref2.pickerFacadeInstance;
+    var browserConfig = _objectSpread(_objectSpread({}, config), {}, {
+      multiple: true
+    });
+    return /*#__PURE__*/_react.default.createElement(_mediaPicker.Browser, {
+      onBrowseFn: onBrowseFn,
+      isOpen: isOpen,
+      config: browserConfig,
+      mediaClientConfig: mediaClientConfig,
+      onEnd: pickerFacadeInstance.handleReady,
+      onError: pickerFacadeInstance.handleUploadError,
+      onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
+      featureFlags: featureFlags
+    });
+  });
+};

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

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClipboardWrapper = void 0;
+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;
+  return /*#__PURE__*/_react.default.createElement(_PickerFacadeProvider.default, {
+    mediaState: mediaState,
+    analyticsName: "clipboard"
+  }, function (_ref2) {
+    var mediaClientConfig = _ref2.mediaClientConfig,
+      config = _ref2.config,
+      pickerFacadeInstance = _ref2.pickerFacadeInstance;
+    var clipboardConfig = Object.assign({}, config);
+    if ((featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.securedClipboard) === true) {
+      clipboardConfig.container = container;
+      clipboardConfig.onPaste = function (event) {
+        event.stopPropagation();
+        return false;
+      };
+    }
+    return /*#__PURE__*/_react.default.createElement(_mediaPicker.Clipboard, {
+      mediaClientConfig: mediaClientConfig,
+      config: clipboardConfig,
+      onError: pickerFacadeInstance.handleUploadError,
+      onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
+      onEnd: pickerFacadeInstance.handleReady,
+      featureFlags: featureFlags
+    });
+  });
+};

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropzoneWrapper = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _ui = require("@atlaskit/editor-common/ui");
+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,
+    isActive = _ref.isActive,
+    featureFlags = _ref.featureFlags,
+    editorDomElement = _ref.editorDomElement,
+    appearance = _ref.appearance;
+  return /*#__PURE__*/_react.default.createElement(_PickerFacadeProvider.default, {
+    mediaState: mediaState,
+    analyticsName: "dropzone"
+  }, function (_ref2) {
+    var mediaClientConfig = _ref2.mediaClientConfig,
+      config = _ref2.config,
+      pickerFacadeInstance = _ref2.pickerFacadeInstance;
+    var customDropzoneContainer = mediaState.options.customDropzoneContainer,
+      handleDrag = mediaState.handleDrag;
+    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('enter');
+      },
+      onDragLeave: function onDragLeave() {
+        return handleDrag('leave');
+      },
+      featureFlags: featureFlags
+    }) : null;
+  });
+};

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

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@atlaskit/editor-common/utils");
+var _pickerFacade = _interopRequireDefault(require("../../picker-facade"));
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var dummyMediaPickerObject = {
+  on: function on() {},
+  removeAllListeners: function removeAllListeners() {},
+  emit: function emit() {},
+  destroy: function destroy() {},
+  setUploadParams: function setUploadParams() {}
+};
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var PickerFacadeProvider = exports.default = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(PickerFacadeProvider, _React$Component);
+  var _super = _createSuper(PickerFacadeProvider);
+  function PickerFacadeProvider() {
+    var _this;
+    (0, _classCallCheck2.default)(this, PickerFacadeProvider);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMediaProvider", /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, provider) {
+        var _this$props, mediaState, analyticsName, mediaProvider, resolvedMediaClientConfig, pickerFacadeConfig, pickerFacadeInstance, config;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this$props = _this.props, mediaState = _this$props.mediaState, analyticsName = _this$props.analyticsName;
+              _context.next = 3;
+              return provider;
+            case 3:
+              mediaProvider = _context.sent;
+              if (!(!mediaProvider || !mediaProvider.uploadParams)) {
+                _context.next = 6;
+                break;
+              }
+              return _context.abrupt("return");
+            case 6:
+              _context.next = 8;
+              return mediaProvider.uploadMediaClientConfig;
+            case 8:
+              _context.t0 = _context.sent;
+              if (_context.t0) {
+                _context.next = 13;
+                break;
+              }
+              _context.next = 12;
+              return mediaProvider.viewMediaClientConfig;
+            case 12:
+              _context.t0 = _context.sent;
+            case 13:
+              resolvedMediaClientConfig = _context.t0;
+              if (resolvedMediaClientConfig) {
+                _context.next = 16;
+                break;
+              }
+              return _context.abrupt("return");
+            case 16:
+              pickerFacadeConfig = {
+                mediaClientConfig: resolvedMediaClientConfig,
+                errorReporter: mediaState.options.errorReporter || new _utils.ErrorReporter(),
+                featureFlags: mediaState.mediaOptions && mediaState.mediaOptions.featureFlags
+              };
+              /**
+               * As the first MediaPicker component to be migrated to React, we want to scope the amount of changes logic changed/moved on Editor side.
+               * To achieve this we agreed on using `PickerFacade` 'customMediaPicker' type, since we only need this instance to reuse the logic when we subscribe
+               * for all the different events in MediaPicker (onPreviewUpdate, onError, onProcessing, etc).
+               * The `dummyMediaPickerObject` provided here serves as a workaround for the old picker api that `PickerFacade` will try to use.
+               * But we don't want this to do anything since it's all part of the new React component (`Clipboard` component in this case).
+               * Eventually PickerFacade will be removed and replaced with a new abstraction explained here https://product-fabric.atlassian.net/browse/MS-1937
+               */
+              _context.next = 19;
+              return new _pickerFacade.default('customMediaPicker', pickerFacadeConfig, dummyMediaPickerObject, analyticsName).init();
+            case 19:
+              pickerFacadeInstance = _context.sent;
+              /**
+               * Based on the `initPickers` method in `MediaPluginState` we need these 2 `onNewMedia` subscriptions.
+               * First one in order to trigger the entire process of uploading a file for when `onPreviewUpdate` is called
+               * Second one in order to track all analytics as before.
+               */
+              pickerFacadeInstance.onNewMedia(mediaState.insertFile);
+              pickerFacadeInstance.setUploadParams(mediaProvider.uploadParams);
+              config = {
+                uploadParams: mediaProvider.uploadParams
+              };
+              _this.setState({
+                pickerFacadeInstance: pickerFacadeInstance,
+                config: config,
+                mediaClientConfig: resolvedMediaClientConfig
+              });
+            case 24:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+    return _this;
+  }
+  (0, _createClass2.default)(PickerFacadeProvider, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.mediaState.options.providerFactory.subscribe('mediaProvider', this.handleMediaProvider);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.props.mediaState.options.providerFactory.unsubscribe('mediaProvider', this.handleMediaProvider);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+        mediaClientConfig = _this$state.mediaClientConfig,
+        config = _this$state.config,
+        pickerFacadeInstance = _this$state.pickerFacadeInstance;
+      if (!mediaClientConfig || !config || !pickerFacadeInstance) {
+        return null;
+      }
+      return this.props.children({
+        mediaClientConfig: mediaClientConfig,
+        config: config,
+        pickerFacadeInstance: pickerFacadeInstance
+      });
+    }
+  }]);
+  return PickerFacadeProvider;
+}(_react.default.Component);

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaPickerComponents = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _BrowserWrapper = require("./BrowserWrapper");
+var _ClipboardWrapper = require("./ClipboardWrapper");
+var _DropzoneWrapper = require("./DropzoneWrapper");
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var MediaPicker = function MediaPicker(_ref) {
+  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']),
+    focusState = _useSharedPluginState.focusState;
+  var featureFlags = mediaState.mediaOptions && mediaState.mediaOptions.featureFlags;
+  var container = editorDomElement;
+  var clipboard = focusState !== null && focusState !== void 0 && focusState.hasFocus ? /*#__PURE__*/_react.default.createElement(_ClipboardWrapper.ClipboardWrapper, {
+    mediaState: mediaState,
+    featureFlags: featureFlags,
+    container: container
+  }) : null;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, clipboard, /*#__PURE__*/_react.default.createElement(_DropzoneWrapper.DropzoneWrapper, {
+    mediaState: mediaState,
+    isActive: !isPopupOpened,
+    featureFlags: featureFlags,
+    editorDomElement: editorDomElement,
+    appearance: appearance
+  }), /*#__PURE__*/_react.default.createElement(_BrowserWrapper.BrowserWrapper, {
+    onBrowseFn: onBrowseFn,
+    mediaState: mediaState,
+    featureFlags: featureFlags
+  }));
+};
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var MediaPickerComponents = exports.MediaPickerComponents = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(MediaPickerComponents, _React$Component);
+  var _super = _createSuper(MediaPickerComponents);
+  function MediaPickerComponents() {
+    var _this;
+    (0, _classCallCheck2.default)(this, MediaPickerComponents);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      isPopupOpened: false
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBrowseFn", function (nativeBrowseFn) {
+      var mediaState = _this.props.mediaState;
+      mediaState && mediaState.setBrowseFn(nativeBrowseFn);
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(MediaPickerComponents, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var mediaState = this.props.mediaState;
+      mediaState.onPopupToggle(function (isPopupOpened) {
+        _this2.setState({
+          isPopupOpened: isPopupOpened
+        });
+      });
+    }
+  }, {
+    key: "render",
+    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,
+        onBrowseFn: this.onBrowseFn,
+        api: api
+      });
+    }
+  }]);
+  return MediaPickerComponents;
+}(_react.default.Component);
+(0, _defineProperty2.default)(MediaPickerComponents, "displayName", 'MediaPickerComponents');

package/dist/cjs/ui/PixelEntry/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PIXELENTRY_MIGRATION_BUTTON_TESTID = void 0;
+var PIXELENTRY_MIGRATION_BUTTON_TESTID = exports.PIXELENTRY_MIGRATION_BUTTON_TESTID = 'pixel-entry-convert-pixels-btn';