@atlaskit/editor-plugin-selection-extension
Version:
editor-plugin-selection-extension plugin for @atlaskit/editor-core
150 lines (149 loc) • 8.29 kB
JavaScript
/* SelectionExtensionDropdownItem.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SelectionExtensionDropdownItem = void 0;
require("./SelectionExtensionDropdownItem.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _blockMenu = require("@atlaskit/editor-common/block-menu");
var _editorToolbar = require("@atlaskit/editor-toolbar");
var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _compiled = require("@atlaskit/primitives/compiled");
var _main = require("../../pm-plugins/main");
var _utils = require("../../pm-plugins/utils");
var _types = require("../../types");
var _SelectionExtensionComponentContext = require("../SelectionExtensionComponentContext");
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 styles = {
svgOverflow: "_1wrmewfl _172sewfl",
contentWrapper: "_1e0c1txw _4cvr1h6o _1ul9idpf",
contentWrapperWithJustifyContent: "_1e0c1txw _4cvr1h6o _1bah1yb4 _1ul9idpf",
label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
lozenge: "_18u01b66 _1o9zidpf"
};
var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = function SelectionExtensionDropdownItem(_ref) {
var dropdownItem = _ref.dropdownItem;
var IconComponent = dropdownItem.icon;
var _useSelectionExtensio = (0, _SelectionExtensionComponentContext.useSelectionExtensionComponentContext)(),
api = _useSelectionExtensio.api,
editorView = _useSelectionExtensio.editorView,
extensionKey = _useSelectionExtensio.extensionKey,
extensionSource = _useSelectionExtensio.extensionSource,
extensionLocation = _useSelectionExtensio.extensionLocation;
var handleClick = function handleClick() {
var _api$blockControls, _dropdownItem$onClick, _api$analytics;
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 || editorView.state.selection;
if (dropdownItem.contentComponent) {
var selectionInfo = (0, _utils.getSelectionTextInfoNew)(selection, editorView, api);
api.core.actions.execute(api.selectionExtension.commands.setActiveExtension({
extension: dropdownItem,
selection: selectionInfo
}));
}
api.core.actions.execute(function (_ref2) {
var tr = _ref2.tr;
var _getSelectionAdfInfoN = (0, _utils.getSelectionAdfInfoNew)(selection),
selectedNode = _getSelectionAdfInfoN.selectedNode,
nodePos = _getSelectionAdfInfoN.nodePos;
tr.setMeta(_main.selectionExtensionPluginKey, {
type: _types.SelectionExtensionActionTypes.SET_SELECTED_NODE,
selectedNode: selectedNode,
nodePos: nodePos
});
if ((0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_1')) {
if (extensionLocation === 'block-menu') {
var _api$blockControls2;
api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.toggleBlockMenu({
closeMenu: true
})({
tr: tr
});
}
} else {
var _api$blockControls3;
api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.toggleBlockMenu({
closeMenu: true
})({
tr: tr
});
}
return tr;
});
(_dropdownItem$onClick = dropdownItem.onClick) === null || _dropdownItem$onClick === void 0 || _dropdownItem$onClick.call(dropdownItem);
(_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
action: _analytics.ACTION.CLICKED,
actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_ITEM,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
extensionKey: extensionKey,
extensionSource: extensionSource,
extensionLocation: extensionLocation,
extensionElement: 'dropdown-item',
extensionItemKey: dropdownItem.key
}
});
};
var labelRef = (0, _react.useRef)(null);
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isTruncated = _useState2[0],
setIsTruncated = _useState2[1];
var handleMouseEnter = (0, _react.useCallback)(function () {
var el = labelRef.current;
if (el) {
setIsTruncated(el.scrollWidth > el.clientWidth);
}
}, []);
var iconSize = extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu' ? 'small' : undefined;
var iconElement = IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
size: iconSize,
label: ""
}) : undefined;
var elemBeforeIcon = iconElement && extensionLocation === 'block-menu' ? /*#__PURE__*/_react.default.createElement("span", {
className: (0, _runtime.ax)([styles.svgOverflow])
}, iconElement) : iconElement;
if ((0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2')) {
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
content: isTruncated ? dropdownItem.label : null,
position: "top"
}, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
elemBefore: elemBeforeIcon,
onClick: handleClick,
isDisabled: dropdownItem.isDisabled,
testId: _blockMenu.EXTENSION_MENU_ITEM_TEST_ID
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
as: "span",
xcss: (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_5') ? styles.contentWrapperWithJustifyContent : styles.contentWrapper,
onMouseOver: handleMouseEnter
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
as: "span",
xcss: styles.label,
ref: labelRef
}, dropdownItem.label), dropdownItem.lozenge ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
as: "span",
xcss: styles.lozenge
}, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
appearance: (0, _platformFeatureFlags.fg)('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
}, dropdownItem.lozenge.label)) : undefined)));
}
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
elemBefore: elemBeforeIcon,
testId: _blockMenu.EXTENSION_MENU_ITEM_TEST_ID,
onClick: handleClick,
isDisabled: dropdownItem.isDisabled
}, dropdownItem.label, dropdownItem.lozenge ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
as: "span",
xcss: styles.lozenge
}, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
appearance: (0, _platformFeatureFlags.fg)('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
}, dropdownItem.lozenge.label)) : undefined);
};