@atlaskit/editor-plugin-quick-insert 0.1.0

package/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/**/*.{js,ts,tsx}', '**/examples/**/*.{js,ts,tsx}'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'warn',
+      },
+    },
+  ],
+};

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-quick-insert

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,30 @@
+# Editor plugin quick insert
+
+Quick insert plugin for @atlaskit/editor-core
+
+**Note:** This component is designed for internal Atlassian development.
+External contributors will be able to use this component but will not be able to submit issues.
+
+## Install
+---
+- **Install** - *yarn add @atlaskit/editor-plugin-quick-insert*
+- **npm** - [@atlaskit/editor-plugin-quick-insert](https://www.npmjs.com/package/@atlaskit/editor-plugin-quick-insert)
+- **Source** - [Bitbucket](https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-plugin-quick-insert)
+- **Bundle** - [unpkg.com](https://unpkg.com/@atlaskit/editor-plugin-quick-insert/dist/)
+
+## Usage
+---
+**Internal use only**
+
+@atlaskit/editor-plugin-quick-insert is intended for internal use by the @atlaskit/editor-core and as a plugin dependency of the Editor within your product.
+
+Direct use of this component is not supported.
+
+Please see [Atlaskit - Editor plugin quick insert](https://atlaskit.atlassian.com/packages/editor/editor-plugin-quick-insert) for documentation and examples for this package.
+
+## Support
+---
+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.

package/dist/cjs/commands.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 tr = _ref.tr;
+  return tr.setMeta(_pluginKey.pluginKey, {
+    isElementBrowserModalOpen: true
+  });
+};
+exports.openElementBrowserModal = openElementBrowserModal;
+var closeElementBrowserModal = function closeElementBrowserModal() {
+  return function (state, dispatch) {
+    if (dispatch) {
+      dispatch(state.tr.setMeta(_pluginKey.pluginKey, {
+        isElementBrowserModalOpen: false
+      }));
+    }
+    return true;
+  };
+};
+
+// 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) {
+  return function (state, dispatch) {
+    var insert = function insert(maybeNode) {
+      var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return (0, _insert.insertSelectedItem)(maybeNode, opts)(state, state.tr, state.selection.head);
+    };
+    var tr = item.action(insert, state);
+
+    /** @note There is no transaction when called without a search currently (different insert) */
+    if (tr && dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+exports.insertItem = insertItem;

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "quickInsertPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.quickInsertPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/plugin-key.js

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

package/dist/cjs/plugin.js

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.quickInsertPlugin = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _commands = require("./commands");
+var _pluginKey = require("./plugin-key");
+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 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: _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);
+        }
+      }
+    },
+    contentComponent: function contentComponent(_ref4) {
+      var editorView = _ref4.editorView;
+      if (options !== null && options !== void 0 && options.enableElementBrowser) {
+        return /*#__PURE__*/_react.default.createElement(_ModalElementBrowser.default, {
+          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.pluginKey.getState(editorState);
+      if (!quickInsertState) {
+        return null;
+      }
+      return {
+        lazyDefaultItems: quickInsertState.lazyDefaultItems,
+        emptyStateHandler: quickInsertState.emptyStateHandler,
+        providedItems: quickInsertState.providedItems,
+        isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
+      };
+    },
+    actions: {
+      insertItem: _commands.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 (0, _search.getQuickInsertSuggestions)(searchOptions, lazyDefaultItems, providedItems);
+      }
+    },
+    commands: {
+      openElementBrowserModal: _commands.openElementBrowserModal
+    }
+  };
+};
+exports.quickInsertPlugin = quickInsertPlugin;
+var setProviderState = function setProviderState(providerState) {
+  return function (state, dispatch) {
+    if (dispatch) {
+      dispatch(state.tr.setMeta(_pluginKey.pluginKey, providerState));
+    }
+    return true;
+  };
+};
+function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, emptyStateHandler) {
+  return new _safePlugin.SafePlugin({
+    key: _pluginKey.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 (0, _quickInsert.memoProcessQuickInsertItems)(defaultItems || [], getIntl());
+          }
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(_pluginKey.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.pluginKey, newState);
+            return newState;
+          }
+        }
+        return pluginState;
+      }
+    },
+    view: function view(editorView) {
+      var providerHandler = /*#__PURE__*/function () {
+        var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, providerPromise) {
+          var provider, providedItems;
+          return _regenerator.default.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/cjs/search.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 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 ? (0, _utils.dedupe)([].concat((0, _toConsumableArray2.default)(defaultItems), (0, _toConsumableArray2.default)(providedItems)), function (item) {
+    return item.title;
+  }) : defaultItems;
+  if (featuredItems) {
+    return items.filter(function (item) {
+      return item.featured;
+    });
+  }
+  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

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MODAL_WRAPPER_PADDING = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _elementBrowser = require("@atlaskit/editor-common/element-browser");
+var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _colors = require("@atlaskit/theme/colors");
+var _components = require("@atlaskit/theme/components");
+var _constants = require("@atlaskit/theme/constants");
+var _categories = require("./categories");
+var _messages = require("./messages");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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 actionsStyles = (0, _react2.css)({
+  display: 'inline-flex',
+  margin: "0 ".concat("var(--ds-space-negative-050, -4px)")
+});
+var actionItemStyles = (0, _react2.css)({
+  flex: '1 0 auto',
+  margin: "0 ".concat("var(--ds-space-050, 4px)")
+});
+var wrapperStyles = (0, _react2.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((0, _components.themed)({
+    light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
+  })()),
+  borderRadius: "".concat((0, _constants.borderRadius)(), "px")
+});
+var modalFooterStyles = (0, _react2.css)({
+  display: 'flex',
+  padding: "var(--ds-space-200, 16px)",
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+var ModalElementBrowser = function ModalElementBrowser(props) {
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectedItem = _useState2[0],
+    setSelectedItem = _useState2[1];
+  var helpUrl = props.helpUrl,
+    intl = props.intl,
+    onClose = props.onClose,
+    onInsertItemFn = props.onInsertItem;
+  var onSelectItem = (0, _react.useCallback)(function (item) {
+    setSelectedItem(item);
+  }, [setSelectedItem]);
+  var onInsertItem = (0, _react.useCallback)(function (item) {
+    onInsertItemFn(item);
+  }, [onInsertItemFn]);
+  var RenderFooter = (0, _react.useCallback)(function () {
+    return (0, _react2.jsx)(Footer, {
+      onInsert: function onInsert() {
+        return onInsertItem(selectedItem);
+      },
+      beforeElement: helpUrl ? HelpLink(helpUrl, intl.formatMessage(_messages.messages.help)) : undefined
+    });
+  }, [onInsertItem, selectedItem, helpUrl, intl]);
+
+  // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  }, [onClose]);
+  var RenderBody = (0, _react.useCallback)(function () {
+    return (0, _react2.jsx)("div", {
+      css: wrapperStyles
+    }, (0, _react2.jsx)(_elementBrowser.ElementBrowser, {
+      categories: (0, _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 (0, _react2.jsx)("div", {
+    "data-editor-popup": true,
+    onClick: onModalClick,
+    onKeyDown: onKeyDown
+  }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, props.isOpen && (0, _react2.jsx)(_modalDialog.default, {
+    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
+  }, (0, _react2.jsx)(RenderBody, null), (0, _react2.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 = (0, _modalDialog.useModal)(),
+    onClose = _useModal.onClose;
+  return (0, _react2.jsx)("div", {
+    css: modalFooterStyles
+  }, beforeElement ? beforeElement : (0, _react2.jsx)("span", null), (0, _react2.jsx)("div", {
+    css: actionsStyles
+  }, (0, _react2.jsx)("div", {
+    css: actionItemStyles
+  }, (0, _react2.jsx)(_customThemeButton.default, {
+    appearance: "primary",
+    onClick: onInsert,
+    testId: "ModalElementBrowser__insert-button"
+  }, "Insert")), (0, _react2.jsx)("div", {
+    css: actionItemStyles
+  }, (0, _react2.jsx)(_customThemeButton.default, {
+    appearance: "subtle",
+    onClick: onClose,
+    testId: "ModalElementBrowser__close-button"
+  }, "Close"))));
+};
+var HelpLink = function HelpLink(url, helpText) {
+  return (0, _react2.jsx)(_customThemeButton.default, {
+    iconBefore: (0, _react2.jsx)(_questionCircle.default, {
+      label: "",
+      size: "medium"
+    }),
+    appearance: "subtle-link",
+    href: url,
+    target: "_blank",
+    testId: "ModalElementBrowser__help-button"
+  }, helpText);
+};
+var _default = (0, _reactIntlNext.injectIntl)(ModalElementBrowser);
+exports.default = _default;

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

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCategories = getCategories;
+var _reactIntlNext = require("react-intl-next");
+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 = (0, _reactIntlNext.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/cjs/ui/ModalElementBrowser/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _commands = require("../../commands");
+var _search = require("../../search");
+var _ModalElementBrowser = _interopRequireDefault(require("./ModalElementBrowser"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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; }
+var Modal = function Modal(_ref) {
+  var quickInsertState = _ref.quickInsertState,
+    editorView = _ref.editorView,
+    helpUrl = _ref.helpUrl;
+  var getItems = (0, _react.useCallback)(function (query, category) {
+    return (0, _search.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 = (0, _react.useCallback)(function () {
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+  }, [editorView]);
+  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]);
+  var onClose = (0, _react.useCallback)(function () {
+    (0, _commands.closeElementBrowserModal)()(editorView.state, editorView.dispatch);
+    focusInEditor();
+  }, [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
+  });
+};
+var _default = function _default(_ref2) {
+  var editorView = _ref2.editorView,
+    helpUrl = _ref2.helpUrl,
+    pluginInjectionAPI = _ref2.pluginInjectionAPI;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionAPI, ['quickInsert']),
+    quickInsertState = _useSharedPluginState.quickInsertState;
+  return /*#__PURE__*/_react.default.createElement(Modal, {
+    quickInsertState: quickInsertState !== null && quickInsertState !== void 0 ? quickInsertState : undefined,
+    editorView: editorView,
+    helpUrl: helpUrl
+  });
+};
+exports.default = _default;