@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/dist/esm/ui/MediaLinkingToolbar.js

@@ -0,0 +1,188 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { container, containerWithProvider, inputWrapper, RecentSearch } from '@atlaskit/editor-common/link';
+import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
+import { ErrorMessage } from '@atlaskit/editor-common/ui';
+// Common Translations will live here
+import { PanelTextInput } from '@atlaskit/editor-common/ui';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
+import { normalizeUrl } from '@atlaskit/editor-common/utils';
+import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
+import EditorUnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
+import { R400 } from '@atlaskit/theme/colors';
+import { mediaLinkToolbarMessages } from './media-linking-toolbar-messages';
+var validationWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(R400, ")"));
+var buttonWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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
+export var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(LinkAddToolbar, _React$PureComponent);
+  var _super = _createSuper(LinkAddToolbar);
+  function LinkAddToolbar() {
+    var _this;
+    _classCallCheck(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));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      validationErrors: []
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function (_ref) {
+      var url = _ref.url,
+        inputMethod = _ref.inputMethod;
+      _this.props.onSubmit(url, {
+        inputMethod: inputMethod
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleOnBack", function (_ref2) {
+      var url = _ref2.url,
+        inputMethod = _ref2.inputMethod;
+      var onBack = _this.props.onBack;
+      if (onBack) {
+        onBack(url, {
+          inputMethod: inputMethod
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleCancel", function () {
+      var onCancel = _this.props.onCancel;
+      if (onCancel) {
+        onCancel();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleUnlink", function () {
+      var onUnlink = _this.props.onUnlink;
+      if (onUnlink) {
+        onUnlink();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleOnBlur", function (options) {
+      _this.props.onBlur(options.url);
+    });
+    _defineProperty(_assertThisInitialized(_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 ? linkToolbarMessages.placeholder : linkToolbarMessages.linkPlaceholder);
+      };
+      var formatLinkAddressText = formatMessage(mediaLinkToolbarMessages.backLink);
+      var formatUnlinkText = formatMessage(linkToolbarMessages.unlink);
+      var errorsList = _this.state.validationErrors.map(function (error, index) {
+        return jsx(ErrorMessage, {
+          key: index
+        }, error);
+      });
+      return jsx("div", {
+        className: "recent-list"
+      }, jsx("div", {
+        css: [container, !!activityProvider && containerWithProvider]
+      }, jsx("div", {
+        css: inputWrapper
+      }, jsx("span", {
+        css: buttonWrapper
+      }, jsx(Button, {
+        title: formatLinkAddressText,
+        icon: jsx(ChevronLeftLargeIcon, {
+          label: formatLinkAddressText
+        }),
+        onClick: function onClick() {
+          return _this.handleOnBack({
+            url: value,
+            inputMethod: currentInputMethod
+          });
+        }
+      })), jsx(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
+      }), normalizeUrl(displayUrl) && jsx(Fragment, null, jsx(Separator, null), jsx(Button, {
+        title: formatUnlinkText,
+        icon: jsx(EditorUnlinkIcon, {
+          label: formatUnlinkText
+        }),
+        onClick: _this.handleUnlink
+      }))), !!errorsList.length && jsx("section", {
+        css: validationWrapper
+      }, errorsList), renderRecentList()));
+    });
+    return _this;
+  }
+  _createClass(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 === INPUT_METHOD.TYPEAHEAD) {
+        return [];
+      }
+      if (!value) {
+        return [formatMessage(linkToolbarMessages.emptyLink)];
+      }
+      // if url can be normalized - we consider it is a valid url
+      // also don't show validaition errors for empty values
+      if (normalizeUrl(value)) {
+        return [];
+      } else {
+        return [formatMessage(linkToolbarMessages.invalidLink)];
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        providerFactory = _this$props2.providerFactory,
+        displayUrl = _this$props2.displayUrl;
+      return jsx(RecentSearch, {
+        defaultUrl: normalizeUrl(displayUrl),
+        providerFactory: providerFactory,
+        onSubmit: this.handleSubmit,
+        onBlur: this.handleOnBlur,
+        render: this.renderContainer
+      });
+    }
+  }]);
+  return LinkAddToolbar;
+}(React.PureComponent);
+export default LinkAddToolbar;

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

@@ -0,0 +1,33 @@
+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 { Browser } from '@atlaskit/media-picker';
+import PickerFacadeProvider from './PickerFacadeProvider';
+export var BrowserWrapper = function BrowserWrapper(_ref) {
+  var mediaState = _ref.mediaState,
+    isOpen = _ref.isOpen,
+    onBrowseFn = _ref.onBrowseFn,
+    featureFlags = _ref.featureFlags;
+  return /*#__PURE__*/React.createElement(PickerFacadeProvider, {
+    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.createElement(Browser, {
+      onBrowseFn: onBrowseFn,
+      isOpen: isOpen,
+      config: browserConfig,
+      mediaClientConfig: mediaClientConfig,
+      onEnd: pickerFacadeInstance.handleReady,
+      onError: pickerFacadeInstance.handleUploadError,
+      onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
+      featureFlags: featureFlags
+    });
+  });
+};

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

@@ -0,0 +1,32 @@
+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;
+  return /*#__PURE__*/React.createElement(PickerFacadeProvider, {
+    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.createElement(Clipboard, {
+      mediaClientConfig: mediaClientConfig,
+      config: clipboardConfig,
+      onError: pickerFacadeInstance.handleUploadError,
+      onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
+      onEnd: pickerFacadeInstance.handleReady,
+      featureFlags: featureFlags
+    });
+  });
+};

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

@@ -0,0 +1,44 @@
+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 { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { Dropzone } from '@atlaskit/media-picker';
+import PickerFacadeProvider from './PickerFacadeProvider';
+export var DropzoneWrapper = function DropzoneWrapper(_ref) {
+  var mediaState = _ref.mediaState,
+    isActive = _ref.isActive,
+    featureFlags = _ref.featureFlags,
+    editorDomElement = _ref.editorDomElement,
+    appearance = _ref.appearance;
+  return /*#__PURE__*/React.createElement(PickerFacadeProvider, {
+    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' && 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('enter');
+      },
+      onDragLeave: function onDragLeave() {
+        return handleDrag('leave');
+      },
+      featureFlags: featureFlags
+    }) : null;
+  });
+};

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

@@ -0,0 +1,145 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+import React from 'react';
+import { ErrorReporter } from '@atlaskit/editor-common/utils';
+import PickerFacade from '../../picker-facade';
+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 = /*#__PURE__*/function (_React$Component) {
+  _inherits(PickerFacadeProvider, _React$Component);
+  var _super = _createSuper(PickerFacadeProvider);
+  function PickerFacadeProvider() {
+    var _this;
+    _classCallCheck(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));
+    _defineProperty(_assertThisInitialized(_this), "state", {});
+    _defineProperty(_assertThisInitialized(_this), "handleMediaProvider", /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_name, provider) {
+        var _this$props, mediaState, analyticsName, mediaProvider, resolvedMediaClientConfig, pickerFacadeConfig, pickerFacadeInstance, config;
+        return _regeneratorRuntime.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 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('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;
+  }
+  _createClass(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.Component);
+export { PickerFacadeProvider as default };

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

@@ -0,0 +1,96 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { BrowserWrapper } from './BrowserWrapper';
+import { ClipboardWrapper } from './ClipboardWrapper';
+import { DropzoneWrapper } from './DropzoneWrapper';
+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 = 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.createElement(ClipboardWrapper, {
+    mediaState: mediaState,
+    featureFlags: featureFlags,
+    container: container
+  }) : null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, clipboard, /*#__PURE__*/React.createElement(DropzoneWrapper, {
+    mediaState: mediaState,
+    isActive: !isPopupOpened,
+    featureFlags: featureFlags,
+    editorDomElement: editorDomElement,
+    appearance: appearance
+  }), /*#__PURE__*/React.createElement(BrowserWrapper, {
+    onBrowseFn: onBrowseFn,
+    mediaState: mediaState,
+    featureFlags: featureFlags
+  }));
+};
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var MediaPickerComponents = /*#__PURE__*/function (_React$Component) {
+  _inherits(MediaPickerComponents, _React$Component);
+  var _super = _createSuper(MediaPickerComponents);
+  function MediaPickerComponents() {
+    var _this;
+    _classCallCheck(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));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isPopupOpened: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "onBrowseFn", function (nativeBrowseFn) {
+      var mediaState = _this.props.mediaState;
+      mediaState && mediaState.setBrowseFn(nativeBrowseFn);
+    });
+    return _this;
+  }
+  _createClass(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.createElement(MediaPicker, {
+        mediaState: mediaState,
+        editorDomElement: editorDomElement,
+        appearance: appearance,
+        isPopupOpened: isPopupOpened,
+        onBrowseFn: this.onBrowseFn,
+        api: api
+      });
+    }
+  }]);
+  return MediaPickerComponents;
+}(React.Component);
+_defineProperty(MediaPickerComponents, "displayName", 'MediaPickerComponents');

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

@@ -0,0 +1 @@
+export var PIXELENTRY_MIGRATION_BUTTON_TESTID = 'pixel-entry-convert-pixels-btn';