@atlaskit/editor-plugin-table 7.16.14 → 7.16.15

package/dist/es2019/nodeviews/TableComponent.js

@@ -165,6 +165,7 @@ class TableComponent extends React.Component {
       this.containerWidth = containerWidth;
       this.layoutSize = layoutSize;
     });
+    // Function gets called when table is nested.
     _defineProperty(this, "scaleTable", scaleOptions => {
       const {
         view,
@@ -195,7 +196,10 @@ class TableComponent extends React.Component {
         containerWidth: width,
         previousContainerWidth: this.containerWidth.width || width,
         ...options
-      }, domAtPos, false)(state.tr);
+      }, domAtPos, false,
+      // isTableScalingEnabled doesn't change the behavior of nested tables
+      false // shouldUseIncreasedScalingPercent set to false for nested tables
+      )(state.tr);
       dispatch(tr);
     });
     _defineProperty(this, "setTimerToSendInitialOverflowCaptured", isOverflowing => {
@@ -461,7 +465,7 @@ class TableComponent extends React.Component {
     const isNumberOfColumnsChanged = tablesHaveDifferentNoOfColumns(tableNode, this.node);
     const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth || isNumberColumnChanged || isNumberOfColumnsChanged;
     if (force || maybeScale) {
-      var _this$containerWidth;
+      var _this$containerWidth, _this$props$options;
       const {
         width: containerWidthValue
       } = containerWidth;
@@ -471,8 +475,10 @@ class TableComponent extends React.Component {
       const isColumnsDistributed = wasTableResized && !isTableResized;
       const isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
       const shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged;
+      const isTableScalingEnabledWithLockButton = ((_this$props$options = this.props.options) === null || _this$props$options === void 0 ? void 0 : _this$props$options.isTableScalingEnabled) && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+      const shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent') || false;
       if (force || !isResizing && shouldUpdateColgroup) {
-        var _this$props$options, _this$props$options2;
+        var _this$props$options2;
         const resizeState = getResizeState({
           minWidth: COLUMN_MIN_WIDTH,
           maxSize: tableRenderWidth,
@@ -480,19 +486,20 @@ class TableComponent extends React.Component {
           tableRef: this.table,
           start,
           domAtPos: view.domAtPos.bind(view),
-          isTableScalingEnabled: true
+          isTableScalingEnabled: true,
+          shouldUseIncreasedScalingPercent
         });
         let shouldScaleOnColgroupUpdate = false;
-        if ((_this$props$options = this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isTableScalingEnabled && !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+        if ((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled && !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
           shouldScaleOnColgroupUpdate = true;
         }
-        if ((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && tableNode.attrs.displayMode !== 'fixed') {
+        if (isTableScalingEnabledWithLockButton && tableNode.attrs.displayMode !== 'fixed') {
           shouldScaleOnColgroupUpdate = true;
         }
 
         // Request animation frame required for Firefox
         requestAnimationFrame(() => {
-          updateColgroup(resizeState, this.table, tableNode, shouldScaleOnColgroupUpdate);
+          updateColgroup(resizeState, this.table, tableNode, shouldScaleOnColgroupUpdate, shouldUseIncreasedScalingPercent);
         });
       }
     }
@@ -527,7 +534,9 @@ class TableComponent extends React.Component {
       shouldScale = true;
       shouldHandleColgroupUpdates = true;
     }
-    if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getNode().attrs.displayMode !== 'fixed') {
+    const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+    const shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+    if (isTableScalingEnabledWithLockButton && getNode().attrs.displayMode !== 'fixed') {
       shouldScale = true;
       shouldHandleColgroupUpdates = true;
     }
@@ -581,7 +590,7 @@ class TableComponent extends React.Component {
           const start = getPos() || 0;
           const depth = view.state.doc.resolve(start).depth;
           shouldScale = depth === 0 && shouldScale;
-          insertColgroupFromNode(this.table, currentTable, shouldScale);
+          insertColgroupFromNode(this.table, currentTable, shouldScale, undefined, shouldUseIncreasedScalingPercent);
         }
         updateControls()(view.state);
       }
@@ -736,6 +745,7 @@ class TableComponent extends React.Component {
     const {
       stickyScrollbar
     } = getEditorFeatureFlags();
+    const shouldUseIncreasedScalingPercent = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
     return /*#__PURE__*/React.createElement(TableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
@@ -757,7 +767,8 @@ class TableComponent extends React.Component {
       isResizing: isResizing,
       isTableScalingEnabled: isTableScalingEnabled,
       isWholeTableInDanger: isWholeTableInDanger,
-      isTableAlignmentEnabled: isTableAlignmentEnabled
+      isTableAlignmentEnabled: isTableAlignmentEnabled,
+      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
     }, /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,

package/dist/es2019/nodeviews/TableContainer.js

@@ -119,7 +119,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   tableWrapperHeight,
   isWholeTableInDanger,
   isTableScalingEnabled,
-  isTableAlignmentEnabled
+  isTableAlignmentEnabled,
+  shouldUseIncreasedScalingPercent
 }) => {
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
@@ -227,6 +228,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     isFullWidthModeEnabled,
     isTableScalingEnabled,
     isWholeTableInDanger,
+    shouldUseIncreasedScalingPercent,
     pluginInjectionApi,
     onResizeStart,
     onResizeStop
@@ -281,7 +283,8 @@ export const TableContainer = ({
   isWholeTableInDanger,
   isTableResizingEnabled,
   isTableScalingEnabled,
-  isTableAlignmentEnabled
+  isTableAlignmentEnabled,
+  shouldUseIncreasedScalingPercent
 }) => {
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer
@@ -299,7 +302,8 @@ export const TableContainer = ({
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled,
       isWholeTableInDanger: isWholeTableInDanger,
-      isTableAlignmentEnabled: isTableAlignmentEnabled
+      isTableAlignmentEnabled: isTableAlignmentEnabled,
+      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
     }, children);
   }
   return /*#__PURE__*/React.createElement(InnerContainer, {

package/dist/es2019/nodeviews/TableResizer.js

@@ -106,6 +106,7 @@ export const TableResizer = ({
   isTableScalingEnabled,
   isTableAlignmentEnabled,
   isWholeTableInDanger,
+  shouldUseIncreasedScalingPercent,
   pluginInjectionApi,
   isFullWidthModeEnabled
 }) => {
@@ -299,7 +300,7 @@ export const TableResizer = ({
         prevNode: node,
         start: pos + 1,
         parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView), isTableScalingEnabled)(tr);
+      }, editorView.domAtPos.bind(editorView), isTableScalingEnabled, shouldUseIncreasedScalingPercent || false)(tr);
       const scaledNode = tr.doc.nodeAt(pos);
       (_attachAnalyticsEvent2 = attachAnalyticsEvent(generateResizedPayload({
         originalNode: node,
@@ -330,7 +331,7 @@ export const TableResizer = ({
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest, formatMessage, pluginInjectionApi]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/es2019/plugin.js

@@ -61,6 +61,7 @@ const tablesPlugin = ({
     };
   };
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  const shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
   return {
     name: 'table',
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
@@ -154,7 +155,7 @@ const tablesPlugin = ({
             isTableScalingEnabled,
             isTableAlignmentEnabled
           } = options || {};
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent);
         }
       }, {
         name: 'tablePMColResizing',
@@ -191,7 +192,7 @@ const tablesPlugin = ({
             isTableAlignmentEnabled = false,
             fullWidthEnabled = false
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl);
+          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, shouldUseIncreasedScalingPercent);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -459,7 +460,7 @@ const tablesPlugin = ({
           return tr;
         }
       }],
-      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current, options)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
+      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current, options, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

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

@@ -172,10 +172,12 @@ const destroyFn = (editorView, editorAnalyticsAPI) => {
               isTableScalingEnabled = false
             } = getTablePluginState(editorView.state);
             let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-            if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+            const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+            const shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+            if (isTableScalingEnabledWithLockButton) {
               isTableScalingEnabledOnCurrentTable = tableNode.attrs.displayMode !== 'fixed';
             }
-            insertColgroupFromNode(tableRef, tableNode, isTableScalingEnabledOnCurrentTable);
+            insertColgroupFromNode(tableRef, tableNode, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
           }
         }
         editorView.focus();

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

@@ -8,7 +8,7 @@ import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSele
 import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
-export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl) {
+export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, shouldUseIncreasedScalingPercent) {
   var _pluginInjectionApi$a;
   const list = {};
   const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
@@ -21,8 +21,8 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
   // Add row/column shortcuts
   bindKeymapWithCommand(addRowBefore.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
   bindKeymapWithCommand(addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-  bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(isTableScalingEnabled), list);
-  bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(isTableScalingEnabled), list);
+  bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
+  bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
   if (dragAndDropEnabled) {
     // Move row/column shortcuts
     /**
@@ -38,8 +38,8 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     bindKeymapWithCommand(moveColumnRight.common, moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI)('table-column', 1), list);
 
     // Delete row/column shortcuts
-    bindKeymapWithCommand(deleteColumn.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI), list);
-    bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI), list);
+    bindKeymapWithCommand(deleteColumn.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
+    bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
   }
   if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
     bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({

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

@@ -22,7 +22,7 @@ import { isHeaderRowRequired } from '../utils/paste';
 import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent) => {
   var _accessibilityUtils;
   const state = createPluginState(dispatch, {
     pluginConfig,
@@ -76,7 +76,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       }
       if (tr) {
         // "fixTables" removes empty rows as we don't allow that in schema
-        const updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined, isTableScalingEnabled);
+        const updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
         return fixTables(updatedTr) || updatedTr;
       }
       if (transactions.find(tr => tr.docChanged)) {

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

@@ -50,7 +50,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     getEditorContainerWidth
   });
   let shouldScale = tableDepth === 0 && isTableScalingEnabled;
-  if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+  const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+  if (isTableScalingEnabledWithLockButton) {
     shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
   }
   const resizeState = getResizeState({
@@ -60,7 +61,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     tableRef: dom,
     start,
     domAtPos,
-    isTableScalingEnabled: shouldScale
+    isTableScalingEnabled: shouldScale,
+    shouldUseIncreasedScalingPercent: isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent')
   });
   if (evenColumns({
     resizeState,
@@ -145,7 +147,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         // only selected (or selected - 1) columns should be distributed
         const resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
         let shouldScale = tableDepth === 0 && isTableScalingEnabled;
-        if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+        const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+        if (isTableScalingEnabledWithLockButton) {
           shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
         const resizedDelta = clientX - startX;
@@ -154,7 +157,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
           tr = updateColumnWidths(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
         } else {
-          const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
+          const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale, isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent'));
           tr = updateColumnWidths(newResizeState, table, start)(tr);
         }
         if (colIndex === map.width - 1) {
@@ -228,13 +231,15 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     const map = TableMap.get(table);
     const colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
     let shouldScale = tableDepth === 0 && isTableScalingEnabled;
-    if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+    const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+    const shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+    if (isTableScalingEnabledWithLockButton) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
     if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
-      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent);
     } else {
-      resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+      resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);
     }
     updateControls()(state);
   }

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

@@ -10,7 +10,7 @@ import { getTableScalingPercent } from './misc';
  * overflow.
  */
 export const getColWidthFix = (colwidth, tableColumnCount) => colwidth - 1 / tableColumnCount;
-export const generateColgroup = (table, tableRef) => {
+export const generateColgroup = (table, tableRef, shouldUseIncreasedScalingPercent) => {
   const cols = [];
   const map = TableMap.get(table);
   table.content.firstChild.content.forEach(cell => {
@@ -19,7 +19,7 @@ export const generateColgroup = (table, tableRef) => {
       // 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.
       if (tableRef) {
-        const scalePercent = getTableScalingPercent(table, tableRef);
+        const scalePercent = getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent);
         cell.attrs.colwidth.slice(0, colspan).forEach(width => {
           const fixedColWidth = getColWidthFix(width, map.width);
           const scaledWidth = fixedColWidth * scalePercent;
@@ -48,12 +48,12 @@ export const generateColgroup = (table, tableRef) => {
   });
   return cols;
 };
-export const insertColgroupFromNode = (tableRef, table, isTableScalingEnabled = false, shouldRemove = true) => {
+export const insertColgroupFromNode = (tableRef, table, isTableScalingEnabled = false, shouldRemove = true, shouldUseIncreasedScalingPercent = false) => {
   let colgroup = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelector('colgroup');
   if (colgroup && shouldRemove) {
     tableRef === null || tableRef === void 0 ? void 0 : tableRef.removeChild(colgroup);
   }
-  colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef !== null && tableRef !== void 0 ? tableRef : undefined : undefined);
+  colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef !== null && tableRef !== void 0 ? tableRef : undefined : undefined, shouldUseIncreasedScalingPercent);
   if (shouldRemove) {
     tableRef === null || tableRef === void 0 ? void 0 : tableRef.insertBefore(colgroup, tableRef === null || tableRef === void 0 ? void 0 : tableRef.firstChild);
   }
@@ -76,8 +76,8 @@ export const isMinCellWidthTable = table => {
   });
   return isTableMinCellWidth;
 };
-function renderColgroupFromNode(table, maybeTableRef) {
-  const rendered = DOMSerializer.renderSpec(document, ['colgroup', {}, ...generateColgroup(table, maybeTableRef)]);
+function renderColgroupFromNode(table, maybeTableRef, shouldUseIncreasedScalingPercent) {
+  const rendered = DOMSerializer.renderSpec(document, ['colgroup', {}, ...generateColgroup(table, maybeTableRef, shouldUseIncreasedScalingPercent)]);
   return rendered.dom;
 }
 export const getColgroupChildrenLength = table => {

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

@@ -2,5 +2,6 @@ export const COLUMN_MIN_WIDTH = 48;
 export const TABLE_DEFAULT_WIDTH = 760;
 export const TABLE_MAX_WIDTH = 1800;
 export const MAX_SCALING_PERCENT = 0.3;
+export const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
 // Used to calculate the width of a table using the Editor width
 export const TABLE_EDITOR_MARGIN = 76;

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

@@ -7,4 +7,4 @@ export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth,
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
 export { resizeColumn, resizeColumnAndTable } from './resize-column';
-export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT } from './consts';
+export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';

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

@@ -4,7 +4,7 @@ import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-c
 import { calcTableColumnWidths, containsClassName } from '@atlaskit/editor-common/utils';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { hasTableBeenResized } from './colgroup';
-import { MAX_SCALING_PERCENT } from './consts';
+import { MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
 
 // Translates named layouts in number values.
 export function getLayoutSize(tableLayout, containerWidth = 0, options) {
@@ -90,19 +90,21 @@ export const getTableElementWidth = table => {
 export const getTableContainerElementWidth = table => {
   return getTableContainerWidth(table);
 };
-export const getTableScalingPercent = (table, tableRef) => {
+export const getTableScalingPercent = (table, tableRef, shouldUseIncreasedScalingPercent) => {
   var _tableRef$parentEleme;
+  const maxScalingPercent = shouldUseIncreasedScalingPercent ? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : MAX_SCALING_PERCENT;
   const tableWidth = getTableContainerElementWidth(table);
   let renderWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
   // minus 1 here to avoid any 1px scroll in Firefox
   let scalePercent = (renderWidth - 1) / tableWidth;
-  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+  scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);
   return Math.min(scalePercent, 1);
 };
-export const getStaticTableScalingPercent = (table, tableRenderWidth) => {
+export const getStaticTableScalingPercent = (table, tableRenderWidth, shouldUseIncreasedScalingPercent) => {
+  const maxScalingPercent = shouldUseIncreasedScalingPercent ? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : MAX_SCALING_PERCENT;
   const tableWidth = getTableContainerElementWidth(table);
   // minus 1 here to avoid any 1px scroll in Firefox
   let scalePercent = (tableRenderWidth - 1) / tableWidth;
-  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+  scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);
   return Math.min(scalePercent, 1);
 };

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

@@ -4,20 +4,20 @@ import { TableCssClassName as ClassName } from '../../../types';
 import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
 import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
-export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false) => {
+export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => {
   let scalePercent = 1;
   let resizeAmount = amount;
   if (isTableScalingEnabled) {
-    scalePercent = getTableScalingPercent(tableNode, tableRef);
+    scalePercent = getTableScalingPercent(tableNode, tableRef, shouldUseIncreasedScalingPercent);
     resizeAmount = amount / scalePercent;
   }
   const newState = resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
-  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
+  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
   return newState;
 };
 
 // try not scale table during resize
-export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false, originalTableWidth) => {
+export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false, originalTableWidth, shouldUseIncreasedScalingPercent = false) => {
   var _tableRef$closest;
   // TODO: can we use document state, and apply scaling factor?
   const tableWidth = tableRef.clientWidth;
@@ -46,7 +46,7 @@ export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, ta
 
   // this function only updates the colgroup in DOM, it reverses the scalePercent
   // todo: change isScalingEnabled to true when reimplementing scaling
-  updateColgroup(newState, tableRef, tableNode, false);
+  updateColgroup(newState, tableRef, tableNode, false, shouldUseIncreasedScalingPercent);
 
   // use the difference in width from affected column to update overall table width
   const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;

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

@@ -14,10 +14,11 @@ export const getResizeState = ({
   tableRef,
   start,
   domAtPos,
-  isTableScalingEnabled = false
+  isTableScalingEnabled = false,
+  shouldUseIncreasedScalingPercent = false
 }) => {
   if (isTableScalingEnabled) {
-    const scalePercent = getTableScalingPercent(table, tableRef);
+    const scalePercent = getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent);
     minWidth = Math.ceil(minWidth / scalePercent);
   }
   // If the table has been resized, we can use the column widths from the table node
@@ -42,8 +43,9 @@ export const getResizeState = ({
   const shouldReinsertColgroup = !isTableScalingEnabled;
 
   // Getting the resize state from DOM
-  const colgroupChildren = insertColgroupFromNode(tableRef, table, isTableScalingEnabled, shouldReinsertColgroup // don't reinsert colgroup when preserving table width - this causes widths to jump
-  );
+  const colgroupChildren = insertColgroupFromNode(tableRef, table, isTableScalingEnabled, shouldReinsertColgroup,
+  // don't reinsert colgroup when preserving table width - this causes widths to jump
+  shouldUseIncreasedScalingPercent);
   const cols = Array.from(colgroupChildren).map((_, 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
@@ -72,7 +74,7 @@ export const getResizeState = ({
 };
 
 // updates Colgroup DOM node with new widths
-export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled) => {
+export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled, shouldUseIncreasedScalingPercent) => {
   const cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll('col');
   const columnsCount = cols === null || cols === void 0 ? void 0 : cols.length;
   /**
@@ -81,7 +83,7 @@ export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled
       We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
       * */
   if (isTableScalingEnabled && tableNode) {
-    const scalePercent = getTableScalingPercent(tableNode, tableRef);
+    const scalePercent = getTableScalingPercent(tableNode, tableRef, shouldUseIncreasedScalingPercent);
     state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
     .forEach((column, i) => {
       const fixedColWidth = getColWidthFix(column.width, columnsCount !== null && columnsCount !== void 0 ? columnsCount : 0);
@@ -306,7 +308,8 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getE
   });
   let resizeState;
   let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-  if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+  const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+  if (isTableScalingEnabledWithLockButton) {
     isTableScalingEnabledOnCurrentTable = table.node.attrs.displayMode !== 'fixed';
   }
   resizeState = getResizeState({
@@ -316,7 +319,8 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getE
     tableRef,
     start: table.start,
     domAtPos,
-    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+    shouldUseIncreasedScalingPercent: isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent')
   });
   const newResizeState = evenSelectedColumnsWidths(resizeState, rect);
   const widthsBefore = resizeState.widths;

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

@@ -11,7 +11,7 @@ import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import { syncStickyRowToTable } from './dom';
 // Base function to trigger the actual scale on a table node.
 // Will only resize/scale if a table has been previously resized.
-export const scale = (tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable = false) => {
+export const scale = (tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable = false, shouldUseIncreasedScalingPercent = false) => {
   const {
     node,
     containerWidth,
@@ -49,11 +49,12 @@ export const scale = (tableRef, options, domAtPos, isTableScalingEnabledOnCurren
     tableRef,
     start,
     domAtPos,
-    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+    shouldUseIncreasedScalingPercent
   });
   return scaleTableTo(resizeState, newWidth);
 };
-export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos, isTableScalingEnabledOnCurrentTable = false) => {
+export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos, isTableScalingEnabledOnCurrentTable = false, shouldUseIncreasedScalingPercent = false) => {
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize: parentWidth,
@@ -61,7 +62,8 @@ export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos, i
     tableRef,
     start,
     domAtPos,
-    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+    shouldUseIncreasedScalingPercent
   });
   if (table.attrs.isNumberColumnEnabled) {
     parentWidth -= akEditorTableNumberColumnWidth;
@@ -111,7 +113,8 @@ export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEna
     tableRef.style.width = `${width}px`;
   }
   let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-  if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+  const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+  if (isTableScalingEnabledWithLockButton) {
     isTableScalingEnabledOnCurrentTable = isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
   }
   // If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
@@ -120,15 +123,17 @@ export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEna
     syncStickyRowToTable(tableRef);
     return;
   }
-  const resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false) // Here last value is isTableScalingEnabled = false
-  : scale(tableRef, options, domAtPos, false);
+  const shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+  const resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false,
+  // Here isTableScalingEnabled = false
+  shouldUseIncreasedScalingPercent) : scale(tableRef, options, domAtPos, false, shouldUseIncreasedScalingPercent);
   if (resizeState) {
-    updateColgroup(resizeState, tableRef, node, false);
+    updateColgroup(resizeState, tableRef, node, false, shouldUseIncreasedScalingPercent);
   }
 };
 
 // Scale the table to meet new requirements (col, layout change etc)
-export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable = false) => tr => {
+export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable = false, shouldUseIncreasedScalingPercent = false) => tr => {
   if (!tableRef) {
     return tr;
   }
@@ -143,16 +148,16 @@ export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabledOnC
     // If its not a re-sized table, we still want to re-create cols
     // To force reflow of columns upon delete.
     if (!isTableScalingEnabledOnCurrentTable) {
-      insertColgroupFromNode(tableRef, node);
+      insertColgroupFromNode(tableRef, node, false, undefined, shouldUseIncreasedScalingPercent);
     }
     tr.setMeta('scrollIntoView', false);
     return tr;
   }
   let resizeState;
   if (parentWidth) {
-    resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable);
+    resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
   } else {
-    resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable);
+    resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
   }
   if (resizeState) {
     tr = updateColumnWidths(resizeState, node, start)(tr);