@atlaskit/editor-plugin-table 2.6.1 → 2.6.2

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 (14) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/plugins/table/nodeviews/TableResizer.js +32 -22
  3. package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/scale-table.js +1 -0
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/plugins/table/nodeviews/TableResizer.js +28 -18
  6. package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/scale-table.js +1 -0
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/plugins/table/nodeviews/TableResizer.js +27 -17
  9. package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/scale-table.js +1 -0
  10. package/dist/esm/version.json +1 -1
  11. package/package.json +2 -2
  12. package/src/__tests__/unit/nodeviews/TableContainer.tsx +14 -14
  13. package/src/plugins/table/nodeviews/TableResizer.tsx +34 -21
  14. package/src/plugins/table/pm-plugins/table-resizing/utils/scale-table.ts +1 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 2.6.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`bc9f806f84a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc9f806f84a) - Toggle handle visibility of resizer if current table is selected
8
+ - Updated dependencies
9
+
3
10
  ## 2.6.1
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/plugins/table/nodeviews/TableResizer.js CHANGED
@@ -14,10 +14,11 @@ var _analytics = require("@atlaskit/editor-common/analytics");
14
14
  var _guideline = require("@atlaskit/editor-common/guideline");
15
15
  var _resizer = require("@atlaskit/editor-common/resizer");
16
16
  var _editorTables = require("@atlaskit/editor-tables");
17
- var _utils = require("../pm-plugins/table-resizing/utils");
17
+ var _utils = require("@atlaskit/editor-tables/utils");
18
+ var _utils2 = require("../pm-plugins/table-resizing/utils");
18
19
  var _tableWidth = require("../pm-plugins/table-width");
19
20
  var _consts = require("../ui/consts");
20
- var _utils2 = require("../utils");
21
+ var _utils3 = require("../utils");
21
22
  var _guidelines = require("../utils/guidelines");
22
23
  var _snapping = require("../utils/snapping");
23
24
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -39,25 +40,13 @@ var generateResizedPayload = function generateResizedPayload(props) {
39
40
  newWidth: props.resizedNode.attrs.width,
40
41
  prevWidth: (_props$originalNode$a = props.originalNode.attrs.width) !== null && _props$originalNode$a !== void 0 ? _props$originalNode$a : null,
41
42
  nodeSize: props.resizedNode.nodeSize,
42
- totalTableWidth: (0, _utils.hasTableBeenResized)(props.resizedNode) ? (0, _utils2.getTableWidth)(props.resizedNode) : null,
43
+ totalTableWidth: (0, _utils2.hasTableBeenResized)(props.resizedNode) ? (0, _utils3.getTableWidth)(props.resizedNode) : null,
43
44
  totalRowCount: tableMap.height,
44
45
  totalColumnCount: tableMap.width
45
46
  }
46
47
  };
47
48
  };
48
- var TableResizer = function TableResizer(_ref) {
49
- var children = _ref.children,
50
- width = _ref.width,
51
- maxWidth = _ref.maxWidth,
52
- updateWidth = _ref.updateWidth,
53
- editorView = _ref.editorView,
54
- getPos = _ref.getPos,
55
- node = _ref.node,
56
- tableRef = _ref.tableRef,
57
- displayGuideline = _ref.displayGuideline,
58
- attachAnalyticsEvent = _ref.attachAnalyticsEvent;
59
- var currentColumnCount = (0, _utils.getColgroupChildrenLength)(node);
60
- var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * _utils.COLUMN_MIN_WIDTH : 3 * _utils.COLUMN_MIN_WIDTH;
49
+ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
61
50
  var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
62
51
  var handleHeightSize = 'small';
63
52
  /*
@@ -73,11 +62,32 @@ var TableResizer = function TableResizer(_ref) {
73
62
  } else if (tableHeight && tableHeight >= 96) {
74
63
  handleHeightSize = 'large';
75
64
  }
65
+ return handleHeightSize;
66
+ };
67
+ var getResizerMinWidth = function getResizerMinWidth(node) {
68
+ var currentColumnCount = (0, _utils2.getColgroupChildrenLength)(node);
69
+ var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * _utils2.COLUMN_MIN_WIDTH : 3 * _utils2.COLUMN_MIN_WIDTH;
70
+ return minColumnWidth;
71
+ };
72
+ var TableResizer = function TableResizer(_ref) {
73
+ var _findTable, _editorView$state;
74
+ var children = _ref.children,
75
+ width = _ref.width,
76
+ maxWidth = _ref.maxWidth,
77
+ updateWidth = _ref.updateWidth,
78
+ editorView = _ref.editorView,
79
+ getPos = _ref.getPos,
80
+ node = _ref.node,
81
+ tableRef = _ref.tableRef,
82
+ displayGuideline = _ref.displayGuideline,
83
+ attachAnalyticsEvent = _ref.attachAnalyticsEvent;
76
84
  var currentGap = (0, _react.useRef)(0);
77
85
  var _useState = (0, _react.useState)(false),
78
86
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
79
87
  snappingEnabled = _useState2[0],
80
88
  setSnappingEnabled = _useState2[1];
89
+ var resizerMinWidth = getResizerMinWidth(node);
90
+ var handleHeightSize = getResizerHandleHeight(tableRef);
81
91
  var updateActiveGuidelines = (0, _react.useCallback)(function (_ref2) {
82
92
  var gap = _ref2.gap,
83
93
  keys = _ref2.keys;
@@ -98,8 +108,7 @@ var TableResizer = function TableResizer(_ref) {
98
108
  resizing: true
99
109
  }));
100
110
  setSnappingEnabled(displayGuideline(_guidelines.defaultGuidelines));
101
- return width;
102
- }, [width, displayGuideline, editorView]);
111
+ }, [displayGuideline, editorView]);
103
112
  var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
104
113
  var newWidth = originalState.width + delta.width;
105
114
  var state = editorView.state,
@@ -114,7 +123,7 @@ var TableResizer = function TableResizer(_ref) {
114
123
  width: newWidth
115
124
  }));
116
125
  var newNode = tr.doc.nodeAt(pos);
117
- tr = (0, _utils.scaleTable)(tableRef, {
126
+ tr = (0, _utils2.scaleTable)(tableRef, {
118
127
  node: newNode,
119
128
  prevNode: node,
120
129
  start: pos + 1,
@@ -139,7 +148,7 @@ var TableResizer = function TableResizer(_ref) {
139
148
  if (typeof pos !== 'number') {
140
149
  return;
141
150
  }
142
- (0, _utils.previewScaleTable)(tableRef, {
151
+ (0, _utils2.previewScaleTable)(tableRef, {
143
152
  node: node,
144
153
  prevNode: node,
145
154
  start: pos + 1,
@@ -162,11 +171,12 @@ var TableResizer = function TableResizer(_ref) {
162
171
  handleResize: scheduleResize,
163
172
  handleResizeStop: handleResizeStop,
164
173
  resizeRatio: 2,
165
- minWidth: minColumnWidth,
174
+ minWidth: resizerMinWidth,
166
175
  maxWidth: maxWidth,
167
176
  snapGap: _consts.TABLE_SNAP_GAP,
168
177
  snap: guidelineSnaps,
169
- handlePositioning: "adjacent"
178
+ handlePositioning: "adjacent",
179
+ isHandleVisible: ((_findTable = (0, _utils.findTable)((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos()
170
180
  }, children);
171
181
  };
172
182
  exports.TableResizer = TableResizer;
package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/scale-table.js CHANGED
@@ -147,6 +147,7 @@ var scaleTable = function scaleTable(tableRef, options, domAtPos) {
147
147
  // If its not a re-sized table, we still want to re-create cols
148
148
  // To force reflow of columns upon delete.
149
149
  (0, _colgroup.insertColgroupFromNode)(tableRef, node);
150
+ tr.setMeta('scrollIntoView', false);
150
151
  return tr;
151
152
  }
152
153
  var resizeState;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "2.6.1",
3
+ "version": "2.6.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/plugins/table/nodeviews/TableResizer.js CHANGED
@@ -4,6 +4,7 @@ import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-commo
4
4
  import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
5
5
  import { ResizerNext } from '@atlaskit/editor-common/resizer';
6
6
  import { TableMap } from '@atlaskit/editor-tables';
7
+ import { findTable } from '@atlaskit/editor-tables/utils';
7
8
  import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, hasTableBeenResized, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
8
9
  import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
9
10
  import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
@@ -31,20 +32,7 @@ const generateResizedPayload = props => {
31
32
  }
32
33
  };
33
34
  };
34
- export const TableResizer = ({
35
- children,
36
- width,
37
- maxWidth,
38
- updateWidth,
39
- editorView,
40
- getPos,
41
- node,
42
- tableRef,
43
- displayGuideline,
44
- attachAnalyticsEvent
45
- }) => {
46
- const currentColumnCount = getColgroupChildrenLength(node);
47
- const minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
35
+ const getResizerHandleHeight = tableRef => {
48
36
  const tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
49
37
  let handleHeightSize = 'small';
50
38
  /*
@@ -60,8 +48,30 @@ export const TableResizer = ({
60
48
  } else if (tableHeight && tableHeight >= 96) {
61
49
  handleHeightSize = 'large';
62
50
  }
51
+ return handleHeightSize;
52
+ };
53
+ const getResizerMinWidth = node => {
54
+ const currentColumnCount = getColgroupChildrenLength(node);
55
+ const minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
56
+ return minColumnWidth;
57
+ };
58
+ export const TableResizer = ({
59
+ children,
60
+ width,
61
+ maxWidth,
62
+ updateWidth,
63
+ editorView,
64
+ getPos,
65
+ node,
66
+ tableRef,
67
+ displayGuideline,
68
+ attachAnalyticsEvent
69
+ }) => {
70
+ var _findTable, _editorView$state;
63
71
  const currentGap = useRef(0);
64
72
  const [snappingEnabled, setSnappingEnabled] = useState(false);
73
+ const resizerMinWidth = getResizerMinWidth(node);
74
+ const handleHeightSize = getResizerHandleHeight(tableRef);
65
75
  const updateActiveGuidelines = useCallback(({
66
76
  gap,
67
77
  keys
@@ -85,8 +95,7 @@ export const TableResizer = ({
85
95
  resizing: true
86
96
  }));
87
97
  setSnappingEnabled(displayGuideline(defaultGuidelines));
88
- return width;
89
- }, [width, displayGuideline, editorView]);
98
+ }, [displayGuideline, editorView]);
90
99
  const handleResizeStop = useCallback((originalState, delta) => {
91
100
  const newWidth = originalState.width + delta.width;
92
101
  const {
@@ -150,10 +159,11 @@ export const TableResizer = ({
150
159
  handleResize: scheduleResize,
151
160
  handleResizeStop: handleResizeStop,
152
161
  resizeRatio: 2,
153
- minWidth: minColumnWidth,
162
+ minWidth: resizerMinWidth,
154
163
  maxWidth: maxWidth,
155
164
  snapGap: TABLE_SNAP_GAP,
156
165
  snap: guidelineSnaps,
157
- handlePositioning: "adjacent"
166
+ handlePositioning: "adjacent",
167
+ isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos()
158
168
  }, children);
159
169
  };
package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/scale-table.js CHANGED
@@ -141,6 +141,7 @@ export const scaleTable = (tableRef, options, domAtPos) => tr => {
141
141
  // If its not a re-sized table, we still want to re-create cols
142
142
  // To force reflow of columns upon delete.
143
143
  insertColgroupFromNode(tableRef, node);
144
+ tr.setMeta('scrollIntoView', false);
144
145
  return tr;
145
146
  }
146
147
  let resizeState;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "2.6.1",
3
+ "version": "2.6.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/plugins/table/nodeviews/TableResizer.js CHANGED
@@ -8,6 +8,7 @@ import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-commo
8
8
  import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
9
9
  import { ResizerNext } from '@atlaskit/editor-common/resizer';
10
10
  import { TableMap } from '@atlaskit/editor-tables';
11
+ import { findTable } from '@atlaskit/editor-tables/utils';
11
12
  import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, hasTableBeenResized, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
12
13
  import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
13
14
  import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
@@ -35,19 +36,7 @@ var generateResizedPayload = function generateResizedPayload(props) {
35
36
  }
36
37
  };
37
38
  };
38
- export var TableResizer = function TableResizer(_ref) {
39
- var children = _ref.children,
40
- width = _ref.width,
41
- maxWidth = _ref.maxWidth,
42
- updateWidth = _ref.updateWidth,
43
- editorView = _ref.editorView,
44
- getPos = _ref.getPos,
45
- node = _ref.node,
46
- tableRef = _ref.tableRef,
47
- displayGuideline = _ref.displayGuideline,
48
- attachAnalyticsEvent = _ref.attachAnalyticsEvent;
49
- var currentColumnCount = getColgroupChildrenLength(node);
50
- var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
39
+ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
51
40
  var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
52
41
  var handleHeightSize = 'small';
53
42
  /*
@@ -63,11 +52,32 @@ export var TableResizer = function TableResizer(_ref) {
63
52
  } else if (tableHeight && tableHeight >= 96) {
64
53
  handleHeightSize = 'large';
65
54
  }
55
+ return handleHeightSize;
56
+ };
57
+ var getResizerMinWidth = function getResizerMinWidth(node) {
58
+ var currentColumnCount = getColgroupChildrenLength(node);
59
+ var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
60
+ return minColumnWidth;
61
+ };
62
+ export var TableResizer = function TableResizer(_ref) {
63
+ var _findTable, _editorView$state;
64
+ var children = _ref.children,
65
+ width = _ref.width,
66
+ maxWidth = _ref.maxWidth,
67
+ updateWidth = _ref.updateWidth,
68
+ editorView = _ref.editorView,
69
+ getPos = _ref.getPos,
70
+ node = _ref.node,
71
+ tableRef = _ref.tableRef,
72
+ displayGuideline = _ref.displayGuideline,
73
+ attachAnalyticsEvent = _ref.attachAnalyticsEvent;
66
74
  var currentGap = useRef(0);
67
75
  var _useState = useState(false),
68
76
  _useState2 = _slicedToArray(_useState, 2),
69
77
  snappingEnabled = _useState2[0],
70
78
  setSnappingEnabled = _useState2[1];
79
+ var resizerMinWidth = getResizerMinWidth(node);
80
+ var handleHeightSize = getResizerHandleHeight(tableRef);
71
81
  var updateActiveGuidelines = useCallback(function (_ref2) {
72
82
  var gap = _ref2.gap,
73
83
  keys = _ref2.keys;
@@ -88,8 +98,7 @@ export var TableResizer = function TableResizer(_ref) {
88
98
  resizing: true
89
99
  }));
90
100
  setSnappingEnabled(displayGuideline(defaultGuidelines));
91
- return width;
92
- }, [width, displayGuideline, editorView]);
101
+ }, [displayGuideline, editorView]);
93
102
  var handleResizeStop = useCallback(function (originalState, delta) {
94
103
  var newWidth = originalState.width + delta.width;
95
104
  var state = editorView.state,
@@ -152,10 +161,11 @@ export var TableResizer = function TableResizer(_ref) {
152
161
  handleResize: scheduleResize,
153
162
  handleResizeStop: handleResizeStop,
154
163
  resizeRatio: 2,
155
- minWidth: minColumnWidth,
164
+ minWidth: resizerMinWidth,
156
165
  maxWidth: maxWidth,
157
166
  snapGap: TABLE_SNAP_GAP,
158
167
  snap: guidelineSnaps,
159
- handlePositioning: "adjacent"
168
+ handlePositioning: "adjacent",
169
+ isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos()
160
170
  }, children);
161
171
  };
package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/scale-table.js CHANGED
@@ -135,6 +135,7 @@ export var scaleTable = function scaleTable(tableRef, options, domAtPos) {
135
135
  // If its not a re-sized table, we still want to re-create cols
136
136
  // To force reflow of columns upon delete.
137
137
  insertColgroupFromNode(tableRef, node);
138
+ tr.setMeta('scrollIntoView', false);
138
139
  return tr;
139
140
  }
140
141
  var resizeState;
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "2.6.1",
3
+ "version": "2.6.2",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "2.6.1",
3
+ "version": "2.6.2",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@atlaskit/adf-schema": "^26.3.0",
31
- "@atlaskit/editor-common": "^74.27.0",
31
+ "@atlaskit/editor-common": "^74.28.0",
32
32
  "@atlaskit/editor-palette": "1.5.1",
33
33
  "@atlaskit/editor-plugin-analytics": "^0.1.0",
34
34
  "@atlaskit/editor-plugin-content-insertion": "^0.0.6",
package/src/__tests__/unit/nodeviews/TableContainer.tsx CHANGED
@@ -53,15 +53,15 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
53
53
  );
54
54
  const resolvedTable = findTable(editorView.state.selection);
55
55
 
56
- return { editorView, node: resolvedTable!.node };
56
+ return { table: resolvedTable!.node, editorView };
57
57
  };
58
58
 
59
- describe('show correct container for FF and options', () => {
59
+ describe('show correct table container', () => {
60
60
  const buildContainer = (
61
61
  isTableResizingEnabled: boolean,
62
62
  isBreakoutEnabled: boolean = true,
63
63
  ) => {
64
- const { node, editorView } = createNode();
64
+ const { table, editorView } = createNode();
65
65
 
66
66
  const { container } = render(
67
67
  <TableContainer
@@ -69,7 +69,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
69
69
  width: 1800,
70
70
  lineLength: 720,
71
71
  }}
72
- node={node}
72
+ node={table}
73
73
  isTableResizingEnabled={isTableResizingEnabled}
74
74
  isBreakoutEnabled={isBreakoutEnabled}
75
75
  className={''}
@@ -83,12 +83,12 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
83
83
  return container;
84
84
  };
85
85
 
86
- test('when isTableResizingEnabled is true', () => {
86
+ test('should wrap table in resizer when isTableResizingEnabled is true', () => {
87
87
  const container = buildContainer(true);
88
88
  expect(!!container.querySelector('.resizer-item')).toBeTruthy();
89
89
  });
90
90
 
91
- test('when isTableResizingEnabled is false', () => {
91
+ test('should not wrap table in resizer when isTableResizingEnabled is false', () => {
92
92
  const container = buildContainer(false);
93
93
  expect(!!container.querySelector('.resizer-item')).toBeFalsy();
94
94
  });
@@ -99,7 +99,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
99
99
  isTableResizingEnabled: boolean,
100
100
  isBreakoutEnabled: boolean = true,
101
101
  ) => {
102
- const { node, editorView } = createNode();
102
+ const { table, editorView } = createNode();
103
103
 
104
104
  const { container } = render(
105
105
  <TableContainer
@@ -107,7 +107,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
107
107
  width: 1800,
108
108
  lineLength: 720,
109
109
  }}
110
- node={node}
110
+ node={table}
111
111
  isTableResizingEnabled={isTableResizingEnabled}
112
112
  isBreakoutEnabled={isBreakoutEnabled}
113
113
  className={''}
@@ -121,12 +121,12 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
121
121
  return container;
122
122
  };
123
123
 
124
- test('when isTableResizingEnabled is true - should not render resizer', () => {
124
+ test('should not render resizer when isTableResizingEnabled is true', () => {
125
125
  const container = buildContainer(true);
126
126
  expect(!!container.querySelector('.resizer-item')).toBeFalsy();
127
127
  });
128
128
 
129
- test('when isTableResizingEnabled is false - should not render resizer', () => {
129
+ test('should not render resizer when isTableResizingEnabled is false', () => {
130
130
  const container = buildContainer(false);
131
131
  expect(!!container.querySelector('.resizer-item')).toBeFalsy();
132
132
  });
@@ -134,13 +134,13 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
134
134
 
135
135
  describe('sets width and margin correctly for resizable container', () => {
136
136
  const buildContainer = (attrs: TableAttributes) => {
137
- const { node, editorView } = createNode(attrs);
137
+ const { table, editorView } = createNode(attrs);
138
138
 
139
139
  const { container } = render(
140
140
  <ResizableTableContainer
141
141
  containerWidth={1800}
142
142
  lineLength={720}
143
- node={node}
143
+ node={table}
144
144
  className={''}
145
145
  editorView={editorView}
146
146
  getPos={() => 1}
@@ -162,14 +162,14 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
162
162
 
163
163
  describe('analytics', () => {
164
164
  const buildContainer = (attrs: TableAttributes) => {
165
- const { node, editorView } = createNode(attrs);
165
+ const { table, editorView } = createNode(attrs);
166
166
  const analyticsMock = jest.fn();
167
167
 
168
168
  const { container } = render(
169
169
  <ResizableTableContainer
170
170
  containerWidth={1800}
171
171
  lineLength={720}
172
- node={node}
172
+ node={table}
173
173
  className={''}
174
174
  editorView={editorView}
175
175
  getPos={() => 0}
package/src/plugins/table/nodeviews/TableResizer.tsx CHANGED
@@ -25,6 +25,7 @@ import {
25
25
  } from '@atlaskit/editor-common/resizer';
26
26
  import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
27
27
  import { TableMap } from '@atlaskit/editor-tables';
28
+ import { findTable } from '@atlaskit/editor-tables/utils';
28
29
 
29
30
  import {
30
31
  COLUMN_MIN_WIDTH,
@@ -78,24 +79,7 @@ const generateResizedPayload = (props: {
78
79
  };
79
80
  };
80
81
 
81
- export const TableResizer = ({
82
- children,
83
- width,
84
- maxWidth,
85
- updateWidth,
86
- editorView,
87
- getPos,
88
- node,
89
- tableRef,
90
- displayGuideline,
91
- attachAnalyticsEvent,
92
- }: PropsWithChildren<TableResizerProps>) => {
93
- const currentColumnCount = getColgroupChildrenLength(node);
94
- const minColumnWidth =
95
- currentColumnCount <= 3
96
- ? currentColumnCount * COLUMN_MIN_WIDTH
97
- : 3 * COLUMN_MIN_WIDTH;
98
-
82
+ const getResizerHandleHeight = (tableRef: HTMLTableElement) => {
99
83
  const tableHeight = tableRef?.clientHeight;
100
84
  let handleHeightSize: HandleHeightSizeType | undefined = 'small';
101
85
  /*
@@ -112,9 +96,38 @@ export const TableResizer = ({
112
96
  } else if (tableHeight && tableHeight >= 96) {
113
97
  handleHeightSize = 'large';
114
98
  }
99
+
100
+ return handleHeightSize;
101
+ };
102
+
103
+ const getResizerMinWidth = (node: PMNode) => {
104
+ const currentColumnCount = getColgroupChildrenLength(node);
105
+ const minColumnWidth =
106
+ currentColumnCount <= 3
107
+ ? currentColumnCount * COLUMN_MIN_WIDTH
108
+ : 3 * COLUMN_MIN_WIDTH;
109
+
110
+ return minColumnWidth;
111
+ };
112
+
113
+ export const TableResizer = ({
114
+ children,
115
+ width,
116
+ maxWidth,
117
+ updateWidth,
118
+ editorView,
119
+ getPos,
120
+ node,
121
+ tableRef,
122
+ displayGuideline,
123
+ attachAnalyticsEvent,
124
+ }: PropsWithChildren<TableResizerProps>) => {
115
125
  const currentGap = useRef(0);
116
126
  const [snappingEnabled, setSnappingEnabled] = useState(false);
117
127
 
128
+ const resizerMinWidth = getResizerMinWidth(node);
129
+ const handleHeightSize = getResizerHandleHeight(tableRef);
130
+
118
131
  const updateActiveGuidelines = useCallback(
119
132
  ({ gap, keys }: { gap: number; keys: string[] }) => {
120
133
  if (gap !== currentGap.current) {
@@ -151,8 +164,7 @@ export const TableResizer = ({
151
164
  dispatch(tr.setMeta(tableWidthPluginKey, { resizing: true }));
152
165
 
153
166
  setSnappingEnabled(displayGuideline(defaultGuidelines));
154
- return width;
155
- }, [width, displayGuideline, editorView]);
167
+ }, [displayGuideline, editorView]);
156
168
 
157
169
  const handleResizeStop = useCallback<HandleResize>(
158
170
  (originalState, delta) => {
@@ -257,11 +269,12 @@ export const TableResizer = ({
257
269
  handleResize={scheduleResize}
258
270
  handleResizeStop={handleResizeStop}
259
271
  resizeRatio={2}
260
- minWidth={minColumnWidth}
272
+ minWidth={resizerMinWidth}
261
273
  maxWidth={maxWidth}
262
274
  snapGap={TABLE_SNAP_GAP}
263
275
  snap={guidelineSnaps}
264
276
  handlePositioning="adjacent"
277
+ isHandleVisible={findTable(editorView.state?.selection)?.pos === getPos()}
265
278
  >
266
279
  {children}
267
280
  </ResizerNext>
package/src/plugins/table/pm-plugins/table-resizing/utils/scale-table.ts CHANGED
@@ -200,6 +200,7 @@ export const scaleTable =
200
200
  // If its not a re-sized table, we still want to re-create cols
201
201
  // To force reflow of columns upon delete.
202
202
  insertColgroupFromNode(tableRef, node);
203
+ tr.setMeta('scrollIntoView', false);
203
204
  return tr;
204
205
  }
205
206