UNPKG

@atlaskit/editor-plugin-block-menu

Version:

BlockMenu plugin for @atlaskit/editor-core

106 lines (104 loc) 4.22 kB
import React, { useCallback } from 'react'; import { injectIntl, useIntl } from 'react-intl'; import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics'; import { BLOCK_MENU_ACTION_TEST_ID } from '@atlaskit/editor-common/block-menu'; import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'; import { copyLinkToBlock, formatShortcut } from '@atlaskit/editor-common/keymaps'; import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages'; import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar'; import LinkIcon from '@atlaskit/icon/core/link'; import { fg } from '@atlaskit/platform-feature-flags'; import { FLAG_ID } from '../blockMenuPluginType'; import { blockMenuPluginKey } from '../pm-plugins/main'; import { useBlockMenu } from './block-menu-provider'; import { BLOCK_MENU_ITEM_NAME } from './consts'; import { copyLink } from './utils/copyLink'; const CopyLinkDropdownItemContent = ({ api, config }) => { const { formatMessage } = useIntl(); const { onDropdownOpenChanged } = useBlockMenu(); const { getLinkPath, blockLinkHashPrefix } = config || {}; const shortcut = formatShortcut(copyLinkToBlock); const { preservedSelection, defaultSelection } = useSharedPluginStateWithSelector(api, ['blockControls', 'selection'], ({ blockControlsState, selectionState }) => { return { preservedSelection: blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.preservedSelection, defaultSelection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection }; }); const selection = preservedSelection || defaultSelection; const handleClick = useCallback(() => { if (!selection) { return; } api === null || api === void 0 ? void 0 : api.core.actions.execute(({ tr }) => { var _api$analytics, _api$analytics$action, _api$blockControls, _api$blockControls$co; const payload = { action: ACTION.CLICKED, actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM, attributes: { menuItemName: BLOCK_MENU_ITEM_NAME.COPY_LINK_TO_BLOCK }, 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); api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$co = _api$blockControls.commands) === null || _api$blockControls$co === void 0 ? void 0 : _api$blockControls$co.toggleBlockMenu({ closeMenu: true })({ tr }); return tr; }); onDropdownOpenChanged(false); copyLink({ getLinkPath, blockLinkHashPrefix, selection }).then(success => { if (success) { api === null || api === void 0 ? void 0 : api.core.actions.execute(({ tr }) => { tr.setMeta(blockMenuPluginKey, { showFlag: FLAG_ID.LINK_COPIED_TO_CLIPBOARD }); return tr; }); } }); }, [api, blockLinkHashPrefix, getLinkPath, onDropdownOpenChanged, selection]); // Hide copy link when `platform_editor_adf_with_localid` feature flag is off if (!fg('platform_editor_adf_with_localid')) { return null; } return /*#__PURE__*/React.createElement(ToolbarDropdownItem, { onClick: handleClick, elemBefore: /*#__PURE__*/React.createElement(LinkIcon, { label: "", size: "small" }), elemAfter: shortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, { shortcut: shortcut }) : undefined, ariaKeyshortcuts: shortcut, testId: BLOCK_MENU_ACTION_TEST_ID.COPY_LINK }, formatMessage(messages.copyLinkToSelection)); }; // eslint-disable-next-line @typescript-eslint/ban-types export const CopyLinkDropdownItem = injectIntl(CopyLinkDropdownItemContent);