@atlaskit/editor-plugin-table 22.1.2 → 22.1.4

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 (10) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/nodeviews/TableComponent.js +6 -5
  3. package/dist/cjs/pm-plugins/utils/tableMode.js +52 -20
  4. package/dist/es2019/nodeviews/TableComponent.js +6 -5
  5. package/dist/es2019/pm-plugins/utils/tableMode.js +46 -18
  6. package/dist/esm/nodeviews/TableComponent.js +6 -5
  7. package/dist/esm/pm-plugins/utils/tableMode.js +51 -19
  8. package/dist/types/pm-plugins/utils/tableMode.d.ts +7 -0
  9. package/dist/types-ts4.5/pm-plugins/utils/tableMode.d.ts +7 -0
  10. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 22.1.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`af869bf30a1e1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/af869bf30a1e1) -
8
+ Fix table-layout: auto inline style persisting after fit-to-content measurement
9
+
10
+ ## 22.1.3
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 22.1.2
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/nodeviews/TableComponent.js CHANGED
@@ -140,18 +140,19 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
140
140
  var prevNode = _this.node;
141
141
  var node = getNode();
142
142
  var prevAttrs = prevNode.attrs;
143
- var isNested = (0, _nodes.isTableNested)(_this.props.view.state, _this.props.getPos());
144
143
  var tablePos = _this.props.getPos();
144
+ var isNested = (0, _nodes.isTableNested)(_this.props.view.state, tablePos);
145
145
  var parentWidth = _this.getParentNodeWidth();
146
146
  var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && (0, _nodes.isTableNestedUnderBodiedSyncBlock)(_this.props.view.state, tablePos) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9');
147
147
  if (useMeasuredWidthForBodiedSyncBlock) {
148
148
  // Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
149
149
  // value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
150
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.
151
+ // is not yet available.
152
+ // The clientWidth > 0 since DOM clientWidth is 0 before layout
153
+ // The > 1 guard for wrapperWidth was intentional to filter out the degenerate value of 1 that ResizeObserver reports during element unmounting.
153
154
  var measuredWrapperWidth;
154
- if (_this.wrapper && _this.wrapper.clientWidth > 1) {
155
+ if (_this.wrapper && _this.wrapper.clientWidth > 0) {
155
156
  measuredWrapperWidth = _this.wrapper.clientWidth;
156
157
  } else if (_this.wrapperWidth && _this.wrapperWidth > 1) {
157
158
  measuredWrapperWidth = _this.wrapperWidth;
@@ -162,7 +163,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
162
163
  parentWidth = measuredWrapperWidth;
163
164
  }
164
165
  }
165
- if (!useMeasuredWidthForBodiedSyncBlock && isNested && (0, _nodes.isTableNestedInMoreThanOneNode)(_this.props.view.state, _this.props.getPos())) {
166
+ if (!useMeasuredWidthForBodiedSyncBlock && isNested && (0, _nodes.isTableNestedInMoreThanOneNode)(_this.props.view.state, tablePos)) {
166
167
  var resizeObsWrapperWidth = _this.wrapperWidth || 0;
167
168
  var wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (_this.state.parentWidth || 0));
168
169
  var isOusideOfThreshold = wrapperWidthDiffBetweenRerenders <= NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD || wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;
package/dist/cjs/pm-plugins/utils/tableMode.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.isContentModeSupported = exports.applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToAllTables = void 0;
6
+ exports.measureTableWithAutoLayout = exports.isContentModeSupported = exports.applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToAllTables = void 0;
7
7
  var _analytics = require("@atlaskit/editor-common/analytics");
8
8
  var _styles = require("@atlaskit/editor-common/styles");
9
9
  var _table = require("@atlaskit/editor-common/table");
@@ -78,42 +78,74 @@ var applyMeasuredWidthToAllTables = exports.applyMeasuredWidthToAllTables = func
78
78
  };
79
79
 
80
80
  /**
81
- * Used to measure a selected table width with it's content being laid out natively by the browser
81
+ * Temporarily overrides inline styles on the table and its surrounding containers so the browser
82
+ * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
83
+ * **resets every modified style** so no temporary overrides leak into the rendered output.
82
84
  */
83
- var applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
84
- var _api$analytics, _api$width$sharedStat, _api$width;
85
- var tableObject = (0, _utils.findTable)(view.state.selection);
86
- if (!tableObject) {
87
- return;
88
- }
89
- var node = tableObject.node,
90
- pos = tableObject.pos;
91
- var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
92
- if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
93
- return;
94
- }
95
- var tableRef = tableState.tableRef;
96
-
97
- // Instead of dispatching a transaction to "strip widths" and then waiting
98
- // for a rAF to measure natural column widths, instea directly update the DOM elements and
99
- // take a measurement.
85
+ var measureTableWithAutoLayout = exports.measureTableWithAutoLayout = function measureTableWithAutoLayout(tableRef) {
100
86
  var cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
101
87
  var contentWrap = tableRef.closest(".".concat(_styles.TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP));
102
88
  var resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(".".concat(_styles.TableSharedCssClassName.TABLE_RESIZER_CONTAINER));
103
89
  var resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
90
+
91
+ // Capture current inline styles so we can restore them after measurement
92
+ var prevTableWidth = tableRef.style.width;
93
+ var prevTableLayout = tableRef.style.tableLayout;
94
+ var prevColWidths = cols.map(function (col) {
95
+ return col.style.width;
96
+ });
97
+ var prevResizerItemWidth = resizerItem === null || resizerItem === void 0 ? void 0 : resizerItem.style.width;
98
+
99
+ // Apply temporary styles for content-based measurement
104
100
  tableRef.style.width = '';
105
101
  tableRef.style.tableLayout = 'auto';
106
102
  cols.forEach(function (col) {
107
103
  return col.style.width = '';
108
104
  });
109
105
  if (resizerContainer) {
110
- resizerContainer.style.width = 'max-content';
106
+ // favour CSS var to align with the table first render state, which gets reset
107
+ // once resized by user. By doing this we avoid the need to any 'reset' work after
108
+ // measurement and ensures it works if the table has been resized or not in the session.
109
+ resizerContainer.style.width = 'var(--ak-editor-table-width)';
111
110
  resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
112
111
  }
113
112
  if (resizerItem) {
114
113
  resizerItem.style.width = 'max-content';
115
114
  }
116
115
  var measurement = (0, _contentMode.getTableMeasurement)(tableRef);
116
+
117
+ // Reset all inline styles back to their previous values
118
+ tableRef.style.width = prevTableWidth;
119
+ tableRef.style.tableLayout = prevTableLayout;
120
+ cols.forEach(function (col, i) {
121
+ return col.style.width = prevColWidths[i];
122
+ });
123
+ if (resizerItem) {
124
+ resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
125
+ }
126
+ return measurement;
127
+ };
128
+
129
+ /**
130
+ * Used to measure a selected table width with it's content being laid out natively by the browser
131
+ */
132
+ var applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
133
+ var _api$analytics, _api$width$sharedStat, _api$width;
134
+ var tableObject = (0, _utils.findTable)(view.state.selection);
135
+ if (!tableObject) {
136
+ return;
137
+ }
138
+ var node = tableObject.node,
139
+ pos = tableObject.pos;
140
+ var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
141
+ if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
142
+ return;
143
+ }
144
+
145
+ // Instead of dispatching a transaction to "strip widths" and then waiting
146
+ // for a rAF to measure natural column widths, directly update the DOM elements,
147
+ // take a measurement, and reset styles so no temporary overrides persist.
148
+ var measurement = measureTableWithAutoLayout(tableState.tableRef);
117
149
  var tr = (0, _contentMode.applyTableMeasurement)(view.state.tr, node, measurement, pos);
118
150
  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({
119
151
  action: _analytics.TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,
package/dist/es2019/nodeviews/TableComponent.js CHANGED
@@ -120,18 +120,19 @@ class TableComponent extends React.Component {
120
120
  const prevNode = this.node;
121
121
  const node = getNode();
122
122
  const prevAttrs = prevNode.attrs;
123
- const isNested = isTableNested(this.props.view.state, this.props.getPos());
124
123
  const tablePos = this.props.getPos();
124
+ const isNested = isTableNested(this.props.view.state, tablePos);
125
125
  let parentWidth = this.getParentNodeWidth();
126
126
  const useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && isTableNestedUnderBodiedSyncBlock(this.props.view.state, tablePos) && fg('platform_synced_block_patch_9');
127
127
  if (useMeasuredWidthForBodiedSyncBlock) {
128
128
  // Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
129
129
  // value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
130
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.
131
+ // is not yet available.
132
+ // The clientWidth > 0 since DOM clientWidth is 0 before layout
133
+ // The > 1 guard for wrapperWidth was intentional to filter out the degenerate value of 1 that ResizeObserver reports during element unmounting.
133
134
  let measuredWrapperWidth;
134
- if (this.wrapper && this.wrapper.clientWidth > 1) {
135
+ if (this.wrapper && this.wrapper.clientWidth > 0) {
135
136
  measuredWrapperWidth = this.wrapper.clientWidth;
136
137
  } else if (this.wrapperWidth && this.wrapperWidth > 1) {
137
138
  measuredWrapperWidth = this.wrapperWidth;
@@ -142,7 +143,7 @@ class TableComponent extends React.Component {
142
143
  parentWidth = measuredWrapperWidth;
143
144
  }
144
145
  }
145
- if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(this.props.view.state, this.props.getPos())) {
146
+ if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(this.props.view.state, tablePos)) {
146
147
  const resizeObsWrapperWidth = this.wrapperWidth || 0;
147
148
  const wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (this.state.parentWidth || 0));
148
149
  const isOusideOfThreshold = wrapperWidthDiffBetweenRerenders <= NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD || wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;
package/dist/es2019/pm-plugins/utils/tableMode.js CHANGED
@@ -77,6 +77,49 @@ export const applyMeasuredWidthToAllTables = (view, pluginInjectionApi) => {
77
77
  }
78
78
  };
79
79
 
80
+ /**
81
+ * Temporarily overrides inline styles on the table and its surrounding containers so the browser
82
+ * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
83
+ * **resets every modified style** so no temporary overrides leak into the rendered output.
84
+ */
85
+ export const measureTableWithAutoLayout = tableRef => {
86
+ const cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
87
+ const contentWrap = tableRef.closest(`.${TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP}`);
88
+ const resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(`.${TableSharedCssClassName.TABLE_RESIZER_CONTAINER}`);
89
+ const resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
90
+
91
+ // Capture current inline styles so we can restore them after measurement
92
+ const prevTableWidth = tableRef.style.width;
93
+ const prevTableLayout = tableRef.style.tableLayout;
94
+ const prevColWidths = cols.map(col => col.style.width);
95
+ const prevResizerItemWidth = resizerItem === null || resizerItem === void 0 ? void 0 : resizerItem.style.width;
96
+
97
+ // Apply temporary styles for content-based measurement
98
+ tableRef.style.width = '';
99
+ tableRef.style.tableLayout = 'auto';
100
+ cols.forEach(col => col.style.width = '');
101
+ if (resizerContainer) {
102
+ // favour CSS var to align with the table first render state, which gets reset
103
+ // once resized by user. By doing this we avoid the need to any 'reset' work after
104
+ // measurement and ensures it works if the table has been resized or not in the session.
105
+ resizerContainer.style.width = 'var(--ak-editor-table-width)';
106
+ resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
107
+ }
108
+ if (resizerItem) {
109
+ resizerItem.style.width = 'max-content';
110
+ }
111
+ const measurement = getTableMeasurement(tableRef);
112
+
113
+ // Reset all inline styles back to their previous values
114
+ tableRef.style.width = prevTableWidth;
115
+ tableRef.style.tableLayout = prevTableLayout;
116
+ cols.forEach((col, i) => col.style.width = prevColWidths[i]);
117
+ if (resizerItem) {
118
+ resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
119
+ }
120
+ return measurement;
121
+ };
122
+
80
123
  /**
81
124
  * Used to measure a selected table width with it's content being laid out natively by the browser
82
125
  */
@@ -94,26 +137,11 @@ export const applyMeasuredWidthToSelectedTable = (view, api) => {
94
137
  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
95
138
  return;
96
139
  }
97
- const tableRef = tableState.tableRef;
98
140
 
99
141
  // Instead of dispatching a transaction to "strip widths" and then waiting
100
- // for a rAF to measure natural column widths, instea directly update the DOM elements and
101
- // take a measurement.
102
- const cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
103
- const contentWrap = tableRef.closest(`.${TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP}`);
104
- const resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(`.${TableSharedCssClassName.TABLE_RESIZER_CONTAINER}`);
105
- const resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
106
- tableRef.style.width = '';
107
- tableRef.style.tableLayout = 'auto';
108
- cols.forEach(col => col.style.width = '');
109
- if (resizerContainer) {
110
- resizerContainer.style.width = 'max-content';
111
- resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
112
- }
113
- if (resizerItem) {
114
- resizerItem.style.width = 'max-content';
115
- }
116
- const measurement = getTableMeasurement(tableRef);
142
+ // for a rAF to measure natural column widths, directly update the DOM elements,
143
+ // take a measurement, and reset styles so no temporary overrides persist.
144
+ const measurement = measureTableWithAutoLayout(tableState.tableRef);
117
145
  const tr = applyTableMeasurement(view.state.tr, node, measurement, pos);
118
146
  api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
119
147
  action: TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,
package/dist/esm/nodeviews/TableComponent.js CHANGED
@@ -134,18 +134,19 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
134
134
  var prevNode = _this.node;
135
135
  var node = getNode();
136
136
  var prevAttrs = prevNode.attrs;
137
- var isNested = isTableNested(_this.props.view.state, _this.props.getPos());
138
137
  var tablePos = _this.props.getPos();
138
+ var isNested = isTableNested(_this.props.view.state, tablePos);
139
139
  var parentWidth = _this.getParentNodeWidth();
140
140
  var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && isTableNestedUnderBodiedSyncBlock(_this.props.view.state, tablePos) && fg('platform_synced_block_patch_9');
141
141
  if (useMeasuredWidthForBodiedSyncBlock) {
142
142
  // Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
143
143
  // value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
144
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.
145
+ // is not yet available.
146
+ // The clientWidth > 0 since DOM clientWidth is 0 before layout
147
+ // The > 1 guard for wrapperWidth was intentional to filter out the degenerate value of 1 that ResizeObserver reports during element unmounting.
147
148
  var measuredWrapperWidth;
148
- if (_this.wrapper && _this.wrapper.clientWidth > 1) {
149
+ if (_this.wrapper && _this.wrapper.clientWidth > 0) {
149
150
  measuredWrapperWidth = _this.wrapper.clientWidth;
150
151
  } else if (_this.wrapperWidth && _this.wrapperWidth > 1) {
151
152
  measuredWrapperWidth = _this.wrapperWidth;
@@ -156,7 +157,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
156
157
  parentWidth = measuredWrapperWidth;
157
158
  }
158
159
  }
159
- if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(_this.props.view.state, _this.props.getPos())) {
160
+ if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(_this.props.view.state, tablePos)) {
160
161
  var resizeObsWrapperWidth = _this.wrapperWidth || 0;
161
162
  var wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (_this.state.parentWidth || 0));
162
163
  var isOusideOfThreshold = wrapperWidthDiffBetweenRerenders <= NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD || wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;
package/dist/esm/pm-plugins/utils/tableMode.js CHANGED
@@ -72,42 +72,74 @@ export var applyMeasuredWidthToAllTables = function applyMeasuredWidthToAllTable
72
72
  };
73
73
 
74
74
  /**
75
- * Used to measure a selected table width with it's content being laid out natively by the browser
75
+ * Temporarily overrides inline styles on the table and its surrounding containers so the browser
76
+ * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
77
+ * **resets every modified style** so no temporary overrides leak into the rendered output.
76
78
  */
77
- export var applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
78
- var _api$analytics, _api$width$sharedStat, _api$width;
79
- var tableObject = findTable(view.state.selection);
80
- if (!tableObject) {
81
- return;
82
- }
83
- var node = tableObject.node,
84
- pos = tableObject.pos;
85
- var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
86
- if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
87
- return;
88
- }
89
- var tableRef = tableState.tableRef;
90
-
91
- // Instead of dispatching a transaction to "strip widths" and then waiting
92
- // for a rAF to measure natural column widths, instea directly update the DOM elements and
93
- // take a measurement.
79
+ export var measureTableWithAutoLayout = function measureTableWithAutoLayout(tableRef) {
94
80
  var cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
95
81
  var contentWrap = tableRef.closest(".".concat(TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP));
96
82
  var resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(".".concat(TableSharedCssClassName.TABLE_RESIZER_CONTAINER));
97
83
  var resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
84
+
85
+ // Capture current inline styles so we can restore them after measurement
86
+ var prevTableWidth = tableRef.style.width;
87
+ var prevTableLayout = tableRef.style.tableLayout;
88
+ var prevColWidths = cols.map(function (col) {
89
+ return col.style.width;
90
+ });
91
+ var prevResizerItemWidth = resizerItem === null || resizerItem === void 0 ? void 0 : resizerItem.style.width;
92
+
93
+ // Apply temporary styles for content-based measurement
98
94
  tableRef.style.width = '';
99
95
  tableRef.style.tableLayout = 'auto';
100
96
  cols.forEach(function (col) {
101
97
  return col.style.width = '';
102
98
  });
103
99
  if (resizerContainer) {
104
- resizerContainer.style.width = 'max-content';
100
+ // favour CSS var to align with the table first render state, which gets reset
101
+ // once resized by user. By doing this we avoid the need to any 'reset' work after
102
+ // measurement and ensures it works if the table has been resized or not in the session.
103
+ resizerContainer.style.width = 'var(--ak-editor-table-width)';
105
104
  resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
106
105
  }
107
106
  if (resizerItem) {
108
107
  resizerItem.style.width = 'max-content';
109
108
  }
110
109
  var measurement = getTableMeasurement(tableRef);
110
+
111
+ // Reset all inline styles back to their previous values
112
+ tableRef.style.width = prevTableWidth;
113
+ tableRef.style.tableLayout = prevTableLayout;
114
+ cols.forEach(function (col, i) {
115
+ return col.style.width = prevColWidths[i];
116
+ });
117
+ if (resizerItem) {
118
+ resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
119
+ }
120
+ return measurement;
121
+ };
122
+
123
+ /**
124
+ * Used to measure a selected table width with it's content being laid out natively by the browser
125
+ */
126
+ export var applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
127
+ var _api$analytics, _api$width$sharedStat, _api$width;
128
+ var tableObject = findTable(view.state.selection);
129
+ if (!tableObject) {
130
+ return;
131
+ }
132
+ var node = tableObject.node,
133
+ pos = tableObject.pos;
134
+ var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
135
+ if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
136
+ return;
137
+ }
138
+
139
+ // Instead of dispatching a transaction to "strip widths" and then waiting
140
+ // for a rAF to measure natural column widths, directly update the DOM elements,
141
+ // take a measurement, and reset styles so no temporary overrides persist.
142
+ var measurement = measureTableWithAutoLayout(tableState.tableRef);
111
143
  var tr = applyTableMeasurement(view.state.tr, node, measurement, pos);
112
144
  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({
113
145
  action: TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,
package/dist/types/pm-plugins/utils/tableMode.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
2
  import type { PluginInjectionAPI } from '../../types';
3
+ import { type TableMeasurement } from '../transforms/content-mode';
3
4
  type ContentModePluginOptions = {
4
5
  allowColumnResizing: boolean;
5
6
  allowTableResizing: boolean;
@@ -12,6 +13,12 @@ export declare const isContentModeSupported: ({ allowColumnResizing, allowTableR
12
13
  * in a single batched transaction.
13
14
  */
14
15
  export declare const applyMeasuredWidthToAllTables: (view: EditorView, pluginInjectionApi?: PluginInjectionAPI) => void;
16
+ /**
17
+ * Temporarily overrides inline styles on the table and its surrounding containers so the browser
18
+ * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
19
+ * **resets every modified style** so no temporary overrides leak into the rendered output.
20
+ */
21
+ export declare const measureTableWithAutoLayout: (tableRef: HTMLTableElement) => TableMeasurement;
15
22
  /**
16
23
  * Used to measure a selected table width with it's content being laid out natively by the browser
17
24
  */
package/dist/types-ts4.5/pm-plugins/utils/tableMode.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
2
  import type { PluginInjectionAPI } from '../../types';
3
+ import { type TableMeasurement } from '../transforms/content-mode';
3
4
  type ContentModePluginOptions = {
4
5
  allowColumnResizing: boolean;
5
6
  allowTableResizing: boolean;
@@ -12,6 +13,12 @@ export declare const isContentModeSupported: ({ allowColumnResizing, allowTableR
12
13
  * in a single batched transaction.
13
14
  */
14
15
  export declare const applyMeasuredWidthToAllTables: (view: EditorView, pluginInjectionApi?: PluginInjectionAPI) => void;
16
+ /**
17
+ * Temporarily overrides inline styles on the table and its surrounding containers so the browser
18
+ * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
19
+ * **resets every modified style** so no temporary overrides leak into the rendered output.
20
+ */
21
+ export declare const measureTableWithAutoLayout: (tableRef: HTMLTableElement) => TableMeasurement;
15
22
  /**
16
23
  * Used to measure a selected table width with it's content being laid out natively by the browser
17
24
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "22.1.2",
3
+ "version": "22.1.4",
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.1",
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": "^63.0.0",
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.2.0",
73
+ "@atlaskit/editor-common": "^114.6.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"