@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
283 lines (277 loc) • 14.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.handleMouseDown = void 0;
var _analytics = require("@atlaskit/editor-common/analytics");
var _styles = require("@atlaskit/editor-common/styles");
var _tableMap = require("@atlaskit/editor-tables/table-map");
var _utils = require("@atlaskit/editor-tables/utils");
var _insm = require("@atlaskit/insm");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _columnResize = require("../commands/column-resize");
var _misc = require("../commands/misc");
var _pluginFactory = require("../plugin-factory");
var _tableAnalytics = require("../table-analytics");
var _columnWidth = require("../transforms/column-width");
var _nodes = require("../utils/nodes");
var _selection = require("../utils/selection");
var _commands = require("./commands");
var _pluginFactory2 = require("./plugin-factory");
var _consts = require("./utils/consts");
var _dom = require("./utils/dom");
var _misc2 = require("./utils/misc");
var _resizeColumn = require("./utils/resize-column");
var _resizeState = require("./utils/resize-state");
var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isCommentEditor) {
var _originalTable$attrs;
var state = view.state,
dispatch = view.dispatch;
var editorDisabled = !view.editable;
var domAtPos = view.domAtPos.bind(view);
var _getEditorContainerWi = getEditorContainerWidth(),
editorWidth = _getEditorContainerWi.width;
if (editorDisabled || localResizeHandlePos === null || !(0, _misc2.pointsAtCell)(state.doc.resolve(localResizeHandlePos))) {
return false;
}
var _getTablePluginState = (0, _pluginFactory.getPluginState)(state),
isKeyboardResize = _getTablePluginState.isKeyboardResize;
event.preventDefault();
if ((0, _expValEquals.expValEquals)('cc_editor_interactivity_monitoring', 'isEnabled', true)) {
var _insm$session;
(_insm$session = _insm.insm.session) === null || _insm$session === void 0 || _insm$session.startFeature('tableColumnResize');
}
var tr = view.state.tr;
tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN
});
dispatch(tr);
var mouseDownTime = event.timeStamp;
var cell = state.doc.nodeAt(localResizeHandlePos);
var $cell = state.doc.resolve(localResizeHandlePos);
var originalTable = $cell.node(-1);
var start = $cell.start(-1);
var tablePos = state.doc.resolve(start).start(-1);
var tableDepth = state.doc.resolve(tablePos).depth;
var dom = domAtPos(start).node;
if (dom && dom.nodeName !== 'TABLE') {
dom = dom.closest('table');
}
var maxSize = 0;
if (isTableScalingEnabled && isCommentEditor && !((_originalTable$attrs = originalTable.attrs) !== null && _originalTable$attrs !== void 0 && _originalTable$attrs.width)) {
maxSize = editorWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR;
} else {
maxSize = (0, _misc2.getTableMaxWidth)({
table: originalTable,
tableStart: start,
state: state,
layout: originalTable.attrs.layout,
getEditorContainerWidth: getEditorContainerWidth
});
}
var shouldScale = tableDepth === 0 && isTableScalingEnabled;
var _getEditorFeatureFlag = getEditorFeatureFlags(),
_getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
var isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && tableWithFixedColumnWidthsOption;
if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
}
var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled;
if (isTableScalingEnabled && isCommentEditor) {
shouldScale = tableDepth === 0;
shouldUseIncreasedScalingPercent = true;
}
var resizeState = (0, _resizeState.getResizeState)({
minWidth: _styles.tableCellMinWidth,
maxSize: maxSize,
table: originalTable,
tableRef: dom,
start: start,
domAtPos: domAtPos,
isTableScalingEnabled: shouldScale,
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
isCommentEditor: isCommentEditor || false
});
if ((0, _commands.evenColumns)({
resizeState: resizeState,
table: originalTable,
start: start,
event: event,
api: api
})(state, dispatch)) {
finish(event);
return true;
}
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var width = (0, _misc2.currentColWidth)(view, localResizeHandlePos, cell.attrs);
(0, _commands.setDragging)({
startX: event.clientX,
startWidth: width
})(state, dispatch);
// When we start resizing a column we need to ensure the underlying tooltip is removed from the decoration to avoid
// unnecessary tooltips being displayed during drag.
(0, _misc.updateResizeHandleDecorations)(nodeViewPortalProviderAPI, undefined, undefined, false)(state, dispatch);
function finish(event) {
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
window.removeEventListener('mouseup', finish);
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
window.removeEventListener('mousemove', move);
var clientX = event.clientX;
var state = view.state,
dispatch = view.dispatch;
var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
dragging = _getPluginState.dragging,
resizeHandlePos = _getPluginState.resizeHandlePos;
var _getTablePluginState2 = (0, _pluginFactory.getPluginState)(state),
isTableHovered = _getTablePluginState2.isTableHovered;
if (resizeHandlePos === null) {
if ((0, _expValEquals.expValEquals)('cc_editor_interactivity_monitoring', 'isEnabled', true)) {
var _insm$session2;
(_insm$session2 = _insm.insm.session) === null || _insm$session2 === void 0 || _insm$session2.endFeature('tableColumnResize');
}
return (0, _commands.stopResizing)()(state, dispatch);
}
if (!(0, _misc2.pointsAtCell)(state.doc.resolve(resizeHandlePos))) {
if ((0, _expValEquals.expValEquals)('cc_editor_interactivity_monitoring', 'isEnabled', true)) {
var _insm$session3;
(_insm$session3 = _insm.insm.session) === null || _insm$session3 === void 0 || _insm$session3.endFeature('tableColumnResize');
}
return;
}
// resizeHandlePos could be remapped via a collab change.
// Fetch a fresh reference of the table.
var $cell = state.doc.resolve(resizeHandlePos);
var start = $cell.start(-1);
var table = $cell.node(-1);
var tablePos = state.doc.resolve(start).start(-1);
var tableDepth = state.doc.resolve(tablePos).depth;
// If we let go in the same place we started, don't need to do anything.
if (dragging && clientX === dragging.startX) {
if ((0, _expValEquals.expValEquals)('cc_editor_interactivity_monitoring', 'isEnabled', true)) {
var _insm$session4;
(_insm$session4 = _insm.insm.session) === null || _insm$session4 === void 0 || _insm$session4.endFeature('tableColumnResize');
}
if (isKeyboardResize || !isTableHovered) {
/** if column resize had started via keyboard but continued by mouse
* or mouse pointer leaves the table but mouse button still pressed
*/
return (0, _columnResize.stopKeyboardColumnResizing)({})(state, dispatch, view);
} else {
return (0, _commands.stopResizing)()(state, dispatch);
}
}
var tr = state.tr;
if (dragging) {
var startX = dragging.startX;
// If the dimensions of the table have changed through a remote modification by another
// person for example don't persist the new column widths as we couldn't reliably remap them
// For example, if a table col is deleted
// There may be a more elegant solution to this, to avoid a jarring experience. This used to
// be an equality check but that caused issues when a nested table would change (eg. when it
// dynamically updates its width on resize)
if (!(0, _nodes.tablesHaveDifferentNoOfColumns)(originalTable, table)) {
var _table$attrs;
var map = _tableMap.TableMap.get(table);
var colIndex = map.colCount($cell.pos - start) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
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 _shouldScale = tableDepth === 0 && isTableScalingEnabled;
if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
_shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
}
var resizedDelta = clientX - startX;
var _shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || isTableScalingEnabled && !!isCommentEditor;
var scalePercent = isTableScalingEnabled && isCommentEditor && !((_table$attrs = table.attrs) !== null && _table$attrs !== void 0 && _table$attrs.width) ? (0, _misc2.getScalingPercentForTableWithoutWidth)(originalTable, dom) : (0, _misc2.getTableScalingPercent)(originalTable, dom, _shouldUseIncreasedScalingPercent);
var newResizeState = (0, _resizeColumn.resizeColumn)(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale, scalePercent);
tr = (0, _columnWidth.updateColumnWidths)(newResizeState, table, start, api)(tr);
if (colIndex === map.width - 1) {
var mouseUpTime = event.timeStamp;
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: _analytics.TABLE_ACTION.ATTEMPTED_TABLE_WIDTH_CHANGE,
actionSubject: _analytics.ACTION_SUBJECT.TABLE,
actionSubjectId: null,
attributes: {
type: 'table-border',
position: 'right',
duration: mouseUpTime - mouseDownTime,
delta: Math.abs(resizedDelta)
},
eventType: _analytics.EVENT_TYPE.UI
})(tr);
}
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: _analytics.TABLE_ACTION.COLUMN_RESIZED,
actionSubject: _analytics.ACTION_SUBJECT.TABLE,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
colIndex: colIndex,
resizedDelta: resizedDelta,
isLastColumn: colIndex === map.width - 1,
tableWidth: table.attrs.width,
inputMethod: _analytics.INPUT_METHOD.MOUSE,
totalRowCount: map.height,
totalColumnCount: map.width
}
})(tr);
}
if ((0, _expValEquals.expValEquals)('cc_editor_interactivity_monitoring', 'isEnabled', true)) {
var _insm$session5;
(_insm$session5 = _insm.insm.session) === null || _insm$session5 === void 0 || _insm$session5.endFeature('tableColumnResize');
}
if (isKeyboardResize || !isTableHovered) {
/** if column resize had started via keyboard but continued by mouse
* or mouse pointer leaves the table but mouse button still pressed
*/
return (0, _columnResize.stopKeyboardColumnResizing)({
originalTr: tr
})(state, dispatch, view);
} else {
return (0, _commands.stopResizing)(tr)(state, dispatch);
}
}
}
function move(event) {
var _table$attrs2;
var clientX = event.clientX,
which = event.which;
var state = view.state;
var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
dragging = _getPluginState2.dragging,
resizeHandlePos = _getPluginState2.resizeHandlePos;
var _getTablePluginState3 = (0, _pluginFactory.getPluginState)(state),
isTableHovered = _getTablePluginState3.isTableHovered;
var tablePos = state.doc.resolve(start).start(-1);
if (!which || !dragging || resizeHandlePos === null || !(0, _misc2.pointsAtCell)(state.doc.resolve(resizeHandlePos)) || !isTableHovered) {
return finish(event);
}
var $cell = state.doc.resolve(resizeHandlePos);
var table = $cell.node(-1);
var tableDepth = state.doc.resolve(tablePos).depth;
var map = _tableMap.TableMap.get(table);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
var shouldScale = tableDepth === 0 && isTableScalingEnabled;
var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || isTableScalingEnabled && isCommentEditor;
if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
}
var resizedDelta = clientX - dragging.startX;
var scalePercent = isTableScalingEnabled && isCommentEditor && !((_table$attrs2 = table.attrs) !== null && _table$attrs2 !== void 0 && _table$attrs2.width) ? (0, _misc2.getScalingPercentForTableWithoutWidth)(table, dom) : (0, _misc2.getTableScalingPercent)(originalTable, dom, shouldUseIncreasedScalingPercent);
(0, _resizeColumn.resizeColumn)(resizeState, colIndex, resizedDelta, dom, table, undefined, shouldScale, scalePercent);
(0, _dom.updateControls)()(state);
}
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
window.addEventListener('mouseup', finish);
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
window.addEventListener('mousemove', move);
return true;
};