@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
535 lines (528 loc) • 31.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TableResizer = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _rafSchd = _interopRequireDefault(require("raf-schd"));
var _reactIntlNext = require("react-intl-next");
var _analytics = require("@atlaskit/editor-common/analytics");
var _browser = require("@atlaskit/editor-common/browser");
var _guideline = require("@atlaskit/editor-common/guideline");
var _hooks = require("@atlaskit/editor-common/hooks");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _monitoring = require("@atlaskit/editor-common/monitoring");
var _resizer = require("@atlaskit/editor-common/resizer");
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
var _commands = require("@atlaskit/editor-prosemirror/commands");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _utils = require("@atlaskit/editor-tables/utils");
var _insm = require("@atlaskit/insm");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
var _misc = require("../pm-plugins/commands/misc");
var _tableAnalytics = require("../pm-plugins/table-analytics");
var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
var _consts = require("../pm-plugins/table-resizing/utils/consts");
var _scaleTable = require("../pm-plugins/table-resizing/utils/scale-table");
var _tableWidth = require("../pm-plugins/table-width");
var _alignment = require("../pm-plugins/utils/alignment");
var _analytics2 = require("../pm-plugins/utils/analytics");
var _guidelines = require("../pm-plugins/utils/guidelines");
var _snapping = require("../pm-plugins/utils/snapping");
var _consts2 = require("../ui/consts");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var RESIZE_STEP_VALUE = 10;
var handles = {
right: true
};
var handleStyles = {
right: {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
right: '-14px',
marginTop: "var(--ds-space-150, 12px)"
}
};
var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
var _tableRef$clientHeigh;
var tableHeight = (_tableRef$clientHeigh = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight) !== null && _tableRef$clientHeigh !== void 0 ? _tableRef$clientHeigh : 0;
/*
- One row table height (minimum possible table height) ~ 45px
- Two row table height ~ 90px
- Three row table height ~ 134px
In the if below we need to use:
- > 46 because the height of the table can be a float number like 45.44.
- < 96 is the height of large resize handle.
*/
if (tableHeight >= 96) {
return 'large';
}
if (tableHeight > 46) {
return 'medium';
}
return 'small';
};
var getResizerMinWidth = function getResizerMinWidth(node) {
var currentColumnCount = (0, _colgroup.getColgroupChildrenLength)(node);
var minColumnWidth = Math.min(3, currentColumnCount) * _consts.COLUMN_MIN_WIDTH;
// add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
// the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
return minColumnWidth + 1;
};
var getPadding = function getPadding(containerWidth) {
return containerWidth <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
exposure: true
}) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
};
/**
* When guidelines are outside the viewport, filter them out, do not show
* So the guideline container won't make the fabric-editor-popup-scroll-parent overflow
* @param guidelines
* @param containerWidth editorWidth
* @param lineLength
* @param isTableScalingEnabled
* @param isFullWidthModeEnabled
*/
var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWidth, lineLength, isTableScalingEnabled, isFullWidthModeEnabled) {
var guidelineVisibleAdjustment = _consts2.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT;
if (isTableScalingEnabled) {
// Notes:
// Example: containerWidth = 1244, lineLength = 1180 (used for when editor full width mode is enabled)
// Full width/dynamic x coordinate can be float number.
// Ex: guideline.position.x can be 590.5. So 590.5 * 2 = 1181 (not 1180).
// For PTW we need to ensure that dynamic guideline never gets excluded: 1181 should be > width + guidelineVisibleAdjustment
// guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
var preserve_table_widths_adjustment = -1 * _guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET + 1;
var padding = getPadding(containerWidth);
guidelineVisibleAdjustment = isFullWidthModeEnabled ? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
: -2 * padding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
}
var width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
return guidelines.filter(function (guideline) {
return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < width + guidelineVisibleAdjustment;
});
};
var selector = function selector(states) {
var _states$tableState;
return {
widthToWidest: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.widthToWidest
};
};
var TableResizer = exports.TableResizer = function TableResizer(_ref) {
var _editorView$state, _pluginInjectionApi$a2, _pluginInjectionApi$u2;
var children = _ref.children,
width = _ref.width,
maxWidth = _ref.maxWidth,
containerWidth = _ref.containerWidth,
lineLength = _ref.lineLength,
updateWidth = _ref.updateWidth,
onResizeStop = _ref.onResizeStop,
onResizeStart = _ref.onResizeStart,
editorView = _ref.editorView,
getPos = _ref.getPos,
node = _ref.node,
tableRef = _ref.tableRef,
displayGuideline = _ref.displayGuideline,
attachAnalyticsEvent = _ref.attachAnalyticsEvent,
displayGapCursor = _ref.displayGapCursor,
isTableScalingEnabled = _ref.isTableScalingEnabled,
allowFixedColumnWidthOption = _ref.allowFixedColumnWidthOption,
isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
isWholeTableInDanger = _ref.isWholeTableInDanger,
shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent,
pluginInjectionApi = _ref.pluginInjectionApi,
isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
isCommentEditor = _ref.isCommentEditor,
disabled = _ref.disabled;
var currentGap = (0, _react.useRef)(0);
// track resizing state - use ref over state to avoid re-render
var isResizing = (0, _react.useRef)(false);
var areResizeMetaKeysPressed = (0, _react.useRef)(false);
var resizerRef = (0, _react.useRef)(null);
var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.interactionState');
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['table'], selector),
widthToWidest = _useSharedPluginState.widthToWidest;
// used to reposition tooltip when table is resizing via keyboard
var updateTooltip = _react.default.useRef();
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
snappingEnabled = _useState2[0],
setSnappingEnabled = _useState2[1];
var _useIntl = (0, _reactIntlNext.useIntl)(),
formatMessage = _useIntl.formatMessage;
var currentSelection = (_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection;
var tableFromSelection = (0, _react.useMemo)(function () {
return (0, _utils.findTable)(currentSelection);
}, [currentSelection]);
var tableFromSelectionPosition = tableFromSelection === null || tableFromSelection === void 0 ? void 0 : tableFromSelection.pos;
var isTableSelected = (0, _react.useMemo)(function () {
// Avoid call getPos if there is no table in the current selection,
if (typeof tableFromSelectionPosition !== 'number') {
return false;
}
if (interactionState === 'hasNotHadInteraction') {
return false;
}
var currentNodePosition;
try {
// The React Table and the ProseMirror can endup out-of-sync
// ProseMirror always assume the DOM is not managed by other framework
currentNodePosition = getPos();
} catch (e) {
(0, _monitoring.logException)(e, {
location: 'editor-plugin-table/table-resizer'
});
return false;
}
return tableFromSelectionPosition === currentNodePosition;
}, [tableFromSelectionPosition, interactionState, getPos]);
var resizerMinWidth = getResizerMinWidth(node);
var handleSize = getResizerHandleHeight(tableRef);
var _useMeasureFramerate = (0, _analytics2.useMeasureFramerate)(),
startMeasure = _useMeasureFramerate.startMeasure,
endMeasure = _useMeasureFramerate.endMeasure,
countFrames = _useMeasureFramerate.countFrames;
var excludeGuidelineConfig = (0, _react.useMemo)(function () {
return {
innerGuidelines: !!isTableAlignmentEnabled,
breakoutPoints: !!(isTableAlignmentEnabled && isFullWidthModeEnabled)
};
}, [isFullWidthModeEnabled, isTableAlignmentEnabled]);
var updateActiveGuidelines = (0, _react.useCallback)(function (_ref2) {
var gap = _ref2.gap,
keys = _ref2.keys;
if (gap !== currentGap.current) {
currentGap.current = gap;
var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts2.TABLE_SNAP_GAP, keys, visibleGuidelines));
}
}, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, lineLength, isFullWidthModeEnabled]);
var guidelineSnaps = (0, _react.useMemo)(function () {
return snappingEnabled ? {
x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(_snapping.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
// was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths
} : undefined;
}, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
var switchToCenterAlignment = (0, _react.useCallback)(function (pos, node, newWidth, state, dispatch) {
if ((0, _alignment.shouldChangeAlignmentToCenterResized)(isTableAlignmentEnabled, node, lineLength, newWidth) && isResizing.current) {
var _pluginInjectionApi$a;
var tableNodeWithPos = {
pos: pos,
node: node
};
(0, _commandsWithAnalytics.setTableAlignmentWithTableContentWithPosWithAnalytics)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(_alignment.ALIGN_CENTER, _alignment.ALIGN_START, tableNodeWithPos, _analytics.INPUT_METHOD.AUTO, _analytics.CHANGE_ALIGNMENT_REASON.EDITOR_APPEARANCE_CHANGED)(state, dispatch);
return true;
}
return false;
}, [isTableAlignmentEnabled, lineLength, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions]);
(0, _react.useEffect)(function () {
return function () {
// only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
// deleted this table
if (isResizing.current) {
var dispatch = editorView.dispatch,
tr = editorView.state.tr;
displayGapCursor(true);
displayGuideline([]);
tr.setMeta(_tableWidth.pluginKey, {
resizing: false,
tableLocalId: '',
tableRef: null
});
dispatch(tr);
}
};
}, [editorView, displayGuideline, displayGapCursor]);
var handleResizeStart = (0, _react.useCallback)(function () {
var _pluginInjectionApi$u;
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('tableResize');
}
startMeasure();
isResizing.current = true;
var dispatch = editorView.dispatch,
tr = editorView.state.tr;
displayGapCursor(false);
tr.setMeta(_tableWidth.pluginKey, {
resizing: true,
tableLocalId: node.attrs.localId,
tableRef: tableRef
});
tr.setMeta('is-resizer-resizing', true);
tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
});
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$u = pluginInjectionApi.userIntent) === null || _pluginInjectionApi$u === void 0 || _pluginInjectionApi$u.commands.setCurrentUserIntent('resizing')({
tr: tr
});
dispatch(tr);
var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
setSnappingEnabled(displayGuideline(visibleGuidelines));
if (onResizeStart) {
onResizeStart();
}
}, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isFullWidthModeEnabled, lineLength, containerWidth, excludeGuidelineConfig, displayGuideline, onResizeStart, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$u2 = pluginInjectionApi.userIntent) === null || _pluginInjectionApi$u2 === void 0 ? void 0 : _pluginInjectionApi$u2.commands]);
var handleResize = (0, _react.useCallback)(
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function (originalState, delta) {
var _node$attrs$localId, _node$attrs;
countFrames();
var newWidth = originalState.width + delta.width;
var pos;
try {
pos = getPos();
} catch (_unused) {
return;
}
if (typeof pos !== 'number') {
return;
}
var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth;
var closestSnap = !isCommentEditor && (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(_snapping.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, _consts2.TABLE_HIGHLIGHT_GAP, _consts2.TABLE_HIGHLIGHT_TOLERANCE);
closestSnap && updateActiveGuidelines(closestSnap);
// When snapping to the full width guideline, resize the table to be 1800px
var state = editorView.state,
dispatch = editorView.dispatch;
var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
var fullWidthGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(function (guideline) {
return guideline.isFullWidth;
})[0];
var isFullWidthGuidelineActive = (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? closestSnap && fullWidthGuideline && closestSnap.keys.includes(fullWidthGuideline.key) : closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
var tableMaxWidth = isCommentEditor ? Math.floor(containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR) : (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH;
var shouldUpdateWidthToWidest = isCommentEditor ? tableMaxWidth <= newWidth : !!isTableScalingEnabled && isFullWidthGuidelineActive;
var previewParentWidth = isCommentEditor && shouldUpdateWidthToWidest ? tableMaxWidth : newWidth;
(0, _scaleTable.previewScaleTable)(tableRef, {
node: node,
prevNode: node,
start: pos + 1,
parentWidth: previewParentWidth
}, editorView.domAtPos.bind(editorView), isTableScalingEnabled, allowFixedColumnWidthOption, isCommentEditor);
(0, _commands.chainCommands)(function (state, dispatch) {
return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
}, (0, _misc.updateWidthToWidest)((0, _defineProperty2.default)({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
updateWidth(shouldUpdateWidthToWidest ? tableMaxWidth : newWidth);
return newWidth;
}, [countFrames, isCommentEditor, isTableScalingEnabled, allowFixedColumnWidthOption, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
var scheduleResize = (0, _react.useMemo)(function () {
return (0, _rafSchd.default)(handleResize);
}, [handleResize]);
var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
var _node$attrs$localId2, _node$attrs2, _pluginInjectionApi$u3;
isResizing.current = false;
var newWidth = originalState.width + delta.width;
var originalNewWidth = newWidth;
var state = editorView.state,
dispatch = editorView.dispatch;
var pos = getPos();
var currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
var tableMaxWidth = isCommentEditor ? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
: (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH;
newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
var tr = state.tr.setMeta(_tableWidth.pluginKey, {
resizing: false,
tableLocalId: '',
tableRef: null
});
tr.setMeta('is-resizer-resizing', false);
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$u3 = pluginInjectionApi.userIntent) === null || _pluginInjectionApi$u3 === void 0 || _pluginInjectionApi$u3.commands.setCurrentUserIntent('default')({
tr: tr
});
var frameRateSamples = endMeasure();
if (frameRateSamples.length > 0) {
var resizeFrameRatePayloads = (0, _analytics2.generateResizeFrameRatePayloads)({
docSize: state.doc.nodeSize,
frameRateSamples: frameRateSamples,
originalNode: node
});
resizeFrameRatePayloads.forEach(function (payload) {
var _attachAnalyticsEvent;
(_attachAnalyticsEvent = attachAnalyticsEvent(payload)) === null || _attachAnalyticsEvent === void 0 || _attachAnalyticsEvent(tr);
});
}
if (typeof pos === 'number') {
var _attachAnalyticsEvent2;
tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
width: newWidth,
layout: node.attrs.layout !== _alignment.ALIGN_START && node.attrs.layout !== _alignment.ALIGN_CENTER ? _alignment.ALIGN_CENTER : node.attrs.layout
}));
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var newNode = tr.doc.nodeAt(pos);
tr = (0, _scaleTable.scaleTable)(tableRef, {
node: newNode,
prevNode: node,
start: pos + 1,
// We use originalNewWidth in comment editor, because in comment editor
// newWidth can be underined when table is resized to 'full-width'
// scaleTable function needs number value to work correctly.
parentWidth: isCommentEditor ? originalNewWidth : newWidth
}, editorView.domAtPos.bind(editorView), pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent || false, isCommentEditor)(tr);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var scaledNode = tr.doc.nodeAt(pos);
(_attachAnalyticsEvent2 = attachAnalyticsEvent((0, _analytics2.generateResizedPayload)({
originalNode: node,
resizedNode: scaledNode
}))) === null || _attachAnalyticsEvent2 === void 0 || _attachAnalyticsEvent2(tr);
}
displayGapCursor(true);
dispatch(tr);
if (delta.width < 0 && newWidth !== undefined) {
var _pluginInjectionApi$a3;
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.actions.ariaNotify(formatMessage(_messages.tableMessages.tableSizeDecreaseScreenReaderInformation, {
newWidth: newWidth
}));
} else if (delta.width > 0 && newWidth !== undefined) {
var _pluginInjectionApi$a4;
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.ariaNotify(formatMessage(_messages.tableMessages.tableSizeIncreaseScreenReaderInformation, {
newWidth: newWidth
}));
}
// Hide guidelines when resizing stops
displayGuideline([]);
newWidth !== undefined && updateWidth(newWidth);
scheduleResize.cancel();
if (onResizeStop) {
onResizeStop();
}
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('tableResize');
}
return newWidth;
}, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, pluginInjectionApi, attachAnalyticsEvent, tableRef, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
var newWidth = width + step;
if (newWidth < resizerMinWidth) {
return;
}
handleResizeStop({
width: width,
x: 0,
y: 0,
height: 0
}, {
width: step,
height: 0
});
}, [width, handleResizeStop, resizerMinWidth]);
var handleEscape = (0, _react.useCallback)(function () {
editorView === null || editorView === void 0 || editorView.focus();
}, [editorView]);
var handleKeyDown = (0, _react.useCallback)(function (event) {
var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
if (event.altKey || metaKey || event.shiftKey) {
areResizeMetaKeysPressed.current = true;
}
if (event.altKey && metaKey) {
if (isBracketKey) {
event.preventDefault();
handleTableSizeChangeOnKeypress(event.code === 'BracketRight' ? RESIZE_STEP_VALUE : -RESIZE_STEP_VALUE);
}
} else if (!areResizeMetaKeysPressed.current) {
handleEscape();
}
}, [handleEscape, handleTableSizeChangeOnKeypress]);
var handleKeyUp = (0, _react.useCallback)(function (event) {
if (event.altKey || event.metaKey) {
areResizeMetaKeysPressed.current = false;
}
return;
}, [areResizeMetaKeysPressed]);
(0, _react.useLayoutEffect)(function () {
if (!resizerRef.current) {
return;
}
var resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
var globalKeyDownHandler = function globalKeyDownHandler(event) {
var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
if (!isTableSelected) {
return;
}
if (event.altKey && event.shiftKey && metaKey && event.code === 'KeyR') {
event.preventDefault();
if (!resizeHandleThumbEl) {
return;
}
resizeHandleThumbEl.focus();
resizeHandleThumbEl.scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'nearest'
});
}
};
var editorViewDom = editorView === null || editorView === void 0 ? void 0 : editorView.dom;
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
editorViewDom === null || editorViewDom === void 0 || editorViewDom.addEventListener('keydown', globalKeyDownHandler);
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.addEventListener('keydown', handleKeyDown);
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.addEventListener('keyup', handleKeyUp);
return function () {
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
editorViewDom === null || editorViewDom === void 0 || editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.removeEventListener('keydown', handleKeyDown);
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.removeEventListener('keyup', handleKeyUp);
};
}, [resizerRef, editorView, handleResizeStop, isTableSelected, handleKeyDown, handleKeyUp]);
(0, _react.useLayoutEffect)(function () {
var _updateTooltip$curren;
(_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
}, [width]);
var resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && (0, _alignment.normaliseAlignment)(node.attrs.layout) === _alignment.ALIGN_CENTER ? 2 : 1;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
ref: resizerRef,
enable: disabled ? {} : handles,
width: width,
handleAlignmentMethod: "sticky",
handleSize: handleSize,
handleStyles: handleStyles,
handleResizeStart: handleResizeStart,
handleResize: scheduleResize,
handleResizeStop: handleResizeStop,
resizeRatio: resizeRatio,
minWidth: resizerMinWidth,
maxWidth: maxWidth,
snapGap: _consts2.TABLE_SNAP_GAP,
snap: guidelineSnaps,
handlePositioning: "adjacent",
isHandleVisible: isTableSelected,
needExtendedResizeZone: (0, _expValEquals.expValEquals)('platform_editor_table_resizer_extended_zone', 'isEnabled', true) ? true : !isTableSelected,
appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
handleHighlight: "shadow"
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
handleTooltipContent: function handleTooltipContent(_ref3) {
var update = _ref3.update;
updateTooltip.current = update;
return /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
description: formatMessage(_messages.tableMessages.resizeTable),
keymap: _keymaps.focusTableResizer
});
},
"data-vc-nvs": "true"
}, children));
};