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

Panel plugin for @atlaskit/editor-core.

import React from 'react';
import { PanelType } from '@atlaskit/adf-schema/panel';
import { messages as blockTypeMessages } from '@atlaskit/editor-common/messages/block-type';
import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
import { CUSTOM_PANEL_MENU_ITEM, ERROR_PANEL_MENU_ITEM, INFO_PANEL_MENU_ITEM, NOTE_PANEL_MENU_ITEM, STRUCTURE_SECTION, SUCCESS_PANEL_MENU_ITEM, WARNING_PANEL_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
import PencilIcon from '@atlaskit/icon-lab/core/pencil';
import StatusWorkflowCancelledIcon from '@atlaskit/icon-lab/core/status-workflow-cancelled';
import WarningOutlineIcon from '@atlaskit/icon-lab/core/warning-outline';
import CheckCircleIcon from '@atlaskit/icon/core/check-circle';
import InformationCircleIcon from '@atlaskit/icon/core/information-circle';
import NoteIcon from '@atlaskit/icon/core/note';
import { PanelQuickInsertMenuItem } from './PanelQuickInsertMenuItem';
const standardPanelItems = [{
  description: blockTypeMessages.infoPanelDescription,
  icon: InformationCircleIcon,
  keywords: ['panel'],
  menuItem: INFO_PANEL_MENU_ITEM,
  panelType: PanelType.INFO,
  previewImageUrls: {
    light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVKL.png',
    dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVHA.png'
  },
  title: blockTypeMessages.infoPanel
}, {
  description: blockTypeMessages.notePanelDescription,
  icon: NoteIcon,
  menuItem: NOTE_PANEL_MENU_ITEM,
  panelType: PanelType.NOTE,
  previewImageUrls: {
    light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVKJ.png',
    dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVHB.png'
  },
  title: blockTypeMessages.notePanel
}, {
  description: blockTypeMessages.successPanelDescription,
  icon: CheckCircleIcon,
  keywords: ['tip'],
  menuItem: SUCCESS_PANEL_MENU_ITEM,
  panelType: PanelType.SUCCESS,
  previewImageUrls: {
    light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVKP.png',
    dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVH6.png'
  },
  title: blockTypeMessages.successPanel
}, {
  description: blockTypeMessages.warningPanelDescription,
  icon: WarningOutlineIcon,
  menuItem: WARNING_PANEL_MENU_ITEM,
  panelType: PanelType.WARNING,
  previewImageUrls: {
    light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVKO.png',
    dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVHC.png'
  },
  title: blockTypeMessages.warningPanel
}, {
  description: blockTypeMessages.errorPanelDescription,
  icon: StatusWorkflowCancelledIcon,
  menuItem: ERROR_PANEL_MENU_ITEM,
  panelType: PanelType.ERROR,
  previewImageUrls: {
    light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVKQ.png',
    dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVH1.png'
  },
  title: blockTypeMessages.errorPanel
}];
const customPanelItem = {
  description: blockTypeMessages.customPanelDescription,
  icon: PencilIcon,
  menuItem: CUSTOM_PANEL_MENU_ITEM,
  panelType: PanelType.CUSTOM,
  previewImageUrls: {
    light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVKN.png',
    dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVHD.png'
  },
  title: blockTypeMessages.customPanel
};
export const getPanelQuickInsertComponents = ({
  api,
  allowCustomPanel,
  allowCustomPanelEdit
}) => {
  const allPanelItems = [...standardPanelItems, ...(allowCustomPanel && allowCustomPanelEdit ? [customPanelItem] : [])];
  return allPanelItems.map(({
    description,
    icon,
    keywords,
    menuItem,
    panelType,
    previewImageUrls,
    title
  }) => ({
    key: menuItem.key,
    type: menuItem.type,
    parents: [{
      key: STRUCTURE_SECTION.key,
      type: STRUCTURE_SECTION.type,
      rank: STRUCTURE_SECTION_RANK[menuItem.key]
    }],
    match: createQuickInsertMatcher(({
      formatMessage
    }) => ({
      description: formatMessage(description),
      keywords,
      title: formatMessage(title)
    })),
    component: () => /*#__PURE__*/React.createElement(PanelQuickInsertMenuItem, {
      api: api,
      description: description,
      icon: icon,
      panelType: panelType,
      previewImageUrls: previewImageUrls,
      title: title
    })
  }));
};