@atlaskit/editor-plugin-media-insert 2.8.4 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 3.1.0
+
+### Minor Changes
+
+- [#146643](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146643)
+  [`6b3dec2ad5378`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b3dec2ad5378) -
+  [ux] ED-25116 Pin media popup to toolbar when triggered from toolbar
+
+### Patch Changes
+
+- [#146446](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146446)
+  [`c98c34dd5f307`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c98c34dd5f307) -
+  [ED-24941] Added analytics for media-insert
+
+  - **@atlaskit/editor-common**: Add enums and types for new anaylics params
+  - **@atlaskit/editor-plugin-media**: Include 'insertMediaVia' on analytics events for inserting
+    media into the document
+  - **@atlaskit/editor-plugin-media-insert**: Set 'insertMediaVia' field for particular
+    'externalUpload', 'externalUrl' or 'localUpload' media inserts
+
+## 3.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.8.4
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -10,18 +10,21 @@ var ACTION_OPEN_POPUP = exports.ACTION_OPEN_POPUP = 'OPEN_POPUP';
 var ACTION_CLOSE_POPUP = exports.ACTION_CLOSE_POPUP = 'CLOSE_POPUP';
 var setPopupMeta = function setPopupMeta(_ref) {
   var type = _ref.type,
-    tr = _ref.tr;
+    tr = _ref.tr,
+    target = _ref.target;
   return tr.setMeta(_pluginKey.pluginKey, {
-    type: type
+    type: type,
+    target: target
   });
 };
-var showMediaInsertPopup = exports.showMediaInsertPopup = function showMediaInsertPopup(tr) {
+var showMediaInsertPopup = exports.showMediaInsertPopup = function showMediaInsertPopup(tr, target) {
   // 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,
     tr: tr
   });
 };

package/dist/cjs/plugin.js

@@ -35,15 +35,19 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
         };
       }
       var _ref2 = _pluginKey.pluginKey.getState(editorState) || {},
-        isOpen = _ref2.isOpen;
+        isOpen = _ref2.isOpen,
+        target = _ref2.target;
       return {
-        isOpen: isOpen
+        isOpen: isOpen,
+        target: target
       };
     },
     commands: {
-      showMediaInsertPopup: function showMediaInsertPopup(_ref3) {
-        var tr = _ref3.tr;
-        return (0, _actions.showMediaInsertPopup)(tr);
+      showMediaInsertPopup: function showMediaInsertPopup(target) {
+        return function (_ref3) {
+          var tr = _ref3.tr;
+          return (0, _actions.showMediaInsertPopup)(tr, target);
+        };
       }
     },
     contentComponent: function contentComponent(_ref4) {
@@ -55,7 +59,8 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
       var insertMediaSingle = function insertMediaSingle(_ref5) {
         var _api$media$actions$in;
         var mediaState = _ref5.mediaState,
-          inputMethod = _ref5.inputMethod;
+          inputMethod = _ref5.inputMethod,
+          insertMediaVia = _ref5.insertMediaVia;
         var id = mediaState.id,
           dimensions = mediaState.dimensions,
           contextId = mediaState.contextId,
@@ -80,7 +85,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)) !== 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, insertMediaVia)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
       };
       var insertExternalMediaSingle = function insertExternalMediaSingle(_ref7) {
         var _api$media$actions$in2;
@@ -93,7 +98,7 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
           alt: alt,
           __external: true
         });
-        return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
+        return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported, _analytics.INSERT_MEDIA_VIA.EXTERNAL_URL)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
       };
       var insertFile = function insertFile(_ref8) {
         var _api$media$sharedStat, _api$media$sharedStat2;
@@ -101,7 +106,7 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
           inputMethod = _ref8.inputMethod,
           onMediaStateChanged = _ref8.onMediaStateChanged;
         var collection = mediaState.collection;
-        return collection !== undefined ? (_api$media$sharedStat = api === null || api === void 0 || (_api$media$sharedStat2 = api.media.sharedState.currentState()) === null || _api$media$sharedStat2 === void 0 ? void 0 : _api$media$sharedStat2.insertFile(mediaState, onMediaStateChanged, inputMethod)) !== null && _api$media$sharedStat !== void 0 ? _api$media$sharedStat : false : false;
+        return collection !== undefined ? (_api$media$sharedStat = api === null || api === void 0 || (_api$media$sharedStat2 = api.media.sharedState.currentState()) === null || _api$media$sharedStat2 === void 0 ? void 0 : _api$media$sharedStat2.insertFile(mediaState, onMediaStateChanged, inputMethod, _analytics.INSERT_MEDIA_VIA.LOCAL_UPLOAD)) !== null && _api$media$sharedStat !== void 0 ? _api$media$sharedStat : false : false;
       };
       return /*#__PURE__*/_react.default.createElement(_MediaInsertPicker.MediaInsertPicker, {
         api: api,
@@ -135,7 +140,7 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
             // Insert empty string to remove the typeahead raw text
             // close the quick insert immediately
             var tr = insert('');
-            api === null || api === void 0 || api.mediaInsert.commands.showMediaInsertPopup({
+            api === null || api === void 0 || api.mediaInsert.commands.showMediaInsertPopup()({
               tr: tr
             });
             api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({

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

@@ -12,26 +12,24 @@ var createPlugin = exports.createPlugin = function createPlugin() {
     state: {
       init: function init() {
         return {
-          isOpen: false
+          isOpen: false,
+          target: undefined
         };
       },
       apply: function apply(tr, mediaInsertPluginState) {
         var meta = tr.getMeta(_pluginKey.pluginKey);
-        if (meta) {
-          switch (meta.type) {
-            case _actions.ACTION_OPEN_POPUP:
-              return {
-                isOpen: true
-              };
-            case _actions.ACTION_CLOSE_POPUP:
-              return {
-                isOpen: false
-              };
-            default:
-              return mediaInsertPluginState;
-          }
-        } else {
-          return mediaInsertPluginState;
+        switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+          case _actions.ACTION_OPEN_POPUP:
+            return {
+              isOpen: true,
+              target: meta.target
+            };
+          case _actions.ACTION_CLOSE_POPUP:
+            return {
+              isOpen: false
+            };
+          default:
+            return mediaInsertPluginState;
         }
       }
     },

package/dist/cjs/ui/MediaFromURL.js

@@ -250,7 +250,8 @@ function MediaFromURL(_ref) {
     if (previewState.previewInfo) {
       insertMediaSingle({
         mediaState: previewState.previewInfo,
-        inputMethod: _analytics.INPUT_METHOD.MEDIA_PICKER
+        inputMethod: _analytics.INPUT_METHOD.MEDIA_PICKER,
+        insertMediaVia: _analytics.INSERT_MEDIA_VIA.EXTERNAL_UPLOAD
       });
     }
     closeMediaInsertPicker();

package/dist/cjs/ui/MediaInsertPicker.js

@@ -69,7 +69,7 @@ var CustomTabPanel = function CustomTabPanel(_ref) {
   }), children);
 };
 var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_ref2) {
-  var _useSharedPluginState, _useSharedPluginState2;
+  var _useSharedPluginState, _useSharedPluginState2, _useSharedPluginState3;
   var api = _ref2.api,
     editorView = _ref2.editorView,
     dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
@@ -80,9 +80,13 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     insertMediaSingle = _ref2.insertMediaSingle,
     insertExternalMediaSingle = _ref2.insertExternalMediaSingle,
     insertFile = _ref2.insertFile;
-  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;
+  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,
+    target = _ref3.target;
+
+  // If targetRef is undefined, target the selection in the editor
+  var targetRef = target !== null && target !== void 0 ? target : getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
+  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)({
     editorView: editorView
@@ -115,7 +119,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
   return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
     ariaLabel: intl.formatMessage(_messages.mediaInsertMessages.mediaPickerPopupAriaLabel),
     offset: [0, 12],
-    target: targetRef,
+    target: target !== null && target !== void 0 ? target : targetRef,
     zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
     fitHeight: 390,
     fitWidth: 340,

package/dist/es2019/actions.js

@@ -4,17 +4,20 @@ export const ACTION_OPEN_POPUP = 'OPEN_POPUP';
 export const ACTION_CLOSE_POPUP = 'CLOSE_POPUP';
 const setPopupMeta = ({
   type,
-  tr
+  tr,
+  target
 }) => tr.setMeta(pluginKey, {
-  type
+  type,
+  target
 });
-export const showMediaInsertPopup = tr => {
+export const showMediaInsertPopup = (tr, target) => {
   // 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,
     tr
   });
 };

package/dist/es2019/plugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, INSERT_MEDIA_VIA } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconImages } from '@atlaskit/editor-common/quick-insert';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -27,16 +27,18 @@ export const mediaInsertPlugin = ({
         };
       }
       const {
-        isOpen
+        isOpen,
+        target
       } = pluginKey.getState(editorState) || {};
       return {
-        isOpen
+        isOpen,
+        target
       };
     },
     commands: {
-      showMediaInsertPopup: ({
+      showMediaInsertPopup: target => ({
         tr
-      }) => showMediaInsertPopup(tr)
+      }) => showMediaInsertPopup(tr, target)
     },
     contentComponent: ({
       editorView,
@@ -47,7 +49,8 @@ export const mediaInsertPlugin = ({
     }) => {
       const insertMediaSingle = ({
         mediaState,
-        inputMethod
+        inputMethod,
+        insertMediaVia
       }) => {
         var _api$media$actions$in;
         const {
@@ -76,7 +79,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)) !== 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, insertMediaVia)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
       };
       const insertExternalMediaSingle = ({
         url,
@@ -90,7 +93,7 @@ export const mediaInsertPlugin = ({
           alt,
           __external: true
         });
-        return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
+        return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported, INSERT_MEDIA_VIA.EXTERNAL_URL)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
       };
       const insertFile = ({
         mediaState,
@@ -99,7 +102,7 @@ export const mediaInsertPlugin = ({
       }) => {
         var _api$media$sharedStat, _api$media$sharedStat2;
         const collection = mediaState.collection;
-        return collection !== undefined ? (_api$media$sharedStat = api === null || api === void 0 ? void 0 : (_api$media$sharedStat2 = api.media.sharedState.currentState()) === null || _api$media$sharedStat2 === void 0 ? void 0 : _api$media$sharedStat2.insertFile(mediaState, onMediaStateChanged, inputMethod)) !== null && _api$media$sharedStat !== void 0 ? _api$media$sharedStat : false : false;
+        return collection !== undefined ? (_api$media$sharedStat = api === null || api === void 0 ? void 0 : (_api$media$sharedStat2 = api.media.sharedState.currentState()) === null || _api$media$sharedStat2 === void 0 ? void 0 : _api$media$sharedStat2.insertFile(mediaState, onMediaStateChanged, inputMethod, INSERT_MEDIA_VIA.LOCAL_UPLOAD)) !== null && _api$media$sharedStat !== void 0 ? _api$media$sharedStat : false : false;
       };
       return /*#__PURE__*/React.createElement(MediaInsertPicker, {
         api: api,
@@ -129,7 +132,7 @@ export const mediaInsertPlugin = ({
           // Insert empty string to remove the typeahead raw text
           // close the quick insert immediately
           const tr = insert('');
-          api === null || api === void 0 ? void 0 : api.mediaInsert.commands.showMediaInsertPopup({
+          api === null || api === void 0 ? void 0 : api.mediaInsert.commands.showMediaInsertPopup()({
             tr
           });
           api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({

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

@@ -6,26 +6,24 @@ export const createPlugin = () => {
     state: {
       init() {
         return {
-          isOpen: false
+          isOpen: false,
+          target: undefined
         };
       },
       apply(tr, mediaInsertPluginState) {
         const meta = tr.getMeta(pluginKey);
-        if (meta) {
-          switch (meta.type) {
-            case ACTION_OPEN_POPUP:
-              return {
-                isOpen: true
-              };
-            case ACTION_CLOSE_POPUP:
-              return {
-                isOpen: false
-              };
-            default:
-              return mediaInsertPluginState;
-          }
-        } else {
-          return mediaInsertPluginState;
+        switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+          case ACTION_OPEN_POPUP:
+            return {
+              isOpen: true,
+              target: meta.target
+            };
+          case ACTION_CLOSE_POPUP:
+            return {
+              isOpen: false
+            };
+          default:
+            return mediaInsertPluginState;
         }
       }
     },

package/dist/es2019/ui/MediaFromURL.js

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl-next';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/new';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, INSERT_MEDIA_VIA } from '@atlaskit/editor-common/analytics';
 import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import { ErrorMessage } from '@atlaskit/form';
 import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
@@ -211,7 +211,8 @@ export function MediaFromURL({
     if (previewState.previewInfo) {
       insertMediaSingle({
         mediaState: previewState.previewInfo,
-        inputMethod: INPUT_METHOD.MEDIA_PICKER
+        inputMethod: INPUT_METHOD.MEDIA_PICKER,
+        insertMediaVia: INSERT_MEDIA_VIA.EXTERNAL_UPLOAD
       });
     }
     closeMediaInsertPicker();

package/dist/es2019/ui/MediaInsertPicker.js

@@ -72,8 +72,13 @@ export const MediaInsertPicker = ({
   insertFile
 }) => {
   var _useSharedPluginState, _useSharedPluginState2, _useSharedPluginState3, _useSharedPluginState4;
-  const targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
-  const isOpen = (_useSharedPluginState = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 ? void 0 : (_useSharedPluginState2 = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.isOpen;
+  const {
+    isOpen,
+    target
+  } = (_useSharedPluginState = (_useSharedPluginState2 = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaInsertState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {};
+
+  // If targetRef is undefined, target the selection in the editor
+  const targetRef = target !== null && target !== void 0 ? target : getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
   const mediaProvider = (_useSharedPluginState3 = useSharedPluginState(api, ['media'])) === null || _useSharedPluginState3 === void 0 ? void 0 : (_useSharedPluginState4 = _useSharedPluginState3.mediaState) === null || _useSharedPluginState4 === void 0 ? void 0 : _useSharedPluginState4.mediaProvider;
   const intl = useIntl();
   const focusEditor = useFocusEditor({
@@ -106,7 +111,7 @@ export const MediaInsertPicker = ({
   return /*#__PURE__*/React.createElement(PopupWithListeners, {
     ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel),
     offset: [0, 12],
-    target: targetRef,
+    target: target !== null && target !== void 0 ? target : targetRef,
     zIndex: akEditorFloatingDialogZIndex,
     fitHeight: 390,
     fitWidth: 340,

package/dist/esm/actions.js

@@ -4,18 +4,21 @@ export var ACTION_OPEN_POPUP = 'OPEN_POPUP';
 export var ACTION_CLOSE_POPUP = 'CLOSE_POPUP';
 var setPopupMeta = function setPopupMeta(_ref) {
   var type = _ref.type,
-    tr = _ref.tr;
+    tr = _ref.tr,
+    target = _ref.target;
   return tr.setMeta(pluginKey, {
-    type: type
+    type: type,
+    target: target
   });
 };
-export var showMediaInsertPopup = function showMediaInsertPopup(tr) {
+export var showMediaInsertPopup = function showMediaInsertPopup(tr, target) {
   // 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: target,
     tr: tr
   });
 };

package/dist/esm/plugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, INSERT_MEDIA_VIA } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconImages } from '@atlaskit/editor-common/quick-insert';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -28,15 +28,19 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
         };
       }
       var _ref2 = pluginKey.getState(editorState) || {},
-        isOpen = _ref2.isOpen;
+        isOpen = _ref2.isOpen,
+        target = _ref2.target;
       return {
-        isOpen: isOpen
+        isOpen: isOpen,
+        target: target
       };
     },
     commands: {
-      showMediaInsertPopup: function showMediaInsertPopup(_ref3) {
-        var tr = _ref3.tr;
-        return _showMediaInsertPopup(tr);
+      showMediaInsertPopup: function showMediaInsertPopup(target) {
+        return function (_ref3) {
+          var tr = _ref3.tr;
+          return _showMediaInsertPopup(tr, target);
+        };
       }
     },
     contentComponent: function contentComponent(_ref4) {
@@ -48,7 +52,8 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
       var insertMediaSingle = function insertMediaSingle(_ref5) {
         var _api$media$actions$in;
         var mediaState = _ref5.mediaState,
-          inputMethod = _ref5.inputMethod;
+          inputMethod = _ref5.inputMethod,
+          insertMediaVia = _ref5.insertMediaVia;
         var id = mediaState.id,
           dimensions = mediaState.dimensions,
           contextId = mediaState.contextId,
@@ -73,7 +78,7 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
           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)) !== 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, insertMediaVia)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
       };
       var insertExternalMediaSingle = function insertExternalMediaSingle(_ref7) {
         var _api$media$actions$in2;
@@ -86,7 +91,7 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
           alt: alt,
           __external: true
         });
-        return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
+        return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod, isNestingInQuoteSupported, INSERT_MEDIA_VIA.EXTERNAL_URL)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
       };
       var insertFile = function insertFile(_ref8) {
         var _api$media$sharedStat, _api$media$sharedStat2;
@@ -94,7 +99,7 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
           inputMethod = _ref8.inputMethod,
           onMediaStateChanged = _ref8.onMediaStateChanged;
         var collection = mediaState.collection;
-        return collection !== undefined ? (_api$media$sharedStat = api === null || api === void 0 || (_api$media$sharedStat2 = api.media.sharedState.currentState()) === null || _api$media$sharedStat2 === void 0 ? void 0 : _api$media$sharedStat2.insertFile(mediaState, onMediaStateChanged, inputMethod)) !== null && _api$media$sharedStat !== void 0 ? _api$media$sharedStat : false : false;
+        return collection !== undefined ? (_api$media$sharedStat = api === null || api === void 0 || (_api$media$sharedStat2 = api.media.sharedState.currentState()) === null || _api$media$sharedStat2 === void 0 ? void 0 : _api$media$sharedStat2.insertFile(mediaState, onMediaStateChanged, inputMethod, INSERT_MEDIA_VIA.LOCAL_UPLOAD)) !== null && _api$media$sharedStat !== void 0 ? _api$media$sharedStat : false : false;
       };
       return /*#__PURE__*/React.createElement(MediaInsertPicker, {
         api: api,
@@ -128,7 +133,7 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
             // Insert empty string to remove the typeahead raw text
             // close the quick insert immediately
             var tr = insert('');
-            api === null || api === void 0 || api.mediaInsert.commands.showMediaInsertPopup({
+            api === null || api === void 0 || api.mediaInsert.commands.showMediaInsertPopup()({
               tr: tr
             });
             api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({

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

@@ -6,26 +6,24 @@ export var createPlugin = function createPlugin() {
     state: {
       init: function init() {
         return {
-          isOpen: false
+          isOpen: false,
+          target: undefined
         };
       },
       apply: function apply(tr, mediaInsertPluginState) {
         var meta = tr.getMeta(pluginKey);
-        if (meta) {
-          switch (meta.type) {
-            case ACTION_OPEN_POPUP:
-              return {
-                isOpen: true
-              };
-            case ACTION_CLOSE_POPUP:
-              return {
-                isOpen: false
-              };
-            default:
-              return mediaInsertPluginState;
-          }
-        } else {
-          return mediaInsertPluginState;
+        switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+          case ACTION_OPEN_POPUP:
+            return {
+              isOpen: true,
+              target: meta.target
+            };
+          case ACTION_CLOSE_POPUP:
+            return {
+              isOpen: false
+            };
+          default:
+            return mediaInsertPluginState;
         }
       }
     },

package/dist/esm/ui/MediaFromURL.js

@@ -10,7 +10,7 @@ import { useIntl } from 'react-intl-next';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/new';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, INSERT_MEDIA_VIA } from '@atlaskit/editor-common/analytics';
 import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import { ErrorMessage } from '@atlaskit/form';
 import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
@@ -242,7 +242,8 @@ export function MediaFromURL(_ref) {
     if (previewState.previewInfo) {
       insertMediaSingle({
         mediaState: previewState.previewInfo,
-        inputMethod: INPUT_METHOD.MEDIA_PICKER
+        inputMethod: INPUT_METHOD.MEDIA_PICKER,
+        insertMediaVia: INSERT_MEDIA_VIA.EXTERNAL_UPLOAD
       });
     }
     closeMediaInsertPicker();

package/dist/esm/ui/MediaInsertPicker.js

@@ -59,7 +59,7 @@ var CustomTabPanel = function CustomTabPanel(_ref) {
   }), children);
 };
 export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
-  var _useSharedPluginState, _useSharedPluginState2;
+  var _useSharedPluginState, _useSharedPluginState2, _useSharedPluginState3;
   var api = _ref2.api,
     editorView = _ref2.editorView,
     dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
@@ -70,9 +70,13 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
     insertMediaSingle = _ref2.insertMediaSingle,
     insertExternalMediaSingle = _ref2.insertExternalMediaSingle,
     insertFile = _ref2.insertFile;
-  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;
+  var _ref3 = (_useSharedPluginState = (_useSharedPluginState2 = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaInsertState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {},
+    isOpen = _ref3.isOpen,
+    target = _ref3.target;
+
+  // If targetRef is undefined, target the selection in the editor
+  var targetRef = target !== null && target !== void 0 ? target : getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
+  var mediaProvider = (_useSharedPluginState3 = useSharedPluginState(api, ['media'])) === null || _useSharedPluginState3 === void 0 || (_useSharedPluginState3 = _useSharedPluginState3.mediaState) === null || _useSharedPluginState3 === void 0 ? void 0 : _useSharedPluginState3.mediaProvider;
   var intl = useIntl();
   var focusEditor = useFocusEditor({
     editorView: editorView
@@ -105,7 +109,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
   return /*#__PURE__*/React.createElement(PopupWithListeners, {
     ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel),
     offset: [0, 12],
-    target: targetRef,
+    target: target !== null && target !== void 0 ? target : targetRef,
     zIndex: akEditorFloatingDialogZIndex,
     fitHeight: 390,
     fitWidth: 340,

package/dist/types/actions.d.ts

@@ -2,5 +2,5 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 export type MediaInsertPluginAction = typeof ACTION_OPEN_POPUP | typeof ACTION_CLOSE_POPUP;
 export declare const ACTION_OPEN_POPUP = "OPEN_POPUP";
 export declare const ACTION_CLOSE_POPUP = "CLOSE_POPUP";
-export declare const showMediaInsertPopup: (tr: Transaction) => Transaction;
+export declare const showMediaInsertPopup: (tr: Transaction, target?: HTMLElement) => Transaction;
 export declare const closeMediaInsertPicker: (tr: Transaction) => Transaction;

package/dist/types/types.d.ts

@@ -1,4 +1,5 @@
 import type { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
+import { type InsertMediaVia } from '@atlaskit/editor-common/analytics';
 import type { Providers } from '@atlaskit/editor-common/provider-factory';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin, UiComponentFactoryParams } from '@atlaskit/editor-common/types';
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
@@ -8,10 +9,12 @@ import type { MediaPlugin } from '@atlaskit/editor-plugin-media';
 import { type MediaState, type MediaStateEventSubscriber } from '@atlaskit/editor-plugin-media/types';
 export type MediaInsertPluginState = {
     isOpen?: boolean;
+    target?: HTMLElement;
 };
 export type InsertMediaSingle = (props: {
     mediaState: MediaState;
     inputMethod: InputMethodInsertMedia;
+    insertMediaVia: InsertMediaVia;
 }) => boolean;
 export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
     dependencies: [
@@ -21,7 +24,7 @@ export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
     ];
     sharedState: MediaInsertPluginState;
     commands: {
-        showMediaInsertPopup: EditorCommand;
+        showMediaInsertPopup: (target?: HTMLElement) => EditorCommand;
     };
 }>;
 export type InsertExternalMediaSingle = (props: {

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

@@ -2,5 +2,5 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 export type MediaInsertPluginAction = typeof ACTION_OPEN_POPUP | typeof ACTION_CLOSE_POPUP;
 export declare const ACTION_OPEN_POPUP = "OPEN_POPUP";
 export declare const ACTION_CLOSE_POPUP = "CLOSE_POPUP";
-export declare const showMediaInsertPopup: (tr: Transaction) => Transaction;
+export declare const showMediaInsertPopup: (tr: Transaction, target?: HTMLElement) => Transaction;
 export declare const closeMediaInsertPicker: (tr: Transaction) => Transaction;

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

@@ -1,4 +1,5 @@
 import type { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
+import { type InsertMediaVia } from '@atlaskit/editor-common/analytics';
 import type { Providers } from '@atlaskit/editor-common/provider-factory';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin, UiComponentFactoryParams } from '@atlaskit/editor-common/types';
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
@@ -8,10 +9,12 @@ import type { MediaPlugin } from '@atlaskit/editor-plugin-media';
 import { type MediaState, type MediaStateEventSubscriber } from '@atlaskit/editor-plugin-media/types';
 export type MediaInsertPluginState = {
     isOpen?: boolean;
+    target?: HTMLElement;
 };
 export type InsertMediaSingle = (props: {
     mediaState: MediaState;
     inputMethod: InputMethodInsertMedia;
+    insertMediaVia: InsertMediaVia;
 }) => boolean;
 export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
     dependencies: [
@@ -21,7 +24,7 @@ export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
     ];
     sharedState: MediaInsertPluginState;
     commands: {
-        showMediaInsertPopup: EditorCommand;
+        showMediaInsertPopup: (target?: HTMLElement) => EditorCommand;
     };
 }>;
 export type InsertExternalMediaSingle = (props: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media-insert",
-	"version": "2.8.4",
+	"version": "3.1.0",
 	"description": "Media Insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,13 +25,13 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/button": "^20.2.0",
-		"@atlaskit/editor-common": "^91.1.0",
+		"@atlaskit/editor-common": "^91.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
-		"@atlaskit/editor-plugin-media": "^1.33.0",
+		"@atlaskit/editor-plugin-media": "^1.34.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/form": "^10.5.3",
-		"@atlaskit/icon": "^22.18.0",
+		"@atlaskit/icon": "^22.19.0",
 		"@atlaskit/media-card": "^78.5.0",
 		"@atlaskit/media-client": "^28.0.0",
 		"@atlaskit/media-client-react": "^2.2.0",
@@ -47,7 +47,7 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/tokens": "^1.60.0"
+		"@atlaskit/tokens": "^2.0.0"
 	},
 	"devDependencies": {
 		"typescript": "~5.4.2"