@atlaskit/editor-plugin-quick-insert 0.1.0

package/dist/esm/plugin.js

@@ -0,0 +1,180 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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) { _defineProperty(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; }
+import React from 'react';
+import { memoProcessQuickInsertItems } from '@atlaskit/editor-common/quick-insert';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { insertItem, openElementBrowserModal } from './commands';
+import { pluginKey } from './plugin-key';
+import { getQuickInsertSuggestions } from './search';
+import ModalElementBrowser from './ui/ModalElementBrowser';
+export var quickInsertPlugin = function quickInsertPlugin(_ref) {
+  var options = _ref.config,
+    api = _ref.api;
+  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;
+          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);
+        }
+      }
+    },
+    contentComponent: function contentComponent(_ref4) {
+      var editorView = _ref4.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: function getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      var quickInsertState = pluginKey.getState(editorState);
+      if (!quickInsertState) {
+        return null;
+      }
+      return {
+        lazyDefaultItems: quickInsertState.lazyDefaultItems,
+        emptyStateHandler: quickInsertState.emptyStateHandler,
+        providedItems: quickInsertState.providedItems,
+        isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
+      };
+    },
+    actions: {
+      insertItem: insertItem,
+      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 : {},
+          lazyDefaultItems = _ref5.lazyDefaultItems,
+          providedItems = _ref5.providedItems;
+        return getQuickInsertSuggestions(searchOptions, lazyDefaultItems, providedItems);
+      }
+    },
+    commands: {
+      openElementBrowserModal: openElementBrowserModal
+    }
+  };
+};
+var setProviderState = function setProviderState(providerState) {
+  return function (state, dispatch) {
+    if (dispatch) {
+      dispatch(state.tr.setMeta(pluginKey, providerState));
+    }
+    return true;
+  };
+};
+function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, emptyStateHandler) {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          isElementBrowserModalOpen: false,
+          emptyStateHandler: emptyStateHandler,
+          // lazy so it doesn't run on editor initialization
+          // memo here to avoid using a singleton cache, avoids editor
+          // getting confused when two editors exist within the same page.
+          lazyDefaultItems: function lazyDefaultItems() {
+            return memoProcessQuickInsertItems(defaultItems || [], getIntl());
+          }
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta) {
+          var keys = Object.keys(meta);
+          var changed = keys.some(function (key) {
+            return pluginState[key] !== meta[key];
+          });
+          if (changed) {
+            var newState = _objectSpread(_objectSpread({}, pluginState), meta);
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+        return pluginState;
+      }
+    },
+    view: function view(editorView) {
+      var providerHandler = /*#__PURE__*/function () {
+        var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_name, providerPromise) {
+          var provider, providedItems;
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!providerPromise) {
+                  _context.next = 14;
+                  break;
+                }
+                _context.prev = 1;
+                _context.next = 4;
+                return providerPromise;
+              case 4:
+                provider = _context.sent;
+                _context.next = 7;
+                return provider.getItems();
+              case 7:
+                providedItems = _context.sent;
+                setProviderState({
+                  provider: provider,
+                  providedItems: providedItems
+                })(editorView.state, editorView.dispatch);
+                _context.next = 14;
+                break;
+              case 11:
+                _context.prev = 11;
+                _context.t0 = _context["catch"](1);
+                // eslint-disable-next-line no-console
+                console.error('Error getting items from quick insert provider', _context.t0);
+              case 14:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee, null, [[1, 11]]);
+        }));
+        return function providerHandler(_x, _x2) {
+          return _ref6.apply(this, arguments);
+        };
+      }();
+      providerFactory.subscribe('quickInsertProvider', providerHandler);
+      return {
+        destroy: function destroy() {
+          providerFactory.unsubscribe('quickInsertProvider', providerHandler);
+        }
+      };
+    }
+  });
+}

package/dist/esm/search.js

@@ -0,0 +1,25 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { find } from '@atlaskit/editor-common/quick-insert';
+import { dedupe } from '@atlaskit/editor-common/utils';
+export var getQuickInsertSuggestions = function getQuickInsertSuggestions(searchOptions) {
+  var lazyDefaultItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+    return [];
+  };
+  var providedItems = arguments.length > 2 ? arguments[2] : undefined;
+  var query = searchOptions.query,
+    category = searchOptions.category,
+    disableDefaultItems = searchOptions.disableDefaultItems,
+    featuredItems = searchOptions.featuredItems;
+  var defaultItems = disableDefaultItems ? [] : lazyDefaultItems();
+  var items = providedItems ? dedupe([].concat(_toConsumableArray(defaultItems), _toConsumableArray(providedItems)), function (item) {
+    return item.title;
+  }) : defaultItems;
+  if (featuredItems) {
+    return items.filter(function (item) {
+      return item.featured;
+    });
+  }
+  return find(query || '', category === 'all' || !category ? items : items.filter(function (item) {
+    return item.categories && item.categories.includes(category);
+  }));
+};

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

@@ -0,0 +1,146 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import React, { useCallback, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/custom-theme-button';
+import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
+import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
+import Modal, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
+import { DN50, N0 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { getCategories } from './categories';
+import { messages } from './messages';
+export var MODAL_WRAPPER_PADDING = 16;
+var actionsStyles = css({
+  display: 'inline-flex',
+  margin: "0 ".concat("var(--ds-space-negative-050, -4px)")
+});
+var actionItemStyles = css({
+  flex: '1 0 auto',
+  margin: "0 ".concat("var(--ds-space-050, 4px)")
+});
+var wrapperStyles = css({
+  display: 'flex',
+  flex: '1 1 auto',
+  boxSizing: 'border-box',
+  padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0 10px"),
+  overflow: 'hidden',
+  backgroundColor: "".concat(themed({
+    light: "var(--ds-surface-overlay, ".concat(N0, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
+  })()),
+  borderRadius: "".concat(borderRadius(), "px")
+});
+var modalFooterStyles = css({
+  display: 'flex',
+  padding: "var(--ds-space-200, 16px)",
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+var ModalElementBrowser = function ModalElementBrowser(props) {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedItem = _useState2[0],
+    setSelectedItem = _useState2[1];
+  var helpUrl = props.helpUrl,
+    intl = props.intl,
+    onClose = props.onClose,
+    onInsertItemFn = props.onInsertItem;
+  var onSelectItem = useCallback(function (item) {
+    setSelectedItem(item);
+  }, [setSelectedItem]);
+  var onInsertItem = useCallback(function (item) {
+    onInsertItemFn(item);
+  }, [onInsertItemFn]);
+  var RenderFooter = useCallback(function () {
+    return jsx(Footer, {
+      onInsert: function onInsert() {
+        return onInsertItem(selectedItem);
+      },
+      beforeElement: helpUrl ? HelpLink(helpUrl, intl.formatMessage(messages.help)) : undefined
+    });
+  }, [onInsertItem, selectedItem, helpUrl, intl]);
+
+  // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
+  var onKeyDown = useCallback(function (e) {
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  }, [onClose]);
+  var RenderBody = useCallback(function () {
+    return jsx("div", {
+      css: wrapperStyles
+    }, jsx(ElementBrowser, {
+      categories: getCategories(props.intl),
+      getItems: props.getItems,
+      showSearch: true,
+      showCategories: true,
+      mode: "full",
+      onSelectItem: onSelectItem,
+      onInsertItem: onInsertItem,
+      emptyStateHandler: props.emptyStateHandler
+    }));
+  }, [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
+  return jsx("div", {
+    "data-editor-popup": true,
+    onClick: onModalClick,
+    onKeyDown: onKeyDown
+  }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
+    testId: "element-browser-modal-dialog",
+    stackIndex: 0,
+    key: "element-browser-modal",
+    onClose: props.onClose,
+    height: "664px",
+    width: "x-large",
+    autoFocus: false
+    // defaults to true and doesn't work along with stackIndex=1.
+    // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
+    ,
+    shouldCloseOnEscapePress: false
+  }, jsx(RenderBody, null), jsx(RenderFooter, null))));
+};
+ModalElementBrowser.displayName = 'ModalElementBrowser';
+
+// Prevent ModalElementBrowser click propagation through to the editor.
+var onModalClick = function onModalClick(e) {
+  return e.stopPropagation();
+};
+var Footer = function Footer(_ref) {
+  var onInsert = _ref.onInsert,
+    beforeElement = _ref.beforeElement;
+  var _useModal = useModal(),
+    onClose = _useModal.onClose;
+  return jsx("div", {
+    css: modalFooterStyles
+  }, beforeElement ? beforeElement : jsx("span", null), jsx("div", {
+    css: actionsStyles
+  }, jsx("div", {
+    css: actionItemStyles
+  }, jsx(Button, {
+    appearance: "primary",
+    onClick: onInsert,
+    testId: "ModalElementBrowser__insert-button"
+  }, "Insert")), jsx("div", {
+    css: actionItemStyles
+  }, jsx(Button, {
+    appearance: "subtle",
+    onClick: onClose,
+    testId: "ModalElementBrowser__close-button"
+  }, "Close"))));
+};
+var HelpLink = function HelpLink(url, helpText) {
+  return jsx(Button, {
+    iconBefore: jsx(QuestionCircleIcon, {
+      label: "",
+      size: "medium"
+    }),
+    appearance: "subtle-link",
+    href: url,
+    target: "_blank",
+    testId: "ModalElementBrowser__help-button"
+  }, helpText);
+};
+export default injectIntl(ModalElementBrowser);

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

@@ -0,0 +1,94 @@
+import { defineMessages } from 'react-intl-next';
+export function getCategories(intl) {
+  return [{
+    title: intl.formatMessage(messages.all),
+    name: 'all'
+  }, {
+    title: intl.formatMessage(messages.formatting),
+    name: 'formatting'
+  }, {
+    title: intl.formatMessage(messages['confluence-content']),
+    name: 'confluence-content'
+  }, {
+    title: intl.formatMessage(messages.media),
+    name: 'media'
+  }, {
+    title: intl.formatMessage(messages.visuals),
+    name: 'visuals'
+  }, {
+    title: intl.formatMessage(messages.navigation),
+    name: 'navigation'
+  }, {
+    title: intl.formatMessage(messages['external-content']),
+    name: 'external-content'
+  }, {
+    title: intl.formatMessage(messages.communication),
+    name: 'communication'
+  }, {
+    title: intl.formatMessage(messages.reporting),
+    name: 'reporting'
+  }, {
+    title: intl.formatMessage(messages.admin),
+    name: 'admin'
+  }, {
+    title: intl.formatMessage(messages.development),
+    name: 'development'
+  }];
+}
+var messages = defineMessages({
+  all: {
+    id: 'fabric.editor.elementbrowser.categorylist.category-all',
+    defaultMessage: 'All',
+    description: 'all'
+  },
+  formatting: {
+    id: 'fabric.editor.elementbrowser.categorylist.category-formatting',
+    defaultMessage: 'Formatting',
+    description: 'formatting'
+  },
+  'confluence-content': {
+    id: 'fabric.editor.elementbrowser.categorylist.category-confluence-content',
+    defaultMessage: 'Confluence content',
+    description: 'confluence-content'
+  },
+  media: {
+    id: 'fabric.editor.elementbrowser.categorylist.category-media',
+    defaultMessage: 'Media',
+    description: 'media'
+  },
+  visuals: {
+    id: 'fabric.editor.elementbrowser.categorylist.category-visuals',
+    defaultMessage: 'Visuals & images',
+    description: 'visuals'
+  },
+  navigation: {
+    id: 'fabric.editor.elementbrowser.categorylist.category-navigation',
+    defaultMessage: 'Navigation',
+    description: 'navigation'
+  },
+  'external-content': {
+    id: 'fabric.editor.elementbrowser.categorylist.category-external-content',
+    defaultMessage: 'External content',
+    description: 'external-content'
+  },
+  communication: {
+    id: 'fabric.editor.elementbrowser.categorylist.category-communication',
+    defaultMessage: 'Communication',
+    description: 'communication'
+  },
+  reporting: {
+    id: 'fabric.editor.elementbrowser.categorylist.category-reporting',
+    defaultMessage: 'Reporting',
+    description: 'reporting'
+  },
+  admin: {
+    id: 'fabric.editor.elementbrowser.categorylist.category-admin',
+    defaultMessage: 'Administration',
+    description: 'admin'
+  },
+  development: {
+    id: 'fabric.editor.elementbrowser.categorylist.category-development',
+    defaultMessage: 'Development',
+    description: 'development'
+  }
+});

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

@@ -0,0 +1,50 @@
+import React, { useCallback } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { closeElementBrowserModal, insertItem } from '../../commands';
+import { getQuickInsertSuggestions } from '../../search';
+import ModalElementBrowser from './ModalElementBrowser';
+var Modal = function Modal(_ref) {
+  var quickInsertState = _ref.quickInsertState,
+    editorView = _ref.editorView,
+    helpUrl = _ref.helpUrl;
+  var getItems = useCallback(function (query, category) {
+    return getQuickInsertSuggestions({
+      query: query,
+      category: category
+    }, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems);
+  }, [quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems]);
+  var focusInEditor = useCallback(function () {
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+  }, [editorView]);
+  var onInsertItem = useCallback(function (item) {
+    closeElementBrowserModal()(editorView.state, editorView.dispatch);
+    focusInEditor();
+    insertItem(item)(editorView.state, editorView.dispatch);
+  }, [editorView, focusInEditor]);
+  var onClose = useCallback(function () {
+    closeElementBrowserModal()(editorView.state, editorView.dispatch);
+    focusInEditor();
+  }, [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
+  });
+};
+export default (function (_ref2) {
+  var editorView = _ref2.editorView,
+    helpUrl = _ref2.helpUrl,
+    pluginInjectionAPI = _ref2.pluginInjectionAPI;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionAPI, ['quickInsert']),
+    quickInsertState = _useSharedPluginState.quickInsertState;
+  return /*#__PURE__*/React.createElement(Modal, {
+    quickInsertState: quickInsertState !== null && quickInsertState !== void 0 ? quickInsertState : undefined,
+    editorView: editorView,
+    helpUrl: helpUrl
+  });
+});

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  help: {
+    id: 'fabric.editor.elementBrowser.help',
+    defaultMessage: 'Help',
+    description: 'Element browser help button label'
+  }
+});

package/dist/types/commands.d.ts

@@ -0,0 +1,5 @@
+import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
+import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
+export declare const openElementBrowserModal: EditorCommand;
+export declare const closeElementBrowserModal: () => Command;
+export declare const insertItem: (item: QuickInsertItem) => Command;

package/dist/types/index.d.ts

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

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

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

package/dist/types/plugin.d.ts

@@ -0,0 +1,15 @@
+import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
+import type { Command, EditorCommand, NextEditorPlugin, QuickInsertPluginOptions, QuickInsertSearchOptions, QuickInsertSharedState } from '@atlaskit/editor-common/types';
+export type { QuickInsertPluginOptions };
+export type QuickInsertPlugin = NextEditorPlugin<'quickInsert', {
+    pluginConfiguration: QuickInsertPluginOptions | undefined;
+    sharedState: QuickInsertSharedState | null;
+    actions: {
+        insertItem: (item: QuickInsertItem) => Command;
+        getSuggestions: (searchOptions: QuickInsertSearchOptions) => QuickInsertItem[];
+    };
+    commands: {
+        openElementBrowserModal: EditorCommand;
+    };
+}>;
+export declare const quickInsertPlugin: QuickInsertPlugin;

package/dist/types/search.d.ts

@@ -0,0 +1,5 @@
+import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
+import type { QuickInsertSearchOptions } from '@atlaskit/editor-common/types';
+type GetQuickInsertSuggestions = (searchOptions: QuickInsertSearchOptions, lazyDefaultItems?: () => QuickInsertItem[], providedItems?: QuickInsertItem[]) => QuickInsertItem[];
+export declare const getQuickInsertSuggestions: GetQuickInsertSuggestions;
+export {};

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

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
+import type { EmptyStateHandler } from '@atlaskit/editor-common/types';
+export declare const MODAL_WRAPPER_PADDING = 16;
+export interface Props {
+    getItems: (query?: string, category?: string) => QuickInsertItem[];
+    onInsertItem: (item: QuickInsertItem) => void;
+    isOpen?: boolean;
+    onClose: () => void;
+    helpUrl?: string | undefined;
+    emptyStateHandler?: EmptyStateHandler;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};
+export default _default;

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

@@ -0,0 +1,5 @@
+import type { IntlShape } from 'react-intl-next';
+export declare function getCategories(intl: IntlShape): {
+    title: string;
+    name: string;
+}[];

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { QuickInsertPlugin } from '../../index';
+type Props = {
+    editorView: EditorView;
+    helpUrl: string | undefined;
+    pluginInjectionAPI: ExtractInjectionAPI<QuickInsertPlugin> | undefined;
+};
+declare const _default: ({ editorView, helpUrl, pluginInjectionAPI }: Props) => JSX.Element;
+export default _default;

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

@@ -0,0 +1,7 @@
+export declare const messages: {
+    help: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -0,0 +1,5 @@
+import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
+import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
+export declare const openElementBrowserModal: EditorCommand;
+export declare const closeElementBrowserModal: () => Command;
+export declare const insertItem: (item: QuickInsertItem) => Command;

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

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

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

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

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

@@ -0,0 +1,15 @@
+import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
+import type { Command, EditorCommand, NextEditorPlugin, QuickInsertPluginOptions, QuickInsertSearchOptions, QuickInsertSharedState } from '@atlaskit/editor-common/types';
+export type { QuickInsertPluginOptions };
+export type QuickInsertPlugin = NextEditorPlugin<'quickInsert', {
+    pluginConfiguration: QuickInsertPluginOptions | undefined;
+    sharedState: QuickInsertSharedState | null;
+    actions: {
+        insertItem: (item: QuickInsertItem) => Command;
+        getSuggestions: (searchOptions: QuickInsertSearchOptions) => QuickInsertItem[];
+    };
+    commands: {
+        openElementBrowserModal: EditorCommand;
+    };
+}>;
+export declare const quickInsertPlugin: QuickInsertPlugin;

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

@@ -0,0 +1,5 @@
+import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
+import type { QuickInsertSearchOptions } from '@atlaskit/editor-common/types';
+type GetQuickInsertSuggestions = (searchOptions: QuickInsertSearchOptions, lazyDefaultItems?: () => QuickInsertItem[], providedItems?: QuickInsertItem[]) => QuickInsertItem[];
+export declare const getQuickInsertSuggestions: GetQuickInsertSuggestions;
+export {};

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

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
+import type { EmptyStateHandler } from '@atlaskit/editor-common/types';
+export declare const MODAL_WRAPPER_PADDING = 16;
+export interface Props {
+    getItems: (query?: string, category?: string) => QuickInsertItem[];
+    onInsertItem: (item: QuickInsertItem) => void;
+    isOpen?: boolean;
+    onClose: () => void;
+    helpUrl?: string | undefined;
+    emptyStateHandler?: EmptyStateHandler;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};
+export default _default;

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

@@ -0,0 +1,5 @@
+import type { IntlShape } from 'react-intl-next';
+export declare function getCategories(intl: IntlShape): {
+    title: string;
+    name: string;
+}[];