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

Quick insert plugin for @atlaskit/editor-core

import React from 'react';
import { useIntl } from 'react-intl';
import { BLOCK_TEMPLATES_SECTION, DATA_AND_CHARTS_SECTION, EMBED_SECTION, MEDIA_SECTION, MENU, OTHER_SECTION, RECOMMENDED_SECTION, ROVO_SECTION, STRUCTURE_SECTION, TEXT_FORMATTING_SECTION, VIEW_ALL_ELEMENTS_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
import { QuickInsertMenuRoot } from '@atlaskit/editor-common/quick-insert/menu-root';
import { QuickInsertMenuSection } from '@atlaskit/editor-common/quick-insert/menu-section';
import { messages } from '@atlaskit/editor-common/quick-insert/messages';
import { CATEGORY_VIEW_MORE_RANK, QUICK_INSERT_MENU_RANK } from '@atlaskit/editor-common/quick-insert/rank';
import { getMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-get-menu-footer-section-key';
import { getSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-get-section-overflow-item-key';
import { createRecommendedSnapshotCache, MAX_RECOMMENDED_ITEMS, RECOMMENDED_SLOT_KEY_PREFIX } from './getRecommendedComponents';
import { QuickInsertMenuFooterItem } from './QuickInsertMenuFooterItem';
import { QuickInsertRecommendedSlot } from './QuickInsertRecommendedSlot';
import { QuickInsertSectionOverflowMenuItem } from './QuickInsertSectionOverflowMenuItem';
const categories = [{
  message: messages.categoryRecommended,
  section: RECOMMENDED_SECTION
}, {
  message: messages.categoryStructure,
  section: STRUCTURE_SECTION
}, {
  message: messages.categoryMedia,
  section: MEDIA_SECTION
}, {
  message: messages.categoryEmbed,
  section: EMBED_SECTION
}, {
  message: messages.categoryTextFormatting,
  section: TEXT_FORMATTING_SECTION
}, {
  message: messages.categoryRovo,
  section: ROVO_SECTION
}, {
  message: messages.categoryDataAndCharts,
  section: DATA_AND_CHARTS_SECTION
}, {
  message: messages.categoryBlockTemplates,
  section: BLOCK_TEMPLATES_SECTION
}, {
  message: messages.categoryOther,
  section: OTHER_SECTION
}];
const createSectionComponent = message => {
  const SectionComponent = ({
    children
  }) => {
    const {
      formatMessage
    } = useIntl();
    return /*#__PURE__*/React.createElement(QuickInsertMenuSection, {
      title: formatMessage(message)
    }, children);
  };
  return SectionComponent;
};
export const getQuickInsertComponents = ({
  api,
  includeElementBrowserItems,
  isRecommendedItem
}) => {
  const recommendedSnapshot = createRecommendedSnapshotCache({
    api,
    isRecommendedItem
  });
  const recommendedSlots = Array.from({
    length: MAX_RECOMMENDED_ITEMS
  }, (_, index) => ({
    key: `${RECOMMENDED_SLOT_KEY_PREFIX}${index}`,
    type: 'menu-item',
    parents: [{
      key: RECOMMENDED_SECTION.key,
      type: RECOMMENDED_SECTION.type,
      rank: index
    }],
    match: () => null,
    isHidden: ({
      surfaceContext
    } = {}) => !recommendedSnapshot.getSnapshot(surfaceContext)[index],
    component: props => /*#__PURE__*/React.createElement(QuickInsertRecommendedSlot, {
      ...props,
      index,
      getSnapshot: recommendedSnapshot.getSnapshot
    })
  }));
  return [{
    key: MENU.key,
    type: MENU.type,
    component: QuickInsertMenuRoot
  }, ...recommendedSlots, ...categories.flatMap(({
    message,
    section
  }) => [{
    key: section.key,
    type: section.type,
    parents: [{
      key: MENU.key,
      type: MENU.type,
      rank: QUICK_INSERT_MENU_RANK[section.key]
    }],
    component: createSectionComponent(message),
    isHidden: section.key === RECOMMENDED_SECTION.key ? ({
      surfaceContext
    } = {}) => recommendedSnapshot.getSnapshot(surfaceContext).length === 0 : undefined
  }, ...(includeElementBrowserItems && section.key !== RECOMMENDED_SECTION.key ? [{
    key: getSectionOverflowItemKey(section.key),
    type: 'menu-item',
    parents: [{
      key: section.key,
      type: section.type,
      rank: CATEGORY_VIEW_MORE_RANK
    }],
    component: () => /*#__PURE__*/React.createElement(QuickInsertSectionOverflowMenuItem, {
      api,
      category: section.key
    })
  }] : [])]), ...(includeElementBrowserItems ? [{
    key: getMenuFooterSectionKey(MENU.key),
    type: 'menu-section',
    parents: [{
      key: MENU.key,
      type: MENU.type,
      rank: Number.MAX_SAFE_INTEGER
    }]
  }, {
    key: VIEW_ALL_ELEMENTS_MENU_ITEM.key,
    type: VIEW_ALL_ELEMENTS_MENU_ITEM.type,
    parents: [{
      key: getMenuFooterSectionKey(MENU.key),
      type: 'menu-section',
      rank: 100
    }],
    component: () => /*#__PURE__*/React.createElement(QuickInsertMenuFooterItem, {
      api
    })
  }] : [])];
};