@atlaskit/editor-plugin-media-insert 2.3.2 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 2.5.0
+
+### Minor Changes
+
+- [#138801](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138801)
+  [`f742cd24b83a1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f742cd24b83a1) -
+  [ux] [ED-24877] Improve keyboard UX for "from link" media uploads
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.4.0
+
+### Minor Changes
+
+- [#136903](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136903)
+  [`2a9928406d4d3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2a9928406d4d3) -
+  [ux] [ED-24756] **@atlaskit/editor-plugin-media-insert**: Added a hook to correctly focus on the
+  Upload button when user opens media insert (preventing scrolling to the top of the editor)
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.3.2
 
 ### Patch Changes

package/dist/cjs/hooks/use-unholy-autofocus.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUnholyAutofocus = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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; }
+/**
+ * Autofocuses the first interactive element in the first tab panel
+ * when the media picker is opened.
+ *
+ * This is to mitigate the issue where the PopupWithListeners component
+ * renders initially at the top of the editor and then repositioned.
+ *
+ * We want to autofocus after the repositioning to ensure we don't scroll
+ * to the top of the editor when the media picker is opened.
+ */
+var useUnholyAutofocus = exports.useUnholyAutofocus = function useUnholyAutofocus() {
+  var autofocusRef = _react.default.useRef(null);
+  var positionRef = _react.default.useRef(null);
+  var onPositionCalculated = _react.default.useCallback(function (position) {
+    if (positionRef.current === null) {
+      // Initial position is _always incorrect, so the first time this is set
+      // we're going to ignore it.
+      positionRef.current = position;
+    } else if (positionRef.current !== position) {
+      var _autofocusRef$current;
+      // If it isn't the first position and it has changed, we're likely in
+      // the actual position we want. We'll call focus and update the position.
+      (_autofocusRef$current = autofocusRef.current) === null || _autofocusRef$current === void 0 || _autofocusRef$current.focus();
+      positionRef.current = position;
+    }
+
+    // Important to return this as the popup uses the returned position
+    return position;
+  }, [autofocusRef]);
+
+  /**
+   * If we don't clear the ref, then reopening the media picker will
+   * not correctly focus the button.
+   *
+   * WARNING: If the component re-renders the ref will be cleared and
+   * the button will be focused again.
+   *
+   * This is a trade-off, we prefer that the button is correctly focused
+   * if the media picker is re-opened, rather than re-focusing the button
+   * if the component re-renders/ the browser window is resized.
+   *
+   * This is a temporary solution until we can find a better way to do it.
+   */
+  (0, _react.useEffect)(function () {
+    return function () {
+      positionRef.current = null;
+    };
+  });
+  return {
+    autofocusRef: autofocusRef,
+    onPositionCalculated: onPositionCalculated
+  };
+};

package/dist/cjs/ui/LocalMedia.js

@@ -47,7 +47,7 @@ var uploadReducer = function uploadReducer(state, action) {
 var isImagePreview = function isImagePreview(preview) {
   return 'dimensions' in preview;
 };
-var LocalMedia = exports.LocalMedia = function LocalMedia(_ref) {
+var LocalMedia = exports.LocalMedia = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var mediaProvider = _ref.mediaProvider,
     insertMediaSingle = _ref.insertMediaSingle,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
@@ -106,6 +106,7 @@ var LocalMedia = exports.LocalMedia = function LocalMedia(_ref) {
     appearance: "error"
   }, uploadState.error === 'upload_fail' ? strings.networkError : strings.genericError), /*#__PURE__*/_react.default.createElement(_new.default, {
     iconBefore: _upload.default,
+    ref: ref,
     shouldFitContainer: true,
     isDisabled: !uploadMediaClientConfig || !uploadParams,
     onClick: function onClick() {
@@ -113,8 +114,7 @@ var LocalMedia = exports.LocalMedia = function LocalMedia(_ref) {
       dispatch({
         type: 'open'
       });
-    },
-    autoFocus: true
+    }
   }, strings.upload), uploadMediaClientConfig && uploadParams && /*#__PURE__*/_react.default.createElement(_mediaPicker.Browser, {
     isOpen: uploadState.isOpen,
     config: {
@@ -142,4 +142,4 @@ var LocalMedia = exports.LocalMedia = function LocalMedia(_ref) {
       });
     }
   }));
-};
+});

package/dist/cjs/ui/MediaFromURL.js

@@ -260,14 +260,25 @@ function MediaFromURL(_ref) {
     as: "form",
     onSubmit: function onSubmit(e) {
       e.preventDefault();
-      uploadExternalMedia(inputUrl);
+      // This can be triggered from an enter key event on the input even when
+      // the button is disabled, so we explicitly do nothing when in loading
+      // state.
+      if (previewState.isLoading) {
+        return;
+      }
+      if (previewState.previewInfo) {
+        return onInsert();
+      }
+      if (previewState.warning) {
+        return onExternalInsert(inputUrl);
+      }
+      return uploadExternalMedia(inputUrl);
     },
     xcss: FormStyles
   }, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
     space: "space.150",
     grow: "fill"
   }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
-    autoFocus: true,
     value: inputUrl,
     placeholder: strings.pasteLinkToUpload,
     onChange: onURLChange,

package/dist/cjs/ui/MediaInsertPicker.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,9 +14,15 @@ 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");
+var _primitives = require("@atlaskit/primitives");
+var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
 var _useFocusEditor = require("../hooks/use-focus-editor");
-var _MediaInsertContent = require("./MediaInsertContent");
+var _useUnholyAutofocus2 = require("../hooks/use-unholy-autofocus");
+var _LocalMedia = require("./LocalMedia");
+var _MediaFromURL = require("./MediaFromURL");
 var _MediaInsertWrapper = require("./MediaInsertWrapper");
+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 PopupWithListeners = (0, _ui.withOuterListeners)(_ui.Popup);
 var getDomRefFromSelection = function getDomRefFromSelection(view, dispatchAnalyticsEvent) {
   try {
@@ -58,6 +65,9 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
   var focusEditor = (0, _useFocusEditor.useFocusEditor)({
     editorView: editorView
   });
+  var _useUnholyAutofocus = (0, _useUnholyAutofocus2.useUnholyAutofocus)(),
+    autofocusRef = _useUnholyAutofocus.autofocusRef,
+    onPositionCalculated = _useUnholyAutofocus.onPositionCalculated;
   if (!isOpen || !mediaProvider) {
     return null;
   }
@@ -93,8 +103,22 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     handleEscapeKeydown: handleClose(_analytics.INPUT_METHOD.KEYBOARD),
     scrollableElement: popupsScrollableElement,
     preventOverflow: true,
+    onPositionCalculated: onPositionCalculated,
     focusTrap: true
-  }, /*#__PURE__*/_react.default.createElement(_MediaInsertWrapper.MediaInsertWrapper, null, /*#__PURE__*/_react.default.createElement(_MediaInsertContent.MediaInsertContent, {
+  }, /*#__PURE__*/_react.default.createElement(_MediaInsertWrapper.MediaInsertWrapper, null, /*#__PURE__*/_react.default.createElement(_tabs.default, {
+    id: "media-insert-tab-navigation"
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    paddingBlockEnd: "space.150"
+  }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle)), /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
+    ref: autofocusRef,
+    mediaProvider: mediaProvider,
+    insertMediaSingle: insertMediaSingle,
+    closeMediaInsertPicker: function closeMediaInsertPicker() {
+      _closeMediaInsertPicker();
+      focusEditor();
+    },
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  })), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_MediaFromURL.MediaFromURL, {
     mediaProvider: mediaProvider,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     closeMediaInsertPicker: function closeMediaInsertPicker() {
@@ -103,5 +127,5 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     },
     insertMediaSingle: insertMediaSingle,
     insertExternalMediaSingle: insertExternalMediaSingle
-  })));
+  })))));
 };

package/dist/es2019/hooks/use-unholy-autofocus.js

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+/**
+ * Autofocuses the first interactive element in the first tab panel
+ * when the media picker is opened.
+ *
+ * This is to mitigate the issue where the PopupWithListeners component
+ * renders initially at the top of the editor and then repositioned.
+ *
+ * We want to autofocus after the repositioning to ensure we don't scroll
+ * to the top of the editor when the media picker is opened.
+ */
+export const useUnholyAutofocus = () => {
+  const autofocusRef = React.useRef(null);
+  const positionRef = React.useRef(null);
+  const onPositionCalculated = React.useCallback(position => {
+    if (positionRef.current === null) {
+      // Initial position is _always incorrect, so the first time this is set
+      // we're going to ignore it.
+      positionRef.current = position;
+    } else if (positionRef.current !== position) {
+      var _autofocusRef$current;
+      // If it isn't the first position and it has changed, we're likely in
+      // the actual position we want. We'll call focus and update the position.
+      (_autofocusRef$current = autofocusRef.current) === null || _autofocusRef$current === void 0 ? void 0 : _autofocusRef$current.focus();
+      positionRef.current = position;
+    }
+
+    // Important to return this as the popup uses the returned position
+    return position;
+  }, [autofocusRef]);
+
+  /**
+   * If we don't clear the ref, then reopening the media picker will
+   * not correctly focus the button.
+   *
+   * WARNING: If the component re-renders the ref will be cleared and
+   * the button will be focused again.
+   *
+   * This is a trade-off, we prefer that the button is correctly focused
+   * if the media picker is re-opened, rather than re-focusing the button
+   * if the component re-renders/ the browser window is resized.
+   *
+   * This is a temporary solution until we can find a better way to do it.
+   */
+  useEffect(() => {
+    return () => {
+      positionRef.current = null;
+    };
+  });
+  return {
+    autofocusRef,
+    onPositionCalculated
+  };
+};

package/dist/es2019/ui/LocalMedia.js

@@ -39,12 +39,12 @@ const uploadReducer = (state, action) => {
 const isImagePreview = preview => {
   return 'dimensions' in preview;
 };
-export const LocalMedia = ({
+export const LocalMedia = /*#__PURE__*/React.forwardRef(({
   mediaProvider,
   insertMediaSingle,
   dispatchAnalyticsEvent,
   closeMediaInsertPicker
-}) => {
+}, ref) => {
   const intl = useIntl();
   const strings = {
     upload: intl.formatMessage(mediaInsertMessages.upload),
@@ -100,6 +100,7 @@ export const LocalMedia = ({
     appearance: "error"
   }, uploadState.error === 'upload_fail' ? strings.networkError : strings.genericError), /*#__PURE__*/React.createElement(Button, {
     iconBefore: UploadIcon,
+    ref: ref,
     shouldFitContainer: true,
     isDisabled: !uploadMediaClientConfig || !uploadParams,
     onClick: () => {
@@ -107,8 +108,7 @@ export const LocalMedia = ({
       dispatch({
         type: 'open'
       });
-    },
-    autoFocus: true
+    }
   }, strings.upload), uploadMediaClientConfig && uploadParams && /*#__PURE__*/React.createElement(Browser, {
     isOpen: uploadState.isOpen,
     config: {
@@ -136,4 +136,4 @@ export const LocalMedia = ({
       });
     }
   }));
-};
+});

package/dist/es2019/ui/MediaFromURL.js

@@ -228,14 +228,25 @@ export function MediaFromURL({
     as: "form",
     onSubmit: e => {
       e.preventDefault();
-      uploadExternalMedia(inputUrl);
+      // This can be triggered from an enter key event on the input even when
+      // the button is disabled, so we explicitly do nothing when in loading
+      // state.
+      if (previewState.isLoading) {
+        return;
+      }
+      if (previewState.previewInfo) {
+        return onInsert();
+      }
+      if (previewState.warning) {
+        return onExternalInsert(inputUrl);
+      }
+      return uploadExternalMedia(inputUrl);
     },
     xcss: FormStyles
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "space.150",
     grow: "fill"
   }, /*#__PURE__*/React.createElement(TextField, {
-    autoFocus: true,
     value: inputUrl,
     placeholder: strings.pasteLinkToUpload,
     onChange: onURLChange,

package/dist/es2019/ui/MediaInsertPicker.js

@@ -6,8 +6,12 @@ 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';
+import { Box } from '@atlaskit/primitives';
+import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
 import { useFocusEditor } from '../hooks/use-focus-editor';
-import { MediaInsertContent } from './MediaInsertContent';
+import { useUnholyAutofocus } from '../hooks/use-unholy-autofocus';
+import { LocalMedia } from './LocalMedia';
+import { MediaFromURL } from './MediaFromURL';
 import { MediaInsertWrapper } from './MediaInsertWrapper';
 const PopupWithListeners = withOuterListeners(Popup);
 const getDomRefFromSelection = (view, dispatchAnalyticsEvent) => {
@@ -52,6 +56,10 @@ export const MediaInsertPicker = ({
   const focusEditor = useFocusEditor({
     editorView
   });
+  const {
+    autofocusRef,
+    onPositionCalculated
+  } = useUnholyAutofocus();
   if (!isOpen || !mediaProvider) {
     return null;
   }
@@ -85,8 +93,22 @@ export const MediaInsertPicker = ({
     handleEscapeKeydown: handleClose(INPUT_METHOD.KEYBOARD),
     scrollableElement: popupsScrollableElement,
     preventOverflow: true,
+    onPositionCalculated: onPositionCalculated,
     focusTrap: true
-  }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__PURE__*/React.createElement(MediaInsertContent, {
+  }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__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, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
+    ref: autofocusRef,
+    mediaProvider: mediaProvider,
+    insertMediaSingle: insertMediaSingle,
+    closeMediaInsertPicker: () => {
+      closeMediaInsertPicker();
+      focusEditor();
+    },
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
     mediaProvider: mediaProvider,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     closeMediaInsertPicker: () => {
@@ -95,5 +117,5 @@ export const MediaInsertPicker = ({
     },
     insertMediaSingle: insertMediaSingle,
     insertExternalMediaSingle: insertExternalMediaSingle
-  })));
+  })))));
 };

package/dist/esm/hooks/use-unholy-autofocus.js

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+/**
+ * Autofocuses the first interactive element in the first tab panel
+ * when the media picker is opened.
+ *
+ * This is to mitigate the issue where the PopupWithListeners component
+ * renders initially at the top of the editor and then repositioned.
+ *
+ * We want to autofocus after the repositioning to ensure we don't scroll
+ * to the top of the editor when the media picker is opened.
+ */
+export var useUnholyAutofocus = function useUnholyAutofocus() {
+  var autofocusRef = React.useRef(null);
+  var positionRef = React.useRef(null);
+  var onPositionCalculated = React.useCallback(function (position) {
+    if (positionRef.current === null) {
+      // Initial position is _always incorrect, so the first time this is set
+      // we're going to ignore it.
+      positionRef.current = position;
+    } else if (positionRef.current !== position) {
+      var _autofocusRef$current;
+      // If it isn't the first position and it has changed, we're likely in
+      // the actual position we want. We'll call focus and update the position.
+      (_autofocusRef$current = autofocusRef.current) === null || _autofocusRef$current === void 0 || _autofocusRef$current.focus();
+      positionRef.current = position;
+    }
+
+    // Important to return this as the popup uses the returned position
+    return position;
+  }, [autofocusRef]);
+
+  /**
+   * If we don't clear the ref, then reopening the media picker will
+   * not correctly focus the button.
+   *
+   * WARNING: If the component re-renders the ref will be cleared and
+   * the button will be focused again.
+   *
+   * This is a trade-off, we prefer that the button is correctly focused
+   * if the media picker is re-opened, rather than re-focusing the button
+   * if the component re-renders/ the browser window is resized.
+   *
+   * This is a temporary solution until we can find a better way to do it.
+   */
+  useEffect(function () {
+    return function () {
+      positionRef.current = null;
+    };
+  });
+  return {
+    autofocusRef: autofocusRef,
+    onPositionCalculated: onPositionCalculated
+  };
+};

package/dist/esm/ui/LocalMedia.js

@@ -40,7 +40,7 @@ var uploadReducer = function uploadReducer(state, action) {
 var isImagePreview = function isImagePreview(preview) {
   return 'dimensions' in preview;
 };
-export var LocalMedia = function LocalMedia(_ref) {
+export var LocalMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var mediaProvider = _ref.mediaProvider,
     insertMediaSingle = _ref.insertMediaSingle,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
@@ -99,6 +99,7 @@ export var LocalMedia = function LocalMedia(_ref) {
     appearance: "error"
   }, uploadState.error === 'upload_fail' ? strings.networkError : strings.genericError), /*#__PURE__*/React.createElement(Button, {
     iconBefore: UploadIcon,
+    ref: ref,
     shouldFitContainer: true,
     isDisabled: !uploadMediaClientConfig || !uploadParams,
     onClick: function onClick() {
@@ -106,8 +107,7 @@ export var LocalMedia = function LocalMedia(_ref) {
       dispatch({
         type: 'open'
       });
-    },
-    autoFocus: true
+    }
   }, strings.upload), uploadMediaClientConfig && uploadParams && /*#__PURE__*/React.createElement(Browser, {
     isOpen: uploadState.isOpen,
     config: {
@@ -135,4 +135,4 @@ export var LocalMedia = function LocalMedia(_ref) {
       });
     }
   }));
-};
+});

package/dist/esm/ui/MediaFromURL.js

@@ -253,14 +253,25 @@ export function MediaFromURL(_ref) {
     as: "form",
     onSubmit: function onSubmit(e) {
       e.preventDefault();
-      uploadExternalMedia(inputUrl);
+      // This can be triggered from an enter key event on the input even when
+      // the button is disabled, so we explicitly do nothing when in loading
+      // state.
+      if (previewState.isLoading) {
+        return;
+      }
+      if (previewState.previewInfo) {
+        return onInsert();
+      }
+      if (previewState.warning) {
+        return onExternalInsert(inputUrl);
+      }
+      return uploadExternalMedia(inputUrl);
     },
     xcss: FormStyles
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "space.150",
     grow: "fill"
   }, /*#__PURE__*/React.createElement(TextField, {
-    autoFocus: true,
     value: inputUrl,
     placeholder: strings.pasteLinkToUpload,
     onChange: onURLChange,

package/dist/esm/ui/MediaInsertPicker.js

@@ -6,8 +6,12 @@ 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';
+import { Box } from '@atlaskit/primitives';
+import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
 import { useFocusEditor } from '../hooks/use-focus-editor';
-import { MediaInsertContent } from './MediaInsertContent';
+import { useUnholyAutofocus } from '../hooks/use-unholy-autofocus';
+import { LocalMedia } from './LocalMedia';
+import { MediaFromURL } from './MediaFromURL';
 import { MediaInsertWrapper } from './MediaInsertWrapper';
 var PopupWithListeners = withOuterListeners(Popup);
 var getDomRefFromSelection = function getDomRefFromSelection(view, dispatchAnalyticsEvent) {
@@ -51,6 +55,9 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
   var focusEditor = useFocusEditor({
     editorView: editorView
   });
+  var _useUnholyAutofocus = useUnholyAutofocus(),
+    autofocusRef = _useUnholyAutofocus.autofocusRef,
+    onPositionCalculated = _useUnholyAutofocus.onPositionCalculated;
   if (!isOpen || !mediaProvider) {
     return null;
   }
@@ -86,8 +93,22 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
     handleEscapeKeydown: handleClose(INPUT_METHOD.KEYBOARD),
     scrollableElement: popupsScrollableElement,
     preventOverflow: true,
+    onPositionCalculated: onPositionCalculated,
     focusTrap: true
-  }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__PURE__*/React.createElement(MediaInsertContent, {
+  }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__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, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
+    ref: autofocusRef,
+    mediaProvider: mediaProvider,
+    insertMediaSingle: insertMediaSingle,
+    closeMediaInsertPicker: function closeMediaInsertPicker() {
+      _closeMediaInsertPicker();
+      focusEditor();
+    },
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
     mediaProvider: mediaProvider,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     closeMediaInsertPicker: function closeMediaInsertPicker() {
@@ -96,5 +117,5 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
     },
     insertMediaSingle: insertMediaSingle,
     insertExternalMediaSingle: insertExternalMediaSingle
-  })));
+  })))));
 };

package/dist/types/hooks/use-unholy-autofocus.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { Position as PopupPosition } from '@atlaskit/editor-common/src/ui/Popup/utils';
+/**
+ * Autofocuses the first interactive element in the first tab panel
+ * when the media picker is opened.
+ *
+ * This is to mitigate the issue where the PopupWithListeners component
+ * renders initially at the top of the editor and then repositioned.
+ *
+ * We want to autofocus after the repositioning to ensure we don't scroll
+ * to the top of the editor when the media picker is opened.
+ */
+export declare const useUnholyAutofocus: () => {
+    autofocusRef: React.RefObject<HTMLButtonElement>;
+    onPositionCalculated: (position: PopupPosition) => PopupPosition;
+};

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import { type InsertMediaSingle } from '../types';
@@ -8,5 +8,5 @@ type Props = {
     closeMediaInsertPicker: () => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
 };
-export declare const LocalMedia: ({ mediaProvider, insertMediaSingle, dispatchAnalyticsEvent, closeMediaInsertPicker, }: Props) => JSX.Element;
+export declare const LocalMedia: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types-ts4.5/hooks/use-unholy-autofocus.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { Position as PopupPosition } from '@atlaskit/editor-common/src/ui/Popup/utils';
+/**
+ * Autofocuses the first interactive element in the first tab panel
+ * when the media picker is opened.
+ *
+ * This is to mitigate the issue where the PopupWithListeners component
+ * renders initially at the top of the editor and then repositioned.
+ *
+ * We want to autofocus after the repositioning to ensure we don't scroll
+ * to the top of the editor when the media picker is opened.
+ */
+export declare const useUnholyAutofocus: () => {
+    autofocusRef: React.RefObject<HTMLButtonElement>;
+    onPositionCalculated: (position: PopupPosition) => PopupPosition;
+};

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import { type InsertMediaSingle } from '../types';
@@ -8,5 +8,5 @@ type Props = {
     closeMediaInsertPicker: () => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
 };
-export declare const LocalMedia: ({ mediaProvider, insertMediaSingle, dispatchAnalyticsEvent, closeMediaInsertPicker, }: Props) => JSX.Element;
+export declare const LocalMedia: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media-insert",
-	"version": "2.3.2",
+	"version": "2.5.0",
 	"description": "Media Insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -24,9 +24,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/editor-common": "^88.11.0",
+		"@atlaskit/editor-common": "^88.13.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
-		"@atlaskit/editor-plugin-media": "^1.29.0",
+		"@atlaskit/editor-plugin-media": "^1.31.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/icon": "^22.16.0",

package/dist/cjs/ui/MediaInsertContent.js

@@ -1,41 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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 _LocalMedia = require("./LocalMedia");
-var _MediaFromURL = require("./MediaFromURL");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var MediaInsertContent = exports.MediaInsertContent = function MediaInsertContent(_ref) {
-  var mediaProvider = _ref.mediaProvider,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    closeMediaInsertPicker = _ref.closeMediaInsertPicker,
-    insertMediaSingle = _ref.insertMediaSingle,
-    insertExternalMediaSingle = _ref.insertExternalMediaSingle;
-  var intl = (0, _reactIntlNext.useIntl)();
-  return /*#__PURE__*/_react.default.createElement(_tabs.default, {
-    id: "media-insert-tab-navigation"
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    paddingBlockEnd: "space.150"
-  }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle)), /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
-    mediaProvider: mediaProvider,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    closeMediaInsertPicker: closeMediaInsertPicker,
-    insertMediaSingle: insertMediaSingle
-  })), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_MediaFromURL.MediaFromURL, {
-    mediaProvider: mediaProvider,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    closeMediaInsertPicker: closeMediaInsertPicker,
-    insertMediaSingle: insertMediaSingle,
-    insertExternalMediaSingle: insertExternalMediaSingle
-  })));
-};

package/dist/es2019/ui/MediaInsertContent.js

@@ -1,32 +0,0 @@
-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 { LocalMedia } from './LocalMedia';
-import { MediaFromURL } from './MediaFromURL';
-export const MediaInsertContent = ({
-  mediaProvider,
-  dispatchAnalyticsEvent,
-  closeMediaInsertPicker,
-  insertMediaSingle,
-  insertExternalMediaSingle
-}) => {
-  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, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
-    mediaProvider: mediaProvider,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    closeMediaInsertPicker: closeMediaInsertPicker,
-    insertMediaSingle: insertMediaSingle
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
-    mediaProvider: mediaProvider,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    closeMediaInsertPicker: closeMediaInsertPicker,
-    insertMediaSingle: insertMediaSingle,
-    insertExternalMediaSingle: insertExternalMediaSingle
-  })));
-};

package/dist/esm/ui/MediaInsertContent.js

@@ -1,31 +0,0 @@
-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 { LocalMedia } from './LocalMedia';
-import { MediaFromURL } from './MediaFromURL';
-export var MediaInsertContent = function MediaInsertContent(_ref) {
-  var mediaProvider = _ref.mediaProvider,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    closeMediaInsertPicker = _ref.closeMediaInsertPicker,
-    insertMediaSingle = _ref.insertMediaSingle,
-    insertExternalMediaSingle = _ref.insertExternalMediaSingle;
-  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, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
-    mediaProvider: mediaProvider,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    closeMediaInsertPicker: closeMediaInsertPicker,
-    insertMediaSingle: insertMediaSingle
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
-    mediaProvider: mediaProvider,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    closeMediaInsertPicker: closeMediaInsertPicker,
-    insertMediaSingle: insertMediaSingle,
-    insertExternalMediaSingle: insertExternalMediaSingle
-  })));
-};

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

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
-import { type InsertExternalMediaSingle, type InsertMediaSingle } from '../types';
-type Props = {
-    mediaProvider: MediaProvider;
-    dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
-    closeMediaInsertPicker: () => void;
-    insertMediaSingle: InsertMediaSingle;
-    insertExternalMediaSingle: InsertExternalMediaSingle;
-};
-export declare const MediaInsertContent: ({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: Props) => JSX.Element;
-export {};

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

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
-import { type InsertExternalMediaSingle, type InsertMediaSingle } from '../types';
-type Props = {
-    mediaProvider: MediaProvider;
-    dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
-    closeMediaInsertPicker: () => void;
-    insertMediaSingle: InsertMediaSingle;
-    insertExternalMediaSingle: InsertExternalMediaSingle;
-};
-export declare const MediaInsertContent: ({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: Props) => JSX.Element;
-export {};