@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
346 lines (343 loc) • 16.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getTargetIndex = exports.getDragMenuConfig = exports.canMove = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireDefault(require("react"));
var _customSteps = require("@atlaskit/custom-steps");
var _analytics = require("@atlaskit/editor-common/analytics");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _sortAscending = _interopRequireDefault(require("@atlaskit/icon/core/sort-ascending"));
var _sortDescending = _interopRequireDefault(require("@atlaskit/icon/core/sort-descending"));
var _tableCellClear = _interopRequireDefault(require("@atlaskit/icon/core/table-cell-clear"));
var _tableColumnAddLeft = _interopRequireDefault(require("@atlaskit/icon/core/table-column-add-left"));
var _tableColumnAddRight = _interopRequireDefault(require("@atlaskit/icon/core/table-column-add-right"));
var _tableColumnDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-column-delete"));
var _tableColumnMoveLeft = _interopRequireDefault(require("@atlaskit/icon/core/table-column-move-left"));
var _tableColumnMoveRight = _interopRequireDefault(require("@atlaskit/icon/core/table-column-move-right"));
var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
var _tableRowAddAbove = _interopRequireDefault(require("@atlaskit/icon/core/table-row-add-above"));
var _tableRowAddBelow = _interopRequireDefault(require("@atlaskit/icon/core/table-row-add-below"));
var _tableRowDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-row-delete"));
var _tableRowMoveDown = _interopRequireDefault(require("@atlaskit/icon/core/table-row-move-down"));
var _tableRowMoveUp = _interopRequireDefault(require("@atlaskit/icon/core/table-row-move-up"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _toolbar = require("../../ui/toolbar");
var _commandsWithAnalytics = require("../commands/commands-with-analytics");
var _commandsWithAnalytics2 = require("../drag-and-drop/commands-with-analytics");
var _pluginFactory = require("../plugin-factory");
var _resizeState = require("../table-resizing/utils/resize-state");
var _mergedCells = require("./merged-cells");
var _selection = require("./selection");
var getTargetIndex = exports.getTargetIndex = function getTargetIndex(selectedIndexes, direction) {
return Math[direction < 0 ? 'min' : 'max'].apply(Math, (0, _toConsumableArray2.default)(selectedIndexes)) + direction;
};
var canMove = exports.canMove = function canMove(sourceType, direction, totalItemsOfSourceTypeCount, selection, selectionRect) {
if (!selectionRect) {
return false;
}
var isRow = sourceType === 'table-row';
var selectedIndexes = isRow ? (0, _selection.getSelectedRowIndexes)(selectionRect) : (0, _selection.getSelectedColumnIndexes)(selectionRect);
var targetIndex = getTargetIndex(selectedIndexes, direction);
var isValidTargetIndex = targetIndex >= 0 && targetIndex < totalItemsOfSourceTypeCount;
if (!isValidTargetIndex) {
return false;
}
// We can't move column when target has merged cells with other columns
// We can't move row when target has merged cells with other rows
var hasMergedCellsInTarget = isRow ? (0, _mergedCells.hasMergedCellsWithRowNextToRowIndex)(targetIndex, selection) : (0, _mergedCells.hasMergedCellsWithColumnNextToColumnIndex)(targetIndex, selection);
if (hasMergedCellsInTarget) {
return false;
}
// We can't move if selection in the source is not a rectangle
if ((0, _mergedCells.hasMergedCellsInSelection)(selectedIndexes, isRow ? 'row' : 'column')(selection)) {
return false;
}
return true;
};
var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
var rect = (0, _toolbar.getClosestSelectionRect)(state);
if (rect) {
var selectedColIndexes = (0, _selection.getSelectedColumnIndexes)(rect);
return selectedColIndexes.length > 1;
}
return false;
};
var defaultSelectionRect = {
left: 0,
top: 0,
right: 0,
bottom: 0
};
var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, api, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired) {
var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
var isTableScalingEnabled = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : false;
var isTableFixedColumnWidthsOptionEnabled = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : false;
var shouldUseIncreasedScalingPercent = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : false;
var ariaNotifyPlugin = arguments.length > 14 ? arguments[14] : undefined;
var isCommentEditor = arguments.length > 15 && arguments[15] !== undefined ? arguments[15] : false;
var isColumnSortingEnabled = arguments.length > 16 && arguments[16] !== undefined ? arguments[16] : true;
var selection = editorView.state.selection;
var _getTablePluginState = (0, _pluginFactory.getPluginState)(editorView.state),
getIntl = _getTablePluginState.getIntl;
var addOptions = direction === 'row' ? [{
label: 'above',
offset: 0,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_tableRowAddAbove.default, {
spacing: 'spacious',
label: ''
});
},
keymap: _keymaps.addRowBefore
}, {
label: 'below',
offset: 1,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_tableRowAddBelow.default, {
spacing: 'spacious',
label: ''
});
},
keymap: _keymaps.addRowAfter
}] : [{
label: 'left',
offset: 0,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_tableColumnAddLeft.default, {
spacing: 'spacious',
label: ''
});
},
keymap: _keymaps.addColumnBefore
}, {
label: 'right',
offset: 1,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_tableColumnAddRight.default, {
spacing: 'spacious',
label: ''
});
},
keymap: _keymaps.addColumnAfter
}];
var isNewKeymapExperiment = (0, _expValEquals.expValEquals)('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true);
var moveOptions = direction === 'row' ? [{
label: 'up',
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_tableRowMoveUp.default, {
spacing: 'spacious',
label: ''
});
},
keymap: isNewKeymapExperiment ? _keymaps.moveRowUp :
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
_keymaps.moveRowUpOld,
canMove: canMove('table-row', -1, (_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0, selection, selectionRect),
getOriginIndexes: _selection.getSelectedRowIndexes,
getTargetIndex: function getTargetIndex(selectionRect) {
return selectionRect.top - 1;
}
}, {
label: 'down',
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_tableRowMoveDown.default, {
spacing: 'spacious',
label: ''
});
},
keymap: isNewKeymapExperiment ? _keymaps.moveRowDown :
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
_keymaps.moveRowDownOld,
canMove: canMove('table-row', 1, (_tableMap$height2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height2 !== void 0 ? _tableMap$height2 : 0, selection, selectionRect),
getOriginIndexes: _selection.getSelectedRowIndexes,
getTargetIndex: function getTargetIndex(selectionRect) {
return selectionRect.bottom;
}
}] : [{
label: 'left',
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_tableColumnMoveLeft.default, {
spacing: 'spacious',
label: ''
});
},
keymap: isNewKeymapExperiment ? _keymaps.moveColumnLeft :
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
_keymaps.moveColumnLeftOld,
canMove: canMove('table-column', -1, (_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0, selection, selectionRect),
getOriginIndexes: _selection.getSelectedColumnIndexes,
getTargetIndex: function getTargetIndex(selectionRect) {
return selectionRect.left - 1;
}
}, {
label: 'right',
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_tableColumnMoveRight.default, {
spacing: 'spacious',
label: ''
});
},
keymap: isNewKeymapExperiment ? _keymaps.moveColumnRight :
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
_keymaps.moveColumnRightOld,
canMove: canMove('table-column', 1, (_tableMap$width2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width2 !== void 0 ? _tableMap$width2 : 0, selection, selectionRect),
getOriginIndexes: _selection.getSelectedColumnIndexes,
getTargetIndex: function getTargetIndex(selectionRect) {
return selectionRect.right;
}
}];
var sortOptions = direction === 'column' ? [{
label: 'increasing',
order: _customSteps.TableSortOrder.ASC,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_sortAscending.default, {
spacing: 'spacious',
label: ''
});
}
}, {
label: 'decreasing',
order: _customSteps.TableSortOrder.DESC,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_sortDescending.default, {
spacing: 'spacious',
label: ''
});
}
}] : [];
var sortConfigs = (0, _toConsumableArray2.default)(sortOptions.map(function (_ref) {
var label = _ref.label,
order = _ref.order,
icon = _ref.icon;
return {
id: "sort_column_".concat(order),
title: "Sort ".concat(label),
disabled: hasMergedCellsInTable,
icon: icon,
onClick: function onClick(state, dispatch) {
(0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
return true;
}
};
}));
var restConfigs = [].concat((0, _toConsumableArray2.default)(addOptions.map(function (_ref2) {
var label = _ref2.label,
offset = _ref2.offset,
icon = _ref2.icon,
keymap = _ref2.keymap;
return {
id: "add_".concat(direction, "_").concat(label),
title: "Add ".concat(direction, " ").concat(label),
icon: icon,
onClick: function onClick(state, dispatch) {
if (direction === 'row') {
(0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, {
index: (index !== null && index !== void 0 ? index : 0) + offset,
moveCursorToInsertedRow: true
})(state, dispatch);
} else {
(0, _commandsWithAnalytics.insertColumnWithAnalytics)(api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
}
return true;
},
keymap: keymap && (0, _keymaps.tooltip)(keymap)
};
})), [direction === 'column' ? {
id: 'distribute_columns',
title: 'Distribute columns',
disabled: !isDistributeColumnsEnabled(editorView.state),
onClick: function onClick(state, dispatch) {
var selectionRect = (0, _toolbar.getClosestSelectionRect)(state);
if (selectionRect) {
var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
if (newResizeState) {
(0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI, api)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, newResizeState)(state, dispatch);
return true;
}
return false;
}
return false;
},
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_tableColumnsDistribute.default, {
spacing: 'spacious',
label: ''
});
}
} : undefined, {
id: 'clear_cells',
title: 'Clear cells',
onClick: function onClick(state, dispatch) {
(0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(state, dispatch);
return true;
},
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_tableCellClear.default, {
spacing: 'spacious',
label: ''
});
},
keymap: (0, _keymaps.tooltip)(_keymaps.backspace)
}, {
id: "delete_".concat(direction),
title: "Delete ".concat(direction),
onClick: function onClick(state, dispatch) {
if (direction === 'row') {
(0, _commandsWithAnalytics.deleteRowsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect, !!isHeaderRowRequired)(state, dispatch);
} else {
(0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI, api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect)(state, dispatch, editorView);
}
return true;
},
icon: direction === 'row' ? function () {
return /*#__PURE__*/_react.default.createElement(_tableRowDelete.default, {
spacing: 'spacious',
label: ''
});
} : function () {
return /*#__PURE__*/_react.default.createElement(_tableColumnDelete.default, {
spacing: 'spacious',
label: ''
});
},
keymap: direction === 'row' ? (0, _keymaps.tooltip)(_keymaps.deleteRow) : (0, _keymaps.tooltip)(_keymaps.deleteColumn)
}], (0, _toConsumableArray2.default)(moveOptions.map(function (_ref3) {
var label = _ref3.label,
canMove = _ref3.canMove,
icon = _ref3.icon,
keymap = _ref3.keymap,
getOriginIndexes = _ref3.getOriginIndexes,
getTargetIndex = _ref3.getTargetIndex;
return {
id: "move_".concat(direction, "_").concat(label),
title: "Move ".concat(direction, " ").concat(label),
disabled: !canMove,
icon: icon,
onClick: function onClick(_state, _dispatch) {
if (canMove) {
requestAnimationFrame(function () {
(0, _commandsWithAnalytics2.moveSourceWithAnalytics)(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, "table-".concat(direction),
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
getOriginIndexes(selectionRect),
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
getTargetIndex(selectionRect))(editorView.state, editorView.dispatch);
});
return true;
}
return false;
},
keymap: keymap && (0, _keymaps.tooltip)(keymap)
};
})));
var allConfigs = (0, _toConsumableArray2.default)(restConfigs);
if (isColumnSortingEnabled && (0, _platformFeatureFlags.fg)('platform_editor_enable_table_dnd') || !(0, _platformFeatureFlags.fg)('platform_editor_enable_table_dnd')) {
allConfigs.unshift.apply(allConfigs, (0, _toConsumableArray2.default)(sortConfigs));
}
return allConfigs.filter(Boolean);
};