@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
54 lines • 1.94 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 var VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref) {
var _useTableMenuContext;
var api = _ref.api,
Icon = _ref.icon,
label = _ref.label,
value = _ref.value;
var _ref2 = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
editorView = _ref2.editorView;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var selectedValign = useMemo(function () {
return getSelectedCellValign(editorView);
}, [editorView]);
var handleClick = useCallback(function () {
if (!editorView || !api) {
return;
}
var _getPluginState = getPluginState(editorView.state),
targetCellPosition = _getPluginState.targetCellPosition;
api.core.actions.execute(function (_ref3) {
var tr = _ref3.tr;
setMultipleCellAttrsEditorCommand({
valign: value
}, targetCellPosition)({
tr: tr
});
closeActiveTableMenu()({
tr: 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));
};