@atlaskit/editor-plugin-media-insert 3.1.1 → 3.1.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 3.1.3
+
+### Patch Changes
+
+- [`83ae273817f38`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/83ae273817f38) -
+  ED-24999 Convert External Image Upload form to use components from @atlaskit/form
+- Updated dependencies
+
+## 3.1.2
+
+### Patch Changes
+
+- [#147461](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147461)
+  [`acef010cdb706`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/acef010cdb706) -
+  [ux] [ED-25164] Pass mounting point to media insert plugin for correct toolbar popup positioning
+- [#147206](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147206)
+  [`c3f82dfdeaf62`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c3f82dfdeaf62) -
+  [ED-25157] Make sure document inserted for media from the media insert plugin has the correct
+  attributes (insertMediaVia)
+
 ## 3.1.1
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -11,20 +11,20 @@ var ACTION_CLOSE_POPUP = exports.ACTION_CLOSE_POPUP = 'CLOSE_POPUP';
 var setPopupMeta = function setPopupMeta(_ref) {
   var type = _ref.type,
     tr = _ref.tr,
-    target = _ref.target;
+    mountInfo = _ref.mountInfo;
   return tr.setMeta(_pluginKey.pluginKey, {
     type: type,
-    target: target
+    mountInfo: mountInfo
   });
 };
-var showMediaInsertPopup = exports.showMediaInsertPopup = function showMediaInsertPopup(tr, target) {
+var showMediaInsertPopup = exports.showMediaInsertPopup = function showMediaInsertPopup(tr, mountInfo) {
   // Log exposure here but don't actually switch anything on it
   (0, _experiments.editorExperiment)('add-media-from-url', true, {
     exposure: true
   });
   return setPopupMeta({
     type: ACTION_OPEN_POPUP,
-    target: target,
+    mountInfo: mountInfo,
     tr: tr
   });
 };

package/dist/cjs/plugin.js

@@ -36,17 +36,17 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
       }
       var _ref2 = _pluginKey.pluginKey.getState(editorState) || {},
         isOpen = _ref2.isOpen,
-        target = _ref2.target;
+        mountInfo = _ref2.mountInfo;
       return {
         isOpen: isOpen,
-        target: target
+        mountInfo: mountInfo
       };
     },
     commands: {
-      showMediaInsertPopup: function showMediaInsertPopup(target) {
+      showMediaInsertPopup: function showMediaInsertPopup(mountInfo) {
         return function (_ref3) {
           var tr = _ref3.tr;
-          return (0, _actions.showMediaInsertPopup)(tr, target);
+          return (0, _actions.showMediaInsertPopup)(tr, mountInfo);
         };
       }
     },
@@ -59,8 +59,7 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
       var insertMediaSingle = function insertMediaSingle(_ref5) {
         var _api$media$actions$in;
         var mediaState = _ref5.mediaState,
-          inputMethod = _ref5.inputMethod,
-          insertMediaVia = _ref5.insertMediaVia;
+          inputMethod = _ref5.inputMethod;
         var id = mediaState.id,
           dimensions = mediaState.dimensions,
           contextId = mediaState.contextId,
@@ -85,7 +84,7 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
           alt: fileName,
           __fileMimeType: mediaState.fileMimeType
         });
-        return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported, insertMediaVia)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
+        return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported, _analytics.INSERT_MEDIA_VIA.EXTERNAL_UPLOAD)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
       };
       var insertExternalMediaSingle = function insertExternalMediaSingle(_ref7) {
         var _api$media$actions$in2;

package/dist/cjs/pm-plugins/main.js

@@ -13,7 +13,7 @@ var createPlugin = exports.createPlugin = function createPlugin() {
       init: function init() {
         return {
           isOpen: false,
-          target: undefined
+          mountInfo: undefined
         };
       },
       apply: function apply(tr, mediaInsertPluginState) {
@@ -22,7 +22,7 @@ var createPlugin = exports.createPlugin = function createPlugin() {
           case _actions.ACTION_OPEN_POPUP:
             return {
               isOpen: true,
-              target: meta.target
+              mountInfo: meta.mountInfo
             };
           case _actions.ACTION_CLOSE_POPUP:
             return {

package/dist/cjs/ui/MediaFromURL.js

@@ -1,13 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MediaFromURL = MediaFromURL;
 exports.isValidUrl = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+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"));
@@ -18,7 +20,7 @@ var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
-var _form = require("@atlaskit/form");
+var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _primitives = require("@atlaskit/primitives");
@@ -26,6 +28,9 @@ var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _MediaCard = require("./MediaCard");
 var _useAnalyticsEvents2 = require("./useAnalyticsEvents");
+var _excluded = ["value", "onChange"];
+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 && {}.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; }
 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)({
@@ -38,9 +43,6 @@ var PreviewBoxStyles = (0, _primitives.xcss)({
 var PreviewImageStyles = (0, _primitives.xcss)({
   height: '200px'
 });
-var ButtonGroupStyles = (0, _primitives.xcss)({
-  alignSelf: 'end'
-});
 var FormStyles = (0, _primitives.xcss)({
   flexGrow: 1
 });
@@ -103,22 +105,10 @@ function MediaFromURL(_ref) {
     warning: intl.formatMessage(_messages.mediaInsertMessages.fromUrlWarning),
     invalidUrl: intl.formatMessage(_messages.mediaInsertMessages.invalidUrlErrorMessage)
   };
-  var _React$useState = _react.default.useState(''),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    inputUrl = _React$useState2[0],
-    setUrl = _React$useState2[1];
-  var _React$useState3 = _react.default.useState(),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    hasUrlError = _React$useState4[0],
-    setHasUrlError = _React$useState4[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 _React$useState5 = _react.default.useState(false),
-    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-    isInputFocused = _React$useState6[0],
-    setInputFocused = _React$useState6[1];
   var pasteFlag = _react.default.useRef(false);
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(dispatchAnalyticsEvent),
     onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
@@ -178,7 +168,7 @@ function MediaFromURL(_ref) {
               dispatch({
                 type: 'warning',
                 warning: _context.t0,
-                url: inputUrl
+                url: url
               });
             } else if (_context.t0 instanceof Error) {
               message = 'Image preview fetch failed';
@@ -203,39 +193,21 @@ function MediaFromURL(_ref) {
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [onUploadButtonClickedAnalytics, mediaProvider, onUploadCommencedAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics, inputUrl]);
-  var errorAttributes = {};
-  if (!isInputFocused) {
-    errorAttributes['aria-relevant'] = 'all';
-    errorAttributes['aria-atomic'] = 'false';
-  }
-  var onBlur = _react.default.useCallback(function () {
-    if (!isValidUrl(inputUrl)) {
-      setHasUrlError(true);
-    }
-    setInputFocused(false);
-  }, [inputUrl]);
-  var onFocus = _react.default.useCallback(function () {
-    setInputFocused(true);
-  }, []);
+  }(), [onUploadButtonClickedAnalytics, mediaProvider, onUploadCommencedAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics]);
   var onURLChange = _react.default.useCallback(function (e) {
-    var url = e.target.value;
-    setUrl(url);
+    var url = e.currentTarget.value;
     dispatch({
       type: 'reset'
     });
     if (!isValidUrl(url)) {
-      setHasUrlError(true);
       return;
-    } else {
-      setHasUrlError(false);
     }
-    if (pasteFlag.current === true) {
+    if (pasteFlag.current) {
       pasteFlag.current = false;
       uploadExternalMedia(url);
     }
   }, [uploadExternalMedia]);
-  var onPaste = _react.default.useCallback(function (e) {
+  var _onPaste = _react.default.useCallback(function (e, inputUrl) {
     // Note: this is a little weird, but the paste event will always be
     // fired before the change event when pasting. We don't really want to
     // duplicate logic by handling pastes separately to changes, so we're
@@ -245,13 +217,12 @@ function MediaFromURL(_ref) {
     if (e.clipboardData.getData('text') !== inputUrl) {
       pasteFlag.current = true;
     }
-  }, [inputUrl]);
+  }, []);
   var onInsert = _react.default.useCallback(function () {
     if (previewState.previewInfo) {
       insertMediaSingle({
         mediaState: previewState.previewInfo,
-        inputMethod: _analytics.INPUT_METHOD.MEDIA_PICKER,
-        insertMediaVia: _analytics.INSERT_MEDIA_VIA.EXTERNAL_UPLOAD
+        inputMethod: _analytics.INPUT_METHOD.MEDIA_PICKER
       });
     }
     closeMediaInsertPicker();
@@ -266,14 +237,6 @@ function MediaFromURL(_ref) {
     }
     closeMediaInsertPicker();
   }, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning]);
-  var onInsertClick = _react.default.useCallback(function () {
-    if (previewState.previewInfo) {
-      return onInsert();
-    }
-    if (previewState.warning) {
-      return onExternalInsert(inputUrl);
-    }
-  }, [previewState.previewInfo, previewState.warning, onInsert, onExternalInsert, inputUrl]);
   var onInputKeyPress = _react.default.useCallback(function (event) {
     if (event && event.key === 'Esc') {
       if (dispatchAnalyticsEvent) {
@@ -303,14 +266,13 @@ function MediaFromURL(_ref) {
     }
     closeMediaInsertPicker();
   }, [closeMediaInsertPicker, dispatchAnalyticsEvent]);
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    as: "form",
-    onSubmit: function onSubmit(e) {
-      e.preventDefault();
+  return /*#__PURE__*/_react.default.createElement(_form.default, {
+    onSubmit: function onSubmit(_ref3, form) {
+      var inputUrl = _ref3.inputUrl;
       // This can be triggered from an enter key event on the input even when
       // the button is disabled, so we explicitly do nothing when in loading
       // state.
-      if (previewState.isLoading || hasUrlError) {
+      if (previewState.isLoading || form.getState().invalid) {
         return;
       }
       if (previewState.previewInfo) {
@@ -320,52 +282,79 @@ function MediaFromURL(_ref) {
         return onExternalInsert(inputUrl);
       }
       return uploadExternalMedia(inputUrl);
-    },
-    xcss: FormStyles
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
-    space: "space.150",
-    grow: "fill"
-  }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
-    value: inputUrl,
-    placeholder: strings.pasteLinkToUpload,
-    isInvalid: hasUrlError,
-    maxLength: MAX_URL_LENGTH,
-    onChange: onURLChange,
-    onKeyPress: onInputKeyPress,
-    onPaste: onPaste,
-    onBlur: onBlur,
-    onFocus: onFocus
-  }), hasUrlError && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
-    as: "span"
-  }, errorAttributes), strings.invalidUrl)), 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: inputUrl.length === 0 || hasUrlError,
-    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",
-    onClick: onCancel
-  }, strings.cancel), /*#__PURE__*/_react.default.createElement(_new.default, {
-    appearance: "primary",
-    isDisabled: !previewState.previewInfo && !previewState.warning,
-    onClick: onInsertClick
-  }, strings.insert)))));
+    }
+  }, function (_ref4) {
+    var formProps = _ref4.formProps;
+    return /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
+      as: "form"
+    }, formProps, {
+      xcss: FormStyles
+    }), /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+      space: "space.150",
+      grow: "fill"
+    }, /*#__PURE__*/_react.default.createElement(_form.Field, {
+      "aria-required": true,
+      isRequired: true,
+      name: "inputUrl",
+      validate: function validate(value) {
+        return value && isValidUrl(value) ? undefined : strings.invalidUrl;
+      }
+    }, function (_ref5) {
+      var _ref5$fieldProps = _ref5.fieldProps,
+        value = _ref5$fieldProps.value,
+        _onChange = _ref5$fieldProps.onChange,
+        rest = (0, _objectWithoutProperties2.default)(_ref5$fieldProps, _excluded),
+        error = _ref5.error,
+        meta = _ref5.meta;
+      return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+        space: "space.150",
+        grow: "fill"
+      }, /*#__PURE__*/_react.default.createElement(_primitives.Box, null, /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, rest, {
+        value: value,
+        placeholder: strings.pasteLinkToUpload,
+        maxLength: MAX_URL_LENGTH,
+        onKeyPress: onInputKeyPress,
+        onPaste: function onPaste(event) {
+          return _onPaste(event, value);
+        },
+        onChange: function onChange(value) {
+          onURLChange(value);
+          _onChange(value);
+        }
+      })), error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
+        as: "span"
+      }, meta.touched || meta.dirty ? {
+        'aria-relevant': 'all',
+        'aria-atomic': 'false'
+      } : {}), error))), !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: !!error || !meta.dirty,
+        iconBefore: _filePreview.default
+      }, strings.loadPreview)));
+    }), 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), /*#__PURE__*/_react.default.createElement(_form.FormFooter, null, /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+      appearance: "subtle",
+      onClick: onCancel
+    }, strings.cancel), /*#__PURE__*/_react.default.createElement(_new.default, {
+      type: "submit",
+      appearance: "primary",
+      isDisabled: !previewState.previewInfo && !previewState.warning
+    }, strings.insert)))));
+  });
 }

package/dist/cjs/ui/MediaInsertPicker.js

@@ -81,10 +81,18 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     insertExternalMediaSingle = _ref2.insertExternalMediaSingle,
     insertFile = _ref2.insertFile;
   var _ref3 = (_useSharedPluginState = (_useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['mediaInsert'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaInsertState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {},
-    isOpen = _ref3.isOpen;
-
-  // If targetRef is undefined, target the selection in the editor
-  var targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
+    isOpen = _ref3.isOpen,
+    mountInfo = _ref3.mountInfo;
+  var targetRef;
+  var mountPoint;
+  if (mountInfo) {
+    targetRef = mountInfo.ref;
+    mountPoint = mountInfo.mountPoint;
+  } else {
+    // If targetRef is undefined, target the selection in the editor
+    targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
+    mountPoint = popupsMountPoint;
+  }
   var mediaProvider = (_useSharedPluginState3 = (0, _hooks.useSharedPluginState)(api, ['media'])) === null || _useSharedPluginState3 === void 0 || (_useSharedPluginState3 = _useSharedPluginState3.mediaState) === null || _useSharedPluginState3 === void 0 ? void 0 : _useSharedPluginState3.mediaProvider;
   var intl = (0, _reactIntlNext.useIntl)();
   var focusEditor = (0, _useFocusEditor.useFocusEditor)({
@@ -122,7 +130,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
     fitHeight: 390,
     fitWidth: 340,
-    mountTo: popupsMountPoint,
+    mountTo: mountPoint,
     boundariesElement: popupsBoundariesElement,
     handleClickOutside: handleClose(_analytics.INPUT_METHOD.MOUSE),
     handleEscapeKeydown: handleClose(_analytics.INPUT_METHOD.KEYBOARD),

package/dist/es2019/actions.js

@@ -5,19 +5,19 @@ export const ACTION_CLOSE_POPUP = 'CLOSE_POPUP';
 const setPopupMeta = ({
   type,
   tr,
-  target
+  mountInfo
 }) => tr.setMeta(pluginKey, {
   type,
-  target
+  mountInfo
 });
-export const showMediaInsertPopup = (tr, target) => {
+export const showMediaInsertPopup = (tr, mountInfo) => {
   // Log exposure here but don't actually switch anything on it
   editorExperiment('add-media-from-url', true, {
     exposure: true
   });
   return setPopupMeta({
     type: ACTION_OPEN_POPUP,
-    target,
+    mountInfo,
     tr
   });
 };

package/dist/es2019/plugin.js

@@ -28,17 +28,17 @@ export const mediaInsertPlugin = ({
       }
       const {
         isOpen,
-        target
+        mountInfo
       } = pluginKey.getState(editorState) || {};
       return {
         isOpen,
-        target
+        mountInfo
       };
     },
     commands: {
-      showMediaInsertPopup: target => ({
+      showMediaInsertPopup: mountInfo => ({
         tr
-      }) => showMediaInsertPopup(tr, target)
+      }) => showMediaInsertPopup(tr, mountInfo)
     },
     contentComponent: ({
       editorView,
@@ -49,8 +49,7 @@ export const mediaInsertPlugin = ({
     }) => {
       const insertMediaSingle = ({
         mediaState,
-        inputMethod,
-        insertMediaVia
+        inputMethod
       }) => {
         var _api$media$actions$in;
         const {
@@ -79,7 +78,7 @@ export const mediaInsertPlugin = ({
           alt: fileName,
           __fileMimeType: mediaState.fileMimeType
         });
-        return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported, insertMediaVia)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
+        return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported, INSERT_MEDIA_VIA.EXTERNAL_UPLOAD)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
       };
       const insertExternalMediaSingle = ({
         url,

package/dist/es2019/pm-plugins/main.js

@@ -7,7 +7,7 @@ export const createPlugin = () => {
       init() {
         return {
           isOpen: false,
-          target: undefined
+          mountInfo: undefined
         };
       },
       apply(tr, mediaInsertPluginState) {
@@ -16,7 +16,7 @@ export const createPlugin = () => {
           case ACTION_OPEN_POPUP:
             return {
               isOpen: true,
-              target: meta.target
+              mountInfo: meta.mountInfo
             };
           case ACTION_CLOSE_POPUP:
             return {