@atlaskit/editor-plugin-table 12.2.6 → 12.2.7

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 (204) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +4 -4
  3. package/afm-cc/tsconfig.json +0 -123
  4. package/afm-dev-agents/tsconfig.json +0 -123
  5. package/afm-jira/tsconfig.json +0 -123
  6. package/afm-passionfruit/tsconfig.json +0 -123
  7. package/afm-post-office/tsconfig.json +0 -123
  8. package/afm-rovo-extension/tsconfig.json +0 -123
  9. package/afm-townsquare/tsconfig.json +0 -123
  10. package/afm-volt/tsconfig.json +0 -114
  11. package/build/tsconfig.json +0 -23
  12. package/docs/0-intro.tsx +0 -57
  13. package/src/index.ts +0 -21
  14. package/src/nodeviews/ExternalDropTargets.tsx +0 -91
  15. package/src/nodeviews/OverflowShadowsObserver.ts +0 -156
  16. package/src/nodeviews/TableCell.ts +0 -134
  17. package/src/nodeviews/TableComponent.tsx +0 -1590
  18. package/src/nodeviews/TableComponentWithSharedState.tsx +0 -278
  19. package/src/nodeviews/TableContainer.tsx +0 -926
  20. package/src/nodeviews/TableNodeViewBase.ts +0 -29
  21. package/src/nodeviews/TableResizer.tsx +0 -884
  22. package/src/nodeviews/TableRow.ts +0 -830
  23. package/src/nodeviews/TableStickyScrollbar.ts +0 -211
  24. package/src/nodeviews/__mocks__/OverflowShadowsObserver.ts +0 -15
  25. package/src/nodeviews/__mocks__/OverridableMock.ts +0 -26
  26. package/src/nodeviews/table-container-styles.ts +0 -9
  27. package/src/nodeviews/table-node-views.ts +0 -76
  28. package/src/nodeviews/table.tsx +0 -530
  29. package/src/nodeviews/toDOM.ts +0 -244
  30. package/src/nodeviews/types.ts +0 -36
  31. package/src/nodeviews/update-overflow-shadows.ts +0 -11
  32. package/src/pm-plugins/analytics/actions.ts +0 -21
  33. package/src/pm-plugins/analytics/commands.ts +0 -47
  34. package/src/pm-plugins/analytics/plugin-factory.ts +0 -9
  35. package/src/pm-plugins/analytics/plugin-key.ts +0 -5
  36. package/src/pm-plugins/analytics/plugin.ts +0 -80
  37. package/src/pm-plugins/analytics/reducer.ts +0 -27
  38. package/src/pm-plugins/analytics/types.ts +0 -20
  39. package/src/pm-plugins/analytics/utils/moved-event.ts +0 -51
  40. package/src/pm-plugins/commands/clear.ts +0 -43
  41. package/src/pm-plugins/commands/collapse.ts +0 -17
  42. package/src/pm-plugins/commands/column-resize.ts +0 -478
  43. package/src/pm-plugins/commands/commands-with-analytics.ts +0 -715
  44. package/src/pm-plugins/commands/delete.ts +0 -42
  45. package/src/pm-plugins/commands/display-mode.ts +0 -18
  46. package/src/pm-plugins/commands/go-to-next-cell.ts +0 -198
  47. package/src/pm-plugins/commands/hover.ts +0 -242
  48. package/src/pm-plugins/commands/index.ts +0 -51
  49. package/src/pm-plugins/commands/insert.ts +0 -438
  50. package/src/pm-plugins/commands/misc.ts +0 -811
  51. package/src/pm-plugins/commands/referentiality.ts +0 -15
  52. package/src/pm-plugins/commands/selection.ts +0 -537
  53. package/src/pm-plugins/commands/sort.ts +0 -102
  54. package/src/pm-plugins/commands/split-cell.ts +0 -28
  55. package/src/pm-plugins/commands/toggle.ts +0 -109
  56. package/src/pm-plugins/create-plugin-config.ts +0 -17
  57. package/src/pm-plugins/decorations/plugin.ts +0 -107
  58. package/src/pm-plugins/decorations/utils/column-controls.ts +0 -91
  59. package/src/pm-plugins/decorations/utils/column-resizing.ts +0 -71
  60. package/src/pm-plugins/decorations/utils/compose-decorations.ts +0 -9
  61. package/src/pm-plugins/decorations/utils/types.ts +0 -16
  62. package/src/pm-plugins/default-table-selection.ts +0 -14
  63. package/src/pm-plugins/drag-and-drop/actions.ts +0 -48
  64. package/src/pm-plugins/drag-and-drop/commands-with-analytics.ts +0 -222
  65. package/src/pm-plugins/drag-and-drop/commands.ts +0 -194
  66. package/src/pm-plugins/drag-and-drop/consts.ts +0 -7
  67. package/src/pm-plugins/drag-and-drop/plugin-factory.ts +0 -33
  68. package/src/pm-plugins/drag-and-drop/plugin-key.ts +0 -5
  69. package/src/pm-plugins/drag-and-drop/plugin.ts +0 -398
  70. package/src/pm-plugins/drag-and-drop/reducer.ts +0 -38
  71. package/src/pm-plugins/drag-and-drop/types.ts +0 -18
  72. package/src/pm-plugins/drag-and-drop/utils/autoscrollers.ts +0 -49
  73. package/src/pm-plugins/drag-and-drop/utils/getDragBehaviour.ts +0 -9
  74. package/src/pm-plugins/drag-and-drop/utils/monitor.ts +0 -73
  75. package/src/pm-plugins/handlers.ts +0 -161
  76. package/src/pm-plugins/keymap.ts +0 -436
  77. package/src/pm-plugins/main.ts +0 -433
  78. package/src/pm-plugins/plugin-factory.ts +0 -42
  79. package/src/pm-plugins/plugin-key.ts +0 -8
  80. package/src/pm-plugins/reducer.ts +0 -145
  81. package/src/pm-plugins/safari-delete-composition-text-issue-workaround.ts +0 -102
  82. package/src/pm-plugins/sticky-headers/commands.ts +0 -8
  83. package/src/pm-plugins/sticky-headers/plugin-key.ts +0 -5
  84. package/src/pm-plugins/sticky-headers/plugin-state.ts +0 -52
  85. package/src/pm-plugins/sticky-headers/plugin.ts +0 -12
  86. package/src/pm-plugins/sticky-headers/types.ts +0 -20
  87. package/src/pm-plugins/sticky-headers/util.ts +0 -18
  88. package/src/pm-plugins/table-analytics.ts +0 -100
  89. package/src/pm-plugins/table-local-id.ts +0 -213
  90. package/src/pm-plugins/table-resizing/commands.ts +0 -116
  91. package/src/pm-plugins/table-resizing/event-handlers.ts +0 -352
  92. package/src/pm-plugins/table-resizing/plugin-factory.ts +0 -29
  93. package/src/pm-plugins/table-resizing/plugin-key.ts +0 -5
  94. package/src/pm-plugins/table-resizing/plugin.ts +0 -94
  95. package/src/pm-plugins/table-resizing/reducer.ts +0 -37
  96. package/src/pm-plugins/table-resizing/utils/colgroup.ts +0 -306
  97. package/src/pm-plugins/table-resizing/utils/column-state.ts +0 -120
  98. package/src/pm-plugins/table-resizing/utils/consts.ts +0 -11
  99. package/src/pm-plugins/table-resizing/utils/content-width.ts +0 -118
  100. package/src/pm-plugins/table-resizing/utils/dom.ts +0 -132
  101. package/src/pm-plugins/table-resizing/utils/misc.ts +0 -282
  102. package/src/pm-plugins/table-resizing/utils/resize-column.ts +0 -34
  103. package/src/pm-plugins/table-resizing/utils/resize-logic.ts +0 -289
  104. package/src/pm-plugins/table-resizing/utils/resize-state.ts +0 -417
  105. package/src/pm-plugins/table-resizing/utils/scale-table.ts +0 -290
  106. package/src/pm-plugins/table-resizing/utils/types.ts +0 -25
  107. package/src/pm-plugins/table-resizing/utils/unit-to-number.ts +0 -1
  108. package/src/pm-plugins/table-selection-keymap.ts +0 -64
  109. package/src/pm-plugins/table-size-selector.ts +0 -39
  110. package/src/pm-plugins/table-width-in-comment-fix.ts +0 -113
  111. package/src/pm-plugins/table-width.ts +0 -153
  112. package/src/pm-plugins/transforms/column-width.ts +0 -249
  113. package/src/pm-plugins/transforms/delete-columns.ts +0 -281
  114. package/src/pm-plugins/transforms/delete-rows.ts +0 -154
  115. package/src/pm-plugins/transforms/fix-tables.ts +0 -249
  116. package/src/pm-plugins/transforms/merge.ts +0 -301
  117. package/src/pm-plugins/transforms/replace-table.ts +0 -38
  118. package/src/pm-plugins/transforms/split.ts +0 -90
  119. package/src/pm-plugins/utils/alignment.ts +0 -33
  120. package/src/pm-plugins/utils/analytics.ts +0 -238
  121. package/src/pm-plugins/utils/collapse.ts +0 -93
  122. package/src/pm-plugins/utils/column-controls.ts +0 -250
  123. package/src/pm-plugins/utils/create.ts +0 -64
  124. package/src/pm-plugins/utils/decoration.ts +0 -672
  125. package/src/pm-plugins/utils/dom.ts +0 -251
  126. package/src/pm-plugins/utils/drag-menu.tsx +0 -491
  127. package/src/pm-plugins/utils/get-allow-add-column-custom-step.ts +0 -10
  128. package/src/pm-plugins/utils/guidelines.ts +0 -30
  129. package/src/pm-plugins/utils/merged-cells.ts +0 -239
  130. package/src/pm-plugins/utils/nodes.ts +0 -162
  131. package/src/pm-plugins/utils/paste.ts +0 -386
  132. package/src/pm-plugins/utils/row-controls.ts +0 -211
  133. package/src/pm-plugins/utils/selection.ts +0 -17
  134. package/src/pm-plugins/utils/snapping.ts +0 -136
  135. package/src/pm-plugins/utils/table.ts +0 -60
  136. package/src/pm-plugins/utils/update-plugin-state-decorations.ts +0 -13
  137. package/src/pm-plugins/view-mode-sort/consts.ts +0 -3
  138. package/src/pm-plugins/view-mode-sort/index.ts +0 -291
  139. package/src/pm-plugins/view-mode-sort/plugin-key.ts +0 -7
  140. package/src/pm-plugins/view-mode-sort/types.ts +0 -23
  141. package/src/pm-plugins/view-mode-sort/utils.ts +0 -136
  142. package/src/tablePlugin.tsx +0 -971
  143. package/src/tablePluginType.ts +0 -102
  144. package/src/types/index.ts +0 -592
  145. package/src/ui/ColumnResizeWidget/index.tsx +0 -61
  146. package/src/ui/ContentComponent.tsx +0 -311
  147. package/src/ui/DragHandle/HandleIconComponent.tsx +0 -21
  148. package/src/ui/DragHandle/index.tsx +0 -391
  149. package/src/ui/DragPreview/index.tsx +0 -51
  150. package/src/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.tsx +0 -59
  151. package/src/ui/FloatingContextualButton/FixedButton.tsx +0 -203
  152. package/src/ui/FloatingContextualButton/index.tsx +0 -168
  153. package/src/ui/FloatingContextualButton/styles.ts +0 -69
  154. package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +0 -931
  155. package/src/ui/FloatingContextualMenu/index.tsx +0 -141
  156. package/src/ui/FloatingContextualMenu/styles.ts +0 -77
  157. package/src/ui/FloatingDeleteButton/DeleteButton.tsx +0 -54
  158. package/src/ui/FloatingDeleteButton/getPopUpOptions.ts +0 -65
  159. package/src/ui/FloatingDeleteButton/index.tsx +0 -383
  160. package/src/ui/FloatingDeleteButton/types.ts +0 -3
  161. package/src/ui/FloatingDragMenu/DragMenu.tsx +0 -668
  162. package/src/ui/FloatingDragMenu/DropdownMenu.tsx +0 -221
  163. package/src/ui/FloatingDragMenu/index.tsx +0 -136
  164. package/src/ui/FloatingDragMenu/styles.ts +0 -83
  165. package/src/ui/FloatingInsertButton/InsertButton.tsx +0 -263
  166. package/src/ui/FloatingInsertButton/getPopupOptions.ts +0 -131
  167. package/src/ui/FloatingInsertButton/index.tsx +0 -314
  168. package/src/ui/FloatingToolbarLabel/FloatingToolbarLabel.tsx +0 -31
  169. package/src/ui/SizeSelector/index.tsx +0 -74
  170. package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +0 -397
  171. package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx +0 -105
  172. package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx +0 -63
  173. package/src/ui/TableFloatingColumnControls/index.tsx +0 -151
  174. package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx +0 -106
  175. package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +0 -143
  176. package/src/ui/TableFloatingControls/CornerControls/types.ts +0 -12
  177. package/src/ui/TableFloatingControls/FloatingControlsWithSelection.tsx +0 -88
  178. package/src/ui/TableFloatingControls/NumberColumn/index.tsx +0 -175
  179. package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx +0 -131
  180. package/src/ui/TableFloatingControls/RowControls/DragControls.tsx +0 -429
  181. package/src/ui/TableFloatingControls/RowDropTarget/index.tsx +0 -96
  182. package/src/ui/TableFloatingControls/index.tsx +0 -275
  183. package/src/ui/TableFullWidthLabel/index.tsx +0 -38
  184. package/src/ui/common-styles.ts +0 -1218
  185. package/src/ui/consts.ts +0 -109
  186. package/src/ui/event-handlers.ts +0 -662
  187. package/src/ui/global-styles.tsx +0 -55
  188. package/src/ui/hooks/useInternalTablePluginStateSelector.ts +0 -38
  189. package/src/ui/icons/AddColLeftIcon.tsx +0 -37
  190. package/src/ui/icons/AddColRightIcon.tsx +0 -37
  191. package/src/ui/icons/AddRowAboveIcon.tsx +0 -22
  192. package/src/ui/icons/AddRowBelowIcon.tsx +0 -39
  193. package/src/ui/icons/DragHandleDisabledIcon.tsx +0 -25
  194. package/src/ui/icons/DragHandleIcon.tsx +0 -16
  195. package/src/ui/icons/DragInMotionIcon.tsx +0 -54
  196. package/src/ui/icons/MergeCellsIcon.tsx +0 -26
  197. package/src/ui/icons/MinimisedHandle.tsx +0 -15
  198. package/src/ui/icons/SortingIconWrapper.tsx +0 -43
  199. package/src/ui/icons/SplitCellIcon.tsx +0 -34
  200. package/src/ui/toolbar.tsx +0 -1153
  201. package/src/ui/ui-styles.ts +0 -960
  202. package/tsconfig.app.json +0 -135
  203. package/tsconfig.dev.json +0 -54
  204. package/tsconfig.json +0 -18
@@ -1,131 +0,0 @@
1
- import React, { Component } from 'react';
2
-
3
- import type { WrappedComponentProps } from 'react-intl-next';
4
- import { injectIntl } from 'react-intl-next';
5
-
6
- import { tableMessages as messages } from '@atlaskit/editor-common/messages';
7
- import type { Selection } from '@atlaskit/editor-prosemirror/state';
8
- import type { EditorView } from '@atlaskit/editor-prosemirror/view';
9
- import { fg } from '@atlaskit/platform-feature-flags';
10
-
11
- import { clearHoverSelection } from '../../../pm-plugins/commands';
12
- import type { RowParams } from '../../../pm-plugins/utils/row-controls';
13
- import {
14
- getRowClassNames,
15
- getRowHeights,
16
- getRowsParams,
17
- } from '../../../pm-plugins/utils/row-controls';
18
- import { TableCssClassName as ClassName } from '../../../types';
19
- import { tableControlsSpacing, tableToolbarSize } from '../../consts';
20
-
21
- export interface Props {
22
- editorView: EditorView;
23
- tableRef: HTMLTableElement;
24
- selectRow: (row: number, expand: boolean) => void;
25
- hoverRows: (rows: number[], danger?: boolean) => void;
26
- hoveredRows?: number[];
27
- isInDanger?: boolean;
28
- isResizing?: boolean;
29
- insertRowButtonIndex?: number;
30
- stickyTop?: number;
31
- selection?: Selection;
32
- }
33
-
34
- // Ignored via go/ees005
35
- // eslint-disable-next-line @repo/internal/react/no-class-components
36
- class RowControlsComponent extends Component<Props & WrappedComponentProps> {
37
- render() {
38
- const {
39
- editorView,
40
- tableRef,
41
- hoveredRows,
42
- isInDanger,
43
- isResizing,
44
- intl: { formatMessage },
45
- selection: selectionState,
46
- } = this.props;
47
- if (!tableRef) {
48
- return null;
49
- }
50
- const { selection } = editorView.state;
51
- const rowHeights = getRowHeights(tableRef);
52
- const rowsParams = getRowsParams(rowHeights);
53
-
54
- const firstRow = tableRef.querySelector('tr');
55
- const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
56
-
57
- return (
58
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
59
- <div className={ClassName.ROW_CONTROLS}>
60
- {/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
61
- <div className={ClassName.ROW_CONTROLS_INNER}>
62
- {rowsParams.map(({ startIndex, endIndex, height }: RowParams, index) => {
63
- // if previous row was header row, add its height to our margin
64
- let marginTop = -1;
65
- if (index === 1 && hasHeaderRow && this.props.stickyTop !== undefined) {
66
- marginTop += rowHeights[index - 1] + tableToolbarSize;
67
- }
68
-
69
- const thisRowSticky = this.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
70
-
71
- return (
72
- <div
73
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
74
- className={`${ClassName.ROW_CONTROLS_BUTTON_WRAP} ${getRowClassNames(
75
- startIndex,
76
- selectionState || selection,
77
- hoveredRows,
78
- isInDanger,
79
- isResizing,
80
- )} ${thisRowSticky ? 'sticky' : ''}`}
81
- key={startIndex}
82
- style={{
83
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
84
- height: height,
85
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
86
- marginTop: `${marginTop}px`,
87
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
88
- top: thisRowSticky ? `3px` : undefined,
89
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
90
- paddingTop: thisRowSticky
91
- ? `${
92
- fg('platform_editor_number_column_sticky_header_bug')
93
- ? // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
94
- tableControlsSpacing - 2
95
- : // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
96
- tableControlsSpacing
97
- }px`
98
- : undefined,
99
- }}
100
- >
101
- <button
102
- aria-label={formatMessage(messages.rowControl)}
103
- type="button"
104
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
105
- className={`${ClassName.ROW_CONTROLS_BUTTON} ${ClassName.CONTROLS_BUTTON}`}
106
- onClick={(event) => this.props.selectRow(startIndex, event.shiftKey)}
107
- // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
108
- onMouseOver={() => this.props.hoverRows([startIndex])}
109
- // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
110
- onMouseOut={this.clearHoverSelection}
111
- data-start-index={startIndex}
112
- data-end-index={endIndex}
113
- />
114
-
115
- {/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
116
- <div className={ClassName.CONTROLS_INSERT_MARKER} />
117
- </div>
118
- );
119
- })}
120
- </div>
121
- </div>
122
- );
123
- }
124
-
125
- private clearHoverSelection = () => {
126
- const { state, dispatch } = this.props.editorView;
127
- clearHoverSelection()(state, dispatch);
128
- };
129
- }
130
-
131
- export const RowControls = injectIntl(RowControlsComponent);
@@ -1,429 +0,0 @@
1
- /* eslint-disable @atlaskit/design-system/prefer-primitives */
2
- import type { MouseEvent } from 'react';
3
- import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
4
-
5
- import {
6
- sharedPluginStateHookMigratorFactory,
7
- useSharedPluginState,
8
- useSharedPluginStateWithSelector,
9
- } from '@atlaskit/editor-common/hooks';
10
- import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
11
- import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
12
- import type { Selection } from '@atlaskit/editor-prosemirror/state';
13
- import type { EditorView } from '@atlaskit/editor-prosemirror/view';
14
- import { CellSelection } from '@atlaskit/editor-tables';
15
- import { getSelectionRect } from '@atlaskit/editor-tables/utils';
16
- import { fg } from '@atlaskit/platform-feature-flags';
17
- import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
18
- import { token } from '@atlaskit/tokens';
19
-
20
- import { clearHoverSelection } from '../../../pm-plugins/commands';
21
- import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
22
- import type { TriggerType } from '../../../pm-plugins/drag-and-drop/types';
23
- import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
24
- import { getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
25
- import { getSelectedRowIndexes } from '../../../pm-plugins/utils/selection';
26
- import type { TablePlugin } from '../../../tablePluginType';
27
- import { TableCssClassName as ClassName } from '../../../types';
28
- import type { CellHoverMeta, DraggableSourceData, HandleTypes } from '../../../types';
29
- import { dropTargetExtendedWidth } from '../../consts';
30
- import type { DragHandleAppearance } from '../../DragHandle';
31
- import { DragHandle, DragHandleWithSharedState } from '../../DragHandle';
32
- import RowDropTarget from '../RowDropTarget';
33
-
34
- type DragControlsProps = {
35
- editorView: EditorView;
36
- tableRef: HTMLTableElement;
37
- tableNode?: PmNode;
38
- tableWidth: number;
39
- tableActive?: boolean;
40
- hoveredCell?: CellHoverMeta;
41
- isInDanger?: boolean;
42
- isTableHovered?: boolean;
43
- isResizing?: boolean;
44
- hoverRows: (rows: number[], danger?: boolean) => void;
45
- selectRow: (row: number, expand: boolean) => void;
46
- selectRows: (rowIndexes: number[]) => void;
47
- updateCellHoverLocation: (rowIndex: number) => void;
48
- api?: ExtractInjectionAPI<TablePlugin>;
49
- selection?: Selection;
50
- };
51
-
52
- const getSelectedRows = (selection: Selection) => {
53
- if (selection instanceof CellSelection && selection.isRowSelection()) {
54
- const rect = getSelectionRect(selection);
55
- if (!rect) {
56
- return [];
57
- }
58
- return getSelectedRowIndexes(rect);
59
- }
60
- return [];
61
- };
62
-
63
- export const DragControls = ({
64
- tableRef,
65
- tableNode,
66
- tableWidth,
67
- hoveredCell,
68
- tableActive,
69
- editorView,
70
- isInDanger,
71
- isResizing,
72
- isTableHovered,
73
- hoverRows,
74
- selectRow,
75
- selectRows,
76
- updateCellHoverLocation,
77
- api,
78
- selection,
79
- }: DragControlsProps) => {
80
- const [isDragging, setIsDragging] = useState(false);
81
- const rowHeights = getRowHeights(tableRef);
82
- const rowsParams = getRowsParams(rowHeights);
83
- const heights = rowHeights.map((height) => `${height - 1}px`).join(' ');
84
- const selectedRowIndexes = getSelectedRows(selection ?? editorView.state.selection);
85
- const currentNodeLocalId = tableNode?.attrs?.localId ?? '';
86
-
87
- useEffect(() => {
88
- return monitorForElements({
89
- canMonitor({ source }) {
90
- const { type, localId, indexes } = source.data as Partial<DraggableSourceData>;
91
-
92
- if (!indexes || !localId || type !== 'table-row') {
93
- return false;
94
- }
95
-
96
- const { tableNode } = getTablePluginState(editorView.state);
97
- // If the draggable localId is the same as the current selected table localId then we will allow the monitor
98
- // watch for changes
99
- return localId === tableNode?.attrs.localId;
100
- },
101
- onDragStart() {
102
- setIsDragging(true);
103
- },
104
- onDrop() {
105
- setIsDragging(false);
106
- },
107
- });
108
- }, [editorView]);
109
-
110
- const toggleDragMenuHandler = useCallback(
111
- (
112
- trigger: TriggerType,
113
- event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | undefined,
114
- ) => {
115
- if (event?.shiftKey) {
116
- return;
117
- }
118
- toggleDragMenu(
119
- undefined,
120
- 'row',
121
- hoveredCell?.rowIndex,
122
- trigger,
123
- )(editorView.state, editorView.dispatch);
124
- },
125
- [editorView, hoveredCell?.rowIndex],
126
- );
127
-
128
- const rowIndex = hoveredCell?.rowIndex;
129
-
130
- const handleMouseOut = useCallback(() => {
131
- if (tableActive) {
132
- const { state, dispatch } = editorView;
133
- clearHoverSelection()(state, dispatch);
134
- }
135
- }, [editorView, tableActive]);
136
-
137
- const handleMouseMove = useCallback(
138
- (e: MouseEvent) => {
139
- const target = e.nativeEvent.target instanceof Element ? e.nativeEvent.target : null;
140
- const isParentDragControls = target?.closest(`.${ClassName.DRAG_ROW_CONTROLS}`);
141
- const rowIndex = target?.getAttribute('data-start-index');
142
-
143
- // avoid updating if event target is not related
144
- if (!isParentDragControls || !rowIndex) {
145
- return;
146
- }
147
-
148
- updateCellHoverLocation(Number(rowIndex));
149
- },
150
- [updateCellHoverLocation],
151
- );
152
-
153
- const rowIndexes = useMemo(() => {
154
- // Ignored via go/ees005
155
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
156
- return [rowIndex!];
157
- }, [rowIndex]);
158
-
159
- const handleMouseOver = useCallback(() => {
160
- // Ignored via go/ees005
161
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
162
- hoverRows([rowIndex!]);
163
- }, [hoverRows, rowIndex]);
164
-
165
- const handleClick = useCallback(
166
- (e: MouseEvent) => {
167
- const isClickOutsideSelectedRows =
168
- // Ignored via go/ees005
169
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
170
- selectedRowIndexes.length >= 1 && !selectedRowIndexes.includes(rowIndex!);
171
- if (!selectedRowIndexes || selectedRowIndexes.length === 0 || isClickOutsideSelectedRows) {
172
- // Ignored via go/ees005
173
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
174
- selectRow(rowIndex!, e.shiftKey);
175
- }
176
-
177
- // Ignored via go/ees005
178
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
179
- if (selectedRowIndexes.length > 1 && selectedRowIndexes.includes(rowIndex!) && !e.shiftKey) {
180
- selectRows(selectedRowIndexes);
181
- }
182
- },
183
- [rowIndex, selectRow, selectRows, selectedRowIndexes],
184
- );
185
-
186
- const generateHandleByType = (
187
- type: HandleTypes,
188
- appearance: DragHandleAppearance,
189
- gridRow: string,
190
- indexes: number[],
191
- ) => {
192
- const isHover = type === 'hover';
193
-
194
- const previewHeight = rowHeights.reduce(
195
- (sum, v, i) => sum + v * (indexes.includes(i) ? 1 : 0),
196
- 0,
197
- );
198
-
199
- return (
200
- <div
201
- key={type}
202
- style={{
203
- gridRow,
204
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
205
- gridColumn: '2',
206
- // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
207
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
208
- display: 'flex',
209
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
210
- width: '9px',
211
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
212
- height: '100%',
213
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
214
- position: 'relative',
215
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
216
- right: '-0.5px',
217
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
218
- pointerEvents: 'none',
219
- }}
220
- data-testid={`table-floating-row-${isHover ? rowIndex : selectedRowIndexes[0]}-drag-handle`}
221
- >
222
- {fg('platform_editor_table_use_shared_state_hook_fg') ? (
223
- <DragHandleWithSharedState
224
- isDragMenuTarget={!isHover}
225
- direction="row"
226
- tableLocalId={currentNodeLocalId}
227
- indexes={indexes}
228
- forceDefaultHandle={!isHover}
229
- previewWidth={tableWidth}
230
- previewHeight={previewHeight}
231
- appearance={appearance}
232
- hoveredCell={hoveredCell}
233
- onClick={handleClick}
234
- onMouseOver={handleMouseOver}
235
- onMouseOut={handleMouseOut}
236
- toggleDragMenu={toggleDragMenuHandler}
237
- editorView={editorView}
238
- api={api}
239
- />
240
- ) : (
241
- <DragHandle
242
- isDragMenuTarget={!isHover}
243
- direction="row"
244
- tableLocalId={currentNodeLocalId}
245
- indexes={indexes}
246
- forceDefaultHandle={!isHover}
247
- previewWidth={tableWidth}
248
- previewHeight={previewHeight}
249
- appearance={appearance}
250
- hoveredCell={hoveredCell}
251
- onClick={handleClick}
252
- onMouseOver={handleMouseOver}
253
- onMouseOut={handleMouseOut}
254
- toggleDragMenu={toggleDragMenuHandler}
255
- editorView={editorView}
256
- />
257
- )}
258
- </div>
259
- );
260
- };
261
-
262
- const rowHandles = () => {
263
- const handles = [];
264
- const isRowSelected = selectedRowIndexes.length > 0;
265
- const isEntireTableSelected = rowHeights.length > selectedRowIndexes.length;
266
-
267
- if (!tableActive) {
268
- return null;
269
- }
270
-
271
- // placeholder / selected need to always render at least one handle
272
- // so it can be focused via keyboard shortcuts
273
- handles.push(
274
- generateHandleByType(
275
- 'selected',
276
- isRowSelected && isEntireTableSelected
277
- ? isInDanger
278
- ? 'danger'
279
- : 'selected'
280
- : 'placeholder',
281
- `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`,
282
- selectedRowIndexes,
283
- ),
284
- );
285
-
286
- if (
287
- hoveredCell &&
288
- isTableHovered &&
289
- rowIndex !== undefined &&
290
- !selectedRowIndexes.includes(rowIndex) &&
291
- rowIndex < rowHeights.length
292
- ) {
293
- handles.push(
294
- generateHandleByType('hover', 'default', `${rowIndex + 1} / span 1`, rowIndexes),
295
- );
296
- }
297
-
298
- return handles;
299
- };
300
-
301
- if (isResizing) {
302
- return null;
303
- }
304
-
305
- return (
306
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
307
- <div
308
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
309
- className={ClassName.DRAG_ROW_CONTROLS}
310
- style={{
311
- gridTemplateRows: heights,
312
- gridTemplateColumns: isDragging
313
- ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
314
- `${dropTargetExtendedWidth}px 14px ${tableWidth}px`
315
- : '0px 14px 0px',
316
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
317
- left: isDragging
318
- ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
319
- `-${dropTargetExtendedWidth + 2}px`
320
- : token('space.negative.025', '-2px'),
321
- }}
322
- onMouseMove={handleMouseMove}
323
- contentEditable={false}
324
- >
325
- {rowsParams.map(({ startIndex, endIndex }, index) => (
326
- // Ignored via go/ees005
327
- // eslint-disable-next-line react/no-array-index-key
328
- <Fragment key={index}>
329
- <div
330
- style={{
331
- gridRow: `${index + 1} / span 1`,
332
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
333
- gridColumn: '2',
334
- }}
335
- data-start-index={startIndex}
336
- data-end-index={endIndex}
337
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
338
- className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER}
339
- contentEditable={false}
340
- // Ignored via go/ees005
341
- // eslint-disable-next-line react/no-array-index-key
342
- key={`insert-dot-${index}`}
343
- >
344
- {/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
345
- <div className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT} />
346
- </div>
347
- {isDragging && (
348
- <RowDropTarget
349
- // Ignored via go/ees005
350
- // eslint-disable-next-line react/no-array-index-key
351
- key={`drop-target-${index}`}
352
- index={index}
353
- localId={currentNodeLocalId}
354
- style={{
355
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
356
- gridColumn: '1 / span 3',
357
- gridRow: `${index + 1} / span 1`,
358
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
359
- height: '100%',
360
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
361
- pointerEvents: 'auto',
362
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
363
- position: 'relative',
364
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
365
- left: token('space.negative.100', '-8px'),
366
- }}
367
- />
368
- )}
369
- </Fragment>
370
- ))}
371
- {rowHandles()}
372
- </div>
373
- );
374
- };
375
-
376
- const useSharedState = sharedPluginStateHookMigratorFactory(
377
- (api: ExtractInjectionAPI<TablePlugin> | undefined) => {
378
- const { selection } = useSharedPluginStateWithSelector(api, ['selection'], (states) => ({
379
- selection: states.selectionState?.selection,
380
- }));
381
- return {
382
- selection,
383
- };
384
- },
385
- (api: ExtractInjectionAPI<TablePlugin> | undefined) => {
386
- const { selectionState } = useSharedPluginState(api, ['selection']);
387
- return {
388
- selection: selectionState?.selection,
389
- };
390
- },
391
- );
392
-
393
- export const DragControlsWithSelection = ({
394
- editorView,
395
- tableRef,
396
- tableNode,
397
- tableWidth,
398
- tableActive,
399
- hoveredCell,
400
- isInDanger,
401
- isTableHovered,
402
- isResizing,
403
- hoverRows,
404
- selectRow,
405
- selectRows,
406
- updateCellHoverLocation,
407
- api,
408
- }: Exclude<DragControlsProps, 'selection'>) => {
409
- const { selection } = useSharedState(api);
410
- return (
411
- <DragControls
412
- editorView={editorView}
413
- tableRef={tableRef}
414
- tableNode={tableNode}
415
- tableWidth={tableWidth}
416
- tableActive={tableActive}
417
- hoveredCell={hoveredCell}
418
- isInDanger={isInDanger}
419
- isTableHovered={isTableHovered}
420
- isResizing={isResizing}
421
- hoverRows={hoverRows}
422
- selectRow={selectRow}
423
- selectRows={selectRows}
424
- updateCellHoverLocation={updateCellHoverLocation}
425
- api={api}
426
- selection={selection}
427
- />
428
- );
429
- };
@@ -1,96 +0,0 @@
1
- import React, { useEffect, useRef } from 'react';
2
-
3
- import {
4
- attachClosestEdge,
5
- type Edge,
6
- } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
7
- import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
8
-
9
- import { getDragBehaviour } from '../../../pm-plugins/drag-and-drop/utils/getDragBehaviour';
10
- import type { DraggableSourceData } from '../../../types';
11
-
12
- type RowDropTargetProps = {
13
- index: number;
14
- localId?: string;
15
- style?: React.CSSProperties;
16
- };
17
-
18
- const RowDropTarget = ({ index, localId, style }: RowDropTargetProps) => {
19
- const dropTargetRef = useRef<HTMLDivElement | null>(null);
20
-
21
- useEffect(() => {
22
- if (!dropTargetRef.current) {
23
- return;
24
- }
25
-
26
- return dropTargetForElements({
27
- element: dropTargetRef.current,
28
- canDrop({ source, input }) {
29
- const data = source.data as DraggableSourceData;
30
- const behaviour = getDragBehaviour(input);
31
-
32
- // A move drop is limited too where it can go, however a clone can drop can go anywhere.
33
- const isDropValid =
34
- behaviour === 'move' ? data.indexes?.indexOf(index) === -1 : behaviour === 'clone';
35
-
36
- return (
37
- // Only draggables of row type can be dropped on this target
38
- data.type === 'table-row' &&
39
- // Only draggables which came from the same table can be dropped on this target
40
- data.localId === localId &&
41
- // Only draggables which DO NOT include this drop targets index can be dropped
42
- !!data.indexes?.length &&
43
- isDropValid
44
- );
45
- },
46
- getDropEffect: ({ input }) => (getDragBehaviour(input) === 'clone' ? 'copy' : 'move'),
47
- getIsSticky: () => true,
48
- getData({ source, input, element }) {
49
- const data = {
50
- localId,
51
- type: 'table-row',
52
- targetIndex: index,
53
- };
54
-
55
- const srcData = source.data as DraggableSourceData;
56
- const behaviour = getDragBehaviour(input);
57
-
58
- // During a move op there's no point in allowing edges to be dropped on which result in no change/move to occur.
59
- const allowedEdges: Edge[] =
60
- behaviour === 'move'
61
- ? srcData.indexes?.reduce(
62
- (acc, v) => {
63
- if (v - index === -1) {
64
- acc.shift();
65
- }
66
- if (v - index === 1) {
67
- acc.pop();
68
- }
69
- return acc;
70
- },
71
- ['top', 'bottom'],
72
- )
73
- : ['top', 'bottom'];
74
-
75
- return attachClosestEdge(data, {
76
- input,
77
- element,
78
- allowedEdges,
79
- });
80
- },
81
- });
82
- }, [index, localId]);
83
-
84
- return (
85
- <div
86
- ref={dropTargetRef}
87
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
88
- style={style}
89
- data-drop-target-index={index}
90
- data-drop-target-localid={localId}
91
- data-testid="table-floating-row-controls-drop-target"
92
- ></div>
93
- );
94
- };
95
-
96
- export default RowDropTarget;