@atlaskit/editor-plugin-selection-extension
Version:
editor-plugin-selection-extension plugin for @atlaskit/editor-core
141 lines • 6.39 kB
JavaScript
/* SelectionExtensionDropdownItem.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./SelectionExtensionDropdownItem.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useRef, useState } from 'react';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { EXTENSION_MENU_ITEM_TEST_ID } from '@atlaskit/editor-common/block-menu';
import { ToolbarDropdownItem, ToolbarTooltip } from '@atlaskit/editor-toolbar';
import Lozenge from '@atlaskit/lozenge';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box } from '@atlaskit/primitives/compiled';
import { selectionExtensionPluginKey } from '../../pm-plugins/main';
import { getSelectionAdfInfoNew, getSelectionTextInfoNew } from '../../pm-plugins/utils';
import { SelectionExtensionActionTypes } from '../../types';
import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
const styles = {
svgOverflow: "_1wrmewfl _172sewfl",
contentWrapper: "_1e0c1txw _4cvr1h6o _1ul9idpf",
contentWrapperWithJustifyContent: "_1e0c1txw _4cvr1h6o _1bah1yb4 _1ul9idpf",
label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
lozenge: "_18u01b66 _1o9zidpf"
};
export const SelectionExtensionDropdownItem = ({
dropdownItem
}) => {
const IconComponent = dropdownItem.icon;
const {
api,
editorView,
extensionKey,
extensionSource,
extensionLocation
} = useSelectionExtensionComponentContext();
const handleClick = () => {
var _api$blockControls, _api$blockControls$sh, _dropdownItem$onClick, _api$analytics;
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 || editorView.state.selection;
if (dropdownItem.contentComponent) {
const selectionInfo = getSelectionTextInfoNew(selection, editorView, api);
api.core.actions.execute(api.selectionExtension.commands.setActiveExtension({
extension: dropdownItem,
selection: selectionInfo
}));
}
api.core.actions.execute(({
tr
}) => {
const {
selectedNode,
nodePos
} = getSelectionAdfInfoNew(selection);
tr.setMeta(selectionExtensionPluginKey, {
type: SelectionExtensionActionTypes.SET_SELECTED_NODE,
selectedNode,
nodePos
});
if (fg('platform_editor_block_menu_v2_patch_1')) {
if (extensionLocation === 'block-menu') {
var _api$blockControls2;
api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.toggleBlockMenu({
closeMenu: true
})({
tr
});
}
} else {
var _api$blockControls3;
api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.toggleBlockMenu({
closeMenu: true
})({
tr
});
}
return tr;
});
(_dropdownItem$onClick = dropdownItem.onClick) === null || _dropdownItem$onClick === void 0 ? void 0 : _dropdownItem$onClick.call(dropdownItem);
(_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
action: ACTION.CLICKED,
actionSubject: ACTION_SUBJECT.BUTTON,
actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_ITEM,
eventType: EVENT_TYPE.TRACK,
attributes: {
extensionKey,
extensionSource,
extensionLocation,
extensionElement: 'dropdown-item',
extensionItemKey: dropdownItem.key
}
});
};
const labelRef = useRef(null);
const [isTruncated, setIsTruncated] = useState(false);
const handleMouseEnter = useCallback(() => {
const el = labelRef.current;
if (el) {
setIsTruncated(el.scrollWidth > el.clientWidth);
}
}, []);
const iconSize = extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu' ? 'small' : undefined;
const iconElement = IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
size: iconSize,
label: ""
}) : undefined;
const elemBeforeIcon = iconElement && extensionLocation === 'block-menu' ? /*#__PURE__*/React.createElement("span", {
className: ax([styles.svgOverflow])
}, iconElement) : iconElement;
if (fg('platform_editor_block_menu_v2_patch_2')) {
return /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: isTruncated ? dropdownItem.label : null,
position: "top"
}, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
elemBefore: elemBeforeIcon,
onClick: handleClick,
isDisabled: dropdownItem.isDisabled,
testId: EXTENSION_MENU_ITEM_TEST_ID
}, /*#__PURE__*/React.createElement(Box, {
as: "span",
xcss: fg('platform_editor_block_menu_v2_patch_5') ? styles.contentWrapperWithJustifyContent : styles.contentWrapper,
onMouseOver: handleMouseEnter
}, /*#__PURE__*/React.createElement(Box, {
as: "span",
xcss: styles.label,
ref: labelRef
}, dropdownItem.label), dropdownItem.lozenge ? /*#__PURE__*/React.createElement(Box, {
as: "span",
xcss: styles.lozenge
}, /*#__PURE__*/React.createElement(Lozenge, {
appearance: fg('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
}, dropdownItem.lozenge.label)) : undefined)));
}
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
elemBefore: elemBeforeIcon,
testId: EXTENSION_MENU_ITEM_TEST_ID,
onClick: handleClick,
isDisabled: dropdownItem.isDisabled
}, dropdownItem.label, dropdownItem.lozenge ? /*#__PURE__*/React.createElement(Box, {
as: "span",
xcss: styles.lozenge
}, /*#__PURE__*/React.createElement(Lozenge, {
appearance: fg('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
}, dropdownItem.lozenge.label)) : undefined);
};