@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
301 lines (300 loc) • 13.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.stopKeyboardColumnResizing = exports.initiateKeyboardColumnResizing = exports.changeColumnWidthByStep = exports.activateNextResizeArea = void 0;
var _messages = require("@atlaskit/editor-common/messages");
var _styles = require("@atlaskit/editor-common/styles");
var _editorTables = require("@atlaskit/editor-tables");
var _utils = require("@atlaskit/editor-tables/utils");
var _types = require("../../types");
var _plugin = require("../decorations/plugin");
var _columnResizing = require("../decorations/utils/column-resizing");
var _pluginFactory = require("../plugin-factory");
var _pluginFactory2 = require("../table-resizing/plugin-factory");
var _pluginKey = require("../table-resizing/plugin-key");
var _dom = require("../table-resizing/utils/dom");
var _misc = require("../table-resizing/utils/misc");
var _resizeColumn = require("../table-resizing/utils/resize-column");
var _resizeState = require("../table-resizing/utils/resize-state");
var _columnWidth = require("../transforms/column-width");
var _decoration = require("../utils/decoration");
var _selection = require("../utils/selection");
var getTablePluginCommand = function getTablePluginCommand(actionPayload, originalTr) {
return (0, _pluginFactory.createCommand)(function () {
return actionPayload;
}, function (tr) {
return (originalTr || tr).setMeta('addToHistory', false);
});
};
var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosition(rowIndex, columnIndex, nextResizeHandlePos, nodeViewPortalProviderAPI) {
return function (state, dispatch) {
var customTr = state.tr;
var _getPluginState = (0, _pluginFactory.getPluginState)(state),
allowColumnResizing = _getPluginState.pluginConfig.allowColumnResizing,
getIntl = _getPluginState.getIntl,
isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
var fakeDispatch = function fakeDispatch(tr) {
customTr = tr;
};
if (!allowColumnResizing) {
return false;
}
var decorationsWithWidget = (0, _columnResizing.buildColumnResizingDecorations)(rowIndex, columnIndex, true, getIntl, nodeViewPortalProviderAPI)({
tr: customTr,
decorationSet: (0, _plugin.getDecorations)(state)
});
var decorationsWithWidgetAndHandle = (0, _decoration.updateDecorations)(customTr.doc, decorationsWithWidget, (0, _decoration.createColumnLineResize)(state.selection, {
right: columnIndex
}, isDragAndDropEnabled), _types.TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
getTablePluginCommand({
type: 'START_KEYBOARD_COLUMN_RESIZE',
data: {
resizeHandleRowIndex: rowIndex,
resizeHandleColumnIndex: columnIndex,
resizeHandleIncludeTooltip: true,
isKeyboardResize: true,
decorationSet: decorationsWithWidgetAndHandle
}
}, customTr)(state, fakeDispatch);
customTr.setMeta(_pluginKey.pluginKey, {
type: 'SET_RESIZE_HANDLE_POSITION',
data: {
resizeHandlePos: nextResizeHandlePos
}
});
if (dispatch) {
dispatch(customTr);
return true;
}
return false;
};
};
var initiateKeyboardColumnResizing = exports.initiateKeyboardColumnResizing = function initiateKeyboardColumnResizing(_ref) {
var ariaNotify = _ref.ariaNotify,
getIntl = _ref.getIntl,
nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI;
return function (state, dispatch, view) {
var selection = state.selection;
var selectionRect = (0, _utils.isSelectionType)(selection, 'cell') ?
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
(0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
var cell = (0, _utils.findCellClosestToPos)(selection.$from);
if (ariaNotify && getIntl) {
ariaNotify(getIntl().formatMessage(_messages.tableMessages.startedColumnResize), {
priority: 'important'
});
}
if (selectionRect && cell && view) {
return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos, nodeViewPortalProviderAPI)(state, dispatch);
}
return false;
};
};
var activateNextResizeArea = exports.activateNextResizeArea = function activateNextResizeArea(_ref2) {
var direction = _ref2.direction,
ariaNotify = _ref2.ariaNotify,
getIntl = _ref2.getIntl,
nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
return function (state, dispatch, view) {
var _ref3 = (0, _pluginFactory2.getPluginState)(state) || {},
resizeHandlePos = _ref3.resizeHandlePos;
// If No resizing has initiated, skip to regular handler
if (!resizeHandlePos) {
return false;
}
var selection = state.selection;
var cell = (0, _utils.findCellClosestToPos)(selection.$from);
if (!cell) {
// cursor position may be changed by mouse to be outside of table;
return false;
}
var $currentCell = state.doc.resolve(resizeHandlePos);
if (!$currentCell) {
return false;
}
var tableNode = $currentCell.node(-1);
var closestTable = (0, _utils.findTableClosestToPos)($currentCell);
var tableMap = _editorTables.TableMap.get(tableNode);
if (!tableNode || !closestTable || !tableMap) {
return false;
}
var currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
var $nextCell = (0, _utils.nextCell)($currentCell, 'horiz', direction);
if (ariaNotify && getIntl) {
if (direction === 1) {
ariaNotify(getIntl().formatMessage(_messages.tableMessages.focusedOtherResize, {
direction: 'right'
}), {
priority: 'important'
});
}
if (direction === -1) {
ariaNotify(getIntl().formatMessage(_messages.tableMessages.focusedOtherResize, {
direction: 'left'
}), {
priority: 'important'
});
}
}
if ($nextCell) {
// we are somewhere in between the side columns of the table
var offset = $nextCell.pos - $nextCell.start(-1);
var rectForNextCell = tableMap.findCell(offset);
return updateResizeHandleAndStatePosition(rectForNextCell.top, rectForNextCell.right, $nextCell.pos, nodeViewPortalProviderAPI)(state, dispatch, view);
} else {
// current position is in the one of the side columns of the table(left or right)
if (currentCellRect.left === 0) {
var lastCellInCurrentRow = tableMap.positionAt(currentCellRect.top, tableMap.width - 1, tableNode) + closestTable.start;
var $lastCell = state.doc.resolve(lastCellInCurrentRow);
return updateResizeHandleAndStatePosition(currentCellRect.top, tableMap.width, $lastCell.pos, nodeViewPortalProviderAPI)(state, dispatch, view);
} else if (tableMap.width === currentCellRect.right) {
var firsCellInCurrentRow = tableMap.positionAt(currentCellRect.top, 0, tableNode) + closestTable.start;
var _$nextCell = state.doc.resolve(firsCellInCurrentRow);
return updateResizeHandleAndStatePosition(currentCellRect.top, 1, _$nextCell.pos, nodeViewPortalProviderAPI)(state, dispatch);
}
}
return false;
};
};
var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeColumnWidthByStep(_ref4) {
var stepSize = _ref4.stepSize,
getEditorContainerWidth = _ref4.getEditorContainerWidth,
isTableScalingEnabled = _ref4.isTableScalingEnabled,
isTableFixedColumnWidthsOptionEnabled = _ref4.isTableFixedColumnWidthsOptionEnabled,
isCommentEditor = _ref4.isCommentEditor,
ariaNotify = _ref4.ariaNotify,
api = _ref4.api,
getIntl = _ref4.getIntl;
return function (state, dispatch, view) {
var _originalTable$attrs;
var customTr = state.tr;
var fakeDispatch = function fakeDispatch(tr) {
customTr = tr;
};
var _getTableResizingPlug = (0, _pluginFactory2.getPluginState)(state),
resizeHandlePos = _getTableResizingPlug.resizeHandlePos;
var cell = (0, _utils.findCellClosestToPos)(state.selection.$from);
if (!view || !resizeHandlePos || !cell) {
return false;
}
var $cell = state.doc.resolve(resizeHandlePos);
var tableStartPosition = $cell.start(-1);
var originalTable = $cell.node(-1);
var map = _editorTables.TableMap.get(originalTable);
var domAtPos = view.domAtPos.bind(view);
var colIndex = map.colCount($cell.pos - tableStartPosition) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
var dom = null;
var domAtPosition = domAtPos(tableStartPosition);
dom = domAtPosition.node instanceof HTMLTableElement ? domAtPosition.node : null;
if (dom && dom.nodeName !== 'TABLE') {
dom = dom.closest('table');
}
var cellAttrs = cell === null || cell === void 0 ? void 0 : cell.node.attrs;
var width = (0, _misc.currentColWidth)(view, cell === null || cell === void 0 ? void 0 : cell.pos, cellAttrs);
(0, _pluginFactory2.createCommand)({
type: 'SET_DRAGGING',
data: {
dragging: {
startX: 0,
startWidth: width
}
}
})(state, fakeDispatch);
var maxSize = (0, _misc.getTableMaxWidth)({
table: originalTable,
tableStart: tableStartPosition,
state: state,
layout: originalTable.attrs.layout,
getEditorContainerWidth: getEditorContainerWidth
});
var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
var isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled;
if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
isTableScalingEnabledOnCurrentTable = originalTable.attrs.displayMode !== 'fixed';
}
var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled;
if (isTableScalingEnabled && isCommentEditor) {
isTableScalingEnabledOnCurrentTable = true;
shouldUseIncreasedScalingPercent = true;
}
var initialResizeState = (0, _resizeState.getResizeState)({
minWidth: _styles.tableCellMinWidth,
maxSize: maxSize,
table: originalTable,
tableRef: dom,
start: tableStartPosition,
domAtPos: domAtPos,
isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
isCommentEditor: isCommentEditor
});
(0, _dom.updateControls)()(state);
var selectionRect = (0, _utils.getSelectionRect)(state.selection);
var selectedColumns = selectionRect ? (0, _selection.getSelectedColumnIndexes)(selectionRect) : [];
// only selected (or selected - 1) columns should be distributed
var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
var scalePercent = isTableScalingEnabled && isCommentEditor && !((_originalTable$attrs = originalTable.attrs) !== null && _originalTable$attrs !== void 0 && _originalTable$attrs.width) ? (0, _misc.getScalingPercentForTableWithoutWidth)(originalTable, dom) : (0, _misc.getTableScalingPercent)(originalTable, dom, shouldUseIncreasedScalingPercent);
var newResizeState = (0, _resizeColumn.resizeColumn)(initialResizeState, colIndex, stepSize, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, isTableScalingEnabled, scalePercent);
customTr = (0, _columnWidth.updateColumnWidths)(newResizeState, originalTable, tableStartPosition, api)(customTr);
if (dispatch) {
dispatch(customTr);
}
if (ariaNotify && getIntl) {
ariaNotify(getIntl().formatMessage(_messages.tableMessages.changedColumnWidth, {
width: Math.floor(newResizeState.cols[colIndex].width)
}));
if (newResizeState.cols.length === colIndex + 1) {
if (newResizeState.overflow === true) {
ariaNotify(getIntl().formatMessage(_messages.tableMessages.columnResizeLast), {
priority: 'important'
});
}
if (newResizeState.overflow === false) {
ariaNotify(getIntl().formatMessage(_messages.tableMessages.columnResizeOverflow), {
priority: 'important'
});
}
}
}
return true;
};
};
var stopKeyboardColumnResizing = exports.stopKeyboardColumnResizing = function stopKeyboardColumnResizing(_ref5) {
var ariaNotify = _ref5.ariaNotify,
getIntl = _ref5.getIntl,
originalTr = _ref5.originalTr;
return function (state, dispatch) {
var customTr = originalTr || state.tr;
var fakeDispatch = function fakeDispatch(tr) {
customTr = tr;
};
var decorationWithoutWidget = (0, _columnResizing.clearColumnResizingDecorations)()({
tr: customTr,
decorationSet: (0, _plugin.getDecorations)(state)
});
var decorationWithoutWidgetAndHandle = (0, _decoration.updateDecorations)(customTr.doc, decorationWithoutWidget, [], _types.TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
getTablePluginCommand({
type: 'STOP_KEYBOARD_COLUMN_RESIZE',
data: {
decorationSet: decorationWithoutWidgetAndHandle
}
}, customTr)(state, fakeDispatch);
(0, _pluginFactory2.createCommand)({
type: 'STOP_RESIZING'
}, function () {
return customTr.setMeta('scrollIntoView', false);
})(state, fakeDispatch);
if (ariaNotify && getIntl) {
ariaNotify(getIntl().formatMessage(_messages.tableMessages.columnResizeStop), {
priority: 'important'
});
}
if (dispatch) {
dispatch(customTr);
return true;
}
return false;
};
};