@atlaskit/editor-plugin-table 19.0.0 → 20.0.0

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

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isTableInContentMode = exports.isContentModeSupported = exports.hasTableBeenResized = exports.applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToAllTables = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _styles = require("@atlaskit/editor-common/styles");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _colgroup = require("../table-resizing/utils/colgroup");
+var _contentMode = require("../transforms/content-mode");
+var _alignment = require("./alignment");
+var isTableInContentMode = exports.isTableInContentMode = function isTableInContentMode(_ref) {
+  var allowColumnResizing = _ref.allowColumnResizing,
+    allowTableResizing = _ref.allowTableResizing,
+    isFullPageEditor = _ref.isFullPageEditor,
+    isTableNested = _ref.isTableNested,
+    node = _ref.node;
+  if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
+    return false;
+  }
+  if (!node || isTableNested) {
+    return false;
+  }
+  return isContentModeSupported({
+    allowColumnResizing: allowColumnResizing,
+    allowTableResizing: allowTableResizing,
+    isFullPageEditor: isFullPageEditor
+  }) && !hasTableBeenResized(node) && node.attrs.layout === _alignment.ALIGN_START;
+};
+var isContentModeSupported = exports.isContentModeSupported = function isContentModeSupported(_ref2) {
+  var allowColumnResizing = _ref2.allowColumnResizing,
+    allowTableResizing = _ref2.allowTableResizing,
+    isFullPageEditor = _ref2.isFullPageEditor;
+  return allowColumnResizing && allowTableResizing && isFullPageEditor;
+};
+var hasTableBeenResized = exports.hasTableBeenResized = function hasTableBeenResized(node) {
+  return node.attrs.width !== null || (0, _colgroup.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.
+ */
+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 || hasTableBeenResized(node) && node.attrs.layout !== _alignment.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 (_ref3) {
+    var node = _ref3.node,
+      offset = _ref3.offset,
+      measurement = _ref3.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 (_ref4) {
+          var measurement = _ref4.measurement;
+          return {
+            tableWidth: measurement.tableWidth,
+            totalColumnCount: measurement.colWidths.length
+          };
+        })
+      }
+    })(tr);
+    view.dispatch(tr.setMeta('addToHistory', false));
+  }
+};
+var applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
+  var _api$analytics, _api$width$sharedStat, _api$width;
+  var tableObject = (0, _utils.findTable)(view.state.selection);
+  if (!tableObject) {
+    return;
+  }
+  var node = tableObject.node,
+    pos = tableObject.pos;
+  var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
+  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
+    return;
+  }
+  var tableRef = tableState.tableRef;
+
+  // Instead of dispatching a transaction to "strip widths" and then waiting
+  // for a rAF to measure natural column widths, instea directly update the DOM elements and
+  // take a measurement.
+  var 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');
+  tableRef.style.width = '';
+  tableRef.style.tableLayout = 'auto';
+  cols.forEach(function (col) {
+    return 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';
+  }
+  var measurement = (0, _contentMode.getTableMeasurement)(tableRef);
+  var tr = (0, _contentMode.applyTableMeasurement)(view.state.tr, node, measurement, pos);
+  api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
+    action: _analytics.TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,
+    actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: {
+      editorContainerWidth: (_api$width$sharedStat = 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) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : 0,
+      tableWidth: measurement.tableWidth,
+      totalColumnCount: measurement.colWidths.length
+    }
+  })(tr);
+  view.dispatch(tr);
+};

package/dist/cjs/tablePlugin.js

@@ -75,6 +75,7 @@ var tablePlugin = function tablePlugin(_ref) {
   };
   var options = _objectSpread(_objectSpread({}, 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) || (0, _platformFeatureFlags.fg)('platform_editor_enable_table_dnd'),
     isTableScalingEnabled: (config === null || config === void 0 ? void 0 : config.isTableScalingEnabled) || (0, _platformFeatureFlags.fg)('platform_editor_enable_table_scaling')
   });
   var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
@@ -291,10 +292,11 @@ var tablePlugin = function tablePlugin(_ref) {
             wasFullWidthEnabled = _ref3.wasFullWidthEnabled,
             tableOptions = _ref3.tableOptions,
             getEditorFeatureFlags = _ref3.getEditorFeatureFlags,
+            dragAndDropEnabled = _ref3.dragAndDropEnabled,
             isTableScalingEnabled = _ref3.isTableScalingEnabled,
             isCommentEditor = _ref3.isCommentEditor,
             isChromelessEditor = _ref3.isChromelessEditor;
-          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption);
+          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, (0, _createPluginConfig.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',
@@ -326,6 +328,7 @@ var tablePlugin = function tablePlugin(_ref) {
           var getIntl = _ref6.getIntl,
             nodeViewPortalProviderAPI = _ref6.nodeViewPortalProviderAPI;
           var _ref7 = options || {},
+            dragAndDropEnabled = _ref7.dragAndDropEnabled,
             _ref7$isTableScalingE = _ref7.isTableScalingEnabled,
             isTableScalingEnabled = _ref7$isTableScalingE === void 0 ? false : _ref7$isTableScalingE,
             _ref7$fullWidthEnable = _ref7.fullWidthEnabled,
@@ -335,7 +338,7 @@ var tablePlugin = function tablePlugin(_ref) {
             _ref7$isChromelessEdi = _ref7.isChromelessEditor,
             isChromelessEditor = _ref7$isChromelessEdi === void 0 ? false : _ref7$isChromelessEdi,
             tableOptions = _ref7.tableOptions;
-          return (0, _keymap.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 (0, _keymap.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',
@@ -346,10 +349,12 @@ var tablePlugin = function tablePlugin(_ref) {
       }, {
         name: 'tableEditing',
         plugin: function plugin() {
+          var _ref9 = options || {},
+            dragAndDropEnabled = _ref9.dragAndDropEnabled;
           return (0, _pmPlugins.tableEditing)({
-            reportFixedTable: function reportFixedTable(_ref9) {
-              var tr = _ref9.tr,
-                reason = _ref9.reason;
+            reportFixedTable: function reportFixedTable(_ref0) {
+              var tr = _ref0.tr,
+                reason = _ref0.reason;
               editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
                 action: _analytics.TABLE_ACTION.FIXED,
                 actionSubject: _analytics.ACTION_SUBJECT.TABLE,
@@ -360,71 +365,71 @@ var tablePlugin = function tablePlugin(_ref) {
                 eventType: _analytics.EVENT_TYPE.TRACK
               })(tr);
             },
-            dragAndDropEnabled: true
+            dragAndDropEnabled: dragAndDropEnabled
           });
         }
       }, {
         name: 'tableStickyHeaders',
-        plugin: function plugin(_ref0) {
-          var dispatch = _ref0.dispatch;
+        plugin: function plugin(_ref1) {
+          var dispatch = _ref1.dispatch;
           return options && options.tableOptions.stickyHeaders ? (0, _plugin4.createPlugin)(dispatch, function () {
             return [];
           }) : undefined;
         }
       }, {
         name: 'tableDragAndDrop',
-        plugin: function plugin(_ref1) {
-          var dispatch = _ref1.dispatch;
-          return (0, _plugin3.createPlugin)(dispatch, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options.isCommentEditor, api);
+        plugin: function plugin(_ref10) {
+          var dispatch = _ref10.dispatch;
+          return options !== null && options !== void 0 && options.dragAndDropEnabled ? (0, _plugin3.createPlugin)(dispatch, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options.isCommentEditor, api) : undefined;
         }
       }, {
         name: 'tableViewModeSort',
-        plugin: function plugin(_ref10) {
-          var nodeViewPortalProviderAPI = _ref10.nodeViewPortalProviderAPI;
+        plugin: function plugin(_ref11) {
+          var nodeViewPortalProviderAPI = _ref11.nodeViewPortalProviderAPI;
           return api !== null && api !== void 0 && api.editorViewMode ? (0, _viewModeSort.createPlugin)(api, nodeViewPortalProviderAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',
-        plugin: function plugin(_ref11) {
-          var dispatch = _ref11.dispatch;
+        plugin: function plugin(_ref12) {
+          var dispatch = _ref12.dispatch;
           return !(0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? (0, _tableLocalId.createPlugin)(dispatch) : undefined;
         }
       }, {
         name: 'tableWidth',
-        plugin: function plugin(_ref12) {
+        plugin: function plugin(_ref13) {
           var _options$fullWidthEna, _options$maxWidthEnab, _options$isTableScali, _options$tableOptions3, _options$isCommentEdi;
-          var dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent,
-            dispatch = _ref12.dispatch;
+          var dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent,
+            dispatch = _ref13.dispatch;
           return options !== null && options !== void 0 && options.tableOptions.allowTableResizing ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$maxWidthEnab = options.maxWidthEnabled) !== null && _options$maxWidthEnab !== void 0 ? _options$maxWidthEnab : false, (_options$isTableScali = options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$tableOptions3 = options.tableOptions.allowTableResizing) !== null && _options$tableOptions3 !== void 0 ? _options$tableOptions3 : false, (_options$isCommentEdi = options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
         }
       }, {
         name: 'tableWidthInCommentFix',
-        plugin: function plugin(_ref13) {
+        plugin: function plugin(_ref14) {
           var _options$tableOptions4;
-          var dispatch = _ref13.dispatch;
+          var dispatch = _ref14.dispatch;
           return options !== null && options !== void 0 && options.tableOptions.allowTableResizing && options !== null && options !== void 0 && options.isCommentEditor ? (0, _tableWidthInCommentFix.createPlugin)(dispatch, (_options$tableOptions4 = options.tableOptions.allowTableAlignment) !== null && _options$tableOptions4 !== void 0 ? _options$tableOptions4 : false) : undefined;
         }
       },
       // TODO: ED-26961 - should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
         name: 'tableOverflowAnalyticsPlugin',
-        plugin: function plugin(_ref14) {
+        plugin: function plugin(_ref15) {
           var _options$tableOptions5;
-          var dispatch = _ref14.dispatch,
-            dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent;
+          var dispatch = _ref15.dispatch,
+            dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
           return (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableOptions5 = options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) !== null && _options$tableOptions5 !== void 0 ? _options$tableOptions5 : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref15) {
-          var dispatch = _ref15.dispatch,
-            dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref16) {
+          var dispatch = _ref16.dispatch,
+            dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
           return (0, _plugin.createPlugin)(dispatch, dispatchAnalyticsEvent);
         }
       }, {
         name: 'tableGetEditorViewReferencePlugin',
-        plugin: function plugin(_ref16) {
-          var dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref17) {
+          var dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
           return new _safePlugin.SafePlugin({
             view: function view(editorView) {
               editorViewRef.current = editorView;
@@ -478,8 +483,8 @@ var tablePlugin = function tablePlugin(_ref) {
         }
       }, {
         name: 'tableSizeSelectorPlugin',
-        plugin: function plugin(_ref17) {
-          var dispatch = _ref17.dispatch;
+        plugin: function plugin(_ref18) {
+          var dispatch = _ref18.dispatch;
           return isTableSelectorEnabled ? (0, _tableSizeSelector.createPlugin)(dispatch) : undefined;
         }
       }, {
@@ -510,12 +515,12 @@ var tablePlugin = function tablePlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref18) {
-      var editorView = _ref18.editorView,
-        popupsMountPoint = _ref18.popupsMountPoint,
-        popupsBoundariesElement = _ref18.popupsBoundariesElement,
-        popupsScrollableElement = _ref18.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref19) {
+      var editorView = _ref19.editorView,
+        popupsMountPoint = _ref19.popupsMountPoint,
+        popupsBoundariesElement = _ref19.popupsBoundariesElement,
+        popupsScrollableElement = _ref19.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref19.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_ContentComponent.ContentComponent, {
         api: api,
         editorView: editorView,
@@ -530,8 +535,8 @@ var tablePlugin = function tablePlugin(_ref) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref19) {
-        var formatMessage = _ref19.formatMessage;
+      quickInsert: function quickInsert(_ref20) {
+        var formatMessage = _ref20.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),
@@ -601,8 +606,8 @@ var tablePlugin = function tablePlugin(_ref) {
         return editorViewRef.current;
       }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
     },
-    usePluginHook: function usePluginHook(_ref20) {
-      var editorView = _ref20.editorView;
+    usePluginHook: function usePluginHook(_ref21) {
+      var editorView = _ref21.editorView;
       var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['editorViewMode'], function (states) {
           var _states$editorViewMod;
           return {

package/dist/cjs/ui/ContentComponent.js

@@ -219,6 +219,7 @@ var ContentComponent = exports.ContentComponent = function ContentComponent(_ref
     fallbackComponent: null
   }, /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, {
     featureFlags: api === null || api === 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.default.createElement(ContentComponentInternal, {
     api: api,

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

@@ -10,6 +10,7 @@ exports.withCellTracking = exports.whenTableInFocus = exports.isTableInFocus = v
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _browser = require("@atlaskit/editor-common/browser");
 var _nesting = require("@atlaskit/editor-common/nesting");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state5 = require("@atlaskit/editor-prosemirror/state");
@@ -48,7 +49,7 @@ var handleBlur = exports.handleBlur = function handleBlur(view, event) {
     dispatch = view.dispatch;
   // IE version check for ED-4665
   // Calendar focus check for ED-10466
-  if (_utils.browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event) && !isFocusingDragHandlesClickableZone(event)) {
+  if ((0, _browser.getBrowserInfo)().ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event) && !isFocusingDragHandlesClickableZone(event)) {
     (0, _commands.setEditorFocus)(false)(state, dispatch);
   }
   event.preventDefault();
@@ -358,7 +359,7 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(nodeVie
     // 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, _utils.browser.gecko ? event.offsetX : NaN);
+    handleMouseMoveDebounce(nodeViewPortalProviderAPI)(view, event, (0, _browser.getBrowserInfo)().gecko ? event.offsetX : NaN);
     return false;
   };
 };

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

@@ -15,6 +15,7 @@ var _commonStyles = require("./common-styles");
 
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
   var featureFlags = _ref.featureFlags,
+    isDragAndDropEnabledOption = _ref.isDragAndDropEnabledOption,
     api = _ref.api;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['editorViewMode'], function (states) {
       var _states$editorViewMod;
@@ -27,7 +28,7 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
   return (0, _react.jsx)(_react.Global, {
     styles: (0, _commonStyles.tableStyles)({
       featureFlags: featureFlags,
-      isDragAndDropEnabled: !isLivePageViewMode
+      isDragAndDropEnabled: isDragAndDropEnabledOption && !isLivePageViewMode
     })
   });
 };

package/dist/cjs/ui/toolbar.js

@@ -33,6 +33,7 @@ var _alignImageLeft = _interopRequireDefault(require("@atlaskit/icon/core/align-
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
+var _shrinkHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/shrink-horizontal"));
 var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -49,6 +50,7 @@ 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 _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); }
@@ -417,11 +419,17 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
       var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
         var _api$editorViewMode;
-        var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(state),
-          _getDragDropPluginSta2 = _getDragDropPluginSta.isDragMenuOpen,
-          isDragHandleMenuOpened = _getDragDropPluginSta2 === void 0 ? false : _getDragDropPluginSta2,
-          _getDragDropPluginSta3 = _getDragDropPluginSta.isDragging,
-          isTableRowOrColumnDragged = _getDragDropPluginSta3 === void 0 ? false : _getDragDropPluginSta3;
+        var isDragHandleMenuOpened = false;
+        var isTableRowOrColumnDragged = false;
+        if (options !== null && options !== void 0 && options.dragAndDropEnabled) {
+          var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(state),
+            _getDragDropPluginSta2 = _getDragDropPluginSta.isDragMenuOpen,
+            isDragMenuOpen = _getDragDropPluginSta2 === void 0 ? false : _getDragDropPluginSta2,
+            _getDragDropPluginSta3 = _getDragDropPluginSta.isDragging,
+            isDragging = _getDragDropPluginSta3 === void 0 ? false : _getDragDropPluginSta3;
+          isDragHandleMenuOpened = isDragMenuOpen;
+          isTableRowOrColumnDragged = isDragging;
+        }
         var isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
         var isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
         var isTableState = isTableRowOrColumnDragged || isTableOrColumnResizing || isTableMenuOpened;
@@ -442,7 +450,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
       // We don't want to show floating toolbar while resizing the table
       var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
       if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
-        var _api$limitedMode$shar, _api$limitedMode, _api$extension, _api$extension2;
+        var _api$limitedMode$shar, _api$limitedMode, _api$editorViewMode2, _api$extension, _api$extension2;
         var isNested = pluginState.tablePos && (0, _nodes.isTableNested)(state, pluginState.tablePos);
         var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
         var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
@@ -472,6 +480,27 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor, isLimitedModeEnabled);
         var columnSettingsItems = pluginState.isDragAndDropEnabled ? 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)({
+          allowColumnResizing: !!pluginState.pluginConfig.allowColumnResizing,
+          allowTableResizing: !!pluginState.pluginConfig.allowTableResizing,
+          isFullPageEditor: !pluginState.isChromelessEditor && !pluginState.isCommentEditor
+        }) && !isNested && (api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 || (_api$editorViewMode2 = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.mode) !== 'view' && (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_on_demand', 'isEnabled', true) ? [{
+          id: 'editor.table.fitToContent',
+          type: 'button',
+          title: intl.formatMessage(_messages.tableMessages.fitToContent),
+          icon: function icon() {
+            return (0, _react.jsx)(_shrinkHorizontal.default, {
+              spacing: 'spacious',
+              label: ''
+            });
+          },
+          onClick: function onClick(_state, _dispatch, view) {
+            if (view) {
+              (0, _tableMode.applyMeasuredWidthToSelectedTable)(view, api !== null && api !== void 0 ? api : undefined);
+            }
+            return true;
+          }
+        }] : [];
 
         // Check if we need to show confirm dialog for delete button
         var confirmDialog;
@@ -550,7 +579,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
           },
           zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          items: [menu].concat((0, _toConsumableArray2.default)(!areAnyNewToolbarFlagsEnabled ? [separator(menu.hidden)] : []), (0, _toConsumableArray2.default)(alignmentMenu), (0, _toConsumableArray2.default)(!areAnyNewToolbarFlagsEnabled ? [separator(alignmentMenu.length === 0)] : []), (0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), (0, _toConsumableArray2.default)(colorPicker), (0, _toConsumableArray2.default)(!areAnyNewToolbarFlagsEnabled ? [{
+          items: [menu].concat((0, _toConsumableArray2.default)(!areAnyNewToolbarFlagsEnabled ? [separator(menu.hidden)] : []), (0, _toConsumableArray2.default)(alignmentMenu), (0, _toConsumableArray2.default)(!areAnyNewToolbarFlagsEnabled ? [separator(alignmentMenu.length === 0)] : []), (0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), fitToContentButton, (0, _toConsumableArray2.default)(colorPicker), (0, _toConsumableArray2.default)(!areAnyNewToolbarFlagsEnabled ? [{
             type: 'extensions-placeholder',
             separator: 'end'
           }, copyButton, {

package/dist/es2019/nodeviews/TableResizer.js

@@ -513,7 +513,7 @@ export const TableResizer = ({
     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)

package/dist/es2019/nodeviews/table.js

@@ -8,10 +8,12 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
 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 { isTableInContentMode } from '../pm-plugins/utils/tableMode';
 import { TableComponentWithSharedState } from './TableComponentWithSharedState';
 import { tableNodeSpecWithFixedToDOM } from './toDOM';
 const tableAttributes = node => {
@@ -176,17 +178,31 @@ export default class TableView extends ReactNodeView {
     }
   }
   setDomAttrs(node) {
-    var _this$reactComponentP6, _this$getEditorFeatur2, _this$options3, _this$options4;
+    var _this$reactComponentP8, _this$getEditorFeatur2, _this$options3, _this$options4;
     if (!this.table) {
       return; // width / attribute application to actual table will happen later when table is set
     }
     const attrs = tableAttributes(node);
+    if (expValEqualsNoExposure('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
+      var _this$reactComponentP6, _this$reactComponentP7;
+      if (isTableInContentMode({
+        node,
+        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),
+        isTableNested: isTableNested(this.view.state, this.getPos())
+      }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
+        attrs['data-initial-width-mode'] = 'content';
+      } else {
+        this.table.removeAttribute('data-initial-width-mode');
+      }
+    }
     Object.keys(attrs).forEach(attr => {
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       this.table.setAttribute(attr, attrs[attr]);
     });
-    const isTableFixedColumnWidthsOptionEnabled = (fg('platform_editor_table_fixed_column_width_prop') ? (_this$reactComponentP6 = this.reactComponentProps) === null || _this$reactComponentP6 === void 0 ? void 0 : _this$reactComponentP6.allowFixedColumnWidthOption : (_this$getEditorFeatur2 = this.getEditorFeatureFlags) === null || _this$getEditorFeatur2 === void 0 ? void 0 : _this$getEditorFeatur2.call(this).tableWithFixedColumnWidthsOption) || false;
+    const isTableFixedColumnWidthsOptionEnabled = (fg('platform_editor_table_fixed_column_width_prop') ? (_this$reactComponentP8 = this.reactComponentProps) === null || _this$reactComponentP8 === void 0 ? void 0 : _this$reactComponentP8.allowFixedColumnWidthOption : (_this$getEditorFeatur2 = this.getEditorFeatureFlags) === null || _this$getEditorFeatur2 === void 0 ? void 0 : _this$getEditorFeatur2.call(this).tableWithFixedColumnWidthsOption) || false;
     // Preserve Table Width cannot have inline width set on the table
     if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled) || (_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && node.attrs.displayMode === 'fixed') {
       var _tableWidthPluginKey$;

package/dist/es2019/nodeviews/toDOM.js

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import kebabCase from 'lodash/kebabCase';
 import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
@@ -5,15 +6,23 @@ 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 { isTableInContentMode } from '../pm-plugins/utils/tableMode';
 import { getAlignmentStyle } from './table-container-styles';
 export const tableNodeSpecWithFixedToDOM = config => {
   const tableNode = config.isNestingSupported ? tableWithNestedTable : table;
   return {
     ...tableNode,
     toDOM: node => {
+      const isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
+      const isInContentMode = isTableInContentMode({
+        node,
+        allowColumnResizing: config.allowColumnResizing,
+        allowTableResizing: config.tableResizingEnabled,
+        isFullPageEditor,
+        isTableNested: config.isNested
+      }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
       const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`).join(';');
       const tableMinWidth = getResizerMinWidth(node);
-      const isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
       const attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -23,6 +32,9 @@ export const tableNodeSpecWithFixedToDOM = config => {
         'data-ssr-placeholder': `table-${node.attrs.localId}`,
         'data-ssr-placeholder-replace': `table-${node.attrs.localId}`
       };
+      if (isInContentMode) {
+        attrs['data-initial-width-mode'] = 'content';
+      }
       if (expValEquals('platform_editor_table_display_mode_in_to_dom', 'isEnabled', true)) {
         attrs['data-table-display-mode'] = node.attrs.displayMode;
       }
@@ -75,11 +87,13 @@ export const tableNodeSpecWithFixedToDOM = config => {
         class: 'pm-table-resizer-container',
         style: convertToInlineCss({
           '--ak-editor-table-gutter-padding': config.isTableScalingEnabled ? 'calc(var(--ak-editor--large-gutter-padding) * 2)' : 'calc(var(--ak-editor--large-gutter-padding) * 2 - var(--ak-editor-resizer-handle-spacing))',
-          '--ak-editor-table-width': resizableTableWidth,
+          '--ak-editor-table-width': isInContentMode ? 'max-content' : resizableTableWidth,
           width: `var(--ak-editor-table-width)`
         })
       }, ['div', {
-        class: 'resizer-item display-handle',
+        class: expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) ? 'resizer-item display-handle' : classNames('resizer-item', {
+          'display-handle': !isInContentMode
+        }),
         style: convertToInlineCss({
           position: 'relative',
           userSelect: 'auto',
@@ -88,7 +102,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
           '--ak-editor-table-min-width': `${tableMinWidth}px`,
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: getTableResizerContainerMaxWidthInCSS(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled),
-          width: getTableResizerItemWidthInCSS(node, config.isCommentEditor, config.isChromelessEditor)
+          width: isInContentMode ? 'auto' : getTableResizerItemWidthInCSS(node, config.isCommentEditor, config.isChromelessEditor)
         })
       }, ['span', {
         class: 'resizer-hover-zone'

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

@@ -10,7 +10,7 @@ import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardCol
 import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from './commands/commands-with-analytics';
 import { goToNextCellVertical } from './commands/go-to-next-cell';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, insertTableWithNestingSupport } from './commands/insert';
-export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
+export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
   var _pluginInjectionApi$a;
   const list = {};
   const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
@@ -82,7 +82,7 @@ export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProvide
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   addColumnAfterVO.common, addColumnAfterCommand(api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-  if (moveRowDown.common && moveRowUp.common && moveColumnLeft.common && moveColumnRight.common) {
+  if (dragAndDropEnabled && moveRowDown.common && moveRowUp.common && moveColumnLeft.common && moveColumnRight.common) {
     const isNewKeyMapExperiment = expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true);
     // Move row/column shortcuts
     /**