@atlaskit/editor-plugin-quick-insert 0.1.0

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

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

package/dist/es2019/commands.js

@@ -0,0 +1,29 @@
+import { insertSelectedItem } from '@atlaskit/editor-common/insert';
+import { pluginKey } from './plugin-key';
+export const openElementBrowserModal = ({
+  tr
+}) => tr.setMeta(pluginKey, {
+  isElementBrowserModalOpen: true
+});
+export const closeElementBrowserModal = () => (state, dispatch) => {
+  if (dispatch) {
+    dispatch(state.tr.setMeta(pluginKey, {
+      isElementBrowserModalOpen: false
+    }));
+  }
+  return true;
+};
+
+// this method was adapted from the typeahead plugin so we respect the API for quick insert items
+export const insertItem = item => (state, dispatch) => {
+  const insert = (maybeNode, opts = {}) => {
+    return insertSelectedItem(maybeNode, opts)(state, state.tr, state.selection.head);
+  };
+  const 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;
+};

package/dist/es2019/index.js

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

package/dist/es2019/plugin-key.js

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

package/dist/es2019/plugin.js

@@ -0,0 +1,150 @@
+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 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({
+        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;
+    }
+    const quickInsertState = pluginKey.getState(editorState);
+    if (!quickInsertState) {
+      return null;
+    }
+    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));
+  }
+  return true;
+};
+function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, emptyStateHandler) {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init() {
+        return {
+          isElementBrowserModalOpen: false,
+          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: () => memoProcessQuickInsertItems(defaultItems || [], getIntl())
+        };
+      },
+      apply(tr, pluginState) {
+        const meta = tr.getMeta(pluginKey);
+        if (meta) {
+          const keys = Object.keys(meta);
+          const changed = keys.some(key => {
+            return pluginState[key] !== meta[key];
+          });
+          if (changed) {
+            const newState = {
+              ...pluginState,
+              ...meta
+            };
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+        return pluginState;
+      }
+    },
+    view(editorView) {
+      const providerHandler = async (_name, providerPromise) => {
+        if (providerPromise) {
+          try {
+            const provider = await providerPromise;
+            const providedItems = await provider.getItems();
+            setProviderState({
+              provider,
+              providedItems
+            })(editorView.state, editorView.dispatch);
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.error('Error getting items from quick insert provider', e);
+          }
+        }
+      };
+      providerFactory.subscribe('quickInsertProvider', providerHandler);
+      return {
+        destroy() {
+          providerFactory.unsubscribe('quickInsertProvider', providerHandler);
+        }
+      };
+    }
+  });
+}

package/dist/es2019/search.js

@@ -0,0 +1,16 @@
+import { find } from '@atlaskit/editor-common/quick-insert';
+import { dedupe } from '@atlaskit/editor-common/utils';
+export const getQuickInsertSuggestions = (searchOptions, lazyDefaultItems = () => [], providedItems) => {
+  const {
+    query,
+    category,
+    disableDefaultItems,
+    featuredItems
+  } = searchOptions;
+  const defaultItems = disableDefaultItems ? [] : lazyDefaultItems();
+  const items = providedItems ? dedupe([...defaultItems, ...providedItems], item => item.title) : defaultItems;
+  if (featuredItems) {
+    return items.filter(item => item.featured);
+  }
+  return find(query || '', category === 'all' || !category ? items : items.filter(item => item.categories && item.categories.includes(category)));
+};

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

@@ -0,0 +1,136 @@
+/** @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 const MODAL_WRAPPER_PADDING = 16;
+const actionsStyles = css({
+  display: 'inline-flex',
+  margin: `0 ${"var(--ds-space-negative-050, -4px)"}`
+});
+const actionItemStyles = css({
+  flex: '1 0 auto',
+  margin: `0 ${"var(--ds-space-050, 4px)"}`
+});
+const wrapperStyles = css({
+  display: 'flex',
+  flex: '1 1 auto',
+  boxSizing: 'border-box',
+  padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0 10px`,
+  overflow: 'hidden',
+  backgroundColor: `${themed({
+    light: `var(--ds-surface-overlay, ${N0})`,
+    dark: `var(--ds-surface-overlay, ${DN50})`
+  })()}`,
+  borderRadius: `${borderRadius()}px`
+});
+const modalFooterStyles = css({
+  display: 'flex',
+  padding: `${"var(--ds-space-200, 16px)"}`,
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+const ModalElementBrowser = props => {
+  const [selectedItem, setSelectedItem] = useState();
+  const {
+    helpUrl,
+    intl,
+    onClose,
+    onInsertItem: onInsertItemFn
+  } = props;
+  const onSelectItem = useCallback(item => {
+    setSelectedItem(item);
+  }, [setSelectedItem]);
+  const onInsertItem = useCallback(item => {
+    onInsertItemFn(item);
+  }, [onInsertItemFn]);
+  const RenderFooter = useCallback(() => jsx(Footer, {
+    onInsert: () => 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.
+  const onKeyDown = useCallback(e => {
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  }, [onClose]);
+  const RenderBody = useCallback(() => 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.
+const onModalClick = e => e.stopPropagation();
+const Footer = ({
+  onInsert,
+  beforeElement
+}) => {
+  const {
+    onClose
+  } = useModal();
+  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"))));
+};
+const HelpLink = (url, helpText) => 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/es2019/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'
+  }];
+}
+const 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/es2019/ui/ModalElementBrowser/index.js

@@ -0,0 +1,51 @@
+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';
+const Modal = ({
+  quickInsertState,
+  editorView,
+  helpUrl
+}) => {
+  const getItems = useCallback((query, category) => getQuickInsertSuggestions({
+    query,
+    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]);
+  const focusInEditor = useCallback(() => {
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+  }, [editorView]);
+  const onInsertItem = useCallback(item => {
+    closeElementBrowserModal()(editorView.state, editorView.dispatch);
+    focusInEditor();
+    insertItem(item)(editorView.state, editorView.dispatch);
+  }, [editorView, focusInEditor]);
+  const onClose = useCallback(() => {
+    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 (({
+  editorView,
+  helpUrl,
+  pluginInjectionAPI
+}) => {
+  const {
+    quickInsertState
+  } = useSharedPluginState(pluginInjectionAPI, ['quickInsert']);
+  return /*#__PURE__*/React.createElement(Modal, {
+    quickInsertState: quickInsertState !== null && quickInsertState !== void 0 ? quickInsertState : undefined,
+    editorView: editorView,
+    helpUrl: helpUrl
+  });
+});

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

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

package/dist/esm/commands.js

@@ -0,0 +1,35 @@
+import { insertSelectedItem } from '@atlaskit/editor-common/insert';
+import { pluginKey } from './plugin-key';
+export var openElementBrowserModal = function openElementBrowserModal(_ref) {
+  var tr = _ref.tr;
+  return tr.setMeta(pluginKey, {
+    isElementBrowserModalOpen: true
+  });
+};
+export var closeElementBrowserModal = function closeElementBrowserModal() {
+  return function (state, dispatch) {
+    if (dispatch) {
+      dispatch(state.tr.setMeta(pluginKey, {
+        isElementBrowserModalOpen: false
+      }));
+    }
+    return true;
+  };
+};
+
+// this method was adapted from the typeahead plugin so we respect the API for quick insert items
+export 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 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;
+  };
+};

package/dist/esm/index.js

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

package/dist/esm/plugin-key.js

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