@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
178 lines (172 loc) • 10.5 kB
JavaScript
/* eslint-disable @atlaskit/editor/no-re-export */
// Entry file in package.json
import { tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
export const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
/**
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6877 Internal documentation for deprecation (no external access)}
**/
// override getPluginState but do not expose publicly as this type is experimental and will change
// in the future
/*
* This type represents the start and end from a cell in a column,
* for example, on this table the cell C1 will have
* `left: 1` and `right: 3`.
*
* ```
* left right
* 1 3
* | |
* | |
* | |
* _______∨_____________∨_______
* | | | |
* | B1 | C1 | A1 |
* |______|______ ______|______|
* | | | |
* | B2 | D1 | A2 |
* |______ ______|______|______|
* | | | |
* | B3 | C2 | D2 |
* |______|______|_____________|
* ```
*
*/
export let TableDecorations = /*#__PURE__*/function (TableDecorations) {
/** Classic controls */
TableDecorations["ALL_CONTROLS_HOVER"] = "CONTROLS_HOVER";
TableDecorations["ROW_CONTROLS_HOVER"] = "ROW_CONTROLS_HOVER";
TableDecorations["COLUMN_CONTROLS_HOVER"] = "COLUMN_CONTROLS_HOVER";
TableDecorations["TABLE_CONTROLS_HOVER"] = "TABLE_CONTROLS_HOVER";
TableDecorations["CELL_CONTROLS_HOVER"] = "CELL_CONTROLS_HOVER";
TableDecorations["COLUMN_CONTROLS_DECORATIONS"] = "COLUMN_CONTROLS_DECORATIONS";
TableDecorations["COLUMN_DROP_TARGET_DECORATIONS"] = "COLUMN_DROP_TARGET_DECORATIONS";
TableDecorations["COLUMN_SELECTED"] = "COLUMN_SELECTED";
TableDecorations["COLUMN_RESIZING_HANDLE"] = "COLUMN_RESIZING_HANDLE";
TableDecorations["COLUMN_RESIZING_HANDLE_WIDGET"] = "COLUMN_RESIZING_HANDLE_WIDGET";
TableDecorations["COLUMN_RESIZING_HANDLE_LINE"] = "COLUMN_RESIZING_HANDLE_LINE";
TableDecorations["COLUMN_INSERT_LINE"] = "COLUMN_INSERT_LINE";
TableDecorations["ROW_INSERT_LINE"] = "ROW_INSERT_LINE";
TableDecorations["LAST_CELL_ELEMENT"] = "LAST_CELL_ELEMENT";
return TableDecorations;
}({});
export const TableCssClassName = {
...TableSharedCssClassName,
/** Classic controls */
COLUMN_CONTROLS: `${tablePrefixSelector}-column-controls`,
COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-row-controls-wrapper`,
ROW_CONTROLS: `${tablePrefixSelector}-row-controls`,
ROW_CONTROLS_INNER: `${tablePrefixSelector}-row-controls__inner`,
ROW_CONTROLS_BUTTON_WRAP: `${tablePrefixSelector}-row-controls__button-wrap`,
ROW_CONTROLS_BUTTON: `${tablePrefixSelector}-row-controls__button`,
CONTROLS_BUTTON: `${tablePrefixSelector}-controls__button`,
CONTROLS_BUTTON_ICON: `${tablePrefixSelector}-controls__button-icon`,
CONTROLS_INSERT_BUTTON: `${tablePrefixSelector}-controls__insert-button`,
CONTROLS_INSERT_BUTTON_INNER: `${tablePrefixSelector}-controls__insert-button-inner`,
CONTROLS_INSERT_BUTTON_WRAP: `${tablePrefixSelector}-controls__insert-button-wrap`,
CONTROLS_INSERT_LINE: `${tablePrefixSelector}-controls__insert-line`,
CONTROLS_BUTTON_OVERLAY: `${tablePrefixSelector}-controls__button-overlay`,
DRAG_CONTROLS_INSERT_BUTTON: `${tablePrefixSelector}-controls__drag-insert-button`,
DRAG_CONTROLS_INSERT_BUTTON_INNER: `${tablePrefixSelector}-controls__drag-insert-button-inner`,
DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: `${tablePrefixSelector}-controls__drag-insert-button-inner-column`,
DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: `${tablePrefixSelector}-controls__drag-insert-button-inner-row`,
DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS: `${tablePrefixSelector}-controls__drag-insert-button-inner-row-chromeless`,
DRAG_CONTROLS_INSERT_BUTTON_WRAP: `${tablePrefixSelector}-controls__drag-insert-button-wrap`,
CONTROLS_INSERT_MARKER: `${tablePrefixSelector}-controls__insert-marker`,
CONTROLS_INSERT_COLUMN: `${tablePrefixSelector}-controls__insert-column`,
CONTROLS_INSERT_ROW: `${tablePrefixSelector}-controls__insert-row`,
CONTROLS_DELETE_BUTTON_WRAP: `${tablePrefixSelector}-controls__delete-button-wrap`,
CONTROLS_DELETE_BUTTON: `${tablePrefixSelector}-controls__delete-button`,
CONTROLS_FLOATING_BUTTON_COLUMN: `${tablePrefixSelector}-controls-floating__button-column`,
CONTROLS_FLOATING_BUTTON_ROW: `${tablePrefixSelector}-controls-floating__button-row`,
CORNER_CONTROLS: `${tablePrefixSelector}-corner-controls`,
CORNER_CONTROLS_INSERT_ROW_MARKER: `${tablePrefixSelector}-corner-controls__insert-row-marker`,
CORNER_CONTROLS_INSERT_COLUMN_MARKER: `${tablePrefixSelector}-corner-controls__insert-column-marker`,
CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
/** drag and drop controls */
DRAG_ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-drag-row-controls-wrapper`,
DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,
DRAG_ROW_FLOATING_DRAG_HANDLE: `${tablePrefixSelector}-drag-row-floating-drag-handle`,
DRAG_COLUMN_CONTROLS: `${tablePrefixSelector}-drag-column-controls`,
DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-columns-floating-insert-dot-wrapper`,
DRAG_COLUMN_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-columns-floating-insert-dot`,
DRAG_COLUMN_CONTROLS_WRAPPER: `${tablePrefixSelector}-col-controls-wrapper`,
DRAG_COLUMN_DROP_TARGET_CONTROLS: `${tablePrefixSelector}-col-drop-target-controls`,
DRAG_COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
DRAG_HANDLE_BUTTON_CLICKABLE_ZONE: `${tablePrefixSelector}-drag-handle-button-clickable-zone`,
DRAG_CORNER_BUTTON: `${tablePrefixSelector}-drag-corner-button`,
DRAG_CORNER_BUTTON_INNER: `${tablePrefixSelector}-drag-corner-button-inner`,
/** nested tables classes */
NESTED_TABLE_WITH_CONTROLS: `${tablePrefixSelector}-nested-table-with-controls`,
/** disabled classes */
DRAG_HANDLE_DISABLED: `${tablePrefixSelector}-drag-handle-disabled`,
/** minimised handle class */
DRAG_HANDLE_MINIMISED: `${tablePrefixSelector}-drag-handle-minimised`,
DRAG_SUBMENU: `${tablePrefixSelector}-drag-submenu`,
DRAG_SUBMENU_ICON: `${tablePrefixSelector}-drag-submenu-icon`,
/** Other classes */
NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,
NUMBERED_COLUMN_BUTTON_DISABLED: `${tablePrefixSelector}-numbered-column__button-disabled`,
HOVERED_COLUMN: `${tablePrefixSelector}-hovered-column`,
HOVERED_ROW: `${tablePrefixSelector}-hovered-row`,
HOVERED_TABLE: `${tablePrefixSelector}-hovered-table`,
HOVERED_NO_HIGHLIGHT: `${tablePrefixSelector}-hovered-no-highlight`,
HOVERED_CELL: `${tablePrefixSelector}-hovered-cell`,
HOVERED_CELL_IN_DANGER: 'danger',
HOVERED_CELL_ACTIVE: 'active',
HOVERED_CELL_WARNING: `${tablePrefixSelector}-hovered-cell__warning`,
HOVERED_DELETE_BUTTON: `${tablePrefixSelector}-hovered-delete-button`,
WITH_CONTROLS: `${tablePrefixSelector}-with-controls`,
RESIZING_PLUGIN: `${tablePrefixSelector}-resizing-plugin`,
RESIZE_CURSOR: `${tablePrefixSelector}-resize-cursor`,
IS_RESIZING: `${tablePrefixSelector}-is-resizing`,
RESIZE_HANDLE_DECORATION: `${tablePrefixSelector}-resize-decoration`,
CONTEXTUAL_SUBMENU: `${tablePrefixSelector}-contextual-submenu`,
CONTEXTUAL_MENU_BUTTON_WRAP: `${tablePrefixSelector}-contextual-menu-button-wrap`,
CONTEXTUAL_MENU_BUTTON: `${tablePrefixSelector}-contextual-menu-button`,
CONTEXTUAL_MENU_BUTTON_FIXED: `${tablePrefixSelector}-contextual-menu-button-fixed`,
CONTEXTUAL_MENU_ICON: `${tablePrefixSelector}-contextual-submenu-icon`,
CONTEXTUAL_MENU_ICON_SMALL: `${tablePrefixSelector}-contextual-submenu-icon-small`,
// come from prosemirror-table
SELECTED_CELL: 'selectedCell',
// defined in ReactNodeView based on PM node name
NODEVIEW_WRAPPER: 'tableView-content-wrap',
TABLE_SELECTED: `${tablePrefixSelector}-table__selected`,
TABLE_CELL: tableCellSelector,
TABLE_HEADER_CELL: tableHeaderSelector,
TABLE_STICKY: `${tablePrefixSelector}-sticky`,
TABLE_CHROMELESS: `${tablePrefixSelector}-chromeless`,
TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
LAST_ITEM_IN_CELL: `${tablePrefixSelector}-last-item-in-cell`,
WITH_COLUMN_INSERT_LINE: `${tablePrefixSelector}-column-insert-line`,
WITH_COLUMN_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-column-insert-line__inactive`,
WITH_FIRST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-first-column-insert-line`,
WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-first-column-insert-line__inactive`,
WITH_LAST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-last-column-insert-line`,
WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-last-column-insert-line__inactive`,
WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`,
WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`,
WITH_DRAG_RESIZE_LINE: `${tablePrefixSelector}-drag-column-resize-line`,
WITH_DRAG_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-drag-column-resize-line-last-column`,
WITH_ROW_INSERT_LINE: `${tablePrefixSelector}-row-insert-line`,
WITH_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-row-insert-line__inactive`,
WITH_LAST_ROW_INSERT_LINE: `${tablePrefixSelector}-last-row-insert-line`,
WITH_LAST_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-last-row-insert-line__inactive`,
NATIVE_STICKY: `${tablePrefixSelector}-row-native-sticky`,
NATIVE_STICKY_ACTIVE: `${tablePrefixSelector}-row-native-sticky-active`,
NO_OVERFLOW: `${tablePrefixSelector}-no-overflow`
};
export let ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
ShadowEvent["SHOW_AFTER_SHADOW"] = "showAfterShadow";
return ShadowEvent;
}({});
/**
* Drag and Drop interfaces
*/