@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
406 lines (399 loc) • 22.9 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import classNames from 'classnames';
import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
import { getPluginState } from '../pm-plugins/plugin-factory';
import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
import { ALIGN_CENTER, ALIGN_START } from '../pm-plugins/utils/alignment';
import { TableCssClassName as ClassName } from '../types';
import { getAlignmentStyle } from './table-container-styles';
import { TableResizer } from './TableResizer';
var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
var className = _ref.className,
style = _ref.style,
node = _ref.node,
children = _ref.children;
return /*#__PURE__*/React.createElement("div", {
ref: ref
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: style
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: className,
"data-number-column": node.attrs.isNumberColumnEnabled,
"data-layout": node.attrs.layout,
"data-testid": "table-container"
}, children);
});
var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
var node = _ref2.node,
children = _ref2.children,
pluginInjectionApi = _ref2.pluginInjectionApi,
getPos = _ref2.getPos,
editorView = _ref2.editorView;
var alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['table'], function (states) {
var _states$tableState, _states$tableState2;
return {
isFullWidthModeEnabled: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.isFullWidthModeEnabled,
wasFullWidthModeEnabled: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.wasFullWidthModeEnabled
};
}),
isFullWidthModeEnabled = _useSharedPluginState.isFullWidthModeEnabled,
wasFullWidthModeEnabled = _useSharedPluginState.wasFullWidthModeEnabled;
useEffect(function () {
if (editorView && getPos) {
var state = editorView.state,
dispatch = editorView.dispatch;
if (wasFullWidthModeEnabled && isFullWidthModeEnabled !== undefined && !isFullWidthModeEnabled && alignment !== ALIGN_CENTER && node.attrs.width > akEditorDefaultLayoutWidth) {
var _pluginInjectionApi$a;
var pos = getPos && getPos();
if (typeof pos !== 'number') {
return;
}
setTableAlignmentWithTableContentWithPosWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(ALIGN_CENTER, alignment, {
pos: pos,
node: node
}, INPUT_METHOD.AUTO, CHANGE_ALIGNMENT_REASON.EDITOR_APPEARANCE_CHANGED)(state, dispatch);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [editorView, isFullWidthModeEnabled, wasFullWidthModeEnabled, node]);
var style = useMemo(function () {
return getAlignmentStyle(alignment);
}, [alignment]);
return /*#__PURE__*/React.createElement("div", {
"data-testid": "table-alignment-container",
"data-ssr-placeholder": "table-".concat(node.attrs.localId),
"data-ssr-placeholder-replace": "table-".concat(node.attrs.localId)
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: style
}, children);
};
var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_ref3) {
var isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
node = _ref3.node,
children = _ref3.children,
pluginInjectionApi = _ref3.pluginInjectionApi,
getPos = _ref3.getPos,
editorView = _ref3.editorView;
if (!isTableAlignmentEnabled) {
return /*#__PURE__*/React.createElement("div", {
"data-testid": "table-alignment-container",
"data-ssr-placeholder": "table-".concat(node.attrs.localId),
"data-ssr-placeholder-replace": "table-".concat(node.attrs.localId),
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
display: 'flex',
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
justifyContent: 'center'
}
}, children);
}
return /*#__PURE__*/React.createElement(AlignmentTableContainer, {
node: node,
pluginInjectionApi: pluginInjectionApi,
getPos: getPos,
editorView: editorView
}, children);
};
var selector = function selector(states) {
return {
tableState: states.tableState,
editorViewModeState: states.editorViewModeState
};
};
var getPadding = function getPadding(containerWidth) {
return containerWidth <= akEditorFullPageNarrowBreakout && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
exposure: true
}) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
};
export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
var children = _ref4.children,
className = _ref4.className,
node = _ref4.node,
containerWidth = _ref4.containerWidth,
lineLength = _ref4.lineLength,
editorView = _ref4.editorView,
getPos = _ref4.getPos,
tableRef = _ref4.tableRef,
isResizing = _ref4.isResizing,
pluginInjectionApi = _ref4.pluginInjectionApi,
tableWrapperHeight = _ref4.tableWrapperHeight,
isWholeTableInDanger = _ref4.isWholeTableInDanger,
isTableScalingEnabled = _ref4.isTableScalingEnabled,
allowFixedColumnWidthOption = _ref4.allowFixedColumnWidthOption,
isTableAlignmentEnabled = _ref4.isTableAlignmentEnabled,
shouldUseIncreasedScalingPercent = _ref4.shouldUseIncreasedScalingPercent,
isCommentEditor = _ref4.isCommentEditor,
isChromelessEditor = _ref4.isChromelessEditor;
var containerRef = useRef(null);
var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
resizing = _useState2[0],
setIsResizing = _useState2[1];
var _useSharedPluginState2 = useSharedPluginStateWithSelector(pluginInjectionApi, ['table', 'editorViewMode'], selector),
tableState = _useSharedPluginState2.tableState,
editorViewModeState = _useSharedPluginState2.editorViewModeState;
var isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
var isMaxWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isMaxWidthModeEnabled;
var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
// If the editor is in max width mode and the table has no width, use the max width value rather than the default table value
var tableWidth = isMaxWidthModeEnabled && !node.attrs.width && fg('platform_editor_max_width_default_width') ? TABLE_MAX_WIDTH : getTableContainerWidth(node);
var updateContainerHeight = useCallback(function (height) {
var _containerRef$current;
// current StickyHeader State is not stable to be fetch.
// we need to update stickyHeader plugin to make sure state can be
// consistently fetch and refactor below
var stickyHeaders = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getElementsByClassName('pm-table-sticky');
if (!stickyHeaders || stickyHeaders.length < 1) {
// when starting to drag, we need to keep the original space,
// -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
// 1px is border width but collapse make it 0.5.
// -- When sticky header appear, we should add first row height but reduce
// collapsed border
return typeof height === 'number' ? "".concat(height + 40.5, "px") : 'auto';
} else {
var _containerRef$current2;
var stickyHeaderHeight = ((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
return typeof height === 'number' ? "".concat(height + stickyHeaderHeight + 39.5, "px") : 'auto';
}
}, []);
var onResizeStart = useCallback(function () {
setIsResizing(true);
}, []);
var onResizeStop = useCallback(function () {
setIsResizing(false);
}, []);
var updateWidth = useCallback(function (width) {
if (!containerRef.current) {
return;
}
// make sure during resizing
// the pm-table-resizer-container width is the same as its child div resizer-item
// otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
// and cause the fabric-editor-popup-scroll-parent to overflow
if (containerRef.current.style.width !== "".concat(width, "px")) {
containerRef.current.style.width = "".concat(width, "px");
}
}, []);
var displayGuideline = useCallback(function (guidelines) {
var _pluginInjectionApi$g, _pluginInjectionApi$g2;
return (_pluginInjectionApi$g = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g2 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g2 === void 0 || (_pluginInjectionApi$g2 = _pluginInjectionApi$g2.actions) === null || _pluginInjectionApi$g2 === void 0 ? void 0 : _pluginInjectionApi$g2.displayGuideline(editorView)({
guidelines: guidelines
})) !== null && _pluginInjectionApi$g !== void 0 ? _pluginInjectionApi$g : false;
}, [pluginInjectionApi, editorView]);
var attachAnalyticsEvent = useCallback(function (payload) {
var _pluginInjectionApi$a2;
return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.attachAnalyticsEvent(payload);
}, [pluginInjectionApi]);
var displayGapCursor = useCallback(function (toggle) {
var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
}, [pluginInjectionApi]);
var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
var _useMemo = useMemo(function () {
var responsiveContainerWidth = 0;
var resizeHandleSpacing = 12;
var padding = getPadding(containerWidth);
// When Full width or Max width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
// updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
// issues when viwport width is less than full/max width Editor's width. To detect avoid them
// we need to use lineLength to defined responsiveWidth instead of containerWidth
// (which does not get updated when Mac setting changes) in Full-width/Max-width editor.
if (isFullWidthModeEnabled || isMaxWidthModeEnabled && fg('platform_editor_max_width_default_width')) {
// When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
// When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
// scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
// lineLength is undefined on first paint → width: NaN → wrapper expands to page
// width. rAF col-sizing then runs before the number-column padding and
// the final shrink, so column widths are locked in wrong.
// If the value isn't finite we fall back to gutterWidth for that first frame.
if (isTableScalingEnabled && Number.isFinite(lineLength) && lineLength !== undefined) {
responsiveContainerWidth = lineLength;
} else {
responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
}
} else if (isCommentEditor) {
responsiveContainerWidth = containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR;
} else {
// 76 is currently an accepted padding value considering the spacing for resizer handle
// containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
// a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
// padding left = padding right = akEditorGutterPadding = 32
responsiveContainerWidth = isTableScalingEnabled ? containerWidth - padding * 2 : containerWidth - padding * 2 - resizeHandleSpacing;
}
// Fix for HOT-119925: Ensure table width is properly constrained and responsive
// For wide tables, ensure they don't exceed container width and can be scrolled
var calculatedWidth = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
// Ensure minimum width for usability while respecting container constraints
var width = Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300));
var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH);
return {
width: width,
maxResizerWidth: maxResizerWidth
};
}, [containerWidth, isCommentEditor, isFullWidthModeEnabled, isMaxWidthModeEnabled, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]),
width = _useMemo.width,
maxResizerWidth = _useMemo.maxResizerWidth;
useEffect(function () {
if (!isResizing) {
tableWidthRef.current = width;
}
}, [width, isResizing]);
// CSS Solution for table resizer container width
var tableResizerContainerWidth = useMemo(function () {
return getTableResizerContainerForFullPageWidthInCSS(node, isTableScalingEnabled);
}, [node, isTableScalingEnabled]);
// CSS Solution for table resizer max width
var tableResizerMaxWidth = React.useMemo(function () {
var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
var nonResizingMaxWidth = isFullPageAppearance ? getTableResizerContainerMaxWidthInCSS(isCommentEditor, isChromelessEditor, isTableScalingEnabled) : maxResizerWidth;
// isResizing is needed, otherwise we can't resize table.
// when not resizing, maxWidth is calculated based on the container width via CSS
return !isResizing ? nonResizingMaxWidth : maxResizerWidth;
}, [isCommentEditor, isChromelessEditor, isTableScalingEnabled, isResizing, maxResizerWidth]);
// TODO: EDITOR-1679 - Add support for lineLength being undefined at runtime.
var tableResizerProps = {
// The `width` is used for .resizer-item in <TableResizer>, and it has to be a number
// So we can't use min(var(--ak-editor-table-width), ${tableWidth}px) here
// We still have to use JS to calculate width
width: width,
maxWidth: tableResizerMaxWidth,
containerWidth: containerWidth,
// oxlint-disable-next-line @typescript-eslint/no-non-null-assertion -- To be fixed in EDITOR-1679
lineLength: lineLength,
updateWidth: updateWidth,
editorView: editorView,
getPos: getPos,
node: node,
tableRef: tableRef,
displayGuideline: displayGuideline,
attachAnalyticsEvent: attachAnalyticsEvent,
displayGapCursor: displayGapCursor,
isTableAlignmentEnabled: isTableAlignmentEnabled,
isFullWidthModeEnabled: isFullWidthModeEnabled,
isTableScalingEnabled: isTableScalingEnabled,
allowFixedColumnWidthOption: allowFixedColumnWidthOption,
isWholeTableInDanger: isWholeTableInDanger,
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
pluginInjectionApi: pluginInjectionApi,
onResizeStart: onResizeStart,
onResizeStop: onResizeStop,
isCommentEditor: isCommentEditor
};
var isLivePageViewMode = mode === 'view';
return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
isTableAlignmentEnabled: isTableAlignmentEnabled,
node: node,
pluginInjectionApi: pluginInjectionApi,
getPos: getPos,
editorView: editorView
}, /*#__PURE__*/React.createElement("div", {
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
'--ak-editor-table-gutter-padding': 'calc(var(--ak-editor--large-gutter-padding) * 2)',
'--ak-editor-table-width': isFullPageAppearance ? tableResizerContainerWidth : "".concat(tableWidthRef.current, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
width: 'var(--ak-editor-table-width)',
height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto',
position: isLivePageViewMode ? 'relative' : 'unset'
}
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: ClassName.TABLE_RESIZER_CONTAINER,
ref: containerRef
}, /*#__PURE__*/React.createElement(TableResizer, _extends({}, tableResizerProps, {
disabled: isLivePageViewMode
}), /*#__PURE__*/React.createElement(InnerContainer
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
, {
className: className,
node: node
}, children))));
});
export var TableContainer = function TableContainer(_ref5) {
var children = _ref5.children,
node = _ref5.node,
className = _ref5.className,
_ref5$containerWidth = _ref5.containerWidth,
editorWidth = _ref5$containerWidth.width,
lineLength = _ref5$containerWidth.lineLength,
editorView = _ref5.editorView,
getPos = _ref5.getPos,
tableRef = _ref5.tableRef,
isNested = _ref5.isNested,
tableWrapperHeight = _ref5.tableWrapperHeight,
isResizing = _ref5.isResizing,
pluginInjectionApi = _ref5.pluginInjectionApi,
isWholeTableInDanger = _ref5.isWholeTableInDanger,
isTableResizingEnabled = _ref5.isTableResizingEnabled,
isTableScalingEnabled = _ref5.isTableScalingEnabled,
allowFixedColumnWidthOption = _ref5.allowFixedColumnWidthOption,
isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled,
shouldUseIncreasedScalingPercent = _ref5.shouldUseIncreasedScalingPercent,
isCommentEditor = _ref5.isCommentEditor,
isChromelessEditor = _ref5.isChromelessEditor;
if (isTableResizingEnabled && !isNested) {
return /*#__PURE__*/React.createElement(ResizableTableContainer
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
, {
className: className,
node: node
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
containerWidth: editorWidth
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
lineLength: lineLength,
editorView: editorView,
getPos: getPos,
tableRef: tableRef,
tableWrapperHeight: tableWrapperHeight,
isResizing: isResizing,
pluginInjectionApi: pluginInjectionApi,
isTableScalingEnabled: isTableScalingEnabled,
allowFixedColumnWidthOption: allowFixedColumnWidthOption,
isWholeTableInDanger: isWholeTableInDanger,
isTableAlignmentEnabled: isTableAlignmentEnabled,
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
isCommentEditor: isCommentEditor,
isChromelessEditor: isChromelessEditor
}, children);
}
var _getPluginState = getPluginState(editorView.state),
isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
var resizableTableWidth = isFullPageAppearance ? getTableResizerContainerForFullPageWidthInCSS(node, isTableScalingEnabled) : "calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))";
return /*#__PURE__*/React.createElement(InnerContainer, {
node: node
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: classNames(className, {
'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested && !(isChromelessEditor && isDragAndDropEnabled)
}),
style:
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
{
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
width: 'inherit',
marginLeft: isChromelessEditor ? 18 : undefined,
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
'--ak-editor-table-width': resizableTableWidth
}
}, children);
};