@atlaskit/editor-plugin-table 19.0.1 → 20.0.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/editor-plugin-table
 
+## 20.0.0
+
+### Patch Changes
+
+- [`b10c935ca9497`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b10c935ca9497) -
+  Removed deprecated `browser` singleton from editor-common. This has been replaced with a
+  `getBrowserInfo` function that returns the same information. This change was made to avoid issues
+  with module loading order and to provide a more consistent API for accessing browser information.
+
+  Please update any imports of `browser` to use `getBrowserInfo` instead. For example, the following
+  imports have been removed:
+
+  ```javascript
+  import { browser } from '@atlaskit/editor-common/utils';
+  import { browser } from '@atlaskit/editor-common/browser';
+  ```
+
+  Instead, please use:
+
+  ```javascript
+  import { getBrowserInfo } from '@atlaskit/editor-common/browser';
+  ```
+
+  If you were previously using `browser.ie_version`, you would now use
+  `getBrowserInfo().ie_version`.
+
+- Updated dependencies
+
 ## 19.0.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/table.js

@@ -22,10 +22,12 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _createPluginConfig = require("../pm-plugins/create-plugin-config");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _tableWidth = require("../pm-plugins/table-width");
 var _nodes = require("../pm-plugins/utils/nodes");
+var _tableMode = require("../pm-plugins/utils/tableMode");
 var _TableComponentWithSharedState = require("./TableComponentWithSharedState");
 var _toDOM = require("./toDOM");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -205,7 +207,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     key: "setDomAttrs",
     value: function setDomAttrs(node) {
       var _this3 = this,
-        _this$reactComponentP6,
+        _this$reactComponentP8,
         _this$getEditorFeatur2,
         _this$options3,
         _this$options4;
@@ -213,12 +215,26 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         return; // width / attribute application to actual table will happen later when table is set
       }
       var attrs = tableAttributes(node);
+      if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
+        var _this$reactComponentP6, _this$reactComponentP7;
+        if ((0, _tableMode.isTableInContentMode)({
+          node: 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: (0, _nodes.isTableNested)(this.view.state, this.getPos())
+        }) && (0, _expValEquals.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(function (attr) {
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         _this3.table.setAttribute(attr, attrs[attr]);
       });
-      var isTableFixedColumnWidthsOptionEnabled = ((0, _platformFeatureFlags.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;
+      var isTableFixedColumnWidthsOptionEnabled = ((0, _platformFeatureFlags.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/cjs/nodeviews/toDOM.js

@@ -8,6 +8,7 @@ exports.tableNodeSpecWithFixedToDOM = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
@@ -15,6 +16,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
 var _misc = require("../pm-plugins/table-resizing/utils/misc");
+var _tableMode = require("../pm-plugins/utils/tableMode");
 var _tableContainerStyles = require("./table-container-styles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -22,6 +24,14 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
   var tableNode = config.isNestingSupported ? _adfSchema.tableWithNestedTable : _adfSchema.table;
   return _objectSpread(_objectSpread({}, tableNode), {}, {
     toDOM: function toDOM(node) {
+      var isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
+      var isInContentMode = (0, _tableMode.isTableInContentMode)({
+        node: node,
+        allowColumnResizing: config.allowColumnResizing,
+        allowTableResizing: config.tableResizingEnabled,
+        isFullPageEditor: isFullPageEditor,
+        isTableNested: config.isNested
+      }) && (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
       var alignmentStyle = Object.entries((0, _tableContainerStyles.getAlignmentStyle)(node.attrs.layout)).map(function (_ref) {
         var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
           k = _ref2[0],
@@ -29,7 +39,6 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         return "".concat((0, _kebabCase.default)(k), ": ").concat((0, _kebabCase.default)(v));
       }).join(';');
       var tableMinWidth = (0, _colgroup.getResizerMinWidth)(node);
-      var isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
       var attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -39,6 +48,9 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         'data-ssr-placeholder': "table-".concat(node.attrs.localId),
         'data-ssr-placeholder-replace': "table-".concat(node.attrs.localId)
       };
+      if (isInContentMode) {
+        attrs['data-initial-width-mode'] = 'content';
+      }
       if ((0, _expValEquals.expValEquals)('platform_editor_table_display_mode_in_to_dom', 'isEnabled', true)) {
         attrs['data-table-display-mode'] = node.attrs.displayMode;
       }
@@ -91,11 +103,13 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         class: 'pm-table-resizer-container',
         style: (0, _lazyNodeView.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: (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) ? 'resizer-item display-handle' : (0, _classnames.default)('resizer-item', {
+          'display-handle': !isInContentMode
+        }),
         style: (0, _lazyNodeView.convertToInlineCss)({
           position: 'relative',
           userSelect: 'auto',
@@ -104,7 +118,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
           '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: (0, _misc.getTableResizerContainerMaxWidthInCSS)(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled),
-          width: (0, _misc.getTableResizerItemWidthInCSS)(node, config.isCommentEditor, config.isChromelessEditor)
+          width: isInContentMode ? 'auto' : (0, _misc.getTableResizerItemWidthInCSS)(node, config.isCommentEditor, config.isChromelessEditor)
         })
       }, ['span', {
         class: 'resizer-hover-zone'

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bindEventListener = require("bind-event-listener");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _browser = require("@atlaskit/editor-common/browser");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
@@ -32,12 +33,15 @@ var _fixTables = require("./transforms/fix-tables");
 var _replaceTable = require("./transforms/replace-table");
 var _decoration = require("./utils/decoration");
 var _paste = require("./utils/paste");
+var _tableMode = require("./utils/tableMode");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) {
   var _accessibilityUtils;
   var state = (0, _pluginFactory.createPluginState)(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
+    isCommentEditor: isCommentEditor,
+    isChromelessEditor: isChromelessEditor,
     isTableHovered: false,
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
@@ -132,8 +136,34 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
       }
     },
     view: function view(editorView) {
+      var _pluginInjectionApi$e;
       var domAtPos = editorView.domAtPos.bind(editorView);
       editorViewRef = editorView;
+      var contentModeSizeTableId = null;
+      var focusListenerBinding = null;
+      if ((pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 || (_pluginInjectionApi$e = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.mode) !== 'view' && (0, _tableMode.isContentModeSupported)({
+        allowColumnResizing: !!pluginConfig.allowColumnResizing,
+        allowTableResizing: !!pluginConfig.allowTableResizing,
+        isFullPageEditor: !isChromelessEditor && !isCommentEditor
+      }) && (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
+        focusListenerBinding = (0, _bindEventListener.bind)(editorView.dom, {
+          type: 'focus',
+          listener: function listener() {
+            if (contentModeSizeTableId) {
+              return;
+            }
+            contentModeSizeTableId = requestAnimationFrame(function () {
+              if (!editorViewRef) {
+                return;
+              }
+              (0, _tableMode.applyMeasuredWidthToAllTables)(editorViewRef, pluginInjectionApi);
+            });
+          },
+          options: {
+            once: true
+          }
+        });
+      }
       return {
         update: function update(view, prevState) {
           var state = view.state,
@@ -142,12 +172,12 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
           var pluginState = (0, _pluginFactory.getPluginState)(state);
           var tableRef;
           if ((0, _platformFeatureFlags.fg)('platform_editor_enable_table_dnd')) {
-            var _pluginInjectionApi$e;
+            var _pluginInjectionApi$e2;
             var parent = (0, _utils2.findParentDomRefOfType)(state.schema.nodes.table, domAtPos)(selection);
-            var shouldSetTableRef = (0, _platformFeatureFlags.fg)('platform_editor_enable_table_dnd_patch_1') ? parent && (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 || (_pluginInjectionApi$e = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.mode) !== 'view' : parent;
+            var shouldSetTableRef = (0, _platformFeatureFlags.fg)('platform_editor_enable_table_dnd_patch_1') ? parent && (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e2 = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e2 === void 0 || (_pluginInjectionApi$e2 = _pluginInjectionApi$e2.sharedState.currentState()) === null || _pluginInjectionApi$e2 === void 0 ? void 0 : _pluginInjectionApi$e2.mode) !== 'view' : parent;
             if ((0, _expValEquals.expValEquals)('platform_editor_table_update_table_ref', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_update_table_ref_fix')) {
-              var _pluginInjectionApi$e2, _pluginInjectionApi$i;
-              shouldSetTableRef = parent && (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e2 = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e2 === void 0 || (_pluginInjectionApi$e2 = _pluginInjectionApi$e2.sharedState.currentState()) === null || _pluginInjectionApi$e2 === void 0 ? void 0 : _pluginInjectionApi$e2.mode) !== 'view' && (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$i = pluginInjectionApi.interaction) === null || _pluginInjectionApi$i === void 0 || (_pluginInjectionApi$i = _pluginInjectionApi$i.sharedState.currentState()) === null || _pluginInjectionApi$i === void 0 ? void 0 : _pluginInjectionApi$i.interactionState) !== 'hasNotHadInteraction';
+              var _pluginInjectionApi$e3, _pluginInjectionApi$i;
+              shouldSetTableRef = parent && (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e3 = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e3 === void 0 || (_pluginInjectionApi$e3 = _pluginInjectionApi$e3.sharedState.currentState()) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.mode) !== 'view' && (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$i = pluginInjectionApi.interaction) === null || _pluginInjectionApi$i === void 0 || (_pluginInjectionApi$i = _pluginInjectionApi$i.sharedState.currentState()) === null || _pluginInjectionApi$i === void 0 ? void 0 : _pluginInjectionApi$i.interactionState) !== 'hasNotHadInteraction';
             }
             if (shouldSetTableRef) {
               tableRef =
@@ -209,6 +239,10 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
           } else if (pluginState.isResizeHandleWidgetAdded) {
             (0, _misc.removeResizeHandleDecorations)()(state, dispatch);
           }
+        },
+        destroy: function destroy() {
+          contentModeSizeTableId && cancelAnimationFrame(contentModeSizeTableId);
+          focusListenerBinding && focusListenerBinding();
         }
       };
     },

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

@@ -15,6 +15,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _consts = require("./table-resizing/utils/consts");
 var _alignment = require("./utils/alignment");
+var _tableMode = require("./utils/tableMode");
 var _excluded = ["width"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
@@ -68,6 +69,15 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
       var tr = newState.tr;
       if (isReplaceDocumentOperation && !isCommentEditor) {
         newState.doc.forEach(function (node, offset) {
+          if ((0, _tableMode.isTableInContentMode)({
+            node: node,
+            allowColumnResizing: true,
+            allowTableResizing: true,
+            isFullPageEditor: true,
+            isTableNested: false
+          })) {
+            return;
+          }
           if (node.type === table) {
             var width = node.attrs.width;
             var layout = node.attrs.layout;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTableMeasurement = exports.applyTableMeasurement = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _styles = require("@atlaskit/editor-common/styles");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _tableTransformUtils = require("./table-transform-utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var tableWidth = function tableWidth(contentWidth) {
+  var maxEditorWidth = (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? _editorSharedStyles.akEditorMaxLayoutWidth : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+  return Math.min(maxEditorWidth, contentWidth);
+};
+var getTableMeasurement = exports.getTableMeasurement = function getTableMeasurement(tableRef) {
+  var colWidths = getRenderedColgroupColumnWidths(tableRef);
+  var totalContentWidth = colWidths.reduce(function (acc, current) {
+    return acc + current;
+  }, 0);
+  return {
+    colWidths: colWidths,
+    tableWidth: tableWidth(totalContentWidth)
+  };
+};
+var applyTableMeasurement = exports.applyTableMeasurement = function applyTableMeasurement(tr, tableNode, _ref, tablePos) {
+  var colWidths = _ref.colWidths,
+    tableWidth = _ref.tableWidth;
+  tr = (0, _tableTransformUtils.updateCellsMarkup)(tr, tableNode, tablePos, function (cell, _rowIndex, colIndex) {
+    var newColWidths = colWidths.slice(colIndex, colIndex + cell.attrs.colspan);
+    return cell.type.createChecked(_objectSpread(_objectSpread({}, cell.attrs), {}, {
+      colwidth: newColWidths.length ? newColWidths : null
+    }), cell.content, cell.marks);
+  });
+  return tr.setNodeMarkup(tablePos, undefined, _objectSpread(_objectSpread({}, tableNode.attrs), {}, {
+    width: tableWidth
+  }));
+};
+function getRenderedColgroupColumnWidths(tableRef) {
+  var cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
+  return cols.map(function (col) {
+    var width = col.getBoundingClientRect().width;
+    return Math.max(Math.round(width), _styles.tableCellMinWidth);
+  });
+}

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

@@ -11,6 +11,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _columnState = require("../table-resizing/utils/column-state");
 var _contentWidth = require("../table-resizing/utils/content-width");
 var _misc = require("../table-resizing/utils/misc");
+var _tableTransformUtils = require("./table-transform-utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var validateTableCellNodeAttrs = function validateTableCellNodeAttrs(_ref, reportInvalidTableCellSpanAttrs) {
@@ -47,7 +48,7 @@ var validateTableCellNodeAttrs = function validateTableCellNodeAttrs(_ref, repor
 // We remove the third width here, assumed duplicate content.
 var removeExtraneousColumnWidths = exports.removeExtraneousColumnWidths = function removeExtraneousColumnWidths(node, basePos, tr, reportInvalidTableCellSpanAttrs) {
   var hasProblems = false;
-  tr = replaceCells(tr, node, basePos, function (cell) {
+  tr = (0, _tableTransformUtils.replaceCells)(tr, node, basePos, function (cell) {
     var _cell$attrs = cell.attrs,
       colwidth = _cell$attrs.colwidth,
       colspan = _cell$attrs.colspan,
@@ -117,7 +118,7 @@ var fixAutoSizedTable = exports.fixAutoSizedTable = function fixAutoSizedTable(v
   var scaledColumnWidths = colWidths.map(function (width) {
     return Math.floor(width * scale);
   });
-  tr = replaceCells(tr, tableNode, tablePos, function (cell, _rowIndex, colIndex) {
+  tr = (0, _tableTransformUtils.replaceCells)(tr, tableNode, tablePos, function (cell, _rowIndex, colIndex) {
     var newColWidths = scaledColumnWidths.slice(colIndex, colIndex + cell.attrs.colspan);
     return cell.type.createChecked(_objectSpread(_objectSpread({}, cell.attrs), {}, {
       colwidth: newColWidths.length ? newColWidths : null
@@ -160,36 +161,4 @@ function parseDOMColumnWidths(domAtPos, tableNode, tableStart, tableRef) {
     }
   }
   return cols;
-}
-
-// TODO: ED-26961 - move to prosemirror-utils
-var replaceCells = function replaceCells(tr, table, tablePos, modifyCell) {
-  var rows = [];
-  var modifiedCells = 0;
-  for (var rowIndex = 0; rowIndex < table.childCount; rowIndex++) {
-    var row = table.child(rowIndex);
-    var cells = [];
-    for (var colIndex = 0; colIndex < row.childCount; colIndex++) {
-      var 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
-      var 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) {
-    var newTable = table.type.createChecked(table.attrs, rows, table.marks);
-    return tr.replaceWith(tablePos, tablePos + table.nodeSize, newTable);
-  }
-  return tr;
-};
+}

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

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateCellsMarkup = exports.replaceCells = void 0;
+// TODO: ED-26961 - move to prosemirror-utils
+var replaceCells = exports.replaceCells = function replaceCells(tr, table, tablePos, modifyCell) {
+  var rows = [];
+  var modifiedCells = 0;
+  for (var rowIndex = 0; rowIndex < table.childCount; rowIndex++) {
+    var row = table.child(rowIndex);
+    var cells = [];
+    for (var colIndex = 0; colIndex < row.childCount; colIndex++) {
+      var 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
+      var 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) {
+    var 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`.
+ */
+var updateCellsMarkup = exports.updateCellsMarkup = function updateCellsMarkup(tr, table, tablePos, modifyCell) {
+  var rowOffset = tablePos + 1;
+  for (var rowIndex = 0; rowIndex < table.childCount; rowIndex++) {
+    var row = table.child(rowIndex);
+    var cellOffset = rowOffset + 1;
+    for (var colIndex = 0; colIndex < row.childCount; colIndex++) {
+      var cell = row.child(colIndex);
+      var 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/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/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;
   };
 };