@atlaskit/editor-plugin-selection-extension
Version:
editor-plugin-selection-extension plugin for @atlaskit/editor-core
58 lines • 2.41 kB
JavaScript
import React from 'react';
import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
import Lozenge from '@atlaskit/lozenge';
import { Box } from '@atlaskit/primitives/compiled';
import { selectionExtensionPluginKey } from '../../pm-plugins/main';
import { getSelectionAdfInfoNew, getSelectionTextInfo } from '../../pm-plugins/utils';
import { SelectionExtensionActionTypes } from '../../types';
export var MenuItem = function MenuItem(_ref) {
var extensionMenuItems = _ref.extensionMenuItems,
api = _ref.api;
var _useEditorToolbar = useEditorToolbar(),
editorView = _useEditorToolbar.editorView;
if (!(extensionMenuItems !== null && extensionMenuItems !== void 0 && extensionMenuItems.length) || !editorView || !api) {
return null;
}
var onClickHandle = function onClickHandle(extension) {
return function () {
if (extension.contentComponent) {
var selection = getSelectionTextInfo(editorView, api);
api.core.actions.execute(api.selectionExtension.commands.setActiveExtension({
extension: extension,
selection: selection
}));
}
api.core.actions.execute(function (_ref2) {
var tr = _ref2.tr;
var _getSelectionAdfInfoN = getSelectionAdfInfoNew(tr.selection),
selectedNode = _getSelectionAdfInfoN.selectedNode,
nodePos = _getSelectionAdfInfoN.nodePos;
tr.setMeta(selectionExtensionPluginKey, {
type: SelectionExtensionActionTypes.SET_SELECTED_NODE,
selectedNode: selectedNode,
nodePos: nodePos
});
return tr;
});
extension.onClick && extension.onClick();
};
};
return /*#__PURE__*/React.createElement(React.Fragment, null, extensionMenuItems.map(function (extension) {
var Icon = extension.icon;
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
key: extension.label,
elemBefore: /*#__PURE__*/React.createElement(Icon, {
size: "small",
label: ""
}),
onClick: onClickHandle(extension),
isDisabled: extension.isDisabled
}, extension.label, extension.lozenge && /*#__PURE__*/React.createElement(Box, {
as: "span",
paddingInline: "space.100"
}, /*#__PURE__*/React.createElement(Lozenge, {
appearance: 'new'
}, extension.lozenge.label)));
}));
};