@atlaskit/editor-plugin-block-menu
Version:
BlockMenu plugin for @atlaskit/editor-core
124 lines (121 loc) • 6.99 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';
var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
var api = _ref.api;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var onClick = function onClick() {
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
var _api$analytics, _api$blockControls, _api$blockControls2;
var tr = _ref2.tr;
var 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 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent(payload)(tr);
// Extract node information before deletion
var preservedSelection = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.preservedSelection;
var selection = preservedSelection || tr.selection;
var sourceNodes = getSourceNodesFromSelectionRange(tr, selection);
var nodeCount = sourceNodes.length;
// Fire node deletion analytics event if nodes are being deleted
if (nodeCount > 0) {
var _api$analytics2;
var nodeType = sourceNodes.length === 1 ? sourceNodes[0].type.name : 'multiple';
var nodeDeletedPayload = {
action: ACTION.DELETED,
actionSubject: ACTION_SUBJECT.ELEMENT,
attributes: {
inputMethod: INPUT_METHOD.BLOCK_MENU,
nodeType: nodeType,
nodeCount: nodeCount
},
eventType: EVENT_TYPE.TRACK
};
api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.attachAnalyticsEvent(nodeDeletedPayload)(tr);
}
deleteSelectedRange(tr, preservedSelection);
api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.toggleBlockMenu({
closeMenu: true
})({
tr: tr
});
if (preservedSelection && fg('platform_editor_block_menu_jira_patch_1')) {
var _api$blockControls3;
api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || (_api$blockControls3 = _api$blockControls3.commands) === null || _api$blockControls3 === void 0 || _api$blockControls3.stopPreservingSelection()({
tr: tr
});
}
return tr;
});
api === null || api === void 0 || api.core.actions.focus();
};
var onShowHoverDecoration = useCallback(function () {
api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
var _api$blockControls4, _api$decorations, _api$decorations$hove;
var tr = _ref3.tr;
// [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.
var preservedSelection = fg('platform_editor_block_menu_jira_patch_1') ? api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || (_api$blockControls4 = _api$blockControls4.sharedState.currentState()) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.preservedSelection : undefined;
api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 || (_api$decorations = _api$decorations.commands) === null || _api$decorations === void 0 || (_api$decorations$hove = _api$decorations.hoverDecoration) === null || _api$decorations$hove === void 0 || _api$decorations$hove.call(_api$decorations, {
add: true,
selection: preservedSelection
})({
tr: tr
});
return tr;
});
}, [api]);
var onRemoveHoverDecoration = useCallback(function () {
api === null || api === void 0 || api.core.actions.execute(function (_ref4) {
var _api$decorations2, _api$decorations2$rem;
var tr = _ref4.tr;
api === null || api === void 0 || (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 || (_api$decorations2 = _api$decorations2.commands) === null || _api$decorations2 === void 0 || (_api$decorations2$rem = _api$decorations2.removeDecoration) === null || _api$decorations2$rem === void 0 || _api$decorations2$rem.call(_api$decorations2)({
tr: tr
});
return tr;
});
}, [api]);
useEffect(function () {
return function () {
// 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 var DeleteDropdownItem = injectIntl(DeleteDropdownItemContent);