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

Quick insert plugin for @atlaskit/editor-core

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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 { 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';
var 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
}];
var createSectionComponent = function createSectionComponent(message) {
  var SectionComponent = function SectionComponent(_ref) {
    var children = _ref.children;
    var _useIntl = useIntl(),
      formatMessage = _useIntl.formatMessage;
    return /*#__PURE__*/React.createElement(QuickInsertMenuSection, {
      title: formatMessage(message)
    }, children);
  };
  return SectionComponent;
};
export var getQuickInsertComponents = function getQuickInsertComponents(_ref2) {
  var api = _ref2.api,
    includeElementBrowserItems = _ref2.includeElementBrowserItems,
    isRecommendedItem = _ref2.isRecommendedItem;
  var recommendedSnapshot = createRecommendedSnapshotCache({
    api: api,
    isRecommendedItem: isRecommendedItem
  });
  var recommendedSlots = Array.from({
    length: MAX_RECOMMENDED_ITEMS
  }, function (_, index) {
    return {
      key: "".concat(RECOMMENDED_SLOT_KEY_PREFIX).concat(index),
      type: 'menu-item',
      parents: [{
        key: RECOMMENDED_SECTION.key,
        type: RECOMMENDED_SECTION.type,
        rank: index
      }],
      match: function match() {
        return null;
      },
      isHidden: function isHidden() {
        var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
          surfaceContext = _ref3.surfaceContext;
        return !recommendedSnapshot.getSnapshot(surfaceContext)[index];
      },
      component: function component(props) {
        return /*#__PURE__*/React.createElement(QuickInsertRecommendedSlot, _objectSpread(_objectSpread({}, props), {}, {
          index: index,
          getSnapshot: recommendedSnapshot.getSnapshot
        }));
      }
    };
  });
  return [{
    key: MENU.key,
    type: MENU.type,
    component: QuickInsertMenuRoot
  }].concat(recommendedSlots, _toConsumableArray(categories.flatMap(function (_ref4) {
    var message = _ref4.message,
      section = _ref4.section;
    return [{
      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 ? function () {
        var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
          surfaceContext = _ref5.surfaceContext;
        return recommendedSnapshot.getSnapshot(surfaceContext).length === 0;
      } : undefined
    }].concat(_toConsumableArray(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: function component() {
        return /*#__PURE__*/React.createElement(QuickInsertSectionOverflowMenuItem, {
          api: api,
          category: section.key
        });
      }
    }] : []));
  })), _toConsumableArray(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: function component() {
      return /*#__PURE__*/React.createElement(QuickInsertMenuFooterItem, {
        api: api
      });
    }
  }] : []));
};