@atlaskit/editor-plugin-table 22.4.14 → 22.4.15

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 22.4.15
+
+### Patch Changes
+
+- [`122438a5ab2b7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/122438a5ab2b7) -
+  Improve fit to content table column width distribution
+- Updated dependencies
+
 ## 22.4.14
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -41,7 +41,7 @@ var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
 var _scaleTable = require("../pm-plugins/table-resizing/utils/scale-table");
 var _nodes = require("../pm-plugins/utils/nodes");
 var _table2 = require("../pm-plugins/utils/table");
-var _tableMode = require("../pm-plugins/utils/tableMode");
+var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
 var _types = require("../types");
 var _eventHandlers = require("../ui/event-handlers");
 var _TableFloatingColumnControls = _interopRequireDefault(require("../ui/TableFloatingColumnControls"));
@@ -785,7 +785,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             // Deferred from setDomAttrs — remove only once colgroup is updated and table has left content mode.
             if ((_this$table7 = this.table) !== null && _this$table7 !== void 0 && _this$table7.hasAttribute('data-initial-width-mode') && !(0, _table.isTableInContentMode)({
               tableNode: currentTable,
-              isSupported: (0, _tableMode.isContentModeSupported)({
+              isSupported: (0, _isContentModeSupported.isContentModeSupported)({
                 allowColumnResizing: !!allowColumnResizing,
                 allowTableResizing: !!allowTableResizing,
                 isFullPageEditor: !((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor) && !((_this$props$options11 = this.props.options) !== null && _this$props$options11 !== void 0 && _this$props$options11.isChromelessEditor)

package/dist/cjs/nodeviews/table.js

@@ -27,7 +27,7 @@ var _createPluginConfig = require("../pm-plugins/create-plugin-config");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _tableWidth = require("../pm-plugins/table-width");
 var _nodes = require("../pm-plugins/utils/nodes");
-var _tableMode = require("../pm-plugins/utils/tableMode");
+var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
 var _TableComponentWithSharedState = require("./TableComponentWithSharedState");
 var _toDOM = require("./toDOM");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -253,7 +253,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
       // fire exposure here
       if ((0, _table.isTableInContentMode)({
         tableNode: node,
-        isSupported: (0, _tableMode.isContentModeSupported)({
+        isSupported: (0, _isContentModeSupported.isContentModeSupported)({
           allowColumnResizing: !!this.reactComponentProps.allowColumnResizing,
           allowTableResizing: !!this.reactComponentProps.allowTableResizing,
           isFullPageEditor: !((_this$reactComponentP6 = this.reactComponentProps.options) !== null && _this$reactComponentP6 !== void 0 && _this$reactComponentP6.isCommentEditor) && !((_this$reactComponentP7 = this.reactComponentProps.options) !== null && _this$reactComponentP7 !== void 0 && _this$reactComponentP7.isChromelessEditor)

package/dist/cjs/nodeviews/toDOM.js

@@ -17,7 +17,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
 var _misc = require("../pm-plugins/table-resizing/utils/misc");
-var _tableMode = require("../pm-plugins/utils/tableMode");
+var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
 var _tableContainerStyles = require("./table-container-styles");
 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; }
 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) { (0, _defineProperty2.default)(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; }
@@ -28,7 +28,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
       var isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
       var isInContentMode = (0, _table.isTableInContentMode)({
         tableNode: node,
-        isSupported: (0, _tableMode.isContentModeSupported)({
+        isSupported: (0, _isContentModeSupported.isContentModeSupported)({
           allowColumnResizing: config.allowColumnResizing,
           allowTableResizing: config.tableResizingEnabled,
           isFullPageEditor: isFullPageEditor

package/dist/cjs/pm-plugins/main.js

@@ -33,7 +33,8 @@ var _fixTables = require("./transforms/fix-tables");
 var _replaceTable = require("./transforms/replace-table");
 var _decoration = require("./utils/decoration");
 var _paste = require("./utils/paste");
-var _tableMode = require("./utils/tableMode");
+var _applyMeasuredWidthToAllTables = require("./utils/tableMode/apply-measured-width-to-all-tables");
+var _isContentModeSupported = require("./utils/tableMode/is-content-mode-supported");
 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; }
 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) { (0, _defineProperty2.default)(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; }
 var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) {
@@ -140,7 +141,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
       editorViewRef = editorView;
       var contentModeSizeTableId = null;
       var focusListenerBinding = null;
-      if ((pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 || (_pluginInjectionApi$e = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.mode) !== 'view' && (0, _tableMode.isContentModeSupported)({
+      if ((pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 || (_pluginInjectionApi$e = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.mode) !== 'view' && (0, _isContentModeSupported.isContentModeSupported)({
         allowColumnResizing: !!pluginConfig.allowColumnResizing,
         allowTableResizing: !!pluginConfig.allowTableResizing,
         isFullPageEditor: !isChromelessEditor && !isCommentEditor
@@ -155,7 +156,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
               if (!editorViewRef) {
                 return;
               }
-              (0, _tableMode.applyMeasuredWidthToAllTables)(editorViewRef, pluginInjectionApi);
+              (0, _applyMeasuredWidthToAllTables.applyMeasuredWidthToAllTables)(editorViewRef, pluginInjectionApi);
             });
           },
           options: {

package/dist/cjs/pm-plugins/table-width.js

@@ -16,7 +16,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _consts = require("./table-resizing/utils/consts");
 var _alignment = require("./utils/alignment");
-var _tableMode = require("./utils/tableMode");
+var _isContentModeSupported = require("./utils/tableMode/is-content-mode-supported");
 var _excluded = ["width"];
 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; }
 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) { (0, _defineProperty2.default)(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; } /**
@@ -72,7 +72,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
         newState.doc.forEach(function (node, offset) {
           if ((0, _table.isTableInContentMode)({
             tableNode: node,
-            isSupported: (0, _tableMode.isContentModeSupported)({
+            isSupported: (0, _isContentModeSupported.isContentModeSupported)({
               allowColumnResizing: true,
               allowTableResizing: true,
               isFullPageEditor: true

package/dist/cjs/pm-plugins/transforms/content-mode.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableMeasurement = exports.applyTableMeasurement = void 0;
+exports.getTableMeasurement = exports.clampToEditorMaxWidth = exports.applyTableMeasurement = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -12,10 +12,11 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tableTransformUtils = require("./table-transform-utils");
 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; }
 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) { (0, _defineProperty2.default)(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; }
-var tableWidth = function tableWidth(contentWidth) {
+var clampToEditorMaxWidth = exports.clampToEditorMaxWidth = function clampToEditorMaxWidth(contentWidth) {
   var maxEditorWidth = (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? _editorSharedStyles.akEditorMaxLayoutWidth : _editorSharedStyles.akEditorFullWidthLayoutWidth;
   return Math.min(maxEditorWidth, contentWidth);
 };
+var tableWidth = clampToEditorMaxWidth;
 var getTableMeasurement = exports.getTableMeasurement = function getTableMeasurement(tableRef) {
   var colWidths = getRenderedColgroupColumnWidths(tableRef);
   var totalContentWidth = colWidths.reduce(function (acc, current) {

package/dist/cjs/pm-plugins/utils/tableMode/apply-measured-width-to-all-tables.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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");
+var _contentMode = require("../../transforms/content-mode");
+/**
+ * Iterates all top-level tables in the document, and for those in content mode,
+ * measures rendered column widths and sets colwidth + table width attributes
+ * in a single batched transaction.
+ */
+var applyMeasuredWidthToAllTables = exports.applyMeasuredWidthToAllTables = function applyMeasuredWidthToAllTables(view, pluginInjectionApi) {
+  var _view$state = view.state,
+    doc = _view$state.doc,
+    schema = _view$state.schema;
+  var tr = view.state.tr;
+  var table = schema.nodes.table;
+  var modified = false;
+  var measuredTables = [];
+
+  // modify only top-level tables
+  doc.forEach(function (node, offset) {
+    if (node.type !== table || (0, _table.hasTableBeenResized)(node) && node.attrs.layout !== 'align-start') {
+      return;
+    }
+    var domNode = view.domAtPos(offset + 1).node;
+    var tableWrapper = domNode instanceof HTMLElement ? domNode.closest(".".concat(_styles.TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP)) : null;
+    var tableRef = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.querySelector('table');
+    if (!tableRef) {
+      return;
+    }
+    measuredTables.push({
+      node: node,
+      offset: offset,
+      measurement: (0, _contentMode.getTableMeasurement)(tableRef)
+    });
+  });
+  measuredTables.forEach(function (_ref) {
+    var node = _ref.node,
+      offset = _ref.offset,
+      measurement = _ref.measurement;
+    tr = (0, _contentMode.applyTableMeasurement)(tr, node, measurement, offset);
+    modified = true;
+  });
+  if (modified) {
+    var _pluginInjectionApi$a, _pluginInjectionApi$w, _pluginInjectionApi$w2;
+    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({
+      action: _analytics.TABLE_ACTION.FIT_TO_CONTENT_AUTO_CONVERTED,
+      actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+      actionSubjectId: null,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        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,
+        totalTablesResized: measuredTables.length,
+        measurements: measuredTables.map(function (_ref2) {
+          var measurement = _ref2.measurement;
+          return {
+            tableWidth: measurement.tableWidth,
+            totalColumnCount: measurement.colWidths.length
+          };
+        })
+      }
+    })(tr);
+    view.dispatch(tr.setMeta('addToHistory', false));
+  }
+};

package/dist/cjs/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyMeasuredWidthToSelectedTable = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _contentMode = require("../../transforms/content-mode");
+var _measureTableWithAutoLayout = require("./measure-table-with-auto-layout");
+/**
+ * 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$width, _api$analytics, _api$width$sharedStat, _api$width2;
+  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 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;
+  var measurement = (0, _measureTableWithAutoLayout.measureTableWithAutoLayout)(tableState.tableRef, editorContainerWidth);
+  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,
+    actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: {
+      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,
+      tableWidth: measurement.tableWidth,
+      totalColumnCount: measurement.colWidths.length
+    }
+  })(tr);
+  view.dispatch(tr);
+};

package/dist/cjs/pm-plugins/utils/tableMode/is-content-mode-supported.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isContentModeSupported = void 0;
+var isContentModeSupported = exports.isContentModeSupported = function isContentModeSupported(_ref) {
+  var allowColumnResizing = _ref.allowColumnResizing,
+    allowTableResizing = _ref.allowTableResizing,
+    isFullPageEditor = _ref.isFullPageEditor;
+  return allowColumnResizing && allowTableResizing && isFullPageEditor;
+};

package/dist/cjs/pm-plugins/utils/tableMode/measure-table-with-auto-layout.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.measureTableWithAutoLayout = void 0;
+var _styles = require("@atlaskit/editor-common/styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _contentMode = require("../../transforms/content-mode");
+var _runSmartAdjust = require("./smart-adjust/run-smart-adjust");
+var measureTableWithAutoLayout = exports.measureTableWithAutoLayout = function measureTableWithAutoLayout(tableRef, editorContainerWidth) {
+  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');
+  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;
+  tableRef.style.width = '';
+  tableRef.style.tableLayout = 'auto';
+  cols.forEach(function (col) {
+    return col.style.width = '';
+  });
+  if ((0, _platformFeatureFlags.fg)('platform_editor_table_fit_to_content_smart_adjust')) {
+    var hadTableSticky = tableRef.classList.contains(_styles.TableSharedCssClassName.TABLE_STICKY);
+    var prevTableMarginTop = tableRef.style.marginTop;
+    if (hadTableSticky) {
+      tableRef.classList.remove(_styles.TableSharedCssClassName.TABLE_NATIVE_STICKY);
+    }
+    if (prevTableMarginTop) {
+      tableRef.style.marginTop = '';
+    }
+    var stickyRows = Array.from(tableRef.querySelectorAll("tr.sticky, tr.".concat(_styles.TableSharedCssClassName.TABLE_NATIVE_STICKY)));
+    var prevStickyRowState = stickyRows.map(function (row) {
+      return {
+        row: row,
+        hadSticky: row.classList.contains('sticky'),
+        hadNative: row.classList.contains(_styles.TableSharedCssClassName.TABLE_NATIVE_STICKY),
+        width: row.style.width,
+        top: row.style.top,
+        position: row.style.position,
+        gridTemplateColumns: row.style.gridTemplateColumns
+      };
+    });
+    stickyRows.forEach(function (row) {
+      row.classList.remove('sticky');
+      row.classList.remove(_styles.TableSharedCssClassName.TABLE_NATIVE_STICKY);
+      row.style.width = '';
+      row.style.top = '';
+      row.style.position = '';
+      row.style.gridTemplateColumns = '';
+    });
+    try {
+      return (0, _runSmartAdjust.runSmartAdjust)(tableRef, resizerContainer, resizerItem, editorContainerWidth);
+    } finally {
+      tableRef.style.width = prevTableWidth;
+      tableRef.style.tableLayout = prevTableLayout;
+      cols.forEach(function (col, i) {
+        return col.style.width = prevColWidths[i];
+      });
+      if (hadTableSticky) {
+        tableRef.classList.add(_styles.TableSharedCssClassName.TABLE_STICKY);
+      }
+      if (prevTableMarginTop) {
+        tableRef.style.marginTop = prevTableMarginTop;
+      }
+      prevStickyRowState.forEach(function (state) {
+        if (state.hadSticky) {
+          state.row.classList.add('sticky');
+        }
+        if (state.hadNative) {
+          state.row.classList.add(_styles.TableSharedCssClassName.TABLE_NATIVE_STICKY);
+        }
+        if (state.width) {
+          state.row.style.width = state.width;
+        }
+        if (state.top) {
+          state.row.style.top = state.top;
+        }
+        if (state.position) {
+          state.row.style.position = state.position;
+        }
+        if (state.gridTemplateColumns) {
+          state.row.style.gridTemplateColumns = state.gridTemplateColumns;
+        }
+      });
+      (0, _runSmartAdjust.restoreResizerContainer)(resizerContainer);
+      if (resizerItem) {
+        resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
+      }
+    }
+  }
+  if (resizerContainer) {
+    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);
+  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;
+};

package/dist/cjs/pm-plugins/utils/tableMode/smart-adjust/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EVEN_SHARE_RATIO = void 0;
+/** Each column's max width is `MAX × (usableWidth / numCols)`. */
+var EVEN_SHARE_RATIO = exports.EVEN_SHARE_RATIO = {
+  MAX: 2
+};

package/dist/cjs/pm-plugins/utils/tableMode/smart-adjust/distribute-column-widths.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sumWidths = exports.distributeByEvenShareRatio = void 0;
+var _styles = require("@atlaskit/editor-common/styles");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _constants = require("./constants");
+var sumWidths = exports.sumWidths = function sumWidths(widths) {
+  return widths.reduce(function (sum, width) {
+    return sum + width;
+  }, 0);
+};
+
+// 2px absorbs sub-pixel rounding in `getRenderedColgroupColumnWidths`.
+var SUB_PIXEL_ROUNDING_ALLOWANCE = 2;
+
+/**
+ * Clamps each desired width to `[tableCellMinWidth, MAX × evenShare]`. Greedy
+ * columns (paragraphs) hit the ceiling and wrap; small columns stay at their
+ * natural width. Leftover canvas budget grows ceiling-hitters up to their
+ * desired; overflow reclaims from ceiling-hitters only.
+ */
+var distributeByEvenShareRatio = exports.distributeByEvenShareRatio = function distributeByEvenShareRatio(desiredWidths, editorContainerWidth) {
+  if (desiredWidths.length === 0 || !isFinite(editorContainerWidth) || editorContainerWidth <= 0) {
+    return desiredWidths;
+  }
+  var usableWidth = Math.max(editorContainerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2, _styles.tableCellMinWidth * desiredWidths.length);
+  var evenShare = usableWidth / desiredWidths.length;
+  var ceiling = _constants.EVEN_SHARE_RATIO.MAX * evenShare;
+  var isCompactColumn = function isCompactColumn(width) {
+    return width <= ceiling;
+  };
+  var desiredCeil = desiredWidths.map(function (desired) {
+    return Math.max(_styles.tableCellMinWidth, Math.ceil(desired) + SUB_PIXEL_ROUNDING_ALLOWANCE);
+  });
+  var capped = desiredCeil.map(function (desired) {
+    return isCompactColumn(desired) ? desired : Math.min(ceiling, desired);
+  });
+  var sum = sumWidths(capped);
+
+  // Underflow: grow non-protected ceiling-hitters into the leftover, up to their desired.
+  if (sum < usableWidth) {
+    var leftover = usableWidth - sum;
+    var growthHeadroom = capped.map(function (width, index) {
+      return !isCompactColumn(desiredCeil[index]) && width >= ceiling ? Math.max(desiredCeil[index] - width, 0) : 0;
+    });
+    var totalHeadroom = sumWidths(growthHeadroom);
+    if (totalHeadroom > 0) {
+      var totalGrowth = Math.min(leftover, totalHeadroom);
+      return capped.map(function (width, index) {
+        var headroom = growthHeadroom[index];
+        if (headroom <= 0) {
+          return width;
+        }
+        return width + headroom / totalHeadroom * totalGrowth;
+      });
+    }
+    return capped;
+  }
+  if (sum === usableWidth) {
+    return capped;
+  }
+
+  // Overflow: reclaim from non-protected ceiling-hitters only.
+  var overage = sum - usableWidth;
+  var slacks = capped.map(function (width, index) {
+    return !isCompactColumn(desiredCeil[index]) && width >= ceiling ? Math.max(width - _styles.tableCellMinWidth, 0) : 0;
+  });
+  var totalSlack = sumWidths(slacks);
+  if (totalSlack <= 0) {
+    return capped;
+  }
+  return capped.map(function (width, index) {
+    var slack = slacks[index];
+    if (slack <= 0) {
+      return width;
+    }
+    var share = slack / totalSlack * Math.min(overage, totalSlack);
+    return Math.max(width - share, _styles.tableCellMinWidth);
+  });
+};

package/dist/cjs/pm-plugins/utils/tableMode/smart-adjust/run-smart-adjust.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.runSmartAdjust = exports.restoreResizerContainer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _contentMode = require("../../../transforms/content-mode");
+var _distributeColumnWidths = require("./distribute-column-widths");
+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; }
+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) { (0, _defineProperty2.default)(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; }
+var measureWithIntrinsicWidth = function measureWithIntrinsicWidth(tableRef, resizerContainer, resizerItem) {
+  if (resizerContainer) {
+    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 prevTableWidth = tableRef.style.width;
+  var prevTableMaxWidth = tableRef.style.maxWidth;
+  var prevTableMinWidth = tableRef.style.minWidth;
+  tableRef.style.setProperty('width', 'max-content', 'important');
+  tableRef.style.setProperty('max-width', 'none', 'important');
+  tableRef.style.setProperty('min-width', '0', 'important');
+  try {
+    return (0, _contentMode.getTableMeasurement)(tableRef);
+  } finally {
+    tableRef.style.width = prevTableWidth;
+    tableRef.style.maxWidth = prevTableMaxWidth;
+    tableRef.style.minWidth = prevTableMinWidth;
+  }
+};
+var restoreResizerContainer = exports.restoreResizerContainer = function restoreResizerContainer(resizerContainer) {
+  if (!resizerContainer) {
+    return;
+  }
+  resizerContainer.style.width = 'var(--ak-editor-table-width)';
+  resizerContainer.style.removeProperty('--ak-editor-table-width');
+};
+
+/**
+ * Smart-adjust: measure unconstrained max-content per column, then clamp via
+ * `distributeByEvenShareRatio`.
+ */
+var runSmartAdjust = exports.runSmartAdjust = function runSmartAdjust(tableRef, resizerContainer, resizerItem, editorContainerWidthFromApi) {
+  var preferredMeasurement = measureWithIntrinsicWidth(tableRef, resizerContainer, resizerItem);
+  var desiredWidths = preferredMeasurement.colWidths;
+  var editorContainerWidth = editorContainerWidthFromApi !== null && editorContainerWidthFromApi !== void 0 ? editorContainerWidthFromApi : (0, _distributeColumnWidths.sumWidths)(desiredWidths);
+  var colWidths = (0, _distributeColumnWidths.distributeByEvenShareRatio)(desiredWidths, editorContainerWidth);
+  return _objectSpread(_objectSpread({}, preferredMeasurement), {}, {
+    colWidths: colWidths,
+    tableWidth: (0, _distributeColumnWidths.sumWidths)(colWidths)
+  });
+};

package/dist/cjs/ui/toolbar.js

@@ -50,7 +50,8 @@ var _alignment = require("../pm-plugins/utils/alignment");
 var _nodes = require("../pm-plugins/utils/nodes");
 var _selection = require("../pm-plugins/utils/selection");
 var _table = require("../pm-plugins/utils/table");
-var _tableMode = require("../pm-plugins/utils/tableMode");
+var _applyMeasuredWidthToSelectedTable = require("../pm-plugins/utils/tableMode/apply-measured-width-to-selected-table");
+var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
 var _types = require("../types");
 var _FloatingAlignmentButtons = require("./FloatingAlignmentButtons/FloatingAlignmentButtons");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -459,7 +460,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var isLimitedModeEnabled = (_api$limitedMode$shar = api === null || api === void 0 || (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.enabled) !== null && _api$limitedMode$shar !== void 0 ? _api$limitedMode$shar : false;
         var columnSettingsItems = getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor, isLimitedModeEnabled);
         var colorPicker = !areAnyNewToolbarFlagsEnabled ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView) : [];
-        var fitToContentButton = (0, _tableMode.isContentModeSupported)({
+        var fitToContentButton = (0, _isContentModeSupported.isContentModeSupported)({
           allowColumnResizing: !!pluginState.pluginConfig.allowColumnResizing,
           allowTableResizing: !!pluginState.pluginConfig.allowTableResizing,
           isFullPageEditor: !pluginState.isChromelessEditor && !pluginState.isCommentEditor
@@ -475,7 +476,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
           },
           onClick: function onClick(_state, _dispatch, view) {
             if (view) {
-              (0, _tableMode.applyMeasuredWidthToSelectedTable)(view, api !== null && api !== void 0 ? api : undefined);
+              (0, _applyMeasuredWidthToSelectedTable.applyMeasuredWidthToSelectedTable)(view, api !== null && api !== void 0 ? api : undefined);
             }
             return true;
           }

package/dist/es2019/nodeviews/TableComponent.js

@@ -28,7 +28,7 @@ import { getResizeState, updateColgroup } from '../pm-plugins/table-resizing/uti
 import { scaleTable } from '../pm-plugins/table-resizing/utils/scale-table';
 import { containsHeaderRow, isTableNested, isTableNestedInMoreThanOneNode, isTableNestedUnderBodiedSyncBlock, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../pm-plugins/utils/nodes';
 import { getAssistiveMessage } from '../pm-plugins/utils/table';
-import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
 import { TableCssClassName as ClassName } from '../types';
 import { handleMouseOut, handleMouseOver, isTableInFocus, withCellTracking } from '../ui/event-handlers';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';

package/dist/es2019/nodeviews/table.js

@@ -13,7 +13,7 @@ import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-con
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { isTableNested, tablesHaveDifferentColumnWidths } from '../pm-plugins/utils/nodes';
-import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
 import { TableComponentWithSharedState } from './TableComponentWithSharedState';
 import { tableNodeSpecWithFixedToDOM } from './toDOM';
 const tableAttributes = node => {

package/dist/es2019/nodeviews/toDOM.js

@@ -7,7 +7,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { generateColgroupFromNode, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS, getTableResizerItemWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
-import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
 import { getAlignmentStyle } from './table-container-styles';
 export const tableNodeSpecWithFixedToDOM = config => {
   const tableNode = config.isNestingSupported ? tableWithNestedTable : table;

package/dist/es2019/pm-plugins/main.js

@@ -25,7 +25,8 @@ import { fixTables } from './transforms/fix-tables';
 import { replaceSelectedTable } from './transforms/replace-table';
 import { findControlsHoverDecoration } from './utils/decoration';
 import { transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, transformSliceToRemoveOpenTable, transformSliceToRemoveNestedTables, isHeaderRowRequired, transformSliceTableLayoutDefaultToCenter } from './utils/paste';
-import { applyMeasuredWidthToAllTables, isContentModeSupported } from './utils/tableMode';
+import { applyMeasuredWidthToAllTables } from './utils/tableMode/apply-measured-width-to-all-tables';
+import { isContentModeSupported } from './utils/tableMode/is-content-mode-supported';
 export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) => {
   var _accessibilityUtils;
   const state = createPluginState(dispatch, {

package/dist/es2019/pm-plugins/table-width.js

@@ -13,7 +13,7 @@ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWi
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH } from './table-resizing/utils/consts';
 import { ALIGN_START } from './utils/alignment';
-import { isContentModeSupported } from './utils/tableMode';
+import { isContentModeSupported } from './utils/tableMode/is-content-mode-supported';
 export const pluginKey = new PluginKey('tableWidthPlugin');
 const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, maxWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
   return new SafePlugin({

package/dist/es2019/pm-plugins/transforms/content-mode.js

@@ -2,10 +2,11 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorFullWidthLayoutWidth, akEditorMaxLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { updateCellsMarkup } from './table-transform-utils';
-const tableWidth = contentWidth => {
+export const clampToEditorMaxWidth = contentWidth => {
   const maxEditorWidth = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? akEditorMaxLayoutWidth : akEditorFullWidthLayoutWidth;
   return Math.min(maxEditorWidth, contentWidth);
 };
+const tableWidth = clampToEditorMaxWidth;
 export const getTableMeasurement = tableRef => {
   const colWidths = getRenderedColgroupColumnWidths(tableRef);
   const totalContentWidth = colWidths.reduce((acc, current) => acc + current, 0);