@atlaskit/editor-plugin-media-insert 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 2.1.0
+
+### Minor Changes
+
+- [#129457](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129457)
+  [`171c73d4033f0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/171c73d4033f0) -
+  [ux] [ED-24566]
+
+  - Internationalisation strings in editor-common for editor-plugin-media-insert
+  - Removed default pre-filled URL for editor-plugin-media-insert popup
+  - Added background color for editor-plugin-media-insert popup
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

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");
@@ -69,19 +70,12 @@ var previewStateReducer = function previewStateReducer(state, action) {
       return state;
   }
 };
-// TODO: Delete these before rollout
-var placeholders = ['https://picsum.photos/200/300',
-// has cors
-'https://placedog.net/500/280',
-// has cors
-'https://preview.redd.it/gabriel-medina-at-the-olympics-after-riding-a-nearly-v0-dbyczz2fkifd1.jpeg?auto=webp&s=045550d672718427b67fb929bc6efc57116a7596' // no cors
-];
 function MediaFromURL(_ref) {
   var mediaProvider = _ref.mediaProvider,
     onInsert = _ref.onInsert,
     onExternalInsert = _ref.onExternalInsert,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    onEscKeyPressed = _ref.onEscKeyPressed;
+    closeMediaInsertPicker = _ref.closeMediaInsertPicker;
   var intl = (0, _reactIntlNext.useIntl)();
   var strings = {
     loadPreview: intl.formatMessage(_messages.mediaInsertMessages.loadPreview),
@@ -91,7 +85,7 @@ function MediaFromURL(_ref) {
     errorMessage: intl.formatMessage(_messages.mediaInsertMessages.errorMessage),
     warning: intl.formatMessage(_messages.mediaInsertMessages.warning)
   };
-  var _React$useState = _react.default.useState(placeholders[1]),
+  var _React$useState = _react.default.useState(''),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     inputUrl = _React$useState2[0],
     setUrl = _React$useState2[1];
@@ -212,9 +206,33 @@ function MediaFromURL(_ref) {
   }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, inputUrl]);
   var onInputKeyPress = _react.default.useCallback(function (event) {
     if (event && event.key === 'Esc') {
-      onEscKeyPressed();
+      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();
     }
-  }, [onEscKeyPressed]);
+  }, [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) {
@@ -251,12 +269,13 @@ function MediaFromURL(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_new.default, {
     type: "submit",
     isLoading: previewState.isLoading,
-    isDisabled: !inputUrl,
+    isDisabled: inputUrl.length === 0,
     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"
+    appearance: "subtle",
+    onClick: onCancel
   }, strings.cancel), /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "primary",
     isDisabled: !previewState.previewInfo && !previewState.warning,

package/dist/cjs/ui/MediaInsertContent.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MediaInsertContent = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
 var _primitives = require("@atlaskit/primitives");
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
 var _FromURL = require("./FromURL");
@@ -15,16 +17,17 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var MediaInsertContent = exports.MediaInsertContent = function MediaInsertContent(_ref) {
   var mediaProvider = _ref.mediaProvider,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    onEscKeyPressed = _ref.onEscKeyPressed;
+    closeMediaInsertPicker = _ref.closeMediaInsertPicker;
+  var intl = (0, _reactIntlNext.useIntl)();
   return /*#__PURE__*/_react.default.createElement(_tabs.default, {
     id: "media-insert-tab-navigation"
   }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     paddingBlockEnd: "space.150"
-  }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, "Link"))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_FromURL.MediaFromURL, {
+  }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_FromURL.MediaFromURL, {
     mediaProvider: mediaProvider,
     onExternalInsert: function onExternalInsert() {},
     onInsert: function onInsert() {},
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    onEscKeyPressed: onEscKeyPressed
+    closeMediaInsertPicker: closeMediaInsertPicker
   })));
 };

package/dist/cjs/ui/MediaInsertPicker.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MediaInsertPicker = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -49,6 +51,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
   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 intl = (0, _reactIntlNext.useIntl)();
   if (!isOpen || !mediaProvider) {
     return null;
   }
@@ -70,10 +73,8 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
       closeMediaInsertPicker();
     };
   };
-  return /*#__PURE__*/_react.default.createElement(PopupWithListeners
-  // TODO: i18n
-  , {
-    ariaLabel: 'Media Insert',
+  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
+    ariaLabel: intl.formatMessage(_messages.mediaInsertMessages.mediaPickerPopupAriaLabel),
     offset: [0, 12],
     target: targetRef,
     zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
@@ -89,8 +90,6 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
   }, /*#__PURE__*/_react.default.createElement(_MediaInsertWrapper.MediaInsertWrapper, null, /*#__PURE__*/_react.default.createElement(_MediaInsertContent.MediaInsertContent, {
     mediaProvider: mediaProvider,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    onEscKeyPressed: function onEscKeyPressed() {
-      return handleClose(_analytics.INPUT_METHOD.KEYBOARD);
-    }
+    closeMediaInsertPicker: closeMediaInsertPicker
   })));
 };

package/dist/cjs/ui/MediaInsertWrapper.js

@@ -11,7 +11,8 @@ var styles = (0, _primitives.xcss)({
   boxShadow: 'elevation.shadow.overflow',
   width: '340px',
   padding: 'space.200',
-  borderRadius: 'border.radius'
+  borderRadius: 'border.radius',
+  backgroundColor: 'elevation.surface.overlay'
 });
 var MediaInsertWrapper = exports.MediaInsertWrapper = function MediaInsertWrapper(_ref) {
   var children = _ref.children;

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';
@@ -60,19 +61,12 @@ const previewStateReducer = (state, action) => {
       return state;
   }
 };
-// TODO: Delete these before rollout
-const placeholders = ['https://picsum.photos/200/300',
-// has cors
-'https://placedog.net/500/280',
-// has cors
-'https://preview.redd.it/gabriel-medina-at-the-olympics-after-riding-a-nearly-v0-dbyczz2fkifd1.jpeg?auto=webp&s=045550d672718427b67fb929bc6efc57116a7596' // no cors
-];
 export function MediaFromURL({
   mediaProvider,
   onInsert,
   onExternalInsert,
   dispatchAnalyticsEvent,
-  onEscKeyPressed
+  closeMediaInsertPicker
 }) {
   const intl = useIntl();
   const strings = {
@@ -83,7 +77,7 @@ export function MediaFromURL({
     errorMessage: intl.formatMessage(mediaInsertMessages.errorMessage),
     warning: intl.formatMessage(mediaInsertMessages.warning)
   };
-  const [inputUrl, setUrl] = React.useState(placeholders[1]);
+  const [inputUrl, setUrl] = React.useState('');
   const [previewState, dispatch] = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE);
   const pasteFlag = React.useRef(false);
   const {
@@ -180,9 +174,33 @@ export function MediaFromURL({
   }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, inputUrl]);
   const onInputKeyPress = React.useCallback(event => {
     if (event && event.key === 'Esc') {
-      onEscKeyPressed();
+      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);
     }
-  }, [onEscKeyPressed]);
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, dispatchAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(Box, {
     as: "form",
     onSubmit: e => {
@@ -219,12 +237,13 @@ export function MediaFromURL({
   }, /*#__PURE__*/React.createElement(Button, {
     type: "submit",
     isLoading: previewState.isLoading,
-    isDisabled: !inputUrl,
+    isDisabled: inputUrl.length === 0,
     iconBefore: EditorFilePreviewIcon
   }, 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/MediaInsertContent.js

@@ -1,21 +1,24 @@
 import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import { Box } from '@atlaskit/primitives';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
 import { MediaFromURL } from './FromURL';
 export const MediaInsertContent = ({
   mediaProvider,
   dispatchAnalyticsEvent,
-  onEscKeyPressed
+  closeMediaInsertPicker
 }) => {
+  const intl = useIntl();
   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, "Link"))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
+  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
     mediaProvider: mediaProvider,
     onExternalInsert: () => {},
     onInsert: () => {},
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    onEscKeyPressed: onEscKeyPressed
+    closeMediaInsertPicker: closeMediaInsertPicker
   })));
 };

package/dist/es2019/ui/MediaInsertPicker.js

@@ -1,6 +1,8 @@
 import React from 'react';
+import { useIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
@@ -43,6 +45,7 @@ export const MediaInsertPicker = ({
   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 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();
   if (!isOpen || !mediaProvider) {
     return null;
   }
@@ -62,10 +65,8 @@ export const MediaInsertPicker = ({
     }
     closeMediaInsertPicker();
   };
-  return /*#__PURE__*/React.createElement(PopupWithListeners
-  // TODO: i18n
-  , {
-    ariaLabel: 'Media Insert',
+  return /*#__PURE__*/React.createElement(PopupWithListeners, {
+    ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel),
     offset: [0, 12],
     target: targetRef,
     zIndex: akEditorFloatingDialogZIndex,
@@ -81,6 +82,6 @@ export const MediaInsertPicker = ({
   }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__PURE__*/React.createElement(MediaInsertContent, {
     mediaProvider: mediaProvider,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    onEscKeyPressed: () => handleClose(INPUT_METHOD.KEYBOARD)
+    closeMediaInsertPicker: closeMediaInsertPicker
   })));
 };

package/dist/es2019/ui/MediaInsertWrapper.js

@@ -4,7 +4,8 @@ const styles = xcss({
   boxShadow: 'elevation.shadow.overflow',
   width: '340px',
   padding: 'space.200',
-  borderRadius: 'border.radius'
+  borderRadius: 'border.radius',
+  backgroundColor: 'elevation.surface.overlay'
 });
 export const MediaInsertWrapper = ({
   children

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';
@@ -62,19 +63,12 @@ var previewStateReducer = function previewStateReducer(state, action) {
       return state;
   }
 };
-// TODO: Delete these before rollout
-var placeholders = ['https://picsum.photos/200/300',
-// has cors
-'https://placedog.net/500/280',
-// has cors
-'https://preview.redd.it/gabriel-medina-at-the-olympics-after-riding-a-nearly-v0-dbyczz2fkifd1.jpeg?auto=webp&s=045550d672718427b67fb929bc6efc57116a7596' // no cors
-];
 export function MediaFromURL(_ref) {
   var mediaProvider = _ref.mediaProvider,
     onInsert = _ref.onInsert,
     onExternalInsert = _ref.onExternalInsert,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    onEscKeyPressed = _ref.onEscKeyPressed;
+    closeMediaInsertPicker = _ref.closeMediaInsertPicker;
   var intl = useIntl();
   var strings = {
     loadPreview: intl.formatMessage(mediaInsertMessages.loadPreview),
@@ -84,7 +78,7 @@ export function MediaFromURL(_ref) {
     errorMessage: intl.formatMessage(mediaInsertMessages.errorMessage),
     warning: intl.formatMessage(mediaInsertMessages.warning)
   };
-  var _React$useState = React.useState(placeholders[1]),
+  var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     inputUrl = _React$useState2[0],
     setUrl = _React$useState2[1];
@@ -205,9 +199,33 @@ export function MediaFromURL(_ref) {
   }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, inputUrl]);
   var onInputKeyPress = React.useCallback(function (event) {
     if (event && event.key === 'Esc') {
-      onEscKeyPressed();
+      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();
     }
-  }, [onEscKeyPressed]);
+  }, [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) {
@@ -244,12 +262,13 @@ export function MediaFromURL(_ref) {
   }, /*#__PURE__*/React.createElement(Button, {
     type: "submit",
     isLoading: previewState.isLoading,
-    isDisabled: !inputUrl,
+    isDisabled: inputUrl.length === 0,
     iconBefore: EditorFilePreviewIcon
   }, 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/MediaInsertContent.js

@@ -1,20 +1,23 @@
 import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import { Box } from '@atlaskit/primitives';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
 import { MediaFromURL } from './FromURL';
 export var MediaInsertContent = function MediaInsertContent(_ref) {
   var mediaProvider = _ref.mediaProvider,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    onEscKeyPressed = _ref.onEscKeyPressed;
+    closeMediaInsertPicker = _ref.closeMediaInsertPicker;
+  var intl = useIntl();
   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, "Link"))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
+  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
     mediaProvider: mediaProvider,
     onExternalInsert: function onExternalInsert() {},
     onInsert: function onInsert() {},
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    onEscKeyPressed: onEscKeyPressed
+    closeMediaInsertPicker: closeMediaInsertPicker
   })));
 };

package/dist/esm/ui/MediaInsertPicker.js

@@ -1,6 +1,8 @@
 import React from 'react';
+import { useIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
@@ -42,6 +44,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
   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 intl = useIntl();
   if (!isOpen || !mediaProvider) {
     return null;
   }
@@ -63,10 +66,8 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
       closeMediaInsertPicker();
     };
   };
-  return /*#__PURE__*/React.createElement(PopupWithListeners
-  // TODO: i18n
-  , {
-    ariaLabel: 'Media Insert',
+  return /*#__PURE__*/React.createElement(PopupWithListeners, {
+    ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel),
     offset: [0, 12],
     target: targetRef,
     zIndex: akEditorFloatingDialogZIndex,
@@ -82,8 +83,6 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
   }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__PURE__*/React.createElement(MediaInsertContent, {
     mediaProvider: mediaProvider,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    onEscKeyPressed: function onEscKeyPressed() {
-      return handleClose(INPUT_METHOD.KEYBOARD);
-    }
+    closeMediaInsertPicker: closeMediaInsertPicker
   })));
 };

package/dist/esm/ui/MediaInsertWrapper.js

@@ -4,7 +4,8 @@ var styles = xcss({
   boxShadow: 'elevation.shadow.overflow',
   width: '340px',
   padding: 'space.200',
-  borderRadius: 'border.radius'
+  borderRadius: 'border.radius',
+  backgroundColor: 'elevation.surface.overlay'
 });
 export var MediaInsertWrapper = function MediaInsertWrapper(_ref) {
   var children = _ref.children;

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

@@ -1,5 +1,5 @@
 /// <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 = {
@@ -7,7 +7,7 @@ type Props = {
     onInsert: (attrs: OnInsertAttrs) => void;
     onExternalInsert: (url: string) => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
-    onEscKeyPressed: () => void;
+    closeMediaInsertPicker: () => void;
 };
-export declare function MediaFromURL({ mediaProvider, onInsert, onExternalInsert, dispatchAnalyticsEvent, onEscKeyPressed, }: Props): JSX.Element;
+export declare function MediaFromURL({ mediaProvider, onInsert, onExternalInsert, dispatchAnalyticsEvent, closeMediaInsertPicker, }: Props): JSX.Element;
 export {};

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

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

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

@@ -1,5 +1,5 @@
 /// <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 = {
@@ -7,7 +7,7 @@ type Props = {
     onInsert: (attrs: OnInsertAttrs) => void;
     onExternalInsert: (url: string) => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
-    onEscKeyPressed: () => void;
+    closeMediaInsertPicker: () => void;
 };
-export declare function MediaFromURL({ mediaProvider, onInsert, onExternalInsert, dispatchAnalyticsEvent, onEscKeyPressed, }: Props): JSX.Element;
+export declare function MediaFromURL({ mediaProvider, onInsert, onExternalInsert, dispatchAnalyticsEvent, closeMediaInsertPicker, }: Props): JSX.Element;
 export {};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media-insert",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"description": "Media Insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,15 +25,15 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.0.0",
-		"@atlaskit/editor-common": "^87.10.0",
+		"@atlaskit/editor-common": "^87.12.0",
 		"@atlaskit/editor-plugin-analytics": "^1.7.0",
-		"@atlaskit/editor-plugin-media": "^1.28.0",
+		"@atlaskit/editor-plugin-media": "^1.29.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.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",
+		"@atlaskit/media-client-react": "^2.1.0",
 		"@atlaskit/primitives": "^12.0.0",
 		"@atlaskit/section-message": "^6.6.0",
 		"@atlaskit/tabs": "^16.4.0",