@atlaskit/editor-plugin-panel
Version:
Panel plugin for @atlaskit/editor-core.
42 lines • 1.26 kB
JavaScript
import React, { useCallback } from 'react';
import { useIntl } from 'react-intl';
import { PanelType } from '@atlaskit/adf-schema/panel';
import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
import { createPanelAction } from '../../pm-plugins/commands/create-panel-action';
const getPanelAttributes = panelType => panelType === PanelType.CUSTOM ? {
panelType,
panelIcon: ':rainbow:',
panelIconId: '1f308',
panelIconText: '🌈',
// Custom panel color is stored in ADF, not applied as UI styling.
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
panelColor: '#E6FCFF'
} : {
panelType
};
export const PanelQuickInsertMenuItem = ({
api,
icon: Icon,
panelType,
title
}) => {
const {
formatMessage
} = useIntl();
const onSelect = useCallback(({
editorView,
insert,
source
}) => createPanelAction({
api,
attributes: getPanelAttributes(panelType),
inputMethod: source,
state: editorView.state,
typeAheadInsert: insert
}), [api, panelType]);
return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
iconBefore: /*#__PURE__*/React.createElement(Icon, null),
onSelect: onSelect,
title: formatMessage(title)
});
};