@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
79 lines (78 loc) • 3.54 kB
JavaScript
import { insideTable } from '@atlaskit/editor-common/core-utils';
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
import { findTable } from '@atlaskit/editor-tables/utils';
import { pluginKey as tablePluginKey } from '../plugin-key';
import { pluginKey as tableWidthPluginKey } from '../table-width';
import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './utils/column-controls';
export const pluginKey = new PluginKey('tableDecorationsPlugin');
export const getDecorations = state => pluginKey.getState(state);
export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newState) => {
var _tableWidthPluginKey$, _tableWidthPluginKey$2;
const isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
const wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
const {
isDragAndDropEnabled = false,
isInDanger,
isTableHovered
} = tablePluginKey.getState(newState) || {};
const changedResizing = isResizing !== wasResizing;
// Remove column controls when resizing and don't add column decoration controls when DnD enabled
if (isResizing) {
return DecorationSet.empty;
} else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing) {
return buildColumnControlsDecorations({
decorationSet,
tr,
options: {
isDragAndDropEnabled
}
});
} else if (tr.selectionSet) {
var _findTable, _findTable2;
const isTransactionFromMouseClick = !tr.docChanged && tr.selectionSet && tr.getMeta('pointer');
if (isTransactionFromMouseClick || oldState.selection instanceof CellSelection) {
return maybeUpdateColumnControlsSelectedDecoration({
decorationSet,
tr
});
}
// We're exiting a table with an existing decorations so we should clean it up
if ((isInDanger || isTableHovered) && (!insideTable(newState) || ((_findTable = findTable(newState.selection)) === null || _findTable === void 0 ? void 0 : _findTable.node) !== ((_findTable2 = findTable(oldState.selection)) === null || _findTable2 === void 0 ? void 0 : _findTable2.node))) {
return buildColumnControlsDecorations({
decorationSet,
tr,
options: {
isDragAndDropEnabled
}
});
}
}
return decorationSet;
};
export const createPlugin = () => {
return new SafePlugin({
state: {
init: () => DecorationSet.empty,
apply: (tr, decorationSet, oldState, newState) => {
let pluginState = decorationSet;
// main table plugin --->
const meta = tr.getMeta(tablePluginKey);
if (meta && meta.data && meta.data.decorationSet) {
pluginState = meta.data.decorationSet;
}
if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey)) {
pluginState = pluginState.map(tr.mapping, tr.doc);
return handleDocOrSelectionChanged(tr, pluginState, oldState, newState);
}
return pluginState;
}
},
key: pluginKey,
props: {
decorations: state => getDecorations(state)
}
});
};