@atlaskit/editor-plugin-block-menu
Version:
BlockMenu plugin for @atlaskit/editor-core
133 lines (129 loc) • 8.18 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DeleteDropdownItem = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _analytics = require("@atlaskit/editor-common/analytics");
var _blockMenu = require("@atlaskit/editor-common/block-menu");
var _messages = require("@atlaskit/editor-common/messages");
var _selection = require("@atlaskit/editor-common/selection");
var _editorToolbar = require("@atlaskit/editor-toolbar");
var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _box = require("@atlaskit/primitives/box");
var _text = _interopRequireDefault(require("@atlaskit/primitives/text"));
var _consts = require("./consts");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
var api = _ref.api;
var _useIntl = (0, _reactIntl.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: _analytics.ACTION.CLICKED,
actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
attributes: {
menuItemName: _consts.BLOCK_MENU_ITEM_NAME.DELETE
},
eventType: _analytics.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 = (0, _selection.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: _analytics.ACTION.DELETED,
actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
attributes: {
inputMethod: _analytics.INPUT_METHOD.BLOCK_MENU,
nodeType: nodeType,
nodeCount: nodeCount
},
eventType: _analytics.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);
}
(0, _selection.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 && (0, _platformFeatureFlags.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 = (0, _react.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 = (0, _platformFeatureFlags.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 = (0, _react.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]);
(0, _react.useEffect)(function () {
return function () {
// clean up hover decoration when unmounting
onRemoveHoverDecoration();
};
}, [onRemoveHoverDecoration]);
return /*#__PURE__*/_react.default.createElement(_box.Box, {
onMouseEnter: onShowHoverDecoration,
onMouseLeave: onRemoveHoverDecoration,
onFocus: onShowHoverDecoration,
onBlur: onRemoveHoverDecoration
}, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
elemBefore: /*#__PURE__*/_react.default.createElement(_delete.default, {
color: "var(--ds-icon-danger, #C9372C)",
label: "",
size: "small"
}),
onClick: onClick,
testId: _blockMenu.BLOCK_MENU_ACTION_TEST_ID.DELETE
}, /*#__PURE__*/_react.default.createElement(_text.default, {
as: "span",
color: "color.text.danger"
}, formatMessage(_messages.blockMenuMessages.deleteBlock))));
};
// eslint-disable-next-line @typescript-eslint/ban-types
var DeleteDropdownItem = exports.DeleteDropdownItem = (0, _reactIntl.injectIntl)(DeleteDropdownItemContent);