@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
127 lines (123 loc) • 6.97 kB
JavaScript
import React from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { findTable } from '@atlaskit/editor-tables';
import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import TableComponentLegacy from './TableComponentLegacy';
import TableComponentNext from './TableComponentNext';
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const TableComponent = componentWithCondition(() => expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant1') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3'), TableComponentNext, TableComponentLegacy);
/**
* Use useSharedPluginState to control re-renders from plugin dependencies
*/
export const TableComponentWithSharedState = ({
view,
options,
getNode,
dispatchAnalyticsEvent,
api,
getEditorFeatureFlags,
eventDispatcher,
allowColumnResizing,
allowControls,
getPos,
forwardRef,
allowTableAlignment,
allowTableResizing
}) => {
const {
isTableResizing,
isHeaderColumnEnabled,
isHeaderRowEnabled,
ordering,
isResizing,
isInDanger,
hoveredCell,
hoveredRows,
isTableHovered,
isWholeTableInDanger,
interaction,
isFullscreen,
lineLength,
mode,
selection,
width
} = useSharedPluginStateWithSelector(api, ['table', 'width', 'media', 'selection', 'editorViewMode', 'interaction'], states => {
var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$mediaState, _states$selectionStat, _states$editorViewMod, _states$widthState, _states$widthState2, _states$interactionSt;
return {
// tableState
isTableResizing: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.isTableResizing,
isHeaderColumnEnabled: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.isHeaderColumnEnabled,
isHeaderRowEnabled: (_states$tableState3 = states.tableState) === null || _states$tableState3 === void 0 ? void 0 : _states$tableState3.isHeaderRowEnabled,
ordering: (_states$tableState4 = states.tableState) === null || _states$tableState4 === void 0 ? void 0 : _states$tableState4.ordering,
isResizing: (_states$tableState5 = states.tableState) === null || _states$tableState5 === void 0 ? void 0 : _states$tableState5.isResizing,
isInDanger: (_states$tableState6 = states.tableState) === null || _states$tableState6 === void 0 ? void 0 : _states$tableState6.isInDanger,
hoveredCell: (_states$tableState7 = states.tableState) === null || _states$tableState7 === void 0 ? void 0 : _states$tableState7.hoveredCell,
hoveredRows: (_states$tableState8 = states.tableState) === null || _states$tableState8 === void 0 ? void 0 : _states$tableState8.hoveredRows,
isTableHovered: (_states$tableState9 = states.tableState) === null || _states$tableState9 === void 0 ? void 0 : _states$tableState9.isTableHovered,
isWholeTableInDanger: (_states$tableState0 = states.tableState) === null || _states$tableState0 === void 0 ? void 0 : _states$tableState0.isWholeTableInDanger,
// Required so that table control re-renders
targetCellPosition: (_states$tableState1 = states.tableState) === null || _states$tableState1 === void 0 ? void 0 : _states$tableState1.targetCellPosition,
// mediaState
isFullscreen: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.isFullscreen,
// selectionState
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
// editorViewModeState
mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode,
// widthState
width: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.width,
lineLength: (_states$widthState2 = states.widthState) === null || _states$widthState2 === void 0 ? void 0 : _states$widthState2.lineLength,
// interactionState
interaction: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState
};
});
const isLivePageViewMode = mode === 'view';
/**
* ED-19810
* There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
* directly to confluence since this bug is now in production.
*/
let currentTablePos;
try {
currentTablePos = getPos ? getPos() : undefined;
} catch (e) {
currentTablePos = undefined;
}
const selectedTable = findTable(view.state.selection);
const tablePos = selectedTable && selectedTable.start - 1;
const tableActive = typeof currentTablePos === 'number' && typeof tablePos === 'number' && currentTablePos === tablePos && !isTableResizing;
return /*#__PURE__*/React.createElement(TableComponent, {
view: view,
allowColumnResizing: allowColumnResizing,
eventDispatcher: eventDispatcher,
getPos: getPos,
isMediaFullscreen: isFullscreen,
options: options,
allowControls: allowControls,
isHeaderRowEnabled: isHeaderRowEnabled !== null && isHeaderRowEnabled !== void 0 ? isHeaderRowEnabled : false,
isHeaderColumnEnabled: isHeaderColumnEnabled !== null && isHeaderColumnEnabled !== void 0 ? isHeaderColumnEnabled : false,
isDragAndDropEnabled: (options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled) && !isLivePageViewMode,
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
allowTableAlignment: allowTableAlignment,
allowTableResizing: allowTableResizing,
tableActive: tableActive && !isLivePageViewMode && interaction !== 'hasNotHadInteraction',
ordering: ordering,
isResizing: isResizing,
getNode: getNode,
containerWidth: {
width: width !== null && width !== void 0 ? width : 0,
lineLength
},
contentDOM: forwardRef,
getEditorFeatureFlags: getEditorFeatureFlags,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
pluginInjectionApi: api,
isInDanger: !!isInDanger,
hoveredRows: hoveredRows,
hoveredCell: hoveredCell,
isTableHovered: isTableHovered,
isWholeTableInDanger: isWholeTableInDanger,
selection: selection
});
};