@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
527 lines (526 loc) • 18.2 kB
TypeScript
import type { IntlShape } from 'react-intl';
import type { TableLayout } from '@atlaskit/adf-schema';
import type { TableColumnOrdering } from '@atlaskit/custom-steps';
import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
import type { Transaction } from '@atlaskit/editor-prosemirror/state';
import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
import type { Rect } from '@atlaskit/editor-tables/table-map';
import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
import type { RowStickyState } from '../pm-plugins/sticky-headers/types';
import type { TablePlugin } from '../tablePluginType';
export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
export type RowInsertPosition = 'TOP' | 'BOTTOM';
/**
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6877 Internal documentation for deprecation (no external access)}
**/
export type PermittedLayoutsDescriptor = TableLayout[] | 'all';
export type Cell = {
node: PmNode;
pos: number;
start: number;
};
export type CellTransform = (cell: Cell) => (tr: Transaction) => Transaction;
export interface InsertRowOptions {
index: number;
moveCursorToInsertedRow: boolean;
}
export type PluginInjectionAPI = ExtractInjectionAPI<TablePlugin>;
export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
accessibilityUtils?: {
actions: {
ariaNotify: (message: string) => void | undefined;
};
};
};
export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'isMaxWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'wasMaxWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'isDragAndDropEnabled' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard'> & {
dragMenuDirection?: TableDirection;
dragMenuIndex?: number;
editorContentAreaHeight?: number;
isDragMenuOpen?: boolean;
isResizing: boolean;
isSizeSelectorOpen?: boolean;
isTableResizing?: boolean;
isWholeTableInDanger?: boolean;
resizingTableLocalId?: string;
resizingTableRef?: HTMLTableElement;
sizeSelectorTargetRef?: HTMLElement;
stickyHeader?: RowStickyState;
};
export type TableSharedState = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isMaxWidthModeEnabled' | 'wasMaxWidthModeEnabled'> & Pick<TableSharedStateInternal, 'editorContentAreaHeight'>;
export type AlignmentOptions = 'center' | 'align-start';
export type InsertRowMethods = INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU;
export interface PluginConfig {
advanced?: boolean;
allowAddColumnWithCustomStep?: boolean;
allowBackgroundColor?: boolean;
allowCollapse?: boolean;
allowColumnResizing?: boolean;
allowColumnSorting?: boolean;
allowControls?: boolean;
allowDistributeColumns?: boolean;
allowFixedColumnWidthOption?: boolean;
allowHeaderColumn?: boolean;
allowHeaderRow?: boolean;
allowMergeCells?: boolean;
allowNestedTables?: boolean;
allowNumberColumn?: boolean;
allowTableAlignment?: boolean;
allowTableResizing?: boolean;
isHeaderRowRequired?: boolean;
/**
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6877 Internal documentation for deprecation (no external access)}
**/
permittedLayouts?: PermittedLayoutsDescriptor;
stickyHeaders?: boolean;
}
export type { ColumnResizingPluginState } from '@atlaskit/editor-common/types';
export type CellColumnPositioning = Pick<Rect, 'right' | 'left'>;
export interface CellHoverMeta {
colIndex?: number;
rowIndex?: number;
}
export interface WidthToWidest {
[tableLocalId: string]: boolean;
}
export interface TablePluginState {
canCollapseTable?: boolean;
editorHasFocus?: boolean;
editorViewportHeight?: number;
getIntl: () => IntlShape;
hoveredCell: CellHoverMeta;
hoveredColumns: number[];
hoveredRows: number[];
insertColumnButtonIndex?: number;
insertRowButtonIndex?: number;
isCellMenuOpenByKeyboard?: boolean;
isChromelessEditor?: boolean;
isCommentEditor?: boolean;
isContextualMenuOpen?: boolean;
isDragAndDropEnabled?: boolean;
isFullWidthModeEnabled?: boolean;
isHeaderColumnEnabled: boolean;
isHeaderRowEnabled: boolean;
isInDanger?: boolean;
isKeyboardResize?: boolean;
isMaxWidthModeEnabled?: boolean;
isNumberColumnEnabled?: boolean;
isResizeHandleWidgetAdded?: boolean;
isTableCollapsed?: boolean;
isTableHovered?: boolean;
isTableScalingEnabled?: boolean;
isWholeTableInDanger?: boolean;
ordering?: TableColumnOrdering;
pluginConfig: PluginConfig;
resizeHandleColumnIndex?: number;
resizeHandleIncludeTooltip?: boolean;
resizeHandleRowIndex?: number;
tableNode?: PmNode;
tablePos?: number;
tableRef?: HTMLTableElement;
tableWrapperTarget?: HTMLElement;
targetCellPosition?: number;
wasFullWidthModeEnabled?: boolean;
wasMaxWidthModeEnabled?: boolean;
widthToWidest?: WidthToWidest;
}
export type TablePluginAction = {
data: {
editorHasFocus: boolean;
};
type: 'SET_EDITOR_FOCUS';
} | {
type: 'TOGGLE_HEADER_ROW';
} | {
type: 'TOGGLE_HEADER_COLUMN';
} | {
data: {
ordering: TableColumnOrdering;
};
type: 'SORT_TABLE';
} | {
data: {
isHeaderColumnEnabled: boolean;
isHeaderRowEnabled: boolean;
tableNode?: PmNode;
tableRef?: HTMLTableElement;
tableWrapperTarget?: HTMLElement;
};
type: 'SET_TABLE_REF';
} | {
data: {
decorationSet: DecorationSet;
hoveredRows: number[];
isInDanger?: boolean;
};
type: 'HOVER_ROWS';
} | {
data: {
decorationSet: DecorationSet;
};
type: 'HOVER_MERGED_CELLS';
} | {
data: {
decorationSet: DecorationSet;
hoveredColumns: number[];
isInDanger?: boolean;
};
type: 'HOVER_COLUMNS';
} | {
data: {
decorationSet: DecorationSet;
hoveredColumns: number[];
hoveredRows: number[];
isInDanger?: boolean;
};
type: 'HOVER_TABLE';
} | {
data: {
decorationSet: DecorationSet;
isKeyboardResize?: boolean;
resizeHandleColumnIndex: number;
resizeHandleIncludeTooltip: boolean;
resizeHandleRowIndex: number;
};
type: 'START_KEYBOARD_COLUMN_RESIZE';
} | {
data: {
decorationSet: DecorationSet;
isKeyboardResize?: boolean;
resizeHandleColumnIndex: number;
resizeHandleIncludeTooltip: boolean;
resizeHandleRowIndex: number;
};
type: 'ADD_RESIZE_HANDLE_DECORATIONS';
} | {
data: {
decorationSet: DecorationSet;
resizeHandleColumnIndex: number | undefined;
resizeHandleIncludeTooltip: boolean | undefined;
resizeHandleRowIndex: number | undefined;
};
type: 'UPDATE_RESIZE_HANDLE_DECORATIONS';
} | {
data: {
widthToWidest: WidthToWidest | undefined;
};
type: 'UPDATE_TABLE_WIDTH_TO_WIDEST';
} | {
data: {
decorationSet: DecorationSet;
};
type: 'REMOVE_RESIZE_HANDLE_DECORATIONS';
} | {
data: {
decorationSet: DecorationSet;
};
type: 'STOP_KEYBOARD_COLUMN_RESIZE';
} | {
data: {
decorationSet: DecorationSet;
};
type: 'CLEAR_HOVER_SELECTION';
} | {
data: {
decorationSet: DecorationSet;
};
type: 'SHOW_RESIZE_HANDLE_LINE';
} | {
data: {
decorationSet: DecorationSet;
};
type: 'HIDE_RESIZE_HANDLE_LINE';
} | {
data: {
hoveredCell: CellHoverMeta;
};
type: 'HOVER_CELL';
} | {
data: {
isTableHovered: boolean;
};
type: 'TABLE_HOVERED';
} | {
data: {
targetCellPosition?: number;
};
type: 'SET_TARGET_CELL_POSITION';
} | {
data: {
decorationSet: DecorationSet;
targetCellPosition: number;
};
type: 'SELECT_COLUMN';
} | {
data: {
insertRowButtonIndex: number;
};
type: 'SHOW_INSERT_ROW_BUTTON';
} | {
data: {
insertColumnButtonIndex: number;
};
type: 'SHOW_INSERT_COLUMN_BUTTON';
} | {
type: 'HIDE_INSERT_COLUMN_OR_ROW_BUTTON';
} | {
type: 'TOGGLE_CONTEXTUAL_MENU';
} | {
data: {
isCellMenuOpenByKeyboard: boolean;
};
type: 'SET_CELL_MENU_OPEN';
} | {
data: {
editorViewportHeight: number;
};
type: 'UPDATE_EDITOR_VIEWPORT_HEIGHT';
};
export type ColumnResizingPluginAction = {
data: {
resizeHandlePos: number | null;
};
type: 'SET_RESIZE_HANDLE_POSITION';
} | {
type: 'STOP_RESIZING';
} | {
data: {
dragging: {
startWidth: number;
startX: number;
} | null;
};
type: 'SET_DRAGGING';
} | {
data: {
lastClick: {
time: number;
x: number;
y: number;
} | null;
};
type: 'SET_LAST_CLICK';
};
export declare enum TableDecorations {
/** Classic controls */
ALL_CONTROLS_HOVER = "CONTROLS_HOVER",
ROW_CONTROLS_HOVER = "ROW_CONTROLS_HOVER",
COLUMN_CONTROLS_HOVER = "COLUMN_CONTROLS_HOVER",
TABLE_CONTROLS_HOVER = "TABLE_CONTROLS_HOVER",
CELL_CONTROLS_HOVER = "CELL_CONTROLS_HOVER",
COLUMN_CONTROLS_DECORATIONS = "COLUMN_CONTROLS_DECORATIONS",
COLUMN_DROP_TARGET_DECORATIONS = "COLUMN_DROP_TARGET_DECORATIONS",
COLUMN_SELECTED = "COLUMN_SELECTED",
COLUMN_RESIZING_HANDLE = "COLUMN_RESIZING_HANDLE",
COLUMN_RESIZING_HANDLE_WIDGET = "COLUMN_RESIZING_HANDLE_WIDGET",
COLUMN_RESIZING_HANDLE_LINE = "COLUMN_RESIZING_HANDLE_LINE",
COLUMN_INSERT_LINE = "COLUMN_INSERT_LINE",
ROW_INSERT_LINE = "ROW_INSERT_LINE",
LAST_CELL_ELEMENT = "LAST_CELL_ELEMENT"
}
export declare const TableCssClassName: {
/** Classic controls */
COLUMN_CONTROLS: string;
COLUMN_CONTROLS_DECORATIONS: string;
COLUMN_SELECTED: string;
ROW_CONTROLS_WRAPPER: string;
ROW_CONTROLS: string;
ROW_CONTROLS_INNER: string;
ROW_CONTROLS_BUTTON_WRAP: string;
ROW_CONTROLS_BUTTON: string;
CONTROLS_BUTTON: string;
CONTROLS_BUTTON_ICON: string;
CONTROLS_INSERT_BUTTON: string;
CONTROLS_INSERT_BUTTON_INNER: string;
CONTROLS_INSERT_BUTTON_WRAP: string;
CONTROLS_INSERT_LINE: string;
CONTROLS_BUTTON_OVERLAY: string;
DRAG_CONTROLS_INSERT_BUTTON: string;
DRAG_CONTROLS_INSERT_BUTTON_INNER: string;
DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: string;
DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: string;
DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS: string;
DRAG_CONTROLS_INSERT_BUTTON_WRAP: string;
CONTROLS_INSERT_MARKER: string;
CONTROLS_INSERT_COLUMN: string;
CONTROLS_INSERT_ROW: string;
CONTROLS_DELETE_BUTTON_WRAP: string;
CONTROLS_DELETE_BUTTON: string;
CONTROLS_FLOATING_BUTTON_COLUMN: string;
CONTROLS_FLOATING_BUTTON_ROW: string;
CORNER_CONTROLS: string;
CORNER_CONTROLS_INSERT_ROW_MARKER: string;
CORNER_CONTROLS_INSERT_COLUMN_MARKER: string;
CONTROLS_CORNER_BUTTON: string;
/** drag and drop controls */
DRAG_ROW_CONTROLS_WRAPPER: string;
DRAG_ROW_CONTROLS: string;
DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: string;
DRAG_ROW_FLOATING_INSERT_DOT: string;
DRAG_ROW_FLOATING_DRAG_HANDLE: string;
DRAG_COLUMN_CONTROLS: string;
DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: string;
DRAG_COLUMN_FLOATING_INSERT_DOT: string;
DRAG_COLUMN_CONTROLS_WRAPPER: string;
DRAG_COLUMN_DROP_TARGET_CONTROLS: string;
DRAG_COLUMN_CONTROLS_INNER: string;
DRAG_HANDLE_BUTTON_CONTAINER: string;
DRAG_HANDLE_BUTTON_CLICKABLE_ZONE: string;
DRAG_CORNER_BUTTON: string;
DRAG_CORNER_BUTTON_INNER: string;
/** nested tables classes */
NESTED_TABLE_WITH_CONTROLS: string;
/** disabled classes */
DRAG_HANDLE_DISABLED: string;
/** minimised handle class */
DRAG_HANDLE_MINIMISED: string;
DRAG_SUBMENU: string;
DRAG_SUBMENU_ICON: string;
/** Other classes */
NUMBERED_COLUMN: string;
NUMBERED_COLUMN_BUTTON: string;
NUMBERED_COLUMN_BUTTON_DISABLED: string;
HOVERED_COLUMN: string;
HOVERED_ROW: string;
HOVERED_TABLE: string;
HOVERED_NO_HIGHLIGHT: string;
HOVERED_CELL: string;
HOVERED_CELL_IN_DANGER: string;
HOVERED_CELL_ACTIVE: string;
HOVERED_CELL_WARNING: string;
HOVERED_DELETE_BUTTON: string;
WITH_CONTROLS: string;
RESIZING_PLUGIN: string;
RESIZE_CURSOR: string;
IS_RESIZING: string;
RESIZE_HANDLE_DECORATION: string;
CONTEXTUAL_SUBMENU: string;
CONTEXTUAL_MENU_BUTTON_WRAP: string;
CONTEXTUAL_MENU_BUTTON: string;
CONTEXTUAL_MENU_BUTTON_FIXED: string;
CONTEXTUAL_MENU_ICON: string;
CONTEXTUAL_MENU_ICON_SMALL: string;
SELECTED_CELL: string;
NODEVIEW_WRAPPER: string;
TABLE_SELECTED: string;
TABLE_CELL: "pm-table-cell-content-wrap";
TABLE_HEADER_CELL: "pm-table-header-content-wrap";
TABLE_STICKY: string;
TABLE_CHROMELESS: string;
TOP_LEFT_CELL: string;
LAST_ITEM_IN_CELL: string;
WITH_COLUMN_INSERT_LINE: string;
WITH_COLUMN_INSERT_LINE_INACTIVE: string;
WITH_FIRST_COLUMN_INSERT_LINE: string;
WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE: string;
WITH_LAST_COLUMN_INSERT_LINE: string;
WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: string;
WITH_RESIZE_LINE: string;
WITH_RESIZE_LINE_LAST_COLUMN: string;
WITH_DRAG_RESIZE_LINE: string;
WITH_DRAG_RESIZE_LINE_LAST_COLUMN: string;
WITH_ROW_INSERT_LINE: string;
WITH_ROW_INSERT_LINE_INACTIVE: string;
WITH_LAST_ROW_INSERT_LINE: string;
WITH_LAST_ROW_INSERT_LINE_INACTIVE: string;
NATIVE_STICKY: string;
NATIVE_STICKY_ACTIVE: string;
NO_OVERFLOW: string;
TABLE_CELL_NODEVIEW_CONTENT_DOM: "pm-table-cell-nodeview-content-dom";
TABLE_CELL_WRAPPER: "pm-table-cell-content-wrap";
TABLE_COLUMN_CONTROLS_DECORATIONS: "pm-table-column-controls-decoration";
TABLE_CONTAINER: "pm-table-container";
TABLE_HEADER_CELL_WRAPPER: "pm-table-header-content-wrap";
TABLE_LEFT_BORDER: "pm-table-left-border";
TABLE_LEFT_SHADOW: "pm-table-with-left-shadow";
TABLE_NODE_WRAPPER: "pm-table-wrapper";
TABLE_NODE_WRAPPER_NO_OVERFLOW: "pm-table-wrapper-no-overflow";
TABLE_RESIZER_CONTAINER: "pm-table-resizer-container";
TABLE_RIGHT_BORDER: "pm-table-right-border";
TABLE_RIGHT_SHADOW: "pm-table-with-right-shadow";
TABLE_ROW_CONTROLS_WRAPPER: "pm-table-row-controls-wrapper";
TABLE_SCROLL_INLINE_SHADOW: "pm-table-scroll-inline-shadow";
TABLE_SHADOW_SENTINEL_LEFT: "pm-table-shadow-sentinel-left";
TABLE_SHADOW_SENTINEL_RIGHT: "pm-table-shadow-sentinel-right";
TABLE_STICKY_SCROLLBAR_CONTAINER: "pm-table-sticky-scrollbar-container";
TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM: "pm-table-sticky-scrollbar-sentinel-bottom";
TABLE_STICKY_SCROLLBAR_SENTINEL_TOP: "pm-table-sticky-scrollbar-sentinel-top";
TABLE_STICKY_SENTINEL_BOTTOM: "pm-table-sticky-sentinel-bottom";
TABLE_STICKY_SENTINEL_TOP: "pm-table-sticky-sentinel-top";
TABLE_STICKY_SHADOW: "pm-table-sticky-shadow";
TABLE_STICKY_WRAPPER: "pm-table-sticky-wrapper";
TABLE_VIEW_CONTENT_WRAP: "tableView-content-wrap";
};
export interface ToolbarMenuConfig {
allowCollapse?: boolean;
allowHeaderColumn?: boolean;
allowHeaderRow?: boolean;
allowNumberColumn?: boolean;
}
export interface ToolbarMenuState {
canCollapseTable?: boolean;
isDragAndDropEnabled?: boolean;
isHeaderColumnEnabled?: boolean;
isHeaderRowEnabled?: boolean;
isNumberColumnEnabled?: boolean;
isTableCollapsed?: boolean;
}
export interface ToolbarMenuContext {
formatMessage: IntlShape['formatMessage'];
}
export declare enum ShadowEvent {
SHOW_BEFORE_SHADOW = "showBeforeShadow",
SHOW_AFTER_SHADOW = "showAfterShadow"
}
export type ReportInvalidNodeAttrs = (invalidNodeAttrs: InvalidNodeAttr) => void;
export type InvalidNodeAttr = {
attribute: string;
nodeType: string;
reason: string;
spanValue: number;
tableLocalId: string;
};
export type TableDirection = 'row' | 'column';
/**
* Drag and Drop interfaces
*/
export type DraggableType = 'table-row' | 'table-column';
export type DraggableBehaviour = 'move' | 'clone';
export interface DraggableSourceData extends Record<string, unknown> {
indexes: number[];
localId: string;
type: DraggableType;
}
export interface DraggableTargetData extends Record<string | symbol, unknown> {
localId: string;
targetIndex: number;
type: DraggableType;
}
export interface DraggableData {
behaviour: DraggableBehaviour;
/**
* This represents a hollistic movement direction; a value of 1 means the source->target index would shift in a positive direction.
* A value of 0 indicates that the target index is inside the the source indexes.
*/
direction: 1 | -1 | 0;
sourceIndexes: number[];
sourceLocalId: string;
sourceType: DraggableType;
targetAdjustedIndex: number;
targetClosestEdge: Edge;
/**
* The target direction identifies where relative to the target index is the item being dropped. A value of 'start' would
* mean that the item is being inserted before the index, and 'end would be after.
*/
targetDirection: 'start' | 'end';
targetIndex: number;
targetLocalId: string;
targetType: DraggableType;
}
export type HandleTypes = 'hover' | 'selected';
export interface MessageDescriptor {
defaultMessage: string;
description: string;
id: string;
}