@atlaskit/editor-plugin-table 12.2.6 → 12.2.7

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -1,151 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-
-import type { TableColumnOrdering } from '@atlaskit/custom-steps';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import type { Selection } from '@atlaskit/editor-prosemirror/state';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-
-import type { RowStickyState } from '../../pm-plugins/sticky-headers/types';
-import { getColumnsWidths } from '../../pm-plugins/utils/column-controls';
-import { containsHeaderColumn } from '../../pm-plugins/utils/nodes';
-import { getRowHeights } from '../../pm-plugins/utils/row-controls';
-import type { CellHoverMeta, DraggableSourceData, PluginInjectionAPI } from '../../types';
-import { TableCssClassName as ClassName } from '../../types';
-
-import { ColumnControls } from './ColumnControls';
-import { ColumnDropTargets } from './ColumnDropTargets';
-
-interface Props {
-	editorView: EditorView;
-	getEditorFeatureFlags: GetEditorFeatureFlags;
-	selection?: Selection;
-	tableRef?: HTMLTableElement;
-	getNode: () => PmNode;
-	tableActive?: boolean;
-	isInDanger?: boolean;
-	hasHeaderRow?: boolean;
-	headerRowHeight?: number;
-	hoveredRows?: number[];
-	hoveredCell?: CellHoverMeta;
-	isResizing?: boolean;
-	ordering?: TableColumnOrdering;
-	stickyHeader?: RowStickyState;
-	isTableHovered?: boolean;
-	tableContainerWidth?: number;
-	isNumberColumnEnabled?: boolean;
-	getScrollOffset?: () => number;
-	tableWrapperHeight?: number;
-	api?: PluginInjectionAPI;
-	isChromelessEditor?: boolean;
-}
-
-const TableFloatingColumnControls = ({
-	editorView,
-	tableRef,
-	getNode,
-	tableActive,
-	hasHeaderRow,
-	hoveredCell,
-	isResizing,
-	stickyHeader,
-	selection,
-	isInDanger,
-	isTableHovered,
-	tableContainerWidth,
-	isNumberColumnEnabled,
-	getScrollOffset,
-	tableWrapperHeight,
-	api,
-	isChromelessEditor,
-}: Props) => {
-	const [isDragging, setIsDragging] = useState(false);
-	const containerRef = useRef<HTMLDivElement>(null);
-
-	const node = getNode();
-	const currentNodeLocalId = node?.attrs.localId;
-	const hasHeaderColumn = containsHeaderColumn(node);
-	const stickyTop =
-		stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-
-	useEffect(() => {
-		return monitorForElements({
-			canMonitor({ source }) {
-				const { type, localId, indexes } = source.data as Partial<DraggableSourceData>;
-				return type === 'table-column' && !!indexes?.length && localId === currentNodeLocalId;
-			},
-			onDragStart() {
-				setIsDragging(true);
-			},
-			onDrop() {
-				setIsDragging(false);
-			},
-		});
-	}, [editorView, currentNodeLocalId]);
-
-	const rowHeights = useMemo(() => {
-		// NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
-		if (tableRef && !!tableWrapperHeight) {
-			return getRowHeights(tableRef);
-		}
-		return [0];
-	}, [tableRef, tableWrapperHeight]);
-
-	if (!tableRef || !tableActive || isResizing) {
-		return null;
-	}
-
-	const colWidths = getColumnsWidths(editorView);
-
-	if (stickyTop) {
-		const columnControlTopOffsetFromParent = '-12px';
-		containerRef?.current?.style.setProperty('top', columnControlTopOffsetFromParent);
-	} else {
-		containerRef?.current?.style.removeProperty('top');
-	}
-
-	return (
-		<div
-			ref={containerRef}
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-			className={
-				ClassName.DRAG_COLUMN_CONTROLS_WRAPPER +
-				(isChromelessEditor ? ' ' + ClassName.TABLE_CHROMELESS : '')
-			}
-			data-testid="table-floating-column-controls-wrapper"
-		>
-			<ColumnControls
-				editorView={editorView}
-				hoveredCell={hoveredCell}
-				tableRef={tableRef}
-				tableActive={tableActive}
-				isTableHovered={isTableHovered}
-				stickyTop={tableActive ? stickyTop : undefined}
-				localId={currentNodeLocalId}
-				isInDanger={isInDanger}
-				rowHeights={rowHeights}
-				colWidths={colWidths}
-				hasHeaderColumn={hasHeaderColumn}
-				tableContainerWidth={tableContainerWidth}
-				isNumberColumnEnabled={isNumberColumnEnabled}
-				isDragging={isDragging}
-				getScrollOffset={getScrollOffset}
-				api={fg('platform_editor_table_use_shared_state_hook_fg') ? api : undefined}
-			/>
-			{isDragging && (
-				<ColumnDropTargets
-					tableRef={tableRef}
-					isHeaderSticky={stickyHeader?.sticky && hasHeaderRow}
-					tableHeight={tableWrapperHeight}
-					localId={currentNodeLocalId}
-					colWidths={colWidths}
-					getScrollOffset={getScrollOffset}
-				/>
-			)}
-		</div>
-	);
-};
-
-export default TableFloatingColumnControls;

package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx

@@ -1,106 +0,0 @@
-import React, { Component } from 'react';
-
-import classnames from 'classnames';
-import type { WrappedComponentProps } from 'react-intl-next';
-import { injectIntl } from 'react-intl-next';
-
-import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
-
-import { clearHoverSelection, hoverTable } from '../../../pm-plugins/commands';
-import { TableCssClassName as ClassName } from '../../../types';
-
-import type { CornerControlProps } from './types';
-
-// Ignored via go/ees005
-// eslint-disable-next-line @repo/internal/react/no-class-components, @typescript-eslint/no-explicit-any
-class CornerControlComponent extends Component<CornerControlProps & WrappedComponentProps, any> {
-	render() {
-		const {
-			isInDanger,
-			tableRef,
-			isHeaderColumnEnabled,
-			isHeaderRowEnabled,
-			intl: { formatMessage },
-		} = this.props;
-		if (!tableRef) {
-			return null;
-		}
-		const isActive = this.isActive();
-
-		return (
-			<div
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-				className={classnames(ClassName.CORNER_CONTROLS, {
-					active: isActive,
-					sticky: this.props.stickyTop !== undefined,
-				})}
-				style={{
-					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-					top: this.props.stickyTop !== undefined ? `0px` : undefined,
-				}}
-				contentEditable={false}
-			>
-				<button
-					aria-label={formatMessage(messages.cornerControl)}
-					type="button"
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-					className={classnames(ClassName.CONTROLS_CORNER_BUTTON, {
-						danger: isActive && isInDanger,
-					})}
-					onClick={this.selectTable}
-					// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-					onMouseOver={this.hoverTable}
-					// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-					onMouseOut={this.clearHoverSelection}
-				/>
-
-				{!isHeaderRowEnabled && (
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-					<div className={ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER}>
-						{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
-						<div className={ClassName.CONTROLS_INSERT_MARKER} />
-					</div>
-				)}
-				{!isHeaderColumnEnabled && (
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-					<div className={ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER}>
-						{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
-						<div className={ClassName.CONTROLS_INSERT_MARKER} />
-					</div>
-				)}
-			</div>
-		);
-	}
-
-	private isActive = () => {
-		const { editorView, hoveredRows, isResizing } = this.props;
-		const { selection } = editorView.state;
-		const table = findTable(selection);
-		if (!table) {
-			return false;
-		}
-		return (
-			isTableSelected(selection) ||
-			(hoveredRows && hoveredRows.length === TableMap.get(table.node).height && !isResizing)
-		);
-	};
-
-	private clearHoverSelection = () => {
-		const { state, dispatch } = this.props.editorView;
-		clearHoverSelection()(state, dispatch);
-	};
-
-	private selectTable = () => {
-		const { state, dispatch } = this.props.editorView;
-		dispatch(selectTable(state.tr).setMeta('addToHistory', false));
-	};
-
-	private hoverTable = () => {
-		const { state, dispatch } = this.props.editorView;
-		hoverTable()(state, dispatch);
-	};
-}
-
-export const CornerControls = injectIntl(CornerControlComponent);

package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx

@@ -1,143 +0,0 @@
-import React, { useMemo } from 'react';
-
-import classnames from 'classnames';
-import type { WrappedComponentProps } from 'react-intl-next';
-import { injectIntl } from 'react-intl-next';
-
-import {
-	sharedPluginStateHookMigratorFactory,
-	useSharedPluginState,
-	useSharedPluginStateWithSelector,
-} from '@atlaskit/editor-common/hooks';
-import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
-
-import { clearHoverSelection } from '../../../pm-plugins/commands';
-import type { TablePlugin } from '../../../tablePluginType';
-import { TableCssClassName as ClassName } from '../../../types';
-
-import type { CornerControlProps } from './types';
-
-const DragCornerControlsComponent = ({
-	editorView,
-	isInDanger,
-	isResizing,
-	intl: { formatMessage },
-}: CornerControlProps & WrappedComponentProps) => {
-	const handleOnClick = () => {
-		const { state, dispatch } = editorView;
-		dispatch(selectTable(state.tr).setMeta('addToHistory', false));
-	};
-
-	const handleMouseOut = () => {
-		const { state, dispatch } = editorView;
-		clearHoverSelection()(state, dispatch);
-	};
-
-	const isActive = useMemo(() => {
-		const { selection } = editorView.state;
-		const table = findTable(selection);
-		if (!table) {
-			return false;
-		}
-		return isTableSelected(selection);
-	}, [editorView.state]);
-
-	if (isResizing) {
-		return null;
-	}
-
-	return (
-		<button
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-			className={classnames(ClassName.DRAG_CORNER_BUTTON, {
-				active: isActive,
-				danger: isActive && isInDanger,
-			})}
-			aria-label={formatMessage(messages.cornerControl)}
-			type="button"
-			onClick={handleOnClick}
-			// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-			onMouseOut={handleMouseOut}
-			contentEditable={false}
-		>
-			{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
-			<div className={ClassName.DRAG_CORNER_BUTTON_INNER} />
-		</button>
-	);
-};
-
-const useSharedState = sharedPluginStateHookMigratorFactory(
-	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
-		const { selection } = useSharedPluginStateWithSelector(api, ['selection'], (states) => ({
-			selection: states.selectionState?.selection,
-		}));
-		return {
-			selection,
-		};
-	},
-	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
-		const { selectionState } = useSharedPluginState(api, ['selection']);
-		return {
-			selection: selectionState?.selection,
-		};
-	},
-);
-
-const DragCornerControlsComponentWithSelection = ({
-	editorView,
-	isInDanger,
-	isResizing,
-	intl: { formatMessage },
-	api,
-}: CornerControlProps & WrappedComponentProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
-	const { selection } = useSharedState(api);
-
-	const handleOnClick = () => {
-		const { state, dispatch } = editorView;
-		dispatch(selectTable(state.tr).setMeta('addToHistory', false));
-	};
-
-	const handleMouseOut = () => {
-		const { state, dispatch } = editorView;
-		clearHoverSelection()(state, dispatch);
-	};
-	const isActive = useMemo(() => {
-		if (!selection) {
-			return;
-		}
-		const table = findTable(selection);
-		if (!table) {
-			return false;
-		}
-		return isTableSelected(selection);
-	}, [selection]);
-
-	if (isResizing) {
-		return null;
-	}
-
-	return (
-		<button
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-			className={classnames(ClassName.DRAG_CORNER_BUTTON, {
-				active: isActive,
-				danger: isActive && isInDanger,
-			})}
-			aria-label={formatMessage(messages.cornerControl)}
-			type="button"
-			onClick={handleOnClick}
-			// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-			onMouseOut={handleMouseOut}
-			contentEditable={false}
-		>
-			{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
-			<div className={ClassName.DRAG_CORNER_BUTTON_INNER} />
-		</button>
-	);
-};
-
-export const DragCornerControlsWithSelection = injectIntl(DragCornerControlsComponentWithSelection);
-
-export const DragCornerControls = injectIntl(DragCornerControlsComponent);

package/src/ui/TableFloatingControls/CornerControls/types.ts

@@ -1,12 +0,0 @@
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-
-export type CornerControlProps = {
-	editorView: EditorView;
-	tableRef?: HTMLTableElement;
-	isInDanger?: boolean;
-	isResizing?: boolean;
-	hoveredRows?: number[];
-	isHeaderColumnEnabled?: boolean;
-	isHeaderRowEnabled?: boolean;
-	stickyTop?: number;
-};

package/src/ui/TableFloatingControls/FloatingControlsWithSelection.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-
-import {
-	sharedPluginStateHookMigratorFactory,
-	useSharedPluginState,
-	useSharedPluginStateWithSelector,
-} from '@atlaskit/editor-common/hooks';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-
-import type { TablePlugin } from '../../tablePluginType';
-
-import { CornerControls } from './CornerControls/ClassicCornerControls';
-import { RowControls } from './RowControls/ClassicControls';
-
-type FloatingControlsWithSelectionProps = {
-	editorView: EditorView;
-	tableRef: HTMLTableElement;
-	isInDanger?: boolean;
-	isResizing?: boolean;
-	isHeaderRowEnabled?: boolean;
-	isHeaderColumnEnabled?: boolean;
-	hoveredRows?: number[];
-	stickyTop?: number;
-	hoverRows: (rows: number[]) => void;
-	selectRow: (row: number, expand: boolean) => void;
-	tableActive: boolean;
-	api?: ExtractInjectionAPI<TablePlugin>;
-};
-
-const useSharedState = sharedPluginStateHookMigratorFactory(
-	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
-		const { selection } = useSharedPluginStateWithSelector(api, ['selection'], (states) => ({
-			selection: states.selectionState?.selection,
-		}));
-		return {
-			selection,
-		};
-	},
-	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
-		const { selectionState } = useSharedPluginState(api, ['selection']);
-		return {
-			selection: selectionState?.selection,
-		};
-	},
-);
-
-export const FloatingControlsWithSelection = ({
-	editorView,
-	tableRef,
-	isInDanger,
-	isResizing,
-	isHeaderRowEnabled,
-	isHeaderColumnEnabled,
-	hoveredRows,
-	stickyTop,
-	hoverRows,
-	selectRow,
-	tableActive,
-	api,
-}: FloatingControlsWithSelectionProps) => {
-	const { selection } = useSharedState(api);
-	return (
-		<>
-			<CornerControls
-				editorView={editorView}
-				tableRef={tableRef}
-				isInDanger={isInDanger}
-				isResizing={isResizing}
-				isHeaderRowEnabled={isHeaderRowEnabled}
-				isHeaderColumnEnabled={isHeaderColumnEnabled}
-				hoveredRows={hoveredRows}
-				stickyTop={tableActive ? stickyTop : undefined}
-			/>
-			<RowControls
-				selection={selection}
-				editorView={editorView}
-				tableRef={tableRef}
-				hoverRows={hoverRows}
-				hoveredRows={hoveredRows}
-				isInDanger={isInDanger}
-				isResizing={isResizing}
-				selectRow={selectRow}
-				stickyTop={tableActive ? stickyTop : undefined}
-			/>
-		</>
-	);
-};

package/src/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -1,175 +0,0 @@
-import React, { Component } from 'react';
-
-import classnames from 'classnames';
-
-import { isSSR } from '@atlaskit/editor-common/core-utils';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { isRowSelected } from '@atlaskit/editor-tables/utils';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-
-import { clearHoverSelection } from '../../../pm-plugins/commands';
-import { getRowHeights } from '../../../pm-plugins/utils/row-controls';
-import { TableCssClassName as ClassName } from '../../../types';
-import { tableBorderColor } from '../../consts';
-
-interface Props {
-	editorView: EditorView;
-	tableRef: HTMLTableElement;
-	tableActive?: boolean;
-	hoverRows: (rows: number[], danger?: boolean) => void;
-	hoveredRows?: number[];
-	selectRow: (row: number, expand: boolean) => void;
-	updateCellHoverLocation: (rowIndex: number) => void;
-	hasHeaderRow?: boolean;
-	isInDanger?: boolean;
-	isResizing?: boolean;
-	stickyTop?: number;
-	isDragAndDropEnabled?: boolean;
-}
-
-// Ignored via go/ees005
-// eslint-disable-next-line @repo/internal/react/no-class-components, @typescript-eslint/no-explicit-any
-export default class NumberColumn extends Component<Props, any> {
-	render() {
-		const { tableRef, hasHeaderRow, isDragAndDropEnabled, tableActive, updateCellHoverLocation } =
-			this.props;
-		const rowHeights = getRowHeights(tableRef);
-
-		if (isSSR() && expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-			return (
-				<div
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-					className={ClassName.NUMBERED_COLUMN}
-					style={{
-						// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-						marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
-						borderLeft:
-							// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-							isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : undefined,
-						// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-						visibility: 'hidden', // Ensure the column is not visible during SSR
-					}}
-					contentEditable={false}
-			 	/>
-			)
-		}
-
-		return (
-			<div
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-				className={ClassName.NUMBERED_COLUMN}
-				style={{
-					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-					marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
-					borderLeft:
-						// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-						isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : undefined,
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-					...(expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)
-						? { visibility: 'visible' }
-						: {}),
-				}}
-				contentEditable={false}
-			>
-				{rowHeights.map((rowHeight, index) =>
-					isDragAndDropEnabled ? (
-						// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-						<div
-							// Ignored via go/ees005
-							// eslint-disable-next-line react/no-array-index-key
-							key={`wrapper-${index}`}
-							// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-							className={this.getClassNames(index, true)}
-							data-index={index}
-							// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-							style={this.getCellStyles(index, rowHeight)}
-							// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-							onMouseOver={() => updateCellHoverLocation(index)}
-						>
-							{hasHeaderRow ? (index > 0 ? index : null) : index + 1}
-						</div>
-					) : (
-						// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
-						<div
-							// Ignored via go/ees005
-							// eslint-disable-next-line react/no-array-index-key
-							key={`wrapper-${index}`}
-							// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-							className={this.getClassNames(index)}
-							data-index={index}
-							// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-							style={this.getCellStyles(index, rowHeight)}
-							onClick={(event) => this.selectRow(index, event)}
-							// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-							onMouseOver={() => this.hoverRows(index)}
-							// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-							onMouseOut={this.clearHoverSelection}
-						>
-							{hasHeaderRow ? (index > 0 ? index : null) : index + 1}
-						</div>
-					),
-				)}
-			</div>
-		);
-	}
-
-	private hoverRows = (index: number) => {
-		return this.props.tableActive ? this.props.hoverRows([index]) : null;
-	};
-	private selectRow = (index: number, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-		const { tableActive, editorView, selectRow } = this.props;
-		// If selection is outside the table then first reset the selection inside table
-		if (!tableActive && event.target && event.target instanceof Node) {
-			const { doc, selection, tr } = editorView.state;
-			const pos = editorView.posAtDOM(event.target, 1);
-			const $pos = doc.resolve(pos);
-			const newPos =
-				selection.head > pos
-					? // Selection is after table
-						// nodeSize - 3 will move the position inside last table cell
-						Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1)
-					: // Selection is before table
-						Selection.near($pos);
-			editorView.dispatch(tr.setSelection(newPos));
-		}
-		selectRow(index, event.shiftKey);
-	};
-
-	private clearHoverSelection = () => {
-		const { tableActive, editorView } = this.props;
-		if (tableActive) {
-			const { state, dispatch } = editorView;
-			clearHoverSelection()(state, dispatch);
-		}
-	};
-
-	private getCellStyles = (index: number, rowHeight: number) => {
-		const { stickyTop, hasHeaderRow } = this.props;
-		if (stickyTop && hasHeaderRow && index === 0) {
-			const topOffset = 0;
-
-			return {
-				height: rowHeight,
-				top: `${topOffset}px`,
-			};
-		}
-		return {
-			height: rowHeight,
-		};
-	};
-
-	private getClassNames = (index: number, isButtonDisabled = false) => {
-		const { hoveredRows, editorView, isInDanger, isResizing, tableActive } = this.props;
-
-		const isActive =
-			isRowSelected(index)(editorView.state.selection) ||
-			((hoveredRows || []).indexOf(index) !== -1 && !isResizing);
-
-		return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
-			[ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
-			[ClassName.HOVERED_CELL_IN_DANGER]: tableActive && isActive && isInDanger,
-			[ClassName.HOVERED_CELL_ACTIVE]: tableActive && isActive,
-		});
-	};
-}