@atlaskit/editor-plugin-block-menu
Version:
BlockMenu plugin for @atlaskit/editor-core
129 lines (126 loc) • 7.33 kB
JavaScript
import React, { useCallback, useEffect } from 'react';
import { injectIntl, useIntl } from 'react-intl';
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { BLOCK_MENU_ACTION_TEST_ID } from '@atlaskit/editor-common/block-menu';
import { blockMenuMessages } from '@atlaskit/editor-common/messages';
import { deleteSelectedRange, getSourceNodesFromSelectionRange } from '@atlaskit/editor-common/selection';
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
import DeleteIcon from '@atlaskit/icon/core/delete';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box } from '@atlaskit/primitives/box';
import Text from '@atlaskit/primitives/text';
import { BLOCK_MENU_ITEM_NAME } from './consts';
const DeleteDropdownItemContent = ({
api
}) => {
const {
formatMessage
} = useIntl();
const onClick = () => {
api === null || api === void 0 ? void 0 : api.core.actions.execute(({
tr
}) => {
var _api$analytics, _api$analytics$action, _api$blockControls, _api$blockControls$sh, _api$blockControls2, _api$blockControls2$c;
const payload = {
action: ACTION.CLICKED,
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
attributes: {
menuItemName: BLOCK_MENU_ITEM_NAME.DELETE
},
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);
// Extract node information before deletion
const preservedSelection = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$sh = _api$blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection;
const selection = preservedSelection || tr.selection;
const sourceNodes = getSourceNodesFromSelectionRange(tr, selection);
const nodeCount = sourceNodes.length;
// Fire node deletion analytics event if nodes are being deleted
if (nodeCount > 0) {
var _api$analytics2, _api$analytics2$actio;
const nodeType = sourceNodes.length === 1 ? sourceNodes[0].type.name : 'multiple';
const nodeDeletedPayload = {
action: ACTION.DELETED,
actionSubject: ACTION_SUBJECT.ELEMENT,
attributes: {
inputMethod: INPUT_METHOD.BLOCK_MENU,
nodeType,
nodeCount
},
eventType: EVENT_TYPE.TRACK
};
api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.attachAnalyticsEvent(nodeDeletedPayload)(tr);
}
deleteSelectedRange(tr, preservedSelection);
api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.toggleBlockMenu({
closeMenu: true
})({
tr
});
if (preservedSelection && fg('platform_editor_block_menu_jira_patch_1')) {
var _api$blockControls3, _api$blockControls3$c;
api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : (_api$blockControls3$c = _api$blockControls3.commands) === null || _api$blockControls3$c === void 0 ? void 0 : _api$blockControls3$c.stopPreservingSelection()({
tr
});
}
return tr;
});
api === null || api === void 0 ? void 0 : api.core.actions.focus();
};
const onShowHoverDecoration = useCallback(() => {
api === null || api === void 0 ? void 0 : api.core.actions.execute(({
tr
}) => {
var _api$blockControls4, _api$blockControls4$s, _api$decorations, _api$decorations$comm, _api$decorations$comm2;
// [FEATURE FLAG: platform_editor_block_menu_jira_patch_1]
// Passes preservedSelection (NodeSelection) to hoverDecoration so paragraph nodes
// are correctly highlighted on hover over Delete. Without this, tr.selection is a
// collapsed TextSelection which produces no decorations for paragraphs.
// To clean up: always pass preservedSelection, remove the feature flag check.
const preservedSelection = fg('platform_editor_block_menu_jira_patch_1') ? api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : (_api$blockControls4$s = _api$blockControls4.sharedState.currentState()) === null || _api$blockControls4$s === void 0 ? void 0 : _api$blockControls4$s.preservedSelection : undefined;
api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : (_api$decorations$comm = _api$decorations.commands) === null || _api$decorations$comm === void 0 ? void 0 : (_api$decorations$comm2 = _api$decorations$comm.hoverDecoration) === null || _api$decorations$comm2 === void 0 ? void 0 : _api$decorations$comm2.call(_api$decorations$comm, {
add: true,
selection: preservedSelection
})({
tr
});
return tr;
});
}, [api]);
const onRemoveHoverDecoration = useCallback(() => {
api === null || api === void 0 ? void 0 : api.core.actions.execute(({
tr
}) => {
var _api$decorations2, _api$decorations2$com, _api$decorations2$com2;
api === null || api === void 0 ? void 0 : (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 ? void 0 : (_api$decorations2$com = _api$decorations2.commands) === null || _api$decorations2$com === void 0 ? void 0 : (_api$decorations2$com2 = _api$decorations2$com.removeDecoration) === null || _api$decorations2$com2 === void 0 ? void 0 : _api$decorations2$com2.call(_api$decorations2$com)({
tr
});
return tr;
});
}, [api]);
useEffect(() => {
return () => {
// clean up hover decoration when unmounting
onRemoveHoverDecoration();
};
}, [onRemoveHoverDecoration]);
return /*#__PURE__*/React.createElement(Box, {
onMouseEnter: onShowHoverDecoration,
onMouseLeave: onRemoveHoverDecoration,
onFocus: onShowHoverDecoration,
onBlur: onRemoveHoverDecoration
}, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
color: "var(--ds-icon-danger, #C9372C)",
label: "",
size: "small"
}),
onClick: onClick,
testId: BLOCK_MENU_ACTION_TEST_ID.DELETE
}, /*#__PURE__*/React.createElement(Text, {
as: "span",
color: "color.text.danger"
}, formatMessage(blockMenuMessages.deleteBlock))));
};
// eslint-disable-next-line @typescript-eslint/ban-types
export const DeleteDropdownItem = injectIntl(DeleteDropdownItemContent);