@atlaskit/editor-plugin-panel
Version:
Panel plugin for @atlaskit/editor-core.
89 lines • 3.2 kB
JavaScript
import React from 'react';
import { PanelType } from '@atlaskit/adf-schema/panel';
import { blockTypeMessages } from '@atlaskit/editor-common/messages';
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 CheckCircleIcon from '@atlaskit/icon/core/check-circle';
import InformationCircleIcon from '@atlaskit/icon/core/information-circle';
import NoteIcon from '@atlaskit/icon/core/note';
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 { PanelQuickInsertMenuItem } from './PanelQuickInsertMenuItem';
const standardPanelItems = [{
description: blockTypeMessages.infoPanelDescription,
icon: InformationCircleIcon,
keywords: ['panel'],
menuItem: INFO_PANEL_MENU_ITEM,
panelType: PanelType.INFO,
title: blockTypeMessages.infoPanel
}, {
description: blockTypeMessages.notePanelDescription,
icon: NoteIcon,
menuItem: NOTE_PANEL_MENU_ITEM,
panelType: PanelType.NOTE,
title: blockTypeMessages.notePanel
}, {
description: blockTypeMessages.successPanelDescription,
icon: CheckCircleIcon,
keywords: ['tip'],
menuItem: SUCCESS_PANEL_MENU_ITEM,
panelType: PanelType.SUCCESS,
title: blockTypeMessages.successPanel
}, {
description: blockTypeMessages.warningPanelDescription,
icon: WarningOutlineIcon,
menuItem: WARNING_PANEL_MENU_ITEM,
panelType: PanelType.WARNING,
title: blockTypeMessages.warningPanel
}, {
description: blockTypeMessages.errorPanelDescription,
icon: StatusWorkflowCancelledIcon,
menuItem: ERROR_PANEL_MENU_ITEM,
panelType: PanelType.ERROR,
title: blockTypeMessages.errorPanel
}];
const customPanelItem = {
description: blockTypeMessages.customPanelDescription,
icon: PencilIcon,
menuItem: CUSTOM_PANEL_MENU_ITEM,
panelType: PanelType.CUSTOM,
title: blockTypeMessages.customPanel
};
export const getPanelQuickInsertComponents = ({
api,
allowCustomPanel,
allowCustomPanelEdit
}) => {
const allPanelItems = [...standardPanelItems, ...(allowCustomPanel && allowCustomPanelEdit ? [customPanelItem] : [])];
return allPanelItems.map(({
description,
icon,
keywords,
menuItem,
panelType,
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,
icon: icon,
panelType: panelType,
title: title
})
}));
};