@atlaskit/editor-plugin-selection-extension
Version:
editor-plugin-selection-extension plugin for @atlaskit/editor-core
60 lines • 2.08 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 const MenuItem = ({
extensionMenuItems,
api
}) => {
const {
editorView
} = useEditorToolbar();
if (!(extensionMenuItems !== null && extensionMenuItems !== void 0 && extensionMenuItems.length) || !editorView || !api) {
return null;
}
const onClickHandle = extension => () => {
if (extension.contentComponent) {
const selection = getSelectionTextInfo(editorView, api);
api.core.actions.execute(api.selectionExtension.commands.setActiveExtension({
extension,
selection
}));
}
api.core.actions.execute(({
tr
}) => {
const {
selectedNode,
nodePos
} = getSelectionAdfInfoNew(tr.selection);
tr.setMeta(selectionExtensionPluginKey, {
type: SelectionExtensionActionTypes.SET_SELECTED_NODE,
selectedNode,
nodePos
});
return tr;
});
extension.onClick && extension.onClick();
};
return /*#__PURE__*/React.createElement(React.Fragment, null, extensionMenuItems.map(extension => {
const 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)));
}));
};