@atlaskit/editor-plugin-table 22.4.13 → 22.4.15

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 (69) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/nodeviews/TableComponent.js +23 -21
  3. package/dist/cjs/nodeviews/table.js +2 -2
  4. package/dist/cjs/nodeviews/toDOM.js +2 -2
  5. package/dist/cjs/pm-plugins/main.js +4 -3
  6. package/dist/cjs/pm-plugins/table-width.js +2 -2
  7. package/dist/cjs/pm-plugins/transforms/content-mode.js +3 -2
  8. package/dist/cjs/pm-plugins/utils/tableMode/apply-measured-width-to-all-tables.js +70 -0
  9. package/dist/cjs/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.js +41 -0
  10. package/dist/cjs/pm-plugins/utils/tableMode/is-content-mode-supported.js +12 -0
  11. package/dist/cjs/pm-plugins/utils/tableMode/measure-table-with-auto-layout.js +113 -0
  12. package/dist/cjs/pm-plugins/utils/tableMode/smart-adjust/constants.js +10 -0
  13. package/dist/cjs/pm-plugins/utils/tableMode/smart-adjust/distribute-column-widths.js +83 -0
  14. package/dist/cjs/pm-plugins/utils/tableMode/smart-adjust/run-smart-adjust.js +56 -0
  15. package/dist/cjs/ui/toolbar.js +4 -3
  16. package/dist/es2019/nodeviews/TableComponent.js +23 -21
  17. package/dist/es2019/nodeviews/table.js +1 -1
  18. package/dist/es2019/nodeviews/toDOM.js +1 -1
  19. package/dist/es2019/pm-plugins/main.js +2 -1
  20. package/dist/es2019/pm-plugins/table-width.js +1 -1
  21. package/dist/es2019/pm-plugins/transforms/content-mode.js +2 -1
  22. package/dist/es2019/pm-plugins/utils/tableMode/apply-measured-width-to-all-tables.js +70 -0
  23. package/dist/es2019/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.js +38 -0
  24. package/dist/es2019/pm-plugins/utils/tableMode/is-content-mode-supported.js +7 -0
  25. package/dist/es2019/pm-plugins/utils/tableMode/measure-table-with-auto-layout.js +97 -0
  26. package/dist/es2019/pm-plugins/utils/tableMode/smart-adjust/constants.js +4 -0
  27. package/dist/es2019/pm-plugins/utils/tableMode/smart-adjust/distribute-column-widths.js +63 -0
  28. package/dist/es2019/pm-plugins/utils/tableMode/smart-adjust/run-smart-adjust.js +47 -0
  29. package/dist/es2019/ui/toolbar.js +2 -1
  30. package/dist/esm/nodeviews/TableComponent.js +23 -21
  31. package/dist/esm/nodeviews/table.js +1 -1
  32. package/dist/esm/nodeviews/toDOM.js +1 -1
  33. package/dist/esm/pm-plugins/main.js +2 -1
  34. package/dist/esm/pm-plugins/table-width.js +1 -1
  35. package/dist/esm/pm-plugins/transforms/content-mode.js +2 -1
  36. package/dist/esm/pm-plugins/utils/tableMode/apply-measured-width-to-all-tables.js +65 -0
  37. package/dist/esm/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.js +36 -0
  38. package/dist/esm/pm-plugins/utils/tableMode/is-content-mode-supported.js +6 -0
  39. package/dist/esm/pm-plugins/utils/tableMode/measure-table-with-auto-layout.js +107 -0
  40. package/dist/esm/pm-plugins/utils/tableMode/smart-adjust/constants.js +4 -0
  41. package/dist/esm/pm-plugins/utils/tableMode/smart-adjust/distribute-column-widths.js +77 -0
  42. package/dist/esm/pm-plugins/utils/tableMode/smart-adjust/run-smart-adjust.js +49 -0
  43. package/dist/esm/ui/toolbar.js +2 -1
  44. package/dist/types/pm-plugins/transforms/content-mode.d.ts +1 -0
  45. package/dist/types/pm-plugins/utils/tableMode/apply-measured-width-to-all-tables.d.ts +8 -0
  46. package/dist/types/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.d.ts +6 -0
  47. package/dist/types/pm-plugins/utils/tableMode/is-content-mode-supported.d.ts +7 -0
  48. package/dist/types/pm-plugins/utils/tableMode/measure-table-with-auto-layout.d.ts +2 -0
  49. package/dist/types/pm-plugins/utils/tableMode/smart-adjust/constants.d.ts +4 -0
  50. package/dist/types/pm-plugins/utils/tableMode/smart-adjust/distribute-column-widths.d.ts +8 -0
  51. package/dist/types/pm-plugins/utils/tableMode/smart-adjust/run-smart-adjust.d.ts +7 -0
  52. package/dist/types/ui/TableMenu/column/getColumnMenuComponents.d.ts +1 -1
  53. package/dist/types/ui/TableMenu/column/items/DistributeColumnsItem.d.ts +1 -1
  54. package/dist/types-ts4.5/pm-plugins/transforms/content-mode.d.ts +1 -0
  55. package/dist/types-ts4.5/pm-plugins/utils/tableMode/apply-measured-width-to-all-tables.d.ts +8 -0
  56. package/dist/types-ts4.5/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.d.ts +6 -0
  57. package/dist/types-ts4.5/pm-plugins/utils/tableMode/is-content-mode-supported.d.ts +7 -0
  58. package/dist/types-ts4.5/pm-plugins/utils/tableMode/measure-table-with-auto-layout.d.ts +2 -0
  59. package/dist/types-ts4.5/pm-plugins/utils/tableMode/smart-adjust/constants.d.ts +4 -0
  60. package/dist/types-ts4.5/pm-plugins/utils/tableMode/smart-adjust/distribute-column-widths.d.ts +8 -0
  61. package/dist/types-ts4.5/pm-plugins/utils/tableMode/smart-adjust/run-smart-adjust.d.ts +7 -0
  62. package/dist/types-ts4.5/ui/TableMenu/column/getColumnMenuComponents.d.ts +1 -1
  63. package/dist/types-ts4.5/ui/TableMenu/column/items/DistributeColumnsItem.d.ts +1 -1
  64. package/package.json +12 -7
  65. package/dist/cjs/pm-plugins/utils/tableMode.js +0 -162
  66. package/dist/es2019/pm-plugins/utils/tableMode.js +0 -158
  67. package/dist/esm/pm-plugins/utils/tableMode.js +0 -156
  68. package/dist/types/pm-plugins/utils/tableMode.d.ts +0 -26
  69. package/dist/types-ts4.5/pm-plugins/utils/tableMode.d.ts +0 -26
@@ -0,0 +1,65 @@
1
+ import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
2
+ import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
3
+ import { hasTableBeenResized } from '@atlaskit/editor-common/table';
4
+ import { applyTableMeasurement, getTableMeasurement } from '../../transforms/content-mode';
5
+
6
+ /**
7
+ * Iterates all top-level tables in the document, and for those in content mode,
8
+ * measures rendered column widths and sets colwidth + table width attributes
9
+ * in a single batched transaction.
10
+ */
11
+ export var applyMeasuredWidthToAllTables = function applyMeasuredWidthToAllTables(view, pluginInjectionApi) {
12
+ var _view$state = view.state,
13
+ doc = _view$state.doc,
14
+ schema = _view$state.schema;
15
+ var tr = view.state.tr;
16
+ var table = schema.nodes.table;
17
+ var modified = false;
18
+ var measuredTables = [];
19
+
20
+ // modify only top-level tables
21
+ doc.forEach(function (node, offset) {
22
+ if (node.type !== table || hasTableBeenResized(node) && node.attrs.layout !== 'align-start') {
23
+ return;
24
+ }
25
+ var domNode = view.domAtPos(offset + 1).node;
26
+ var tableWrapper = domNode instanceof HTMLElement ? domNode.closest(".".concat(TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP)) : null;
27
+ var tableRef = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.querySelector('table');
28
+ if (!tableRef) {
29
+ return;
30
+ }
31
+ measuredTables.push({
32
+ node: node,
33
+ offset: offset,
34
+ measurement: getTableMeasurement(tableRef)
35
+ });
36
+ });
37
+ measuredTables.forEach(function (_ref) {
38
+ var node = _ref.node,
39
+ offset = _ref.offset,
40
+ measurement = _ref.measurement;
41
+ tr = applyTableMeasurement(tr, node, measurement, offset);
42
+ modified = true;
43
+ });
44
+ if (modified) {
45
+ var _pluginInjectionApi$a, _pluginInjectionApi$w, _pluginInjectionApi$w2;
46
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.attachAnalyticsEvent({
47
+ action: TABLE_ACTION.FIT_TO_CONTENT_AUTO_CONVERTED,
48
+ actionSubject: ACTION_SUBJECT.TABLE,
49
+ actionSubjectId: null,
50
+ eventType: EVENT_TYPE.TRACK,
51
+ attributes: {
52
+ editorContainerWidth: (_pluginInjectionApi$w = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w2 = pluginInjectionApi.width) === null || _pluginInjectionApi$w2 === void 0 || (_pluginInjectionApi$w2 = _pluginInjectionApi$w2.sharedState.currentState()) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : _pluginInjectionApi$w2.width) !== null && _pluginInjectionApi$w !== void 0 ? _pluginInjectionApi$w : 0,
53
+ totalTablesResized: measuredTables.length,
54
+ measurements: measuredTables.map(function (_ref2) {
55
+ var measurement = _ref2.measurement;
56
+ return {
57
+ tableWidth: measurement.tableWidth,
58
+ totalColumnCount: measurement.colWidths.length
59
+ };
60
+ })
61
+ }
62
+ })(tr);
63
+ view.dispatch(tr.setMeta('addToHistory', false));
64
+ }
65
+ };
@@ -0,0 +1,36 @@
1
+ import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
2
+ import { findTable } from '@atlaskit/editor-tables/utils';
3
+ import { applyTableMeasurement } from '../../transforms/content-mode';
4
+ import { measureTableWithAutoLayout } from './measure-table-with-auto-layout';
5
+
6
+ /**
7
+ * Used to measure a selected table width with it's content being laid out natively by the browser
8
+ */
9
+ export var applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
10
+ var _api$width, _api$analytics, _api$width$sharedStat, _api$width2;
11
+ var tableObject = findTable(view.state.selection);
12
+ if (!tableObject) {
13
+ return;
14
+ }
15
+ var node = tableObject.node,
16
+ pos = tableObject.pos;
17
+ var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
18
+ if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
19
+ return;
20
+ }
21
+ var editorContainerWidth = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 || (_api$width = _api$width.sharedState.currentState()) === null || _api$width === void 0 ? void 0 : _api$width.width;
22
+ var measurement = measureTableWithAutoLayout(tableState.tableRef, editorContainerWidth);
23
+ var tr = applyTableMeasurement(view.state.tr, node, measurement, pos);
24
+ api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
25
+ action: TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,
26
+ actionSubject: ACTION_SUBJECT.TABLE,
27
+ actionSubjectId: null,
28
+ eventType: EVENT_TYPE.TRACK,
29
+ attributes: {
30
+ editorContainerWidth: (_api$width$sharedStat = api === null || api === void 0 || (_api$width2 = api.width) === null || _api$width2 === void 0 || (_api$width2 = _api$width2.sharedState.currentState()) === null || _api$width2 === void 0 ? void 0 : _api$width2.width) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : 0,
31
+ tableWidth: measurement.tableWidth,
32
+ totalColumnCount: measurement.colWidths.length
33
+ }
34
+ })(tr);
35
+ view.dispatch(tr);
36
+ };
@@ -0,0 +1,6 @@
1
+ export var isContentModeSupported = function isContentModeSupported(_ref) {
2
+ var allowColumnResizing = _ref.allowColumnResizing,
3
+ allowTableResizing = _ref.allowTableResizing,
4
+ isFullPageEditor = _ref.isFullPageEditor;
5
+ return allowColumnResizing && allowTableResizing && isFullPageEditor;
6
+ };
@@ -0,0 +1,107 @@
1
+ import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
3
+ import { getTableMeasurement } from '../../transforms/content-mode';
4
+ import { restoreResizerContainer, runSmartAdjust } from './smart-adjust/run-smart-adjust';
5
+ export var measureTableWithAutoLayout = function measureTableWithAutoLayout(tableRef, editorContainerWidth) {
6
+ var cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
7
+ var contentWrap = tableRef.closest(".".concat(TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP));
8
+ var resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(".".concat(TableSharedCssClassName.TABLE_RESIZER_CONTAINER));
9
+ var resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
10
+ var prevTableWidth = tableRef.style.width;
11
+ var prevTableLayout = tableRef.style.tableLayout;
12
+ var prevColWidths = cols.map(function (col) {
13
+ return col.style.width;
14
+ });
15
+ var prevResizerItemWidth = resizerItem === null || resizerItem === void 0 ? void 0 : resizerItem.style.width;
16
+ tableRef.style.width = '';
17
+ tableRef.style.tableLayout = 'auto';
18
+ cols.forEach(function (col) {
19
+ return col.style.width = '';
20
+ });
21
+ if (fg('platform_editor_table_fit_to_content_smart_adjust')) {
22
+ var hadTableSticky = tableRef.classList.contains(TableSharedCssClassName.TABLE_STICKY);
23
+ var prevTableMarginTop = tableRef.style.marginTop;
24
+ if (hadTableSticky) {
25
+ tableRef.classList.remove(TableSharedCssClassName.TABLE_NATIVE_STICKY);
26
+ }
27
+ if (prevTableMarginTop) {
28
+ tableRef.style.marginTop = '';
29
+ }
30
+ var stickyRows = Array.from(tableRef.querySelectorAll("tr.sticky, tr.".concat(TableSharedCssClassName.TABLE_NATIVE_STICKY)));
31
+ var prevStickyRowState = stickyRows.map(function (row) {
32
+ return {
33
+ row: row,
34
+ hadSticky: row.classList.contains('sticky'),
35
+ hadNative: row.classList.contains(TableSharedCssClassName.TABLE_NATIVE_STICKY),
36
+ width: row.style.width,
37
+ top: row.style.top,
38
+ position: row.style.position,
39
+ gridTemplateColumns: row.style.gridTemplateColumns
40
+ };
41
+ });
42
+ stickyRows.forEach(function (row) {
43
+ row.classList.remove('sticky');
44
+ row.classList.remove(TableSharedCssClassName.TABLE_NATIVE_STICKY);
45
+ row.style.width = '';
46
+ row.style.top = '';
47
+ row.style.position = '';
48
+ row.style.gridTemplateColumns = '';
49
+ });
50
+ try {
51
+ return runSmartAdjust(tableRef, resizerContainer, resizerItem, editorContainerWidth);
52
+ } finally {
53
+ tableRef.style.width = prevTableWidth;
54
+ tableRef.style.tableLayout = prevTableLayout;
55
+ cols.forEach(function (col, i) {
56
+ return col.style.width = prevColWidths[i];
57
+ });
58
+ if (hadTableSticky) {
59
+ tableRef.classList.add(TableSharedCssClassName.TABLE_STICKY);
60
+ }
61
+ if (prevTableMarginTop) {
62
+ tableRef.style.marginTop = prevTableMarginTop;
63
+ }
64
+ prevStickyRowState.forEach(function (state) {
65
+ if (state.hadSticky) {
66
+ state.row.classList.add('sticky');
67
+ }
68
+ if (state.hadNative) {
69
+ state.row.classList.add(TableSharedCssClassName.TABLE_NATIVE_STICKY);
70
+ }
71
+ if (state.width) {
72
+ state.row.style.width = state.width;
73
+ }
74
+ if (state.top) {
75
+ state.row.style.top = state.top;
76
+ }
77
+ if (state.position) {
78
+ state.row.style.position = state.position;
79
+ }
80
+ if (state.gridTemplateColumns) {
81
+ state.row.style.gridTemplateColumns = state.gridTemplateColumns;
82
+ }
83
+ });
84
+ restoreResizerContainer(resizerContainer);
85
+ if (resizerItem) {
86
+ resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
87
+ }
88
+ }
89
+ }
90
+ if (resizerContainer) {
91
+ resizerContainer.style.width = 'var(--ak-editor-table-width)';
92
+ resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
93
+ }
94
+ if (resizerItem) {
95
+ resizerItem.style.width = 'max-content';
96
+ }
97
+ var measurement = getTableMeasurement(tableRef);
98
+ tableRef.style.width = prevTableWidth;
99
+ tableRef.style.tableLayout = prevTableLayout;
100
+ cols.forEach(function (col, i) {
101
+ return col.style.width = prevColWidths[i];
102
+ });
103
+ if (resizerItem) {
104
+ resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
105
+ }
106
+ return measurement;
107
+ };
@@ -0,0 +1,4 @@
1
+ /** Each column's max width is `MAX × (usableWidth / numCols)`. */
2
+ export var EVEN_SHARE_RATIO = {
3
+ MAX: 2
4
+ };
@@ -0,0 +1,77 @@
1
+ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
2
+ import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
3
+ import { EVEN_SHARE_RATIO } from './constants';
4
+ export var sumWidths = function sumWidths(widths) {
5
+ return widths.reduce(function (sum, width) {
6
+ return sum + width;
7
+ }, 0);
8
+ };
9
+
10
+ // 2px absorbs sub-pixel rounding in `getRenderedColgroupColumnWidths`.
11
+ var SUB_PIXEL_ROUNDING_ALLOWANCE = 2;
12
+
13
+ /**
14
+ * Clamps each desired width to `[tableCellMinWidth, MAX × evenShare]`. Greedy
15
+ * columns (paragraphs) hit the ceiling and wrap; small columns stay at their
16
+ * natural width. Leftover canvas budget grows ceiling-hitters up to their
17
+ * desired; overflow reclaims from ceiling-hitters only.
18
+ */
19
+ export var distributeByEvenShareRatio = function distributeByEvenShareRatio(desiredWidths, editorContainerWidth) {
20
+ if (desiredWidths.length === 0 || !isFinite(editorContainerWidth) || editorContainerWidth <= 0) {
21
+ return desiredWidths;
22
+ }
23
+ var usableWidth = Math.max(editorContainerWidth - akEditorGutterPaddingDynamic() * 2, tableCellMinWidth * desiredWidths.length);
24
+ var evenShare = usableWidth / desiredWidths.length;
25
+ var ceiling = EVEN_SHARE_RATIO.MAX * evenShare;
26
+ var isCompactColumn = function isCompactColumn(width) {
27
+ return width <= ceiling;
28
+ };
29
+ var desiredCeil = desiredWidths.map(function (desired) {
30
+ return Math.max(tableCellMinWidth, Math.ceil(desired) + SUB_PIXEL_ROUNDING_ALLOWANCE);
31
+ });
32
+ var capped = desiredCeil.map(function (desired) {
33
+ return isCompactColumn(desired) ? desired : Math.min(ceiling, desired);
34
+ });
35
+ var sum = sumWidths(capped);
36
+
37
+ // Underflow: grow non-protected ceiling-hitters into the leftover, up to their desired.
38
+ if (sum < usableWidth) {
39
+ var leftover = usableWidth - sum;
40
+ var growthHeadroom = capped.map(function (width, index) {
41
+ return !isCompactColumn(desiredCeil[index]) && width >= ceiling ? Math.max(desiredCeil[index] - width, 0) : 0;
42
+ });
43
+ var totalHeadroom = sumWidths(growthHeadroom);
44
+ if (totalHeadroom > 0) {
45
+ var totalGrowth = Math.min(leftover, totalHeadroom);
46
+ return capped.map(function (width, index) {
47
+ var headroom = growthHeadroom[index];
48
+ if (headroom <= 0) {
49
+ return width;
50
+ }
51
+ return width + headroom / totalHeadroom * totalGrowth;
52
+ });
53
+ }
54
+ return capped;
55
+ }
56
+ if (sum === usableWidth) {
57
+ return capped;
58
+ }
59
+
60
+ // Overflow: reclaim from non-protected ceiling-hitters only.
61
+ var overage = sum - usableWidth;
62
+ var slacks = capped.map(function (width, index) {
63
+ return !isCompactColumn(desiredCeil[index]) && width >= ceiling ? Math.max(width - tableCellMinWidth, 0) : 0;
64
+ });
65
+ var totalSlack = sumWidths(slacks);
66
+ if (totalSlack <= 0) {
67
+ return capped;
68
+ }
69
+ return capped.map(function (width, index) {
70
+ var slack = slacks[index];
71
+ if (slack <= 0) {
72
+ return width;
73
+ }
74
+ var share = slack / totalSlack * Math.min(overage, totalSlack);
75
+ return Math.max(width - share, tableCellMinWidth);
76
+ });
77
+ };
@@ -0,0 +1,49 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
+ 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) { _defineProperty(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; }
4
+ import { getTableMeasurement } from '../../../transforms/content-mode';
5
+ import { distributeByEvenShareRatio, sumWidths } from './distribute-column-widths';
6
+ var measureWithIntrinsicWidth = function measureWithIntrinsicWidth(tableRef, resizerContainer, resizerItem) {
7
+ if (resizerContainer) {
8
+ resizerContainer.style.width = 'var(--ak-editor-table-width)';
9
+ resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
10
+ }
11
+ if (resizerItem) {
12
+ resizerItem.style.width = 'max-content';
13
+ }
14
+ var prevTableWidth = tableRef.style.width;
15
+ var prevTableMaxWidth = tableRef.style.maxWidth;
16
+ var prevTableMinWidth = tableRef.style.minWidth;
17
+ tableRef.style.setProperty('width', 'max-content', 'important');
18
+ tableRef.style.setProperty('max-width', 'none', 'important');
19
+ tableRef.style.setProperty('min-width', '0', 'important');
20
+ try {
21
+ return getTableMeasurement(tableRef);
22
+ } finally {
23
+ tableRef.style.width = prevTableWidth;
24
+ tableRef.style.maxWidth = prevTableMaxWidth;
25
+ tableRef.style.minWidth = prevTableMinWidth;
26
+ }
27
+ };
28
+ export var restoreResizerContainer = function restoreResizerContainer(resizerContainer) {
29
+ if (!resizerContainer) {
30
+ return;
31
+ }
32
+ resizerContainer.style.width = 'var(--ak-editor-table-width)';
33
+ resizerContainer.style.removeProperty('--ak-editor-table-width');
34
+ };
35
+
36
+ /**
37
+ * Smart-adjust: measure unconstrained max-content per column, then clamp via
38
+ * `distributeByEvenShareRatio`.
39
+ */
40
+ export var runSmartAdjust = function runSmartAdjust(tableRef, resizerContainer, resizerItem, editorContainerWidthFromApi) {
41
+ var preferredMeasurement = measureWithIntrinsicWidth(tableRef, resizerContainer, resizerItem);
42
+ var desiredWidths = preferredMeasurement.colWidths;
43
+ var editorContainerWidth = editorContainerWidthFromApi !== null && editorContainerWidthFromApi !== void 0 ? editorContainerWidthFromApi : sumWidths(desiredWidths);
44
+ var colWidths = distributeByEvenShareRatio(desiredWidths, editorContainerWidth);
45
+ return _objectSpread(_objectSpread({}, preferredMeasurement), {}, {
46
+ colWidths: colWidths,
47
+ tableWidth: sumWidths(colWidths)
48
+ });
49
+ };
@@ -49,7 +49,8 @@ import { normaliseAlignment } from '../pm-plugins/utils/alignment';
49
49
  import { isTableNested } from '../pm-plugins/utils/nodes';
50
50
  import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../pm-plugins/utils/selection';
51
51
  import { getMergedCellsPositions } from '../pm-plugins/utils/table';
52
- import { applyMeasuredWidthToSelectedTable, isContentModeSupported } from '../pm-plugins/utils/tableMode';
52
+ import { applyMeasuredWidthToSelectedTable } from '../pm-plugins/utils/tableMode/apply-measured-width-to-selected-table';
53
+ import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
53
54
  import { TableCssClassName } from '../types';
54
55
  import { FloatingAlignmentButtons } from './FloatingAlignmentButtons/FloatingAlignmentButtons';
55
56
  export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
@@ -4,5 +4,6 @@ export type TableMeasurement = {
4
4
  colWidths: Array<number>;
5
5
  tableWidth: number;
6
6
  };
7
+ export declare const clampToEditorMaxWidth: (contentWidth: number) => number;
7
8
  export declare const getTableMeasurement: (tableRef: HTMLTableElement) => TableMeasurement;
8
9
  export declare const applyTableMeasurement: (tr: Transaction, tableNode: PMNode, { colWidths, tableWidth }: TableMeasurement, tablePos: number) => Transaction;
@@ -0,0 +1,8 @@
1
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
+ import type { PluginInjectionAPI } from '../../../types';
3
+ /**
4
+ * Iterates all top-level tables in the document, and for those in content mode,
5
+ * measures rendered column widths and sets colwidth + table width attributes
6
+ * in a single batched transaction.
7
+ */
8
+ export declare const applyMeasuredWidthToAllTables: (view: EditorView, pluginInjectionApi?: PluginInjectionAPI) => void;
@@ -0,0 +1,6 @@
1
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
+ import type { PluginInjectionAPI } from '../../../types';
3
+ /**
4
+ * Used to measure a selected table width with it's content being laid out natively by the browser
5
+ */
6
+ export declare const applyMeasuredWidthToSelectedTable: (view: EditorView, api?: PluginInjectionAPI) => void;
@@ -0,0 +1,7 @@
1
+ type ContentModePluginOptions = {
2
+ allowColumnResizing: boolean;
3
+ allowTableResizing: boolean;
4
+ isFullPageEditor: boolean;
5
+ };
6
+ export declare const isContentModeSupported: ({ allowColumnResizing, allowTableResizing, isFullPageEditor, }: ContentModePluginOptions) => boolean;
7
+ export {};
@@ -0,0 +1,2 @@
1
+ import { type TableMeasurement } from '../../transforms/content-mode';
2
+ export declare const measureTableWithAutoLayout: (tableRef: HTMLTableElement, editorContainerWidth?: number) => TableMeasurement;
@@ -0,0 +1,4 @@
1
+ /** Each column's max width is `MAX × (usableWidth / numCols)`. */
2
+ export declare const EVEN_SHARE_RATIO: {
3
+ readonly MAX: 2;
4
+ };
@@ -0,0 +1,8 @@
1
+ export declare const sumWidths: (widths: Array<number>) => number;
2
+ /**
3
+ * Clamps each desired width to `[tableCellMinWidth, MAX × evenShare]`. Greedy
4
+ * columns (paragraphs) hit the ceiling and wrap; small columns stay at their
5
+ * natural width. Leftover canvas budget grows ceiling-hitters up to their
6
+ * desired; overflow reclaims from ceiling-hitters only.
7
+ */
8
+ export declare const distributeByEvenShareRatio: (desiredWidths: Array<number>, editorContainerWidth: number) => Array<number>;
@@ -0,0 +1,7 @@
1
+ import { type TableMeasurement } from '../../../transforms/content-mode';
2
+ export declare const restoreResizerContainer: (resizerContainer: HTMLElement | undefined | null) => void;
3
+ /**
4
+ * Smart-adjust: measure unconstrained max-content per column, then clamp via
5
+ * `distributeByEvenShareRatio`.
6
+ */
7
+ export declare const runSmartAdjust: (tableRef: HTMLTableElement, resizerContainer: HTMLElement | undefined | null, resizerItem: HTMLElement | undefined | null, editorContainerWidthFromApi: number | undefined) => TableMeasurement;
@@ -1,3 +1,3 @@
1
1
  import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
2
2
  import type { TableMenuComponentsParams } from '../shared/types';
3
- export declare const getColumnMenuComponents: ({ api }: TableMenuComponentsParams) => RegisterComponent[];
3
+ export declare const getColumnMenuComponents: ({ api, }: TableMenuComponentsParams) => RegisterComponent[];
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import type { TableMenuComponentsParams } from '../../shared/types';
3
- export declare const DistributeColumnsItem: ({ api }: TableMenuComponentsParams) => React.JSX.Element | null;
3
+ export declare const DistributeColumnsItem: ({ api, }: TableMenuComponentsParams) => React.JSX.Element | null;
@@ -4,5 +4,6 @@ export type TableMeasurement = {
4
4
  colWidths: Array<number>;
5
5
  tableWidth: number;
6
6
  };
7
+ export declare const clampToEditorMaxWidth: (contentWidth: number) => number;
7
8
  export declare const getTableMeasurement: (tableRef: HTMLTableElement) => TableMeasurement;
8
9
  export declare const applyTableMeasurement: (tr: Transaction, tableNode: PMNode, { colWidths, tableWidth }: TableMeasurement, tablePos: number) => Transaction;
@@ -0,0 +1,8 @@
1
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
+ import type { PluginInjectionAPI } from '../../../types';
3
+ /**
4
+ * Iterates all top-level tables in the document, and for those in content mode,
5
+ * measures rendered column widths and sets colwidth + table width attributes
6
+ * in a single batched transaction.
7
+ */
8
+ export declare const applyMeasuredWidthToAllTables: (view: EditorView, pluginInjectionApi?: PluginInjectionAPI) => void;
@@ -0,0 +1,6 @@
1
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
+ import type { PluginInjectionAPI } from '../../../types';
3
+ /**
4
+ * Used to measure a selected table width with it's content being laid out natively by the browser
5
+ */
6
+ export declare const applyMeasuredWidthToSelectedTable: (view: EditorView, api?: PluginInjectionAPI) => void;
@@ -0,0 +1,7 @@
1
+ type ContentModePluginOptions = {
2
+ allowColumnResizing: boolean;
3
+ allowTableResizing: boolean;
4
+ isFullPageEditor: boolean;
5
+ };
6
+ export declare const isContentModeSupported: ({ allowColumnResizing, allowTableResizing, isFullPageEditor, }: ContentModePluginOptions) => boolean;
7
+ export {};
@@ -0,0 +1,2 @@
1
+ import { type TableMeasurement } from '../../transforms/content-mode';
2
+ export declare const measureTableWithAutoLayout: (tableRef: HTMLTableElement, editorContainerWidth?: number) => TableMeasurement;
@@ -0,0 +1,4 @@
1
+ /** Each column's max width is `MAX × (usableWidth / numCols)`. */
2
+ export declare const EVEN_SHARE_RATIO: {
3
+ readonly MAX: 2;
4
+ };
@@ -0,0 +1,8 @@
1
+ export declare const sumWidths: (widths: Array<number>) => number;
2
+ /**
3
+ * Clamps each desired width to `[tableCellMinWidth, MAX × evenShare]`. Greedy
4
+ * columns (paragraphs) hit the ceiling and wrap; small columns stay at their
5
+ * natural width. Leftover canvas budget grows ceiling-hitters up to their
6
+ * desired; overflow reclaims from ceiling-hitters only.
7
+ */
8
+ export declare const distributeByEvenShareRatio: (desiredWidths: Array<number>, editorContainerWidth: number) => Array<number>;
@@ -0,0 +1,7 @@
1
+ import { type TableMeasurement } from '../../../transforms/content-mode';
2
+ export declare const restoreResizerContainer: (resizerContainer: HTMLElement | undefined | null) => void;
3
+ /**
4
+ * Smart-adjust: measure unconstrained max-content per column, then clamp via
5
+ * `distributeByEvenShareRatio`.
6
+ */
7
+ export declare const runSmartAdjust: (tableRef: HTMLTableElement, resizerContainer: HTMLElement | undefined | null, resizerItem: HTMLElement | undefined | null, editorContainerWidthFromApi: number | undefined) => TableMeasurement;
@@ -1,3 +1,3 @@
1
1
  import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
2
2
  import type { TableMenuComponentsParams } from '../shared/types';
3
- export declare const getColumnMenuComponents: ({ api }: TableMenuComponentsParams) => RegisterComponent[];
3
+ export declare const getColumnMenuComponents: ({ api, }: TableMenuComponentsParams) => RegisterComponent[];
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import type { TableMenuComponentsParams } from '../../shared/types';
3
- export declare const DistributeColumnsItem: ({ api }: TableMenuComponentsParams) => React.JSX.Element | null;
3
+ export declare const DistributeColumnsItem: ({ api, }: TableMenuComponentsParams) => React.JSX.Element | null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "22.4.13",
3
+ "version": "22.4.15",
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
  "singleton": true
29
29
  },
30
30
  "dependencies": {
31
- "@atlaskit/adf-schema": "^52.13.0",
31
+ "@atlaskit/adf-schema": "^52.14.0",
32
32
  "@atlaskit/button": "^23.11.0",
33
33
  "@atlaskit/custom-steps": "^0.17.0",
34
34
  "@atlaskit/editor-palette": "^2.2.0",
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/editor-plugin-batch-attribute-updates": "^10.1.0",
38
38
  "@atlaskit/editor-plugin-content-insertion": "^10.1.0",
39
39
  "@atlaskit/editor-plugin-editor-viewmode": "^12.1.0",
40
- "@atlaskit/editor-plugin-extension": "13.5.5",
40
+ "@atlaskit/editor-plugin-extension": "13.5.6",
41
41
  "@atlaskit/editor-plugin-guideline": "^10.1.0",
42
42
  "@atlaskit/editor-plugin-interaction": "^19.1.0",
43
43
  "@atlaskit/editor-plugin-limited-mode": "^7.2.0",
@@ -51,7 +51,7 @@
51
51
  "@atlaskit/editor-tables": "^2.10.0",
52
52
  "@atlaskit/editor-toolbar": "^1.7.0",
53
53
  "@atlaskit/editor-ui-control-model": "^1.2.0",
54
- "@atlaskit/icon": "^35.0.0",
54
+ "@atlaskit/icon": "^35.1.0",
55
55
  "@atlaskit/insm": "^0.4.0",
56
56
  "@atlaskit/menu": "^8.5.0",
57
57
  "@atlaskit/platform-feature-flags": "^1.1.0",
@@ -59,10 +59,10 @@
59
59
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
60
60
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
61
61
  "@atlaskit/primitives": "^19.0.0",
62
- "@atlaskit/tmp-editor-statsig": "^82.2.0",
62
+ "@atlaskit/tmp-editor-statsig": "^83.0.0",
63
63
  "@atlaskit/toggle": "^15.6.0",
64
64
  "@atlaskit/tokens": "^13.0.0",
65
- "@atlaskit/tooltip": "^22.2.0",
65
+ "@atlaskit/tooltip": "^22.3.0",
66
66
  "@babel/runtime": "^7.0.0",
67
67
  "@compiled/react": "^0.20.0",
68
68
  "@emotion/react": "^11.7.1",
@@ -74,7 +74,7 @@
74
74
  "uuid": "^3.1.0"
75
75
  },
76
76
  "peerDependencies": {
77
- "@atlaskit/editor-common": "^114.40.0",
77
+ "@atlaskit/editor-common": "^114.46.0",
78
78
  "react": "^18.2.0",
79
79
  "react-dom": "^18.2.0",
80
80
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -122,6 +122,9 @@
122
122
  "platform_editor_content_mode_button_mvp": {
123
123
  "type": "boolean"
124
124
  },
125
+ "platform_editor_table_fit_to_content_smart_adjust": {
126
+ "type": "boolean"
127
+ },
125
128
  "platform_editor_table_height_analytics": {
126
129
  "type": "boolean"
127
130
  },
@@ -169,6 +172,8 @@
169
172
  }
170
173
  },
171
174
  "devDependencies": {
175
+ "react": "^18.2.0",
176
+ "react-dom": "^18.2.0",
172
177
  "react-intl": "^6.6.2"
173
178
  }
174
179
  }