@atlaskit/editor-plugin-quick-insert/dist/es2019/ui/getLegacyCompatibleComponents.js

Quick insert plugin for @atlaskit/editor-core

import React from 'react';
import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
import { getQuickInsertMenuItemParents } from '@atlaskit/editor-common/quick-insert/get-menu-item-parents';
import { getQuickInsertProviderMenuItemKey } from '@atlaskit/editor-common/quick-insert/get-provider-menu-item-key';
import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
import { getSnippetPreviewImageUrls } from '@atlaskit/editor-common/quick-insert/snippet-preview-image-urls';
import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
import AppsIcon from '@atlaskit/icon/core/apps';
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
const LegacyQuickInsertProviderMenuItem = ({
  item,
  onInsert
}) => {
  const {
    editorView,
    isOffline
  } = useQuickInsertContext();
  const isDisabled = item.isDisabledOffline === true && isOffline;
  const onSelect = ({
    insert,
    source
  }) => {
    const result = item.action(insert, editorView.state, source);
    if (result) {
      onInsert(item);
    }
    return result;
  };
  const Icon = item.icon;
  const itemKey = item.key === undefined ? undefined : String(item.key);
  const snippetKeyPrefix = 'snippet-extension:snippet-';
  const previewKey = itemKey !== null && itemKey !== void 0 && itemKey.startsWith(snippetKeyPrefix) ? itemKey.slice(snippetKeyPrefix.length) : undefined;
  const previewImageUrls = isExperimentEnabled('platform_editor_slash_command') && previewKey ? getSnippetPreviewImageUrls(previewKey) : undefined;
  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
    iconBefore: Icon ? /*#__PURE__*/React.createElement(Icon, null) : /*#__PURE__*/React.createElement(AppsIcon, {
      label: ""
    }),
    isDisabled: isDisabled,
    onSelect: onSelect,
    previewImageUrls: previewImageUrls,
    shortcut: item.keyshortcut,
    title: item.title
  });
};
const getItemIdentity = (item, index) => {
  var _ref, _item$key;
  return String((_ref = (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.id) !== null && _ref !== void 0 ? _ref : index);
};
const getComponentsFromLegacyItems = (items, onInsert) => items.map((item, index) => {
  var _item$priority;
  const identity = getItemIdentity(item, index);
  return {
    type: 'menu-item',
    key: getQuickInsertProviderMenuItemKey(identity, item.app),
    parents: getQuickInsertMenuItemParents({
      category: item.category,
      legacyCategories: item.categories,
      rank: (_item$priority = item.priority) !== null && _item$priority !== void 0 ? _item$priority : index
    }),
    component: () => /*#__PURE__*/React.createElement(LegacyQuickInsertProviderMenuItem, {
      item: item,
      onInsert: onInsert
    }),
    match: createQuickInsertMatcher(() => ({
      description: item.description,
      keywords: item.keywords,
      shortcut: item.keyshortcut,
      title: item.title
    }))
  };
});
export const getLegacyCompatibleComponents = ({
  directComponents,
  itemFilter,
  onInsert,
  providedItems
}) => {
  const filteredItems = itemFilter ? providedItems.filter(itemFilter) : providedItems;
  const allowedKeys = new Set(filteredItems.map((item, index) => getItemIdentity(item, index)));
  const directComponentsWithRenderer = directComponents.filter(component => typeof component.component === 'function');
  const namespacedDirectComponents = directComponentsWithRenderer.filter(component => !itemFilter || allowedKeys.has(component.key)).map(component => {
    var _component$match;
    const item = filteredItems.find((candidate, index) => getItemIdentity(candidate, index) === component.key);
    return {
      ...component,
      key: getQuickInsertProviderMenuItemKey(component.key, item === null || item === void 0 ? void 0 : item.app),
      component: item ? props => component.component({
        ...props,
        onInsert: () => onInsert(item)
      }) : component.component,
      match: (_component$match = component.match) !== null && _component$match !== void 0 ? _component$match : item ? createQuickInsertMatcher(() => ({
        description: item.description,
        keywords: item.keywords,
        shortcut: item.keyshortcut,
        title: item.title
      })) : undefined
    };
  });
  const directComponentKeys = new Set(directComponentsWithRenderer.map(component => component.key));
  const fallbackComponents = getComponentsFromLegacyItems(filteredItems.filter((item, index) => !directComponentKeys.has(getItemIdentity(item, index))), onInsert);
  return [...fallbackComponents, ...namespacedDirectComponents];
};