@atlaskit/editor-plugin-table 7.4.9 → 7.5.0

package/dist/cjs/plugin.js

@@ -154,8 +154,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
         name: 'tableKeymap',
         plugin: function plugin() {
           var _ref6 = options || {},
-            dragAndDropEnabled = _ref6.dragAndDropEnabled;
-          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled);
+            dragAndDropEnabled = _ref6.dragAndDropEnabled,
+            getEditorFeatureFlags = _ref6.getEditorFeatureFlags;
+          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, dragAndDropEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -196,40 +197,40 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableDragAndDrop',
         plugin: function plugin(_ref10) {
-          var dispatch = _ref10.dispatch,
-            eventDispatcher = _ref10.eventDispatcher,
-            dispatchAnalyticsEvent = _ref10.dispatchAnalyticsEvent;
-          return options !== null && options !== void 0 && options.dragAndDropEnabled ? (0, _dragAndDrop.createPlugin)(dispatch, eventDispatcher, editorAnalyticsAPI) : undefined;
+          var dispatch = _ref10.dispatch;
+          var _ref11 = options || {},
+            getEditorFeatureFlags = _ref11.getEditorFeatureFlags;
+          return options !== null && options !== void 0 && options.dragAndDropEnabled ? (0, _dragAndDrop.createPlugin)(dispatch, getEditorFeatureFlags, editorAnalyticsAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',
-        plugin: function plugin(_ref11) {
-          var dispatch = _ref11.dispatch;
+        plugin: function plugin(_ref12) {
+          var dispatch = _ref12.dispatch;
           return (0, _tableLocalId.createPlugin)(dispatch);
         }
       }, {
         name: 'tableWidth',
-        plugin: function plugin(_ref12) {
+        plugin: function plugin(_ref13) {
           var _options$fullWidthEna;
-          var dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent,
-            dispatch = _ref12.dispatch;
+          var dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent,
+            dispatch = _ref13.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
         name: 'tableOverflowAnalyticsPlugin',
-        plugin: function plugin(_ref13) {
+        plugin: function plugin(_ref14) {
           var _options$tableResizin;
-          var dispatch = _ref13.dispatch,
-            dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent;
+          var dispatch = _ref14.dispatch,
+            dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent;
           return (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref14) {
-          var dispatch = _ref14.dispatch,
-            dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref15) {
+          var dispatch = _ref15.dispatch,
+            dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
           return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event') ? (0, _plugin.createPlugin)(dispatch, dispatchAnalyticsEvent) : undefined;
         }
       }, {
@@ -260,12 +261,12 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref15) {
-      var editorView = _ref15.editorView,
-        popupsMountPoint = _ref15.popupsMountPoint,
-        popupsBoundariesElement = _ref15.popupsBoundariesElement,
-        popupsScrollableElement = _ref15.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref16) {
+      var editorView = _ref16.editorView,
+        popupsMountPoint = _ref16.popupsMountPoint,
+        popupsBoundariesElement = _ref16.popupsBoundariesElement,
+        popupsScrollableElement = _ref16.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -279,30 +280,30 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: _stickyHeaders.pluginKey,
           dragAndDropState: _dragAndDrop.pluginKey
         },
-        render: function render(_ref16) {
-          var resizingPluginState = _ref16.tableResizingPluginState,
-            stickyHeadersState = _ref16.stickyHeadersState,
-            tablePluginState = _ref16.tablePluginState,
-            tableWidthPluginState = _ref16.tableWidthPluginState,
-            dragAndDropState = _ref16.dragAndDropState;
+        render: function render(_ref17) {
+          var resizingPluginState = _ref17.tableResizingPluginState,
+            stickyHeadersState = _ref17.stickyHeadersState,
+            tablePluginState = _ref17.tablePluginState,
+            tableWidthPluginState = _ref17.tableWidthPluginState,
+            dragAndDropState = _ref17.dragAndDropState;
           var state = editorView.state;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var isResizing = isColumnResizing || isTableResizing;
-          var _ref17 = tablePluginState,
-            tableNode = _ref17.tableNode,
-            tablePos = _ref17.tablePos,
-            targetCellPosition = _ref17.targetCellPosition,
-            isContextualMenuOpen = _ref17.isContextualMenuOpen,
-            layout = _ref17.layout,
-            tableRef = _ref17.tableRef,
-            pluginConfig = _ref17.pluginConfig,
-            insertColumnButtonIndex = _ref17.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref17.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref17.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref17.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref17.isDragAndDropEnabled,
-            tableWrapperTarget = _ref17.tableWrapperTarget;
+          var _ref18 = tablePluginState,
+            tableNode = _ref18.tableNode,
+            tablePos = _ref18.tablePos,
+            targetCellPosition = _ref18.targetCellPosition,
+            isContextualMenuOpen = _ref18.isContextualMenuOpen,
+            layout = _ref18.layout,
+            tableRef = _ref18.tableRef,
+            pluginConfig = _ref18.pluginConfig,
+            insertColumnButtonIndex = _ref18.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref18.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref18.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref18.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref18.isDragAndDropEnabled,
+            tableWrapperTarget = _ref18.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && (0, _utils2.isLayoutSupported)(state) && options.breakoutEnabled ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
@@ -343,7 +344,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             hasStickyHeaders: stickyHeader && stickyHeader.sticky,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             editorAnalyticsAPI: editorAnalyticsAPI,
-            getEditorContainerWidth: defaultGetEditorContainerWidth
+            getEditorContainerWidth: defaultGetEditorContainerWidth,
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
           }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/_react.default.createElement(_FloatingContextualMenu.default, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
@@ -367,7 +369,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             editorAnalyticsAPI: editorAnalyticsAPI,
             stickyHeaders: stickyHeader,
-            pluginConfig: pluginConfig
+            pluginConfig: pluginConfig,
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
             editorView: editorView,
             selection: editorView.state.selection,
@@ -383,8 +386,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref18) {
-        var formatMessage = _ref18.formatMessage;
+      quickInsert: function quickInsert(_ref19) {
+        var formatMessage = _ref19.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),

package/dist/cjs/pm-plugins/drag-and-drop/plugin.js

@@ -23,7 +23,7 @@ var _consts = require("./consts");
 var _pluginFactory2 = require("./plugin-factory");
 var _pluginKey2 = require("./plugin-key");
 var _monitor = require("./utils/monitor");
-var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
+var destroyFn = function destroyFn(editorView, editorAnalyticsAPI, getEditorFeatureFlags) {
   var editorPageScrollContainer = document.querySelector('.fabric-editor-popup-scroll-parent');
   var rowAutoScrollers = editorPageScrollContainer ? [(0, _adapter.monitorForElements)({
     canMonitor: function canMonitor(_ref) {
@@ -153,7 +153,10 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
             tableRef = _getTablePluginState3.tableRef,
             tableNode = _getTablePluginState3.tableNode;
           if (tableRef && tableNode) {
-            (0, _utils3.insertColgroupFromNode)(tableRef, tableNode);
+            var _ref8 = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {},
+              _ref8$tablePreserveWi = _ref8.tablePreserveWidth,
+              tablePreserveWidth = _ref8$tablePreserveWi === void 0 ? false : _ref8$tablePreserveWi;
+            (0, _utils3.insertColgroupFromNode)(tableRef, tableNode, tablePreserveWidth);
           }
         }
         editorView.focus();
@@ -161,7 +164,7 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
     }
   })]));
 };
-var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventDispatcher, editorAnalyticsAPI) {
+var createPlugin = exports.createPlugin = function createPlugin(dispatch, getEditorFeatureFlags, editorAnalyticsAPI) {
   return new _safePlugin.SafePlugin({
     state: (0, _pluginFactory2.createPluginState)(dispatch, function (state) {
       return {
@@ -229,7 +232,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
     },
     view: function view(editorView) {
       return {
-        destroy: destroyFn(editorView, editorAnalyticsAPI)
+        destroy: destroyFn(editorView, editorAnalyticsAPI, getEditorFeatureFlags)
       };
     },
     props: {
@@ -239,7 +242,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
         return decorationSet;
       },
       handleKeyDown: function handleKeyDown(view, event) {
-        var _ref8;
+        var _ref9;
         var tr = view.state.tr;
         var keysToTrapWhen = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
 
@@ -260,7 +263,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             return true;
           }
         }
-        var isDragHandleFocused = ['drag-handle-button-row', 'drag-handle-button-column'].includes((_ref8 = event.target || null) === null || _ref8 === void 0 ? void 0 : _ref8.id);
+        var isDragHandleFocused = ['drag-handle-button-row', 'drag-handle-button-column'].includes((_ref9 = event.target || null) === null || _ref9 === void 0 ? void 0 : _ref9.id);
         var keysToTrap = ['Enter', ' '];
         var _getPluginState3 = (0, _pluginFactory2.getPluginState)(view.state),
           isDragMenuOpen = _getPluginState3.isDragMenuOpen;

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

@@ -27,7 +27,7 @@ var createTableWithAnalytics = function createTableWithAnalytics(editorAnalytics
     eventType: _analytics.EVENT_TYPE.TRACK
   })(editorAnalyticsAPI)((0, _commands2.createTable)());
 };
-function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled) {
+function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, dragAndDropEnabled) {
   var list = {};
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.nextCell.common, (0, _commands2.goToNextCell)(editorAnalyticsAPI)(1), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.previousCell.common, (0, _commands2.goToNextCell)(editorAnalyticsAPI)(-1), list);
@@ -59,11 +59,14 @@ function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEn
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.deleteRow.common, (0, _commandsWithAnalytics.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut)(editorAnalyticsAPI), list);
   }
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+    var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+      _ref$tablePreserveWid = _ref.tablePreserveWidth,
+      tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.startColumnResizing.common, _columnResize.initiateKeyboardColumnResizing, list);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, (0, _columnResize.activateNextResizeArea)(1), list);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, (0, _columnResize.activateNextResizeArea)(-1), list);
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.decreaseMediaSize.common, (0, _columnResize.changeColumnWidthByStep)(-10, getEditorContainerWidth), list);
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, (0, _columnResize.changeColumnWidthByStep)(10, getEditorContainerWidth), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.decreaseMediaSize.common, (0, _columnResize.changeColumnWidthByStep)(-10, getEditorContainerWidth, tablePreserveWidth), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, (0, _columnResize.changeColumnWidthByStep)(10, getEditorContainerWidth, tablePreserveWidth), list);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.escape.common, (0, _columnResize.stopKeyboardColumnResizing)(), list);
   }
   return (0, _keymap.keymap)(list);

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

@@ -95,9 +95,12 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
           }
         });
       }
+      var _getEditorFeatureFlag = getEditorFeatureFlags(),
+        _getEditorFeatureFlag2 = _getEditorFeatureFlag.tablePreserveWidth,
+        tablePreserveWidth = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
       if (tr) {
         // "fixTables" removes empty rows as we don't allow that in schema
-        var updatedTr = (0, _eventHandlers.handleCut)(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined);
+        var updatedTr = (0, _eventHandlers.handleCut)(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined, tablePreserveWidth);
         return (0, _transforms2.fixTables)(updatedTr) || updatedTr;
       }
       if (transactions.find(function (tr) {

package/dist/cjs/pm-plugins/table-resizing/event-handlers.js

@@ -25,6 +25,9 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     dispatch = view.dispatch;
   var editorDisabled = !view.editable;
   var domAtPos = view.domAtPos.bind(view);
+  var _getEditorFeatureFlag = getEditorFeatureFlags(),
+    _getEditorFeatureFlag2 = _getEditorFeatureFlag.tablePreserveWidth,
+    tablePreserveWidth = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
   if (editorDisabled || localResizeHandlePos === null || !(0, _utils3.pointsAtCell)(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
@@ -70,7 +73,8 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     table: originalTable,
     tableRef: dom,
     start: start,
-    domAtPos: domAtPos
+    domAtPos: domAtPos,
+    tablePreserveWidth: tablePreserveWidth
   });
   if ((0, _commands.evenColumns)({
     resizeState: resizeState,
@@ -142,7 +146,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
         var selectedColumns = selectionRect ? (0, _utils2.getSelectedColumnIndexes)(selectionRect) : [];
         // only selected (or selected - 1) columns should be distributed
         var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-        var newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - startX, dom, resizingSelectedColumns ? selectedColumns : undefined);
+        var newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - startX, dom, resizingSelectedColumns ? selectedColumns : undefined, tablePreserveWidth);
         tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
         if (colIndex === map.width - 1) {
           var mouseUpTime = event.timeStamp;
@@ -190,7 +194,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     var table = $cell.node(-1);
     var map = _tableMap.TableMap.get(table);
     var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
-    (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom);
+    (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom, undefined, tablePreserveWidth);
     (0, _utils3.updateControls)()(state);
   }
   window.addEventListener('mouseup', finish);

package/dist/cjs/pm-plugins/table-resizing/utils/colgroup.js

@@ -11,6 +11,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _consts = require("./consts");
 /**
  * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
  * than the table and table wrapper elements. This is necessary as there is no longer
@@ -20,7 +21,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var getColWidthFix = exports.getColWidthFix = function getColWidthFix(colwidth, tableColumnCount) {
   return colwidth - 1 / tableColumnCount;
 };
-var generateColgroup = exports.generateColgroup = function generateColgroup(table) {
+var generateColgroup = exports.generateColgroup = function generateColgroup(table, tableRef) {
   var cols = [];
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
     var map = _tableMap.TableMap.get(table);
@@ -29,11 +30,27 @@ var generateColgroup = exports.generateColgroup = function generateColgroup(tabl
       if (Array.isArray(cell.attrs.colwidth)) {
         // We slice here to guard against our colwidth array having more entries
         // Than the we actually span. We'll patch the document at a later point.
-        cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
-          cols.push(['col', {
-            style: "width: ".concat(getColWidthFix(width ? Math.max(width, _styles.tableCellMinWidth) : _styles.tableCellMinWidth, map.width), "px;")
-          }]);
-        });
+        if (tableRef) {
+          var _tableRef$parentEleme;
+          var tableWidth = table.attrs && table.attrs.width;
+          var renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 760;
+          var scalePercent = renderWidth / tableWidth;
+          scalePercent = Math.max(scalePercent, 1 - _consts.MAX_SCALING_PERCENT);
+          cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
+            var fixedColWidth = getColWidthFix(width, map.width);
+            var scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
+            var finalWidth = Math.max(scaledWidth, _styles.tableCellMinWidth);
+            cols.push(['col', {
+              style: "width: ".concat(finalWidth, "px;")
+            }]);
+          });
+        } else {
+          cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
+            cols.push(['col', {
+              style: "width: ".concat(getColWidthFix(width ? Math.max(width, _styles.tableCellMinWidth) : _styles.tableCellMinWidth, map.width), "px;")
+            }]);
+          });
+        }
       } else {
         // When we have merged cells on the first row (firstChild),
         // We want to ensure we're creating the appropriate amount of
@@ -73,12 +90,16 @@ var generateColgroup = exports.generateColgroup = function generateColgroup(tabl
   return cols;
 };
 var insertColgroupFromNode = exports.insertColgroupFromNode = function insertColgroupFromNode(tableRef, table) {
+  var tablePreserveWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var shouldRemove = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
   var colgroup = tableRef.querySelector('colgroup');
-  if (colgroup) {
+  if (colgroup && shouldRemove) {
     tableRef.removeChild(colgroup);
   }
-  colgroup = renderColgroupFromNode(table);
-  tableRef.insertBefore(colgroup, tableRef.firstChild);
+  colgroup = renderColgroupFromNode(table, tablePreserveWidth ? tableRef : undefined);
+  if (shouldRemove) {
+    tableRef.insertBefore(colgroup, tableRef.firstChild);
+  }
   return colgroup.children;
 };
 var hasTableBeenResized = exports.hasTableBeenResized = function hasTableBeenResized(table) {
@@ -100,8 +121,8 @@ var isMinCellWidthTable = exports.isMinCellWidthTable = function isMinCellWidthT
   });
   return isTableMinCellWidth;
 };
-function renderColgroupFromNode(table) {
-  var rendered = _model.DOMSerializer.renderSpec(document, ['colgroup', {}].concat((0, _toConsumableArray2.default)(generateColgroup(table))));
+function renderColgroupFromNode(table, maybeTableRef) {
+  var rendered = _model.DOMSerializer.renderSpec(document, ['colgroup', {}].concat((0, _toConsumableArray2.default)(generateColgroup(table, maybeTableRef))));
   return rendered.dom;
 }
 var getColgroupChildrenLength = exports.getColgroupChildrenLength = function getColgroupChildrenLength(table) {

package/dist/cjs/pm-plugins/table-resizing/utils/consts.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TABLE_MAX_WIDTH = exports.COLUMN_MIN_WIDTH = void 0;
+exports.TABLE_MAX_WIDTH = exports.TABLE_DEFAULT_WIDTH = exports.MAX_SCALING_PERCENT = exports.COLUMN_MIN_WIDTH = void 0;
 var COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = 48;
-var TABLE_MAX_WIDTH = exports.TABLE_MAX_WIDTH = 1800;
+var TABLE_DEFAULT_WIDTH = exports.TABLE_DEFAULT_WIDTH = 760;
+var TABLE_MAX_WIDTH = exports.TABLE_MAX_WIDTH = 1800;
+var MAX_SCALING_PERCENT = exports.MAX_SCALING_PERCENT = 0.3;

package/dist/cjs/pm-plugins/table-resizing/utils/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "COLUMN_MIN_WIDTH", {
     return _consts.COLUMN_MIN_WIDTH;
   }
 });
+Object.defineProperty(exports, "MAX_SCALING_PERCENT", {
+  enumerable: true,
+  get: function get() {
+    return _consts.MAX_SCALING_PERCENT;
+  }
+});
+Object.defineProperty(exports, "TABLE_DEFAULT_WIDTH", {
+  enumerable: true,
+  get: function get() {
+    return _consts.TABLE_DEFAULT_WIDTH;
+  }
+});
 Object.defineProperty(exports, "TABLE_MAX_WIDTH", {
   enumerable: true,
   get: function get() {
@@ -123,6 +135,18 @@ Object.defineProperty(exports, "getResizeState", {
     return _resizeState.getResizeState;
   }
 });
+Object.defineProperty(exports, "getTableContainerElement", {
+  enumerable: true,
+  get: function get() {
+    return _misc.getTableContainerElement;
+  }
+});
+Object.defineProperty(exports, "getTableElementWidth", {
+  enumerable: true,
+  get: function get() {
+    return _misc.getTableElementWidth;
+  }
+});
 Object.defineProperty(exports, "getTableMaxWidth", {
   enumerable: true,
   get: function get() {

package/dist/cjs/pm-plugins/table-resizing/utils/misc.js

@@ -7,7 +7,7 @@ exports.currentColWidth = currentColWidth;
 exports.domCellAround = domCellAround;
 exports.getDefaultLayoutMaxWidth = getDefaultLayoutMaxWidth;
 exports.getLayoutSize = getLayoutSize;
-exports.getTableMaxWidth = void 0;
+exports.getTableMaxWidth = exports.getTableElementWidth = exports.getTableContainerElement = void 0;
 exports.pointsAtCell = pointsAtCell;
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -15,6 +15,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colgroup = require("./colgroup");
 // Translates named layouts in number values.
 function getLayoutSize(tableLayout) {
   var containerWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -80,4 +81,22 @@ var getTableMaxWidth = exports.getTableMaxWidth = function getTableMaxWidth(_ref
     maxWidth -= _editorSharedStyles.akEditorTableNumberColumnWidth;
   }
   return maxWidth;
+};
+
+/**
+ *
+ * @param table
+ * @returns calculated width of <table /> element derived from sum of colwidths on tableCell or tableHeader nodes or falls back to container width
+ */
+var getTableElementWidth = exports.getTableElementWidth = function getTableElementWidth(table) {
+  if ((0, _colgroup.hasTableBeenResized)(table)) {
+    // TODO: is there a scenario where ADF columns are SMALLER than container width?
+    return (0, _utils.calcTableColumnWidths)(table).reduce(function (sum, width) {
+      return sum + width;
+    }, 0);
+  }
+  return getTableContainerElement(table);
+};
+var getTableContainerElement = exports.getTableContainerElement = function getTableContainerElement(table) {
+  return (0, _nodeWidth.getTableContainerWidth)(table);
 };

package/dist/cjs/pm-plugins/table-resizing/utils/resize-column.js

@@ -9,7 +9,8 @@ var _resizeState = require("./resize-state");
 // Resize a given column by an amount from the current state
 
 var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, selectedColumns) {
+  var tablePreserveWidth = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var newState = amount > 0 ? (0, _resizeLogic.growColumn)(resizeState, colIndex, amount, selectedColumns) : amount < 0 ? (0, _resizeLogic.shrinkColumn)(resizeState, colIndex, amount, selectedColumns) : resizeState;
-  (0, _resizeState.updateColgroup)(newState, tableRef);
+  (0, _resizeState.updateColgroup)(newState, tableRef, tablePreserveWidth);
   return newState;
 };

package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js

@@ -14,6 +14,7 @@ var _colgroup = require("./colgroup");
 var _columnState = require("./column-state");
 var _dom = require("./dom");
 var _misc = require("./misc");
+var _index = require("./index");
 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 getResizeState = exports.getResizeState = function getResizeState(_ref) {
@@ -22,7 +23,10 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
     table = _ref.table,
     tableRef = _ref.tableRef,
     start = _ref.start,
-    domAtPos = _ref.domAtPos;
+    domAtPos = _ref.domAtPos,
+    _ref$tablePreserveWid = _ref.tablePreserveWidth,
+    tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
+  // If the table has been resized, we can use the column widths from the table node
   if ((0, _colgroup.hasTableBeenResized)(table)) {
     var _cols = (0, _utils.calcTableColumnWidths)(table).map(function (width, index) {
       return {
@@ -46,10 +50,22 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
       overflow: _overflow
     };
   }
+  var shouldReinsertColgroup = !tablePreserveWidth;
 
   // Getting the resize state from DOM
-  var colgroupChildren = (0, _colgroup.insertColgroupFromNode)(tableRef, table);
+  var colgroupChildren = (0, _colgroup.insertColgroupFromNode)(tableRef, table, tablePreserveWidth, shouldReinsertColgroup // don't reinsert colgroup when preserving table width - this causes widths to jump
+  );
+
   var cols = Array.from(colgroupChildren).map(function (_, index) {
+    // If the table hasn't been resized and we have a table width attribute, we can use it
+    // to calculate the widths of the columns
+    if (tablePreserveWidth && table.attrs.width) {
+      return {
+        index: index,
+        width: table.attrs.width / colgroupChildren.length,
+        minWidth: 48
+      };
+    }
     var cellsRefs = (0, _columnState.getCellsRefsInColumn)(index, table, start, domAtPos);
     return (0, _columnState.getColumnStateFromDOM)(cellsRefs, index, minWidth);
   });
@@ -70,18 +86,41 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
 };
 
 // updates Colgroup DOM node with new widths
-var updateColgroup = exports.updateColgroup = function updateColgroup(state, tableRef) {
+var updateColgroup = exports.updateColgroup = function updateColgroup(state, tableRef, tablePreserveWidth) {
   var cols = tableRef.querySelectorAll('col');
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
     var columnsCount = cols.length;
-    state.cols.filter(function (column) {
-      return column && !!column.width;
-    }) // if width is 0, we dont want to apply that.
-    .forEach(function (column, i) {
-      if (cols[i]) {
-        cols[i].style.width = "".concat((0, _colgroup.getColWidthFix)(column.width, columnsCount), "px");
+    if (tablePreserveWidth) {
+      var _tableRef$dataset;
+      var tableWidth = parseInt(((_tableRef$dataset = tableRef.dataset) === null || _tableRef$dataset === void 0 ? void 0 : _tableRef$dataset.tableWidth) || ''); // TODO - get this value from the table node, not the dom
+      if (tableWidth) {
+        var _tableRef$parentEleme;
+        var renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || _index.TABLE_DEFAULT_WIDTH;
+        var scalePercent = renderWidth / tableWidth;
+        scalePercent = Math.max(scalePercent, 1 - _index.MAX_SCALING_PERCENT);
+        state.cols.filter(function (column) {
+          return column && !!column.width;
+        }) // if width is 0, we dont want to apply that.
+        .forEach(function (column, i) {
+          var fixedColWidth = (0, _colgroup.getColWidthFix)(column.width, columnsCount);
+          var scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
+          var finalWidth = Math.max(scaledWidth, _styles.tableCellMinWidth);
+          // we aren't handling the remaining pixels here when the 48px min width is reached
+          if (cols[i]) {
+            cols[i].style.width = "".concat(finalWidth, "px");
+          }
+        });
       }
-    });
+    } else {
+      state.cols.filter(function (column) {
+        return column && !!column.width;
+      }) // if width is 0, we dont want to apply that.
+      .forEach(function (column, i) {
+        if (cols[i]) {
+          cols[i].style.width = "".concat((0, _colgroup.getColWidthFix)(column.width, columnsCount), "px");
+        }
+      });
+    }
   } else {
     state.cols.filter(function (column) {
       return column && !!column.width;
@@ -269,6 +308,7 @@ var normaliseTableLayout = exports.normaliseTableLayout = function normaliseTabl
   }
 };
 var getNewResizeStateFromSelectedColumns = exports.getNewResizeStateFromSelectedColumns = function getNewResizeStateFromSelectedColumns(rect, state, domAtPos, getEditorContainerWidth) {
+  var tablePreserveWidth = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   // Fail early so that we don't do complex calculations for no reason
   var numColumnsSelected = rect.right - rect.left;
   if (numColumnsSelected <= 1) {
@@ -305,7 +345,8 @@ var getNewResizeStateFromSelectedColumns = exports.getNewResizeStateFromSelected
     table: table.node,
     tableRef: tableRef,
     start: table.start,
-    domAtPos: domAtPos
+    domAtPos: domAtPos,
+    tablePreserveWidth: tablePreserveWidth
   });
   var newResizeState = evenSelectedColumnsWidths(resizeState, rect);
   var widthsBefore = resizeState.widths;