@atlaskit/editor-plugin-media-insert 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 1.2.0
+
+### Minor Changes
+
+- [#128527](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128527)
+  [`e9e003a733b63`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e9e003a733b63) -
+  Add media upload from URL and associated i18n, analytics and test packages
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.1.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "MediaFromURL", {
+  enumerable: true,
+  get: function get() {
+    return _FromURL.MediaFromURL;
+  }
+});
 Object.defineProperty(exports, "mediaInsertPlugin", {
   enumerable: true,
   get: function get() {
     return _plugin.mediaInsertPlugin;
   }
 });
-var _plugin = require("./plugin");
+var _plugin = require("./plugin");
+var _FromURL = require("./ui/FromURL");

package/dist/cjs/ui/FromURL.js

@@ -0,0 +1,234 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaFromURL = MediaFromURL;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
+var _mediaClientReact = require("@atlaskit/media-client-react");
+var _primitives = require("@atlaskit/primitives");
+var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _MediaCard = require("./MediaCard");
+var _useAnalyticsEvents2 = require("./useAnalyticsEvents");
+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 PreviewBoxStyles = (0, _primitives.xcss)({
+  borderWidth: 'border.width',
+  borderStyle: 'dashed',
+  borderColor: 'color.border',
+  borderRadius: 'border.radius',
+  height: '200px'
+});
+var PreviewImageStyles = (0, _primitives.xcss)({
+  height: '200px'
+});
+var ButtonGroupStyles = (0, _primitives.xcss)({
+  alignSelf: 'end'
+});
+var INITIAL_PREVIEW_STATE = Object.freeze({
+  isLoading: false,
+  error: null,
+  warning: null,
+  previewInfo: null
+});
+var previewStateReducer = function previewStateReducer(state, action) {
+  switch (action.type) {
+    case 'loading':
+      return _objectSpread(_objectSpread({}, INITIAL_PREVIEW_STATE), {}, {
+        isLoading: true
+      });
+    case 'error':
+      return _objectSpread(_objectSpread({}, INITIAL_PREVIEW_STATE), {}, {
+        error: action.error
+      });
+    case 'warning':
+      return _objectSpread(_objectSpread({}, INITIAL_PREVIEW_STATE), {}, {
+        warning: action.warning
+      });
+    case 'success':
+      return _objectSpread(_objectSpread({}, INITIAL_PREVIEW_STATE), {}, {
+        previewInfo: action.payload
+      });
+    case 'reset':
+      return INITIAL_PREVIEW_STATE;
+    default:
+      return state;
+  }
+};
+// TODO: Delete these before rollout
+var placeholders = ['https://picsum.photos/200/300',
+// has cors
+'https://placedog.net/500/280',
+// has cors
+'https://preview.redd.it/gabriel-medina-at-the-olympics-after-riding-a-nearly-v0-dbyczz2fkifd1.jpeg?auto=webp&s=045550d672718427b67fb929bc6efc57116a7596' // no cors
+];
+function MediaFromURL(_ref) {
+  var mediaProvider = _ref.mediaProvider,
+    onInsert = _ref.onInsert,
+    onExternalInsert = _ref.onExternalInsert,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var strings = {
+    loadPreview: intl.formatMessage(_messages.mediaInsertMessages.loadPreview),
+    insert: intl.formatMessage(_messages.mediaInsertMessages.insert),
+    pasteLinkToUpload: intl.formatMessage(_messages.mediaInsertMessages.pasteLinkToUpload),
+    cancel: intl.formatMessage(_messages.mediaInsertMessages.cancel),
+    errorMessage: intl.formatMessage(_messages.mediaInsertMessages.errorMessage),
+    warning: intl.formatMessage(_messages.mediaInsertMessages.warning)
+  };
+  var _React$useState = _react.default.useState(placeholders[1]),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    url = _React$useState2[0],
+    setUrl = _React$useState2[1];
+  var _React$useReducer = _react.default.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE),
+    _React$useReducer2 = (0, _slicedToArray2.default)(_React$useReducer, 2),
+    previewState = _React$useReducer2[0],
+    dispatch = _React$useReducer2[1];
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(dispatchAnalyticsEvent),
+    onUploadAnalytics = _useAnalyticsEvents.onUploadAnalytics,
+    onUploadSuccessAnalytics = _useAnalyticsEvents.onUploadSuccessAnalytics,
+    onUploadFailureAnalytics = _useAnalyticsEvents.onUploadFailureAnalytics;
+  var onURLChange = _react.default.useCallback(function (e) {
+    setUrl(e.target.value);
+    dispatch({
+      type: 'reset'
+    });
+  }, []);
+  var uploadExternalMedia = _react.default.useCallback( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var _yield$mediaProvider, uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, message;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          dispatch({
+            type: 'loading'
+          });
+          _context.next = 3;
+          return mediaProvider;
+        case 3:
+          _yield$mediaProvider = _context.sent;
+          uploadMediaClientConfig = _yield$mediaProvider.uploadMediaClientConfig;
+          uploadParams = _yield$mediaProvider.uploadParams;
+          if (uploadMediaClientConfig) {
+            _context.next = 8;
+            break;
+          }
+          return _context.abrupt("return");
+        case 8:
+          mediaClient = (0, _mediaClientReact.getMediaClient)(uploadMediaClientConfig);
+          collection = uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.collection;
+          onUploadAnalytics();
+          _context.prev = 11;
+          _context.next = 14;
+          return mediaClient.file.uploadExternal(url, collection);
+        case 14:
+          _yield$mediaClient$fi = _context.sent;
+          uploadableFileUpfrontIds = _yield$mediaClient$fi.uploadableFileUpfrontIds;
+          dimensions = _yield$mediaClient$fi.dimensions;
+          onUploadSuccessAnalytics();
+          dispatch({
+            type: 'success',
+            payload: {
+              id: uploadableFileUpfrontIds.id,
+              collection: collection,
+              height: dimensions.height,
+              width: dimensions.width,
+              occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
+            }
+          });
+          _context.next = 24;
+          break;
+        case 21:
+          _context.prev = 21;
+          _context.t0 = _context["catch"](11);
+          if (typeof _context.t0 === 'string' && _context.t0 === 'Could not download remote file') {
+            // TODO: Make sure this gets good unit test coverage with the actual
+            // media plugin. This hard coded error message could be changed at any
+            // point and we need a unit test to break to stop people changing it.
+            onUploadFailureAnalytics(_context.t0);
+            dispatch({
+              type: 'warning',
+              warning: _context.t0,
+              url: url
+            });
+          } else if (_context.t0 instanceof Error) {
+            message = 'Image preview fetch failed';
+            onUploadFailureAnalytics(message);
+            dispatch({
+              type: 'error',
+              error: message
+            });
+          } else {
+            onUploadFailureAnalytics('Unknown error');
+            dispatch({
+              type: 'error',
+              error: 'Unknown error'
+            });
+          }
+        case 24:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[11, 21]]);
+  })), [mediaProvider, onUploadAnalytics, onUploadFailureAnalytics, onUploadSuccessAnalytics, url]);
+  var onInsertClick = _react.default.useCallback(function () {
+    if (previewState.previewInfo) {
+      return onInsert(previewState.previewInfo);
+    }
+    if (previewState.warning) {
+      return onExternalInsert(url);
+    }
+  }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, url]);
+  return /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      uploadExternalMedia();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+    space: "space.150"
+  }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
+    autoFocus: true,
+    value: url,
+    placeholder: strings.pasteLinkToUpload,
+    onChange: onURLChange
+  }), previewState.previewInfo && /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    alignInline: "center",
+    alignBlock: "center",
+    xcss: PreviewImageStyles,
+    space: "space.200"
+  }, /*#__PURE__*/_react.default.createElement(_MediaCard.MediaCard, {
+    attrs: previewState.previewInfo,
+    mediaProvider: mediaProvider
+  })), previewState.error && /*#__PURE__*/_react.default.createElement(_sectionMessage.default, {
+    appearance: "error"
+  }, strings.errorMessage), previewState.warning && /*#__PURE__*/_react.default.createElement(_sectionMessage.default, {
+    appearance: "warning"
+  }, strings.warning), !previewState.previewInfo && !previewState.error && !previewState.warning && /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    xcss: PreviewBoxStyles,
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/_react.default.createElement(_new.default, {
+    type: "submit",
+    isLoading: previewState.isLoading,
+    isDisabled: !url,
+    iconBefore: _filePreview.default
+  }, strings.loadPreview)), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: ButtonGroupStyles
+  }, /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "subtle"
+  }, strings.cancel), /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "primary",
+    isDisabled: !previewState.previewInfo && !previewState.warning,
+    onClick: onInsertClick
+  }, strings.insert)))));
+}

package/dist/cjs/ui/MediaCard.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaCard = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _mediaCard = require("@atlaskit/media-card");
+var maxDimensions = {
+  width: '100%',
+  height: '100%'
+};
+var MediaCard = exports.MediaCard = function MediaCard(_ref) {
+  var attrs = _ref.attrs,
+    mediaProviderPromise = _ref.mediaProvider;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var mediaAlt = intl.formatMessage(_messages.mediaInsertMessages.mediaAlt);
+  var _React$useState = _react.default.useState(),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    mediaProvider = _React$useState2[0],
+    setMediaProvider = _React$useState2[1];
+  _react.default.useEffect(function () {
+    mediaProviderPromise.then(setMediaProvider);
+  }, [mediaProviderPromise]);
+  var dimensions = _react.default.useMemo(function () {
+    return {
+      width: attrs.width,
+      height: attrs.height
+    };
+  }, [attrs.width, attrs.height]);
+  var identifier = _react.default.useMemo(function () {
+    return {
+      id: attrs.id,
+      mediaItemType: 'file',
+      collectionName: attrs.collection
+    };
+  }, [attrs.collection, attrs.id]);
+  if (!mediaProvider) {
+    return /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
+      dimensions: dimensions
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
+    mediaClientConfig: mediaProvider.viewMediaClientConfig,
+    resizeMode: "stretchy-fit",
+    dimensions: maxDimensions,
+    originalDimensions: dimensions,
+    identifier: identifier,
+    alt: mediaAlt
+  });
+};

package/dist/cjs/ui/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/ui/useAnalyticsEvents.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnalyticsEvents = useAnalyticsEvents;
+var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+function useAnalyticsEvents(dispatchAnalyticsEvent) {
+  var onUploadAnalytics = _react.default.useCallback(function () {
+    dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 || dispatchAnalyticsEvent({
+      action: _analytics.ACTION.CLICKED,
+      actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.UPLOAD_MEDIA_FROM_URL,
+      eventType: _analytics.EVENT_TYPE.UI
+    });
+  }, [dispatchAnalyticsEvent]);
+  var onUploadSuccessAnalytics = _react.default.useCallback(function () {
+    dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 || dispatchAnalyticsEvent({
+      action: _analytics.ACTION.UPLOAD_SUCCEEDED,
+      actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.UPLOAD_MEDIA_FROM_URL,
+      eventType: _analytics.EVENT_TYPE.OPERATIONAL
+    });
+  }, [dispatchAnalyticsEvent]);
+  var onUploadFailureAnalytics = _react.default.useCallback(function (reason) {
+    dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 || dispatchAnalyticsEvent({
+      action: _analytics.ACTION.UPLOAD_FAILED,
+      actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.UPLOAD_MEDIA_FROM_URL,
+      eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        reason: reason
+      }
+    });
+  }, [dispatchAnalyticsEvent]);
+  return _react.default.useMemo(function () {
+    return {
+      onUploadAnalytics: onUploadAnalytics,
+      onUploadSuccessAnalytics: onUploadSuccessAnalytics,
+      onUploadFailureAnalytics: onUploadFailureAnalytics
+    };
+  }, [onUploadAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics]);
+}

package/dist/es2019/index.js

@@ -1 +1,2 @@
-export { mediaInsertPlugin } from './plugin';
+export { mediaInsertPlugin } from './plugin';
+export { MediaFromURL } from './ui/FromURL';

package/dist/es2019/ui/FromURL.js

@@ -0,0 +1,202 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import ButtonGroup from '@atlaskit/button/button-group';
+import Button from '@atlaskit/button/new';
+import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
+import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
+import { getMediaClient } from '@atlaskit/media-client-react';
+import { Box, Flex, Inline, Stack, xcss } from '@atlaskit/primitives';
+import SectionMessage from '@atlaskit/section-message';
+import TextField from '@atlaskit/textfield';
+import { MediaCard } from './MediaCard';
+import { useAnalyticsEvents } from './useAnalyticsEvents';
+const PreviewBoxStyles = xcss({
+  borderWidth: 'border.width',
+  borderStyle: 'dashed',
+  borderColor: 'color.border',
+  borderRadius: 'border.radius',
+  height: '200px'
+});
+const PreviewImageStyles = xcss({
+  height: '200px'
+});
+const ButtonGroupStyles = xcss({
+  alignSelf: 'end'
+});
+const INITIAL_PREVIEW_STATE = Object.freeze({
+  isLoading: false,
+  error: null,
+  warning: null,
+  previewInfo: null
+});
+const previewStateReducer = (state, action) => {
+  switch (action.type) {
+    case 'loading':
+      return {
+        ...INITIAL_PREVIEW_STATE,
+        isLoading: true
+      };
+    case 'error':
+      return {
+        ...INITIAL_PREVIEW_STATE,
+        error: action.error
+      };
+    case 'warning':
+      return {
+        ...INITIAL_PREVIEW_STATE,
+        warning: action.warning
+      };
+    case 'success':
+      return {
+        ...INITIAL_PREVIEW_STATE,
+        previewInfo: action.payload
+      };
+    case 'reset':
+      return INITIAL_PREVIEW_STATE;
+    default:
+      return state;
+  }
+};
+// TODO: Delete these before rollout
+const placeholders = ['https://picsum.photos/200/300',
+// has cors
+'https://placedog.net/500/280',
+// has cors
+'https://preview.redd.it/gabriel-medina-at-the-olympics-after-riding-a-nearly-v0-dbyczz2fkifd1.jpeg?auto=webp&s=045550d672718427b67fb929bc6efc57116a7596' // no cors
+];
+export function MediaFromURL({
+  mediaProvider,
+  onInsert,
+  onExternalInsert,
+  dispatchAnalyticsEvent
+}) {
+  const intl = useIntl();
+  const strings = {
+    loadPreview: intl.formatMessage(mediaInsertMessages.loadPreview),
+    insert: intl.formatMessage(mediaInsertMessages.insert),
+    pasteLinkToUpload: intl.formatMessage(mediaInsertMessages.pasteLinkToUpload),
+    cancel: intl.formatMessage(mediaInsertMessages.cancel),
+    errorMessage: intl.formatMessage(mediaInsertMessages.errorMessage),
+    warning: intl.formatMessage(mediaInsertMessages.warning)
+  };
+  const [url, setUrl] = React.useState(placeholders[1]);
+  const [previewState, dispatch] = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE);
+  const {
+    onUploadAnalytics,
+    onUploadSuccessAnalytics,
+    onUploadFailureAnalytics
+  } = useAnalyticsEvents(dispatchAnalyticsEvent);
+  const onURLChange = React.useCallback(e => {
+    setUrl(e.target.value);
+    dispatch({
+      type: 'reset'
+    });
+  }, []);
+  const uploadExternalMedia = React.useCallback(async () => {
+    dispatch({
+      type: 'loading'
+    });
+    const {
+      uploadMediaClientConfig,
+      uploadParams
+    } = await mediaProvider;
+    if (!uploadMediaClientConfig) {
+      return;
+    }
+    const mediaClient = getMediaClient(uploadMediaClientConfig);
+    const collection = uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.collection;
+    onUploadAnalytics();
+    try {
+      const {
+        uploadableFileUpfrontIds,
+        dimensions
+      } = await mediaClient.file.uploadExternal(url, collection);
+      onUploadSuccessAnalytics();
+      dispatch({
+        type: 'success',
+        payload: {
+          id: uploadableFileUpfrontIds.id,
+          collection,
+          height: dimensions.height,
+          width: dimensions.width,
+          occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
+        }
+      });
+    } catch (e) {
+      if (typeof e === 'string' && e === 'Could not download remote file') {
+        // TODO: Make sure this gets good unit test coverage with the actual
+        // media plugin. This hard coded error message could be changed at any
+        // point and we need a unit test to break to stop people changing it.
+        onUploadFailureAnalytics(e);
+        dispatch({
+          type: 'warning',
+          warning: e,
+          url
+        });
+      } else if (e instanceof Error) {
+        const message = 'Image preview fetch failed';
+        onUploadFailureAnalytics(message);
+        dispatch({
+          type: 'error',
+          error: message
+        });
+      } else {
+        onUploadFailureAnalytics('Unknown error');
+        dispatch({
+          type: 'error',
+          error: 'Unknown error'
+        });
+      }
+    }
+  }, [mediaProvider, onUploadAnalytics, onUploadFailureAnalytics, onUploadSuccessAnalytics, url]);
+  const onInsertClick = React.useCallback(() => {
+    if (previewState.previewInfo) {
+      return onInsert(previewState.previewInfo);
+    }
+    if (previewState.warning) {
+      return onExternalInsert(url);
+    }
+  }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, url]);
+  return /*#__PURE__*/React.createElement("form", {
+    onSubmit: e => {
+      e.preventDefault();
+      uploadExternalMedia();
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: "space.150"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    autoFocus: true,
+    value: url,
+    placeholder: strings.pasteLinkToUpload,
+    onChange: onURLChange
+  }), previewState.previewInfo && /*#__PURE__*/React.createElement(Inline, {
+    alignInline: "center",
+    alignBlock: "center",
+    xcss: PreviewImageStyles,
+    space: "space.200"
+  }, /*#__PURE__*/React.createElement(MediaCard, {
+    attrs: previewState.previewInfo,
+    mediaProvider: mediaProvider
+  })), previewState.error && /*#__PURE__*/React.createElement(SectionMessage, {
+    appearance: "error"
+  }, strings.errorMessage), previewState.warning && /*#__PURE__*/React.createElement(SectionMessage, {
+    appearance: "warning"
+  }, strings.warning), !previewState.previewInfo && !previewState.error && !previewState.warning && /*#__PURE__*/React.createElement(Flex, {
+    xcss: PreviewBoxStyles,
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    isLoading: previewState.isLoading,
+    isDisabled: !url,
+    iconBefore: EditorFilePreviewIcon
+  }, strings.loadPreview)), /*#__PURE__*/React.createElement(Box, {
+    xcss: ButtonGroupStyles
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle"
+  }, strings.cancel), /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    isDisabled: !previewState.previewInfo && !previewState.warning,
+    onClick: onInsertClick
+  }, strings.insert)))));
+}

package/dist/es2019/ui/MediaCard.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
+import { Card, CardLoading } from '@atlaskit/media-card';
+const maxDimensions = {
+  width: '100%',
+  height: '100%'
+};
+export const MediaCard = ({
+  attrs,
+  mediaProvider: mediaProviderPromise
+}) => {
+  const intl = useIntl();
+  const mediaAlt = intl.formatMessage(mediaInsertMessages.mediaAlt);
+  const [mediaProvider, setMediaProvider] = React.useState();
+  React.useEffect(() => {
+    mediaProviderPromise.then(setMediaProvider);
+  }, [mediaProviderPromise]);
+  const dimensions = React.useMemo(() => {
+    return {
+      width: attrs.width,
+      height: attrs.height
+    };
+  }, [attrs.width, attrs.height]);
+  const identifier = React.useMemo(() => ({
+    id: attrs.id,
+    mediaItemType: 'file',
+    collectionName: attrs.collection
+  }), [attrs.collection, attrs.id]);
+  if (!mediaProvider) {
+    return /*#__PURE__*/React.createElement(CardLoading, {
+      dimensions: dimensions
+    });
+  }
+  return /*#__PURE__*/React.createElement(Card, {
+    mediaClientConfig: mediaProvider.viewMediaClientConfig,
+    resizeMode: "stretchy-fit",
+    dimensions: maxDimensions,
+    originalDimensions: dimensions,
+    identifier: identifier,
+    alt: mediaAlt
+  });
+};

package/dist/es2019/ui/useAnalyticsEvents.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+export function useAnalyticsEvents(dispatchAnalyticsEvent) {
+  const onUploadAnalytics = React.useCallback(() => {
+    dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 ? void 0 : dispatchAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BUTTON,
+      actionSubjectId: ACTION_SUBJECT_ID.UPLOAD_MEDIA_FROM_URL,
+      eventType: EVENT_TYPE.UI
+    });
+  }, [dispatchAnalyticsEvent]);
+  const onUploadSuccessAnalytics = React.useCallback(() => {
+    dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 ? void 0 : dispatchAnalyticsEvent({
+      action: ACTION.UPLOAD_SUCCEEDED,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      actionSubjectId: ACTION_SUBJECT_ID.UPLOAD_MEDIA_FROM_URL,
+      eventType: EVENT_TYPE.OPERATIONAL
+    });
+  }, [dispatchAnalyticsEvent]);
+  const onUploadFailureAnalytics = React.useCallback(reason => {
+    dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 ? void 0 : dispatchAnalyticsEvent({
+      action: ACTION.UPLOAD_FAILED,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      actionSubjectId: ACTION_SUBJECT_ID.UPLOAD_MEDIA_FROM_URL,
+      eventType: EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        reason
+      }
+    });
+  }, [dispatchAnalyticsEvent]);
+  return React.useMemo(() => ({
+    onUploadAnalytics,
+    onUploadSuccessAnalytics,
+    onUploadFailureAnalytics
+  }), [onUploadAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics]);
+}

package/dist/esm/index.js

@@ -1 +1,2 @@
-export { mediaInsertPlugin } from './plugin';
+export { mediaInsertPlugin } from './plugin';
+export { MediaFromURL } from './ui/FromURL';

package/dist/esm/ui/FromURL.js

@@ -0,0 +1,227 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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 { useIntl } from 'react-intl-next';
+import ButtonGroup from '@atlaskit/button/button-group';
+import Button from '@atlaskit/button/new';
+import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
+import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
+import { getMediaClient } from '@atlaskit/media-client-react';
+import { Box, Flex, Inline, Stack, xcss } from '@atlaskit/primitives';
+import SectionMessage from '@atlaskit/section-message';
+import TextField from '@atlaskit/textfield';
+import { MediaCard } from './MediaCard';
+import { useAnalyticsEvents } from './useAnalyticsEvents';
+var PreviewBoxStyles = xcss({
+  borderWidth: 'border.width',
+  borderStyle: 'dashed',
+  borderColor: 'color.border',
+  borderRadius: 'border.radius',
+  height: '200px'
+});
+var PreviewImageStyles = xcss({
+  height: '200px'
+});
+var ButtonGroupStyles = xcss({
+  alignSelf: 'end'
+});
+var INITIAL_PREVIEW_STATE = Object.freeze({
+  isLoading: false,
+  error: null,
+  warning: null,
+  previewInfo: null
+});
+var previewStateReducer = function previewStateReducer(state, action) {
+  switch (action.type) {
+    case 'loading':
+      return _objectSpread(_objectSpread({}, INITIAL_PREVIEW_STATE), {}, {
+        isLoading: true
+      });
+    case 'error':
+      return _objectSpread(_objectSpread({}, INITIAL_PREVIEW_STATE), {}, {
+        error: action.error
+      });
+    case 'warning':
+      return _objectSpread(_objectSpread({}, INITIAL_PREVIEW_STATE), {}, {
+        warning: action.warning
+      });
+    case 'success':
+      return _objectSpread(_objectSpread({}, INITIAL_PREVIEW_STATE), {}, {
+        previewInfo: action.payload
+      });
+    case 'reset':
+      return INITIAL_PREVIEW_STATE;
+    default:
+      return state;
+  }
+};
+// TODO: Delete these before rollout
+var placeholders = ['https://picsum.photos/200/300',
+// has cors
+'https://placedog.net/500/280',
+// has cors
+'https://preview.redd.it/gabriel-medina-at-the-olympics-after-riding-a-nearly-v0-dbyczz2fkifd1.jpeg?auto=webp&s=045550d672718427b67fb929bc6efc57116a7596' // no cors
+];
+export function MediaFromURL(_ref) {
+  var mediaProvider = _ref.mediaProvider,
+    onInsert = _ref.onInsert,
+    onExternalInsert = _ref.onExternalInsert,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var intl = useIntl();
+  var strings = {
+    loadPreview: intl.formatMessage(mediaInsertMessages.loadPreview),
+    insert: intl.formatMessage(mediaInsertMessages.insert),
+    pasteLinkToUpload: intl.formatMessage(mediaInsertMessages.pasteLinkToUpload),
+    cancel: intl.formatMessage(mediaInsertMessages.cancel),
+    errorMessage: intl.formatMessage(mediaInsertMessages.errorMessage),
+    warning: intl.formatMessage(mediaInsertMessages.warning)
+  };
+  var _React$useState = React.useState(placeholders[1]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    url = _React$useState2[0],
+    setUrl = _React$useState2[1];
+  var _React$useReducer = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE),
+    _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
+    previewState = _React$useReducer2[0],
+    dispatch = _React$useReducer2[1];
+  var _useAnalyticsEvents = useAnalyticsEvents(dispatchAnalyticsEvent),
+    onUploadAnalytics = _useAnalyticsEvents.onUploadAnalytics,
+    onUploadSuccessAnalytics = _useAnalyticsEvents.onUploadSuccessAnalytics,
+    onUploadFailureAnalytics = _useAnalyticsEvents.onUploadFailureAnalytics;
+  var onURLChange = React.useCallback(function (e) {
+    setUrl(e.target.value);
+    dispatch({
+      type: 'reset'
+    });
+  }, []);
+  var uploadExternalMedia = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _yield$mediaProvider, uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, message;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          dispatch({
+            type: 'loading'
+          });
+          _context.next = 3;
+          return mediaProvider;
+        case 3:
+          _yield$mediaProvider = _context.sent;
+          uploadMediaClientConfig = _yield$mediaProvider.uploadMediaClientConfig;
+          uploadParams = _yield$mediaProvider.uploadParams;
+          if (uploadMediaClientConfig) {
+            _context.next = 8;
+            break;
+          }
+          return _context.abrupt("return");
+        case 8:
+          mediaClient = getMediaClient(uploadMediaClientConfig);
+          collection = uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.collection;
+          onUploadAnalytics();
+          _context.prev = 11;
+          _context.next = 14;
+          return mediaClient.file.uploadExternal(url, collection);
+        case 14:
+          _yield$mediaClient$fi = _context.sent;
+          uploadableFileUpfrontIds = _yield$mediaClient$fi.uploadableFileUpfrontIds;
+          dimensions = _yield$mediaClient$fi.dimensions;
+          onUploadSuccessAnalytics();
+          dispatch({
+            type: 'success',
+            payload: {
+              id: uploadableFileUpfrontIds.id,
+              collection: collection,
+              height: dimensions.height,
+              width: dimensions.width,
+              occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
+            }
+          });
+          _context.next = 24;
+          break;
+        case 21:
+          _context.prev = 21;
+          _context.t0 = _context["catch"](11);
+          if (typeof _context.t0 === 'string' && _context.t0 === 'Could not download remote file') {
+            // TODO: Make sure this gets good unit test coverage with the actual
+            // media plugin. This hard coded error message could be changed at any
+            // point and we need a unit test to break to stop people changing it.
+            onUploadFailureAnalytics(_context.t0);
+            dispatch({
+              type: 'warning',
+              warning: _context.t0,
+              url: url
+            });
+          } else if (_context.t0 instanceof Error) {
+            message = 'Image preview fetch failed';
+            onUploadFailureAnalytics(message);
+            dispatch({
+              type: 'error',
+              error: message
+            });
+          } else {
+            onUploadFailureAnalytics('Unknown error');
+            dispatch({
+              type: 'error',
+              error: 'Unknown error'
+            });
+          }
+        case 24:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[11, 21]]);
+  })), [mediaProvider, onUploadAnalytics, onUploadFailureAnalytics, onUploadSuccessAnalytics, url]);
+  var onInsertClick = React.useCallback(function () {
+    if (previewState.previewInfo) {
+      return onInsert(previewState.previewInfo);
+    }
+    if (previewState.warning) {
+      return onExternalInsert(url);
+    }
+  }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, url]);
+  return /*#__PURE__*/React.createElement("form", {
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      uploadExternalMedia();
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: "space.150"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    autoFocus: true,
+    value: url,
+    placeholder: strings.pasteLinkToUpload,
+    onChange: onURLChange
+  }), previewState.previewInfo && /*#__PURE__*/React.createElement(Inline, {
+    alignInline: "center",
+    alignBlock: "center",
+    xcss: PreviewImageStyles,
+    space: "space.200"
+  }, /*#__PURE__*/React.createElement(MediaCard, {
+    attrs: previewState.previewInfo,
+    mediaProvider: mediaProvider
+  })), previewState.error && /*#__PURE__*/React.createElement(SectionMessage, {
+    appearance: "error"
+  }, strings.errorMessage), previewState.warning && /*#__PURE__*/React.createElement(SectionMessage, {
+    appearance: "warning"
+  }, strings.warning), !previewState.previewInfo && !previewState.error && !previewState.warning && /*#__PURE__*/React.createElement(Flex, {
+    xcss: PreviewBoxStyles,
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    isLoading: previewState.isLoading,
+    isDisabled: !url,
+    iconBefore: EditorFilePreviewIcon
+  }, strings.loadPreview)), /*#__PURE__*/React.createElement(Box, {
+    xcss: ButtonGroupStyles
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle"
+  }, strings.cancel), /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    isDisabled: !previewState.previewInfo && !previewState.warning,
+    onClick: onInsertClick
+  }, strings.insert)))));
+}

package/dist/esm/ui/MediaCard.js

@@ -0,0 +1,48 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
+import { Card, CardLoading } from '@atlaskit/media-card';
+var maxDimensions = {
+  width: '100%',
+  height: '100%'
+};
+export var MediaCard = function MediaCard(_ref) {
+  var attrs = _ref.attrs,
+    mediaProviderPromise = _ref.mediaProvider;
+  var intl = useIntl();
+  var mediaAlt = intl.formatMessage(mediaInsertMessages.mediaAlt);
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    mediaProvider = _React$useState2[0],
+    setMediaProvider = _React$useState2[1];
+  React.useEffect(function () {
+    mediaProviderPromise.then(setMediaProvider);
+  }, [mediaProviderPromise]);
+  var dimensions = React.useMemo(function () {
+    return {
+      width: attrs.width,
+      height: attrs.height
+    };
+  }, [attrs.width, attrs.height]);
+  var identifier = React.useMemo(function () {
+    return {
+      id: attrs.id,
+      mediaItemType: 'file',
+      collectionName: attrs.collection
+    };
+  }, [attrs.collection, attrs.id]);
+  if (!mediaProvider) {
+    return /*#__PURE__*/React.createElement(CardLoading, {
+      dimensions: dimensions
+    });
+  }
+  return /*#__PURE__*/React.createElement(Card, {
+    mediaClientConfig: mediaProvider.viewMediaClientConfig,
+    resizeMode: "stretchy-fit",
+    dimensions: maxDimensions,
+    originalDimensions: dimensions,
+    identifier: identifier,
+    alt: mediaAlt
+  });
+};

package/dist/esm/ui/useAnalyticsEvents.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+export function useAnalyticsEvents(dispatchAnalyticsEvent) {
+  var onUploadAnalytics = React.useCallback(function () {
+    dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 || dispatchAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BUTTON,
+      actionSubjectId: ACTION_SUBJECT_ID.UPLOAD_MEDIA_FROM_URL,
+      eventType: EVENT_TYPE.UI
+    });
+  }, [dispatchAnalyticsEvent]);
+  var onUploadSuccessAnalytics = React.useCallback(function () {
+    dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 || dispatchAnalyticsEvent({
+      action: ACTION.UPLOAD_SUCCEEDED,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      actionSubjectId: ACTION_SUBJECT_ID.UPLOAD_MEDIA_FROM_URL,
+      eventType: EVENT_TYPE.OPERATIONAL
+    });
+  }, [dispatchAnalyticsEvent]);
+  var onUploadFailureAnalytics = React.useCallback(function (reason) {
+    dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 || dispatchAnalyticsEvent({
+      action: ACTION.UPLOAD_FAILED,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      actionSubjectId: ACTION_SUBJECT_ID.UPLOAD_MEDIA_FROM_URL,
+      eventType: EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        reason: reason
+      }
+    });
+  }, [dispatchAnalyticsEvent]);
+  return React.useMemo(function () {
+    return {
+      onUploadAnalytics: onUploadAnalytics,
+      onUploadSuccessAnalytics: onUploadSuccessAnalytics,
+      onUploadFailureAnalytics: onUploadFailureAnalytics
+    };
+  }, [onUploadAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics]);
+}

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export { mediaInsertPlugin } from './plugin';
 export type { MediaInsertPlugin } from './plugin';
+export { MediaFromURL } from './ui/FromURL';

package/dist/types/ui/FromURL.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import { type OnInsertAttrs } from './types';
+type Props = {
+    mediaProvider: Promise<MediaProvider>;
+    onInsert: (attrs: OnInsertAttrs) => void;
+    onExternalInsert: (url: string) => void;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+};
+export declare function MediaFromURL({ mediaProvider, onInsert, onExternalInsert, dispatchAnalyticsEvent, }: Props): JSX.Element;
+export {};

package/dist/types/ui/MediaCard.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import { type OnInsertAttrs } from './types';
+type Props = {
+    attrs: OnInsertAttrs;
+    mediaProvider: Promise<MediaProvider>;
+};
+export declare const MediaCard: ({ attrs, mediaProvider: mediaProviderPromise }: Props) => JSX.Element;
+export {};

package/dist/types/ui/types.d.ts

@@ -0,0 +1,7 @@
+export type OnInsertAttrs = {
+    id: string;
+    collection: string | undefined;
+    height: number;
+    width: number;
+    occurrenceKey: string | undefined;
+};

package/dist/types/ui/useAnalyticsEvents.d.ts

@@ -0,0 +1,6 @@
+import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+export declare function useAnalyticsEvents(dispatchAnalyticsEvent?: DispatchAnalyticsEvent): {
+    onUploadAnalytics: () => void;
+    onUploadSuccessAnalytics: () => void;
+    onUploadFailureAnalytics: (reason: string) => void;
+};

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +1,3 @@
 export { mediaInsertPlugin } from './plugin';
 export type { MediaInsertPlugin } from './plugin';
+export { MediaFromURL } from './ui/FromURL';

package/dist/types-ts4.5/ui/FromURL.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import { type OnInsertAttrs } from './types';
+type Props = {
+    mediaProvider: Promise<MediaProvider>;
+    onInsert: (attrs: OnInsertAttrs) => void;
+    onExternalInsert: (url: string) => void;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+};
+export declare function MediaFromURL({ mediaProvider, onInsert, onExternalInsert, dispatchAnalyticsEvent, }: Props): JSX.Element;
+export {};

package/dist/types-ts4.5/ui/MediaCard.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import { type OnInsertAttrs } from './types';
+type Props = {
+    attrs: OnInsertAttrs;
+    mediaProvider: Promise<MediaProvider>;
+};
+export declare const MediaCard: ({ attrs, mediaProvider: mediaProviderPromise }: Props) => JSX.Element;
+export {};

package/dist/types-ts4.5/ui/types.d.ts

@@ -0,0 +1,7 @@
+export type OnInsertAttrs = {
+    id: string;
+    collection: string | undefined;
+    height: number;
+    width: number;
+    occurrenceKey: string | undefined;
+};

package/dist/types-ts4.5/ui/useAnalyticsEvents.d.ts

@@ -0,0 +1,6 @@
+import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+export declare function useAnalyticsEvents(dispatchAnalyticsEvent?: DispatchAnalyticsEvent): {
+    onUploadAnalytics: () => void;
+    onUploadSuccessAnalytics: () => void;
+    onUploadFailureAnalytics: (reason: string) => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media-insert",
-	"version": "1.1.2",
+	"version": "1.2.0",
 	"description": "Media Insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -24,12 +24,21 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^87.3.0",
-		"@babel/runtime": "^7.0.0"
+		"@atlaskit/button": "^19.1.0",
+		"@atlaskit/editor-common": "^87.6.0",
+		"@atlaskit/icon": "^22.11.0",
+		"@atlaskit/media-card": "^78.0.0",
+		"@atlaskit/media-client": "^27.3.0",
+		"@atlaskit/media-client-react": "^2.0.0",
+		"@atlaskit/primitives": "^11.1.0",
+		"@atlaskit/section-message": "^6.5.0",
+		"@atlaskit/textfield": "^6.4.0",
+		"@babel/runtime": "^7.0.0",
+		"react": "^16.8.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/tokens": "^1.56.0",
-		"react": "^16.8.0"
+		"@atlaskit/tokens": "^1.57.0"
 	},
 	"devDependencies": {
 		"typescript": "~5.4.2"
@@ -69,7 +78,6 @@
 			]
 		}
 	},
-	"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",
 	"stricter": {
 		"no-unused-dependencies": {
 			"checkDevDependencies": true