@atlaskit/editor-plugin-table 22.4.13 → 22.4.15

package/dist/es2019/nodeviews/TableComponent.js

@@ -8,6 +8,7 @@ import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { NodeViewContentHole } from '@atlaskit/editor-common/react-node-view';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
@@ -19,7 +20,7 @@ import { autoSizeTable, clearHoverSelection, setTableRef } from '../pm-plugins/c
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils/autoscrollers';
 import { pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers/plugin-key';
 import { findStickyHeaderForTable } from '../pm-plugins/sticky-headers/util';
-import { insertColgroupFromNode, hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
+import { hasTableBeenResized, insertColgroupFromNode } from '../pm-plugins/table-resizing/utils/colgroup';
 import { COLUMN_MIN_WIDTH, TABLE_EDITOR_MARGIN, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { getLayoutSize, getScalingPercentForTableWithoutWidth, getTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
@@ -27,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';
@@ -71,6 +72,21 @@ class TableComponent extends React.Component {
       this.props.view.dispatch(tr);
     });
     _defineProperty(this, "lastSetTableRef", null);
+    _defineProperty(this, "setWrapperRef", elem => {
+      this.wrapper = elem;
+      if (!elem) {
+        return;
+      }
+      this.props.contentDOM(elem);
+      const tableElement = elem.querySelector('table');
+      if (tableElement !== this.table) {
+        this.table = tableElement;
+        this.observeTable(this.table);
+        if (this.table && (!expValEquals('platform_editor_table_ref_optimisation', 'isEnabled', true) || this.props.tableActive) && this.props.view && !expValEquals('platform_editor_fix_editor_unhandled_type_errors', 'isEnabled', true) && (expValEquals('platform_editor_table_update_table_ref', 'isEnabled', true) || fg('platform_editor_enable_table_update_ref_atlas'))) {
+          setTableRef(this.table)(this.props.view.state, this.props.view.dispatch);
+        }
+      }
+    });
     _defineProperty(this, "onStickyState", state => {
       const pos = this.props.getPos();
       if (!isValidPosition(pos, this.props.view.state)) {
@@ -919,26 +935,12 @@ class TableComponent extends React.Component {
         var _this$wrapper4;
         return ((_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.clientWidth) || 760;
       }
-    }), /*#__PURE__*/React.createElement("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    }), /*#__PURE__*/React.createElement(NodeViewContentHole
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: classnames(ClassName.TABLE_NODE_WRAPPER),
-      ref: elem => {
-        this.wrapper = elem;
-        if (elem) {
-          this.props.contentDOM(elem);
-          const tableElement = elem.querySelector('table');
-          if (tableElement !== this.table) {
-            this.table = tableElement;
-            this.observeTable(this.table);
-
-            // // Update tableRef in plugin state when table is properly mounted
-            // // At this point, both table and wrapper are in DOM with correct parent-child relationship
-            if (this.table && (!expValEquals('platform_editor_table_ref_optimisation', 'isEnabled', true) || this.props.tableActive) && this.props.view && !expValEquals('platform_editor_fix_editor_unhandled_type_errors', 'isEnabled', true) && (expValEquals('platform_editor_table_update_table_ref', 'isEnabled', true) || fg('platform_editor_enable_table_update_ref_atlas'))) {
-              setTableRef(this.table)(this.props.view.state, this.props.view.dispatch);
-            }
-          }
-        }
-      }
+      ref: this.setWrapperRef
     }, allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,

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);

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

@@ -0,0 +1,70 @@
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { hasTableBeenResized } from '@atlaskit/editor-common/table';
+import { applyTableMeasurement, getTableMeasurement } from '../../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.
+ */
+export const applyMeasuredWidthToAllTables = (view, pluginInjectionApi) => {
+  const {
+    state: {
+      doc,
+      schema
+    }
+  } = view;
+  let tr = view.state.tr;
+  const {
+    table
+  } = schema.nodes;
+  let modified = false;
+  const measuredTables = [];
+
+  // modify only top-level tables
+  doc.forEach((node, offset) => {
+    if (node.type !== table || hasTableBeenResized(node) && node.attrs.layout !== 'align-start') {
+      return;
+    }
+    const domNode = view.domAtPos(offset + 1).node;
+    const tableWrapper = domNode instanceof HTMLElement ? domNode.closest(`.${TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP}`) : null;
+    const tableRef = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.querySelector('table');
+    if (!tableRef) {
+      return;
+    }
+    measuredTables.push({
+      node,
+      offset,
+      measurement: getTableMeasurement(tableRef)
+    });
+  });
+  measuredTables.forEach(({
+    node,
+    offset,
+    measurement
+  }) => {
+    tr = applyTableMeasurement(tr, node, measurement, offset);
+    modified = true;
+  });
+  if (modified) {
+    var _pluginInjectionApi$a, _pluginInjectionApi$a2, _pluginInjectionApi$w, _pluginInjectionApi$w2, _pluginInjectionApi$w3;
+    pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : (_pluginInjectionApi$a2 = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.attachAnalyticsEvent({
+      action: TABLE_ACTION.FIT_TO_CONTENT_AUTO_CONVERTED,
+      actionSubject: ACTION_SUBJECT.TABLE,
+      actionSubjectId: null,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        editorContainerWidth: (_pluginInjectionApi$w = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w2 = pluginInjectionApi.width) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : (_pluginInjectionApi$w3 = _pluginInjectionApi$w2.sharedState.currentState()) === null || _pluginInjectionApi$w3 === void 0 ? void 0 : _pluginInjectionApi$w3.width) !== null && _pluginInjectionApi$w !== void 0 ? _pluginInjectionApi$w : 0,
+        totalTablesResized: measuredTables.length,
+        measurements: measuredTables.map(({
+          measurement
+        }) => ({
+          tableWidth: measurement.tableWidth,
+          totalColumnCount: measurement.colWidths.length
+        }))
+      }
+    })(tr);
+    view.dispatch(tr.setMeta('addToHistory', false));
+  }
+};

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

@@ -0,0 +1,38 @@
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { applyTableMeasurement } from '../../transforms/content-mode';
+import { measureTableWithAutoLayout } from './measure-table-with-auto-layout';
+
+/**
+ * Used to measure a selected table width with it's content being laid out natively by the browser
+ */
+export const applyMeasuredWidthToSelectedTable = (view, api) => {
+  var _api$width, _api$width$sharedStat, _api$analytics, _api$analytics$action, _api$width$sharedStat2, _api$width2, _api$width2$sharedSta;
+  const tableObject = findTable(view.state.selection);
+  if (!tableObject) {
+    return;
+  }
+  const {
+    node,
+    pos
+  } = tableObject;
+  const tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
+  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
+    return;
+  }
+  const editorContainerWidth = api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : (_api$width$sharedStat = _api$width.sharedState.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width;
+  const measurement = measureTableWithAutoLayout(tableState.tableRef, editorContainerWidth);
+  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,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      editorContainerWidth: (_api$width$sharedStat2 = api === null || api === void 0 ? void 0 : (_api$width2 = api.width) === null || _api$width2 === void 0 ? void 0 : (_api$width2$sharedSta = _api$width2.sharedState.currentState()) === null || _api$width2$sharedSta === void 0 ? void 0 : _api$width2$sharedSta.width) !== null && _api$width$sharedStat2 !== void 0 ? _api$width$sharedStat2 : 0,
+      tableWidth: measurement.tableWidth,
+      totalColumnCount: measurement.colWidths.length
+    }
+  })(tr);
+  view.dispatch(tr);
+};

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

@@ -0,0 +1,7 @@
+export const isContentModeSupported = ({
+  allowColumnResizing,
+  allowTableResizing,
+  isFullPageEditor
+}) => {
+  return allowColumnResizing && allowTableResizing && isFullPageEditor;
+};

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

@@ -0,0 +1,97 @@
+import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getTableMeasurement } from '../../transforms/content-mode';
+import { restoreResizerContainer, runSmartAdjust } from './smart-adjust/run-smart-adjust';
+export const measureTableWithAutoLayout = (tableRef, editorContainerWidth) => {
+  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');
+  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;
+  tableRef.style.width = '';
+  tableRef.style.tableLayout = 'auto';
+  cols.forEach(col => col.style.width = '');
+  if (fg('platform_editor_table_fit_to_content_smart_adjust')) {
+    const hadTableSticky = tableRef.classList.contains(TableSharedCssClassName.TABLE_STICKY);
+    const prevTableMarginTop = tableRef.style.marginTop;
+    if (hadTableSticky) {
+      tableRef.classList.remove(TableSharedCssClassName.TABLE_NATIVE_STICKY);
+    }
+    if (prevTableMarginTop) {
+      tableRef.style.marginTop = '';
+    }
+    const stickyRows = Array.from(tableRef.querySelectorAll(`tr.sticky, tr.${TableSharedCssClassName.TABLE_NATIVE_STICKY}`));
+    const prevStickyRowState = stickyRows.map(row => ({
+      row,
+      hadSticky: row.classList.contains('sticky'),
+      hadNative: row.classList.contains(TableSharedCssClassName.TABLE_NATIVE_STICKY),
+      width: row.style.width,
+      top: row.style.top,
+      position: row.style.position,
+      gridTemplateColumns: row.style.gridTemplateColumns
+    }));
+    stickyRows.forEach(row => {
+      row.classList.remove('sticky');
+      row.classList.remove(TableSharedCssClassName.TABLE_NATIVE_STICKY);
+      row.style.width = '';
+      row.style.top = '';
+      row.style.position = '';
+      row.style.gridTemplateColumns = '';
+    });
+    try {
+      return runSmartAdjust(tableRef, resizerContainer, resizerItem, editorContainerWidth);
+    } finally {
+      tableRef.style.width = prevTableWidth;
+      tableRef.style.tableLayout = prevTableLayout;
+      cols.forEach((col, i) => col.style.width = prevColWidths[i]);
+      if (hadTableSticky) {
+        tableRef.classList.add(TableSharedCssClassName.TABLE_STICKY);
+      }
+      if (prevTableMarginTop) {
+        tableRef.style.marginTop = prevTableMarginTop;
+      }
+      prevStickyRowState.forEach(state => {
+        if (state.hadSticky) {
+          state.row.classList.add('sticky');
+        }
+        if (state.hadNative) {
+          state.row.classList.add(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;
+        }
+      });
+      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';
+  }
+  const measurement = getTableMeasurement(tableRef);
+  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;
+};

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

@@ -0,0 +1,4 @@
+/** Each column's max width is `MAX × (usableWidth / numCols)`. */
+export const EVEN_SHARE_RATIO = {
+  MAX: 2
+};

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

@@ -0,0 +1,63 @@
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { EVEN_SHARE_RATIO } from './constants';
+export const sumWidths = widths => widths.reduce((sum, width) => sum + width, 0);
+
+// 2px absorbs sub-pixel rounding in `getRenderedColgroupColumnWidths`.
+const 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.
+ */
+export const distributeByEvenShareRatio = (desiredWidths, editorContainerWidth) => {
+  if (desiredWidths.length === 0 || !isFinite(editorContainerWidth) || editorContainerWidth <= 0) {
+    return desiredWidths;
+  }
+  const usableWidth = Math.max(editorContainerWidth - akEditorGutterPaddingDynamic() * 2, tableCellMinWidth * desiredWidths.length);
+  const evenShare = usableWidth / desiredWidths.length;
+  const ceiling = EVEN_SHARE_RATIO.MAX * evenShare;
+  const isCompactColumn = width => width <= ceiling;
+  const desiredCeil = desiredWidths.map(desired => Math.max(tableCellMinWidth, Math.ceil(desired) + SUB_PIXEL_ROUNDING_ALLOWANCE));
+  const capped = desiredCeil.map(desired => isCompactColumn(desired) ? desired : Math.min(ceiling, desired));
+  const sum = sumWidths(capped);
+
+  // Underflow: grow non-protected ceiling-hitters into the leftover, up to their desired.
+  if (sum < usableWidth) {
+    const leftover = usableWidth - sum;
+    const growthHeadroom = capped.map((width, index) => !isCompactColumn(desiredCeil[index]) && width >= ceiling ? Math.max(desiredCeil[index] - width, 0) : 0);
+    const totalHeadroom = sumWidths(growthHeadroom);
+    if (totalHeadroom > 0) {
+      const totalGrowth = Math.min(leftover, totalHeadroom);
+      return capped.map((width, index) => {
+        const 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.
+  const overage = sum - usableWidth;
+  const slacks = capped.map((width, index) => !isCompactColumn(desiredCeil[index]) && width >= ceiling ? Math.max(width - tableCellMinWidth, 0) : 0);
+  const totalSlack = sumWidths(slacks);
+  if (totalSlack <= 0) {
+    return capped;
+  }
+  return capped.map((width, index) => {
+    const slack = slacks[index];
+    if (slack <= 0) {
+      return width;
+    }
+    const share = slack / totalSlack * Math.min(overage, totalSlack);
+    return Math.max(width - share, tableCellMinWidth);
+  });
+};

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

@@ -0,0 +1,47 @@
+import { getTableMeasurement } from '../../../transforms/content-mode';
+import { distributeByEvenShareRatio, sumWidths } from './distribute-column-widths';
+const 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';
+  }
+  const prevTableWidth = tableRef.style.width;
+  const prevTableMaxWidth = tableRef.style.maxWidth;
+  const 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 getTableMeasurement(tableRef);
+  } finally {
+    tableRef.style.width = prevTableWidth;
+    tableRef.style.maxWidth = prevTableMaxWidth;
+    tableRef.style.minWidth = prevTableMinWidth;
+  }
+};
+export const 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`.
+ */
+export const runSmartAdjust = (tableRef, resizerContainer, resizerItem, editorContainerWidthFromApi) => {
+  const preferredMeasurement = measureWithIntrinsicWidth(tableRef, resizerContainer, resizerItem);
+  const desiredWidths = preferredMeasurement.colWidths;
+  const editorContainerWidth = editorContainerWidthFromApi !== null && editorContainerWidthFromApi !== void 0 ? editorContainerWidthFromApi : sumWidths(desiredWidths);
+  const colWidths = distributeByEvenShareRatio(desiredWidths, editorContainerWidth);
+  return {
+    ...preferredMeasurement,
+    colWidths,
+    tableWidth: sumWidths(colWidths)
+  };
+};

package/dist/es2019/ui/toolbar.js

@@ -44,7 +44,8 @@ import { normaliseAlignment } from '../pm-plugins/utils/alignment';
 import { isTableNested } from '../pm-plugins/utils/nodes';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../pm-plugins/utils/selection';
 import { getMergedCellsPositions } from '../pm-plugins/utils/table';
-import { applyMeasuredWidthToSelectedTable, isContentModeSupported } from '../pm-plugins/utils/tableMode';
+import { applyMeasuredWidthToSelectedTable } from '../pm-plugins/utils/tableMode/apply-measured-width-to-selected-table';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
 import { TableCssClassName } from '../types';
 import { FloatingAlignmentButtons } from './FloatingAlignmentButtons/FloatingAlignmentButtons';
 export const getToolbarMenuConfig = (config, state, {

package/dist/esm/nodeviews/TableComponent.js

@@ -21,6 +21,7 @@ import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { NodeViewContentHole } from '@atlaskit/editor-common/react-node-view';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
@@ -32,7 +33,7 @@ import { autoSizeTable, clearHoverSelection, setTableRef } from '../pm-plugins/c
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils/autoscrollers';
 import { pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers/plugin-key';
 import { findStickyHeaderForTable } from '../pm-plugins/sticky-headers/util';
-import { insertColgroupFromNode, hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
+import { hasTableBeenResized, insertColgroupFromNode } from '../pm-plugins/table-resizing/utils/colgroup';
 import { COLUMN_MIN_WIDTH, TABLE_EDITOR_MARGIN, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { getLayoutSize, getScalingPercentForTableWithoutWidth, getTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
@@ -40,7 +41,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';
@@ -86,6 +87,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       _this.props.view.dispatch(tr);
     });
     _defineProperty(_this, "lastSetTableRef", null);
+    _defineProperty(_this, "setWrapperRef", function (elem) {
+      _this.wrapper = elem;
+      if (!elem) {
+        return;
+      }
+      _this.props.contentDOM(elem);
+      var tableElement = elem.querySelector('table');
+      if (tableElement !== _this.table) {
+        _this.table = tableElement;
+        _this.observeTable(_this.table);
+        if (_this.table && (!expValEquals('platform_editor_table_ref_optimisation', 'isEnabled', true) || _this.props.tableActive) && _this.props.view && !expValEquals('platform_editor_fix_editor_unhandled_type_errors', 'isEnabled', true) && (expValEquals('platform_editor_table_update_table_ref', 'isEnabled', true) || fg('platform_editor_enable_table_update_ref_atlas'))) {
+          setTableRef(_this.table)(_this.props.view.state, _this.props.view.dispatch);
+        }
+      }
+    });
     _defineProperty(_this, "onStickyState", function (state) {
       var pos = _this.props.getPos();
       if (!isValidPosition(pos, _this.props.view.state)) {
@@ -950,26 +966,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           var _this5$wrapper3;
           return ((_this5$wrapper3 = _this5.wrapper) === null || _this5$wrapper3 === void 0 ? void 0 : _this5$wrapper3.clientWidth) || 760;
         }
-      }), /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      }), /*#__PURE__*/React.createElement(NodeViewContentHole
+      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      , {
         className: classnames(ClassName.TABLE_NODE_WRAPPER),
-        ref: function ref(elem) {
-          _this5.wrapper = elem;
-          if (elem) {
-            _this5.props.contentDOM(elem);
-            var tableElement = elem.querySelector('table');
-            if (tableElement !== _this5.table) {
-              _this5.table = tableElement;
-              _this5.observeTable(_this5.table);
-
-              // // Update tableRef in plugin state when table is properly mounted
-              // // At this point, both table and wrapper are in DOM with correct parent-child relationship
-              if (_this5.table && (!expValEquals('platform_editor_table_ref_optimisation', 'isEnabled', true) || _this5.props.tableActive) && _this5.props.view && !expValEquals('platform_editor_fix_editor_unhandled_type_errors', 'isEnabled', true) && (expValEquals('platform_editor_table_update_table_ref', 'isEnabled', true) || fg('platform_editor_enable_table_update_ref_atlas'))) {
-                setTableRef(_this5.table)(_this5.props.view.state, _this5.props.view.dispatch);
-              }
-            }
-          }
-        }
+        ref: this.setWrapperRef
       }, allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,

package/dist/esm/nodeviews/table.js

@@ -23,7 +23,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';
 var tableAttributes = function tableAttributes(node) {

package/dist/esm/nodeviews/toDOM.js

@@ -12,7 +12,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 var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
   var tableNode = config.isNestingSupported ? tableWithNestedTable : table;

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

@@ -28,7 +28,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 var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) {
   var _accessibilityUtils;
   var state = createPluginState(dispatch, _objectSpread(_objectSpread(_objectSpread({

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

@@ -18,7 +18,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 var pluginKey = new PluginKey('tableWidthPlugin');
 var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, maxWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) {
   return new SafePlugin({

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

@@ -5,10 +5,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';
-var tableWidth = function tableWidth(contentWidth) {
+export var clampToEditorMaxWidth = function clampToEditorMaxWidth(contentWidth) {
   var maxEditorWidth = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? akEditorMaxLayoutWidth : akEditorFullWidthLayoutWidth;
   return Math.min(maxEditorWidth, contentWidth);
 };
+var tableWidth = clampToEditorMaxWidth;
 export var getTableMeasurement = function getTableMeasurement(tableRef) {
   var colWidths = getRenderedColgroupColumnWidths(tableRef);
   var totalContentWidth = colWidths.reduce(function (acc, current) {