@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.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/nodeviews/TableComponent.js +23 -21
- package/dist/cjs/nodeviews/table.js +2 -2
- package/dist/cjs/nodeviews/toDOM.js +2 -2
- package/dist/cjs/pm-plugins/main.js +4 -3
- package/dist/cjs/pm-plugins/table-width.js +2 -2
- package/dist/cjs/pm-plugins/transforms/content-mode.js +3 -2
- package/dist/cjs/pm-plugins/utils/tableMode/apply-measured-width-to-all-tables.js +70 -0
- package/dist/cjs/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.js +41 -0
- package/dist/cjs/pm-plugins/utils/tableMode/is-content-mode-supported.js +12 -0
- package/dist/cjs/pm-plugins/utils/tableMode/measure-table-with-auto-layout.js +113 -0
- package/dist/cjs/pm-plugins/utils/tableMode/smart-adjust/constants.js +10 -0
- package/dist/cjs/pm-plugins/utils/tableMode/smart-adjust/distribute-column-widths.js +83 -0
- package/dist/cjs/pm-plugins/utils/tableMode/smart-adjust/run-smart-adjust.js +56 -0
- package/dist/cjs/ui/toolbar.js +4 -3
- package/dist/es2019/nodeviews/TableComponent.js +23 -21
- package/dist/es2019/nodeviews/table.js +1 -1
- package/dist/es2019/nodeviews/toDOM.js +1 -1
- package/dist/es2019/pm-plugins/main.js +2 -1
- package/dist/es2019/pm-plugins/table-width.js +1 -1
- package/dist/es2019/pm-plugins/transforms/content-mode.js +2 -1
- package/dist/es2019/pm-plugins/utils/tableMode/apply-measured-width-to-all-tables.js +70 -0
- package/dist/es2019/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.js +38 -0
- package/dist/es2019/pm-plugins/utils/tableMode/is-content-mode-supported.js +7 -0
- package/dist/es2019/pm-plugins/utils/tableMode/measure-table-with-auto-layout.js +97 -0
- package/dist/es2019/pm-plugins/utils/tableMode/smart-adjust/constants.js +4 -0
- package/dist/es2019/pm-plugins/utils/tableMode/smart-adjust/distribute-column-widths.js +63 -0
- package/dist/es2019/pm-plugins/utils/tableMode/smart-adjust/run-smart-adjust.js +47 -0
- package/dist/es2019/ui/toolbar.js +2 -1
- package/dist/esm/nodeviews/TableComponent.js +23 -21
- package/dist/esm/nodeviews/table.js +1 -1
- package/dist/esm/nodeviews/toDOM.js +1 -1
- package/dist/esm/pm-plugins/main.js +2 -1
- package/dist/esm/pm-plugins/table-width.js +1 -1
- package/dist/esm/pm-plugins/transforms/content-mode.js +2 -1
- package/dist/esm/pm-plugins/utils/tableMode/apply-measured-width-to-all-tables.js +65 -0
- package/dist/esm/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.js +36 -0
- package/dist/esm/pm-plugins/utils/tableMode/is-content-mode-supported.js +6 -0
- package/dist/esm/pm-plugins/utils/tableMode/measure-table-with-auto-layout.js +107 -0
- package/dist/esm/pm-plugins/utils/tableMode/smart-adjust/constants.js +4 -0
- package/dist/esm/pm-plugins/utils/tableMode/smart-adjust/distribute-column-widths.js +77 -0
- package/dist/esm/pm-plugins/utils/tableMode/smart-adjust/run-smart-adjust.js +49 -0
- package/dist/esm/ui/toolbar.js +2 -1
- package/dist/types/pm-plugins/transforms/content-mode.d.ts +1 -0
- package/dist/types/pm-plugins/utils/tableMode/apply-measured-width-to-all-tables.d.ts +8 -0
- package/dist/types/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.d.ts +6 -0
- package/dist/types/pm-plugins/utils/tableMode/is-content-mode-supported.d.ts +7 -0
- package/dist/types/pm-plugins/utils/tableMode/measure-table-with-auto-layout.d.ts +2 -0
- package/dist/types/pm-plugins/utils/tableMode/smart-adjust/constants.d.ts +4 -0
- package/dist/types/pm-plugins/utils/tableMode/smart-adjust/distribute-column-widths.d.ts +8 -0
- package/dist/types/pm-plugins/utils/tableMode/smart-adjust/run-smart-adjust.d.ts +7 -0
- package/dist/types/ui/TableMenu/column/getColumnMenuComponents.d.ts +1 -1
- package/dist/types/ui/TableMenu/column/items/DistributeColumnsItem.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/transforms/content-mode.d.ts +1 -0
- package/dist/types-ts4.5/pm-plugins/utils/tableMode/apply-measured-width-to-all-tables.d.ts +8 -0
- package/dist/types-ts4.5/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.d.ts +6 -0
- package/dist/types-ts4.5/pm-plugins/utils/tableMode/is-content-mode-supported.d.ts +7 -0
- package/dist/types-ts4.5/pm-plugins/utils/tableMode/measure-table-with-auto-layout.d.ts +2 -0
- package/dist/types-ts4.5/pm-plugins/utils/tableMode/smart-adjust/constants.d.ts +4 -0
- package/dist/types-ts4.5/pm-plugins/utils/tableMode/smart-adjust/distribute-column-widths.d.ts +8 -0
- package/dist/types-ts4.5/pm-plugins/utils/tableMode/smart-adjust/run-smart-adjust.d.ts +7 -0
- package/dist/types-ts4.5/ui/TableMenu/column/getColumnMenuComponents.d.ts +1 -1
- package/dist/types-ts4.5/ui/TableMenu/column/items/DistributeColumnsItem.d.ts +1 -1
- package/package.json +12 -7
- package/dist/cjs/pm-plugins/utils/tableMode.js +0 -162
- package/dist/es2019/pm-plugins/utils/tableMode.js +0 -158
- package/dist/esm/pm-plugins/utils/tableMode.js +0 -156
- package/dist/types/pm-plugins/utils/tableMode.d.ts +0 -26
- 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,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
|
+
};
|
package/dist/esm/ui/toolbar.js
CHANGED
|
@@ -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
|
|
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,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;
|
package/dist/types-ts4.5/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.d.ts
ADDED
|
@@ -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 {};
|
package/dist/types-ts4.5/pm-plugins/utils/tableMode/smart-adjust/distribute-column-widths.d.ts
ADDED
|
@@ -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.
|
|
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.
|
|
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.
|
|
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.
|
|
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": "^
|
|
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.
|
|
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.
|
|
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
|
}
|