@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.
Files changed (135) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/afm-cc/tsconfig.json +3 -0
  3. package/dist/cjs/commands/column-resize.js +115 -45
  4. package/dist/cjs/commands/go-to-next-cell.js +7 -11
  5. package/dist/cjs/commands/misc.js +7 -4
  6. package/dist/cjs/commands/selection.js +7 -5
  7. package/dist/cjs/event-handlers.js +38 -25
  8. package/dist/cjs/pm-plugins/drag-and-drop/commands.js +3 -1
  9. package/dist/cjs/pm-plugins/drag-and-drop/plugin.js +33 -1
  10. package/dist/cjs/pm-plugins/drag-and-drop/reducer.js +2 -1
  11. package/dist/cjs/pm-plugins/keymap.js +1 -0
  12. package/dist/cjs/pm-plugins/main.js +43 -9
  13. package/dist/cjs/pm-plugins/table-resizing/event-handlers.js +37 -7
  14. package/dist/cjs/pm-plugins/table-resizing/plugin.js +20 -6
  15. package/dist/cjs/pm-plugins/table-selection-keymap.js +2 -2
  16. package/dist/cjs/reducer.js +5 -2
  17. package/dist/cjs/ui/DragHandle/HandleIconComponent.js +1 -3
  18. package/dist/cjs/ui/DragHandle/index.js +22 -10
  19. package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +75 -33
  20. package/dist/cjs/ui/FloatingDragMenu/DropdownMenu.js +123 -0
  21. package/dist/cjs/ui/FloatingDragMenu/index.js +2 -2
  22. package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js +24 -35
  23. package/dist/cjs/ui/TableFloatingColumnControls/index.js +1 -2
  24. package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js +4 -0
  25. package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js +26 -33
  26. package/dist/cjs/ui/common-styles.js +1 -1
  27. package/dist/cjs/ui/consts.js +3 -2
  28. package/dist/es2019/commands/column-resize.js +100 -35
  29. package/dist/es2019/commands/go-to-next-cell.js +7 -9
  30. package/dist/es2019/commands/misc.js +7 -6
  31. package/dist/es2019/commands/selection.js +9 -9
  32. package/dist/es2019/event-handlers.js +17 -3
  33. package/dist/es2019/pm-plugins/drag-and-drop/commands.js +3 -3
  34. package/dist/es2019/pm-plugins/drag-and-drop/plugin.js +34 -1
  35. package/dist/es2019/pm-plugins/drag-and-drop/reducer.js +2 -1
  36. package/dist/es2019/pm-plugins/keymap.js +3 -2
  37. package/dist/es2019/pm-plugins/main.js +41 -5
  38. package/dist/es2019/pm-plugins/table-resizing/event-handlers.js +37 -4
  39. package/dist/es2019/pm-plugins/table-resizing/plugin.js +16 -1
  40. package/dist/es2019/pm-plugins/table-selection-keymap.js +2 -2
  41. package/dist/es2019/reducer.js +5 -2
  42. package/dist/es2019/ui/DragHandle/HandleIconComponent.js +1 -3
  43. package/dist/es2019/ui/DragHandle/index.js +25 -10
  44. package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +72 -32
  45. package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js +109 -0
  46. package/dist/es2019/ui/FloatingDragMenu/index.js +2 -2
  47. package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js +24 -35
  48. package/dist/es2019/ui/TableFloatingColumnControls/index.js +1 -2
  49. package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js +4 -0
  50. package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js +26 -33
  51. package/dist/es2019/ui/common-styles.js +11 -1
  52. package/dist/es2019/ui/consts.js +2 -1
  53. package/dist/esm/commands/column-resize.js +105 -35
  54. package/dist/esm/commands/go-to-next-cell.js +7 -11
  55. package/dist/esm/commands/misc.js +7 -4
  56. package/dist/esm/commands/selection.js +9 -7
  57. package/dist/esm/event-handlers.js +38 -25
  58. package/dist/esm/pm-plugins/drag-and-drop/commands.js +3 -2
  59. package/dist/esm/pm-plugins/drag-and-drop/plugin.js +33 -1
  60. package/dist/esm/pm-plugins/drag-and-drop/reducer.js +2 -1
  61. package/dist/esm/pm-plugins/keymap.js +3 -2
  62. package/dist/esm/pm-plugins/main.js +38 -4
  63. package/dist/esm/pm-plugins/table-resizing/event-handlers.js +34 -4
  64. package/dist/esm/pm-plugins/table-resizing/plugin.js +15 -1
  65. package/dist/esm/pm-plugins/table-selection-keymap.js +2 -2
  66. package/dist/esm/reducer.js +5 -2
  67. package/dist/esm/ui/DragHandle/HandleIconComponent.js +1 -3
  68. package/dist/esm/ui/DragHandle/index.js +21 -9
  69. package/dist/esm/ui/FloatingDragMenu/DragMenu.js +74 -35
  70. package/dist/esm/ui/FloatingDragMenu/DropdownMenu.js +116 -0
  71. package/dist/esm/ui/FloatingDragMenu/index.js +2 -2
  72. package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js +24 -35
  73. package/dist/esm/ui/TableFloatingColumnControls/index.js +1 -2
  74. package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js +4 -0
  75. package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js +26 -33
  76. package/dist/esm/ui/common-styles.js +1 -1
  77. package/dist/esm/ui/consts.js +2 -1
  78. package/dist/types/commands/column-resize.d.ts +2 -0
  79. package/dist/types/commands/misc.d.ts +3 -3
  80. package/dist/types/commands/selection.d.ts +2 -2
  81. package/dist/types/pm-plugins/drag-and-drop/actions.d.ts +1 -0
  82. package/dist/types/pm-plugins/drag-and-drop/commands.d.ts +2 -1
  83. package/dist/types/pm-plugins/drag-and-drop/types.d.ts +2 -0
  84. package/dist/types/types.d.ts +16 -0
  85. package/dist/types/ui/DragHandle/HandleIconComponent.d.ts +1 -2
  86. package/dist/types/ui/DragHandle/index.d.ts +3 -2
  87. package/dist/types/ui/FloatingDragMenu/DragMenu.d.ts +7 -8
  88. package/dist/types/ui/FloatingDragMenu/DropdownMenu.d.ts +30 -0
  89. package/dist/types/ui/TableFloatingColumnControls/ColumnControls/index.d.ts +1 -2
  90. package/dist/types/ui/TableFloatingControls/RowControls/DragControls.d.ts +1 -1
  91. package/dist/types/ui/consts.d.ts +1 -0
  92. package/dist/types-ts4.5/commands/column-resize.d.ts +2 -0
  93. package/dist/types-ts4.5/commands/misc.d.ts +3 -3
  94. package/dist/types-ts4.5/commands/selection.d.ts +2 -2
  95. package/dist/types-ts4.5/pm-plugins/drag-and-drop/actions.d.ts +1 -0
  96. package/dist/types-ts4.5/pm-plugins/drag-and-drop/commands.d.ts +2 -1
  97. package/dist/types-ts4.5/pm-plugins/drag-and-drop/types.d.ts +2 -0
  98. package/dist/types-ts4.5/types.d.ts +16 -0
  99. package/dist/types-ts4.5/ui/DragHandle/HandleIconComponent.d.ts +1 -2
  100. package/dist/types-ts4.5/ui/DragHandle/index.d.ts +3 -2
  101. package/dist/types-ts4.5/ui/FloatingDragMenu/DragMenu.d.ts +7 -8
  102. package/dist/types-ts4.5/ui/FloatingDragMenu/DropdownMenu.d.ts +30 -0
  103. package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnControls/index.d.ts +1 -2
  104. package/dist/types-ts4.5/ui/TableFloatingControls/RowControls/DragControls.d.ts +1 -1
  105. package/dist/types-ts4.5/ui/consts.d.ts +1 -0
  106. package/package.json +4 -3
  107. package/src/commands/column-resize.ts +155 -40
  108. package/src/commands/go-to-next-cell.ts +6 -15
  109. package/src/commands/misc.ts +19 -4
  110. package/src/commands/selection.ts +17 -9
  111. package/src/event-handlers.ts +21 -4
  112. package/src/pm-plugins/drag-and-drop/actions.ts +1 -0
  113. package/src/pm-plugins/drag-and-drop/commands.ts +3 -0
  114. package/src/pm-plugins/drag-and-drop/plugin.ts +47 -0
  115. package/src/pm-plugins/drag-and-drop/reducer.ts +1 -0
  116. package/src/pm-plugins/drag-and-drop/types.ts +3 -0
  117. package/src/pm-plugins/keymap.ts +3 -0
  118. package/src/pm-plugins/main.ts +47 -2
  119. package/src/pm-plugins/table-resizing/event-handlers.ts +33 -5
  120. package/src/pm-plugins/table-resizing/plugin.ts +18 -1
  121. package/src/pm-plugins/table-selection-keymap.ts +2 -2
  122. package/src/reducer.ts +5 -2
  123. package/src/types.ts +16 -0
  124. package/src/ui/DragHandle/HandleIconComponent.tsx +2 -9
  125. package/src/ui/DragHandle/index.tsx +37 -16
  126. package/src/ui/FloatingDragMenu/DragMenu.tsx +362 -310
  127. package/src/ui/FloatingDragMenu/DropdownMenu.tsx +150 -0
  128. package/src/ui/FloatingDragMenu/index.tsx +3 -3
  129. package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +72 -91
  130. package/src/ui/TableFloatingColumnControls/index.tsx +1 -2
  131. package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +5 -0
  132. package/src/ui/TableFloatingControls/RowControls/DragControls.tsx +89 -104
  133. package/src/ui/common-styles.ts +11 -1
  134. package/src/ui/consts.ts +1 -0
  135. 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;
@@ -9,4 +9,6 @@ export interface DragAndDropPluginState {
9
9
  dragMenuDirection?: TableDirection;
10
10
  dragMenuIndex: number;
11
11
  isDragging: boolean;
12
+ isKeyboardModeActive: boolean;
12
13
  }
14
+ export type TriggerType = 'mouse' | 'keyboard';
@@ -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
- isRowHandleHovered: boolean;
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
- onMouseUp?: MouseEventHandler;
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
- /// <reference types="react" />
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
- tableRef?: HTMLTableElement;
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, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null;
25
- declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps<"intl">>> & {
26
- WrappedComponent: import("react").ComponentType<DragMenuProps & WrappedComponentProps<"intl">>;
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, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, }: ColumnControlsProps) => JSX.Element;
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;
@@ -9,4 +9,6 @@ export interface DragAndDropPluginState {
9
9
  dragMenuDirection?: TableDirection;
10
10
  dragMenuIndex: number;
11
11
  isDragging: boolean;
12
+ isKeyboardModeActive: boolean;
12
13
  }
14
+ export type TriggerType = 'mouse' | 'keyboard';
@@ -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
- isRowHandleHovered: boolean;
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
- onMouseUp?: MouseEventHandler;
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
- /// <reference types="react" />
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
- tableRef?: HTMLTableElement;
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, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null;
25
- declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps<"intl">>> & {
26
- WrappedComponent: import("react").ComponentType<DragMenuProps & WrappedComponentProps<"intl">>;
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, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, }: ColumnControlsProps) => JSX.Element;
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.2.3",
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.3.0",
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.35.0",
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",