@atlaskit/editor-plugin-table 22.2.14 → 22.2.16

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 (52) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/nodeviews/TableComponent.js +3 -4
  3. package/dist/cjs/nodeviews/TableComponentWithSharedState.js +1 -1
  4. package/dist/cjs/nodeviews/TableContainer.js +1 -4
  5. package/dist/cjs/nodeviews/table.js +0 -2
  6. package/dist/cjs/pm-plugins/main.js +1 -2
  7. package/dist/cjs/ui/ContentComponent.js +14 -30
  8. package/dist/cjs/ui/FloatingInsertButton/index.js +5 -14
  9. package/dist/cjs/ui/TableFloatingColumnControls/index.js +1 -2
  10. package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js +16 -85
  11. package/dist/cjs/ui/TableFloatingControls/index.js +1 -1
  12. package/dist/cjs/ui/event-handlers.js +5 -10
  13. package/dist/cjs/ui/toolbar.js +27 -60
  14. package/dist/es2019/nodeviews/TableComponent.js +3 -4
  15. package/dist/es2019/nodeviews/TableComponentWithSharedState.js +1 -1
  16. package/dist/es2019/nodeviews/TableContainer.js +1 -5
  17. package/dist/es2019/nodeviews/table.js +0 -2
  18. package/dist/es2019/pm-plugins/main.js +1 -2
  19. package/dist/es2019/ui/ContentComponent.js +14 -30
  20. package/dist/es2019/ui/FloatingInsertButton/index.js +5 -12
  21. package/dist/es2019/ui/TableFloatingColumnControls/index.js +1 -2
  22. package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js +1 -69
  23. package/dist/es2019/ui/TableFloatingControls/index.js +1 -1
  24. package/dist/es2019/ui/event-handlers.js +5 -10
  25. package/dist/es2019/ui/toolbar.js +13 -40
  26. package/dist/esm/nodeviews/TableComponent.js +3 -4
  27. package/dist/esm/nodeviews/TableComponentWithSharedState.js +1 -1
  28. package/dist/esm/nodeviews/TableContainer.js +1 -4
  29. package/dist/esm/nodeviews/table.js +0 -2
  30. package/dist/esm/pm-plugins/main.js +1 -2
  31. package/dist/esm/ui/ContentComponent.js +14 -30
  32. package/dist/esm/ui/FloatingInsertButton/index.js +5 -12
  33. package/dist/esm/ui/TableFloatingColumnControls/index.js +1 -2
  34. package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js +16 -85
  35. package/dist/esm/ui/TableFloatingControls/index.js +1 -1
  36. package/dist/esm/ui/event-handlers.js +5 -10
  37. package/dist/esm/ui/toolbar.js +27 -60
  38. package/dist/types/nodeviews/table-node-views.d.ts +0 -1
  39. package/dist/types/nodeviews/types.d.ts +0 -1
  40. package/dist/types/ui/FloatingDragMenu/index.d.ts +4 -3
  41. package/dist/types/ui/FloatingInsertButton/index.d.ts +0 -1
  42. package/dist/types/ui/TableFloatingColumnControls/index.d.ts +1 -2
  43. package/dist/types/ui/TableFloatingControls/NumberColumn/index.d.ts +0 -3
  44. package/dist/types/ui/TableFloatingControls/index.d.ts +1 -1
  45. package/dist/types-ts4.5/nodeviews/table-node-views.d.ts +0 -1
  46. package/dist/types-ts4.5/nodeviews/types.d.ts +0 -1
  47. package/dist/types-ts4.5/ui/FloatingDragMenu/index.d.ts +4 -3
  48. package/dist/types-ts4.5/ui/FloatingInsertButton/index.d.ts +0 -1
  49. package/dist/types-ts4.5/ui/TableFloatingColumnControls/index.d.ts +1 -2
  50. package/dist/types-ts4.5/ui/TableFloatingControls/NumberColumn/index.d.ts +0 -3
  51. package/dist/types-ts4.5/ui/TableFloatingControls/index.d.ts +1 -1
  52. package/package.json +6 -6
@@ -458,9 +458,9 @@ class TableComponent extends React.Component {
458
458
  allowColumnResizing,
459
459
  allowTableResizing,
460
460
  eventDispatcher,
461
- isDragAndDropEnabled,
462
461
  view,
463
- isInDanger
462
+ isInDanger,
463
+ isDragAndDropEnabled
464
464
  } = this.props;
465
465
  const browser = getBrowserInfo();
466
466
  const isIE11 = browser.ie_version === 11;
@@ -846,8 +846,7 @@ class TableComponent extends React.Component {
846
846
  },
847
847
  tableWrapperHeight: this.state.tableWrapperHeight,
848
848
  api: pluginInjectionApi,
849
- isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
850
- isDragAndDropEnabled: isDragAndDropEnabled
849
+ isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
851
850
  }) : null;
852
851
 
853
852
  /**
@@ -96,9 +96,9 @@ export const TableComponentWithSharedState = ({
96
96
  isMediaFullscreen: isFullscreen,
97
97
  options: options,
98
98
  allowControls: allowControls,
99
+ isDragAndDropEnabled: !isLivePageViewMode,
99
100
  isHeaderRowEnabled: isHeaderRowEnabled !== null && isHeaderRowEnabled !== void 0 ? isHeaderRowEnabled : false,
100
101
  isHeaderColumnEnabled: isHeaderColumnEnabled !== null && isHeaderColumnEnabled !== void 0 ? isHeaderColumnEnabled : false,
101
- isDragAndDropEnabled: (options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled) && !isLivePageViewMode,
102
102
  isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
103
103
  allowTableAlignment: allowTableAlignment,
104
104
  allowTableResizing: allowTableResizing,
@@ -9,7 +9,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
9
9
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
10
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
11
11
  import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
12
- import { getPluginState } from '../pm-plugins/plugin-factory';
13
12
  import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR, RESIZE_HANDLE_SPACING } from '../pm-plugins/table-resizing/utils/consts';
14
13
  import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
15
14
  import { ALIGN_CENTER, ALIGN_START } from '../pm-plugins/utils/alignment';
@@ -396,9 +395,6 @@ export const TableContainer = ({
396
395
  isChromelessEditor: isChromelessEditor
397
396
  }, children);
398
397
  }
399
- const {
400
- isDragAndDropEnabled
401
- } = getPluginState(editorView.state);
402
398
  const isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
403
399
  const resizableTableWidth = isFullPageAppearance ? getTableResizerContainerForFullPageWidthInCSS(node, isTableScalingEnabled) : `calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))`;
404
400
  return /*#__PURE__*/React.createElement(InnerContainer, {
@@ -406,7 +402,7 @@ export const TableContainer = ({
406
402
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
407
403
  ,
408
404
  className: classNames(className, {
409
- 'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested && !(isChromelessEditor && isDragAndDropEnabled)
405
+ 'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested && !isChromelessEditor
410
406
  }),
411
407
  style:
412
408
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -298,7 +298,6 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
298
298
  var _pluginInjectionApi$t;
299
299
  const {
300
300
  pluginConfig,
301
- isDragAndDropEnabled,
302
301
  isTableScalingEnabled // same as options.isTableScalingEnabled
303
302
  } = getPluginState(view.state);
304
303
 
@@ -325,7 +324,6 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
325
324
  options: {
326
325
  isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
327
326
  wasFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled,
328
- isDragAndDropEnabled,
329
327
  isTableScalingEnabled,
330
328
  // same as options.isTableScalingEnabled
331
329
  isCommentEditor,
@@ -72,8 +72,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
72
72
  }),
73
73
  tableRow: tableRowView({
74
74
  eventDispatcher,
75
- pluginInjectionApi,
76
- isDragAndDropEnabled: true
75
+ pluginInjectionApi
77
76
  }),
78
77
  tableCell: tableCellView({
79
78
  eventDispatcher,
@@ -8,7 +8,6 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
8
8
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
9
9
  import FloatingContextualButton from './FloatingContextualButton';
10
10
  import FloatingContextualMenu from './FloatingContextualMenu';
11
- import FloatingDeleteButton from './FloatingDeleteButton';
12
11
  import FloatingDragMenu from './FloatingDragMenu';
13
12
  // Ignored via go/ees005
14
13
  // eslint-disable-next-line import/no-named-as-default
@@ -18,7 +17,7 @@ import { GlobalStylesWrapper } from './global-styles';
18
17
  import { SizeSelector } from './SizeSelector';
19
18
  import { FullWidthDisplay } from './TableFullWidthLabel';
20
19
  const selector = states => {
21
- var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$tableState10, _states$tableState11, _states$tableState12, _states$tableState13, _states$tableState14, _states$tableState15, _states$tableState16, _states$tableState17, _states$tableState18, _states$tableState19, _states$tableState20, _states$tableState21, _states$tableState22, _states$tableState23, _states$tableState24;
20
+ var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$tableState10, _states$tableState11, _states$tableState12, _states$tableState13, _states$tableState14, _states$tableState15, _states$tableState16, _states$tableState17, _states$tableState18, _states$tableState19, _states$tableState20, _states$tableState21, _states$tableState22, _states$tableState23;
22
21
  return {
23
22
  resizingTableLocalId: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.resizingTableLocalId,
24
23
  resizingTableRef: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.resizingTableRef,
@@ -34,19 +33,18 @@ const selector = states => {
34
33
  insertRowButtonIndex: (_states$tableState10 = states.tableState) === null || _states$tableState10 === void 0 ? void 0 : _states$tableState10.insertRowButtonIndex,
35
34
  isHeaderColumnEnabled: (_states$tableState11 = states.tableState) === null || _states$tableState11 === void 0 ? void 0 : _states$tableState11.isHeaderColumnEnabled,
36
35
  isHeaderRowEnabled: (_states$tableState12 = states.tableState) === null || _states$tableState12 === void 0 ? void 0 : _states$tableState12.isHeaderRowEnabled,
37
- isDragAndDropEnabled: (_states$tableState13 = states.tableState) === null || _states$tableState13 === void 0 ? void 0 : _states$tableState13.isDragAndDropEnabled,
38
- tableWrapperTarget: (_states$tableState14 = states.tableState) === null || _states$tableState14 === void 0 ? void 0 : _states$tableState14.tableWrapperTarget,
39
- isCellMenuOpenByKeyboard: (_states$tableState15 = states.tableState) === null || _states$tableState15 === void 0 ? void 0 : _states$tableState15.isCellMenuOpenByKeyboard,
40
- stickyHeader: (_states$tableState16 = states.tableState) === null || _states$tableState16 === void 0 ? void 0 : _states$tableState16.stickyHeader,
41
- dragMenuDirection: (_states$tableState17 = states.tableState) === null || _states$tableState17 === void 0 ? void 0 : _states$tableState17.dragMenuDirection,
42
- dragMenuIndex: (_states$tableState18 = states.tableState) === null || _states$tableState18 === void 0 ? void 0 : _states$tableState18.dragMenuIndex,
43
- isDragMenuOpen: (_states$tableState19 = states.tableState) === null || _states$tableState19 === void 0 ? void 0 : _states$tableState19.isDragMenuOpen,
44
- isSizeSelectorOpen: (_states$tableState20 = states.tableState) === null || _states$tableState20 === void 0 ? void 0 : _states$tableState20.isSizeSelectorOpen,
45
- sizeSelectorTargetRef: (_states$tableState21 = states.tableState) === null || _states$tableState21 === void 0 ? void 0 : _states$tableState21.sizeSelectorTargetRef,
36
+ tableWrapperTarget: (_states$tableState13 = states.tableState) === null || _states$tableState13 === void 0 ? void 0 : _states$tableState13.tableWrapperTarget,
37
+ isCellMenuOpenByKeyboard: (_states$tableState14 = states.tableState) === null || _states$tableState14 === void 0 ? void 0 : _states$tableState14.isCellMenuOpenByKeyboard,
38
+ stickyHeader: (_states$tableState15 = states.tableState) === null || _states$tableState15 === void 0 ? void 0 : _states$tableState15.stickyHeader,
39
+ dragMenuDirection: (_states$tableState16 = states.tableState) === null || _states$tableState16 === void 0 ? void 0 : _states$tableState16.dragMenuDirection,
40
+ dragMenuIndex: (_states$tableState17 = states.tableState) === null || _states$tableState17 === void 0 ? void 0 : _states$tableState17.dragMenuIndex,
41
+ isDragMenuOpen: (_states$tableState18 = states.tableState) === null || _states$tableState18 === void 0 ? void 0 : _states$tableState18.isDragMenuOpen,
42
+ isSizeSelectorOpen: (_states$tableState19 = states.tableState) === null || _states$tableState19 === void 0 ? void 0 : _states$tableState19.isSizeSelectorOpen,
43
+ sizeSelectorTargetRef: (_states$tableState20 = states.tableState) === null || _states$tableState20 === void 0 ? void 0 : _states$tableState20.sizeSelectorTargetRef,
46
44
  // IMPORTANT: hovered states are used by FloatingDragMenu component to render popup in the correct location
47
- hoveredRows: (_states$tableState22 = states.tableState) === null || _states$tableState22 === void 0 ? void 0 : _states$tableState22.hoveredRows,
48
- hoveredColumns: (_states$tableState23 = states.tableState) === null || _states$tableState23 === void 0 ? void 0 : _states$tableState23.hoveredColumns,
49
- hoveredCell: (_states$tableState24 = states.tableState) === null || _states$tableState24 === void 0 ? void 0 : _states$tableState24.hoveredCell
45
+ hoveredRows: (_states$tableState21 = states.tableState) === null || _states$tableState21 === void 0 ? void 0 : _states$tableState21.hoveredRows,
46
+ hoveredColumns: (_states$tableState22 = states.tableState) === null || _states$tableState22 === void 0 ? void 0 : _states$tableState22.hoveredColumns,
47
+ hoveredCell: (_states$tableState23 = states.tableState) === null || _states$tableState23 === void 0 ? void 0 : _states$tableState23.hoveredCell
50
48
  };
51
49
  };
52
50
  const ContentComponentInternal = ({
@@ -79,7 +77,6 @@ const ContentComponentInternal = ({
79
77
  insertRowButtonIndex,
80
78
  isHeaderColumnEnabled,
81
79
  isHeaderRowEnabled,
82
- isDragAndDropEnabled,
83
80
  tableWrapperTarget,
84
81
  isCellMenuOpenByKeyboard,
85
82
  stickyHeader,
@@ -106,8 +103,7 @@ const ContentComponentInternal = ({
106
103
  isContextualMenuOpen: isContextualMenuOpen,
107
104
  stickyHeader: stickyHeader,
108
105
  tableWrapper: tableWrapperTarget,
109
- isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
110
- isDragAndDropEnabled: isDragAndDropEnabled
106
+ isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
111
107
  }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
112
108
  tableNode: tableNode,
113
109
  tableRef: tableRef,
@@ -115,7 +111,6 @@ const ContentComponentInternal = ({
115
111
  insertRowButtonIndex: insertRowButtonIndex,
116
112
  isHeaderColumnEnabled: isHeaderColumnEnabled,
117
113
  isHeaderRowEnabled: isHeaderRowEnabled,
118
- isDragAndDropEnabled: isDragAndDropEnabled,
119
114
  isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
120
115
  editorView: editorView,
121
116
  mountPoint: popupsMountPoint,
@@ -143,7 +138,7 @@ const ContentComponentInternal = ({
143
138
  isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
144
139
  api: api,
145
140
  isDragMenuOpen: isDragMenuOpen
146
- }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
141
+ }), /*#__PURE__*/React.createElement(FloatingDragMenu, {
147
142
  editorView: editorView,
148
143
  mountPoint: popupsMountPoint,
149
144
  boundariesElement: popupsBoundariesElement,
@@ -163,17 +158,6 @@ const ContentComponentInternal = ({
163
158
  api: api,
164
159
  isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
165
160
  tableWrapper: tableWrapperTarget
166
- }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
167
- editorView: editorView,
168
- selection: editorView.state.selection,
169
- tableRef: tableRef,
170
- mountPoint: popupsMountPoint,
171
- boundariesElement: popupsBoundariesElement,
172
- scrollableElement: popupsScrollableElement,
173
- stickyHeaders: stickyHeader,
174
- isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
175
- editorAnalyticsAPI: editorAnalyticsAPI,
176
- api: api
177
161
  }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
178
162
  target: resizingTableRef,
179
163
  content: editorExperiment('single_column_layouts', true) ? /*#__PURE__*/React.createElement(ResizerBreakoutModeLabel, {
@@ -15,7 +15,7 @@ import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../pm-plug
15
15
  import { checkIfNumberColumnEnabled } from '../../pm-plugins/utils/nodes';
16
16
  import { TableCssClassName as ClassName } from '../../types';
17
17
  import getPopupOptions from './getPopupOptions';
18
- import InsertButton, { DragAndDropInsertButton } from './InsertButton';
18
+ import { DragAndDropInsertButton } from './InsertButton';
19
19
  // Ignored via go/ees005
20
20
  // eslint-disable-next-line @repo/internal/react/no-class-components, @typescript-eslint/no-explicit-any
21
21
  export class FloatingInsertButton extends React.Component {
@@ -35,13 +35,11 @@ export class FloatingInsertButton extends React.Component {
35
35
  boundariesElement,
36
36
  isHeaderColumnEnabled,
37
37
  isHeaderRowEnabled,
38
- isDragAndDropEnabled,
39
38
  dispatchAnalyticsEvent,
40
39
  isChromelessEditor
41
40
  } = this.props;
42
-
43
41
  // TODO: ED-26961 - temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
44
- if (isDragAndDropEnabled && (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0)) {
42
+ if (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0) {
45
43
  return null;
46
44
  }
47
45
  const type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
@@ -117,7 +115,7 @@ export class FloatingInsertButton extends React.Component {
117
115
  // Fixed the 'add column button' not visible issue when sticky header is enabled
118
116
  // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
119
117
  // Only when inserting a column, otherwise set to undefined
120
- // Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
118
+ // Need to set z-index in the Popup, set z-index in the <DragAndDropInsertButton /> will not work
121
119
  const zIndex = expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') || type === 'column' ? akEditorTableCellOnStickyHeaderZIndex : undefined;
122
120
  return /*#__PURE__*/React.createElement(Popup, _extends({
123
121
  target: targetCellRef,
@@ -131,19 +129,14 @@ export class FloatingInsertButton extends React.Component {
131
129
  allowOutOfBounds: true
132
130
  // Ignored via go/ees005
133
131
  // eslint-disable-next-line react/jsx-props-no-spreading
134
- }, getPopupOptions(type, index, hasNumberedColumns, !!isDragAndDropEnabled, tableContainerWrapper), {
132
+ }, getPopupOptions(type, index, hasNumberedColumns, true, tableContainerWrapper), {
135
133
  zIndex: zIndex
136
- }), isDragAndDropEnabled ? /*#__PURE__*/React.createElement(DragAndDropInsertButton, {
134
+ }), /*#__PURE__*/React.createElement(DragAndDropInsertButton, {
137
135
  type: type,
138
136
  tableRef: tableRef,
139
137
  onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
140
138
  hasStickyHeaders: this.props.hasStickyHeaders || false,
141
139
  isChromelessEditor: isChromelessEditor
142
- }) : /*#__PURE__*/React.createElement(InsertButton, {
143
- type: type,
144
- tableRef: tableRef,
145
- onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
146
- hasStickyHeaders: this.props.hasStickyHeaders || false
147
140
  }));
148
141
  }
149
142
  getCellPosition(type, tableNode) {
@@ -25,8 +25,7 @@ const TableFloatingColumnControls = ({
25
25
  getScrollOffset,
26
26
  tableWrapperHeight,
27
27
  api,
28
- isChromelessEditor,
29
- isDragAndDropEnabled
28
+ isChromelessEditor
30
29
  }) => {
31
30
  const [isDragging, setIsDragging] = useState(false);
32
31
  const containerRef = useRef(null);
@@ -2,10 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import React, { Component } from 'react';
3
3
  import classnames from 'classnames';
4
4
  import { isSSR } from '@atlaskit/editor-common/core-utils';
5
- import { Selection } from '@atlaskit/editor-prosemirror/state';
6
5
  import { isRowSelected } from '@atlaskit/editor-tables/utils';
7
6
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
8
- import { clearHoverSelection } from '../../../pm-plugins/commands';
9
7
  import { getRowHeights } from '../../../pm-plugins/utils/row-controls';
10
8
  import { TableCssClassName as ClassName } from '../../../types';
11
9
  import { tableBorderColor } from '../../consts';
@@ -14,47 +12,6 @@ import { tableBorderColor } from '../../consts';
14
12
  export default class NumberColumn extends Component {
15
13
  constructor(...args) {
16
14
  super(...args);
17
- _defineProperty(this, "hoverRows", index => {
18
- return this.props.tableActive ? this.props.hoverRows([index]) : null;
19
- });
20
- _defineProperty(this, "selectRow", (index, event) => {
21
- const {
22
- tableActive,
23
- editorView,
24
- selectRow
25
- } = this.props;
26
- // If selection is outside the table then first reset the selection inside table
27
- if (!tableActive && event.target && event.target instanceof Node) {
28
- const {
29
- doc,
30
- selection,
31
- tr
32
- } = editorView.state;
33
- const pos = editorView.posAtDOM(event.target, 1);
34
- const $pos = doc.resolve(pos);
35
- const newPos = selection.head > pos ?
36
- // Selection is after table
37
- // nodeSize - 3 will move the position inside last table cell
38
- Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1) :
39
- // Selection is before table
40
- Selection.near($pos);
41
- editorView.dispatch(tr.setSelection(newPos));
42
- }
43
- selectRow(index, event.shiftKey);
44
- });
45
- _defineProperty(this, "clearHoverSelection", () => {
46
- const {
47
- tableActive,
48
- editorView
49
- } = this.props;
50
- if (tableActive) {
51
- const {
52
- state,
53
- dispatch
54
- } = editorView;
55
- clearHoverSelection()(state, dispatch);
56
- }
57
- });
58
15
  _defineProperty(this, "getCellStyles", (index, rowHeight) => {
59
16
  const {
60
17
  stickyTop,
@@ -125,7 +82,7 @@ export default class NumberColumn extends Component {
125
82
  visibility: 'visible'
126
83
  },
127
84
  contentEditable: false
128
- }, rowHeights.map((rowHeight, index) => isDragAndDropEnabled ? /*#__PURE__*/React.createElement("div", {
85
+ }, rowHeights.map((rowHeight, index) => /*#__PURE__*/React.createElement("div", {
129
86
  // Ignored via go/ees005
130
87
  // eslint-disable-next-line react/no-array-index-key
131
88
  key: `wrapper-${index}`
@@ -138,31 +95,6 @@ export default class NumberColumn extends Component {
138
95
  style: this.getCellStyles(index, rowHeight),
139
96
  onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? () => updateCellHoverLocation(index) : undefined,
140
97
  onMouseOver: () => updateCellHoverLocation(index)
141
- }, hasHeaderRow ? index > 0 ? index : null : index + 1) : /*#__PURE__*/React.createElement("div", {
142
- // Ignored via go/ees005
143
- role: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? 'button' : undefined
144
- // eslint-disable-next-line react/no-array-index-key
145
- ,
146
- key: `wrapper-${index}`
147
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
148
- ,
149
- className: this.getClassNames(index),
150
- "data-index": index
151
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
152
- ,
153
- style: this.getCellStyles(index, rowHeight),
154
- onClick: event => this.selectRow(index, event),
155
- onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? () => this.hoverRows(index) : undefined,
156
- onMouseOver: () => this.hoverRows(index),
157
- tabIndex: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? 0 : undefined,
158
- onKeyDown: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? event => {
159
- if (event.key === 'Enter' || event.key === ' ') {
160
- event.preventDefault();
161
- this.selectRow(index, event);
162
- }
163
- } : undefined,
164
- onMouseOut: this.clearHoverSelection,
165
- onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.clearHoverSelection : undefined
166
98
  }, hasHeaderRow ? index > 0 ? index : null : index + 1)));
167
99
  }
168
100
  }
@@ -34,11 +34,11 @@ export const TableFloatingControls = ({
34
34
  isNumberColumnEnabled,
35
35
  isHeaderRowEnabled,
36
36
  isHeaderColumnEnabled,
37
+ isDragAndDropEnabled,
37
38
  tableActive,
38
39
  hasHeaderRow,
39
40
  hoveredRows,
40
41
  stickyHeader,
41
- isDragAndDropEnabled,
42
42
  hoveredCell,
43
43
  isTableHovered,
44
44
  tableWrapperWidth,
@@ -258,18 +258,13 @@ export const handleMouseLeave = (view, event) => {
258
258
  const {
259
259
  insertColumnButtonIndex,
260
260
  insertRowButtonIndex,
261
- isDragAndDropEnabled,
262
261
  isTableHovered
263
262
  } = getPluginState(state);
264
263
  if (isTableHovered) {
265
- if (isDragAndDropEnabled) {
266
- const {
267
- isDragMenuOpen = false
268
- } = getDragDropPluginState(state);
269
- !isDragMenuOpen && setTableHovered(false)(state, dispatch);
270
- } else {
271
- setTableHovered(false)(state, dispatch);
272
- }
264
+ const {
265
+ isDragMenuOpen = false
266
+ } = getDragDropPluginState(state);
267
+ !isDragMenuOpen && setTableHovered(false)(state, dispatch);
273
268
  return true;
274
269
  }
275
270
 
@@ -499,7 +494,7 @@ const trackCellLocation = (view, mouseEvent) => {
499
494
  hoverCell(htmlRowIndex, colIndex)(view.state, view.dispatch);
500
495
  };
501
496
  export const withCellTracking = eventHandler => (view, mouseEvent) => {
502
- if (getPluginState(view.state).isDragAndDropEnabled && getDragDropPluginState(view.state) && !getDragDropPluginState(view.state).isDragging) {
497
+ if (getDragDropPluginState(view.state) && !getDragDropPluginState(view.state).isDragging) {
503
498
  trackCellLocation(view, mouseEvent);
504
499
  }
505
500
  return eventHandler(view, mouseEvent);
@@ -99,28 +99,16 @@ export const getToolbarMenuConfig = (config, state, {
99
99
  }
100
100
  }];
101
101
  const tableOptionsDropdownWidth = isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined;
102
- if (state.isDragAndDropEnabled) {
103
- return {
104
- id: 'editor.table.tableOptions',
105
- type: 'dropdown',
106
- testId: 'table_options',
107
- iconBefore: CustomizeIcon,
108
- title: formatMessage(messages.tableOptions),
109
- hidden: options.every(option => option.hidden),
110
- options,
111
- dropdownWidth: tableOptionsDropdownWidth
112
- };
113
- } else {
114
- return {
115
- id: 'editor.table.tableOptions',
116
- type: 'dropdown',
117
- testId: 'table_options',
118
- title: formatMessage(messages.tableOptions),
119
- hidden: options.every(option => option.hidden),
120
- options,
121
- dropdownWidth: tableOptionsDropdownWidth
122
- };
123
- }
102
+ return {
103
+ id: 'editor.table.tableOptions',
104
+ type: 'dropdown',
105
+ testId: 'table_options',
106
+ iconBefore: CustomizeIcon,
107
+ title: formatMessage(messages.tableOptions),
108
+ hidden: options.every(option => option.hidden),
109
+ options,
110
+ dropdownWidth: tableOptionsDropdownWidth
111
+ };
124
112
  };
125
113
 
126
114
  // Added these options for mobile. Mobile bridge translates this menu and
@@ -448,8 +436,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
448
436
  const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
449
437
  const alignmentMenu = config.allowTableAlignment && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, areAnyNewToolbarFlagsEnabled, options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
450
438
  const isLimitedModeEnabled = (_api$limitedMode$shar = api === null || api === void 0 ? void 0 : (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 ? void 0 : (_api$limitedMode$shar2 = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode$shar2 === void 0 ? void 0 : _api$limitedMode$shar2.enabled) !== null && _api$limitedMode$shar !== void 0 ? _api$limitedMode$shar : false;
451
- const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor, isLimitedModeEnabled);
452
- const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor, isLimitedModeEnabled) : [];
439
+ const columnSettingsItems = getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor, isLimitedModeEnabled);
453
440
  const colorPicker = !areAnyNewToolbarFlagsEnabled ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView) : [];
454
441
  const fitToContentButton = isContentModeSupported({
455
442
  allowColumnResizing: !!pluginState.pluginConfig.allowColumnResizing,
@@ -539,7 +526,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
539
526
  },
540
527
  zIndex: akEditorFloatingPanelZIndex + 1,
541
528
  // Place the context menu slightly above the others
542
- items: [menu, ...(!areAnyNewToolbarFlagsEnabled ? [separator(menu.hidden)] : []), ...alignmentMenu, ...(!areAnyNewToolbarFlagsEnabled ? [separator(alignmentMenu.length === 0)] : []), ...cellItems, ...columnSettingsItems, ...fitToContentButton, ...colorPicker, ...(!areAnyNewToolbarFlagsEnabled ? [{
529
+ items: [menu, ...(!areAnyNewToolbarFlagsEnabled ? [separator(menu.hidden)] : []), ...alignmentMenu, ...(!areAnyNewToolbarFlagsEnabled ? [separator(alignmentMenu.length === 0)] : []), ...columnSettingsItems, ...fitToContentButton, ...colorPicker, ...(!areAnyNewToolbarFlagsEnabled ? [{
543
530
  type: 'extensions-placeholder',
544
531
  separator: 'end'
545
532
  }, copyButton, {
@@ -614,20 +601,6 @@ const separator = hidden => {
614
601
  hidden: hidden
615
602
  };
616
603
  };
617
- const getCellItems = (state, view, {
618
- formatMessage
619
- }, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, isCommentEditor = false, isLimitedModeEnabled = false) => {
620
- const initialSelectionRect = getClosestSelectionRect(state);
621
- if (initialSelectionRect) {
622
- const cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
623
- formatMessage
624
- }, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isLimitedModeEnabled);
625
- // Ignored via go/ees005
626
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
627
- return [cellOptions, separator(cellOptions.hidden)];
628
- }
629
- return [];
630
- };
631
604
  const getDistributeConfig = (getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, isCommentEditor = false) => (state, dispatch, editorView) => {
632
605
  const selectionOrTableRect = getClosestSelectionOrTableRect(state);
633
606
  if (!editorView || !selectionOrTableRect) {
@@ -668,7 +641,7 @@ const getColumnSettingItems = (editorState, editorView, {
668
641
  wouldChange = (_newResizeStateWithAn3 = (_newResizeStateWithAn4 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn4 === void 0 ? void 0 : _newResizeStateWithAn4.changed) !== null && _newResizeStateWithAn3 !== void 0 ? _newResizeStateWithAn3 : false;
669
642
  }
670
643
  }
671
- if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
644
+ if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns) {
672
645
  items.push({
673
646
  id: 'editor.table.distributeColumns',
674
647
  type: 'button',
@@ -489,9 +489,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
489
489
  allowColumnResizing = _this$props7.allowColumnResizing,
490
490
  allowTableResizing = _this$props7.allowTableResizing,
491
491
  eventDispatcher = _this$props7.eventDispatcher,
492
- isDragAndDropEnabled = _this$props7.isDragAndDropEnabled,
493
492
  view = _this$props7.view,
494
- isInDanger = _this$props7.isInDanger;
493
+ isInDanger = _this$props7.isInDanger,
494
+ isDragAndDropEnabled = _this$props7.isDragAndDropEnabled;
495
495
  var browser = getBrowserInfo();
496
496
  var isIE11 = browser.ie_version === 11;
497
497
  if (this.wrapper && !isIE11) {
@@ -883,8 +883,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
883
883
  },
884
884
  tableWrapperHeight: this.state.tableWrapperHeight,
885
885
  api: pluginInjectionApi,
886
- isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
887
- isDragAndDropEnabled: isDragAndDropEnabled
886
+ isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
888
887
  }) : null;
889
888
 
890
889
  /**
@@ -94,9 +94,9 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
94
94
  isMediaFullscreen: isFullscreen,
95
95
  options: options,
96
96
  allowControls: allowControls,
97
+ isDragAndDropEnabled: !isLivePageViewMode,
97
98
  isHeaderRowEnabled: isHeaderRowEnabled !== null && isHeaderRowEnabled !== void 0 ? isHeaderRowEnabled : false,
98
99
  isHeaderColumnEnabled: isHeaderColumnEnabled !== null && isHeaderColumnEnabled !== void 0 ? isHeaderColumnEnabled : false,
99
- isDragAndDropEnabled: (options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled) && !isLivePageViewMode,
100
100
  isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
101
101
  allowTableAlignment: allowTableAlignment,
102
102
  allowTableResizing: allowTableResizing,
@@ -10,7 +10,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
10
10
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
11
11
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
12
12
  import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
13
- import { getPluginState } from '../pm-plugins/plugin-factory';
14
13
  import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR, RESIZE_HANDLE_SPACING } from '../pm-plugins/table-resizing/utils/consts';
15
14
  import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
16
15
  import { ALIGN_CENTER, ALIGN_START } from '../pm-plugins/utils/alignment';
@@ -391,8 +390,6 @@ export var TableContainer = function TableContainer(_ref5) {
391
390
  isChromelessEditor: isChromelessEditor
392
391
  }, children);
393
392
  }
394
- var _getPluginState = getPluginState(editorView.state),
395
- isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
396
393
  var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
397
394
  var resizableTableWidth = isFullPageAppearance ? getTableResizerContainerForFullPageWidthInCSS(node, isTableScalingEnabled) : "calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))";
398
395
  return /*#__PURE__*/React.createElement(InnerContainer, {
@@ -400,7 +397,7 @@ export var TableContainer = function TableContainer(_ref5) {
400
397
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
401
398
  ,
402
399
  className: classNames(className, {
403
- 'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested && !(isChromelessEditor && isDragAndDropEnabled)
400
+ 'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested && !isChromelessEditor
404
401
  }),
405
402
  style:
406
403
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -331,7 +331,6 @@ export var createTableView = function createTableView(node, view, getPos, portal
331
331
  var _pluginInjectionApi$t;
332
332
  var _getPluginState2 = getPluginState(view.state),
333
333
  pluginConfig = _getPluginState2.pluginConfig,
334
- isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled,
335
334
  isTableScalingEnabled = _getPluginState2.isTableScalingEnabled;
336
335
 
337
336
  // Use shared state for isFullWidthModeEnabled and wasFullWidthModeEnabled for most up-to-date values
@@ -356,7 +355,6 @@ export var createTableView = function createTableView(node, view, getPos, portal
356
355
  options: {
357
356
  isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
358
357
  wasFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled,
359
- isDragAndDropEnabled: isDragAndDropEnabled,
360
358
  isTableScalingEnabled: isTableScalingEnabled,
361
359
  // same as options.isTableScalingEnabled
362
360
  isCommentEditor: isCommentEditor,
@@ -74,8 +74,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
74
74
  }),
75
75
  tableRow: tableRowView({
76
76
  eventDispatcher: eventDispatcher,
77
- pluginInjectionApi: pluginInjectionApi,
78
- isDragAndDropEnabled: true
77
+ pluginInjectionApi: pluginInjectionApi
79
78
  }),
80
79
  tableCell: tableCellView({
81
80
  eventDispatcher: eventDispatcher,