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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 1.3.0
+
+### Minor Changes
+
+- [#129365](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129365)
+  [`0cb229e53ad8f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0cb229e53ad8f) -
+  [ux] [ED-24249] Added popup dialog for inserting media using editor-plugin-media-insert
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.2.2
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showMediaInsertPopup = exports.closeMediaInsertPicker = exports.ACTION_OPEN_POPUP = exports.ACTION_CLOSE_POPUP = void 0;
+var _pluginKey = require("./pm-plugins/plugin-key");
+var ACTION_OPEN_POPUP = exports.ACTION_OPEN_POPUP = 'OPEN_POPUP';
+var ACTION_CLOSE_POPUP = exports.ACTION_CLOSE_POPUP = 'CLOSE_POPUP';
+var setPopupMeta = function setPopupMeta(_ref) {
+  var type = _ref.type,
+    tr = _ref.tr;
+  return tr.setMeta(_pluginKey.pluginKey, {
+    type: type
+  });
+};
+var showMediaInsertPopup = exports.showMediaInsertPopup = function showMediaInsertPopup(tr) {
+  return setPopupMeta({
+    type: ACTION_OPEN_POPUP,
+    tr: tr
+  });
+};
+var closeMediaInsertPicker = exports.closeMediaInsertPicker = function closeMediaInsertPicker(tr) {
+  return setPopupMeta({
+    type: ACTION_CLOSE_POPUP,
+    tr: tr
+  });
+};

package/dist/cjs/plugin.js

@@ -6,24 +6,60 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mediaInsertPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
-var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin() {
+var _actions = require("./actions");
+var _main = require("./pm-plugins/main");
+var _pluginKey = require("./pm-plugins/plugin-key");
+var _MediaInsertPicker = require("./ui/MediaInsertPicker");
+var mediaInsertPlugin = exports.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 (0, _main.createPlugin)();
         }
       }];
     },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return {
+          isOpen: false
+        };
+      }
+      var _ref2 = _pluginKey.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.default.createElement(_MediaInsertPicker.MediaInsertPicker, {
+        api: api,
+        editorView: editorView,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        closeMediaInsertPicker: function closeMediaInsertPicker() {
+          return dispatch((0, _actions.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.toolbarInsertBlockMessages.insertMediaFromUrl),
@@ -34,10 +70,21 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin()
             return /*#__PURE__*/_react.default.createElement(_quickInsert.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('');
+            (0, _actions.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: _analytics.ACTION.OPENED,
+              actionSubject: _analytics.ACTION_SUBJECT.PICKER,
+              actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_MEDIA,
+              attributes: {
+                inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: _analytics.EVENT_TYPE.UI
+            })(tr);
+            return tr;
           }
         }];
       }

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _actions = require("../actions");
+var _pluginKey = require("./plugin-key");
+var createPlugin = exports.createPlugin = function createPlugin() {
+  return new _safePlugin.SafePlugin({
+    state: {
+      init: function init() {
+        return {
+          isOpen: false
+        };
+      },
+      apply: function apply(tr, mediaInsertPluginState) {
+        var meta = tr.getMeta(_pluginKey.pluginKey);
+        if (meta) {
+          switch (meta.type) {
+            case _actions.ACTION_OPEN_POPUP:
+              return {
+                isOpen: true
+              };
+            case _actions.ACTION_CLOSE_POPUP:
+              return {
+                isOpen: false
+              };
+            default:
+              return mediaInsertPluginState;
+          }
+        } else {
+          return mediaInsertPluginState;
+        }
+      }
+    },
+    key: _pluginKey.pluginKey
+  });
+};

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var pluginKey = exports.pluginKey = new _state.PluginKey('mediaInsertPlugin');

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/MediaInsertContent.js

@@ -0,0 +1,24 @@
+"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 _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _primitives = require("@atlaskit/primitives");
+var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
+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() {
+  return /*#__PURE__*/_react.default.createElement(_tabs.default, {
+    id: "media-insert-tab-navigation"
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    paddingBlockEnd: "space.150"
+  }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+    autoFocus: true,
+    appearance: "subtle"
+  }, "Link")))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement("p", null, "InsertLinkPanel here")));
+};

package/dist/cjs/ui/MediaInsertPicker.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaInsertPicker = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _ui = require("@atlaskit/editor-common/ui");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _MediaInsertContent = require("./MediaInsertContent");
+var _MediaInsertWrapper = require("./MediaInsertWrapper");
+var PopupWithListeners = (0, _ui.withOuterListeners)(_ui.Popup);
+var getDomRefFromSelection = function getDomRefFromSelection(view, dispatchAnalyticsEvent) {
+  try {
+    var domRef = (0, _utils.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: _analytics.ACTION.ERRORED,
+        actionSubject: _analytics.ACTION_SUBJECT.PICKER,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_MEDIA,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          error: 'Error getting DOM reference from selection'
+        }
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+  }
+};
+var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_ref) {
+  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 _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['mediaInsert']),
+    mediaInsertState = _useSharedPluginState.mediaInsertState;
+  if (!mediaInsertState || !mediaInsertState.isOpen) {
+    return null;
+  }
+  var handleClose = function handleClose(exitMethod) {
+    return function (event) {
+      event.preventDefault();
+      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: exitMethod
+          }
+        };
+        dispatchAnalyticsEvent(payload);
+      }
+      closeMediaInsertPicker();
+    };
+  };
+  return /*#__PURE__*/_react.default.createElement(PopupWithListeners
+  // TODO: i18n
+  , {
+    ariaLabel: 'Media Insert',
+    offset: [0, 12],
+    target: targetRef,
+    zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    handleClickOutside: handleClose(_analytics.INPUT_METHOD.MOUSE),
+    handleEscapeKeydown: handleClose(_analytics.INPUT_METHOD.KEYBOARD),
+    scrollableElement: popupsScrollableElement,
+    focusTrap: true
+  }, /*#__PURE__*/_react.default.createElement(_MediaInsertWrapper.MediaInsertWrapper, null, /*#__PURE__*/_react.default.createElement(_MediaInsertContent.MediaInsertContent, null)));
+};

package/dist/cjs/ui/MediaInsertWrapper.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaInsertWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var styles = (0, _primitives.xcss)({
+  boxShadow: 'elevation.shadow.overflow',
+  width: '340px',
+  padding: 'space.200',
+  borderRadius: 'border.radius'
+});
+var MediaInsertWrapper = exports.MediaInsertWrapper = function MediaInsertWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: styles
+  }, children);
+};

package/dist/es2019/actions.js

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

package/dist/es2019/plugin.js

@@ -1,17 +1,56 @@
 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 const mediaInsertPlugin = () => {
+import { closeMediaInsertPicker, showMediaInsertPopup } from './actions';
+import { createPlugin } from './pm-plugins/main';
+import { pluginKey } from './pm-plugins/plugin-key';
+import { MediaInsertPicker } from './ui/MediaInsertPicker';
+export const mediaInsertPlugin = ({
+  api
+}) => {
   return {
     name: 'mediaInsert',
-    pmPlugins: () => [{
-      name: 'mediaInsert',
-      plugin: () => {
-        // eslint-disable-next-line no-console
-        console.log('mediaInsert plugin');
-        return undefined;
+    pmPlugins() {
+      return [{
+        name: 'mediaInsert',
+        plugin: () => createPlugin()
+      }];
+    },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return {
+          isOpen: false
+        };
       }
-    }],
+      const {
+        isOpen
+      } = pluginKey.getState(editorState) || {};
+      return {
+        isOpen
+      };
+    },
+    contentComponent: ({
+      editorView,
+      dispatchAnalyticsEvent,
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement
+    }) => {
+      const {
+        dispatch,
+        state
+      } = editorView;
+      return /*#__PURE__*/React.createElement(MediaInsertPicker, {
+        api: api,
+        editorView: editorView,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        closeMediaInsertPicker: () => dispatch(closeMediaInsertPicker(state.tr))
+      });
+    },
     pluginsOptions: {
       quickInsert: ({
         formatMessage
@@ -23,10 +62,21 @@ export const mediaInsertPlugin = () => {
         keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video'],
         icon: () => /*#__PURE__*/React.createElement(IconImages, null),
         action(insert) {
-          return insert({
-            type: 'paragraph',
-            content: []
-          });
+          var _api$analytics, _api$analytics$action;
+          // Insert empty string to remove the typeahead raw text
+          // close the quick insert immediately
+          const tr = insert('');
+          showMediaInsertPopup(tr);
+          api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
+            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/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/MediaInsertContent.js

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

package/dist/es2019/ui/MediaInsertPicker.js

@@ -0,0 +1,79 @@
+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
+}) => {
+  const targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
+  const {
+    mediaInsertState
+  } = useSharedPluginState(api, ['mediaInsert']);
+  if (!mediaInsertState || !mediaInsertState.isOpen) {
+    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,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    handleClickOutside: handleClose(INPUT_METHOD.MOUSE),
+    handleEscapeKeydown: handleClose(INPUT_METHOD.KEYBOARD),
+    scrollableElement: popupsScrollableElement,
+    focusTrap: true
+  }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__PURE__*/React.createElement(MediaInsertContent, null)));
+};

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/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/MediaInsertContent.js

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

package/dist/esm/ui/MediaInsertPicker.js

@@ -0,0 +1,79 @@
+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 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 _useSharedPluginState = useSharedPluginState(api, ['mediaInsert']),
+    mediaInsertState = _useSharedPluginState.mediaInsertState;
+  if (!mediaInsertState || !mediaInsertState.isOpen) {
+    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,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    handleClickOutside: handleClose(INPUT_METHOD.MOUSE),
+    handleEscapeKeydown: handleClose(INPUT_METHOD.KEYBOARD),
+    scrollableElement: popupsScrollableElement,
+    focusTrap: true
+  }, /*#__PURE__*/React.createElement(MediaInsertWrapper, null, /*#__PURE__*/React.createElement(MediaInsertContent, null)));
+};

package/dist/esm/ui/MediaInsertWrapper.js

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

package/dist/types/actions.d.ts

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

package/dist/types/index.d.ts

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

package/dist/types/plugin.d.ts

@@ -1,3 +1,2 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {}>;
+import type { MediaInsertPlugin } from './types';
 export declare const mediaInsertPlugin: MediaInsertPlugin;

package/dist/types/pm-plugins/main.d.ts

@@ -0,0 +1,3 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { MediaInsertPluginState } from '../types';
+export declare const createPlugin: () => SafePlugin<MediaInsertPluginState>;

package/dist/types/pm-plugins/plugin-key.d.ts

@@ -0,0 +1,3 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { MediaInsertPluginState } from '../types';
+export declare const pluginKey: PluginKey<MediaInsertPluginState>;

package/dist/types/types.d.ts

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

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MediaInsertContent: () => JSX.Element;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type MediaInsertPickerProps } from '../types';
+export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, }: MediaInsertPickerProps) => JSX.Element | null;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const MediaInsertWrapper: ({ children }: {
+    children?: React.ReactNode;
+}) => JSX.Element;

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

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

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

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

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

@@ -1,3 +1,2 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {}>;
+import type { MediaInsertPlugin } from './types';
 export declare const mediaInsertPlugin: MediaInsertPlugin;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -0,0 +1,3 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { MediaInsertPluginState } from '../types';
+export declare const createPlugin: () => SafePlugin<MediaInsertPluginState>;

package/dist/types-ts4.5/pm-plugins/plugin-key.d.ts

@@ -0,0 +1,3 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { MediaInsertPluginState } from '../types';
+export declare const pluginKey: PluginKey<MediaInsertPluginState>;

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

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

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MediaInsertContent: () => JSX.Element;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type MediaInsertPickerProps } from '../types';
+export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, }: MediaInsertPickerProps) => JSX.Element | null;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const MediaInsertWrapper: ({ children }: {
+    children?: React.ReactNode;
+}) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media-insert",
-	"version": "1.2.2",
+	"version": "1.3.0",
 	"description": "Media Insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,13 +25,17 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^19.2.0",
-		"@atlaskit/editor-common": "^87.8.0",
+		"@atlaskit/editor-common": "^87.9.0",
+		"@atlaskit/editor-plugin-analytics": "^1.7.0",
+		"@atlaskit/editor-prosemirror": "5.0.1",
+		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/icon": "^22.12.0",
 		"@atlaskit/media-card": "^78.0.0",
 		"@atlaskit/media-client": "^27.3.0",
 		"@atlaskit/media-client-react": "^2.0.0",
 		"@atlaskit/primitives": "^12.0.0",
 		"@atlaskit/section-message": "^6.6.0",
+		"@atlaskit/tabs": "^16.4.0",
 		"@atlaskit/textfield": "^6.5.0",
 		"@babel/runtime": "^7.0.0",
 		"react": "^16.8.0",