@atlaskit/editor-plugin-table 22.1.1 → 22.1.3
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 +14 -0
- package/dist/cjs/nodeviews/TableComponent.js +23 -3
- package/dist/cjs/pm-plugins/table-resizing/utils/scale-table.js +12 -1
- package/dist/cjs/pm-plugins/utils/nodes.js +19 -1
- package/dist/es2019/nodeviews/TableComponent.js +24 -4
- package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js +12 -1
- package/dist/es2019/pm-plugins/utils/nodes.js +18 -0
- package/dist/esm/nodeviews/TableComponent.js +24 -4
- package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js +12 -1
- package/dist/esm/pm-plugins/utils/nodes.js +18 -0
- package/dist/types/pm-plugins/utils/nodes.d.ts +5 -0
- package/dist/types-ts4.5/pm-plugins/utils/nodes.d.ts +5 -0
- package/package.json +7 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 22.1.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 22.1.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`3304011dd30e7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3304011dd30e7) -
|
|
14
|
+
Editor-6446: Fix reload page cause table inside the synced block to rescale when page is full
|
|
15
|
+
width
|
|
16
|
+
|
|
3
17
|
## 22.1.1
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -141,8 +141,28 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
141
141
|
var node = getNode();
|
|
142
142
|
var prevAttrs = prevNode.attrs;
|
|
143
143
|
var isNested = (0, _nodes.isTableNested)(_this.props.view.state, _this.props.getPos());
|
|
144
|
+
var tablePos = _this.props.getPos();
|
|
144
145
|
var parentWidth = _this.getParentNodeWidth();
|
|
145
|
-
|
|
146
|
+
var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && (0, _nodes.isTableNestedUnderBodiedSyncBlock)(_this.props.view.state, tablePos) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9');
|
|
147
|
+
if (useMeasuredWidthForBodiedSyncBlock) {
|
|
148
|
+
// Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
|
|
149
|
+
// value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
|
|
150
|
+
// at the time this handler runs. Fall back to `wrapperWidth` if the wrapper ref
|
|
151
|
+
// is not yet available. Both are guarded by `> 1` to ignore degenerate values
|
|
152
|
+
// that can appear before the element has been laid out.
|
|
153
|
+
var measuredWrapperWidth;
|
|
154
|
+
if (_this.wrapper && _this.wrapper.clientWidth > 1) {
|
|
155
|
+
measuredWrapperWidth = _this.wrapper.clientWidth;
|
|
156
|
+
} else if (_this.wrapperWidth && _this.wrapperWidth > 1) {
|
|
157
|
+
measuredWrapperWidth = _this.wrapperWidth;
|
|
158
|
+
}
|
|
159
|
+
if (measuredWrapperWidth !== undefined) {
|
|
160
|
+
// Override the default parentWidth so that scaleTable uses the real
|
|
161
|
+
// available width inside the sync-block rather than the full editor width.
|
|
162
|
+
parentWidth = measuredWrapperWidth;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
if (!useMeasuredWidthForBodiedSyncBlock && isNested && (0, _nodes.isTableNestedInMoreThanOneNode)(_this.props.view.state, _this.props.getPos())) {
|
|
146
166
|
var resizeObsWrapperWidth = _this.wrapperWidth || 0;
|
|
147
167
|
var wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (_this.state.parentWidth || 0));
|
|
148
168
|
var isOusideOfThreshold = wrapperWidthDiffBetweenRerenders <= NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD || wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;
|
|
@@ -322,8 +342,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
322
342
|
_getNode = props.getNode;
|
|
323
343
|
_this.node = _getNode();
|
|
324
344
|
_this.containerWidth = _containerWidth;
|
|
325
|
-
var
|
|
326
|
-
_this.isNestedInTable =
|
|
345
|
+
var _tablePos = props.getPos();
|
|
346
|
+
_this.isNestedInTable = _tablePos ? (0, _nesting.getParentOfTypeCount)(props.view.state.schema.nodes.table)(props.view.state.doc.resolve(_tablePos)) > 0 : false;
|
|
327
347
|
if (!_this.updateColGroupFromFullWidthChange) {
|
|
328
348
|
_this.updateColGroupFromFullWidthChange = (_options === null || _options === void 0 ? void 0 : _options.isFullWidthModeEnabled) && !(_options !== null && _options !== void 0 && _options.wasFullWidthModeEnabled);
|
|
329
349
|
}
|
|
@@ -9,7 +9,9 @@ exports.scaleTableTo = scaleTableTo;
|
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
10
|
var _nodeWidth = require("@atlaskit/editor-common/node-width");
|
|
11
11
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
12
|
+
var _syncBlock = require("@atlaskit/editor-common/sync-block");
|
|
12
13
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
14
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
15
|
var _columnWidth = require("../../transforms/column-width");
|
|
14
16
|
var _nodes = require("../../utils/nodes");
|
|
15
17
|
var _misc = require("../utils/misc");
|
|
@@ -171,7 +173,16 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
|
|
|
171
173
|
}
|
|
172
174
|
var resizeState;
|
|
173
175
|
if (parentWidth) {
|
|
174
|
-
|
|
176
|
+
var _tableRef$closest;
|
|
177
|
+
// When the table is nested inside a bodiedSyncBlock, the table's outer transparent
|
|
178
|
+
// left/right borders (1px total under `border-collapse: collapse`) cause the
|
|
179
|
+
// table's outer width to exceed the colgroup width by 1px. Subtract 1px from the
|
|
180
|
+
// parentWidth here so that the scaled colgroup fits within the sync-block
|
|
181
|
+
// container without overflowing.
|
|
182
|
+
var isNestedInBodiedSyncBlock = !!((_tableRef$closest = tableRef.closest) !== null && _tableRef$closest !== void 0 && _tableRef$closest.call(tableRef, ".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content))) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9');
|
|
183
|
+
var BORDER_COLLAPSE_WIDTH_PX = 1;
|
|
184
|
+
var adjustedParentWidth = isNestedInBodiedSyncBlock ? parentWidth - BORDER_COLLAPSE_WIDTH_PX : parentWidth;
|
|
185
|
+
resizeState = scaleWithParent(tableRef, adjustedParentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
|
|
175
186
|
} else {
|
|
176
187
|
resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
|
|
177
188
|
}
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.tablesHaveDifferentNoOfRows = exports.tablesHaveDifferentNoOfColumns = exports.tablesHaveDifferentColumnWidths = exports.supportedHeaderRow = exports.isTableNestedInMoreThanOneNode = exports.isTableNested = exports.isIsolating = exports.getTableWidth = exports.containsHeaderRow = exports.containsHeaderColumn = exports.checkIfNumberColumnEnabled = exports.checkIfHeaderRowEnabled = exports.checkIfHeaderColumnEnabled = void 0;
|
|
7
|
+
exports.tablesHaveDifferentNoOfRows = exports.tablesHaveDifferentNoOfColumns = exports.tablesHaveDifferentColumnWidths = exports.supportedHeaderRow = exports.isTableNestedUnderBodiedSyncBlock = exports.isTableNestedInMoreThanOneNode = exports.isTableNested = exports.isIsolating = exports.getTableWidth = exports.containsHeaderRow = exports.containsHeaderColumn = exports.checkIfNumberColumnEnabled = exports.checkIfHeaderRowEnabled = exports.checkIfHeaderColumnEnabled = void 0;
|
|
8
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
9
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
10
10
|
var _tableMap = require("@atlaskit/editor-tables/table-map");
|
|
@@ -109,6 +109,24 @@ var isTableNestedInMoreThanOneNode = exports.isTableNestedInMoreThanOneNode = fu
|
|
|
109
109
|
var tablePos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
110
110
|
return state.doc.resolve(tablePos).depth > 2;
|
|
111
111
|
};
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* True when the table sits under a bodiedSyncBlock ancestor.
|
|
115
|
+
* Used to prefer DOM-measured wrapper width over getParentNodeWidth() for stable scaling.
|
|
116
|
+
*/
|
|
117
|
+
var isTableNestedUnderBodiedSyncBlock = exports.isTableNestedUnderBodiedSyncBlock = function isTableNestedUnderBodiedSyncBlock(state, tablePos) {
|
|
118
|
+
var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
|
|
119
|
+
if (!bodiedSyncBlock) {
|
|
120
|
+
return false;
|
|
121
|
+
}
|
|
122
|
+
var $pos = state.doc.resolve(tablePos);
|
|
123
|
+
for (var d = $pos.depth; d > 0; d--) {
|
|
124
|
+
if ($pos.node(d).type === bodiedSyncBlock) {
|
|
125
|
+
return true;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
return false;
|
|
129
|
+
};
|
|
112
130
|
var anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
|
|
113
131
|
return (0, _utils.mapChildren)(node, function (child) {
|
|
114
132
|
return child.attrs.rowspan || 0;
|
|
@@ -25,7 +25,7 @@ import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
|
|
|
25
25
|
import { getLayoutSize, getScalingPercentForTableWithoutWidth, getTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
|
|
26
26
|
import { getResizeState, updateColgroup } from '../pm-plugins/table-resizing/utils/resize-state';
|
|
27
27
|
import { scaleTable } from '../pm-plugins/table-resizing/utils/scale-table';
|
|
28
|
-
import { containsHeaderRow, isTableNested, isTableNestedInMoreThanOneNode, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../pm-plugins/utils/nodes';
|
|
28
|
+
import { containsHeaderRow, isTableNested, isTableNestedInMoreThanOneNode, isTableNestedUnderBodiedSyncBlock, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../pm-plugins/utils/nodes';
|
|
29
29
|
import { getAssistiveMessage } from '../pm-plugins/utils/table';
|
|
30
30
|
import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
|
|
31
31
|
import { TableCssClassName as ClassName } from '../types';
|
|
@@ -121,8 +121,28 @@ class TableComponent extends React.Component {
|
|
|
121
121
|
const node = getNode();
|
|
122
122
|
const prevAttrs = prevNode.attrs;
|
|
123
123
|
const isNested = isTableNested(this.props.view.state, this.props.getPos());
|
|
124
|
+
const tablePos = this.props.getPos();
|
|
124
125
|
let parentWidth = this.getParentNodeWidth();
|
|
125
|
-
|
|
126
|
+
const useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && isTableNestedUnderBodiedSyncBlock(this.props.view.state, tablePos) && fg('platform_synced_block_patch_9');
|
|
127
|
+
if (useMeasuredWidthForBodiedSyncBlock) {
|
|
128
|
+
// Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
|
|
129
|
+
// value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
|
|
130
|
+
// at the time this handler runs. Fall back to `wrapperWidth` if the wrapper ref
|
|
131
|
+
// is not yet available. Both are guarded by `> 1` to ignore degenerate values
|
|
132
|
+
// that can appear before the element has been laid out.
|
|
133
|
+
let measuredWrapperWidth;
|
|
134
|
+
if (this.wrapper && this.wrapper.clientWidth > 1) {
|
|
135
|
+
measuredWrapperWidth = this.wrapper.clientWidth;
|
|
136
|
+
} else if (this.wrapperWidth && this.wrapperWidth > 1) {
|
|
137
|
+
measuredWrapperWidth = this.wrapperWidth;
|
|
138
|
+
}
|
|
139
|
+
if (measuredWrapperWidth !== undefined) {
|
|
140
|
+
// Override the default parentWidth so that scaleTable uses the real
|
|
141
|
+
// available width inside the sync-block rather than the full editor width.
|
|
142
|
+
parentWidth = measuredWrapperWidth;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(this.props.view.state, this.props.getPos())) {
|
|
126
146
|
const resizeObsWrapperWidth = this.wrapperWidth || 0;
|
|
127
147
|
const wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (this.state.parentWidth || 0));
|
|
128
148
|
const isOusideOfThreshold = wrapperWidthDiffBetweenRerenders <= NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD || wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;
|
|
@@ -315,8 +335,8 @@ class TableComponent extends React.Component {
|
|
|
315
335
|
} = props;
|
|
316
336
|
this.node = _getNode();
|
|
317
337
|
this.containerWidth = _containerWidth;
|
|
318
|
-
const
|
|
319
|
-
this.isNestedInTable =
|
|
338
|
+
const _tablePos = props.getPos();
|
|
339
|
+
this.isNestedInTable = _tablePos ? getParentOfTypeCount(props.view.state.schema.nodes.table)(props.view.state.doc.resolve(_tablePos)) > 0 : false;
|
|
320
340
|
if (!this.updateColGroupFromFullWidthChange) {
|
|
321
341
|
this.updateColGroupFromFullWidthChange = (_options === null || _options === void 0 ? void 0 : _options.isFullWidthModeEnabled) && !(_options !== null && _options !== void 0 && _options.wasFullWidthModeEnabled);
|
|
322
342
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
2
2
|
import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
3
|
+
import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
|
|
3
4
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
6
|
import { updateColumnWidths } from '../../transforms/column-width';
|
|
5
7
|
import { getTableWidth } from '../../utils/nodes';
|
|
6
8
|
import { getLayoutSize } from '../utils/misc';
|
|
@@ -157,7 +159,16 @@ export const scaleTable = (tableRef, options, domAtPos, api, isTableScalingEnabl
|
|
|
157
159
|
}
|
|
158
160
|
let resizeState;
|
|
159
161
|
if (parentWidth) {
|
|
160
|
-
|
|
162
|
+
var _tableRef$closest;
|
|
163
|
+
// When the table is nested inside a bodiedSyncBlock, the table's outer transparent
|
|
164
|
+
// left/right borders (1px total under `border-collapse: collapse`) cause the
|
|
165
|
+
// table's outer width to exceed the colgroup width by 1px. Subtract 1px from the
|
|
166
|
+
// parentWidth here so that the scaled colgroup fits within the sync-block
|
|
167
|
+
// container without overflowing.
|
|
168
|
+
const isNestedInBodiedSyncBlock = !!((_tableRef$closest = tableRef.closest) !== null && _tableRef$closest !== void 0 && _tableRef$closest.call(tableRef, `.${BodiedSyncBlockSharedCssClassName.content}`)) && fg('platform_synced_block_patch_9');
|
|
169
|
+
const BORDER_COLLAPSE_WIDTH_PX = 1;
|
|
170
|
+
const adjustedParentWidth = isNestedInBodiedSyncBlock ? parentWidth - BORDER_COLLAPSE_WIDTH_PX : parentWidth;
|
|
171
|
+
resizeState = scaleWithParent(tableRef, adjustedParentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
|
|
161
172
|
} else {
|
|
162
173
|
resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
|
|
163
174
|
}
|
|
@@ -89,6 +89,24 @@ export const isTableNested = (state, tablePos = 0) => {
|
|
|
89
89
|
export const isTableNestedInMoreThanOneNode = (state, tablePos = 0) => {
|
|
90
90
|
return state.doc.resolve(tablePos).depth > 2;
|
|
91
91
|
};
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* True when the table sits under a bodiedSyncBlock ancestor.
|
|
95
|
+
* Used to prefer DOM-measured wrapper width over getParentNodeWidth() for stable scaling.
|
|
96
|
+
*/
|
|
97
|
+
export const isTableNestedUnderBodiedSyncBlock = (state, tablePos) => {
|
|
98
|
+
const bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
|
|
99
|
+
if (!bodiedSyncBlock) {
|
|
100
|
+
return false;
|
|
101
|
+
}
|
|
102
|
+
const $pos = state.doc.resolve(tablePos);
|
|
103
|
+
for (let d = $pos.depth; d > 0; d--) {
|
|
104
|
+
if ($pos.node(d).type === bodiedSyncBlock) {
|
|
105
|
+
return true;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
return false;
|
|
109
|
+
};
|
|
92
110
|
const anyChildCellMergedAcrossRow = node => mapChildren(node, child => child.attrs.rowspan || 0).some(rowspan => rowspan > 1);
|
|
93
111
|
|
|
94
112
|
/**
|
|
@@ -38,7 +38,7 @@ import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
|
|
|
38
38
|
import { getLayoutSize, getScalingPercentForTableWithoutWidth, getTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
|
|
39
39
|
import { getResizeState, updateColgroup } from '../pm-plugins/table-resizing/utils/resize-state';
|
|
40
40
|
import { scaleTable } from '../pm-plugins/table-resizing/utils/scale-table';
|
|
41
|
-
import { containsHeaderRow, isTableNested, isTableNestedInMoreThanOneNode, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../pm-plugins/utils/nodes';
|
|
41
|
+
import { containsHeaderRow, isTableNested, isTableNestedInMoreThanOneNode, isTableNestedUnderBodiedSyncBlock, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../pm-plugins/utils/nodes';
|
|
42
42
|
import { getAssistiveMessage } from '../pm-plugins/utils/table';
|
|
43
43
|
import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
|
|
44
44
|
import { TableCssClassName as ClassName } from '../types';
|
|
@@ -135,8 +135,28 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
135
135
|
var node = getNode();
|
|
136
136
|
var prevAttrs = prevNode.attrs;
|
|
137
137
|
var isNested = isTableNested(_this.props.view.state, _this.props.getPos());
|
|
138
|
+
var tablePos = _this.props.getPos();
|
|
138
139
|
var parentWidth = _this.getParentNodeWidth();
|
|
139
|
-
|
|
140
|
+
var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && isTableNestedUnderBodiedSyncBlock(_this.props.view.state, tablePos) && fg('platform_synced_block_patch_9');
|
|
141
|
+
if (useMeasuredWidthForBodiedSyncBlock) {
|
|
142
|
+
// Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
|
|
143
|
+
// value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
|
|
144
|
+
// at the time this handler runs. Fall back to `wrapperWidth` if the wrapper ref
|
|
145
|
+
// is not yet available. Both are guarded by `> 1` to ignore degenerate values
|
|
146
|
+
// that can appear before the element has been laid out.
|
|
147
|
+
var measuredWrapperWidth;
|
|
148
|
+
if (_this.wrapper && _this.wrapper.clientWidth > 1) {
|
|
149
|
+
measuredWrapperWidth = _this.wrapper.clientWidth;
|
|
150
|
+
} else if (_this.wrapperWidth && _this.wrapperWidth > 1) {
|
|
151
|
+
measuredWrapperWidth = _this.wrapperWidth;
|
|
152
|
+
}
|
|
153
|
+
if (measuredWrapperWidth !== undefined) {
|
|
154
|
+
// Override the default parentWidth so that scaleTable uses the real
|
|
155
|
+
// available width inside the sync-block rather than the full editor width.
|
|
156
|
+
parentWidth = measuredWrapperWidth;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(_this.props.view.state, _this.props.getPos())) {
|
|
140
160
|
var resizeObsWrapperWidth = _this.wrapperWidth || 0;
|
|
141
161
|
var wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (_this.state.parentWidth || 0));
|
|
142
162
|
var isOusideOfThreshold = wrapperWidthDiffBetweenRerenders <= NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD || wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;
|
|
@@ -316,8 +336,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
316
336
|
_getNode = props.getNode;
|
|
317
337
|
_this.node = _getNode();
|
|
318
338
|
_this.containerWidth = _containerWidth;
|
|
319
|
-
var
|
|
320
|
-
_this.isNestedInTable =
|
|
339
|
+
var _tablePos = props.getPos();
|
|
340
|
+
_this.isNestedInTable = _tablePos ? getParentOfTypeCount(props.view.state.schema.nodes.table)(props.view.state.doc.resolve(_tablePos)) > 0 : false;
|
|
321
341
|
if (!_this.updateColGroupFromFullWidthChange) {
|
|
322
342
|
_this.updateColGroupFromFullWidthChange = (_options === null || _options === void 0 ? void 0 : _options.isFullWidthModeEnabled) && !(_options !== null && _options !== void 0 && _options.wasFullWidthModeEnabled);
|
|
323
343
|
}
|
|
@@ -3,7 +3,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
3
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
4
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
5
5
|
import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
6
|
+
import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
|
|
6
7
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
8
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
9
|
import { updateColumnWidths } from '../../transforms/column-width';
|
|
8
10
|
import { getTableWidth } from '../../utils/nodes';
|
|
9
11
|
import { getLayoutSize } from '../utils/misc';
|
|
@@ -163,7 +165,16 @@ export var scaleTable = function scaleTable(tableRef, options, domAtPos, api) {
|
|
|
163
165
|
}
|
|
164
166
|
var resizeState;
|
|
165
167
|
if (parentWidth) {
|
|
166
|
-
|
|
168
|
+
var _tableRef$closest;
|
|
169
|
+
// When the table is nested inside a bodiedSyncBlock, the table's outer transparent
|
|
170
|
+
// left/right borders (1px total under `border-collapse: collapse`) cause the
|
|
171
|
+
// table's outer width to exceed the colgroup width by 1px. Subtract 1px from the
|
|
172
|
+
// parentWidth here so that the scaled colgroup fits within the sync-block
|
|
173
|
+
// container without overflowing.
|
|
174
|
+
var isNestedInBodiedSyncBlock = !!((_tableRef$closest = tableRef.closest) !== null && _tableRef$closest !== void 0 && _tableRef$closest.call(tableRef, ".".concat(BodiedSyncBlockSharedCssClassName.content))) && fg('platform_synced_block_patch_9');
|
|
175
|
+
var BORDER_COLLAPSE_WIDTH_PX = 1;
|
|
176
|
+
var adjustedParentWidth = isNestedInBodiedSyncBlock ? parentWidth - BORDER_COLLAPSE_WIDTH_PX : parentWidth;
|
|
177
|
+
resizeState = scaleWithParent(tableRef, adjustedParentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
|
|
167
178
|
} else {
|
|
168
179
|
resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
|
|
169
180
|
}
|
|
@@ -102,6 +102,24 @@ export var isTableNestedInMoreThanOneNode = function isTableNestedInMoreThanOneN
|
|
|
102
102
|
var tablePos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
103
103
|
return state.doc.resolve(tablePos).depth > 2;
|
|
104
104
|
};
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* True when the table sits under a bodiedSyncBlock ancestor.
|
|
108
|
+
* Used to prefer DOM-measured wrapper width over getParentNodeWidth() for stable scaling.
|
|
109
|
+
*/
|
|
110
|
+
export var isTableNestedUnderBodiedSyncBlock = function isTableNestedUnderBodiedSyncBlock(state, tablePos) {
|
|
111
|
+
var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
|
|
112
|
+
if (!bodiedSyncBlock) {
|
|
113
|
+
return false;
|
|
114
|
+
}
|
|
115
|
+
var $pos = state.doc.resolve(tablePos);
|
|
116
|
+
for (var d = $pos.depth; d > 0; d--) {
|
|
117
|
+
if ($pos.node(d).type === bodiedSyncBlock) {
|
|
118
|
+
return true;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
return false;
|
|
122
|
+
};
|
|
105
123
|
var anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
|
|
106
124
|
return mapChildren(node, function (child) {
|
|
107
125
|
return child.attrs.rowspan || 0;
|
|
@@ -12,6 +12,11 @@ export declare const tablesHaveDifferentNoOfColumns: (currentTable: PmNode, prev
|
|
|
12
12
|
export declare const tablesHaveDifferentNoOfRows: (currentTable: PmNode, previousTable: PmNode) => boolean;
|
|
13
13
|
export declare const isTableNested: (state: EditorState, tablePos?: number) => boolean;
|
|
14
14
|
export declare const isTableNestedInMoreThanOneNode: (state: EditorState, tablePos?: number) => boolean;
|
|
15
|
+
/**
|
|
16
|
+
* True when the table sits under a bodiedSyncBlock ancestor.
|
|
17
|
+
* Used to prefer DOM-measured wrapper width over getParentNodeWidth() for stable scaling.
|
|
18
|
+
*/
|
|
19
|
+
export declare const isTableNestedUnderBodiedSyncBlock: (state: EditorState, tablePos: number) => boolean;
|
|
15
20
|
/**
|
|
16
21
|
* Check if a given node is a header row with this definition:
|
|
17
22
|
* - all children are tableHeader cells
|
|
@@ -12,6 +12,11 @@ export declare const tablesHaveDifferentNoOfColumns: (currentTable: PmNode, prev
|
|
|
12
12
|
export declare const tablesHaveDifferentNoOfRows: (currentTable: PmNode, previousTable: PmNode) => boolean;
|
|
13
13
|
export declare const isTableNested: (state: EditorState, tablePos?: number) => boolean;
|
|
14
14
|
export declare const isTableNestedInMoreThanOneNode: (state: EditorState, tablePos?: number) => boolean;
|
|
15
|
+
/**
|
|
16
|
+
* True when the table sits under a bodiedSyncBlock ancestor.
|
|
17
|
+
* Used to prefer DOM-measured wrapper width over getParentNodeWidth() for stable scaling.
|
|
18
|
+
*/
|
|
19
|
+
export declare const isTableNestedUnderBodiedSyncBlock: (state: EditorState, tablePos: number) => boolean;
|
|
15
20
|
/**
|
|
16
21
|
* Check if a given node is a header row with this definition:
|
|
17
22
|
* - all children are tableHeader cells
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "22.1.
|
|
3
|
+
"version": "22.1.3",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"@atlaskit/editor-plugin-batch-attribute-updates": "^10.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-content-insertion": "^10.0.0",
|
|
39
39
|
"@atlaskit/editor-plugin-editor-viewmode": "^12.0.0",
|
|
40
|
-
"@atlaskit/editor-plugin-extension": "13.0.
|
|
40
|
+
"@atlaskit/editor-plugin-extension": "13.0.2",
|
|
41
41
|
"@atlaskit/editor-plugin-guideline": "^10.0.0",
|
|
42
42
|
"@atlaskit/editor-plugin-interaction": "^19.0.0",
|
|
43
43
|
"@atlaskit/editor-plugin-limited-mode": "^7.0.0",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
|
57
57
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
|
|
58
58
|
"@atlaskit/primitives": "^19.0.0",
|
|
59
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
59
|
+
"@atlaskit/tmp-editor-statsig": "^64.0.0",
|
|
60
60
|
"@atlaskit/toggle": "^15.6.0",
|
|
61
61
|
"@atlaskit/tokens": "^13.0.0",
|
|
62
62
|
"@atlaskit/tooltip": "^21.1.0",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"uuid": "^3.1.0"
|
|
71
71
|
},
|
|
72
72
|
"peerDependencies": {
|
|
73
|
-
"@atlaskit/editor-common": "^114.
|
|
73
|
+
"@atlaskit/editor-common": "^114.5.0",
|
|
74
74
|
"react": "^18.2.0",
|
|
75
75
|
"react-dom": "^18.2.0",
|
|
76
76
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
@@ -168,6 +168,9 @@
|
|
|
168
168
|
},
|
|
169
169
|
"platform_editor_max_width_default_width": {
|
|
170
170
|
"type": "boolean"
|
|
171
|
+
},
|
|
172
|
+
"platform_synced_block_patch_9": {
|
|
173
|
+
"type": "boolean"
|
|
171
174
|
}
|
|
172
175
|
},
|
|
173
176
|
"devDependencies": {
|