@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
531 lines (525 loc) • 30.2 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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) { _defineProperty(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; }
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import rafSchd from 'raf-schd';
import { useIntl } from 'react-intl-next';
import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
import { logException } from '@atlaskit/editor-common/monitoring';
import { ResizerNext } from '@atlaskit/editor-common/resizer';
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
import { akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
import { findTable } from '@atlaskit/editor-tables/utils';
import { insm } from '@atlaskit/insm';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
import { updateWidthToWidest } from '../pm-plugins/commands/misc';
import { META_KEYS } from '../pm-plugins/table-analytics';
import { getColgroupChildrenLength } from '../pm-plugins/table-resizing/utils/colgroup';
import { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
import { previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils/scale-table';
import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
import { ALIGN_CENTER, ALIGN_START, normaliseAlignment, shouldChangeAlignmentToCenterResized } from '../pm-plugins/utils/alignment';
import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../pm-plugins/utils/analytics';
import { defaultGuidelines, defaultGuidelinesForPreserveTable, PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET } from '../pm-plugins/utils/guidelines';
import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap, PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET } from '../pm-plugins/utils/snapping';
import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
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 = getColgroupChildrenLength(node);
var minColumnWidth = Math.min(3, currentColumnCount) * 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 <= akEditorFullPageNarrowBreakout && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
exposure: true
}) ? akEditorGutterPaddingReduced : 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 = 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 * 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
};
};
export var 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,
isTableWithFixedColumnWidthsOptionEnabled = _ref.isTableWithFixedColumnWidthsOptionEnabled,
isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
isWholeTableInDanger = _ref.isWholeTableInDanger,
shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent,
pluginInjectionApi = _ref.pluginInjectionApi,
isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
isCommentEditor = _ref.isCommentEditor,
disabled = _ref.disabled;
var currentGap = useRef(0);
// track resizing state - use ref over state to avoid re-render
var isResizing = useRef(false);
var areResizeMetaKeysPressed = useRef(false);
var resizerRef = useRef(null);
var interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['table'], selector),
widthToWidest = _useSharedPluginState.widthToWidest;
// used to reposition tooltip when table is resizing via keyboard
var updateTooltip = React.useRef();
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
snappingEnabled = _useState2[0],
setSnappingEnabled = _useState2[1];
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var isToolbarAIFCEnabled = Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar);
var currentSelection = (_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection;
var tableFromSelection = useMemo(function () {
return findTable(currentSelection);
}, [currentSelection]);
var tableFromSelectionPosition = tableFromSelection === null || tableFromSelection === void 0 ? void 0 : tableFromSelection.pos;
var isTableSelected = 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) {
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 = useMeasureFramerate(),
startMeasure = _useMeasureFramerate.startMeasure,
endMeasure = _useMeasureFramerate.endMeasure,
countFrames = _useMeasureFramerate.countFrames;
var excludeGuidelineConfig = useMemo(function () {
return {
innerGuidelines: !!isTableAlignmentEnabled,
breakoutPoints: !!(isTableAlignmentEnabled && isFullWidthModeEnabled)
};
}, [isFullWidthModeEnabled, isTableAlignmentEnabled]);
var updateActiveGuidelines = useCallback(function (_ref2) {
var gap = _ref2.gap,
keys = _ref2.keys;
if (gap !== currentGap.current) {
currentGap.current = gap;
var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
}
}, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, lineLength, isFullWidthModeEnabled]);
var guidelineSnaps = useMemo(function () {
return snappingEnabled ? {
x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
// was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
} : undefined;
}, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
var switchToCenterAlignment = useCallback(function (pos, node, newWidth, state, dispatch) {
if (shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, node, lineLength, newWidth) && isResizing.current) {
var _pluginInjectionApi$a;
var tableNodeWithPos = {
pos: pos,
node: node
};
setTableAlignmentWithTableContentWithPosWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(ALIGN_CENTER, ALIGN_START, tableNodeWithPos, INPUT_METHOD.AUTO, 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]);
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(tableWidthPluginKey, {
resizing: false,
tableLocalId: '',
tableRef: null
});
dispatch(tr);
}
};
}, [editorView, displayGuideline, displayGapCursor]);
var handleResizeStart = useCallback(function () {
if (expValEquals('cc_editor_interactivity_monitoring', 'isEnabled', true)) {
var _insm$session;
(_insm$session = 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(tableWidthPluginKey, {
resizing: true,
tableLocalId: node.attrs.localId,
tableRef: tableRef
});
tr.setMeta('is-resizer-resizing', true);
tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
});
if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || isToolbarAIFCEnabled || expValEqualsNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true)) {
var _pluginInjectionApi$u;
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 ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
setSnappingEnabled(displayGuideline(visibleGuidelines));
if (onResizeStart) {
onResizeStart();
}
}, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isToolbarAIFCEnabled, 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 = 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 (e) {
return;
}
if (typeof pos !== 'number') {
return;
}
var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth;
var closestSnap = !isCommentEditor && findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, 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 = defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(function (guideline) {
return guideline.isFullWidth;
})[0];
var isFullWidthGuidelineActive = closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
var tableMaxWidth = isCommentEditor ? Math.floor(containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR) : TABLE_MAX_WIDTH;
var shouldUpdateWidthToWidest = isCommentEditor ? tableMaxWidth <= newWidth : !!isTableScalingEnabled && isFullWidthGuidelineActive;
var previewParentWidth = isCommentEditor && shouldUpdateWidthToWidest ? tableMaxWidth : newWidth;
previewScaleTable(tableRef, {
node: node,
prevNode: node,
start: pos + 1,
parentWidth: previewParentWidth
}, editorView.domAtPos.bind(editorView), isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isCommentEditor);
chainCommands(function (state, dispatch) {
return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
}, updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
updateWidth(shouldUpdateWidthToWidest ? tableMaxWidth : newWidth);
return newWidth;
}, [countFrames, isCommentEditor, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
var scheduleResize = useMemo(function () {
return rafSchd(handleResize);
}, [handleResize]);
var handleResizeStop = useCallback(function (originalState, delta) {
var _node$attrs$localId2, _node$attrs2;
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
: TABLE_MAX_WIDTH;
newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
var tr = state.tr.setMeta(tableWidthPluginKey, {
resizing: false,
tableLocalId: '',
tableRef: null
});
tr.setMeta('is-resizer-resizing', false);
if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || isToolbarAIFCEnabled || expValEqualsNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true)) {
var _pluginInjectionApi$u3;
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 = 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 !== ALIGN_START && node.attrs.layout !== ALIGN_CENTER ? 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 = 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(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.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.tableSizeIncreaseScreenReaderInformation, {
newWidth: newWidth
}));
}
// Hide guidelines when resizing stops
displayGuideline([]);
newWidth !== undefined && updateWidth(newWidth);
scheduleResize.cancel();
if (onResizeStop) {
onResizeStop();
}
if (expValEquals('cc_editor_interactivity_monitoring', 'isEnabled', true)) {
var _insm$session2;
(_insm$session2 = insm.session) === null || _insm$session2 === void 0 || _insm$session2.endFeature('tableResize');
}
return newWidth;
}, [editorView, getPos, node, isCommentEditor, widthToWidest, isToolbarAIFCEnabled, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, pluginInjectionApi, attachAnalyticsEvent, tableRef, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
var handleTableSizeChangeOnKeypress = 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 = useCallback(function () {
editorView === null || editorView === void 0 || editorView.focus();
}, [editorView]);
var handleKeyDown = useCallback(function (event) {
var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
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 = useCallback(function (event) {
if (event.altKey || event.metaKey) {
areResizeMetaKeysPressed.current = false;
}
return;
}, [areResizeMetaKeysPressed]);
useLayoutEffect(function () {
if (!resizerRef.current) {
return;
}
var resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
var globalKeyDownHandler = function globalKeyDownHandler(event) {
var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
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]);
useLayoutEffect(function () {
var _updateTooltip$curren;
(_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
}, [width]);
var resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && normaliseAlignment(node.attrs.layout) === ALIGN_CENTER ? 2 : 1;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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: TABLE_SNAP_GAP,
snap: guidelineSnaps,
handlePositioning: "adjacent",
isHandleVisible: isTableSelected,
needExtendedResizeZone: !isTableSelected,
appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
handleHighlight: "shadow",
handleTooltipContent: function handleTooltipContent(_ref3) {
var update = _ref3.update;
updateTooltip.current = update;
return /*#__PURE__*/React.createElement(ToolTipContent, {
description: formatMessage(messages.resizeTable),
keymap: focusTableResizer
});
},
"data-vc-nvs": "true"
}, children));
};