@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
137 lines (136 loc) • 6.21 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.toggleDragMenu = exports.setDropTarget = exports.moveSource = exports.cloneSource = exports.clearDropTarget = void 0;
var _view = require("@atlaskit/editor-prosemirror/view");
var _utils = require("@atlaskit/editor-tables/utils");
var _types = require("../../types");
var _decoration = require("../utils/decoration");
var _actions = require("./actions");
var _consts = require("./consts");
var _pluginFactory = require("./plugin-factory");
var _pluginKey = require("./plugin-key");
// TODO: ED-26961 - This command is a placeholder example. Please replace this if required.
var getDecorations = function getDecorations(state) {
var _pluginKey$getState;
return ((_pluginKey$getState = _pluginKey.pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet) || _view.DecorationSet.empty;
};
var updatePluginStateDecorations = function updatePluginStateDecorations(state, decorations, key) {
return (0, _decoration.updateDecorations)(state.doc, getDecorations(state), decorations, key);
};
var setDropTarget = exports.setDropTarget = function setDropTarget(type, index, hasMergedCells, tr) {
return (0, _pluginFactory.createCommand)(function (state) {
var _getPluginState = (0, _pluginFactory.getPluginState)(state),
dropTargetType = _getPluginState.dropTargetType,
dropTargetIndex = _getPluginState.dropTargetIndex;
if (dropTargetType === type && dropTargetIndex === index) {
return false;
}
var decorationSet = _view.DecorationSet.empty;
if (type === 'column') {
decorationSet = updatePluginStateDecorations(state, (0, _decoration.createColumnInsertLine)(index, state.selection, hasMergedCells), _types.TableDecorations.COLUMN_INSERT_LINE);
} else if (type === 'row') {
decorationSet = updatePluginStateDecorations(state, (0, _decoration.createRowInsertLine)(index, state.selection, hasMergedCells), _types.TableDecorations.ROW_INSERT_LINE);
}
return {
type: _actions.DragAndDropActionType.SET_DROP_TARGET,
data: {
decorationSet: decorationSet,
type: type,
index: index
}
};
}, function (originalTr) {
return (tr || originalTr).setMeta('addToHistory', false);
});
};
var clearDropTarget = exports.clearDropTarget = function clearDropTarget(tr) {
return (0, _pluginFactory.createCommand)(function (state) {
var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
dropTargetType = _getPluginState2.dropTargetType,
dropTargetIndex = _getPluginState2.dropTargetIndex;
if (dropTargetType === _consts.DropTargetType.NONE && dropTargetIndex === 0) {
return false;
}
return {
type: _actions.DragAndDropActionType.CLEAR_DROP_TARGET,
data: {
decorationSet: _view.DecorationSet.empty
}
};
}, function (originalTr) {
return (tr || originalTr).setMeta('addToHistory', false);
});
};
var moveSource = exports.moveSource = function moveSource(sourceType, sourceIndexes, targetIndex, tr) {
return (0, _pluginFactory.createCommand)(function (state) {
return {
type: _actions.DragAndDropActionType.CLEAR_DROP_TARGET,
data: {
decorationSet: _view.DecorationSet.empty
}
};
}, function (originalTr, state) {
var nextTr = tr || originalTr;
if (sourceIndexes.includes(targetIndex)) {
return nextTr.setMeta('addToHistory', false);
}
var move = sourceType === 'table-row' ? _utils.moveRow : _utils.moveColumn;
return move(state, sourceIndexes, targetIndex, {
selectAfterMove: true
})(nextTr);
});
};
var toggleDragMenu = exports.toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {
var trigger = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mouse';
return (0, _pluginFactory.createCommand)(function (state) {
var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
previousOpenState = _getPluginState3.isDragMenuOpen,
previousDragMenuDirection = _getPluginState3.dragMenuDirection,
previousDragMenuIndex = _getPluginState3.dragMenuIndex;
if (previousOpenState === isDragMenuOpen && previousDragMenuDirection === direction && previousDragMenuIndex === index) {
return false;
}
var updatedMenuOpenState;
if (isDragMenuOpen !== undefined) {
updatedMenuOpenState = isDragMenuOpen;
} else {
// menu open but menu direction changed, means user clicked on drag handle of different row/column
// menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
// 2 scenarios above , menu should remain open.
if (previousOpenState === true && previousDragMenuDirection !== direction || previousOpenState === true && previousDragMenuDirection === direction && previousDragMenuIndex !== index) {
updatedMenuOpenState = true;
} else {
updatedMenuOpenState = !previousOpenState;
}
}
return {
type: _actions.DragAndDropActionType.TOGGLE_DRAG_MENU,
data: {
isDragMenuOpen: updatedMenuOpenState,
direction: direction !== null && direction !== void 0 ? direction : previousDragMenuDirection,
index: index !== null && index !== void 0 ? index : previousDragMenuIndex,
isKeyboardModeActive: updatedMenuOpenState && trigger === 'keyboard'
}
};
}, function (tr) {
return tr.setMeta('addToHistory', false);
});
};
var cloneSource = exports.cloneSource = function cloneSource(sourceType, sourceIndexes, targetIndex, targetDirection, tr) {
return (0, _pluginFactory.createCommand)(function (state) {
return {
type: _actions.DragAndDropActionType.CLEAR_DROP_TARGET,
data: {
decorationSet: _view.DecorationSet.empty
}
};
}, function (originalTr, state) {
var nextTr = tr || originalTr;
var clone = sourceType === 'table-row' ? _utils.cloneRow : _utils.cloneColumn;
return clone(state, sourceIndexes, targetIndex, targetDirection, {
selectAfterClone: true
})(nextTr);
});
};