@atlaskit/editor-plugin-table 22.1.3 → 22.1.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 22.1.4
+
+### Patch Changes
+
+- [`af869bf30a1e1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/af869bf30a1e1) -
+  Fix table-layout: auto inline style persisting after fit-to-content measurement
+
 ## 22.1.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -140,18 +140,19 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var prevNode = _this.node;
       var node = getNode();
       var prevAttrs = prevNode.attrs;
-      var isNested = (0, _nodes.isTableNested)(_this.props.view.state, _this.props.getPos());
       var tablePos = _this.props.getPos();
+      var isNested = (0, _nodes.isTableNested)(_this.props.view.state, tablePos);
       var parentWidth = _this.getParentNodeWidth();
       var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && (0, _nodes.isTableNestedUnderBodiedSyncBlock)(_this.props.view.state, tablePos) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9');
       if (useMeasuredWidthForBodiedSyncBlock) {
         // Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
         // value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
         // at the time this handler runs. Fall back to `wrapperWidth` if the wrapper ref
-        // is not yet available. Both are guarded by `> 1` to ignore degenerate values
-        // that can appear before the element has been laid out.
+        // is not yet available.
+        // The clientWidth > 0 since DOM clientWidth is 0 before layout
+        // The > 1 guard for wrapperWidth was intentional to filter out the degenerate value of 1 that ResizeObserver reports during element unmounting.
         var measuredWrapperWidth;
-        if (_this.wrapper && _this.wrapper.clientWidth > 1) {
+        if (_this.wrapper && _this.wrapper.clientWidth > 0) {
           measuredWrapperWidth = _this.wrapper.clientWidth;
         } else if (_this.wrapperWidth && _this.wrapperWidth > 1) {
           measuredWrapperWidth = _this.wrapperWidth;
@@ -162,7 +163,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           parentWidth = measuredWrapperWidth;
         }
       }
-      if (!useMeasuredWidthForBodiedSyncBlock && isNested && (0, _nodes.isTableNestedInMoreThanOneNode)(_this.props.view.state, _this.props.getPos())) {
+      if (!useMeasuredWidthForBodiedSyncBlock && isNested && (0, _nodes.isTableNestedInMoreThanOneNode)(_this.props.view.state, tablePos)) {
         var resizeObsWrapperWidth = _this.wrapperWidth || 0;
         var wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (_this.state.parentWidth || 0));
         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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isContentModeSupported = exports.applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToAllTables = void 0;
+exports.measureTableWithAutoLayout = exports.isContentModeSupported = exports.applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToAllTables = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _styles = require("@atlaskit/editor-common/styles");
 var _table = require("@atlaskit/editor-common/table");
@@ -78,42 +78,74 @@ var applyMeasuredWidthToAllTables = exports.applyMeasuredWidthToAllTables = func
 };
 
 /**
- * Used to measure a selected table width with it's content being laid out natively by the browser
+ * Temporarily overrides inline styles on the table and its surrounding containers so the browser
+ * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
+ * **resets every modified style** so no temporary overrides leak into the rendered output.
  */
-var applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
-  var _api$analytics, _api$width$sharedStat, _api$width;
-  var tableObject = (0, _utils.findTable)(view.state.selection);
-  if (!tableObject) {
-    return;
-  }
-  var node = tableObject.node,
-    pos = tableObject.pos;
-  var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
-  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
-    return;
-  }
-  var tableRef = tableState.tableRef;
-
-  // Instead of dispatching a transaction to "strip widths" and then waiting
-  // for a rAF to measure natural column widths, instea directly update the DOM elements and
-  // take a measurement.
+var measureTableWithAutoLayout = exports.measureTableWithAutoLayout = function measureTableWithAutoLayout(tableRef) {
   var cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
   var contentWrap = tableRef.closest(".".concat(_styles.TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP));
   var resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(".".concat(_styles.TableSharedCssClassName.TABLE_RESIZER_CONTAINER));
   var resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
+
+  // Capture current inline styles so we can restore them after measurement
+  var prevTableWidth = tableRef.style.width;
+  var prevTableLayout = tableRef.style.tableLayout;
+  var prevColWidths = cols.map(function (col) {
+    return col.style.width;
+  });
+  var prevResizerItemWidth = resizerItem === null || resizerItem === void 0 ? void 0 : resizerItem.style.width;
+
+  // Apply temporary styles for content-based measurement
   tableRef.style.width = '';
   tableRef.style.tableLayout = 'auto';
   cols.forEach(function (col) {
     return col.style.width = '';
   });
   if (resizerContainer) {
-    resizerContainer.style.width = 'max-content';
+    // favour CSS var to align with the table first render state, which gets reset
+    // once resized by user. By doing this we avoid the need to any 'reset' work after
+    // measurement and ensures it works if the table has been resized or not in the session.
+    resizerContainer.style.width = 'var(--ak-editor-table-width)';
     resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
   }
   if (resizerItem) {
     resizerItem.style.width = 'max-content';
   }
   var measurement = (0, _contentMode.getTableMeasurement)(tableRef);
+
+  // Reset all inline styles back to their previous values
+  tableRef.style.width = prevTableWidth;
+  tableRef.style.tableLayout = prevTableLayout;
+  cols.forEach(function (col, i) {
+    return col.style.width = prevColWidths[i];
+  });
+  if (resizerItem) {
+    resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
+  }
+  return measurement;
+};
+
+/**
+ * Used to measure a selected table width with it's content being laid out natively by the browser
+ */
+var applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
+  var _api$analytics, _api$width$sharedStat, _api$width;
+  var tableObject = (0, _utils.findTable)(view.state.selection);
+  if (!tableObject) {
+    return;
+  }
+  var node = tableObject.node,
+    pos = tableObject.pos;
+  var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
+  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
+    return;
+  }
+
+  // Instead of dispatching a transaction to "strip widths" and then waiting
+  // for a rAF to measure natural column widths, directly update the DOM elements,
+  // take a measurement, and reset styles so no temporary overrides persist.
+  var measurement = measureTableWithAutoLayout(tableState.tableRef);
   var tr = (0, _contentMode.applyTableMeasurement)(view.state.tr, node, measurement, pos);
   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({
     action: _analytics.TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,

package/dist/es2019/nodeviews/TableComponent.js

@@ -120,18 +120,19 @@ class TableComponent extends React.Component {
       const prevNode = this.node;
       const node = getNode();
       const prevAttrs = prevNode.attrs;
-      const isNested = isTableNested(this.props.view.state, this.props.getPos());
       const tablePos = this.props.getPos();
+      const isNested = isTableNested(this.props.view.state, tablePos);
       let parentWidth = this.getParentNodeWidth();
       const useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && isTableNestedUnderBodiedSyncBlock(this.props.view.state, tablePos) && fg('platform_synced_block_patch_9');
       if (useMeasuredWidthForBodiedSyncBlock) {
         // Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
         // value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
         // at the time this handler runs. Fall back to `wrapperWidth` if the wrapper ref
-        // is not yet available. Both are guarded by `> 1` to ignore degenerate values
-        // that can appear before the element has been laid out.
+        // is not yet available.
+        // The clientWidth > 0 since DOM clientWidth is 0 before layout
+        // The > 1 guard for wrapperWidth was intentional to filter out the degenerate value of 1 that ResizeObserver reports during element unmounting.
         let measuredWrapperWidth;
-        if (this.wrapper && this.wrapper.clientWidth > 1) {
+        if (this.wrapper && this.wrapper.clientWidth > 0) {
           measuredWrapperWidth = this.wrapper.clientWidth;
         } else if (this.wrapperWidth && this.wrapperWidth > 1) {
           measuredWrapperWidth = this.wrapperWidth;
@@ -142,7 +143,7 @@ class TableComponent extends React.Component {
           parentWidth = measuredWrapperWidth;
         }
       }
-      if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(this.props.view.state, this.props.getPos())) {
+      if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(this.props.view.state, tablePos)) {
         const resizeObsWrapperWidth = this.wrapperWidth || 0;
         const wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (this.state.parentWidth || 0));
         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

@@ -77,6 +77,49 @@ export const applyMeasuredWidthToAllTables = (view, pluginInjectionApi) => {
   }
 };
 
+/**
+ * Temporarily overrides inline styles on the table and its surrounding containers so the browser
+ * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
+ * **resets every modified style** so no temporary overrides leak into the rendered output.
+ */
+export const measureTableWithAutoLayout = tableRef => {
+  const cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
+  const contentWrap = tableRef.closest(`.${TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP}`);
+  const resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(`.${TableSharedCssClassName.TABLE_RESIZER_CONTAINER}`);
+  const resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
+
+  // Capture current inline styles so we can restore them after measurement
+  const prevTableWidth = tableRef.style.width;
+  const prevTableLayout = tableRef.style.tableLayout;
+  const prevColWidths = cols.map(col => col.style.width);
+  const prevResizerItemWidth = resizerItem === null || resizerItem === void 0 ? void 0 : resizerItem.style.width;
+
+  // Apply temporary styles for content-based measurement
+  tableRef.style.width = '';
+  tableRef.style.tableLayout = 'auto';
+  cols.forEach(col => col.style.width = '');
+  if (resizerContainer) {
+    // favour CSS var to align with the table first render state, which gets reset
+    // once resized by user. By doing this we avoid the need to any 'reset' work after
+    // measurement and ensures it works if the table has been resized or not in the session.
+    resizerContainer.style.width = 'var(--ak-editor-table-width)';
+    resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
+  }
+  if (resizerItem) {
+    resizerItem.style.width = 'max-content';
+  }
+  const measurement = getTableMeasurement(tableRef);
+
+  // Reset all inline styles back to their previous values
+  tableRef.style.width = prevTableWidth;
+  tableRef.style.tableLayout = prevTableLayout;
+  cols.forEach((col, i) => col.style.width = prevColWidths[i]);
+  if (resizerItem) {
+    resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
+  }
+  return measurement;
+};
+
 /**
  * Used to measure a selected table width with it's content being laid out natively by the browser
  */
@@ -94,26 +137,11 @@ export const applyMeasuredWidthToSelectedTable = (view, api) => {
   if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
     return;
   }
-  const tableRef = tableState.tableRef;
 
   // Instead of dispatching a transaction to "strip widths" and then waiting
-  // for a rAF to measure natural column widths, instea directly update the DOM elements and
-  // take a measurement.
-  const cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
-  const contentWrap = tableRef.closest(`.${TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP}`);
-  const resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(`.${TableSharedCssClassName.TABLE_RESIZER_CONTAINER}`);
-  const resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
-  tableRef.style.width = '';
-  tableRef.style.tableLayout = 'auto';
-  cols.forEach(col => col.style.width = '');
-  if (resizerContainer) {
-    resizerContainer.style.width = 'max-content';
-    resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
-  }
-  if (resizerItem) {
-    resizerItem.style.width = 'max-content';
-  }
-  const measurement = getTableMeasurement(tableRef);
+  // for a rAF to measure natural column widths, directly update the DOM elements,
+  // take a measurement, and reset styles so no temporary overrides persist.
+  const measurement = measureTableWithAutoLayout(tableState.tableRef);
   const tr = applyTableMeasurement(view.state.tr, node, measurement, pos);
   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({
     action: TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,

package/dist/esm/nodeviews/TableComponent.js

@@ -134,18 +134,19 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var prevNode = _this.node;
       var node = getNode();
       var prevAttrs = prevNode.attrs;
-      var isNested = isTableNested(_this.props.view.state, _this.props.getPos());
       var tablePos = _this.props.getPos();
+      var isNested = isTableNested(_this.props.view.state, tablePos);
       var parentWidth = _this.getParentNodeWidth();
       var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && isTableNestedUnderBodiedSyncBlock(_this.props.view.state, tablePos) && fg('platform_synced_block_patch_9');
       if (useMeasuredWidthForBodiedSyncBlock) {
         // Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
         // value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
         // at the time this handler runs. Fall back to `wrapperWidth` if the wrapper ref
-        // is not yet available. Both are guarded by `> 1` to ignore degenerate values
-        // that can appear before the element has been laid out.
+        // is not yet available.
+        // The clientWidth > 0 since DOM clientWidth is 0 before layout
+        // The > 1 guard for wrapperWidth was intentional to filter out the degenerate value of 1 that ResizeObserver reports during element unmounting.
         var measuredWrapperWidth;
-        if (_this.wrapper && _this.wrapper.clientWidth > 1) {
+        if (_this.wrapper && _this.wrapper.clientWidth > 0) {
           measuredWrapperWidth = _this.wrapper.clientWidth;
         } else if (_this.wrapperWidth && _this.wrapperWidth > 1) {
           measuredWrapperWidth = _this.wrapperWidth;
@@ -156,7 +157,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           parentWidth = measuredWrapperWidth;
         }
       }
-      if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(_this.props.view.state, _this.props.getPos())) {
+      if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(_this.props.view.state, tablePos)) {
         var resizeObsWrapperWidth = _this.wrapperWidth || 0;
         var wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (_this.state.parentWidth || 0));
         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

@@ -72,42 +72,74 @@ export var applyMeasuredWidthToAllTables = function applyMeasuredWidthToAllTable
 };
 
 /**
- * Used to measure a selected table width with it's content being laid out natively by the browser
+ * Temporarily overrides inline styles on the table and its surrounding containers so the browser
+ * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
+ * **resets every modified style** so no temporary overrides leak into the rendered output.
  */
-export var applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
-  var _api$analytics, _api$width$sharedStat, _api$width;
-  var tableObject = findTable(view.state.selection);
-  if (!tableObject) {
-    return;
-  }
-  var node = tableObject.node,
-    pos = tableObject.pos;
-  var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
-  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
-    return;
-  }
-  var tableRef = tableState.tableRef;
-
-  // Instead of dispatching a transaction to "strip widths" and then waiting
-  // for a rAF to measure natural column widths, instea directly update the DOM elements and
-  // take a measurement.
+export var measureTableWithAutoLayout = function measureTableWithAutoLayout(tableRef) {
   var cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
   var contentWrap = tableRef.closest(".".concat(TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP));
   var resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(".".concat(TableSharedCssClassName.TABLE_RESIZER_CONTAINER));
   var resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
+
+  // Capture current inline styles so we can restore them after measurement
+  var prevTableWidth = tableRef.style.width;
+  var prevTableLayout = tableRef.style.tableLayout;
+  var prevColWidths = cols.map(function (col) {
+    return col.style.width;
+  });
+  var prevResizerItemWidth = resizerItem === null || resizerItem === void 0 ? void 0 : resizerItem.style.width;
+
+  // Apply temporary styles for content-based measurement
   tableRef.style.width = '';
   tableRef.style.tableLayout = 'auto';
   cols.forEach(function (col) {
     return col.style.width = '';
   });
   if (resizerContainer) {
-    resizerContainer.style.width = 'max-content';
+    // favour CSS var to align with the table first render state, which gets reset
+    // once resized by user. By doing this we avoid the need to any 'reset' work after
+    // measurement and ensures it works if the table has been resized or not in the session.
+    resizerContainer.style.width = 'var(--ak-editor-table-width)';
     resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
   }
   if (resizerItem) {
     resizerItem.style.width = 'max-content';
   }
   var measurement = getTableMeasurement(tableRef);
+
+  // Reset all inline styles back to their previous values
+  tableRef.style.width = prevTableWidth;
+  tableRef.style.tableLayout = prevTableLayout;
+  cols.forEach(function (col, i) {
+    return col.style.width = prevColWidths[i];
+  });
+  if (resizerItem) {
+    resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
+  }
+  return measurement;
+};
+
+/**
+ * Used to measure a selected table width with it's content being laid out natively by the browser
+ */
+export var applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
+  var _api$analytics, _api$width$sharedStat, _api$width;
+  var tableObject = findTable(view.state.selection);
+  if (!tableObject) {
+    return;
+  }
+  var node = tableObject.node,
+    pos = tableObject.pos;
+  var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
+  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
+    return;
+  }
+
+  // Instead of dispatching a transaction to "strip widths" and then waiting
+  // for a rAF to measure natural column widths, directly update the DOM elements,
+  // take a measurement, and reset styles so no temporary overrides persist.
+  var measurement = measureTableWithAutoLayout(tableState.tableRef);
   var tr = applyTableMeasurement(view.state.tr, node, measurement, pos);
   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({
     action: TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,

package/dist/types/pm-plugins/utils/tableMode.d.ts

@@ -1,5 +1,6 @@
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from '../../types';
+import { type TableMeasurement } from '../transforms/content-mode';
 type ContentModePluginOptions = {
     allowColumnResizing: boolean;
     allowTableResizing: boolean;
@@ -12,6 +13,12 @@ export declare const isContentModeSupported: ({ allowColumnResizing, allowTableR
  * in a single batched transaction.
  */
 export declare const applyMeasuredWidthToAllTables: (view: EditorView, pluginInjectionApi?: PluginInjectionAPI) => void;
+/**
+ * Temporarily overrides inline styles on the table and its surrounding containers so the browser
+ * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
+ * **resets every modified style** so no temporary overrides leak into the rendered output.
+ */
+export declare const measureTableWithAutoLayout: (tableRef: HTMLTableElement) => TableMeasurement;
 /**
  * Used to measure a selected table width with it's content being laid out natively by the browser
  */

package/dist/types-ts4.5/pm-plugins/utils/tableMode.d.ts

@@ -1,5 +1,6 @@
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from '../../types';
+import { type TableMeasurement } from '../transforms/content-mode';
 type ContentModePluginOptions = {
     allowColumnResizing: boolean;
     allowTableResizing: boolean;
@@ -12,6 +13,12 @@ export declare const isContentModeSupported: ({ allowColumnResizing, allowTableR
  * in a single batched transaction.
  */
 export declare const applyMeasuredWidthToAllTables: (view: EditorView, pluginInjectionApi?: PluginInjectionAPI) => void;
+/**
+ * Temporarily overrides inline styles on the table and its surrounding containers so the browser
+ * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
+ * **resets every modified style** so no temporary overrides leak into the rendered output.
+ */
+export declare const measureTableWithAutoLayout: (tableRef: HTMLTableElement) => TableMeasurement;
 /**
  * Used to measure a selected table width with it's content being laid out natively by the browser
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "22.1.3",
+	"version": "22.1.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -70,7 +70,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.5.0",
+		"@atlaskit/editor-common": "^114.6.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"