@atlaskit/editor-plugin-quick-insert 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-quick-insert
 
+## 0.2.0
+
+### Minor Changes
+
+- [#41143](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41143) [`7d6dfe2befa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d6dfe2befa) - [ED-20003] Replace TyepAhead API for Editor Plugin Injection API
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.1.2
+
+### Patch Changes
+
+- [#39425](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39425) [`4c27d14af2e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c27d14af2e) - [ED-19408] Fix issue where FocusTrap returnFocus was causing the cursor to end up at the beginning of the document when inserting elements using the element browser modal.
+- Updated dependencies
+
 ## 0.1.1
 
 ### Patch Changes

package/README.md

@@ -27,4 +27,4 @@ Please see [Atlaskit - Editor plugin quick insert](https://atlaskit.atlassian.co
 For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
 ## License
 ---
- Please see [Atlassian Frontend - License](https://developer.atlassian.com/cloud/framework/atlassian-frontend/#license) for more licensing information.
+ Please see [Atlassian Frontend - License](https://hello.atlassian.net/wiki/spaces/AF/pages/2589099144/Documentation#License) for more licensing information.

package/dist/cjs/commands.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.openElementBrowserModal = exports.insertItem = exports.closeElementBrowserModal = void 0;
 var _insert = require("@atlaskit/editor-common/insert");
 var _pluginKey = require("./plugin-key");
-var openElementBrowserModal = function openElementBrowserModal(_ref) {
+var openElementBrowserModal = exports.openElementBrowserModal = function openElementBrowserModal(_ref) {
   var tr = _ref.tr;
   return tr.setMeta(_pluginKey.pluginKey, {
     isElementBrowserModalOpen: true
   });
 };
-exports.openElementBrowserModal = openElementBrowserModal;
-var closeElementBrowserModal = function closeElementBrowserModal() {
+var closeElementBrowserModal = exports.closeElementBrowserModal = function closeElementBrowserModal() {
   return function (state, dispatch) {
     if (dispatch) {
       dispatch(state.tr.setMeta(_pluginKey.pluginKey, {
@@ -25,8 +24,7 @@ var closeElementBrowserModal = function closeElementBrowserModal() {
 };
 
 // this method was adapted from the typeahead plugin so we respect the API for quick insert items
-exports.closeElementBrowserModal = closeElementBrowserModal;
-var insertItem = function insertItem(item) {
+var insertItem = exports.insertItem = function insertItem(item) {
   return function (state, dispatch) {
     var insert = function insert(maybeNode) {
       var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -40,5 +38,4 @@ var insertItem = function insertItem(item) {
     }
     return true;
   };
-};
-exports.insertItem = insertItem;
+};

package/dist/cjs/plugin-key.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.pluginKey = void 0;
 var _state = require("@atlaskit/editor-prosemirror/state");
-var pluginKey = new _state.PluginKey('quickInsertPluginKey');
-exports.pluginKey = pluginKey;
+var pluginKey = exports.pluginKey = new _state.PluginKey('quickInsertPluginKey');

package/dist/cjs/plugin.js

@@ -18,41 +18,42 @@ var _search = require("./search");
 var _ModalElementBrowser = _interopRequireDefault(require("./ui/ModalElementBrowser"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var quickInsertPlugin = function quickInsertPlugin(_ref) {
+var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_ref) {
   var options = _ref.config,
     api = _ref.api;
+  var typeAhead = {
+    id: _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT,
+    trigger: '/',
+    headless: options === null || options === void 0 ? void 0 : options.headless,
+    getItems: function getItems(_ref2) {
+      var query = _ref2.query,
+        editorState = _ref2.editorState;
+      var quickInsertState = _pluginKey.pluginKey.getState(editorState);
+      return Promise.resolve((0, _search.getQuickInsertSuggestions)({
+        query: query,
+        disableDefaultItems: options === null || options === void 0 ? void 0 : options.disableDefaultItems
+      }, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems));
+    },
+    selectItem: function selectItem(state, item, insert) {
+      return item.action(insert, state);
+    }
+  };
   return {
     name: 'quickInsert',
     pmPlugins: function pmPlugins(defaultItems) {
       return [{
         name: 'quickInsert',
         // It's important that this plugin is above TypeAheadPlugin
-        plugin: function plugin(_ref2) {
-          var providerFactory = _ref2.providerFactory,
-            getIntl = _ref2.getIntl,
-            dispatch = _ref2.dispatch;
+        plugin: function plugin(_ref3) {
+          var providerFactory = _ref3.providerFactory,
+            getIntl = _ref3.getIntl,
+            dispatch = _ref3.dispatch;
           return quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, options === null || options === void 0 ? void 0 : options.emptyStateHandler);
         }
       }];
     },
     pluginsOptions: {
-      typeAhead: {
-        id: _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT,
-        trigger: '/',
-        headless: options === null || options === void 0 ? void 0 : options.headless,
-        getItems: function getItems(_ref3) {
-          var query = _ref3.query,
-            editorState = _ref3.editorState;
-          var quickInsertState = _pluginKey.pluginKey.getState(editorState);
-          return Promise.resolve((0, _search.getQuickInsertSuggestions)({
-            query: query,
-            disableDefaultItems: options === null || options === void 0 ? void 0 : options.disableDefaultItems
-          }, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems));
-        },
-        selectItem: function selectItem(state, item, insert) {
-          return item.action(insert, state);
-        }
-      }
+      typeAhead: typeAhead
     },
     contentComponent: function contentComponent(_ref4) {
       var editorView = _ref4.editorView;
@@ -74,6 +75,7 @@ var quickInsertPlugin = function quickInsertPlugin(_ref) {
         return null;
       }
       return {
+        typeAheadHandler: typeAhead,
         lazyDefaultItems: quickInsertState.lazyDefaultItems,
         emptyStateHandler: quickInsertState.emptyStateHandler,
         providedItems: quickInsertState.providedItems,
@@ -82,6 +84,13 @@ var quickInsertPlugin = function quickInsertPlugin(_ref) {
     },
     actions: {
       insertItem: _commands.insertItem,
+      openTypeAhead: function openTypeAhead(inputMethod) {
+        var _api$typeAhead;
+        return Boolean(api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.open({
+          triggerHandler: typeAhead,
+          inputMethod: inputMethod
+        }));
+      },
       getSuggestions: function getSuggestions(searchOptions) {
         var _api$quickInsert$shar;
         var _ref5 = (_api$quickInsert$shar = api === null || api === void 0 ? void 0 : api.quickInsert.sharedState.currentState()) !== null && _api$quickInsert$shar !== void 0 ? _api$quickInsert$shar : {},
@@ -95,7 +104,6 @@ var quickInsertPlugin = function quickInsertPlugin(_ref) {
     }
   };
 };
-exports.quickInsertPlugin = quickInsertPlugin;
 var setProviderState = function setProviderState(providerState) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/cjs/search.js

@@ -8,7 +8,7 @@ exports.getQuickInsertSuggestions = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _utils = require("@atlaskit/editor-common/utils");
-var getQuickInsertSuggestions = function getQuickInsertSuggestions(searchOptions) {
+var getQuickInsertSuggestions = exports.getQuickInsertSuggestions = function getQuickInsertSuggestions(searchOptions) {
   var lazyDefaultItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
     return [];
   };
@@ -29,5 +29,4 @@ var getQuickInsertSuggestions = function getQuickInsertSuggestions(searchOptions
   return (0, _quickInsert.find)(query || '', category === 'all' || !category ? items : items.filter(function (item) {
     return item.categories && item.categories.includes(category);
   }));
-};
-exports.getQuickInsertSuggestions = getQuickInsertSuggestions;
+};

package/dist/cjs/ui/ModalElementBrowser/ModalElementBrowser.js

@@ -23,8 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
 
-var MODAL_WRAPPER_PADDING = 16;
-exports.MODAL_WRAPPER_PADDING = MODAL_WRAPPER_PADDING;
+var MODAL_WRAPPER_PADDING = exports.MODAL_WRAPPER_PADDING = 16;
 var actionsStyles = (0, _react2.css)({
   display: 'inline-flex',
   margin: "0 ".concat("var(--ds-space-negative-050, -4px)")
@@ -105,9 +104,11 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     stackIndex: 0,
     key: "element-browser-modal",
     onClose: props.onClose,
+    onCloseComplete: props.onCloseComplete,
     height: "664px",
     width: "x-large",
-    autoFocus: false
+    autoFocus: false,
+    shouldReturnFocus: props.shouldReturnFocus
     // defaults to true and doesn't work along with stackIndex=1.
     // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
     ,
@@ -155,5 +156,4 @@ var HelpLink = function HelpLink(url, helpText) {
     testId: "ModalElementBrowser__help-button"
   }, helpText);
 };
-var _default = (0, _reactIntlNext.injectIntl)(ModalElementBrowser);
-exports.default = _default;
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(ModalElementBrowser);

package/dist/cjs/ui/ModalElementBrowser/index.js

@@ -28,25 +28,41 @@ var Modal = function Modal(_ref) {
       editorView.focus();
     }
   }, [editorView]);
+
+  // ED-19408 We not store the item ref in the state
+  // Instead of adding the item immediately on insert item
+  // We wait until modal close is complete, refocus the editor and then add the item
+  var insertableItem = _react.default.useRef(null);
   var onInsertItem = (0, _react.useCallback)(function (item) {
     (0, _commands.closeElementBrowserModal)()(editorView.state, editorView.dispatch);
-    focusInEditor();
-    (0, _commands.insertItem)(item)(editorView.state, editorView.dispatch);
-  }, [editorView, focusInEditor]);
+    insertableItem.current = item;
+  }, [editorView]);
   var onClose = (0, _react.useCallback)(function () {
     (0, _commands.closeElementBrowserModal)()(editorView.state, editorView.dispatch);
     focusInEditor();
   }, [editorView, focusInEditor]);
+  var onCloseComplete = (0, _react.useCallback)(function () {
+    if (!insertableItem.current) {
+      focusInEditor();
+      return;
+    }
+    var item = insertableItem.current;
+    insertableItem.current = null;
+    focusInEditor();
+    (0, _commands.insertItem)(item)(editorView.state, editorView.dispatch);
+  }, [editorView, focusInEditor]);
   return /*#__PURE__*/_react.default.createElement(_ModalElementBrowser.default, {
     getItems: getItems,
     onInsertItem: onInsertItem,
     helpUrl: helpUrl,
     isOpen: (quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.isElementBrowserModalOpen) || false,
     emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
-    onClose: onClose
+    onClose: onClose,
+    onCloseComplete: onCloseComplete,
+    shouldReturnFocus: false
   });
 };
-var _default = function _default(_ref2) {
+var _default = exports.default = function _default(_ref2) {
   var editorView = _ref2.editorView,
     helpUrl = _ref2.helpUrl,
     pluginInjectionAPI = _ref2.pluginInjectionAPI;
@@ -57,5 +73,4 @@ var _default = function _default(_ref2) {
     editorView: editorView,
     helpUrl: helpUrl
   });
-};
-exports.default = _default;
+};

package/dist/cjs/ui/ModalElementBrowser/messages.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.messages = void 0;
 var _reactIntlNext = require("react-intl-next");
-var messages = (0, _reactIntlNext.defineMessages)({
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   help: {
     id: 'fabric.editor.elementBrowser.help',
     defaultMessage: 'Help',
     description: 'Element browser help button label'
   }
-});
-exports.messages = messages;
+});

package/dist/es2019/plugin.js

@@ -9,81 +9,92 @@ import ModalElementBrowser from './ui/ModalElementBrowser';
 export const quickInsertPlugin = ({
   config: options,
   api
-}) => ({
-  name: 'quickInsert',
-  pmPlugins(defaultItems) {
-    return [{
-      name: 'quickInsert',
-      // It's important that this plugin is above TypeAheadPlugin
-      plugin: ({
-        providerFactory,
-        getIntl,
-        dispatch
-      }) => quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, options === null || options === void 0 ? void 0 : options.emptyStateHandler)
-    }];
-  },
-  pluginsOptions: {
-    typeAhead: {
-      id: TypeAheadAvailableNodes.QUICK_INSERT,
-      trigger: '/',
-      headless: options === null || options === void 0 ? void 0 : options.headless,
-      getItems({
+}) => {
+  const typeAhead = {
+    id: TypeAheadAvailableNodes.QUICK_INSERT,
+    trigger: '/',
+    headless: options === null || options === void 0 ? void 0 : options.headless,
+    getItems({
+      query,
+      editorState
+    }) {
+      const quickInsertState = pluginKey.getState(editorState);
+      return Promise.resolve(getQuickInsertSuggestions({
         query,
-        editorState
-      }) {
-        const quickInsertState = pluginKey.getState(editorState);
-        return Promise.resolve(getQuickInsertSuggestions({
-          query,
-          disableDefaultItems: options === null || options === void 0 ? void 0 : options.disableDefaultItems
-        }, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems));
-      },
-      selectItem: (state, item, insert) => {
-        return item.action(insert, state);
-      }
-    }
-  },
-  contentComponent({
-    editorView
-  }) {
-    if (options !== null && options !== void 0 && options.enableElementBrowser) {
-      return /*#__PURE__*/React.createElement(ModalElementBrowser, {
-        editorView: editorView,
-        helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl,
-        pluginInjectionAPI: api
-      });
-    }
-    return null;
-  },
-  getSharedState(editorState) {
-    if (!editorState) {
-      return null;
+        disableDefaultItems: options === null || options === void 0 ? void 0 : options.disableDefaultItems
+      }, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems));
+    },
+    selectItem: (state, item, insert) => {
+      return item.action(insert, state);
     }
-    const quickInsertState = pluginKey.getState(editorState);
-    if (!quickInsertState) {
+  };
+  return {
+    name: 'quickInsert',
+    pmPlugins(defaultItems) {
+      return [{
+        name: 'quickInsert',
+        // It's important that this plugin is above TypeAheadPlugin
+        plugin: ({
+          providerFactory,
+          getIntl,
+          dispatch
+        }) => quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, options === null || options === void 0 ? void 0 : options.emptyStateHandler)
+      }];
+    },
+    pluginsOptions: {
+      typeAhead
+    },
+    contentComponent({
+      editorView
+    }) {
+      if (options !== null && options !== void 0 && options.enableElementBrowser) {
+        return /*#__PURE__*/React.createElement(ModalElementBrowser, {
+          editorView: editorView,
+          helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl,
+          pluginInjectionAPI: api
+        });
+      }
       return null;
+    },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      const quickInsertState = pluginKey.getState(editorState);
+      if (!quickInsertState) {
+        return null;
+      }
+      return {
+        typeAheadHandler: typeAhead,
+        lazyDefaultItems: quickInsertState.lazyDefaultItems,
+        emptyStateHandler: quickInsertState.emptyStateHandler,
+        providedItems: quickInsertState.providedItems,
+        isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
+      };
+    },
+    actions: {
+      insertItem,
+      openTypeAhead(inputMethod) {
+        var _api$typeAhead;
+        return Boolean(api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.open({
+          triggerHandler: typeAhead,
+          inputMethod
+        }));
+      },
+      getSuggestions: searchOptions => {
+        var _api$quickInsert$shar;
+        const {
+          lazyDefaultItems,
+          providedItems
+        } = (_api$quickInsert$shar = api === null || api === void 0 ? void 0 : api.quickInsert.sharedState.currentState()) !== null && _api$quickInsert$shar !== void 0 ? _api$quickInsert$shar : {};
+        return getQuickInsertSuggestions(searchOptions, lazyDefaultItems, providedItems);
+      }
+    },
+    commands: {
+      openElementBrowserModal
     }
-    return {
-      lazyDefaultItems: quickInsertState.lazyDefaultItems,
-      emptyStateHandler: quickInsertState.emptyStateHandler,
-      providedItems: quickInsertState.providedItems,
-      isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
-    };
-  },
-  actions: {
-    insertItem,
-    getSuggestions: searchOptions => {
-      var _api$quickInsert$shar;
-      const {
-        lazyDefaultItems,
-        providedItems
-      } = (_api$quickInsert$shar = api === null || api === void 0 ? void 0 : api.quickInsert.sharedState.currentState()) !== null && _api$quickInsert$shar !== void 0 ? _api$quickInsert$shar : {};
-      return getQuickInsertSuggestions(searchOptions, lazyDefaultItems, providedItems);
-    }
-  },
-  commands: {
-    openElementBrowserModal
-  }
-});
+  };
+};
 const setProviderState = providerState => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(pluginKey, providerState));

package/dist/es2019/ui/ModalElementBrowser/ModalElementBrowser.js

@@ -85,9 +85,11 @@ const ModalElementBrowser = props => {
     stackIndex: 0,
     key: "element-browser-modal",
     onClose: props.onClose,
+    onCloseComplete: props.onCloseComplete,
     height: "664px",
     width: "x-large",
-    autoFocus: false
+    autoFocus: false,
+    shouldReturnFocus: props.shouldReturnFocus
     // defaults to true and doesn't work along with stackIndex=1.
     // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
     ,

package/dist/es2019/ui/ModalElementBrowser/index.js

@@ -17,22 +17,38 @@ const Modal = ({
       editorView.focus();
     }
   }, [editorView]);
+
+  // ED-19408 We not store the item ref in the state
+  // Instead of adding the item immediately on insert item
+  // We wait until modal close is complete, refocus the editor and then add the item
+  const insertableItem = React.useRef(null);
   const onInsertItem = useCallback(item => {
     closeElementBrowserModal()(editorView.state, editorView.dispatch);
-    focusInEditor();
-    insertItem(item)(editorView.state, editorView.dispatch);
-  }, [editorView, focusInEditor]);
+    insertableItem.current = item;
+  }, [editorView]);
   const onClose = useCallback(() => {
     closeElementBrowserModal()(editorView.state, editorView.dispatch);
     focusInEditor();
   }, [editorView, focusInEditor]);
+  const onCloseComplete = useCallback(() => {
+    if (!insertableItem.current) {
+      focusInEditor();
+      return;
+    }
+    const item = insertableItem.current;
+    insertableItem.current = null;
+    focusInEditor();
+    insertItem(item)(editorView.state, editorView.dispatch);
+  }, [editorView, focusInEditor]);
   return /*#__PURE__*/React.createElement(ModalElementBrowser, {
     getItems: getItems,
     onInsertItem: onInsertItem,
     helpUrl: helpUrl,
     isOpen: (quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.isElementBrowserModalOpen) || false,
     emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
-    onClose: onClose
+    onClose: onClose,
+    onCloseComplete: onCloseComplete,
+    shouldReturnFocus: false
   });
 };
 export default (({

package/dist/esm/plugin.js

@@ -14,38 +14,39 @@ import ModalElementBrowser from './ui/ModalElementBrowser';
 export var quickInsertPlugin = function quickInsertPlugin(_ref) {
   var options = _ref.config,
     api = _ref.api;
+  var typeAhead = {
+    id: TypeAheadAvailableNodes.QUICK_INSERT,
+    trigger: '/',
+    headless: options === null || options === void 0 ? void 0 : options.headless,
+    getItems: function getItems(_ref2) {
+      var query = _ref2.query,
+        editorState = _ref2.editorState;
+      var quickInsertState = pluginKey.getState(editorState);
+      return Promise.resolve(getQuickInsertSuggestions({
+        query: query,
+        disableDefaultItems: options === null || options === void 0 ? void 0 : options.disableDefaultItems
+      }, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems));
+    },
+    selectItem: function selectItem(state, item, insert) {
+      return item.action(insert, state);
+    }
+  };
   return {
     name: 'quickInsert',
     pmPlugins: function pmPlugins(defaultItems) {
       return [{
         name: 'quickInsert',
         // It's important that this plugin is above TypeAheadPlugin
-        plugin: function plugin(_ref2) {
-          var providerFactory = _ref2.providerFactory,
-            getIntl = _ref2.getIntl,
-            dispatch = _ref2.dispatch;
+        plugin: function plugin(_ref3) {
+          var providerFactory = _ref3.providerFactory,
+            getIntl = _ref3.getIntl,
+            dispatch = _ref3.dispatch;
           return quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, options === null || options === void 0 ? void 0 : options.emptyStateHandler);
         }
       }];
     },
     pluginsOptions: {
-      typeAhead: {
-        id: TypeAheadAvailableNodes.QUICK_INSERT,
-        trigger: '/',
-        headless: options === null || options === void 0 ? void 0 : options.headless,
-        getItems: function getItems(_ref3) {
-          var query = _ref3.query,
-            editorState = _ref3.editorState;
-          var quickInsertState = pluginKey.getState(editorState);
-          return Promise.resolve(getQuickInsertSuggestions({
-            query: query,
-            disableDefaultItems: options === null || options === void 0 ? void 0 : options.disableDefaultItems
-          }, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems));
-        },
-        selectItem: function selectItem(state, item, insert) {
-          return item.action(insert, state);
-        }
-      }
+      typeAhead: typeAhead
     },
     contentComponent: function contentComponent(_ref4) {
       var editorView = _ref4.editorView;
@@ -67,6 +68,7 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
         return null;
       }
       return {
+        typeAheadHandler: typeAhead,
         lazyDefaultItems: quickInsertState.lazyDefaultItems,
         emptyStateHandler: quickInsertState.emptyStateHandler,
         providedItems: quickInsertState.providedItems,
@@ -75,6 +77,13 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
     },
     actions: {
       insertItem: insertItem,
+      openTypeAhead: function openTypeAhead(inputMethod) {
+        var _api$typeAhead;
+        return Boolean(api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.open({
+          triggerHandler: typeAhead,
+          inputMethod: inputMethod
+        }));
+      },
       getSuggestions: function getSuggestions(searchOptions) {
         var _api$quickInsert$shar;
         var _ref5 = (_api$quickInsert$shar = api === null || api === void 0 ? void 0 : api.quickInsert.sharedState.currentState()) !== null && _api$quickInsert$shar !== void 0 ? _api$quickInsert$shar : {},

package/dist/esm/ui/ModalElementBrowser/ModalElementBrowser.js

@@ -93,9 +93,11 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     stackIndex: 0,
     key: "element-browser-modal",
     onClose: props.onClose,
+    onCloseComplete: props.onCloseComplete,
     height: "664px",
     width: "x-large",
-    autoFocus: false
+    autoFocus: false,
+    shouldReturnFocus: props.shouldReturnFocus
     // defaults to true and doesn't work along with stackIndex=1.
     // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
     ,

package/dist/esm/ui/ModalElementBrowser/index.js

@@ -18,22 +18,38 @@ var Modal = function Modal(_ref) {
       editorView.focus();
     }
   }, [editorView]);
+
+  // ED-19408 We not store the item ref in the state
+  // Instead of adding the item immediately on insert item
+  // We wait until modal close is complete, refocus the editor and then add the item
+  var insertableItem = React.useRef(null);
   var onInsertItem = useCallback(function (item) {
     closeElementBrowserModal()(editorView.state, editorView.dispatch);
-    focusInEditor();
-    insertItem(item)(editorView.state, editorView.dispatch);
-  }, [editorView, focusInEditor]);
+    insertableItem.current = item;
+  }, [editorView]);
   var onClose = useCallback(function () {
     closeElementBrowserModal()(editorView.state, editorView.dispatch);
     focusInEditor();
   }, [editorView, focusInEditor]);
+  var onCloseComplete = useCallback(function () {
+    if (!insertableItem.current) {
+      focusInEditor();
+      return;
+    }
+    var item = insertableItem.current;
+    insertableItem.current = null;
+    focusInEditor();
+    insertItem(item)(editorView.state, editorView.dispatch);
+  }, [editorView, focusInEditor]);
   return /*#__PURE__*/React.createElement(ModalElementBrowser, {
     getItems: getItems,
     onInsertItem: onInsertItem,
     helpUrl: helpUrl,
     isOpen: (quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.isElementBrowserModalOpen) || false,
     emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
-    onClose: onClose
+    onClose: onClose,
+    onCloseComplete: onCloseComplete,
+    shouldReturnFocus: false
   });
 };
 export default (function (_ref2) {

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { quickInsertPlugin } from './plugin';
-export type { QuickInsertPlugin } from './plugin';
+export type { QuickInsertPlugin, QuickInsertSharedState } from './plugin';

package/dist/types/plugin.d.ts

@@ -1,10 +1,16 @@
 import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
-import type { Command, EditorCommand, NextEditorPlugin, QuickInsertPluginOptions, QuickInsertSearchOptions, QuickInsertSharedState } from '@atlaskit/editor-common/types';
+import type { Command, QuickInsertSharedState as CommonQuickInsertSharedState, EditorCommand, NextEditorPlugin, QuickInsertPluginOptions, QuickInsertSearchOptions, TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { TypeAheadInputMethod, TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 export type { QuickInsertPluginOptions };
+export type QuickInsertSharedState = CommonQuickInsertSharedState & {
+    typeAheadHandler: TypeAheadHandler;
+};
 export type QuickInsertPlugin = NextEditorPlugin<'quickInsert', {
     pluginConfiguration: QuickInsertPluginOptions | undefined;
+    dependencies: [TypeAheadPlugin];
     sharedState: QuickInsertSharedState | null;
     actions: {
+        openTypeAhead: (inputMethod: TypeAheadInputMethod) => boolean;
         insertItem: (item: QuickInsertItem) => Command;
         getSuggestions: (searchOptions: QuickInsertSearchOptions) => QuickInsertItem[];
     };

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

@@ -9,8 +9,10 @@ export interface Props {
     onInsertItem: (item: QuickInsertItem) => void;
     isOpen?: boolean;
     onClose: () => void;
+    onCloseComplete: () => void;
     helpUrl?: string | undefined;
     emptyStateHandler?: EmptyStateHandler;
+    shouldReturnFocus?: boolean;
 }
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;

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

@@ -1,2 +1,2 @@
 export { quickInsertPlugin } from './plugin';
-export type { QuickInsertPlugin } from './plugin';
+export type { QuickInsertPlugin, QuickInsertSharedState } from './plugin';

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

@@ -1,10 +1,18 @@
 import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
-import type { Command, EditorCommand, NextEditorPlugin, QuickInsertPluginOptions, QuickInsertSearchOptions, QuickInsertSharedState } from '@atlaskit/editor-common/types';
+import type { Command, QuickInsertSharedState as CommonQuickInsertSharedState, EditorCommand, NextEditorPlugin, QuickInsertPluginOptions, QuickInsertSearchOptions, TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { TypeAheadInputMethod, TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 export type { QuickInsertPluginOptions };
+export type QuickInsertSharedState = CommonQuickInsertSharedState & {
+    typeAheadHandler: TypeAheadHandler;
+};
 export type QuickInsertPlugin = NextEditorPlugin<'quickInsert', {
     pluginConfiguration: QuickInsertPluginOptions | undefined;
+    dependencies: [
+        TypeAheadPlugin
+    ];
     sharedState: QuickInsertSharedState | null;
     actions: {
+        openTypeAhead: (inputMethod: TypeAheadInputMethod) => boolean;
         insertItem: (item: QuickInsertItem) => Command;
         getSuggestions: (searchOptions: QuickInsertSearchOptions) => QuickInsertItem[];
     };

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

@@ -9,8 +9,10 @@ export interface Props {
     onInsertItem: (item: QuickInsertItem) => void;
     isOpen?: boolean;
     onClose: () => void;
+    onCloseComplete: () => void;
     helpUrl?: string | undefined;
     emptyStateHandler?: EmptyStateHandler;
+    shouldReturnFocus?: boolean;
 }
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-quick-insert",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Quick insert plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -36,10 +36,11 @@
   },
   "dependencies": {
     "@atlaskit/button": "^16.10.0",
-    "@atlaskit/editor-common": "^76.0.0",
+    "@atlaskit/editor-common": "^76.6.0",
+    "@atlaskit/editor-plugin-type-ahead": "^0.5.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/modal-dialog": "^12.7.0",
+    "@atlaskit/modal-dialog": "^12.8.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.25.0",
     "@babel/runtime": "^7.0.0",

package/report.api.md

@@ -21,15 +21,20 @@ import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
 import type { QuickInsertPluginOptions } from '@atlaskit/editor-common/types';
 import type { QuickInsertSearchOptions } from '@atlaskit/editor-common/types';
-import type { QuickInsertSharedState } from '@atlaskit/editor-common/types';
+import type { QuickInsertSharedState as QuickInsertSharedState_2 } from '@atlaskit/editor-common/types';
+import type { TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { TypeAheadInputMethod } from '@atlaskit/editor-plugin-type-ahead';
+import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 
 // @public (undocumented)
 export type QuickInsertPlugin = NextEditorPlugin<
   'quickInsert',
   {
     pluginConfiguration: QuickInsertPluginOptions | undefined;
+    dependencies: [TypeAheadPlugin];
     sharedState: QuickInsertSharedState | null;
     actions: {
+      openTypeAhead: (inputMethod: TypeAheadInputMethod) => boolean;
       insertItem: (item: QuickInsertItem) => Command;
       getSuggestions: (
         searchOptions: QuickInsertSearchOptions,
@@ -44,6 +49,11 @@ export type QuickInsertPlugin = NextEditorPlugin<
 // @public (undocumented)
 export const quickInsertPlugin: QuickInsertPlugin;
 
+// @public (undocumented)
+export type QuickInsertSharedState = QuickInsertSharedState_2 & {
+  typeAheadHandler: TypeAheadHandler;
+};
+
 // (No @packageDocumentation comment for this package)
 ```
 

package/tmp/api-report-tmp.d.ts

@@ -10,13 +10,18 @@ import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
 import type { QuickInsertPluginOptions } from '@atlaskit/editor-common/types';
 import type { QuickInsertSearchOptions } from '@atlaskit/editor-common/types';
-import type { QuickInsertSharedState } from '@atlaskit/editor-common/types';
+import type { QuickInsertSharedState as QuickInsertSharedState_2 } from '@atlaskit/editor-common/types';
+import type { TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { TypeAheadInputMethod } from '@atlaskit/editor-plugin-type-ahead';
+import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 
 // @public (undocumented)
 export type QuickInsertPlugin = NextEditorPlugin<'quickInsert', {
     pluginConfiguration: QuickInsertPluginOptions | undefined;
+    dependencies: [TypeAheadPlugin];
     sharedState: QuickInsertSharedState | null;
     actions: {
+        openTypeAhead: (inputMethod: TypeAheadInputMethod) => boolean;
         insertItem: (item: QuickInsertItem) => Command;
         getSuggestions: (searchOptions: QuickInsertSearchOptions) => QuickInsertItem[];
     };
@@ -28,6 +33,11 @@ export type QuickInsertPlugin = NextEditorPlugin<'quickInsert', {
 // @public (undocumented)
 export const quickInsertPlugin: QuickInsertPlugin;
 
+// @public (undocumented)
+export type QuickInsertSharedState = QuickInsertSharedState_2 & {
+    typeAheadHandler: TypeAheadHandler;
+};
+
 // (No @packageDocumentation comment for this package)
 
 ```