@atlaskit/editor-plugin-table 7.4.9 → 7.5.0

package/dist/es2019/commands/insert.js

@@ -20,7 +20,7 @@ function addColumnAtCustomStep(column) {
     return tr;
   };
 }
-export function addColumnAt(getEditorContainerWidth) {
+export function addColumnAt(getEditorContainerWidth, tablePreserveWidth = false) {
   return (column, allowAddColumnCustomStep = false, view) => {
     return tr => {
       let updatedTr = tr;
@@ -32,7 +32,7 @@ export function addColumnAt(getEditorContainerWidth) {
       const table = findTable(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = rescaleColumns()(table, view)(updatedTr);
+        updatedTr = rescaleColumns(tablePreserveWidth)(table, view)(updatedTr);
       }
       if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event') && view) {
         updatedTr = updateRowOrColumnMovedTransform({
@@ -49,14 +49,14 @@ export function addColumnAt(getEditorContainerWidth) {
 
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
-export const addColumnBefore = getEditorContainerWidth => (state, dispatch, view) => {
+export const addColumnBefore = (getEditorContainerWidth, tablePreserveWidth = false) => (state, dispatch, view) => {
   const table = findTable(state.selection);
   if (!table) {
     return false;
   }
   if (dispatch) {
     let rect = selectedRect(state);
-    dispatch(addColumnAt(getEditorContainerWidth)(rect.left, getAllowAddColumnCustomStep(state), view)(state.tr));
+    dispatch(addColumnAt(getEditorContainerWidth, tablePreserveWidth)(rect.left, getAllowAddColumnCustomStep(state), view)(state.tr));
   }
   return true;
 };
@@ -74,8 +74,8 @@ export const addColumnAfter = getEditorContainerWidth => (state, dispatch, view)
   }
   return true;
 };
-export const insertColumn = getEditorContainerWidth => column => (state, dispatch, view) => {
-  let tr = addColumnAt(getEditorContainerWidth)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
+export const insertColumn = (getEditorContainerWidth, tablePreserveWidth = false) => column => (state, dispatch, view) => {
+  let tr = addColumnAt(getEditorContainerWidth, tablePreserveWidth)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
   const table = findTable(tr.selection);
   if (!table) {
     return false;

package/dist/es2019/commands-with-analytics.js

@@ -167,7 +167,7 @@ export const insertRowWithAnalytics = editorAnalyticsAPI => (inputMethod, option
     eventType: EVENT_TYPE.TRACK
   };
 })(editorAnalyticsAPI)(insertRow(options.index, options.moveCursorToInsertedRow));
-export const insertColumnWithAnalytics = (getEditorContainerWidth, editorAnalyticsAPI) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
+export const insertColumnWithAnalytics = (getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth = false) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,
     totalColumnCount
@@ -184,7 +184,7 @@ export const insertColumnWithAnalytics = (getEditorContainerWidth, editorAnalyti
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(editorAnalyticsAPI)(insertColumn(getEditorContainerWidth)(position));
+})(editorAnalyticsAPI)(insertColumn(getEditorContainerWidth, tablePreserveWidth)(position));
 export const deleteRowsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect, isHeaderRowRequired) => withEditorAnalyticsAPI(({
   selection
 }) => {
@@ -211,7 +211,7 @@ export const deleteRowsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect,
   }
   return true;
 });
-export const deleteColumnsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect) => withEditorAnalyticsAPI(({
+export const deleteColumnsWithAnalytics = (editorAnalyticsAPI, tablePreserveWidth = false) => (inputMethod, rect) => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -231,7 +231,7 @@ export const deleteColumnsWithAnalytics = editorAnalyticsAPI => (inputMethod, re
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(editorAnalyticsAPI)(deleteColumnsCommand(rect));
+})(editorAnalyticsAPI)(deleteColumnsCommand(rect, tablePreserveWidth));
 export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = editorAnalyticsAPI => (state, dispatch) => {
   const {
     selection

package/dist/es2019/event-handlers.js

@@ -345,7 +345,7 @@ export function handleTripleClick(view, pos) {
   }
   return false;
 }
-export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorView) => {
+export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorView, tablePreserveWidth = false) => {
   const oldSelection = oldState.tr.selection;
   let {
     tr
@@ -394,7 +394,7 @@ export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorV
             } = getPluginState(newState);
             tr = deleteRows(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
-            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView)(tr);
+            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, tablePreserveWidth)(tr);
           }
         }
       }

package/dist/es2019/nodeviews/TableComponent.js

@@ -6,7 +6,7 @@ import rafSchedule from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
-import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
+import { browser, calcTableColumnWidths, isValidPosition } from '@atlaskit/editor-common/utils';
 import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -16,7 +16,7 @@ import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
 import { META_KEYS } from '../pm-plugins/table-analytics';
-import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scaleTable } from '../pm-plugins/table-resizing/utils';
+import { COLUMN_MIN_WIDTH, getLayoutSize, getResizeState, insertColgroupFromNode, scaleTable, updateColgroup } from '../pm-plugins/table-resizing/utils';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
@@ -160,7 +160,8 @@ class TableComponent extends React.Component {
         getNode,
         getPos,
         containerWidth,
-        options
+        options,
+        getEditorFeatureFlags
       } = this.props;
       const node = getNode();
       const {
@@ -176,6 +177,9 @@ class TableComponent extends React.Component {
         width
       } = containerWidth;
       this.scaleTableDebounced.cancel();
+      const {
+        tablePreserveWidth = false
+      } = getEditorFeatureFlags();
       const tr = scaleTable(this.table, {
         ...scaleOptions,
         node,
@@ -184,7 +188,7 @@ class TableComponent extends React.Component {
         containerWidth: width,
         previousContainerWidth: this.containerWidth.width || width,
         ...options
-      }, domAtPos)(state.tr);
+      }, domAtPos, tablePreserveWidth)(state.tr);
       dispatch(tr);
     });
     _defineProperty(this, "setTimerToSendInitialOverflowCaptured", isOverflowing => {
@@ -388,6 +392,62 @@ class TableComponent extends React.Component {
       clearTimeout(this.initialOverflowCaptureTimerId);
     }
   }
+  handleColgroupUpdates() {
+    var _this$containerWidth;
+    const {
+      getNode,
+      containerWidth,
+      isResizing,
+      view,
+      getPos,
+      tableRef
+    } = this.props;
+    if (!tableRef) {
+      return;
+    }
+    const TABLE_MARGIN = 76;
+
+    // Remove any widths styles after resizing preview is completed
+    tableRef.style.width = '';
+    const tableRenderWidth = containerWidth.width - TABLE_MARGIN;
+    const tableNode = getNode();
+    const start = getPos() || 0;
+    const depth = view.state.doc.resolve(start).depth;
+
+    // TODO - remove this when support is added for nested tables
+    if (depth !== 0) {
+      return;
+    }
+    const {
+      width: tableNodeWidth
+    } = tableNode.attrs;
+    const tableColumnWidths = calcTableColumnWidths(tableNode);
+    const shouldTableScale = tableRenderWidth < tableNodeWidth;
+    let isTableColumnWidthsSame = false;
+    if (this.tableColumnWidths) {
+      isTableColumnWidthsSame = tableColumnWidths === null || tableColumnWidths === void 0 ? void 0 : tableColumnWidths.every((width, index) => width === this.tableColumnWidths[index]);
+    }
+    const {
+      width: containerWidthValue
+    } = containerWidth;
+    const isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
+    if (shouldTableScale && !isResizing && (!isTableColumnWidthsSame || isWidthChanged)) {
+      const resizeState = getResizeState({
+        minWidth: COLUMN_MIN_WIDTH,
+        maxSize: tableRenderWidth,
+        table: tableNode,
+        tableRef: this.table,
+        start,
+        domAtPos: view.domAtPos,
+        tablePreserveWidth: true
+      });
+      requestAnimationFrame(() => {
+        updateColgroup(resizeState, this.table, true);
+      });
+      this.tableColumnWidths = tableColumnWidths;
+      this.containerWidth = containerWidth;
+    }
+  }
   componentDidUpdate(_, prevState) {
     var _this$wrapper;
     const {
@@ -396,12 +456,19 @@ class TableComponent extends React.Component {
       isMediaFullscreen,
       allowColumnResizing,
       isResizing,
-      options
+      options,
+      getEditorFeatureFlags
     } = this.props;
     const {
       isInDanger
     } = getPluginState(view.state);
+    const {
+      tablePreserveWidth = false
+    } = getEditorFeatureFlags();
     const table = findTable(view.state.selection);
+    if (tablePreserveWidth) {
+      this.handleColgroupUpdates();
+    }
     if (isInDanger && !table) {
       clearHoverSelection()(view.state, view.dispatch);
     }
@@ -438,7 +505,7 @@ class TableComponent extends React.Component {
         } = this.props;
         const shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || tablesHaveDifferentNoOfColumns(currentTable, previousTable) && isResizing;
         if (shouldRecreateResizeCols) {
-          recreateResizeColsByNode(this.table, currentTable);
+          insertColgroupFromNode(this.table, currentTable, tablePreserveWidth);
         }
         updateControls()(view.state);
       }
@@ -568,7 +635,8 @@ class TableComponent extends React.Component {
     const isNested = isTableNested(view.state, tablePos);
     const topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
     const {
-      stickyScrollbar
+      stickyScrollbar,
+      tablePreserveWidth
     } = getEditorFeatureFlags();
     return /*#__PURE__*/React.createElement(TableContainer, {
       className: classnames(ClassName.TABLE_CONTAINER, {
@@ -586,7 +654,8 @@ class TableComponent extends React.Component {
       isNested: isNested,
       pluginInjectionApi: pluginInjectionApi,
       isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
-      isResizing: isResizing
+      isResizing: isResizing,
+      tablePreserveWidth: tablePreserveWidth
     }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,
       "data-testid": "sticky-sentinel-top"

package/dist/es2019/nodeviews/TableContainer.js

@@ -41,7 +41,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   getPos,
   tableRef,
   isResizing,
-  pluginInjectionApi
+  pluginInjectionApi,
+  tablePreserveWidth
 }) => {
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
@@ -123,7 +124,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     tableRef,
     displayGuideline,
     attachAnalyticsEvent,
-    displayGapCursor
+    displayGapCursor,
+    tablePreserveWidth
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = {
@@ -163,7 +165,8 @@ export const TableContainer = ({
   tableRef,
   isNested,
   isResizing,
-  pluginInjectionApi
+  pluginInjectionApi,
+  tablePreserveWidth
 }) => {
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
@@ -174,7 +177,8 @@ export const TableContainer = ({
       getPos: getPos,
       tableRef: tableRef,
       isResizing: isResizing,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      tablePreserveWidth: tablePreserveWidth
     }, children);
   }
   const tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';

package/dist/es2019/nodeviews/TableResizer.js

@@ -82,7 +82,8 @@ export const TableResizer = ({
   tableRef,
   displayGuideline,
   attachAnalyticsEvent,
-  displayGapCursor
+  displayGapCursor,
+  tablePreserveWidth
 }) => {
   var _findTable, _editorView$state;
   const currentGap = useRef(0);
@@ -196,11 +197,11 @@ export const TableResizer = ({
       prevNode: node,
       start: pos + 1,
       parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView));
+    }, editorView.domAtPos.bind(editorView), tablePreserveWidth);
     updateActiveGuidelines(findClosestSnap(newWidth, defaultSnappingWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
     updateWidth(newWidth);
     return newWidth;
-  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames, tablePreserveWidth]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
     isResizing.current = false;
@@ -237,7 +238,7 @@ export const TableResizer = ({
         prevNode: node,
         start: pos + 1,
         parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView))(tr);
+      }, editorView.domAtPos.bind(editorView), tablePreserveWidth)(tr);
       const scaledNode = tr.doc.nodeAt(pos);
       (_attachAnalyticsEvent2 = attachAnalyticsEvent(generateResizedPayload({
         originalNode: node,
@@ -255,7 +256,7 @@ export const TableResizer = ({
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, tablePreserveWidth]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/es2019/nodeviews/table.js

@@ -57,14 +57,21 @@ export default class TableView extends ReactNodeView {
     _defineProperty(this, "hasHoveredRows", false);
     this.getPos = props.getPos;
     this.eventDispatcher = props.eventDispatcher;
+    this.getEditorFeatureFlags = props.getEditorFeatureFlags;
   }
   getContentDOM() {
     const rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
-    const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
     if (rendered.dom) {
       this.table = rendered.dom;
-      if (tableInlineWidth) {
-        handleInlineTableWidth(this.table, tableInlineWidth);
+      const {
+        tablePreserveWidth = false
+      } = this.getEditorFeatureFlags();
+      // Preserve Table Width cannot have inline width set on the table
+      if (!tablePreserveWidth) {
+        const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
+        if (tableInlineWidth) {
+          handleInlineTableWidth(this.table, tableInlineWidth);
+        }
       }
     }
     return rendered;
@@ -158,7 +165,8 @@ export default class TableView extends ReactNodeView {
           contentDOM: forwardRef,
           getEditorFeatureFlags: props.getEditorFeatureFlags,
           dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-          pluginInjectionApi: props.pluginInjectionApi
+          pluginInjectionApi: props.pluginInjectionApi,
+          tableRef: this.table
         });
       }
     });

package/dist/es2019/plugin.js

@@ -147,9 +147,10 @@ const tablesPlugin = ({
         name: 'tableKeymap',
         plugin: () => {
           const {
-            dragAndDropEnabled
+            dragAndDropEnabled,
+            getEditorFeatureFlags
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled);
+          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, dragAndDropEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -187,10 +188,13 @@ const tablesPlugin = ({
       }, {
         name: 'tableDragAndDrop',
         plugin: ({
-          dispatch,
-          eventDispatcher,
-          dispatchAnalyticsEvent
-        }) => options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, eventDispatcher, editorAnalyticsAPI) : undefined
+          dispatch
+        }) => {
+          const {
+            getEditorFeatureFlags
+          } = options || {};
+          return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, getEditorFeatureFlags, editorAnalyticsAPI) : undefined;
+        }
       }, {
         name: 'tableLocalId',
         plugin: ({
@@ -340,7 +344,8 @@ const tablesPlugin = ({
             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.createElement(FloatingContextualMenu, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
@@ -364,7 +369,8 @@ const tablesPlugin = ({
             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.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,

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

@@ -17,7 +17,7 @@ import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getDraggableDataFromEvent } from './utils/monitor';
-const destroyFn = (editorView, editorAnalyticsAPI) => {
+const destroyFn = (editorView, editorAnalyticsAPI, getEditorFeatureFlags) => {
   const editorPageScrollContainer = document.querySelector('.fabric-editor-popup-scroll-parent');
   const rowAutoScrollers = editorPageScrollContainer ? [monitorForElements({
     canMonitor({
@@ -161,7 +161,10 @@ const destroyFn = (editorView, editorAnalyticsAPI) => {
             tableNode
           } = getTablePluginState(editorView.state);
           if (tableRef && tableNode) {
-            insertColgroupFromNode(tableRef, tableNode);
+            const {
+              tablePreserveWidth = false
+            } = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {};
+            insertColgroupFromNode(tableRef, tableNode, tablePreserveWidth);
           }
         }
         editorView.focus();
@@ -169,7 +172,7 @@ const destroyFn = (editorView, editorAnalyticsAPI) => {
     }
   }));
 };
-export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
+export const createPlugin = (dispatch, getEditorFeatureFlags, editorAnalyticsAPI) => {
   return new SafePlugin({
     state: createPluginState(dispatch, state => ({
       decorationSet: DecorationSet.empty,
@@ -238,7 +241,7 @@ export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
     },
     view: editorView => {
       return {
-        destroy: destroyFn(editorView, editorAnalyticsAPI)
+        destroy: destroyFn(editorView, editorAnalyticsAPI, getEditorFeatureFlags)
       };
     },
     props: {

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

@@ -18,7 +18,7 @@ const createTableWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI({
   },
   eventType: EVENT_TYPE.TRACK
 })(editorAnalyticsAPI)(createTable());
-export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled) {
+export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, dragAndDropEnabled) {
   const list = {};
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI)(1), list);
   bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI)(-1), list);
@@ -50,11 +50,14 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI), list);
   }
   if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    const {
+      tablePreserveWidth = false
+    } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
     bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing, list);
     bindKeymapWithCommand(moveRight.common, activateNextResizeArea(1), list);
     bindKeymapWithCommand(moveLeft.common, activateNextResizeArea(-1), list);
-    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStep(-10, getEditorContainerWidth), list);
-    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStep(10, getEditorContainerWidth), list);
+    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStep(-10, getEditorContainerWidth, tablePreserveWidth), list);
+    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStep(10, getEditorContainerWidth, tablePreserveWidth), list);
     bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing(), list);
   }
   return keymap(list);

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

@@ -82,9 +82,12 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
           }
         });
       }
+      const {
+        tablePreserveWidth = false
+      } = getEditorFeatureFlags();
       if (tr) {
         // "fixTables" removes empty rows as we don't allow that in schema
-        const updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined);
+        const updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined, tablePreserveWidth);
         return fixTables(updatedTr) || updatedTr;
       }
       if (transactions.find(tr => tr.docChanged)) {

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

@@ -21,6 +21,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   } = view;
   const editorDisabled = !view.editable;
   const domAtPos = view.domAtPos.bind(view);
+  const {
+    tablePreserveWidth = false
+  } = getEditorFeatureFlags();
   if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
@@ -67,7 +70,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     table: originalTable,
     tableRef: dom,
     start,
-    domAtPos
+    domAtPos,
+    tablePreserveWidth
   });
   if (evenColumns({
     resizeState,
@@ -149,7 +153,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         const selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
         // only selected (or selected - 1) columns should be distributed
         const resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-        const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, resizingSelectedColumns ? selectedColumns : undefined);
+        const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, resizingSelectedColumns ? selectedColumns : undefined, tablePreserveWidth);
         tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (colIndex === map.width - 1) {
           const mouseUpTime = event.timeStamp;
@@ -203,7 +207,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     const table = $cell.node(-1);
     const map = TableMap.get(table);
     const colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
-    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom);
+    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, undefined, tablePreserveWidth);
     updateControls()(state);
   }
   window.addEventListener('mouseup', finish);

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

@@ -3,6 +3,7 @@ import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { MAX_SCALING_PERCENT } from './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
@@ -10,7 +11,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
  * overflow.
  */
 export const getColWidthFix = (colwidth, tableColumnCount) => colwidth - 1 / tableColumnCount;
-export const generateColgroup = table => {
+export const generateColgroup = (table, tableRef) => {
   const cols = [];
   if (getBooleanFF('platform.editor.custom-table-width')) {
     const map = TableMap.get(table);
@@ -19,11 +20,27 @@ export const generateColgroup = table => {
       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(width => {
-          cols.push(['col', {
-            style: `width: ${getColWidthFix(width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth, map.width)}px;`
-          }]);
-        });
+        if (tableRef) {
+          var _tableRef$parentEleme;
+          const tableWidth = table.attrs && table.attrs.width;
+          let renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 760;
+          let scalePercent = renderWidth / tableWidth;
+          scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+          cell.attrs.colwidth.slice(0, colspan).forEach(width => {
+            const fixedColWidth = getColWidthFix(width, map.width);
+            const scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
+            const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
+            cols.push(['col', {
+              style: `width: ${finalWidth}px;`
+            }]);
+          });
+        } else {
+          cell.attrs.colwidth.slice(0, colspan).forEach(width => {
+            cols.push(['col', {
+              style: `width: ${getColWidthFix(width ? Math.max(width, tableCellMinWidth) : 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
@@ -58,13 +75,15 @@ export const generateColgroup = table => {
   }
   return cols;
 };
-export const insertColgroupFromNode = (tableRef, table) => {
+export const insertColgroupFromNode = (tableRef, table, tablePreserveWidth = false, shouldRemove = true) => {
   let 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;
 };
 export const hasTableBeenResized = table => {
@@ -84,8 +103,8 @@ export const isMinCellWidthTable = table => {
   });
   return isTableMinCellWidth;
 };
-function renderColgroupFromNode(table) {
-  const rendered = DOMSerializer.renderSpec(document, ['colgroup', {}, ...generateColgroup(table)]);
+function renderColgroupFromNode(table, maybeTableRef) {
+  const rendered = DOMSerializer.renderSpec(document, ['colgroup', {}, ...generateColgroup(table, maybeTableRef)]);
   return rendered.dom;
 }
 export const getColgroupChildrenLength = table => {

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

@@ -1,2 +1,4 @@
 export const COLUMN_MIN_WIDTH = 48;
-export const TABLE_MAX_WIDTH = 1800;
+export const TABLE_DEFAULT_WIDTH = 760;
+export const TABLE_MAX_WIDTH = 1800;
+export const MAX_SCALING_PERCENT = 0.3;

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

@@ -3,8 +3,8 @@ export { contentWidth } from './content-width';
 export { getColumnStateFromDOM, getFreeSpace, getCellsRefsInColumn, calculateColumnWidth, addContainerLeftRightPadding } from './column-state';
 export { growColumn, shrinkColumn, reduceSpace } from './resize-logic';
 export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bulkColumnsResize, areColumnsEven, adjustColumnsWidths } from './resize-state';
-export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth } from './misc';
+export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth, getTableElementWidth, getTableContainerElement } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
 export { resizeColumn } from './resize-column';
-export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH } from './consts';
+export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT } from './consts';