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

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @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
+
+- [#134463](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134463)
+  [`d20ae898369bc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d20ae898369bc) -
+  [ux] [ED-24326] Add local file upload tab to media insert popup
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.2
 
 ### Patch 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

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LocalMedia = void 0;
+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 _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");
+var _primitives = require("@atlaskit/primitives");
+var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
+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 INITIAL_UPLOAD_STATE = Object.freeze({
+  isOpen: false,
+  error: null
+});
+var uploadReducer = function uploadReducer(state, action) {
+  switch (action.type) {
+    case 'open':
+      return _objectSpread(_objectSpread({}, INITIAL_UPLOAD_STATE), {}, {
+        isOpen: true
+      });
+    case 'close':
+      // This is the only case where we don't reset state. This is because
+      // onClose gets called for cancel _and_ upload, so we don't want to
+      // reset any loading or error states that may have occured
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isOpen: false
+      });
+    case 'error':
+      return _objectSpread(_objectSpread({}, INITIAL_UPLOAD_STATE), {}, {
+        error: action.error
+      });
+    case 'reset':
+      return INITIAL_UPLOAD_STATE;
+  }
+};
+var isImagePreview = function isImagePreview(preview) {
+  return 'dimensions' in preview;
+};
+var LocalMedia = exports.LocalMedia = function LocalMedia(_ref) {
+  var mediaProvider = _ref.mediaProvider,
+    onInsert = _ref.onInsert,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var strings = {
+    upload: intl.formatMessage(_messages.mediaInsertMessages.upload),
+    networkError: intl.formatMessage(_messages.mediaInsertMessages.localFileNetworkErrorMessage),
+    genericError: intl.formatMessage(_messages.mediaInsertMessages.localFileErrorMessage)
+  };
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(dispatchAnalyticsEvent),
+    onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
+    onUploadCommencedAnalytics = _useAnalyticsEvents.onUploadCommencedAnalytics,
+    onUploadSuccessAnalytics = _useAnalyticsEvents.onUploadSuccessAnalytics,
+    onUploadFailureAnalytics = _useAnalyticsEvents.onUploadFailureAnalytics;
+  var _React$useReducer = _react.default.useReducer(uploadReducer, INITIAL_UPLOAD_STATE),
+    _React$useReducer2 = (0, _slicedToArray2.default)(_React$useReducer, 2),
+    uploadState = _React$useReducer2[0],
+    dispatch = _React$useReducer2[1];
+  var onUpload = function onUpload(_ref2) {
+    var _mediaProvider$upload;
+    var file = _ref2.file,
+      preview = _ref2.preview;
+    onUploadSuccessAnalytics('local');
+    var mediaState = {
+      id: file.id,
+      collection: (_mediaProvider$upload = mediaProvider.uploadParams) === null || _mediaProvider$upload === void 0 ? void 0 : _mediaProvider$upload.collection,
+      fileMimeType: file.type,
+      fileSize: file.size,
+      fileName: file.name,
+      dimensions: undefined
+    };
+    if (isImagePreview(preview)) {
+      mediaState.dimensions = {
+        width: preview.dimensions.width,
+        height: preview.dimensions.height
+      };
+    }
+    onInsert({
+      mediaState: mediaState,
+      inputMethod: _analytics.INPUT_METHOD.MEDIA_PICKER
+    });
+
+    // Probably not needed but I guess it _could_ fail to close for some reason
+    dispatch({
+      type: 'reset'
+    });
+  };
+  var uploadParams = mediaProvider.uploadParams,
+    uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+    grow: "fill",
+    space: "space.200"
+  }, uploadState.error && /*#__PURE__*/_react.default.createElement(_sectionMessage.default, {
+    appearance: "error"
+  }, uploadState.error === 'upload_fail' ? strings.networkError : strings.genericError), /*#__PURE__*/_react.default.createElement(_new.default, {
+    iconBefore: _upload.default,
+    shouldFitContainer: true,
+    isDisabled: !uploadMediaClientConfig || !uploadParams,
+    onClick: function onClick() {
+      onUploadButtonClickedAnalytics();
+      dispatch({
+        type: 'open'
+      });
+    },
+    autoFocus: true
+  }, strings.upload), uploadMediaClientConfig && uploadParams && /*#__PURE__*/_react.default.createElement(_mediaPicker.Browser, {
+    isOpen: uploadState.isOpen,
+    config: {
+      uploadParams: uploadParams
+    },
+    mediaClientConfig: uploadMediaClientConfig,
+    onUploadsStart: function onUploadsStart() {
+      onUploadCommencedAnalytics('local');
+    },
+    onPreviewUpdate: onUpload
+    // NOTE: this will fire for some errors like network failures, but not
+    // for others like empty files. Those have their own feedback toast
+    // owned by media.
+    ,
+    onError: function onError(payload) {
+      onUploadFailureAnalytics(payload.error.name, 'local');
+      dispatch({
+        type: 'error',
+        error: payload.error.name
+      });
+    },
+    onClose: function onClose() {
+      dispatch({
+        type: 'close'
+      });
+    }
+  }));
+};

package/dist/cjs/ui/{FromURL.js → MediaFromURL.js}

@@ -72,18 +72,18 @@ 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),
     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)
+    errorMessage: intl.formatMessage(_messages.mediaInsertMessages.fromUrlErrorMessage),
+    warning: intl.formatMessage(_messages.mediaInsertMessages.fromUrlWarning)
   };
   var _React$useState = _react.default.useState(''),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -95,36 +95,39 @@ function MediaFromURL(_ref) {
     dispatch = _React$useReducer2[1];
   var pasteFlag = _react.default.useRef(false);
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(dispatchAnalyticsEvent),
-    onUploadAnalytics = _useAnalyticsEvents.onUploadAnalytics,
+    onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
+    onUploadCommencedAnalytics = _useAnalyticsEvents.onUploadCommencedAnalytics,
     onUploadSuccessAnalytics = _useAnalyticsEvents.onUploadSuccessAnalytics,
     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:
+            onUploadButtonClickedAnalytics();
             dispatch({
               type: 'loading'
             });
             uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig, uploadParams = mediaProvider.uploadParams;
             if (uploadMediaClientConfig) {
-              _context.next = 4;
+              _context.next = 5;
               break;
             }
             return _context.abrupt("return");
-          case 4:
+          case 5:
             mediaClient = (0, _mediaClientReact.getMediaClient)(uploadMediaClientConfig);
             collection = uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.collection;
-            onUploadAnalytics();
-            _context.prev = 7;
-            _context.next = 10;
+            onUploadCommencedAnalytics('url');
+            _context.prev = 8;
+            _context.next = 11;
             return mediaClient.file.uploadExternal(url, collection);
-          case 10:
+          case 11:
             _yield$mediaClient$fi = _context.sent;
             uploadableFileUpfrontIds = _yield$mediaClient$fi.uploadableFileUpfrontIds;
             dimensions = _yield$mediaClient$fi.dimensions;
-            onUploadSuccessAnalytics();
+            mimeType = _yield$mediaClient$fi.mimeType;
+            onUploadSuccessAnalytics('url');
             dispatch({
               type: 'success',
               payload: {
@@ -132,19 +135,20 @@ function MediaFromURL(_ref) {
                 collection: collection,
                 height: dimensions.height,
                 width: dimensions.width,
-                occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
+                occurrenceKey: uploadableFileUpfrontIds.occurrenceKey,
+                fileMimeType: mimeType
               }
             });
-            _context.next = 20;
+            _context.next = 22;
             break;
-          case 17:
-            _context.prev = 17;
-            _context.t0 = _context["catch"](7);
+          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
               // 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);
+              onUploadFailureAnalytics(_context.t0, 'url');
               dispatch({
                 type: 'warning',
                 warning: _context.t0,
@@ -152,28 +156,28 @@ function MediaFromURL(_ref) {
               });
             } else if (_context.t0 instanceof Error) {
               message = 'Image preview fetch failed';
-              onUploadFailureAnalytics(message);
+              onUploadFailureAnalytics(message, 'url');
               dispatch({
                 type: 'error',
                 error: message
               });
             } else {
-              onUploadFailureAnalytics('Unknown error');
+              onUploadFailureAnalytics('Unknown error', 'url');
               dispatch({
                 type: 'error',
                 error: 'Unknown error'
               });
             }
-          case 20:
+          case 22:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[7, 17]]);
+      }, _callee, null, [[8, 19]]);
     }));
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [mediaProvider, onUploadAnalytics, onUploadFailureAnalytics, onUploadSuccessAnalytics, inputUrl]);
+  }(), [onUploadButtonClickedAnalytics, mediaProvider, onUploadCommencedAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics, inputUrl]);
   var onURLChange = _react.default.useCallback(function (e) {
     var url = e.target.value;
     setUrl(url);
@@ -196,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

@@ -11,23 +11,31 @@ var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _primitives = require("@atlaskit/primitives");
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
-var _FromURL = require("./FromURL");
+var _LocalMedia = require("./LocalMedia");
+var _MediaFromURL = require("./MediaFromURL");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var 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"
   }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     paddingBlockEnd: "space.150"
-  }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_FromURL.MediaFromURL, {
+  }, /*#__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: 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/cjs/ui/useAnalyticsEvents.js

@@ -8,38 +8,54 @@ exports.useAnalyticsEvents = useAnalyticsEvents;
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 function useAnalyticsEvents(dispatchAnalyticsEvent) {
-  var onUploadAnalytics = _react.default.useCallback(function () {
+  var onUploadButtonClickedAnalytics = _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,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.UPLOAD_MEDIA,
       eventType: _analytics.EVENT_TYPE.UI
     });
   }, [dispatchAnalyticsEvent]);
-  var onUploadSuccessAnalytics = _react.default.useCallback(function () {
+  var onUploadCommencedAnalytics = _react.default.useCallback(function (mediaUploadSource) {
+    dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 || dispatchAnalyticsEvent({
+      action: _analytics.ACTION.UPLOAD_COMMENCED,
+      actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.UPLOAD_MEDIA,
+      eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        mediaUploadSource: mediaUploadSource
+      }
+    });
+  }, [dispatchAnalyticsEvent]);
+  var onUploadSuccessAnalytics = _react.default.useCallback(function (mediaUploadSource) {
     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
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.UPLOAD_MEDIA,
+      eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        mediaUploadSource: mediaUploadSource
+      }
     });
   }, [dispatchAnalyticsEvent]);
-  var onUploadFailureAnalytics = _react.default.useCallback(function (reason) {
+  var onUploadFailureAnalytics = _react.default.useCallback(function (reason, mediaUploadSource) {
     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,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.UPLOAD_MEDIA,
       eventType: _analytics.EVENT_TYPE.OPERATIONAL,
       attributes: {
-        reason: reason
+        reason: reason,
+        mediaUploadSource: mediaUploadSource
       }
     });
   }, [dispatchAnalyticsEvent]);
   return _react.default.useMemo(function () {
     return {
-      onUploadAnalytics: onUploadAnalytics,
+      onUploadButtonClickedAnalytics: onUploadButtonClickedAnalytics,
+      onUploadCommencedAnalytics: onUploadCommencedAnalytics,
       onUploadSuccessAnalytics: onUploadSuccessAnalytics,
       onUploadFailureAnalytics: onUploadFailureAnalytics
     };
-  }, [onUploadAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics]);
+  }, [onUploadButtonClickedAnalytics, onUploadCommencedAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics]);
 }

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: {