@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
66 lines • 2.96 kB
JavaScript
import React, { memo, useMemo } from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { TableMap } from '@atlaskit/editor-tables/table-map';
import { getSelectionRect } from '@atlaskit/editor-tables/utils';
import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
import { canSplitCellSelection } from '../../../pm-plugins/commands/split-cell';
import { canMergeCellSelection } from '../../../pm-plugins/transforms/merge';
import { TableMenuProvider } from './TableMenuContext';
export const TableMenu = /*#__PURE__*/memo(({
api,
editorView,
surface
}) => {
const components = useMemo(() => {
var _api$uiControlRegistr, _api$uiControlRegistr2;
return (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(surface.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
}, [api, surface.key]);
const {
tableNode,
selection
} = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table', 'selection'], states => {
var _states$tableState, _states$selectionStat;
return {
tableNode: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.tableNode,
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
};
});
const tableMenuContext = useMemo(() => {
if (!selection || !tableNode) {
return {
editorView
};
}
const tableMap = TableMap.get(tableNode);
const selectionRect = getSelectionRect(selection);
const cellOps = {
editorView,
canMergeCells: canMergeCellSelection(selection),
canSplitCell: canSplitCellSelection(selection),
hasMergedCellsInTable: tableMap.hasMergedCells()
};
if (!selectionRect) {
return cellOps;
}
return {
...cellOps,
isFirstRow: selectionRect.top === 0,
isLastRow: selectionRect.bottom === tableMap.height,
selectedRowCount: selectionRect.bottom - selectionRect.top,
isFirstColumn: selectionRect.left === 0,
isLastColumn: selectionRect.right === tableMap.width,
selectedColumnCount: selectionRect.right - selectionRect.left
};
}, [editorView, selection, tableNode]);
if (components.length === 0) {
return null;
}
return /*#__PURE__*/React.createElement(TableMenuProvider, {
value: tableMenuContext
}, /*#__PURE__*/React.createElement(ToolbarMenuContainer, null, /*#__PURE__*/React.createElement(SurfaceRenderer, {
surface: surface,
components: components
})));
});
TableMenu.displayName = 'TableMenu';