@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
412 lines (405 loc) • 20.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
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';
const InnerContainer = /*#__PURE__*/forwardRef(({
className,
style,
node,
children
}, ref) => {
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);
});
const AlignmentTableContainer = ({
node,
children,
pluginInjectionApi,
getPos,
editorView
}) => {
const alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
const {
isFullWidthModeEnabled,
wasFullWidthModeEnabled
} = useSharedPluginStateWithSelector(pluginInjectionApi, ['table'], 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
};
});
useEffect(() => {
if (editorView && getPos) {
const {
state,
dispatch
} = editorView;
if (wasFullWidthModeEnabled && isFullWidthModeEnabled !== undefined && !isFullWidthModeEnabled && alignment !== ALIGN_CENTER && node.attrs.width > akEditorDefaultLayoutWidth) {
var _pluginInjectionApi$a;
const pos = getPos && getPos();
if (typeof pos !== 'number') {
return;
}
setTableAlignmentWithTableContentWithPosWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(ALIGN_CENTER, alignment, {
pos,
node
}, INPUT_METHOD.AUTO, CHANGE_ALIGNMENT_REASON.EDITOR_APPEARANCE_CHANGED)(state, dispatch);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [editorView, isFullWidthModeEnabled, wasFullWidthModeEnabled, node]);
const style = useMemo(() => {
return getAlignmentStyle(alignment);
}, [alignment]);
return /*#__PURE__*/React.createElement("div", {
"data-testid": "table-alignment-container",
"data-ssr-placeholder": `table-${node.attrs.localId}`,
"data-ssr-placeholder-replace": `table-${node.attrs.localId}`
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: style
}, children);
};
const AlignmentTableContainerWrapper = ({
isTableAlignmentEnabled,
node,
children,
pluginInjectionApi,
getPos,
editorView
}) => {
if (!isTableAlignmentEnabled) {
return /*#__PURE__*/React.createElement("div", {
"data-testid": "table-alignment-container",
"data-ssr-placeholder": `table-${node.attrs.localId}`,
"data-ssr-placeholder-replace": `table-${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);
};
const selector = states => ({
tableState: states.tableState,
editorViewModeState: states.editorViewModeState
});
const getPadding = containerWidth => {
return containerWidth <= akEditorFullPageNarrowBreakout && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
exposure: true
}) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
};
export const ResizableTableContainer = /*#__PURE__*/React.memo(({
children,
className,
node,
containerWidth,
lineLength,
editorView,
getPos,
tableRef,
isResizing,
pluginInjectionApi,
tableWrapperHeight,
isWholeTableInDanger,
isTableScalingEnabled,
allowFixedColumnWidthOption,
isTableAlignmentEnabled,
shouldUseIncreasedScalingPercent,
isCommentEditor,
isChromelessEditor
}) => {
const containerRef = useRef(null);
const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
const [resizing, setIsResizing] = useState(false);
const {
tableState,
editorViewModeState
} = useSharedPluginStateWithSelector(pluginInjectionApi, ['table', 'editorViewMode'], selector);
const isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
const isMaxWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isMaxWidthModeEnabled;
const 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
const tableWidth = isMaxWidthModeEnabled && !node.attrs.width && fg('platform_editor_max_width_default_width') ? TABLE_MAX_WIDTH : getTableContainerWidth(node);
const updateContainerHeight = useCallback(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
const 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' ? `${height + 40.5}px` : 'auto';
} else {
var _containerRef$current2;
const stickyHeaderHeight = ((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
return typeof height === 'number' ? `${height + stickyHeaderHeight + 39.5}px` : 'auto';
}
}, []);
const onResizeStart = useCallback(() => {
setIsResizing(true);
}, []);
const onResizeStop = useCallback(() => {
setIsResizing(false);
}, []);
const updateWidth = useCallback(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 !== `${width}px`) {
containerRef.current.style.width = `${width}px`;
}
}, []);
const displayGuideline = useCallback(guidelines => {
var _pluginInjectionApi$g, _pluginInjectionApi$g2, _pluginInjectionApi$g3;
return (_pluginInjectionApi$g = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$g2 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g2 === void 0 ? void 0 : (_pluginInjectionApi$g3 = _pluginInjectionApi$g2.actions) === null || _pluginInjectionApi$g3 === void 0 ? void 0 : _pluginInjectionApi$g3.displayGuideline(editorView)({
guidelines
})) !== null && _pluginInjectionApi$g !== void 0 ? _pluginInjectionApi$g : false;
}, [pluginInjectionApi, editorView]);
const attachAnalyticsEvent = useCallback(payload => {
var _pluginInjectionApi$a2;
return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.attachAnalyticsEvent(payload);
}, [pluginInjectionApi]);
const displayGapCursor = useCallback(toggle => {
var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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]);
const isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
const {
width,
maxResizerWidth
} = useMemo(() => {
let responsiveContainerWidth = 0;
const resizeHandleSpacing = 12;
const 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
const calculatedWidth = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
// Ensure minimum width for usability while respecting container constraints
const width = Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300));
const 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,
maxResizerWidth
};
}, [containerWidth, isCommentEditor, isFullWidthModeEnabled, isMaxWidthModeEnabled, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]);
useEffect(() => {
if (!isResizing) {
tableWidthRef.current = width;
}
}, [width, isResizing]);
// CSS Solution for table resizer container width
const tableResizerContainerWidth = useMemo(() => {
return getTableResizerContainerForFullPageWidthInCSS(node, isTableScalingEnabled);
}, [node, isTableScalingEnabled]);
// CSS Solution for table resizer max width
const tableResizerMaxWidth = React.useMemo(() => {
const isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
const 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.
const 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,
maxWidth: tableResizerMaxWidth,
containerWidth,
// oxlint-disable-next-line @typescript-eslint/no-non-null-assertion -- To be fixed in EDITOR-1679
lineLength: lineLength,
updateWidth,
editorView,
getPos,
node,
tableRef,
displayGuideline,
attachAnalyticsEvent,
displayGapCursor,
isTableAlignmentEnabled,
isFullWidthModeEnabled,
isTableScalingEnabled,
allowFixedColumnWidthOption,
isWholeTableInDanger,
shouldUseIncreasedScalingPercent,
pluginInjectionApi,
onResizeStart,
onResizeStop,
isCommentEditor
};
const 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 : `${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 const TableContainer = ({
children,
node,
className,
containerWidth: {
width: editorWidth,
lineLength
},
editorView,
getPos,
tableRef,
isNested,
tableWrapperHeight,
isResizing,
pluginInjectionApi,
isWholeTableInDanger,
isTableResizingEnabled,
isTableScalingEnabled,
allowFixedColumnWidthOption,
isTableAlignmentEnabled,
shouldUseIncreasedScalingPercent,
isCommentEditor,
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);
}
const {
isDragAndDropEnabled
} = getPluginState(editorView.state);
const isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
const 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);
};