@atlaskit/editor-plugin-table 7.7.4 → 7.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 7.8.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#91934](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91934) [`b76a78c6a199`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b76a78c6a199) - bumped editor-prosemirror version to 4.0.0
8
+
9
+ ### Patch Changes
10
+
11
+ - [#93082](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93082) [`fb0cc922f8e4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fb0cc922f8e4) - fix resizing offset not match when extend to overflow in handle and mouse
12
+ - Updated dependencies
13
+
3
14
  ## 7.7.4
4
15
 
5
16
  ### Patch Changes
@@ -15,8 +15,24 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
15
15
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // Resize a given column by an amount from the current state
16
16
  var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
17
17
  var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
18
+ // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
18
19
  var scalePercent = 1;
19
- var resizeAmount = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? amount * 2 : amount;
20
+ var resizeAmount;
21
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
22
+ var _tableRef$closest;
23
+ // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
24
+ var tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
25
+ var tableContainerWidth = (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
26
+ var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
27
+ resizeAmount = amount * 2;
28
+ if (isOverflowed) {
29
+ resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
30
+ } else {
31
+ resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
32
+ }
33
+ } else {
34
+ resizeAmount = amount;
35
+ }
20
36
 
21
37
  // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
22
38
  if (isTableScalingEnabled && !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
@@ -24,7 +40,7 @@ var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, col
24
40
  resizeAmount = amount / scalePercent;
25
41
  }
26
42
  var newState = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? (0, _resizeLogic.updateAffectedColumn)(resizeState, colIndex, resizeAmount) : resizeAmount > 0 ? (0, _resizeLogic.growColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? (0, _resizeLogic.shrinkColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
27
- (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled);
43
+ (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, false) : (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled);
28
44
  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
29
45
  // use the difference in width from affected column to update overall table width
30
46
  var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
@@ -35,9 +51,7 @@ var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, col
35
51
  }
36
52
  return newState;
37
53
  };
38
- var updateTable = function updateTable(resizeAmount, tableRef, tableNode
39
- // isTableScalingEnabled: boolean,
40
- ) {
54
+ var updateTable = function updateTable(resizeAmount, tableRef, tableNode) {
41
55
  var currentWidth = (0, _misc.getTableContainerElementWidth)(tableNode);
42
56
  var resizingContainer = tableRef.closest(".".concat(_types.TableCssClassName.TABLE_RESIZER_CONTAINER));
43
57
  var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
@@ -94,6 +94,11 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
94
94
  var updateColgroup = exports.updateColgroup = function updateColgroup(state, tableRef, tableNode, isTableScalingEnabled) {
95
95
  var cols = tableRef.querySelectorAll('col');
96
96
  var columnsCount = cols.length;
97
+ /**
98
+ updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
99
+ We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
100
+ We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
101
+ * */
97
102
  if (isTableScalingEnabled && tableNode) {
98
103
  var scalePercent = (0, _misc.getTableScalingPercent)(tableNode, tableRef);
99
104
  state.cols.filter(function (column) {
@@ -6,8 +6,24 @@ import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
6
6
  import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
7
7
  import { updateColgroup } from './resize-state';
8
8
  export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false) => {
9
+ // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
9
10
  let scalePercent = 1;
10
- let resizeAmount = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? amount * 2 : amount;
11
+ let resizeAmount;
12
+ if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
13
+ var _tableRef$closest;
14
+ // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
15
+ const tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
16
+ const tableContainerWidth = (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
17
+ const isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
18
+ resizeAmount = amount * 2;
19
+ if (isOverflowed) {
20
+ resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
21
+ } else {
22
+ resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
23
+ }
24
+ } else {
25
+ resizeAmount = amount;
26
+ }
11
27
 
12
28
  // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
13
29
  if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
@@ -15,7 +31,7 @@ export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode,
15
31
  resizeAmount = amount / scalePercent;
16
32
  }
17
33
  const newState = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateAffectedColumn(resizeState, colIndex, resizeAmount) : resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
18
- updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
34
+ getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateColgroup(newState, tableRef, tableNode, false) : updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
19
35
  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
20
36
  // use the difference in width from affected column to update overall table width
21
37
  const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
@@ -27,9 +43,7 @@ export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode,
27
43
  }
28
44
  return newState;
29
45
  };
30
- const updateTable = (resizeAmount, tableRef, tableNode
31
- // isTableScalingEnabled: boolean,
32
- ) => {
46
+ const updateTable = (resizeAmount, tableRef, tableNode) => {
33
47
  const currentWidth = getTableContainerElementWidth(tableNode);
34
48
  const resizingContainer = tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
35
49
  const resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
@@ -74,6 +74,11 @@ export const getResizeState = ({
74
74
  export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled) => {
75
75
  const cols = tableRef.querySelectorAll('col');
76
76
  const columnsCount = cols.length;
77
+ /**
78
+ updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
79
+ We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
80
+ We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
81
+ * */
77
82
  if (isTableScalingEnabled && tableNode) {
78
83
  const scalePercent = getTableScalingPercent(tableNode, tableRef);
79
84
  state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
@@ -10,8 +10,24 @@ import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
10
10
  import { updateColgroup } from './resize-state';
11
11
  export var resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
12
12
  var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
13
+ // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
13
14
  var scalePercent = 1;
14
- var resizeAmount = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? amount * 2 : amount;
15
+ var resizeAmount;
16
+ if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
17
+ var _tableRef$closest;
18
+ // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
19
+ var tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
20
+ var tableContainerWidth = (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
21
+ var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
22
+ resizeAmount = amount * 2;
23
+ if (isOverflowed) {
24
+ resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
25
+ } else {
26
+ resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
27
+ }
28
+ } else {
29
+ resizeAmount = amount;
30
+ }
15
31
 
16
32
  // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
17
33
  if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
@@ -19,7 +35,7 @@ export var resizeColumn = function resizeColumn(resizeState, colIndex, amount, t
19
35
  resizeAmount = amount / scalePercent;
20
36
  }
21
37
  var newState = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateAffectedColumn(resizeState, colIndex, resizeAmount) : resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
22
- updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
38
+ getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateColgroup(newState, tableRef, tableNode, false) : updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
23
39
  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
24
40
  // use the difference in width from affected column to update overall table width
25
41
  var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
@@ -30,9 +46,7 @@ export var resizeColumn = function resizeColumn(resizeState, colIndex, amount, t
30
46
  }
31
47
  return newState;
32
48
  };
33
- var updateTable = function updateTable(resizeAmount, tableRef, tableNode
34
- // isTableScalingEnabled: boolean,
35
- ) {
49
+ var updateTable = function updateTable(resizeAmount, tableRef, tableNode) {
36
50
  var currentWidth = getTableContainerElementWidth(tableNode);
37
51
  var resizingContainer = tableRef.closest(".".concat(ClassName.TABLE_RESIZER_CONTAINER));
38
52
  var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
@@ -87,6 +87,11 @@ export var getResizeState = function getResizeState(_ref) {
87
87
  export var updateColgroup = function updateColgroup(state, tableRef, tableNode, isTableScalingEnabled) {
88
88
  var cols = tableRef.querySelectorAll('col');
89
89
  var columnsCount = cols.length;
90
+ /**
91
+ updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
92
+ We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
93
+ We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
94
+ * */
90
95
  if (isTableScalingEnabled && tableNode) {
91
96
  var scalePercent = getTableScalingPercent(tableNode, tableRef);
92
97
  state.cols.filter(function (column) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "7.7.4",
3
+ "version": "7.8.0",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -29,19 +29,19 @@
29
29
  },
30
30
  "dependencies": {
31
31
  "@atlaskit/adf-schema": "^35.9.2",
32
- "@atlaskit/custom-steps": "^0.0.19",
33
- "@atlaskit/editor-common": "^78.30.0",
32
+ "@atlaskit/custom-steps": "^0.1.0",
33
+ "@atlaskit/editor-common": "^78.31.0",
34
34
  "@atlaskit/editor-palette": "1.5.3",
35
- "@atlaskit/editor-plugin-accessibility-utils": "^1.0.0",
36
- "@atlaskit/editor-plugin-analytics": "^1.0.0",
37
- "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
38
- "@atlaskit/editor-plugin-editor-viewmode": "^1.0.0",
39
- "@atlaskit/editor-plugin-guideline": "^1.0.0",
40
- "@atlaskit/editor-plugin-selection": "^1.1.0",
41
- "@atlaskit/editor-plugin-width": "^1.0.0",
42
- "@atlaskit/editor-prosemirror": "3.0.0",
35
+ "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
36
+ "@atlaskit/editor-plugin-analytics": "^1.1.0",
37
+ "@atlaskit/editor-plugin-content-insertion": "^1.1.0",
38
+ "@atlaskit/editor-plugin-editor-viewmode": "^1.1.0",
39
+ "@atlaskit/editor-plugin-guideline": "^1.1.0",
40
+ "@atlaskit/editor-plugin-selection": "^1.2.0",
41
+ "@atlaskit/editor-plugin-width": "^1.1.0",
42
+ "@atlaskit/editor-prosemirror": "4.0.0",
43
43
  "@atlaskit/editor-shared-styles": "^2.9.0",
44
- "@atlaskit/editor-tables": "^2.6.0",
44
+ "@atlaskit/editor-tables": "^2.7.0",
45
45
  "@atlaskit/icon": "^22.1.0",
46
46
  "@atlaskit/menu": "^2.1.5",
47
47
  "@atlaskit/platform-feature-flags": "^0.2.1",
@@ -18,12 +18,39 @@ export const resizeColumn = (
18
18
  selectedColumns?: number[],
19
19
  isTableScalingEnabled = false,
20
20
  ): ResizeState => {
21
+ // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
21
22
  let scalePercent = 1;
22
- let resizeAmount = getBooleanFF(
23
- 'platform.editor.table.colum-resizing-improvements',
24
- )
25
- ? amount * 2
26
- : amount;
23
+ let resizeAmount: number;
24
+
25
+ if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
26
+ // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
27
+ const tableWidth = tableRef?.clientWidth;
28
+ const tableContainerWidth = tableRef.closest('.resizer-item')?.clientWidth;
29
+
30
+ const isOverflowed = !!(
31
+ tableWidth &&
32
+ tableContainerWidth &&
33
+ tableWidth > tableContainerWidth
34
+ );
35
+
36
+ resizeAmount = amount * 2;
37
+
38
+ if (isOverflowed) {
39
+ resizeAmount =
40
+ amount < 0
41
+ ? amount
42
+ : resizeAmount -
43
+ (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
44
+ } else {
45
+ resizeAmount =
46
+ amount > 0 && tableContainerWidth
47
+ ? resizeAmount -
48
+ (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2
49
+ : resizeAmount;
50
+ }
51
+ } else {
52
+ resizeAmount = amount;
53
+ }
27
54
 
28
55
  // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
29
56
  if (
@@ -44,7 +71,9 @@ export const resizeColumn = (
44
71
  ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
45
72
  : resizeState;
46
73
 
47
- updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
74
+ getBooleanFF('platform.editor.table.colum-resizing-improvements')
75
+ ? updateColgroup(newState, tableRef, tableNode, false)
76
+ : updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
48
77
 
49
78
  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
50
79
  // use the difference in width from affected column to update overall table width
@@ -65,7 +94,6 @@ const updateTable = (
65
94
  resizeAmount: number,
66
95
  tableRef: HTMLElement,
67
96
  tableNode: PmNode,
68
- // isTableScalingEnabled: boolean,
69
97
  ) => {
70
98
  const currentWidth = getTableContainerElementWidth(tableNode);
71
99
  const resizingContainer = tableRef.closest(
@@ -112,8 +112,12 @@ export const updateColgroup = (
112
112
  isTableScalingEnabled?: boolean,
113
113
  ): void => {
114
114
  const cols = tableRef.querySelectorAll('col');
115
-
116
115
  const columnsCount = cols.length;
116
+ /**
117
+ updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
118
+ We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
119
+ We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
120
+ * */
117
121
  if (isTableScalingEnabled && tableNode) {
118
122
  const scalePercent = getTableScalingPercent(tableNode, tableRef);
119
123
  state.cols