@atlaskit/editor-plugin-block-menu
Version:
BlockMenu plugin for @atlaskit/editor-core
51 lines • 2.1 kB
JavaScript
import React, { useCallback } from 'react';
import { useIntl } from 'react-intl';
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { blockMenuMessages } from '@atlaskit/editor-common/messages';
import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
import ChangesIcon from '@atlaskit/icon/core/changes';
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
import { fg } from '@atlaskit/platform-feature-flags';
import { BLOCK_MENU_ITEM_NAME } from './consts';
export const FormatMenuComponent = ({
api,
children
}) => {
const {
formatMessage
} = useIntl();
const formatMenuLabel = fg('platform_editor_block_menu_v2_patch_2') ? blockMenuMessages.changeFormat : blockMenuMessages.turnInto;
const handleClick = useCallback(() => {
api === null || api === void 0 ? void 0 : api.core.actions.execute(({
tr
}) => {
var _api$analytics, _api$analytics$action;
const payload = {
action: ACTION.CLICKED,
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
attributes: {
menuItemName: BLOCK_MENU_ITEM_NAME.FORMAT_MENU
},
eventType: EVENT_TYPE.UI
};
api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent(payload)(tr);
return tr;
});
}, [api]);
return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
text: formatMessage(formatMenuLabel),
elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
label: "",
size: "small"
}),
elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
label: "",
size: "small"
}),
enableMaxHeight: true,
onClick: handleClick,
dropdownTestId: "editor-turn-into-menu",
testId: fg('cc_blocks_changeboarding') ? 'turn-into-block-menu-btn' : undefined,
shouldFitContainer: true
}, children);
};