@atlaskit/editor-plugin-table 7.2.3 → 7.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/afm-cc/tsconfig.json +3 -0
- package/dist/cjs/commands/column-resize.js +115 -45
- package/dist/cjs/commands/go-to-next-cell.js +7 -11
- package/dist/cjs/commands/misc.js +7 -4
- package/dist/cjs/commands/selection.js +7 -5
- package/dist/cjs/event-handlers.js +38 -25
- package/dist/cjs/pm-plugins/drag-and-drop/commands.js +3 -1
- package/dist/cjs/pm-plugins/drag-and-drop/plugin.js +33 -1
- package/dist/cjs/pm-plugins/drag-and-drop/reducer.js +2 -1
- package/dist/cjs/pm-plugins/keymap.js +1 -0
- package/dist/cjs/pm-plugins/main.js +43 -9
- package/dist/cjs/pm-plugins/table-resizing/event-handlers.js +37 -7
- package/dist/cjs/pm-plugins/table-resizing/plugin.js +20 -6
- package/dist/cjs/pm-plugins/table-selection-keymap.js +2 -2
- package/dist/cjs/reducer.js +5 -2
- package/dist/cjs/ui/DragHandle/HandleIconComponent.js +1 -3
- package/dist/cjs/ui/DragHandle/index.js +22 -10
- package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +75 -33
- package/dist/cjs/ui/FloatingDragMenu/DropdownMenu.js +123 -0
- package/dist/cjs/ui/FloatingDragMenu/index.js +2 -2
- package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js +24 -35
- package/dist/cjs/ui/TableFloatingColumnControls/index.js +1 -2
- package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js +4 -0
- package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js +26 -33
- package/dist/cjs/ui/common-styles.js +1 -1
- package/dist/cjs/ui/consts.js +3 -2
- package/dist/es2019/commands/column-resize.js +100 -35
- package/dist/es2019/commands/go-to-next-cell.js +7 -9
- package/dist/es2019/commands/misc.js +7 -6
- package/dist/es2019/commands/selection.js +9 -9
- package/dist/es2019/event-handlers.js +17 -3
- package/dist/es2019/pm-plugins/drag-and-drop/commands.js +3 -3
- package/dist/es2019/pm-plugins/drag-and-drop/plugin.js +34 -1
- package/dist/es2019/pm-plugins/drag-and-drop/reducer.js +2 -1
- package/dist/es2019/pm-plugins/keymap.js +3 -2
- package/dist/es2019/pm-plugins/main.js +41 -5
- package/dist/es2019/pm-plugins/table-resizing/event-handlers.js +37 -4
- package/dist/es2019/pm-plugins/table-resizing/plugin.js +16 -1
- package/dist/es2019/pm-plugins/table-selection-keymap.js +2 -2
- package/dist/es2019/reducer.js +5 -2
- package/dist/es2019/ui/DragHandle/HandleIconComponent.js +1 -3
- package/dist/es2019/ui/DragHandle/index.js +25 -10
- package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +72 -32
- package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js +109 -0
- package/dist/es2019/ui/FloatingDragMenu/index.js +2 -2
- package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js +24 -35
- package/dist/es2019/ui/TableFloatingColumnControls/index.js +1 -2
- package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js +4 -0
- package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js +26 -33
- package/dist/es2019/ui/common-styles.js +11 -1
- package/dist/es2019/ui/consts.js +2 -1
- package/dist/esm/commands/column-resize.js +105 -35
- package/dist/esm/commands/go-to-next-cell.js +7 -11
- package/dist/esm/commands/misc.js +7 -4
- package/dist/esm/commands/selection.js +9 -7
- package/dist/esm/event-handlers.js +38 -25
- package/dist/esm/pm-plugins/drag-and-drop/commands.js +3 -2
- package/dist/esm/pm-plugins/drag-and-drop/plugin.js +33 -1
- package/dist/esm/pm-plugins/drag-and-drop/reducer.js +2 -1
- package/dist/esm/pm-plugins/keymap.js +3 -2
- package/dist/esm/pm-plugins/main.js +38 -4
- package/dist/esm/pm-plugins/table-resizing/event-handlers.js +34 -4
- package/dist/esm/pm-plugins/table-resizing/plugin.js +15 -1
- package/dist/esm/pm-plugins/table-selection-keymap.js +2 -2
- package/dist/esm/reducer.js +5 -2
- package/dist/esm/ui/DragHandle/HandleIconComponent.js +1 -3
- package/dist/esm/ui/DragHandle/index.js +21 -9
- package/dist/esm/ui/FloatingDragMenu/DragMenu.js +74 -35
- package/dist/esm/ui/FloatingDragMenu/DropdownMenu.js +116 -0
- package/dist/esm/ui/FloatingDragMenu/index.js +2 -2
- package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js +24 -35
- package/dist/esm/ui/TableFloatingColumnControls/index.js +1 -2
- package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js +4 -0
- package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js +26 -33
- package/dist/esm/ui/common-styles.js +1 -1
- package/dist/esm/ui/consts.js +2 -1
- package/dist/types/commands/column-resize.d.ts +2 -0
- package/dist/types/commands/misc.d.ts +3 -3
- package/dist/types/commands/selection.d.ts +2 -2
- package/dist/types/pm-plugins/drag-and-drop/actions.d.ts +1 -0
- package/dist/types/pm-plugins/drag-and-drop/commands.d.ts +2 -1
- package/dist/types/pm-plugins/drag-and-drop/types.d.ts +2 -0
- package/dist/types/types.d.ts +16 -0
- package/dist/types/ui/DragHandle/HandleIconComponent.d.ts +1 -2
- package/dist/types/ui/DragHandle/index.d.ts +3 -2
- package/dist/types/ui/FloatingDragMenu/DragMenu.d.ts +7 -8
- package/dist/types/ui/FloatingDragMenu/DropdownMenu.d.ts +30 -0
- package/dist/types/ui/TableFloatingColumnControls/ColumnControls/index.d.ts +1 -2
- package/dist/types/ui/TableFloatingControls/RowControls/DragControls.d.ts +1 -1
- package/dist/types/ui/consts.d.ts +1 -0
- package/dist/types-ts4.5/commands/column-resize.d.ts +2 -0
- package/dist/types-ts4.5/commands/misc.d.ts +3 -3
- package/dist/types-ts4.5/commands/selection.d.ts +2 -2
- package/dist/types-ts4.5/pm-plugins/drag-and-drop/actions.d.ts +1 -0
- package/dist/types-ts4.5/pm-plugins/drag-and-drop/commands.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/drag-and-drop/types.d.ts +2 -0
- package/dist/types-ts4.5/types.d.ts +16 -0
- package/dist/types-ts4.5/ui/DragHandle/HandleIconComponent.d.ts +1 -2
- package/dist/types-ts4.5/ui/DragHandle/index.d.ts +3 -2
- package/dist/types-ts4.5/ui/FloatingDragMenu/DragMenu.d.ts +7 -8
- package/dist/types-ts4.5/ui/FloatingDragMenu/DropdownMenu.d.ts +30 -0
- package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnControls/index.d.ts +1 -2
- package/dist/types-ts4.5/ui/TableFloatingControls/RowControls/DragControls.d.ts +1 -1
- package/dist/types-ts4.5/ui/consts.d.ts +1 -0
- package/package.json +4 -3
- package/src/commands/column-resize.ts +155 -40
- package/src/commands/go-to-next-cell.ts +6 -15
- package/src/commands/misc.ts +19 -4
- package/src/commands/selection.ts +17 -9
- package/src/event-handlers.ts +21 -4
- package/src/pm-plugins/drag-and-drop/actions.ts +1 -0
- package/src/pm-plugins/drag-and-drop/commands.ts +3 -0
- package/src/pm-plugins/drag-and-drop/plugin.ts +47 -0
- package/src/pm-plugins/drag-and-drop/reducer.ts +1 -0
- package/src/pm-plugins/drag-and-drop/types.ts +3 -0
- package/src/pm-plugins/keymap.ts +3 -0
- package/src/pm-plugins/main.ts +47 -2
- package/src/pm-plugins/table-resizing/event-handlers.ts +33 -5
- package/src/pm-plugins/table-resizing/plugin.ts +18 -1
- package/src/pm-plugins/table-selection-keymap.ts +2 -2
- package/src/reducer.ts +5 -2
- package/src/types.ts +16 -0
- package/src/ui/DragHandle/HandleIconComponent.tsx +2 -9
- package/src/ui/DragHandle/index.tsx +37 -16
- package/src/ui/FloatingDragMenu/DragMenu.tsx +362 -310
- package/src/ui/FloatingDragMenu/DropdownMenu.tsx +150 -0
- package/src/ui/FloatingDragMenu/index.tsx +3 -3
- package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +72 -91
- package/src/ui/TableFloatingColumnControls/index.tsx +1 -2
- package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +5 -0
- package/src/ui/TableFloatingControls/RowControls/DragControls.tsx +89 -104
- package/src/ui/common-styles.ts +11 -1
- package/src/ui/consts.ts +1 -0
- package/tsconfig.app.json +3 -0
|
@@ -4,9 +4,10 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
|
4
4
|
import type { DraggableType, TableDirection } from '../../types';
|
|
5
5
|
import { TableDecorations } from '../../types';
|
|
6
6
|
import { DropTargetType } from './consts';
|
|
7
|
+
import type { TriggerType } from './types';
|
|
7
8
|
export declare const getDecorations: (state: EditorState) => DecorationSet;
|
|
8
9
|
export declare const updatePluginStateDecorations: (state: EditorState, decorations: Decoration[], key: TableDecorations) => DecorationSet;
|
|
9
10
|
export declare const setDropTarget: (type: DropTargetType, index: number, hasMergedCells: boolean, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
|
|
10
11
|
export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
|
|
11
12
|
export declare const moveSource: (sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
|
|
12
|
-
export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number) => import("@atlaskit/editor-common/types").Command;
|
|
13
|
+
export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number, trigger?: TriggerType) => import("@atlaskit/editor-common/types").Command;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -74,6 +74,7 @@ export interface TablePluginState {
|
|
|
74
74
|
resizeHandleRowIndex?: number;
|
|
75
75
|
resizeHandleColumnIndex?: number;
|
|
76
76
|
resizeHandleIncludeTooltip?: boolean;
|
|
77
|
+
isKeyboardResize?: boolean;
|
|
77
78
|
isTableCollapsed?: boolean;
|
|
78
79
|
canCollapseTable?: boolean;
|
|
79
80
|
getIntl: () => IntlShape;
|
|
@@ -134,6 +135,15 @@ export type TablePluginAction = {
|
|
|
134
135
|
hoveredColumns: number[];
|
|
135
136
|
isInDanger?: boolean;
|
|
136
137
|
};
|
|
138
|
+
} | {
|
|
139
|
+
type: 'START_KEYBOARD_COLUMN_RESIZE';
|
|
140
|
+
data: {
|
|
141
|
+
decorationSet: DecorationSet;
|
|
142
|
+
resizeHandleRowIndex: number;
|
|
143
|
+
resizeHandleColumnIndex: number;
|
|
144
|
+
resizeHandleIncludeTooltip: boolean;
|
|
145
|
+
isKeyboardResize?: boolean;
|
|
146
|
+
};
|
|
137
147
|
} | {
|
|
138
148
|
type: 'ADD_RESIZE_HANDLE_DECORATIONS';
|
|
139
149
|
data: {
|
|
@@ -141,6 +151,7 @@ export type TablePluginAction = {
|
|
|
141
151
|
resizeHandleRowIndex: number;
|
|
142
152
|
resizeHandleColumnIndex: number;
|
|
143
153
|
resizeHandleIncludeTooltip: boolean;
|
|
154
|
+
isKeyboardResize?: boolean;
|
|
144
155
|
};
|
|
145
156
|
} | {
|
|
146
157
|
type: 'UPDATE_RESIZE_HANDLE_DECORATIONS';
|
|
@@ -155,6 +166,11 @@ export type TablePluginAction = {
|
|
|
155
166
|
data: {
|
|
156
167
|
decorationSet: DecorationSet;
|
|
157
168
|
};
|
|
169
|
+
} | {
|
|
170
|
+
type: 'STOP_KEYBOARD_COLUMN_RESIZE';
|
|
171
|
+
data: {
|
|
172
|
+
decorationSet: DecorationSet;
|
|
173
|
+
};
|
|
158
174
|
} | {
|
|
159
175
|
type: 'CLEAR_HOVER_SELECTION';
|
|
160
176
|
data: {
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
type HandleIconProps = {
|
|
3
3
|
forceDefaultHandle: boolean;
|
|
4
|
-
|
|
5
|
-
isColumnHandleHovered: boolean;
|
|
4
|
+
isHandleHovered: boolean;
|
|
6
5
|
hasMergedCells: boolean;
|
|
7
6
|
};
|
|
8
7
|
export declare const HandleIconComponent: (props: HandleIconProps) => JSX.Element;
|
|
@@ -2,8 +2,9 @@ import type { MouseEventHandler } from 'react';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
4
4
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import type { TriggerType } from '../../pm-plugins/drag-and-drop/types';
|
|
5
6
|
import type { TableDirection } from '../../types';
|
|
6
|
-
type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
|
|
7
|
+
export type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger' | 'placeholder';
|
|
7
8
|
type DragHandleProps = {
|
|
8
9
|
tableLocalId: string;
|
|
9
10
|
indexes: number[];
|
|
@@ -15,7 +16,7 @@ type DragHandleProps = {
|
|
|
15
16
|
onClick?: MouseEventHandler;
|
|
16
17
|
onMouseOver?: MouseEventHandler;
|
|
17
18
|
onMouseOut?: MouseEventHandler;
|
|
18
|
-
|
|
19
|
+
toggleDragMenu?: (trigger: TriggerType, event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
19
20
|
editorView: EditorView;
|
|
20
21
|
isDragMenuTarget: boolean;
|
|
21
22
|
};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
/** @jsxFrag */
|
|
3
|
+
import React from 'react';
|
|
2
4
|
import { jsx } from '@emotion/react';
|
|
3
5
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
4
6
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
@@ -9,20 +11,17 @@ import type { PluginConfig, TableDirection } from '../../types';
|
|
|
9
11
|
type DragMenuProps = {
|
|
10
12
|
direction?: TableDirection;
|
|
11
13
|
index?: number;
|
|
12
|
-
|
|
14
|
+
target?: Element;
|
|
13
15
|
tableNode?: PmNode;
|
|
14
16
|
editorView: EditorView;
|
|
15
17
|
isOpen?: boolean;
|
|
16
18
|
targetCellPosition?: number;
|
|
17
|
-
mountPoint?: HTMLElement;
|
|
18
|
-
boundariesElement?: HTMLElement;
|
|
19
|
-
scrollableElement?: HTMLElement;
|
|
20
19
|
pluginConfig?: PluginConfig;
|
|
21
20
|
getEditorContainerWidth: GetEditorContainerWidth;
|
|
22
21
|
editorAnalyticsAPI?: EditorAnalyticsAPI;
|
|
23
22
|
};
|
|
24
|
-
export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode,
|
|
25
|
-
declare const _default:
|
|
26
|
-
WrappedComponent:
|
|
23
|
+
export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
|
|
24
|
+
declare const _default: React.FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps<"intl">>> & {
|
|
25
|
+
WrappedComponent: React.ComponentType<DragMenuProps & WrappedComponentProps<"intl">>;
|
|
27
26
|
};
|
|
28
27
|
export default _default;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
|
|
3
|
+
type DropdownMenuProps = {
|
|
4
|
+
target?: HTMLElement;
|
|
5
|
+
items: Array<{
|
|
6
|
+
items: MenuItem[];
|
|
7
|
+
}>;
|
|
8
|
+
/**
|
|
9
|
+
* use to toggle top level menu keyboard navigation and action keys
|
|
10
|
+
* e.g. should be false if submenu is rendered as a child to avoid multiple keydown handlers
|
|
11
|
+
*/
|
|
12
|
+
disableKeyboardHandling: boolean;
|
|
13
|
+
section: {
|
|
14
|
+
hasSeparator?: boolean;
|
|
15
|
+
title?: string;
|
|
16
|
+
};
|
|
17
|
+
onItemActivated?: (attrs: {
|
|
18
|
+
item: MenuItem;
|
|
19
|
+
shouldCloseMenu?: boolean;
|
|
20
|
+
}) => void;
|
|
21
|
+
handleClose: (focusTarget: 'editor' | 'handle') => void;
|
|
22
|
+
onMouseEnter: (attrs: {
|
|
23
|
+
item: MenuItem;
|
|
24
|
+
}) => void;
|
|
25
|
+
onMouseLeave: (attrs: {
|
|
26
|
+
item: MenuItem;
|
|
27
|
+
}) => void;
|
|
28
|
+
};
|
|
29
|
+
export declare const DropdownMenu: ({ target, items, section, disableKeyboardHandling, onItemActivated, handleClose, onMouseEnter, onMouseLeave, }: DropdownMenuProps) => JSX.Element;
|
|
30
|
+
export {};
|
|
@@ -7,7 +7,6 @@ export interface ColumnControlsProps {
|
|
|
7
7
|
isInDanger?: boolean;
|
|
8
8
|
tableRef: HTMLTableElement;
|
|
9
9
|
hoveredCell?: CellHoverMeta;
|
|
10
|
-
isResizing?: boolean;
|
|
11
10
|
stickyTop?: number;
|
|
12
11
|
localId?: string;
|
|
13
12
|
rowHeights?: number[];
|
|
@@ -19,5 +18,5 @@ export interface ColumnControlsProps {
|
|
|
19
18
|
isDragging?: boolean;
|
|
20
19
|
getScrollOffset?: () => number;
|
|
21
20
|
}
|
|
22
|
-
export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell,
|
|
21
|
+
export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, }: ColumnControlsProps) => JSX.Element;
|
|
23
22
|
export default ColumnControls;
|
|
@@ -11,8 +11,8 @@ type DragControlsProps = {
|
|
|
11
11
|
tableActive?: boolean;
|
|
12
12
|
hoveredCell?: CellHoverMeta;
|
|
13
13
|
isInDanger?: boolean;
|
|
14
|
-
isResizing?: boolean;
|
|
15
14
|
isTableHovered?: boolean;
|
|
15
|
+
isResizing?: boolean;
|
|
16
16
|
hoverRows: (rows: number[], danger?: boolean) => void;
|
|
17
17
|
selectRow: (row: number, expand: boolean) => void;
|
|
18
18
|
selectRows: (rowIndexes: number[]) => void;
|
|
@@ -56,3 +56,4 @@ export declare const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
|
|
|
56
56
|
export declare const dragMenuDropdownWidth = 250;
|
|
57
57
|
export declare const dragTableInsertColumnButtonSize = 16;
|
|
58
58
|
export declare const dropTargetExtendedWidth = 150;
|
|
59
|
+
export declare const colorPalletteColumns = 7;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
2
3
|
import type { Direction } from '@atlaskit/editor-tables/types';
|
|
3
4
|
export declare const initiateKeyboardColumnResizing: Command;
|
|
4
5
|
export declare const activateNextResizeArea: (direction: Direction) => Command;
|
|
5
6
|
export declare const changeColumnWidthByStep: (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth) => Command;
|
|
7
|
+
export declare const stopKeyboardColumnResizing: (originalTr?: Transaction) => Command;
|
|
@@ -19,14 +19,14 @@ export declare const deleteTableIfSelected: Command;
|
|
|
19
19
|
export declare const convertFirstRowToHeader: (schema: Schema) => (tr: Transaction) => Transaction;
|
|
20
20
|
export declare const moveCursorBackward: Command;
|
|
21
21
|
export declare const setMultipleCellAttrs: (attrs: Object, targetCellPosition?: number) => Command;
|
|
22
|
-
export declare const selectColumn: (column: number, expand?: boolean) => Command;
|
|
22
|
+
export declare const selectColumn: (column: number, expand?: boolean, triggeredByKeyboard?: boolean) => Command;
|
|
23
23
|
export declare const selectColumns: (columnIndexes: number[]) => Command;
|
|
24
|
-
export declare const selectRow: (row: number, expand?: boolean) => Command;
|
|
24
|
+
export declare const selectRow: (row: number, expand?: boolean, triggeredByKeyboard?: boolean) => Command;
|
|
25
25
|
export declare const selectRows: (rowIndexes: number[]) => Command;
|
|
26
26
|
export declare const showInsertColumnButton: (columnIndex: number) => Command;
|
|
27
27
|
export declare const showInsertRowButton: (rowIndex: number) => Command;
|
|
28
28
|
export declare const hideInsertColumnOrRowButton: () => Command;
|
|
29
|
-
export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean) => Command;
|
|
29
|
+
export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean, isKeyboardResize?: boolean) => Command;
|
|
30
30
|
export declare const updateResizeHandleDecorations: (rowIndex?: number, columnIndex?: number, includeTooltip?: boolean) => Command;
|
|
31
31
|
export declare const removeResizeHandleDecorations: () => Command;
|
|
32
32
|
export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTMLTableElement, basePos: number | undefined, opts: {
|
|
@@ -6,6 +6,6 @@ export declare enum TableSelectionDirection {
|
|
|
6
6
|
}
|
|
7
7
|
export declare const arrowLeftFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
|
|
8
8
|
export declare const arrowRightFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
|
|
9
|
-
export declare const selectColumns: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
|
|
10
|
-
export declare const selectRows: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
|
|
9
|
+
export declare const selectColumns: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => (triggeredByKeyboard?: boolean) => Command;
|
|
10
|
+
export declare const selectRows: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => (triggeredByKeyboard?: boolean) => Command;
|
|
11
11
|
export declare const shiftArrowUpFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
|
|
@@ -22,5 +22,6 @@ export type DragAndDropToggleDragMenuAction = DragAndDropAction<typeof DragAndDr
|
|
|
22
22
|
isDragMenuOpen: boolean;
|
|
23
23
|
direction: TableDirection;
|
|
24
24
|
index: number;
|
|
25
|
+
isKeyboardModeActive: boolean;
|
|
25
26
|
}>;
|
|
26
27
|
export type DragAndDropPluginAction = DragAndDropSetDropTargetAction | DragAndDropClearDropTargetAction | DragAndDropToggleDragMenuAction;
|
|
@@ -4,9 +4,10 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
|
4
4
|
import type { DraggableType, TableDirection } from '../../types';
|
|
5
5
|
import { TableDecorations } from '../../types';
|
|
6
6
|
import { DropTargetType } from './consts';
|
|
7
|
+
import type { TriggerType } from './types';
|
|
7
8
|
export declare const getDecorations: (state: EditorState) => DecorationSet;
|
|
8
9
|
export declare const updatePluginStateDecorations: (state: EditorState, decorations: Decoration[], key: TableDecorations) => DecorationSet;
|
|
9
10
|
export declare const setDropTarget: (type: DropTargetType, index: number, hasMergedCells: boolean, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
|
|
10
11
|
export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
|
|
11
12
|
export declare const moveSource: (sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
|
|
12
|
-
export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number) => import("@atlaskit/editor-common/types").Command;
|
|
13
|
+
export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number, trigger?: TriggerType) => import("@atlaskit/editor-common/types").Command;
|
|
@@ -74,6 +74,7 @@ export interface TablePluginState {
|
|
|
74
74
|
resizeHandleRowIndex?: number;
|
|
75
75
|
resizeHandleColumnIndex?: number;
|
|
76
76
|
resizeHandleIncludeTooltip?: boolean;
|
|
77
|
+
isKeyboardResize?: boolean;
|
|
77
78
|
isTableCollapsed?: boolean;
|
|
78
79
|
canCollapseTable?: boolean;
|
|
79
80
|
getIntl: () => IntlShape;
|
|
@@ -134,6 +135,15 @@ export type TablePluginAction = {
|
|
|
134
135
|
hoveredColumns: number[];
|
|
135
136
|
isInDanger?: boolean;
|
|
136
137
|
};
|
|
138
|
+
} | {
|
|
139
|
+
type: 'START_KEYBOARD_COLUMN_RESIZE';
|
|
140
|
+
data: {
|
|
141
|
+
decorationSet: DecorationSet;
|
|
142
|
+
resizeHandleRowIndex: number;
|
|
143
|
+
resizeHandleColumnIndex: number;
|
|
144
|
+
resizeHandleIncludeTooltip: boolean;
|
|
145
|
+
isKeyboardResize?: boolean;
|
|
146
|
+
};
|
|
137
147
|
} | {
|
|
138
148
|
type: 'ADD_RESIZE_HANDLE_DECORATIONS';
|
|
139
149
|
data: {
|
|
@@ -141,6 +151,7 @@ export type TablePluginAction = {
|
|
|
141
151
|
resizeHandleRowIndex: number;
|
|
142
152
|
resizeHandleColumnIndex: number;
|
|
143
153
|
resizeHandleIncludeTooltip: boolean;
|
|
154
|
+
isKeyboardResize?: boolean;
|
|
144
155
|
};
|
|
145
156
|
} | {
|
|
146
157
|
type: 'UPDATE_RESIZE_HANDLE_DECORATIONS';
|
|
@@ -155,6 +166,11 @@ export type TablePluginAction = {
|
|
|
155
166
|
data: {
|
|
156
167
|
decorationSet: DecorationSet;
|
|
157
168
|
};
|
|
169
|
+
} | {
|
|
170
|
+
type: 'STOP_KEYBOARD_COLUMN_RESIZE';
|
|
171
|
+
data: {
|
|
172
|
+
decorationSet: DecorationSet;
|
|
173
|
+
};
|
|
158
174
|
} | {
|
|
159
175
|
type: 'CLEAR_HOVER_SELECTION';
|
|
160
176
|
data: {
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
type HandleIconProps = {
|
|
3
3
|
forceDefaultHandle: boolean;
|
|
4
|
-
|
|
5
|
-
isColumnHandleHovered: boolean;
|
|
4
|
+
isHandleHovered: boolean;
|
|
6
5
|
hasMergedCells: boolean;
|
|
7
6
|
};
|
|
8
7
|
export declare const HandleIconComponent: (props: HandleIconProps) => JSX.Element;
|
|
@@ -2,8 +2,9 @@ import type { MouseEventHandler } from 'react';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
4
4
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import type { TriggerType } from '../../pm-plugins/drag-and-drop/types';
|
|
5
6
|
import type { TableDirection } from '../../types';
|
|
6
|
-
type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
|
|
7
|
+
export type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger' | 'placeholder';
|
|
7
8
|
type DragHandleProps = {
|
|
8
9
|
tableLocalId: string;
|
|
9
10
|
indexes: number[];
|
|
@@ -15,7 +16,7 @@ type DragHandleProps = {
|
|
|
15
16
|
onClick?: MouseEventHandler;
|
|
16
17
|
onMouseOver?: MouseEventHandler;
|
|
17
18
|
onMouseOut?: MouseEventHandler;
|
|
18
|
-
|
|
19
|
+
toggleDragMenu?: (trigger: TriggerType, event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
19
20
|
editorView: EditorView;
|
|
20
21
|
isDragMenuTarget: boolean;
|
|
21
22
|
};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
/** @jsxFrag */
|
|
3
|
+
import React from 'react';
|
|
2
4
|
import { jsx } from '@emotion/react';
|
|
3
5
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
4
6
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
@@ -9,20 +11,17 @@ import type { PluginConfig, TableDirection } from '../../types';
|
|
|
9
11
|
type DragMenuProps = {
|
|
10
12
|
direction?: TableDirection;
|
|
11
13
|
index?: number;
|
|
12
|
-
|
|
14
|
+
target?: Element;
|
|
13
15
|
tableNode?: PmNode;
|
|
14
16
|
editorView: EditorView;
|
|
15
17
|
isOpen?: boolean;
|
|
16
18
|
targetCellPosition?: number;
|
|
17
|
-
mountPoint?: HTMLElement;
|
|
18
|
-
boundariesElement?: HTMLElement;
|
|
19
|
-
scrollableElement?: HTMLElement;
|
|
20
19
|
pluginConfig?: PluginConfig;
|
|
21
20
|
getEditorContainerWidth: GetEditorContainerWidth;
|
|
22
21
|
editorAnalyticsAPI?: EditorAnalyticsAPI;
|
|
23
22
|
};
|
|
24
|
-
export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode,
|
|
25
|
-
declare const _default:
|
|
26
|
-
WrappedComponent:
|
|
23
|
+
export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
|
|
24
|
+
declare const _default: React.FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps<"intl">>> & {
|
|
25
|
+
WrappedComponent: React.ComponentType<DragMenuProps & WrappedComponentProps<"intl">>;
|
|
27
26
|
};
|
|
28
27
|
export default _default;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
|
|
3
|
+
type DropdownMenuProps = {
|
|
4
|
+
target?: HTMLElement;
|
|
5
|
+
items: Array<{
|
|
6
|
+
items: MenuItem[];
|
|
7
|
+
}>;
|
|
8
|
+
/**
|
|
9
|
+
* use to toggle top level menu keyboard navigation and action keys
|
|
10
|
+
* e.g. should be false if submenu is rendered as a child to avoid multiple keydown handlers
|
|
11
|
+
*/
|
|
12
|
+
disableKeyboardHandling: boolean;
|
|
13
|
+
section: {
|
|
14
|
+
hasSeparator?: boolean;
|
|
15
|
+
title?: string;
|
|
16
|
+
};
|
|
17
|
+
onItemActivated?: (attrs: {
|
|
18
|
+
item: MenuItem;
|
|
19
|
+
shouldCloseMenu?: boolean;
|
|
20
|
+
}) => void;
|
|
21
|
+
handleClose: (focusTarget: 'editor' | 'handle') => void;
|
|
22
|
+
onMouseEnter: (attrs: {
|
|
23
|
+
item: MenuItem;
|
|
24
|
+
}) => void;
|
|
25
|
+
onMouseLeave: (attrs: {
|
|
26
|
+
item: MenuItem;
|
|
27
|
+
}) => void;
|
|
28
|
+
};
|
|
29
|
+
export declare const DropdownMenu: ({ target, items, section, disableKeyboardHandling, onItemActivated, handleClose, onMouseEnter, onMouseLeave, }: DropdownMenuProps) => JSX.Element;
|
|
30
|
+
export {};
|
|
@@ -7,7 +7,6 @@ export interface ColumnControlsProps {
|
|
|
7
7
|
isInDanger?: boolean;
|
|
8
8
|
tableRef: HTMLTableElement;
|
|
9
9
|
hoveredCell?: CellHoverMeta;
|
|
10
|
-
isResizing?: boolean;
|
|
11
10
|
stickyTop?: number;
|
|
12
11
|
localId?: string;
|
|
13
12
|
rowHeights?: number[];
|
|
@@ -19,5 +18,5 @@ export interface ColumnControlsProps {
|
|
|
19
18
|
isDragging?: boolean;
|
|
20
19
|
getScrollOffset?: () => number;
|
|
21
20
|
}
|
|
22
|
-
export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell,
|
|
21
|
+
export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, }: ColumnControlsProps) => JSX.Element;
|
|
23
22
|
export default ColumnControls;
|
|
@@ -11,8 +11,8 @@ type DragControlsProps = {
|
|
|
11
11
|
tableActive?: boolean;
|
|
12
12
|
hoveredCell?: CellHoverMeta;
|
|
13
13
|
isInDanger?: boolean;
|
|
14
|
-
isResizing?: boolean;
|
|
15
14
|
isTableHovered?: boolean;
|
|
15
|
+
isResizing?: boolean;
|
|
16
16
|
hoverRows: (rows: number[], danger?: boolean) => void;
|
|
17
17
|
selectRow: (row: number, expand: boolean) => void;
|
|
18
18
|
selectRows: (rowIndexes: number[]) => void;
|
|
@@ -56,3 +56,4 @@ export declare const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
|
|
|
56
56
|
export declare const dragMenuDropdownWidth = 250;
|
|
57
57
|
export declare const dragTableInsertColumnButtonSize = 16;
|
|
58
58
|
export declare const dropTargetExtendedWidth = 150;
|
|
59
|
+
export declare const colorPalletteColumns = 7;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.3.1",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@atlaskit/adf-schema": "^35.5.1",
|
|
32
32
|
"@atlaskit/custom-steps": "^0.0.13",
|
|
33
|
-
"@atlaskit/editor-common": "^77.
|
|
33
|
+
"@atlaskit/editor-common": "^77.4.0",
|
|
34
34
|
"@atlaskit/editor-palette": "1.5.2",
|
|
35
35
|
"@atlaskit/editor-plugin-analytics": "^0.4.0",
|
|
36
36
|
"@atlaskit/editor-plugin-content-insertion": "^0.1.0",
|
|
@@ -41,6 +41,7 @@
|
|
|
41
41
|
"@atlaskit/editor-shared-styles": "^2.9.0",
|
|
42
42
|
"@atlaskit/editor-tables": "^2.5.0",
|
|
43
43
|
"@atlaskit/icon": "^22.0.0",
|
|
44
|
+
"@atlaskit/menu": "^2.1.5",
|
|
44
45
|
"@atlaskit/platform-feature-flags": "^0.2.1",
|
|
45
46
|
"@atlaskit/pragmatic-drag-and-drop": "^0.25.0",
|
|
46
47
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^0.8.0",
|
|
@@ -48,7 +49,7 @@
|
|
|
48
49
|
"@atlaskit/primitives": "^2.0.0",
|
|
49
50
|
"@atlaskit/theme": "^12.6.0",
|
|
50
51
|
"@atlaskit/toggle": "^13.0.0",
|
|
51
|
-
"@atlaskit/tokens": "^1.
|
|
52
|
+
"@atlaskit/tokens": "^1.36.0",
|
|
52
53
|
"@atlaskit/tooltip": "^18.1.0",
|
|
53
54
|
"@babel/runtime": "^7.0.0",
|
|
54
55
|
"@emotion/react": "^11.7.1",
|