@atlaskit/editor-plugin-media-insert 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 2.3.0
+
+### Minor Changes
+
+- [#134882](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134882)
+  [`ba204702f8e32`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ba204702f8e32) -
+  [ux] [ED-24567] Insert media into the editor via the media insert picker
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.2.0
 
 ### Minor Changes

package/dist/cjs/plugin.js

@@ -43,6 +43,48 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
         popupsMountPoint = _ref3.popupsMountPoint,
         popupsBoundariesElement = _ref3.popupsBoundariesElement,
         popupsScrollableElement = _ref3.popupsScrollableElement;
+      var insertMediaSingle = function insertMediaSingle(_ref4) {
+        var _api$media$actions$in;
+        var mediaState = _ref4.mediaState,
+          inputMethod = _ref4.inputMethod;
+        var id = mediaState.id,
+          dimensions = mediaState.dimensions,
+          contextId = mediaState.contextId,
+          _mediaState$scaleFact = mediaState.scaleFactor,
+          scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact,
+          fileName = mediaState.fileName,
+          collection = mediaState.collection;
+        var _ref5 = dimensions || {
+            height: undefined,
+            width: undefined
+          },
+          width = _ref5.width,
+          height = _ref5.height;
+        var scaledWidth = width && Math.round(width / scaleFactor);
+        var node = editorView.state.schema.nodes.media.create({
+          id: id,
+          type: 'file',
+          collection: collection,
+          contextId: contextId,
+          width: scaledWidth,
+          height: height && Math.round(height / scaleFactor),
+          alt: fileName,
+          __fileMimeType: mediaState.fileMimeType
+        });
+        return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
+      };
+      var insertExternalMediaSingle = function insertExternalMediaSingle(_ref6) {
+        var _api$media$actions$in2;
+        var url = _ref6.url,
+          alt = _ref6.alt,
+          inputMethod = _ref6.inputMethod;
+        var node = editorView.state.schema.nodes.media.create({
+          type: 'external',
+          url: url,
+          alt: alt
+        });
+        return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
+      };
       return /*#__PURE__*/_react.default.createElement(_MediaInsertPicker.MediaInsertPicker, {
         api: api,
         editorView: editorView,
@@ -51,13 +93,15 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
         popupsBoundariesElement: popupsBoundariesElement,
         popupsScrollableElement: popupsScrollableElement,
         closeMediaInsertPicker: function closeMediaInsertPicker() {
-          editorView.dispatch((0, _actions.closeMediaInsertPicker)(editorView.state.tr));
-        }
+          return editorView.dispatch((0, _actions.closeMediaInsertPicker)(editorView.state.tr));
+        },
+        insertMediaSingle: insertMediaSingle,
+        insertExternalMediaSingle: insertExternalMediaSingle
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref4) {
-        var formatMessage = _ref4.formatMessage;
+      quickInsert: function quickInsert(_ref7) {
+        var formatMessage = _ref7.formatMessage;
         return [{
           id: 'media-insert',
           title: formatMessage(_messages.toolbarInsertBlockMessages.insertMediaFromUrl),

package/dist/cjs/ui/LocalMedia.js

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _upload = _interopRequireDefault(require("@atlaskit/icon/glyph/upload"));
 var _mediaPicker = require("@atlaskit/media-picker");
@@ -70,16 +71,24 @@ var LocalMedia = exports.LocalMedia = function LocalMedia(_ref) {
     var file = _ref2.file,
       preview = _ref2.preview;
     onUploadSuccessAnalytics('local');
-    var insertPayload = {
+    var mediaState = {
       id: file.id,
       collection: (_mediaProvider$upload = mediaProvider.uploadParams) === null || _mediaProvider$upload === void 0 ? void 0 : _mediaProvider$upload.collection,
-      occurrenceKey: file.occurrenceKey
+      fileMimeType: file.type,
+      fileSize: file.size,
+      fileName: file.name,
+      dimensions: undefined
     };
     if (isImagePreview(preview)) {
-      insertPayload.height = preview.dimensions.height;
-      insertPayload.width = preview.dimensions.width;
+      mediaState.dimensions = {
+        width: preview.dimensions.width,
+        height: preview.dimensions.height
+      };
     }
-    onInsert(insertPayload);
+    onInsert({
+      mediaState: mediaState,
+      inputMethod: _analytics.INPUT_METHOD.MEDIA_PICKER
+    });
 
     // Probably not needed but I guess it _could_ fail to close for some reason
     dispatch({

package/dist/cjs/ui/MediaFromURL.js

@@ -72,10 +72,10 @@ var previewStateReducer = function previewStateReducer(state, action) {
 };
 function MediaFromURL(_ref) {
   var mediaProvider = _ref.mediaProvider,
-    onInsert = _ref.onInsert,
-    onExternalInsert = _ref.onExternalInsert,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    closeMediaInsertPicker = _ref.closeMediaInsertPicker;
+    closeMediaInsertPicker = _ref.closeMediaInsertPicker,
+    insertMediaSingle = _ref.insertMediaSingle,
+    insertExternalMediaSingle = _ref.insertExternalMediaSingle;
   var intl = (0, _reactIntlNext.useIntl)();
   var strings = {
     loadPreview: intl.formatMessage(_messages.mediaInsertMessages.loadPreview),
@@ -101,7 +101,7 @@ function MediaFromURL(_ref) {
     onUploadFailureAnalytics = _useAnalyticsEvents.onUploadFailureAnalytics;
   var uploadExternalMedia = _react.default.useCallback( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(url) {
-      var uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, message;
+      var uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, mimeType, message;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -126,6 +126,7 @@ function MediaFromURL(_ref) {
             _yield$mediaClient$fi = _context.sent;
             uploadableFileUpfrontIds = _yield$mediaClient$fi.uploadableFileUpfrontIds;
             dimensions = _yield$mediaClient$fi.dimensions;
+            mimeType = _yield$mediaClient$fi.mimeType;
             onUploadSuccessAnalytics('url');
             dispatch({
               type: 'success',
@@ -134,13 +135,14 @@ function MediaFromURL(_ref) {
                 collection: collection,
                 height: dimensions.height,
                 width: dimensions.width,
-                occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
+                occurrenceKey: uploadableFileUpfrontIds.occurrenceKey,
+                fileMimeType: mimeType
               }
             });
-            _context.next = 21;
+            _context.next = 22;
             break;
-          case 18:
-            _context.prev = 18;
+          case 19:
+            _context.prev = 19;
             _context.t0 = _context["catch"](8);
             if (typeof _context.t0 === 'string' && _context.t0 === 'Could not download remote file') {
               // TODO: Make sure this gets good unit test coverage with the actual
@@ -166,11 +168,11 @@ function MediaFromURL(_ref) {
                 error: 'Unknown error'
               });
             }
-          case 21:
+          case 22:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[8, 18]]);
+      }, _callee, null, [[8, 19]]);
     }));
     return function (_x) {
       return _ref2.apply(this, arguments);
@@ -198,14 +200,33 @@ function MediaFromURL(_ref) {
       pasteFlag.current = true;
     }
   }, [inputUrl]);
+  var onInsert = _react.default.useCallback(function () {
+    if (previewState.previewInfo) {
+      insertMediaSingle({
+        mediaState: previewState.previewInfo,
+        inputMethod: _analytics.INPUT_METHOD.MEDIA_PICKER
+      });
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, insertMediaSingle, previewState.previewInfo]);
+  var onExternalInsert = _react.default.useCallback(function (url) {
+    if (previewState.warning) {
+      insertExternalMediaSingle({
+        url: url,
+        alt: url,
+        inputMethod: _analytics.INPUT_METHOD.MEDIA_PICKER
+      });
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning]);
   var onInsertClick = _react.default.useCallback(function () {
     if (previewState.previewInfo) {
-      return onInsert(previewState.previewInfo);
+      return onInsert();
     }
     if (previewState.warning) {
       return onExternalInsert(inputUrl);
     }
-  }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, inputUrl]);
+  }, [previewState.previewInfo, previewState.warning, onInsert, onExternalInsert, inputUrl]);
   var onInputKeyPress = _react.default.useCallback(function (event) {
     if (event && event.key === 'Esc') {
       if (dispatchAnalyticsEvent) {

package/dist/cjs/ui/MediaInsertContent.js

@@ -18,7 +18,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var MediaInsertContent = exports.MediaInsertContent = function MediaInsertContent(_ref) {
   var mediaProvider = _ref.mediaProvider,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    closeMediaInsertPicker = _ref.closeMediaInsertPicker;
+    closeMediaInsertPicker = _ref.closeMediaInsertPicker,
+    insertMediaSingle = _ref.insertMediaSingle,
+    insertExternalMediaSingle = _ref.insertExternalMediaSingle;
   var intl = (0, _reactIntlNext.useIntl)();
   return /*#__PURE__*/_react.default.createElement(_tabs.default, {
     id: "media-insert-tab-navigation"
@@ -26,14 +28,14 @@ var MediaInsertContent = exports.MediaInsertContent = function MediaInsertConten
     paddingBlockEnd: "space.150"
   }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle)), /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
     mediaProvider: mediaProvider,
-    onInsert: function onInsert() {},
+    onInsert: insertMediaSingle,
     onClose: closeMediaInsertPicker,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent
   })), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_MediaFromURL.MediaFromURL, {
     mediaProvider: mediaProvider,
-    onExternalInsert: function onExternalInsert() {},
-    onInsert: function onInsert() {},
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    closeMediaInsertPicker: closeMediaInsertPicker
+    closeMediaInsertPicker: closeMediaInsertPicker,
+    insertMediaSingle: insertMediaSingle,
+    insertExternalMediaSingle: insertExternalMediaSingle
   })));
 };

package/dist/cjs/ui/MediaInsertPicker.js

@@ -48,7 +48,9 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsScrollableElement = _ref.popupsScrollableElement,
-    _closeMediaInsertPicker = _ref.closeMediaInsertPicker;
+    _closeMediaInsertPicker = _ref.closeMediaInsertPicker,
+    insertMediaSingle = _ref.insertMediaSingle,
+    insertExternalMediaSingle = _ref.insertExternalMediaSingle;
   var targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
   var isOpen = (_useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.isOpen;
   var mediaProvider = (_useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media'])) === null || _useSharedPluginState2 === void 0 || (_useSharedPluginState2 = _useSharedPluginState2.mediaState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaProvider;
@@ -98,6 +100,8 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     closeMediaInsertPicker: function closeMediaInsertPicker() {
       _closeMediaInsertPicker();
       focusEditor();
-    }
+    },
+    insertMediaSingle: insertMediaSingle,
+    insertExternalMediaSingle: insertExternalMediaSingle
   })));
 };

package/dist/es2019/plugin.js

@@ -37,6 +37,52 @@ export const mediaInsertPlugin = ({
       popupsBoundariesElement,
       popupsScrollableElement
     }) => {
+      const insertMediaSingle = ({
+        mediaState,
+        inputMethod
+      }) => {
+        var _api$media$actions$in;
+        const {
+          id,
+          dimensions,
+          contextId,
+          scaleFactor = 1,
+          fileName,
+          collection
+        } = mediaState;
+        const {
+          width,
+          height
+        } = dimensions || {
+          height: undefined,
+          width: undefined
+        };
+        const scaledWidth = width && Math.round(width / scaleFactor);
+        const node = editorView.state.schema.nodes.media.create({
+          id,
+          type: 'file',
+          collection,
+          contextId,
+          width: scaledWidth,
+          height: height && Math.round(height / scaleFactor),
+          alt: fileName,
+          __fileMimeType: mediaState.fileMimeType
+        });
+        return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
+      };
+      const insertExternalMediaSingle = ({
+        url,
+        alt,
+        inputMethod
+      }) => {
+        var _api$media$actions$in2;
+        const node = editorView.state.schema.nodes.media.create({
+          type: 'external',
+          url,
+          alt
+        });
+        return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
+      };
       return /*#__PURE__*/React.createElement(MediaInsertPicker, {
         api: api,
         editorView: editorView,
@@ -44,9 +90,9 @@ export const mediaInsertPlugin = ({
         popupsMountPoint: popupsMountPoint,
         popupsBoundariesElement: popupsBoundariesElement,
         popupsScrollableElement: popupsScrollableElement,
-        closeMediaInsertPicker: () => {
-          editorView.dispatch(closeMediaInsertPicker(editorView.state.tr));
-        }
+        closeMediaInsertPicker: () => editorView.dispatch(closeMediaInsertPicker(editorView.state.tr)),
+        insertMediaSingle: insertMediaSingle,
+        insertExternalMediaSingle: insertExternalMediaSingle
       });
     },
     pluginsOptions: {

package/dist/es2019/ui/LocalMedia.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import UploadIcon from '@atlaskit/icon/glyph/upload';
 import { Browser } from '@atlaskit/media-picker';
@@ -62,16 +63,24 @@ export const LocalMedia = ({
   }) => {
     var _mediaProvider$upload;
     onUploadSuccessAnalytics('local');
-    const insertPayload = {
+    const mediaState = {
       id: file.id,
       collection: (_mediaProvider$upload = mediaProvider.uploadParams) === null || _mediaProvider$upload === void 0 ? void 0 : _mediaProvider$upload.collection,
-      occurrenceKey: file.occurrenceKey
+      fileMimeType: file.type,
+      fileSize: file.size,
+      fileName: file.name,
+      dimensions: undefined
     };
     if (isImagePreview(preview)) {
-      insertPayload.height = preview.dimensions.height;
-      insertPayload.width = preview.dimensions.width;
+      mediaState.dimensions = {
+        width: preview.dimensions.width,
+        height: preview.dimensions.height
+      };
     }
-    onInsert(insertPayload);
+    onInsert({
+      mediaState,
+      inputMethod: INPUT_METHOD.MEDIA_PICKER
+    });
 
     // Probably not needed but I guess it _could_ fail to close for some reason
     dispatch({

package/dist/es2019/ui/MediaFromURL.js

@@ -63,10 +63,10 @@ const previewStateReducer = (state, action) => {
 };
 export function MediaFromURL({
   mediaProvider,
-  onInsert,
-  onExternalInsert,
   dispatchAnalyticsEvent,
-  closeMediaInsertPicker
+  closeMediaInsertPicker,
+  insertMediaSingle,
+  insertExternalMediaSingle
 }) {
   const intl = useIntl();
   const strings = {
@@ -104,7 +104,8 @@ export function MediaFromURL({
     try {
       const {
         uploadableFileUpfrontIds,
-        dimensions
+        dimensions,
+        mimeType
       } = await mediaClient.file.uploadExternal(url, collection);
       onUploadSuccessAnalytics('url');
       dispatch({
@@ -114,7 +115,8 @@ export function MediaFromURL({
           collection,
           height: dimensions.height,
           width: dimensions.width,
-          occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
+          occurrenceKey: uploadableFileUpfrontIds.occurrenceKey,
+          fileMimeType: mimeType
         }
       });
     } catch (e) {
@@ -166,14 +168,33 @@ export function MediaFromURL({
       pasteFlag.current = true;
     }
   }, [inputUrl]);
+  const onInsert = React.useCallback(() => {
+    if (previewState.previewInfo) {
+      insertMediaSingle({
+        mediaState: previewState.previewInfo,
+        inputMethod: INPUT_METHOD.MEDIA_PICKER
+      });
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, insertMediaSingle, previewState.previewInfo]);
+  const onExternalInsert = React.useCallback(url => {
+    if (previewState.warning) {
+      insertExternalMediaSingle({
+        url,
+        alt: url,
+        inputMethod: INPUT_METHOD.MEDIA_PICKER
+      });
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning]);
   const onInsertClick = React.useCallback(() => {
     if (previewState.previewInfo) {
-      return onInsert(previewState.previewInfo);
+      return onInsert();
     }
     if (previewState.warning) {
       return onExternalInsert(inputUrl);
     }
-  }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, inputUrl]);
+  }, [previewState.previewInfo, previewState.warning, onInsert, onExternalInsert, inputUrl]);
   const onInputKeyPress = React.useCallback(event => {
     if (event && event.key === 'Esc') {
       if (dispatchAnalyticsEvent) {

package/dist/es2019/ui/MediaInsertContent.js

@@ -8,7 +8,9 @@ import { MediaFromURL } from './MediaFromURL';
 export const MediaInsertContent = ({
   mediaProvider,
   dispatchAnalyticsEvent,
-  closeMediaInsertPicker
+  closeMediaInsertPicker,
+  insertMediaSingle,
+  insertExternalMediaSingle
 }) => {
   const intl = useIntl();
   return /*#__PURE__*/React.createElement(Tabs, {
@@ -17,14 +19,14 @@ export const MediaInsertContent = ({
     paddingBlockEnd: "space.150"
   }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
     mediaProvider: mediaProvider,
-    onInsert: () => {},
+    onInsert: insertMediaSingle,
     onClose: closeMediaInsertPicker,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent
   })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
     mediaProvider: mediaProvider,
-    onExternalInsert: () => {},
-    onInsert: () => {},
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    closeMediaInsertPicker: closeMediaInsertPicker
+    closeMediaInsertPicker: closeMediaInsertPicker,
+    insertMediaSingle: insertMediaSingle,
+    insertExternalMediaSingle: insertExternalMediaSingle
   })));
 };

package/dist/es2019/ui/MediaInsertPicker.js

@@ -40,7 +40,9 @@ export const MediaInsertPicker = ({
   popupsMountPoint,
   popupsBoundariesElement,
   popupsScrollableElement,
-  closeMediaInsertPicker
+  closeMediaInsertPicker,
+  insertMediaSingle,
+  insertExternalMediaSingle
 }) => {
   var _useSharedPluginState, _useSharedPluginState2, _useSharedPluginState3, _useSharedPluginState4;
   const targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
@@ -90,6 +92,8 @@ export const MediaInsertPicker = ({
     closeMediaInsertPicker: () => {
       closeMediaInsertPicker();
       focusEditor();
-    }
+    },
+    insertMediaSingle: insertMediaSingle,
+    insertExternalMediaSingle: insertExternalMediaSingle
   })));
 };

package/dist/esm/plugin.js

@@ -36,6 +36,48 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
         popupsMountPoint = _ref3.popupsMountPoint,
         popupsBoundariesElement = _ref3.popupsBoundariesElement,
         popupsScrollableElement = _ref3.popupsScrollableElement;
+      var insertMediaSingle = function insertMediaSingle(_ref4) {
+        var _api$media$actions$in;
+        var mediaState = _ref4.mediaState,
+          inputMethod = _ref4.inputMethod;
+        var id = mediaState.id,
+          dimensions = mediaState.dimensions,
+          contextId = mediaState.contextId,
+          _mediaState$scaleFact = mediaState.scaleFactor,
+          scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact,
+          fileName = mediaState.fileName,
+          collection = mediaState.collection;
+        var _ref5 = dimensions || {
+            height: undefined,
+            width: undefined
+          },
+          width = _ref5.width,
+          height = _ref5.height;
+        var scaledWidth = width && Math.round(width / scaleFactor);
+        var node = editorView.state.schema.nodes.media.create({
+          id: id,
+          type: 'file',
+          collection: collection,
+          contextId: contextId,
+          width: scaledWidth,
+          height: height && Math.round(height / scaleFactor),
+          alt: fileName,
+          __fileMimeType: mediaState.fileMimeType
+        });
+        return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
+      };
+      var insertExternalMediaSingle = function insertExternalMediaSingle(_ref6) {
+        var _api$media$actions$in2;
+        var url = _ref6.url,
+          alt = _ref6.alt,
+          inputMethod = _ref6.inputMethod;
+        var node = editorView.state.schema.nodes.media.create({
+          type: 'external',
+          url: url,
+          alt: alt
+        });
+        return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
+      };
       return /*#__PURE__*/React.createElement(MediaInsertPicker, {
         api: api,
         editorView: editorView,
@@ -44,13 +86,15 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
         popupsBoundariesElement: popupsBoundariesElement,
         popupsScrollableElement: popupsScrollableElement,
         closeMediaInsertPicker: function closeMediaInsertPicker() {
-          editorView.dispatch(_closeMediaInsertPicker(editorView.state.tr));
-        }
+          return editorView.dispatch(_closeMediaInsertPicker(editorView.state.tr));
+        },
+        insertMediaSingle: insertMediaSingle,
+        insertExternalMediaSingle: insertExternalMediaSingle
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref4) {
-        var formatMessage = _ref4.formatMessage;
+      quickInsert: function quickInsert(_ref7) {
+        var formatMessage = _ref7.formatMessage;
         return [{
           id: 'media-insert',
           title: formatMessage(messages.insertMediaFromUrl),

package/dist/esm/ui/LocalMedia.js

@@ -5,6 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import UploadIcon from '@atlaskit/icon/glyph/upload';
 import { Browser } from '@atlaskit/media-picker';
@@ -63,16 +64,24 @@ export var LocalMedia = function LocalMedia(_ref) {
     var file = _ref2.file,
       preview = _ref2.preview;
     onUploadSuccessAnalytics('local');
-    var insertPayload = {
+    var mediaState = {
       id: file.id,
       collection: (_mediaProvider$upload = mediaProvider.uploadParams) === null || _mediaProvider$upload === void 0 ? void 0 : _mediaProvider$upload.collection,
-      occurrenceKey: file.occurrenceKey
+      fileMimeType: file.type,
+      fileSize: file.size,
+      fileName: file.name,
+      dimensions: undefined
     };
     if (isImagePreview(preview)) {
-      insertPayload.height = preview.dimensions.height;
-      insertPayload.width = preview.dimensions.width;
+      mediaState.dimensions = {
+        width: preview.dimensions.width,
+        height: preview.dimensions.height
+      };
     }
-    onInsert(insertPayload);
+    onInsert({
+      mediaState: mediaState,
+      inputMethod: INPUT_METHOD.MEDIA_PICKER
+    });
 
     // Probably not needed but I guess it _could_ fail to close for some reason
     dispatch({

package/dist/esm/ui/MediaFromURL.js

@@ -65,10 +65,10 @@ var previewStateReducer = function previewStateReducer(state, action) {
 };
 export function MediaFromURL(_ref) {
   var mediaProvider = _ref.mediaProvider,
-    onInsert = _ref.onInsert,
-    onExternalInsert = _ref.onExternalInsert,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    closeMediaInsertPicker = _ref.closeMediaInsertPicker;
+    closeMediaInsertPicker = _ref.closeMediaInsertPicker,
+    insertMediaSingle = _ref.insertMediaSingle,
+    insertExternalMediaSingle = _ref.insertExternalMediaSingle;
   var intl = useIntl();
   var strings = {
     loadPreview: intl.formatMessage(mediaInsertMessages.loadPreview),
@@ -94,7 +94,7 @@ export function MediaFromURL(_ref) {
     onUploadFailureAnalytics = _useAnalyticsEvents.onUploadFailureAnalytics;
   var uploadExternalMedia = React.useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {
-      var uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, message;
+      var uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, mimeType, message;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -119,6 +119,7 @@ export function MediaFromURL(_ref) {
             _yield$mediaClient$fi = _context.sent;
             uploadableFileUpfrontIds = _yield$mediaClient$fi.uploadableFileUpfrontIds;
             dimensions = _yield$mediaClient$fi.dimensions;
+            mimeType = _yield$mediaClient$fi.mimeType;
             onUploadSuccessAnalytics('url');
             dispatch({
               type: 'success',
@@ -127,13 +128,14 @@ export function MediaFromURL(_ref) {
                 collection: collection,
                 height: dimensions.height,
                 width: dimensions.width,
-                occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
+                occurrenceKey: uploadableFileUpfrontIds.occurrenceKey,
+                fileMimeType: mimeType
               }
             });
-            _context.next = 21;
+            _context.next = 22;
             break;
-          case 18:
-            _context.prev = 18;
+          case 19:
+            _context.prev = 19;
             _context.t0 = _context["catch"](8);
             if (typeof _context.t0 === 'string' && _context.t0 === 'Could not download remote file') {
               // TODO: Make sure this gets good unit test coverage with the actual
@@ -159,11 +161,11 @@ export function MediaFromURL(_ref) {
                 error: 'Unknown error'
               });
             }
-          case 21:
+          case 22:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[8, 18]]);
+      }, _callee, null, [[8, 19]]);
     }));
     return function (_x) {
       return _ref2.apply(this, arguments);
@@ -191,14 +193,33 @@ export function MediaFromURL(_ref) {
       pasteFlag.current = true;
     }
   }, [inputUrl]);
+  var onInsert = React.useCallback(function () {
+    if (previewState.previewInfo) {
+      insertMediaSingle({
+        mediaState: previewState.previewInfo,
+        inputMethod: INPUT_METHOD.MEDIA_PICKER
+      });
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, insertMediaSingle, previewState.previewInfo]);
+  var onExternalInsert = React.useCallback(function (url) {
+    if (previewState.warning) {
+      insertExternalMediaSingle({
+        url: url,
+        alt: url,
+        inputMethod: INPUT_METHOD.MEDIA_PICKER
+      });
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning]);
   var onInsertClick = React.useCallback(function () {
     if (previewState.previewInfo) {
-      return onInsert(previewState.previewInfo);
+      return onInsert();
     }
     if (previewState.warning) {
       return onExternalInsert(inputUrl);
     }
-  }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, inputUrl]);
+  }, [previewState.previewInfo, previewState.warning, onInsert, onExternalInsert, inputUrl]);
   var onInputKeyPress = React.useCallback(function (event) {
     if (event && event.key === 'Esc') {
       if (dispatchAnalyticsEvent) {

package/dist/esm/ui/MediaInsertContent.js

@@ -8,7 +8,9 @@ import { MediaFromURL } from './MediaFromURL';
 export var MediaInsertContent = function MediaInsertContent(_ref) {
   var mediaProvider = _ref.mediaProvider,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    closeMediaInsertPicker = _ref.closeMediaInsertPicker;
+    closeMediaInsertPicker = _ref.closeMediaInsertPicker,
+    insertMediaSingle = _ref.insertMediaSingle,
+    insertExternalMediaSingle = _ref.insertExternalMediaSingle;
   var intl = useIntl();
   return /*#__PURE__*/React.createElement(Tabs, {
     id: "media-insert-tab-navigation"
@@ -16,14 +18,14 @@ export var MediaInsertContent = function MediaInsertContent(_ref) {
     paddingBlockEnd: "space.150"
   }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
     mediaProvider: mediaProvider,
-    onInsert: function onInsert() {},
+    onInsert: insertMediaSingle,
     onClose: closeMediaInsertPicker,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent
   })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
     mediaProvider: mediaProvider,
-    onExternalInsert: function onExternalInsert() {},
-    onInsert: function onInsert() {},
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    closeMediaInsertPicker: closeMediaInsertPicker
+    closeMediaInsertPicker: closeMediaInsertPicker,
+    insertMediaSingle: insertMediaSingle,
+    insertExternalMediaSingle: insertExternalMediaSingle
   })));
 };

package/dist/esm/ui/MediaInsertPicker.js

@@ -41,7 +41,9 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
     popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsScrollableElement = _ref.popupsScrollableElement,
-    _closeMediaInsertPicker = _ref.closeMediaInsertPicker;
+    _closeMediaInsertPicker = _ref.closeMediaInsertPicker,
+    insertMediaSingle = _ref.insertMediaSingle,
+    insertExternalMediaSingle = _ref.insertExternalMediaSingle;
   var targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
   var isOpen = (_useSharedPluginState = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.isOpen;
   var mediaProvider = (_useSharedPluginState2 = useSharedPluginState(api, ['media'])) === null || _useSharedPluginState2 === void 0 || (_useSharedPluginState2 = _useSharedPluginState2.mediaState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaProvider;
@@ -91,6 +93,8 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
     closeMediaInsertPicker: function closeMediaInsertPicker() {
       _closeMediaInsertPicker();
       focusEditor();
-    }
+    },
+    insertMediaSingle: insertMediaSingle,
+    insertExternalMediaSingle: insertExternalMediaSingle
   })));
 };

package/dist/types/types.d.ts

@@ -1,17 +1,30 @@
+import type { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
 import type { Providers } from '@atlaskit/editor-common/provider-factory';
 import type { NextEditorPlugin, OptionalPlugin, UiComponentFactoryParams } from '@atlaskit/editor-common/types';
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { MediaPlugin } from '@atlaskit/editor-plugin-media';
+import { type MediaState } from '@atlaskit/editor-plugin-media/types';
 export type MediaInsertPluginState = {
     isOpen?: boolean;
 };
+export type InsertMediaSingle = (props: {
+    mediaState: MediaState;
+    inputMethod: InputMethodInsertMedia;
+}) => boolean;
 export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
     dependencies: [OptionalPlugin<AnalyticsPlugin>, MediaPlugin];
     sharedState: MediaInsertPluginState;
 }>;
+export type InsertExternalMediaSingle = (props: {
+    url: string;
+    alt: string;
+    inputMethod: InputMethodInsertMedia;
+}) => boolean;
 export type MediaInsertPickerProps = Pick<UiComponentFactoryParams, 'editorView' | 'dispatchAnalyticsEvent' | 'popupsMountPoint' | 'popupsBoundariesElement' | 'popupsScrollableElement'> & {
     api?: ExtractInjectionAPI<MediaInsertPlugin>;
     closeMediaInsertPicker: () => void;
     mediaProvider?: Providers['mediaProvider'];
+    insertMediaSingle: InsertMediaSingle;
+    insertExternalMediaSingle: InsertExternalMediaSingle;
 };

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

@@ -1,10 +1,10 @@
 /// <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';
+import { type InsertMediaSingle } from '../types';
 type Props = {
     mediaProvider: MediaProvider;
-    onInsert: (attrs: OnInsertAttrs) => void;
+    onInsert: InsertMediaSingle;
     onClose: () => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
 };

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

@@ -1,13 +1,13 @@
 /// <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';
+import { type InsertExternalMediaSingle, type InsertMediaSingle } from '../types';
 type Props = {
     mediaProvider: MediaProvider;
-    onInsert: (attrs: OnInsertAttrs) => void;
-    onExternalInsert: (url: string) => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     closeMediaInsertPicker: () => void;
+    insertMediaSingle: InsertMediaSingle;
+    insertExternalMediaSingle: InsertExternalMediaSingle;
 };
-export declare function MediaFromURL({ mediaProvider, onInsert, onExternalInsert, dispatchAnalyticsEvent, closeMediaInsertPicker, }: Props): JSX.Element;
+export declare function MediaFromURL({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: Props): JSX.Element;
 export {};

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

@@ -1,8 +1,13 @@
 /// <reference types="react" />
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
-export declare const MediaInsertContent: ({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, }: {
+import { type InsertExternalMediaSingle, type InsertMediaSingle } from '../types';
+type Props = {
     mediaProvider: MediaProvider;
-    dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     closeMediaInsertPicker: () => void;
-}) => JSX.Element;
+    insertMediaSingle: InsertMediaSingle;
+    insertExternalMediaSingle: InsertExternalMediaSingle;
+};
+export declare const MediaInsertContent: ({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: Props) => JSX.Element;
+export {};

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { type MediaInsertPickerProps } from '../types';
-export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, }: MediaInsertPickerProps) => JSX.Element | null;
+export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: MediaInsertPickerProps) => JSX.Element | null;

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

@@ -4,4 +4,5 @@ export type OnInsertAttrs = {
     height?: number;
     width?: number;
     occurrenceKey: string | undefined;
+    fileMimeType: string;
 };

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

@@ -1,11 +1,17 @@
+import type { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
 import type { Providers } from '@atlaskit/editor-common/provider-factory';
 import type { NextEditorPlugin, OptionalPlugin, UiComponentFactoryParams } from '@atlaskit/editor-common/types';
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { MediaPlugin } from '@atlaskit/editor-plugin-media';
+import { type MediaState } from '@atlaskit/editor-plugin-media/types';
 export type MediaInsertPluginState = {
     isOpen?: boolean;
 };
+export type InsertMediaSingle = (props: {
+    mediaState: MediaState;
+    inputMethod: InputMethodInsertMedia;
+}) => boolean;
 export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
@@ -13,8 +19,15 @@ export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
     ];
     sharedState: MediaInsertPluginState;
 }>;
+export type InsertExternalMediaSingle = (props: {
+    url: string;
+    alt: string;
+    inputMethod: InputMethodInsertMedia;
+}) => boolean;
 export type MediaInsertPickerProps = Pick<UiComponentFactoryParams, 'editorView' | 'dispatchAnalyticsEvent' | 'popupsMountPoint' | 'popupsBoundariesElement' | 'popupsScrollableElement'> & {
     api?: ExtractInjectionAPI<MediaInsertPlugin>;
     closeMediaInsertPicker: () => void;
     mediaProvider?: Providers['mediaProvider'];
+    insertMediaSingle: InsertMediaSingle;
+    insertExternalMediaSingle: InsertExternalMediaSingle;
 };

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

@@ -1,10 +1,10 @@
 /// <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';
+import { type InsertMediaSingle } from '../types';
 type Props = {
     mediaProvider: MediaProvider;
-    onInsert: (attrs: OnInsertAttrs) => void;
+    onInsert: InsertMediaSingle;
     onClose: () => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
 };

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

@@ -1,13 +1,13 @@
 /// <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';
+import { type InsertExternalMediaSingle, type InsertMediaSingle } from '../types';
 type Props = {
     mediaProvider: MediaProvider;
-    onInsert: (attrs: OnInsertAttrs) => void;
-    onExternalInsert: (url: string) => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     closeMediaInsertPicker: () => void;
+    insertMediaSingle: InsertMediaSingle;
+    insertExternalMediaSingle: InsertExternalMediaSingle;
 };
-export declare function MediaFromURL({ mediaProvider, onInsert, onExternalInsert, dispatchAnalyticsEvent, closeMediaInsertPicker, }: Props): JSX.Element;
+export declare function MediaFromURL({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: Props): JSX.Element;
 export {};

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

@@ -1,8 +1,13 @@
 /// <reference types="react" />
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
-export declare const MediaInsertContent: ({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, }: {
+import { type InsertExternalMediaSingle, type InsertMediaSingle } from '../types';
+type Props = {
     mediaProvider: MediaProvider;
-    dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     closeMediaInsertPicker: () => void;
-}) => JSX.Element;
+    insertMediaSingle: InsertMediaSingle;
+    insertExternalMediaSingle: InsertExternalMediaSingle;
+};
+export declare const MediaInsertContent: ({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: Props) => JSX.Element;
+export {};

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { type MediaInsertPickerProps } from '../types';
-export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, }: MediaInsertPickerProps) => JSX.Element | null;
+export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: MediaInsertPickerProps) => JSX.Element | null;

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

@@ -4,4 +4,5 @@ export type OnInsertAttrs = {
     height?: number;
     width?: number;
     occurrenceKey: string | undefined;
+    fileMimeType: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media-insert",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"description": "Media Insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,15 +25,15 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/editor-common": "^88.3.0",
+		"@atlaskit/editor-common": "^88.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-media": "^1.29.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/icon": "^22.15.0",
-		"@atlaskit/media-card": "^78.1.0",
-		"@atlaskit/media-client": "^27.5.0",
-		"@atlaskit/media-client-react": "^2.1.0",
+		"@atlaskit/media-card": "^78.2.0",
+		"@atlaskit/media-client": "^27.6.0",
+		"@atlaskit/media-client-react": "^2.2.0",
 		"@atlaskit/media-picker": "^66.4.0",
 		"@atlaskit/primitives": "^12.0.0",
 		"@atlaskit/section-message": "^6.6.0",