@atlaskit/editor-plugin-table 19.0.0 → 20.0.0

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

@@ -1,3 +1,4 @@
+import { bind } from 'bind-event-listener';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { insideTable } from '@atlaskit/editor-common/core-utils';
@@ -24,10 +25,13 @@ 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';
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) => {
+import { applyMeasuredWidthToAllTables, isContentModeSupported } from './utils/tableMode';
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) => {
   var _accessibilityUtils;
   const state = createPluginState(dispatch, {
     pluginConfig,
+    isCommentEditor,
+    isChromelessEditor,
     isTableHovered: false,
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
@@ -35,7 +39,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     wasFullWidthModeEnabled: previousFullWidthModeEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
-    isDragAndDropEnabled: true,
+    isDragAndDropEnabled: dragAndDropEnabled,
     isTableScalingEnabled: isTableScalingEnabled,
     ...defaultHoveredCell,
     ...defaultTableSelection,
@@ -69,7 +73,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       tableRow: tableRowView({
         eventDispatcher,
         pluginInjectionApi,
-        isDragAndDropEnabled: true
+        isDragAndDropEnabled: dragAndDropEnabled
       }),
       tableCell: tableCellView({
         eventDispatcher,
@@ -117,8 +121,34 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       }
     },
     view: editorView => {
+      var _pluginInjectionApi$e, _pluginInjectionApi$e2;
       const domAtPos = editorView.domAtPos.bind(editorView);
       editorViewRef = editorView;
+      let contentModeSizeTableId = null;
+      let focusListenerBinding = null;
+      if ((pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 ? void 0 : (_pluginInjectionApi$e2 = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e2 === void 0 ? void 0 : _pluginInjectionApi$e2.mode) !== 'view' && isContentModeSupported({
+        allowColumnResizing: !!pluginConfig.allowColumnResizing,
+        allowTableResizing: !!pluginConfig.allowTableResizing,
+        isFullPageEditor: !isChromelessEditor && !isCommentEditor
+      }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
+        focusListenerBinding = bind(editorView.dom, {
+          type: 'focus',
+          listener: () => {
+            if (contentModeSizeTableId) {
+              return;
+            }
+            contentModeSizeTableId = requestAnimationFrame(() => {
+              if (!editorViewRef) {
+                return;
+              }
+              applyMeasuredWidthToAllTables(editorViewRef, pluginInjectionApi);
+            });
+          },
+          options: {
+            once: true
+          }
+        });
+      }
       return {
         update: (view, prevState) => {
           const {
@@ -131,12 +161,12 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
           const pluginState = getPluginState(state);
           let tableRef;
           if (fg('platform_editor_enable_table_dnd')) {
-            var _pluginInjectionApi$e, _pluginInjectionApi$e2;
+            var _pluginInjectionApi$e3, _pluginInjectionApi$e4;
             const parent = findParentDomRefOfType(state.schema.nodes.table, domAtPos)(selection);
-            let shouldSetTableRef = fg('platform_editor_enable_table_dnd_patch_1') ? parent && (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 ? void 0 : (_pluginInjectionApi$e2 = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e2 === void 0 ? void 0 : _pluginInjectionApi$e2.mode) !== 'view' : parent;
+            let shouldSetTableRef = fg('platform_editor_enable_table_dnd_patch_1') ? parent && (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$e3 = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : (_pluginInjectionApi$e4 = _pluginInjectionApi$e3.sharedState.currentState()) === null || _pluginInjectionApi$e4 === void 0 ? void 0 : _pluginInjectionApi$e4.mode) !== 'view' : parent;
             if (expValEquals('platform_editor_table_update_table_ref', 'isEnabled', true) && fg('platform_editor_update_table_ref_fix')) {
-              var _pluginInjectionApi$e3, _pluginInjectionApi$e4, _pluginInjectionApi$i, _pluginInjectionApi$i2;
-              shouldSetTableRef = parent && (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$e3 = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : (_pluginInjectionApi$e4 = _pluginInjectionApi$e3.sharedState.currentState()) === null || _pluginInjectionApi$e4 === void 0 ? void 0 : _pluginInjectionApi$e4.mode) !== 'view' && (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$i = pluginInjectionApi.interaction) === null || _pluginInjectionApi$i === void 0 ? void 0 : (_pluginInjectionApi$i2 = _pluginInjectionApi$i.sharedState.currentState()) === null || _pluginInjectionApi$i2 === void 0 ? void 0 : _pluginInjectionApi$i2.interactionState) !== 'hasNotHadInteraction';
+              var _pluginInjectionApi$e5, _pluginInjectionApi$e6, _pluginInjectionApi$i, _pluginInjectionApi$i2;
+              shouldSetTableRef = parent && (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$e5 = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e5 === void 0 ? void 0 : (_pluginInjectionApi$e6 = _pluginInjectionApi$e5.sharedState.currentState()) === null || _pluginInjectionApi$e6 === void 0 ? void 0 : _pluginInjectionApi$e6.mode) !== 'view' && (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$i = pluginInjectionApi.interaction) === null || _pluginInjectionApi$i === void 0 ? void 0 : (_pluginInjectionApi$i2 = _pluginInjectionApi$i.sharedState.currentState()) === null || _pluginInjectionApi$i2 === void 0 ? void 0 : _pluginInjectionApi$i2.interactionState) !== 'hasNotHadInteraction';
             }
             if (shouldSetTableRef) {
               tableRef =
@@ -199,6 +229,10 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
           } else if (pluginState.isResizeHandleWidgetAdded) {
             removeResizeHandleDecorations()(state, dispatch);
           }
+        },
+        destroy: () => {
+          contentModeSizeTableId && cancelAnimationFrame(contentModeSizeTableId);
+          focusListenerBinding && focusListenerBinding();
         }
       };
     },

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

@@ -12,6 +12,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 { isTableInContentMode } from './utils/tableMode';
 export const pluginKey = new PluginKey('tableWidthPlugin');
 const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, maxWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
   return new SafePlugin({
@@ -61,6 +62,15 @@ const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, maxWid
       const tr = newState.tr;
       if (isReplaceDocumentOperation && !isCommentEditor) {
         newState.doc.forEach((node, offset) => {
+          if (isTableInContentMode({
+            node,
+            allowColumnResizing: true,
+            allowTableResizing: true,
+            isFullPageEditor: true,
+            isTableNested: false
+          })) {
+            return;
+          }
           if (node.type === table) {
             const width = node.attrs.width;
             const layout = node.attrs.layout;

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

@@ -0,0 +1,39 @@
+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 => {
+  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);
+};
+export const getTableMeasurement = tableRef => {
+  const colWidths = getRenderedColgroupColumnWidths(tableRef);
+  const totalContentWidth = colWidths.reduce((acc, current) => acc + current, 0);
+  return {
+    colWidths,
+    tableWidth: tableWidth(totalContentWidth)
+  };
+};
+export const applyTableMeasurement = (tr, tableNode, {
+  colWidths,
+  tableWidth
+}, tablePos) => {
+  tr = updateCellsMarkup(tr, tableNode, tablePos, (cell, _rowIndex, colIndex) => {
+    const newColWidths = colWidths.slice(colIndex, colIndex + cell.attrs.colspan);
+    return cell.type.createChecked({
+      ...cell.attrs,
+      colwidth: newColWidths.length ? newColWidths : null
+    }, cell.content, cell.marks);
+  });
+  return tr.setNodeMarkup(tablePos, undefined, {
+    ...tableNode.attrs,
+    width: tableWidth
+  });
+};
+function getRenderedColgroupColumnWidths(tableRef) {
+  const cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
+  return cols.map(col => {
+    const width = col.getBoundingClientRect().width;
+    return Math.max(Math.round(width), tableCellMinWidth);
+  });
+}

package/dist/es2019/pm-plugins/transforms/fix-tables.js

@@ -3,6 +3,7 @@ import { akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/e
 import { calculateColumnWidth, getCellsRefsInColumn } from '../table-resizing/utils/column-state';
 import { contentWidth } from '../table-resizing/utils/content-width';
 import { getLayoutSize } from '../table-resizing/utils/misc';
+import { replaceCells } from './table-transform-utils';
 const validateTableCellNodeAttrs = ({
   colspan,
   rowspan,
@@ -153,36 +154,4 @@ function parseDOMColumnWidths(domAtPos, tableNode, tableStart, tableRef) {
     }
   }
   return cols;
-}
-
-// TODO: ED-26961 - move to prosemirror-utils
-const replaceCells = (tr, table, tablePos, modifyCell) => {
-  const rows = [];
-  let modifiedCells = 0;
-  for (let rowIndex = 0; rowIndex < table.childCount; rowIndex++) {
-    const row = table.child(rowIndex);
-    const cells = [];
-    for (let colIndex = 0; colIndex < row.childCount; colIndex++) {
-      const cell = row.child(colIndex);
-
-      // TODO: ED-26961 - The rowIndex and colIndex are not accurate in a merged cell scenario
-      // e.g. table with 5 columns might have only one cell in a row, colIndex will be 1, where it should be 4
-      const node = modifyCell(cell, rowIndex, colIndex);
-      if (node.sameMarkup(cell) === false) {
-        modifiedCells++;
-      }
-      cells.push(node);
-    }
-    if (cells.length) {
-      rows.push(row.type.createChecked(row.attrs, cells, row.marks));
-    }
-  }
-
-  // Check if the table has changed before replacing.
-  // If no cells are modified our counter will be zero.
-  if (rows.length && modifiedCells !== 0) {
-    const newTable = table.type.createChecked(table.attrs, rows, table.marks);
-    return tr.replaceWith(tablePos, tablePos + table.nodeSize, newTable);
-  }
-  return tr;
-};
+}

package/dist/es2019/pm-plugins/transforms/table-transform-utils.js

@@ -0,0 +1,56 @@
+// TODO: ED-26961 - move to prosemirror-utils
+export const replaceCells = (tr, table, tablePos, modifyCell) => {
+  const rows = [];
+  let modifiedCells = 0;
+  for (let rowIndex = 0; rowIndex < table.childCount; rowIndex++) {
+    const row = table.child(rowIndex);
+    const cells = [];
+    for (let colIndex = 0; colIndex < row.childCount; colIndex++) {
+      const cell = row.child(colIndex);
+
+      // TODO: ED-26961 - The rowIndex and colIndex are not accurate in a merged cell scenario
+      // e.g. table with 5 columns might have only one cell in a row, colIndex will be 1, where it should be 4
+      const node = modifyCell(cell, rowIndex, colIndex);
+      if (node.sameMarkup(cell) === false) {
+        modifiedCells++;
+      }
+      cells.push(node);
+    }
+    if (cells.length) {
+      rows.push(row.type.createChecked(row.attrs, cells, row.marks));
+    }
+  }
+
+  // Check if the table has changed before replacing.
+  // If no cells are modified our counter will be zero.
+  if (rows.length && modifiedCells !== 0) {
+    const newTable = table.type.createChecked(table.attrs, rows, table.marks);
+    return tr.replaceWith(tablePos, tablePos + table.nodeSize, newTable);
+  }
+  return tr;
+};
+
+/**
+ * Position-preserving alternative to `replaceCells`.
+ *
+ * Uses `setNodeMarkup` per cell instead of rebuilding the whole table with
+ * `replaceWith`, so document positions inside cells are never invalidated.
+ * This preserves any existing selection through `tr.mapping`.
+ */
+export const updateCellsMarkup = (tr, table, tablePos, modifyCell) => {
+  let rowOffset = tablePos + 1;
+  for (let rowIndex = 0; rowIndex < table.childCount; rowIndex++) {
+    const row = table.child(rowIndex);
+    let cellOffset = rowOffset + 1;
+    for (let colIndex = 0; colIndex < row.childCount; colIndex++) {
+      const cell = row.child(colIndex);
+      const modified = modifyCell(cell, rowIndex, colIndex);
+      if (!modified.sameMarkup(cell)) {
+        tr.setNodeMarkup(cellOffset, modified.type, modified.attrs, modified.marks);
+      }
+      cellOffset += cell.nodeSize;
+    }
+    rowOffset += row.nodeSize;
+  }
+  return tr;
+};

package/dist/es2019/pm-plugins/utils/tableMode.js

@@ -0,0 +1,148 @@
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { hasTableColumnBeenResized } from '../table-resizing/utils/colgroup';
+import { applyTableMeasurement, getTableMeasurement } from '../transforms/content-mode';
+import { ALIGN_START } from './alignment';
+export const isTableInContentMode = ({
+  allowColumnResizing,
+  allowTableResizing,
+  isFullPageEditor,
+  isTableNested,
+  node
+}) => {
+  if (!expValEqualsNoExposure('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
+    return false;
+  }
+  if (!node || isTableNested) {
+    return false;
+  }
+  return isContentModeSupported({
+    allowColumnResizing,
+    allowTableResizing,
+    isFullPageEditor
+  }) && !hasTableBeenResized(node) && node.attrs.layout === ALIGN_START;
+};
+export const isContentModeSupported = ({
+  allowColumnResizing,
+  allowTableResizing,
+  isFullPageEditor
+}) => {
+  return allowColumnResizing && allowTableResizing && isFullPageEditor;
+};
+export const hasTableBeenResized = node => node.attrs.width !== null || hasTableColumnBeenResized(node);
+
+/**
+ * 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));
+  }
+};
+export const applyMeasuredWidthToSelectedTable = (view, api) => {
+  var _api$analytics, _api$analytics$action, _api$width$sharedStat, _api$width, _api$width$sharedStat2;
+  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 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);
+  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$sharedStat = api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : (_api$width$sharedStat2 = _api$width.sharedState.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : 0,
+      tableWidth: measurement.tableWidth,
+      totalColumnCount: measurement.colWidths.length
+    }
+  })(tr);
+  view.dispatch(tr);
+};

package/dist/es2019/tablePlugin.js

@@ -63,6 +63,7 @@ const tablePlugin = ({
   const options = {
     ...config,
     tableOptions: (_config$tableOptions = config === null || config === void 0 ? void 0 : config.tableOptions) !== null && _config$tableOptions !== void 0 ? _config$tableOptions : {},
+    dragAndDropEnabled: (config === null || config === void 0 ? void 0 : config.dragAndDropEnabled) || fg('platform_editor_enable_table_dnd'),
     isTableScalingEnabled: (config === null || config === void 0 ? void 0 : config.isTableScalingEnabled) || fg('platform_editor_enable_table_scaling')
   };
   const defaultGetEditorContainerWidth = () => {
@@ -279,11 +280,12 @@ const tablePlugin = ({
             wasFullWidthEnabled,
             tableOptions,
             getEditorFeatureFlags,
+            dragAndDropEnabled,
             isTableScalingEnabled,
             isCommentEditor,
             isChromelessEditor
           } = options || {};
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption);
         }
       }, {
         name: 'tablePMColResizing',
@@ -317,13 +319,14 @@ const tablePlugin = ({
           nodeViewPortalProviderAPI
         }) => {
           const {
+            dragAndDropEnabled,
             isTableScalingEnabled = false,
             fullWidthEnabled = false,
             isCommentEditor = false,
             isChromelessEditor = false,
             tableOptions
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled, tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.allowTableAlignment, fullWidthEnabled, api, getIntl, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.allowTableResizing);
+          return keymapPlugin(defaultGetEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.allowTableAlignment, fullWidthEnabled, api, getIntl, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.allowTableResizing);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -333,6 +336,9 @@ const tablePlugin = ({
       }, {
         name: 'tableEditing',
         plugin: () => {
+          const {
+            dragAndDropEnabled
+          } = options || {};
           return tableEditing({
             reportFixedTable: ({
               tr,
@@ -348,7 +354,7 @@ const tablePlugin = ({
                 eventType: EVENT_TYPE.TRACK
               })(tr);
             },
-            dragAndDropEnabled: true
+            dragAndDropEnabled
           });
         }
       }, {
@@ -361,7 +367,7 @@ const tablePlugin = ({
         plugin: ({
           dispatch
         }) => {
-          return createDragAndDropPlugin(dispatch, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options.isCommentEditor, api);
+          return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options.isCommentEditor, api) : undefined;
         }
       }, {
         name: 'tableViewModeSort',

package/dist/es2019/ui/ContentComponent.js

@@ -215,6 +215,7 @@ export const ContentComponent = ({
     fallbackComponent: null
   }, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
     featureFlags: api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState(),
+    isDragAndDropEnabledOption: options === null || options === void 0 ? void 0 : options.dragAndDropEnabled,
     api: api
   }), /*#__PURE__*/React.createElement(ContentComponentInternal, {
     api: api,

package/dist/es2019/ui/event-handlers.js

@@ -1,7 +1,8 @@
 import rafSchedule from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
-import { browser, closestElement, isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '@atlaskit/editor-common/utils';
+import { closestElement, isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '@atlaskit/editor-common/utils';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -30,7 +31,7 @@ export const handleBlur = (view, event) => {
   } = view;
   // IE version check for ED-4665
   // Calendar focus check for ED-10466
-  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event) && !isFocusingDragHandlesClickableZone(event)) {
+  if (getBrowserInfo().ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event) && !isFocusingDragHandlesClickableZone(event)) {
     setEditorFocus(false)(state, dispatch);
   }
   event.preventDefault();
@@ -361,7 +362,7 @@ export const handleMouseMove = nodeViewPortalProviderAPI => (view, event) => {
   // a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
   // in the deferred callback handler.
   // Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
-  handleMouseMoveDebounce(nodeViewPortalProviderAPI)(view, event, browser.gecko ? event.offsetX : NaN);
+  handleMouseMoveDebounce(nodeViewPortalProviderAPI)(view, event, getBrowserInfo().gecko ? event.offsetX : NaN);
   return false;
 };
 export function handleTripleClick(view, pos) {

package/dist/es2019/ui/global-styles.js

@@ -8,6 +8,7 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { tableStyles } from './common-styles';
 export const GlobalStylesWrapper = ({
   featureFlags,
+  isDragAndDropEnabledOption,
   api
 }) => {
   const {
@@ -22,7 +23,7 @@ export const GlobalStylesWrapper = ({
   return jsx(Global, {
     styles: tableStyles({
       featureFlags,
-      isDragAndDropEnabled: !isLivePageViewMode
+      isDragAndDropEnabled: isDragAndDropEnabledOption && !isLivePageViewMode
     })
   });
 };

package/dist/es2019/ui/toolbar.js

@@ -27,6 +27,7 @@ import AlignImageLeftIcon from '@atlaskit/icon/core/align-image-left';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import CustomizeIcon from '@atlaskit/icon/core/customize';
 import DeleteIcon from '@atlaskit/icon/core/delete';
+import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
 import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -43,6 +44,7 @@ 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 { TableCssClassName } from '../types';
 import { FloatingAlignmentButtons } from './FloatingAlignmentButtons/FloatingAlignmentButtons';
 export const getToolbarMenuConfig = (config, state, {
@@ -395,10 +397,16 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
   const areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   if (editorExperiment('platform_editor_controls', 'variant1')) {
     var _api$editorViewMode, _api$editorViewMode$s;
-    const {
-      isDragMenuOpen: isDragHandleMenuOpened = false,
-      isDragging: isTableRowOrColumnDragged = false
-    } = getDragDropPluginState(state);
+    let isDragHandleMenuOpened = false;
+    let isTableRowOrColumnDragged = false;
+    if (options !== null && options !== void 0 && options.dragAndDropEnabled) {
+      const {
+        isDragMenuOpen = false,
+        isDragging = false
+      } = getDragDropPluginState(state);
+      isDragHandleMenuOpened = isDragMenuOpen;
+      isTableRowOrColumnDragged = isDragging;
+    }
     const isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
     const isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
     const isTableState = isTableRowOrColumnDragged || isTableOrColumnResizing || isTableMenuOpened;
@@ -419,7 +427,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
   // We don't want to show floating toolbar while resizing the table
   const isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
   if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
-    var _api$limitedMode$shar, _api$limitedMode, _api$limitedMode$shar2, _api$extension, _api$extension$shared, _api$extension2;
+    var _api$limitedMode$shar, _api$limitedMode, _api$limitedMode$shar2, _api$editorViewMode2, _api$editorViewMode2$, _api$extension, _api$extension$shared, _api$extension2;
     const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
     const isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
     const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
@@ -449,6 +457,25 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
     const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor, isLimitedModeEnabled);
     const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor, isLimitedModeEnabled) : [];
     const colorPicker = !areAnyNewToolbarFlagsEnabled ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView) : [];
+    const fitToContentButton = isContentModeSupported({
+      allowColumnResizing: !!pluginState.pluginConfig.allowColumnResizing,
+      allowTableResizing: !!pluginState.pluginConfig.allowTableResizing,
+      isFullPageEditor: !pluginState.isChromelessEditor && !pluginState.isCommentEditor
+    }) && !isNested && (api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : (_api$editorViewMode2$ = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2$ === void 0 ? void 0 : _api$editorViewMode2$.mode) !== 'view' && expValEquals('platform_editor_table_fit_to_content_on_demand', 'isEnabled', true) ? [{
+      id: 'editor.table.fitToContent',
+      type: 'button',
+      title: intl.formatMessage(messages.fitToContent),
+      icon: () => jsx(ShrinkHorizontalIcon, {
+        spacing: 'spacious',
+        label: ''
+      }),
+      onClick: (_state, _dispatch, view) => {
+        if (view) {
+          applyMeasuredWidthToSelectedTable(view, api !== null && api !== void 0 ? api : undefined);
+        }
+        return true;
+      }
+    }] : [];
 
     // Check if we need to show confirm dialog for delete button
     let confirmDialog;
@@ -518,7 +545,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
       },
       zIndex: akEditorFloatingPanelZIndex + 1,
       // Place the context menu slightly above the others
-      items: [menu, ...(!areAnyNewToolbarFlagsEnabled ? [separator(menu.hidden)] : []), ...alignmentMenu, ...(!areAnyNewToolbarFlagsEnabled ? [separator(alignmentMenu.length === 0)] : []), ...cellItems, ...columnSettingsItems, ...colorPicker, ...(!areAnyNewToolbarFlagsEnabled ? [{
+      items: [menu, ...(!areAnyNewToolbarFlagsEnabled ? [separator(menu.hidden)] : []), ...alignmentMenu, ...(!areAnyNewToolbarFlagsEnabled ? [separator(alignmentMenu.length === 0)] : []), ...cellItems, ...columnSettingsItems, ...fitToContentButton, ...colorPicker, ...(!areAnyNewToolbarFlagsEnabled ? [{
         type: 'extensions-placeholder',
         separator: 'end'
       }, copyButton, {

package/dist/esm/nodeviews/TableResizer.js

@@ -508,7 +508,7 @@ export var TableResizer = function TableResizer(_ref) {
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
     isHandleVisible: isTableSelected,
-    needExtendedResizeZone: expValEquals('platform_editor_table_resizer_extended_zone', 'isEnabled', true) ? true : !isTableSelected,
+    needExtendedResizeZone: true,
     appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow"
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)