@atlaskit/editor-plugin-media-insert 1.3.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 2.0.1
+
+### Patch Changes
+
+- [#130061](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130061)
+  [`bdad694cb2c24`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bdad694cb2c24) -
+  [ux] [ED-24566] **@atlaskit/editor-plugin-media-insert**: When user clicks "Cancel" button on
+  insert media popup the focus is returned to the editor **@atlaskit/editor-common**: Added event
+  type for media insert cancelled analytics
+
+## 2.0.0
+
+### Major Changes
+
+- [#129869](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129869)
+  [`48b31a6b8fb5a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/48b31a6b8fb5a) -
+  [ux] [ED-24566] Integrated Media URL UI into the Insert Media Popup [ED-24589] Removed export of
+  UI component from `editor-plugin-media-insert`
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/cjs/index.js

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

package/dist/cjs/ui/FromURL.js

@@ -13,6 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
 var _mediaClientReact = require("@atlaskit/media-client-react");
@@ -36,6 +37,9 @@ var PreviewImageStyles = (0, _primitives.xcss)({
 var ButtonGroupStyles = (0, _primitives.xcss)({
   alignSelf: 'end'
 });
+var FormStyles = (0, _primitives.xcss)({
+  flexGrow: 1
+});
 var INITIAL_PREVIEW_STATE = Object.freeze({
   isLoading: false,
   error: null,
@@ -77,7 +81,8 @@ function MediaFromURL(_ref) {
   var mediaProvider = _ref.mediaProvider,
     onInsert = _ref.onInsert,
     onExternalInsert = _ref.onExternalInsert,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    closeMediaInsertPicker = _ref.closeMediaInsertPicker;
   var intl = (0, _reactIntlNext.useIntl)();
   var strings = {
     loadPreview: intl.formatMessage(_messages.mediaInsertMessages.loadPreview),
@@ -102,32 +107,27 @@ function MediaFromURL(_ref) {
     onUploadFailureAnalytics = _useAnalyticsEvents.onUploadFailureAnalytics;
   var uploadExternalMedia = _react.default.useCallback( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(url) {
-      var _yield$mediaProvider, uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, message;
+      var uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, message;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             dispatch({
               type: 'loading'
             });
-            _context.next = 3;
-            return mediaProvider;
-          case 3:
-            _yield$mediaProvider = _context.sent;
-            uploadMediaClientConfig = _yield$mediaProvider.uploadMediaClientConfig;
-            uploadParams = _yield$mediaProvider.uploadParams;
+            uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig, uploadParams = mediaProvider.uploadParams;
             if (uploadMediaClientConfig) {
-              _context.next = 8;
+              _context.next = 4;
               break;
             }
             return _context.abrupt("return");
-          case 8:
+          case 4:
             mediaClient = (0, _mediaClientReact.getMediaClient)(uploadMediaClientConfig);
             collection = uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.collection;
             onUploadAnalytics();
-            _context.prev = 11;
-            _context.next = 14;
+            _context.prev = 7;
+            _context.next = 10;
             return mediaClient.file.uploadExternal(url, collection);
-          case 14:
+          case 10:
             _yield$mediaClient$fi = _context.sent;
             uploadableFileUpfrontIds = _yield$mediaClient$fi.uploadableFileUpfrontIds;
             dimensions = _yield$mediaClient$fi.dimensions;
@@ -142,11 +142,11 @@ function MediaFromURL(_ref) {
                 occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
               }
             });
-            _context.next = 24;
+            _context.next = 20;
             break;
-          case 21:
-            _context.prev = 21;
-            _context.t0 = _context["catch"](11);
+          case 17:
+            _context.prev = 17;
+            _context.t0 = _context["catch"](7);
             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
@@ -171,11 +171,11 @@ function MediaFromURL(_ref) {
                 error: 'Unknown error'
               });
             }
-          case 24:
+          case 20:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[11, 21]]);
+      }, _callee, null, [[7, 17]]);
     }));
     return function (_x) {
       return _ref2.apply(this, arguments);
@@ -211,18 +211,51 @@ function MediaFromURL(_ref) {
       return onExternalInsert(inputUrl);
     }
   }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, inputUrl]);
-  return /*#__PURE__*/_react.default.createElement("form", {
+  var onInputKeyPress = _react.default.useCallback(function (event) {
+    if (event && event.key === 'Esc') {
+      if (dispatchAnalyticsEvent) {
+        var payload = {
+          action: _analytics.ACTION.CLOSED,
+          actionSubject: _analytics.ACTION_SUBJECT.PICKER,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_MEDIA,
+          eventType: _analytics.EVENT_TYPE.UI,
+          attributes: {
+            exitMethod: _analytics.INPUT_METHOD.KEYBOARD
+          }
+        };
+        dispatchAnalyticsEvent(payload);
+      }
+      closeMediaInsertPicker();
+    }
+  }, [dispatchAnalyticsEvent, closeMediaInsertPicker]);
+  var onCancel = _react.default.useCallback(function () {
+    if (dispatchAnalyticsEvent) {
+      var payload = {
+        action: _analytics.ACTION.CANCELLED,
+        actionSubject: _analytics.ACTION_SUBJECT.PICKER,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_MEDIA,
+        eventType: _analytics.EVENT_TYPE.UI
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, dispatchAnalyticsEvent]);
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    as: "form",
     onSubmit: function onSubmit(e) {
       e.preventDefault();
       uploadExternalMedia(inputUrl);
-    }
+    },
+    xcss: FormStyles
   }, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
-    space: "space.150"
+    space: "space.150",
+    grow: "fill"
   }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
     autoFocus: true,
     value: inputUrl,
     placeholder: strings.pasteLinkToUpload,
     onChange: onURLChange,
+    onKeyPress: onInputKeyPress,
     onPaste: onPaste
   }), previewState.previewInfo && /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     alignInline: "center",
@@ -248,7 +281,8 @@ function MediaFromURL(_ref) {
   }, 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"
+    appearance: "subtle",
+    onClick: onCancel
   }, strings.cancel), /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "primary",
     isDisabled: !previewState.previewInfo && !previewState.warning,

package/dist/cjs/ui/MediaCard.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MediaCard = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
@@ -16,16 +15,9 @@ var maxDimensions = {
 };
 var MediaCard = exports.MediaCard = function MediaCard(_ref) {
   var attrs = _ref.attrs,
-    mediaProviderPromise = _ref.mediaProvider;
+    mediaProvider = _ref.mediaProvider;
   var intl = (0, _reactIntlNext.useIntl)();
   var mediaAlt = intl.formatMessage(_messages.mediaInsertMessages.mediaAlt);
-  var _React$useState = _react.default.useState(),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    mediaProvider = _React$useState2[0],
-    setMediaProvider = _React$useState2[1];
-  _react.default.useEffect(function () {
-    mediaProviderPromise.then(setMediaProvider);
-  }, [mediaProviderPromise]);
   var dimensions = _react.default.useMemo(function () {
     return {
       width: attrs.width,

package/dist/cjs/ui/MediaInsertContent.js

@@ -7,18 +7,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MediaInsertContent = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _primitives = require("@atlaskit/primitives");
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
+var _FromURL = require("./FromURL");
 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() {
+var MediaInsertContent = exports.MediaInsertContent = function MediaInsertContent(_ref) {
+  var mediaProvider = _ref.mediaProvider,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    closeMediaInsertPicker = _ref.closeMediaInsertPicker;
   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, /*#__PURE__*/_react.default.createElement(_new.default, {
-    autoFocus: true,
-    appearance: "subtle"
-  }, "Link")))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement("p", null, "InsertLinkPanel here")));
+  }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, "Link"))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_FromURL.MediaFromURL, {
+    mediaProvider: mediaProvider,
+    onExternalInsert: function onExternalInsert() {},
+    onInsert: function onInsert() {},
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    closeMediaInsertPicker: closeMediaInsertPicker
+  })));
 };

package/dist/cjs/ui/MediaInsertPicker.js

@@ -38,6 +38,7 @@ var getDomRefFromSelection = function getDomRefFromSelection(view, dispatchAnaly
   }
 };
 var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_ref) {
+  var _useSharedPluginState, _useSharedPluginState2;
   var api = _ref.api,
     editorView = _ref.editorView,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
@@ -46,9 +47,9 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     popupsScrollableElement = _ref.popupsScrollableElement,
     closeMediaInsertPicker = _ref.closeMediaInsertPicker;
   var targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['mediaInsert']),
-    mediaInsertState = _useSharedPluginState.mediaInsertState;
-  if (!mediaInsertState || !mediaInsertState.isOpen) {
+  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;
+  if (!isOpen || !mediaProvider) {
     return null;
   }
   var handleClose = function handleClose(exitMethod) {
@@ -76,11 +77,18 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     offset: [0, 12],
     target: targetRef,
     zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
+    fitHeight: 390,
+    fitWidth: 340,
     mountTo: popupsMountPoint,
     boundariesElement: popupsBoundariesElement,
     handleClickOutside: handleClose(_analytics.INPUT_METHOD.MOUSE),
     handleEscapeKeydown: handleClose(_analytics.INPUT_METHOD.KEYBOARD),
     scrollableElement: popupsScrollableElement,
+    preventOverflow: true,
     focusTrap: true
-  }, /*#__PURE__*/_react.default.createElement(_MediaInsertWrapper.MediaInsertWrapper, null, /*#__PURE__*/_react.default.createElement(_MediaInsertContent.MediaInsertContent, null)));
+  }, /*#__PURE__*/_react.default.createElement(_MediaInsertWrapper.MediaInsertWrapper, null, /*#__PURE__*/_react.default.createElement(_MediaInsertContent.MediaInsertContent, {
+    mediaProvider: mediaProvider,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    closeMediaInsertPicker: closeMediaInsertPicker
+  })));
 };

package/dist/es2019/index.js

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

package/dist/es2019/ui/FromURL.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 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 { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { getMediaClient } from '@atlaskit/media-client-react';
@@ -23,6 +24,9 @@ const PreviewImageStyles = xcss({
 const ButtonGroupStyles = xcss({
   alignSelf: 'end'
 });
+const FormStyles = xcss({
+  flexGrow: 1
+});
 const INITIAL_PREVIEW_STATE = Object.freeze({
   isLoading: false,
   error: null,
@@ -68,7 +72,8 @@ export function MediaFromURL({
   mediaProvider,
   onInsert,
   onExternalInsert,
-  dispatchAnalyticsEvent
+  dispatchAnalyticsEvent,
+  closeMediaInsertPicker
 }) {
   const intl = useIntl();
   const strings = {
@@ -94,7 +99,7 @@ export function MediaFromURL({
     const {
       uploadMediaClientConfig,
       uploadParams
-    } = await mediaProvider;
+    } = mediaProvider;
     if (!uploadMediaClientConfig) {
       return;
     }
@@ -174,18 +179,51 @@ export function MediaFromURL({
       return onExternalInsert(inputUrl);
     }
   }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, inputUrl]);
-  return /*#__PURE__*/React.createElement("form", {
+  const onInputKeyPress = React.useCallback(event => {
+    if (event && event.key === 'Esc') {
+      if (dispatchAnalyticsEvent) {
+        const payload = {
+          action: ACTION.CLOSED,
+          actionSubject: ACTION_SUBJECT.PICKER,
+          actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
+          eventType: EVENT_TYPE.UI,
+          attributes: {
+            exitMethod: INPUT_METHOD.KEYBOARD
+          }
+        };
+        dispatchAnalyticsEvent(payload);
+      }
+      closeMediaInsertPicker();
+    }
+  }, [dispatchAnalyticsEvent, closeMediaInsertPicker]);
+  const onCancel = React.useCallback(() => {
+    if (dispatchAnalyticsEvent) {
+      const payload = {
+        action: ACTION.CANCELLED,
+        actionSubject: ACTION_SUBJECT.PICKER,
+        actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
+        eventType: EVENT_TYPE.UI
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, dispatchAnalyticsEvent]);
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "form",
     onSubmit: e => {
       e.preventDefault();
       uploadExternalMedia(inputUrl);
-    }
+    },
+    xcss: FormStyles
   }, /*#__PURE__*/React.createElement(Stack, {
-    space: "space.150"
+    space: "space.150",
+    grow: "fill"
   }, /*#__PURE__*/React.createElement(TextField, {
     autoFocus: true,
     value: inputUrl,
     placeholder: strings.pasteLinkToUpload,
     onChange: onURLChange,
+    onKeyPress: onInputKeyPress,
     onPaste: onPaste
   }), previewState.previewInfo && /*#__PURE__*/React.createElement(Inline, {
     alignInline: "center",
@@ -211,7 +249,8 @@ export function MediaFromURL({
   }, strings.loadPreview)), /*#__PURE__*/React.createElement(Box, {
     xcss: ButtonGroupStyles
   }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
-    appearance: "subtle"
+    appearance: "subtle",
+    onClick: onCancel
   }, strings.cancel), /*#__PURE__*/React.createElement(Button, {
     appearance: "primary",
     isDisabled: !previewState.previewInfo && !previewState.warning,

package/dist/es2019/ui/MediaCard.js

@@ -8,14 +8,10 @@ const maxDimensions = {
 };
 export const MediaCard = ({
   attrs,
-  mediaProvider: mediaProviderPromise
+  mediaProvider
 }) => {
   const intl = useIntl();
   const mediaAlt = intl.formatMessage(mediaInsertMessages.mediaAlt);
-  const [mediaProvider, setMediaProvider] = React.useState();
-  React.useEffect(() => {
-    mediaProviderPromise.then(setMediaProvider);
-  }, [mediaProviderPromise]);
   const dimensions = React.useMemo(() => {
     return {
       width: attrs.width,

package/dist/es2019/ui/MediaInsertContent.js

@@ -1,14 +1,21 @@
 import React from 'react';
-import Button from '@atlaskit/button/new';
 import { Box } from '@atlaskit/primitives';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
-export const MediaInsertContent = () => {
+import { MediaFromURL } from './FromURL';
+export const MediaInsertContent = ({
+  mediaProvider,
+  dispatchAnalyticsEvent,
+  closeMediaInsertPicker
+}) => {
   return /*#__PURE__*/React.createElement(Tabs, {
     id: "media-insert-tab-navigation"
   }, /*#__PURE__*/React.createElement(Box, {
     paddingBlockEnd: "space.150"
-  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement(Button, {
-    autoFocus: true,
-    appearance: "subtle"
-  }, "Link")))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement("p", null, "InsertLinkPanel here")));
+  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, "Link"))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
+    mediaProvider: mediaProvider,
+    onExternalInsert: () => {},
+    onInsert: () => {},
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    closeMediaInsertPicker: closeMediaInsertPicker
+  })));
 };

package/dist/es2019/ui/MediaInsertPicker.js

@@ -39,11 +39,11 @@ export const MediaInsertPicker = ({
   popupsScrollableElement,
   closeMediaInsertPicker
 }) => {
+  var _useSharedPluginState, _useSharedPluginState2, _useSharedPluginState3, _useSharedPluginState4;
   const targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
-  const {
-    mediaInsertState
-  } = useSharedPluginState(api, ['mediaInsert']);
-  if (!mediaInsertState || !mediaInsertState.isOpen) {
+  const isOpen = (_useSharedPluginState = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 ? void 0 : (_useSharedPluginState2 = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.isOpen;
+  const mediaProvider = (_useSharedPluginState3 = useSharedPluginState(api, ['media'])) === null || _useSharedPluginState3 === void 0 ? void 0 : (_useSharedPluginState4 = _useSharedPluginState3.mediaState) === null || _useSharedPluginState4 === void 0 ? void 0 : _useSharedPluginState4.mediaProvider;
+  if (!isOpen || !mediaProvider) {
     return null;
   }
   const handleClose = exitMethod => event => {
@@ -69,11 +69,18 @@ export const MediaInsertPicker = ({
     offset: [0, 12],
     target: targetRef,
     zIndex: akEditorFloatingDialogZIndex,
+    fitHeight: 390,
+    fitWidth: 340,
     mountTo: popupsMountPoint,
     boundariesElement: popupsBoundariesElement,
     handleClickOutside: handleClose(INPUT_METHOD.MOUSE),
     handleEscapeKeydown: handleClose(INPUT_METHOD.KEYBOARD),
     scrollableElement: popupsScrollableElement,
+    preventOverflow: true,
     focusTrap: true
-  }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__PURE__*/React.createElement(MediaInsertContent, null)));
+  }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__PURE__*/React.createElement(MediaInsertContent, {
+    mediaProvider: mediaProvider,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    closeMediaInsertPicker: closeMediaInsertPicker
+  })));
 };

package/dist/esm/index.js

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

package/dist/esm/ui/FromURL.js

@@ -8,6 +8,7 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 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 { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { getMediaClient } from '@atlaskit/media-client-react';
@@ -29,6 +30,9 @@ var PreviewImageStyles = xcss({
 var ButtonGroupStyles = xcss({
   alignSelf: 'end'
 });
+var FormStyles = xcss({
+  flexGrow: 1
+});
 var INITIAL_PREVIEW_STATE = Object.freeze({
   isLoading: false,
   error: null,
@@ -70,7 +74,8 @@ export function MediaFromURL(_ref) {
   var mediaProvider = _ref.mediaProvider,
     onInsert = _ref.onInsert,
     onExternalInsert = _ref.onExternalInsert,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    closeMediaInsertPicker = _ref.closeMediaInsertPicker;
   var intl = useIntl();
   var strings = {
     loadPreview: intl.formatMessage(mediaInsertMessages.loadPreview),
@@ -95,32 +100,27 @@ export function MediaFromURL(_ref) {
     onUploadFailureAnalytics = _useAnalyticsEvents.onUploadFailureAnalytics;
   var uploadExternalMedia = React.useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {
-      var _yield$mediaProvider, uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, message;
+      var uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, message;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             dispatch({
               type: 'loading'
             });
-            _context.next = 3;
-            return mediaProvider;
-          case 3:
-            _yield$mediaProvider = _context.sent;
-            uploadMediaClientConfig = _yield$mediaProvider.uploadMediaClientConfig;
-            uploadParams = _yield$mediaProvider.uploadParams;
+            uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig, uploadParams = mediaProvider.uploadParams;
             if (uploadMediaClientConfig) {
-              _context.next = 8;
+              _context.next = 4;
               break;
             }
             return _context.abrupt("return");
-          case 8:
+          case 4:
             mediaClient = getMediaClient(uploadMediaClientConfig);
             collection = uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.collection;
             onUploadAnalytics();
-            _context.prev = 11;
-            _context.next = 14;
+            _context.prev = 7;
+            _context.next = 10;
             return mediaClient.file.uploadExternal(url, collection);
-          case 14:
+          case 10:
             _yield$mediaClient$fi = _context.sent;
             uploadableFileUpfrontIds = _yield$mediaClient$fi.uploadableFileUpfrontIds;
             dimensions = _yield$mediaClient$fi.dimensions;
@@ -135,11 +135,11 @@ export function MediaFromURL(_ref) {
                 occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
               }
             });
-            _context.next = 24;
+            _context.next = 20;
             break;
-          case 21:
-            _context.prev = 21;
-            _context.t0 = _context["catch"](11);
+          case 17:
+            _context.prev = 17;
+            _context.t0 = _context["catch"](7);
             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
@@ -164,11 +164,11 @@ export function MediaFromURL(_ref) {
                 error: 'Unknown error'
               });
             }
-          case 24:
+          case 20:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[11, 21]]);
+      }, _callee, null, [[7, 17]]);
     }));
     return function (_x) {
       return _ref2.apply(this, arguments);
@@ -204,18 +204,51 @@ export function MediaFromURL(_ref) {
       return onExternalInsert(inputUrl);
     }
   }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, inputUrl]);
-  return /*#__PURE__*/React.createElement("form", {
+  var onInputKeyPress = React.useCallback(function (event) {
+    if (event && event.key === 'Esc') {
+      if (dispatchAnalyticsEvent) {
+        var payload = {
+          action: ACTION.CLOSED,
+          actionSubject: ACTION_SUBJECT.PICKER,
+          actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
+          eventType: EVENT_TYPE.UI,
+          attributes: {
+            exitMethod: INPUT_METHOD.KEYBOARD
+          }
+        };
+        dispatchAnalyticsEvent(payload);
+      }
+      closeMediaInsertPicker();
+    }
+  }, [dispatchAnalyticsEvent, closeMediaInsertPicker]);
+  var onCancel = React.useCallback(function () {
+    if (dispatchAnalyticsEvent) {
+      var payload = {
+        action: ACTION.CANCELLED,
+        actionSubject: ACTION_SUBJECT.PICKER,
+        actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
+        eventType: EVENT_TYPE.UI
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, dispatchAnalyticsEvent]);
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "form",
     onSubmit: function onSubmit(e) {
       e.preventDefault();
       uploadExternalMedia(inputUrl);
-    }
+    },
+    xcss: FormStyles
   }, /*#__PURE__*/React.createElement(Stack, {
-    space: "space.150"
+    space: "space.150",
+    grow: "fill"
   }, /*#__PURE__*/React.createElement(TextField, {
     autoFocus: true,
     value: inputUrl,
     placeholder: strings.pasteLinkToUpload,
     onChange: onURLChange,
+    onKeyPress: onInputKeyPress,
     onPaste: onPaste
   }), previewState.previewInfo && /*#__PURE__*/React.createElement(Inline, {
     alignInline: "center",
@@ -241,7 +274,8 @@ export function MediaFromURL(_ref) {
   }, strings.loadPreview)), /*#__PURE__*/React.createElement(Box, {
     xcss: ButtonGroupStyles
   }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
-    appearance: "subtle"
+    appearance: "subtle",
+    onClick: onCancel
   }, strings.cancel), /*#__PURE__*/React.createElement(Button, {
     appearance: "primary",
     isDisabled: !previewState.previewInfo && !previewState.warning,

package/dist/esm/ui/MediaCard.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
@@ -9,16 +8,9 @@ var maxDimensions = {
 };
 export var MediaCard = function MediaCard(_ref) {
   var attrs = _ref.attrs,
-    mediaProviderPromise = _ref.mediaProvider;
+    mediaProvider = _ref.mediaProvider;
   var intl = useIntl();
   var mediaAlt = intl.formatMessage(mediaInsertMessages.mediaAlt);
-  var _React$useState = React.useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    mediaProvider = _React$useState2[0],
-    setMediaProvider = _React$useState2[1];
-  React.useEffect(function () {
-    mediaProviderPromise.then(setMediaProvider);
-  }, [mediaProviderPromise]);
   var dimensions = React.useMemo(function () {
     return {
       width: attrs.width,

package/dist/esm/ui/MediaInsertContent.js

@@ -1,14 +1,20 @@
 import React from 'react';
-import Button from '@atlaskit/button/new';
 import { Box } from '@atlaskit/primitives';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
-export var MediaInsertContent = function MediaInsertContent() {
+import { MediaFromURL } from './FromURL';
+export var MediaInsertContent = function MediaInsertContent(_ref) {
+  var mediaProvider = _ref.mediaProvider,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    closeMediaInsertPicker = _ref.closeMediaInsertPicker;
   return /*#__PURE__*/React.createElement(Tabs, {
     id: "media-insert-tab-navigation"
   }, /*#__PURE__*/React.createElement(Box, {
     paddingBlockEnd: "space.150"
-  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement(Button, {
-    autoFocus: true,
-    appearance: "subtle"
-  }, "Link")))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement("p", null, "InsertLinkPanel here")));
+  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, "Link"))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
+    mediaProvider: mediaProvider,
+    onExternalInsert: function onExternalInsert() {},
+    onInsert: function onInsert() {},
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    closeMediaInsertPicker: closeMediaInsertPicker
+  })));
 };

package/dist/esm/ui/MediaInsertPicker.js

@@ -31,6 +31,7 @@ var getDomRefFromSelection = function getDomRefFromSelection(view, dispatchAnaly
   }
 };
 export var MediaInsertPicker = function MediaInsertPicker(_ref) {
+  var _useSharedPluginState, _useSharedPluginState2;
   var api = _ref.api,
     editorView = _ref.editorView,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
@@ -39,9 +40,9 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
     popupsScrollableElement = _ref.popupsScrollableElement,
     closeMediaInsertPicker = _ref.closeMediaInsertPicker;
   var targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
-  var _useSharedPluginState = useSharedPluginState(api, ['mediaInsert']),
-    mediaInsertState = _useSharedPluginState.mediaInsertState;
-  if (!mediaInsertState || !mediaInsertState.isOpen) {
+  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;
+  if (!isOpen || !mediaProvider) {
     return null;
   }
   var handleClose = function handleClose(exitMethod) {
@@ -69,11 +70,18 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
     offset: [0, 12],
     target: targetRef,
     zIndex: akEditorFloatingDialogZIndex,
+    fitHeight: 390,
+    fitWidth: 340,
     mountTo: popupsMountPoint,
     boundariesElement: popupsBoundariesElement,
     handleClickOutside: handleClose(INPUT_METHOD.MOUSE),
     handleEscapeKeydown: handleClose(INPUT_METHOD.KEYBOARD),
     scrollableElement: popupsScrollableElement,
+    preventOverflow: true,
     focusTrap: true
-  }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__PURE__*/React.createElement(MediaInsertContent, null)));
+  }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__PURE__*/React.createElement(MediaInsertContent, {
+    mediaProvider: mediaProvider,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    closeMediaInsertPicker: closeMediaInsertPicker
+  })));
 };

package/dist/types/index.d.ts

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

package/dist/types/types.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -1,16 +1,20 @@
+import type { Providers } from '@atlaskit/editor-common/provider-factory';
 import type { NextEditorPlugin, OptionalPlugin, UiComponentFactoryParams } from '@atlaskit/editor-common/types';
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { MediaPlugin } from '@atlaskit/editor-plugin-media';
 export type MediaInsertPluginState = {
     isOpen?: boolean;
 };
 export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
     dependencies: [
-        OptionalPlugin<AnalyticsPlugin>
+        OptionalPlugin<AnalyticsPlugin>,
+        MediaPlugin
     ];
     sharedState: MediaInsertPluginState;
 }>;
 export type MediaInsertPickerProps = Pick<UiComponentFactoryParams, 'editorView' | 'dispatchAnalyticsEvent' | 'popupsMountPoint' | 'popupsBoundariesElement' | 'popupsScrollableElement'> & {
     api?: ExtractInjectionAPI<MediaInsertPlugin>;
     closeMediaInsertPicker: () => void;
+    mediaProvider?: Providers['mediaProvider'];
 };

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media-insert",
-	"version": "1.3.0",
+	"version": "2.0.1",
 	"description": "Media Insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -24,12 +24,13 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/button": "^19.2.0",
-		"@atlaskit/editor-common": "^87.9.0",
+		"@atlaskit/button": "^20.0.0",
+		"@atlaskit/editor-common": "^87.10.0",
 		"@atlaskit/editor-plugin-analytics": "^1.7.0",
+		"@atlaskit/editor-plugin-media": "^1.28.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
-		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/icon": "^22.13.0",
 		"@atlaskit/media-card": "^78.0.0",
 		"@atlaskit/media-client": "^27.3.0",
 		"@atlaskit/media-client-react": "^2.0.0",