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

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

@@ -0,0 +1,34 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { ACTION_CLOSE_POPUP, ACTION_OPEN_POPUP } from '../actions';
+import { pluginKey } from './plugin-key';
+export const createPlugin = () => {
+  return new SafePlugin({
+    state: {
+      init() {
+        return {
+          isOpen: false
+        };
+      },
+      apply(tr, mediaInsertPluginState) {
+        const meta = tr.getMeta(pluginKey);
+        if (meta) {
+          switch (meta.type) {
+            case ACTION_OPEN_POPUP:
+              return {
+                isOpen: true
+              };
+            case ACTION_CLOSE_POPUP:
+              return {
+                isOpen: false
+              };
+            default:
+              return mediaInsertPluginState;
+          }
+        } else {
+          return mediaInsertPluginState;
+        }
+      }
+    },
+    key: pluginKey
+  });
+};

package/dist/es2019/pm-plugins/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const pluginKey = new PluginKey('mediaInsertPlugin');

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/FromURL.js

@@ -23,6 +23,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 +71,8 @@ export function MediaFromURL({
   mediaProvider,
   onInsert,
   onExternalInsert,
-  dispatchAnalyticsEvent
+  dispatchAnalyticsEvent,
+  onEscKeyPressed
 }) {
   const intl = useIntl();
   const strings = {
@@ -94,7 +98,7 @@ export function MediaFromURL({
     const {
       uploadMediaClientConfig,
       uploadParams
-    } = await mediaProvider;
+    } = mediaProvider;
     if (!uploadMediaClientConfig) {
       return;
     }
@@ -174,18 +178,27 @@ 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') {
+      onEscKeyPressed();
+    }
+  }, [onEscKeyPressed]);
+  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",

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Box } from '@atlaskit/primitives';
+import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
+import { MediaFromURL } from './FromURL';
+export const MediaInsertContent = ({
+  mediaProvider,
+  dispatchAnalyticsEvent,
+  onEscKeyPressed
+}) => {
+  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, {
+    mediaProvider: mediaProvider,
+    onExternalInsert: () => {},
+    onInsert: () => {},
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    onEscKeyPressed: onEscKeyPressed
+  })));
+};

package/dist/es2019/ui/MediaInsertPicker.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { MediaInsertContent } from './MediaInsertContent';
+import { MediaInsertWrapper } from './MediaInsertWrapper';
+const PopupWithListeners = withOuterListeners(Popup);
+const getDomRefFromSelection = (view, dispatchAnalyticsEvent) => {
+  try {
+    const domRef = findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
+    if (domRef instanceof HTMLElement) {
+      return domRef;
+    } else {
+      throw new Error('Invalid DOM reference');
+    }
+  } catch (error) {
+    if (dispatchAnalyticsEvent) {
+      const payload = {
+        action: ACTION.ERRORED,
+        actionSubject: ACTION_SUBJECT.PICKER,
+        actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          error: 'Error getting DOM reference from selection'
+        }
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+  }
+};
+export const MediaInsertPicker = ({
+  api,
+  editorView,
+  dispatchAnalyticsEvent,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  closeMediaInsertPicker
+}) => {
+  var _useSharedPluginState, _useSharedPluginState2, _useSharedPluginState3, _useSharedPluginState4;
+  const targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
+  const isOpen = (_useSharedPluginState = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 ? void 0 : (_useSharedPluginState2 = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.isOpen;
+  const 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 => {
+    event.preventDefault();
+    if (dispatchAnalyticsEvent) {
+      const payload = {
+        action: ACTION.CLOSED,
+        actionSubject: ACTION_SUBJECT.PICKER,
+        actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
+        eventType: EVENT_TYPE.UI,
+        attributes: {
+          exitMethod
+        }
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+    closeMediaInsertPicker();
+  };
+  return /*#__PURE__*/React.createElement(PopupWithListeners
+  // TODO: i18n
+  , {
+    ariaLabel: 'Media Insert',
+    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, {
+    mediaProvider: mediaProvider,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    onEscKeyPressed: () => handleClose(INPUT_METHOD.KEYBOARD)
+  })));
+};

package/dist/es2019/ui/MediaInsertWrapper.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
+const styles = xcss({
+  boxShadow: 'elevation.shadow.overflow',
+  width: '340px',
+  padding: 'space.200',
+  borderRadius: 'border.radius'
+});
+export const MediaInsertWrapper = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles
+  }, children);
+};

package/dist/esm/actions.js

@@ -0,0 +1,22 @@
+import { pluginKey } from './pm-plugins/plugin-key';
+export var ACTION_OPEN_POPUP = 'OPEN_POPUP';
+export var ACTION_CLOSE_POPUP = 'CLOSE_POPUP';
+var setPopupMeta = function setPopupMeta(_ref) {
+  var type = _ref.type,
+    tr = _ref.tr;
+  return tr.setMeta(pluginKey, {
+    type: type
+  });
+};
+export var showMediaInsertPopup = function showMediaInsertPopup(tr) {
+  return setPopupMeta({
+    type: ACTION_OPEN_POPUP,
+    tr: tr
+  });
+};
+export var closeMediaInsertPicker = function closeMediaInsertPicker(tr) {
+  return setPopupMeta({
+    type: ACTION_CLOSE_POPUP,
+    tr: tr
+  });
+};

package/dist/esm/index.js

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

package/dist/esm/plugin.js

@@ -1,22 +1,58 @@
 import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconImages } from '@atlaskit/editor-common/quick-insert';
-export var mediaInsertPlugin = function mediaInsertPlugin() {
+import { closeMediaInsertPicker as _closeMediaInsertPicker, showMediaInsertPopup } from './actions';
+import { createPlugin } from './pm-plugins/main';
+import { pluginKey } from './pm-plugins/plugin-key';
+import { MediaInsertPicker } from './ui/MediaInsertPicker';
+export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
+  var api = _ref.api;
   return {
     name: 'mediaInsert',
     pmPlugins: function pmPlugins() {
       return [{
         name: 'mediaInsert',
         plugin: function plugin() {
-          // eslint-disable-next-line no-console
-          console.log('mediaInsert plugin');
-          return undefined;
+          return createPlugin();
         }
       }];
     },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return {
+          isOpen: false
+        };
+      }
+      var _ref2 = pluginKey.getState(editorState) || {},
+        isOpen = _ref2.isOpen;
+      return {
+        isOpen: isOpen
+      };
+    },
+    contentComponent: function contentComponent(_ref3) {
+      var editorView = _ref3.editorView,
+        dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
+        popupsMountPoint = _ref3.popupsMountPoint,
+        popupsBoundariesElement = _ref3.popupsBoundariesElement,
+        popupsScrollableElement = _ref3.popupsScrollableElement;
+      var dispatch = editorView.dispatch,
+        state = editorView.state;
+      return /*#__PURE__*/React.createElement(MediaInsertPicker, {
+        api: api,
+        editorView: editorView,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        closeMediaInsertPicker: function closeMediaInsertPicker() {
+          return dispatch(_closeMediaInsertPicker(state.tr));
+        }
+      });
+    },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref) {
-        var formatMessage = _ref.formatMessage;
+      quickInsert: function quickInsert(_ref4) {
+        var formatMessage = _ref4.formatMessage;
         return [{
           id: 'media-insert',
           title: formatMessage(messages.insertMediaFromUrl),
@@ -27,10 +63,21 @@ export var mediaInsertPlugin = function mediaInsertPlugin() {
             return /*#__PURE__*/React.createElement(IconImages, null);
           },
           action: function action(insert) {
-            return insert({
-              type: 'paragraph',
-              content: []
-            });
+            var _api$analytics;
+            // Insert empty string to remove the typeahead raw text
+            // close the quick insert immediately
+            var tr = insert('');
+            showMediaInsertPopup(tr);
+            api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
+              action: ACTION.OPENED,
+              actionSubject: ACTION_SUBJECT.PICKER,
+              actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
+              attributes: {
+                inputMethod: INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: EVENT_TYPE.UI
+            })(tr);
+            return tr;
           }
         }];
       }

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

@@ -0,0 +1,34 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { ACTION_CLOSE_POPUP, ACTION_OPEN_POPUP } from '../actions';
+import { pluginKey } from './plugin-key';
+export var createPlugin = function createPlugin() {
+  return new SafePlugin({
+    state: {
+      init: function init() {
+        return {
+          isOpen: false
+        };
+      },
+      apply: function apply(tr, mediaInsertPluginState) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta) {
+          switch (meta.type) {
+            case ACTION_OPEN_POPUP:
+              return {
+                isOpen: true
+              };
+            case ACTION_CLOSE_POPUP:
+              return {
+                isOpen: false
+              };
+            default:
+              return mediaInsertPluginState;
+          }
+        } else {
+          return mediaInsertPluginState;
+        }
+      }
+    },
+    key: pluginKey
+  });
+};

package/dist/esm/pm-plugins/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var pluginKey = new PluginKey('mediaInsertPlugin');

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/FromURL.js

@@ -29,6 +29,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 +73,8 @@ export function MediaFromURL(_ref) {
   var mediaProvider = _ref.mediaProvider,
     onInsert = _ref.onInsert,
     onExternalInsert = _ref.onExternalInsert,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    onEscKeyPressed = _ref.onEscKeyPressed;
   var intl = useIntl();
   var strings = {
     loadPreview: intl.formatMessage(mediaInsertMessages.loadPreview),
@@ -95,32 +99,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 +134,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 +163,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 +203,27 @@ 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') {
+      onEscKeyPressed();
+    }
+  }, [onEscKeyPressed]);
+  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",

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

@@ -0,0 +1,20 @@
+import React from 'react';
+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;
+  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, {
+    mediaProvider: mediaProvider,
+    onExternalInsert: function onExternalInsert() {},
+    onInsert: function onInsert() {},
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    onEscKeyPressed: onEscKeyPressed
+  })));
+};

package/dist/esm/ui/MediaInsertPicker.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { MediaInsertContent } from './MediaInsertContent';
+import { MediaInsertWrapper } from './MediaInsertWrapper';
+var PopupWithListeners = withOuterListeners(Popup);
+var getDomRefFromSelection = function getDomRefFromSelection(view, dispatchAnalyticsEvent) {
+  try {
+    var domRef = findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
+    if (domRef instanceof HTMLElement) {
+      return domRef;
+    } else {
+      throw new Error('Invalid DOM reference');
+    }
+  } catch (error) {
+    if (dispatchAnalyticsEvent) {
+      var payload = {
+        action: ACTION.ERRORED,
+        actionSubject: ACTION_SUBJECT.PICKER,
+        actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          error: 'Error getting DOM reference from selection'
+        }
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+  }
+};
+export var MediaInsertPicker = function MediaInsertPicker(_ref) {
+  var _useSharedPluginState, _useSharedPluginState2;
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    closeMediaInsertPicker = _ref.closeMediaInsertPicker;
+  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;
+  if (!isOpen || !mediaProvider) {
+    return null;
+  }
+  var handleClose = function handleClose(exitMethod) {
+    return function (event) {
+      event.preventDefault();
+      if (dispatchAnalyticsEvent) {
+        var payload = {
+          action: ACTION.CLOSED,
+          actionSubject: ACTION_SUBJECT.PICKER,
+          actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
+          eventType: EVENT_TYPE.UI,
+          attributes: {
+            exitMethod: exitMethod
+          }
+        };
+        dispatchAnalyticsEvent(payload);
+      }
+      closeMediaInsertPicker();
+    };
+  };
+  return /*#__PURE__*/React.createElement(PopupWithListeners
+  // TODO: i18n
+  , {
+    ariaLabel: 'Media Insert',
+    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, {
+    mediaProvider: mediaProvider,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    onEscKeyPressed: function onEscKeyPressed() {
+      return handleClose(INPUT_METHOD.KEYBOARD);
+    }
+  })));
+};