@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
57 lines • 1.71 kB
JavaScript
import React, { useCallback, useMemo } from 'react';
import { useIntl } from 'react-intl';
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
import { closeActiveTableMenu, setMultipleCellAttrsEditorCommand } from '../../../../pm-plugins/commands';
import { getPluginState } from '../../../../pm-plugins/plugin-factory';
import { useTableMenuContext } from '../../shared/TableMenuContext';
import { getSelectedCellValign } from './verticalAlignUtils';
export const VerticalAlignDropdownItem = ({
api,
icon: Icon,
label,
value
}) => {
var _useTableMenuContext;
const {
editorView
} = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {};
const {
formatMessage
} = useIntl();
const selectedValign = useMemo(() => getSelectedCellValign(editorView), [editorView]);
const handleClick = useCallback(() => {
if (!editorView || !api) {
return;
}
const {
targetCellPosition
} = getPluginState(editorView.state);
api.core.actions.execute(({
tr
}) => {
setMultipleCellAttrsEditorCommand({
valign: value
}, targetCellPosition)({
tr
});
closeActiveTableMenu()({
tr
});
return tr;
});
api.core.actions.focus();
}, [api, editorView, value]);
if (!editorView) {
return null;
}
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
elemBefore: /*#__PURE__*/React.createElement(Icon, {
color: "currentColor",
label: "",
size: "small"
}),
isSelected: selectedValign === value,
onClick: handleClick,
role: "menuitemradio"
}, formatMessage(label));
};