@atlaskit/editor-plugin-table 7.16.17 → 7.16.19

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, shouldUseIncreasedScalingPercent) {
+export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, 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,13 +21,13 @@ 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, shouldUseIncreasedScalingPercent), list);
-  bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
+  bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+  bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   if (getBooleanFF('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg')) {
     bindKeymapWithCommand(addRowBeforeVO.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
     bindKeymapWithCommand(addRowAfterVO.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-    bindKeymapWithCommand(addColumnBeforeVO.common, addColumnBeforeCommand(isTableScalingEnabled), list);
-    bindKeymapWithCommand(addColumnAfterVO.common, addColumnAfterCommand(isTableScalingEnabled), list);
+    bindKeymapWithCommand(addColumnBeforeVO.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+    bindKeymapWithCommand(addColumnAfterVO.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   }
   if (dragAndDropEnabled) {
     // Move row/column shortcuts
@@ -44,8 +44,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, isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
-    bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
+    bindKeymapWithCommand(deleteColumn.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+    bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   }
   if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
     bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({
@@ -62,8 +62,8 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
       ariaNotify: ariaNotifyPlugin,
       getIntl: getIntl
     }), list);
-    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
-    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
     bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing({
       ariaNotify: ariaNotifyPlugin,
       getIntl: getIntl

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

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

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

@@ -50,8 +50,11 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     getEditorContainerWidth
   });
   let shouldScale = tableDepth === 0 && isTableScalingEnabled;
-  const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-  if (isTableScalingEnabledWithLockButton) {
+  const {
+    tableWithFixedColumnWidthsOption = false
+  } = getEditorFeatureFlags();
+  const isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && tableWithFixedColumnWidthsOption;
+  if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
     shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
   }
   const resizeState = getResizeState({
@@ -62,7 +65,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     start,
     domAtPos,
     isTableScalingEnabled: shouldScale,
-    shouldUseIncreasedScalingPercent: isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent')
+    shouldUseIncreasedScalingPercent: isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent')
   });
   if (evenColumns({
     resizeState,
@@ -147,8 +150,7 @@ 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;
-        const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-        if (isTableScalingEnabledWithLockButton) {
+        if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
           shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
         const resizedDelta = clientX - startX;
@@ -157,7 +159,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, isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent'));
+          const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale, isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent'));
           tr = updateColumnWidths(newResizeState, table, start)(tr);
         }
         if (colIndex === map.width - 1) {
@@ -231,9 +233,8 @@ 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;
-    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) {
+    const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+    if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
     if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {

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

@@ -273,7 +273,7 @@ export const normaliseTableLayout = input => {
       return 'default';
   }
 };
-export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getEditorContainerWidth, isTableScalingEnabled = false) => {
+export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getEditorContainerWidth, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false) => {
   // Fail early so that we don't do complex calculations for no reason
   const numColumnsSelected = rect.right - rect.left;
   if (numColumnsSelected <= 1) {
@@ -308,8 +308,8 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getE
   });
   let resizeState;
   let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-  const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-  if (isTableScalingEnabledWithLockButton) {
+  const isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled;
+  if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
     isTableScalingEnabledOnCurrentTable = table.node.attrs.displayMode !== 'fixed';
   }
   resizeState = getResizeState({
@@ -320,7 +320,7 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getE
     start: table.start,
     domAtPos,
     isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
-    shouldUseIncreasedScalingPercent: isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent')
+    shouldUseIncreasedScalingPercent: isTableScalingWithFixedColumnWidthsOptionEnabled && 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

@@ -98,7 +98,7 @@ export function scaleTableTo(state, maxSize) {
   }
   return adjustColumnsWidths(newState, maxSize);
 }
-export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEnabled = false) => {
+export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEnabled = false, isTableWithFixedColumnWidthsOptionEnabled = false) => {
   const {
     node,
     start,
@@ -113,8 +113,8 @@ export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEna
     tableRef.style.width = `${width}px`;
   }
   let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-  const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-  if (isTableScalingEnabledWithLockButton) {
+  const isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && isTableWithFixedColumnWidthsOptionEnabled;
+  if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
     isTableScalingEnabledOnCurrentTable = isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
   }
   // If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
@@ -123,7 +123,7 @@ export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEna
     syncStickyRowToTable(tableRef);
     return;
   }
-  const shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+  const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && 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);

package/dist/es2019/toolbar.js

@@ -23,6 +23,7 @@ import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTa
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, setTableAlignmentWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleFixedColumnWidthsOptionAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import { getStaticTableScalingPercent } from './pm-plugins/table-resizing/utils/misc';
 import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
 import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { canMergeCells } from './transforms';
@@ -81,6 +82,7 @@ export const getToolbarMenuConfig = (config, state, {
       type: optionItem
     }
   }];
+  const tableOptionsDropdownWidth = isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined;
   if (state.isDragAndDropEnabled) {
     return {
       id: 'editor.table.tableOptions',
@@ -90,7 +92,7 @@ export const getToolbarMenuConfig = (config, state, {
       title: formatMessage(messages.tableOptions),
       hidden: options.every(option => option.hidden),
       options,
-      dropdownWidth: isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined
+      dropdownWidth: tableOptionsDropdownWidth
     };
   } else {
     return {
@@ -100,7 +102,7 @@ export const getToolbarMenuConfig = (config, state, {
       title: formatMessage(messages.tableOptions),
       hidden: options.every(option => option.hidden),
       options,
-      dropdownWidth: isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined
+      dropdownWidth: tableOptionsDropdownWidth
     };
   }
 };
@@ -110,7 +112,7 @@ export const getToolbarMenuConfig = (config, state, {
 // with native widgets. It's enabled via a plugin config.
 export const getToolbarCellOptionsConfig = (editorState, editorView, initialSelectionRect, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => {
+}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => {
   var _pluginState$pluginCo, _pluginState$pluginCo2;
   const {
     top,
@@ -128,7 +130,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
       const selectionRect = getClosestSelectionRect(state);
       const index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
       if (index) {
-        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
+        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
       }
       return true;
     },
@@ -164,7 +166,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     onClick: (state, dispatch, view) => {
       const selectionRect = getClosestSelectionRect(state);
       if (selectionRect) {
-        deleteColumnsWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
+        deleteColumnsWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
       }
       return true;
     },
@@ -207,7 +209,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
   }];
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
     var _newResizeStateWithAn;
-    const newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled) : undefined;
+    const newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled) : undefined;
     const wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
     const distributeColumnWidths = (state, dispatch) => {
       if (newResizeStateWithAnalytics) {
@@ -315,26 +317,38 @@ export const getClosestSelectionOrTableRect = state => {
   const tableRect = new Rect(0, 0, map.width, map.height);
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
 };
-export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options, isTableScalingWithFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => config => (state, intl) => {
+export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => config => (state, intl) => {
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
   const tableWidthState = tableWidthPluginKey.getState(state);
+  const isTableScalingEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || false;
 
   // We don't want to show floating toolbar while resizing the table
   const isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
   if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
     const nodeType = state.schema.nodes.table;
     const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
-    const isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingWithFixedColumnWidthsOptionEnabled && !isNested;
+    const isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
     const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
+    const editorView = getEditorView();
+    const getDomRef = editorView => {
+      let element;
+      const domAtPos = editorView.domAtPos.bind(editorView);
+      const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
+      if (parent) {
+        const tableRef = parent.querySelector('table') || undefined;
+        if (tableRef) {
+          element = closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
+        }
+      }
+      return element;
+    };
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
-    let alignmentMenu;
-    alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth) : [];
-    let cellItems;
-    cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, shouldUseIncreasedScalingPercent);
-    let columnSettingsItems;
-    columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
+    const alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent) : [];
+    const isCellBackgroundDuplicated = getEditorFeatureFlags().tableDuplicateCellColouring || false;
+    const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent);
+    const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled) : [];
     const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
 
     // Check if we need to show confirm dialog for delete button
@@ -354,18 +368,6 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
         onConfirm: (isChecked = false) => clickWithCheckboxHandler(isChecked, tableObject.node)
       });
     }
-    const getDomRef = editorView => {
-      let element;
-      const domAtPos = editorView.domAtPos.bind(editorView);
-      const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
-      if (parent) {
-        const tableRef = parent.querySelector('table') || undefined;
-        if (tableRef) {
-          element = closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
-        }
-      }
-      return element;
-    };
     const {
       stickyScrollbar
     } = getEditorFeatureFlags();
@@ -426,22 +428,22 @@ const separator = hidden => {
 };
 const getCellItems = (state, view, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => {
+}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => {
   const initialSelectionRect = getClosestSelectionRect(state);
   if (initialSelectionRect) {
     const cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
       formatMessage
-    }, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
+    }, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent);
     return [cellOptions, separator(cellOptions.hidden)];
   }
   return [];
 };
-export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false) => (state, dispatch, editorView) => {
+export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false) => (state, dispatch, editorView) => {
   const selectionOrTableRect = getClosestSelectionOrTableRect(state);
   if (!editorView || !selectionOrTableRect) {
     return false;
   }
-  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
+  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled);
   if (newResizeStateWithAnalytics) {
     distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
     return true;
@@ -453,14 +455,14 @@ export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI,
 // fixed column button should be in this function call in the future
 const getColumnSettingItems = (editorState, editorView, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false) => {
+}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false) => {
   var _newResizeStateWithAn2, _pluginState$pluginCo3;
   const pluginState = getPluginState(editorState);
   const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
   if (!selectionOrTableRect || !editorView) {
     return [];
   }
-  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
+  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled);
   const wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
   const items = [];
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
@@ -469,7 +471,7 @@ const getColumnSettingItems = (editorState, editorView, {
       type: 'button',
       title: formatMessage(messages.distributeColumns),
       icon: DistributeColumnIcon,
-      onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled)(state, dispatch, view),
+      onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled)(state, dispatch, view),
       disabled: !wouldChange
     });
   }
@@ -539,7 +541,7 @@ const highlightColumnsHandler = (state, dispatch) => {
 };
 export const getAlignmentOptionsConfig = (editorState, {
   formatMessage
-}, editorAnalyticsAPI, getEditorContainerWidth) => {
+}, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent) => {
   const tableObject = findTable(editorState.selection);
   if (!tableObject) {
     return [];
@@ -573,7 +575,7 @@ export const getAlignmentOptionsConfig = (editorState, {
       title: formatMessage(layoutToMessages[value]),
       selected: normaliseAlignment(currentLayout) === value,
       onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB, CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED),
-      ...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
+      ...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent) && {
         disabled: value !== 'center'
       })
     };
@@ -602,10 +604,20 @@ export const getSelectedAlignmentIcon = (alignmentIcons, selectedNode) => {
   const selectedAlignment = selectedNode.attrs.layout;
   return alignmentIcons.find(icon => icon.value === normaliseAlignment(selectedAlignment));
 };
-export const isLayoutOptionDisabled = (selectedNode, getEditorContainerWidth) => {
-  const lineLength = getEditorContainerWidth().lineLength;
-  const tableWidth = getTableContainerWidth(selectedNode);
-  if (selectedNode && lineLength && tableWidth > lineLength) {
+export const isLayoutOptionDisabled = (selectedNode, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent) => {
+  const {
+    lineLength
+  } = getEditorContainerWidth();
+  let tableContainerWidth = getTableContainerWidth(selectedNode);
+
+  // table may be scaled, use the scale percent to calculate the table width
+  if (editorView) {
+    const tableWrapper = getDomRef(editorView);
+    const tableWrapperWidth = (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.clientWidth) || tableContainerWidth;
+    const scalePercent = getStaticTableScalingPercent(selectedNode, tableWrapperWidth, shouldUseIncreasedScalingPercent);
+    tableContainerWidth = tableContainerWidth * scalePercent;
+  }
+  if (selectedNode && lineLength && tableContainerWidth > lineLength) {
     return true;
   }
   return false;

package/dist/es2019/transforms/column-width.js

@@ -88,7 +88,7 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export const rescaleColumns = (isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => (table, view) => tr => {
+export const rescaleColumns = (isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => (table, view) => tr => {
   if (!view) {
     return tr;
   }
@@ -108,7 +108,7 @@ export const rescaleColumns = (isTableScalingEnabled = false, shouldUseIncreased
   };
   const tableDepth = view.state.doc.resolve(table.pos).depth;
   let shouldScale = isTableScalingEnabled && tableDepth === 0;
-  if (shouldScale && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+  if (shouldScale && isTableFixedColumnWidthsOptionEnabled) {
     shouldScale = newTable.attrs.displayMode !== 'fixed';
   }
   if (shouldScale) {
@@ -173,7 +173,6 @@ export const rescaleColumns = (isTableScalingEnabled = false, shouldUseIncreased
     isTableScalingEnabled: shouldScale,
     shouldUseIncreasedScalingPercent
   });
-
   // Two scenarios that require scaling:
   //   1. If the new table width will result in the table going into overflow
   //      we resize the cells to avoid it (e.g. adding a column)

package/dist/es2019/transforms/delete-columns.js

@@ -192,7 +192,7 @@ function fixRowSpans(table) {
   }
   return table.type.createChecked(table.attrs, rows, table.marks);
 }
-export const deleteColumns = (rect, allowCustomStep, view, isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => tr => {
+export const deleteColumns = (rect, allowCustomStep, view, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => tr => {
   let updatedTr = tr;
   updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
     name: TABLE_OVERFLOW_CHANGE_TRIGGER.DELETED_COLUMN
@@ -204,7 +204,7 @@ export const deleteColumns = (rect, allowCustomStep, view, isTableScalingEnabled
   }
   const table = findTable(updatedTr.selection);
   if (table) {
-    updatedTr = rescaleColumns(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(table, view)(updatedTr);
+    updatedTr = rescaleColumns(isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(table, view)(updatedTr);
   }
   return updatedTr;
 };

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -298,7 +298,8 @@ export class ContextualMenu extends Component {
           formatMessage
         },
         editorView,
-        getEditorContainerWidth
+        getEditorContainerWidth,
+        getEditorFeatureFlags
       } = this.props;
       const {
         isDragAndDropEnabled,
@@ -311,7 +312,10 @@ export class ContextualMenu extends Component {
         const {
           isTableScalingEnabled = false
         } = getPluginState(editorView.state);
-        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
+        const {
+          tableWithFixedColumnWidthsOption = false
+        } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
+        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, tableWithFixedColumnWidthsOption);
         const wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
         return {
           content: formatMessage(messages.distributeColumns),
@@ -418,9 +422,10 @@ export class ContextualMenu extends Component {
         isTableScalingEnabled = false
       } = getPluginState(state);
       const {
-        tableDuplicateCellColouring = false
+        tableDuplicateCellColouring = false,
+        tableWithFixedColumnWidthsOption = false
       } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
-      const shouldUseIncreasedScalingPercent = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+      const shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
       switch (item.value.name) {
         case 'sort_column_desc':
           sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
@@ -439,7 +444,7 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'distribute_columns':
-          const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
+          const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, tableWithFixedColumnWidthsOption);
           if (newResizeStateWithAnalytics) {
             distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
             this.toggleOpen();
@@ -450,7 +455,7 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'insert_column':
-          insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+          insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
           this.toggleOpen();
           break;
         case 'insert_row':
@@ -461,7 +466,7 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'delete_column':
-          deleteColumnsWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch, editorView);
+          deleteColumnsWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch, editorView);
           this.toggleOpen();
           break;
         case 'delete_row':

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -178,7 +178,8 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   boundariesElement,
   isTableScalingEnabled,
   tableDuplicateCellColouring,
-  shouldUseIncreasedScalingPercent
+  shouldUseIncreasedScalingPercent,
+  isTableFixedColumnWidthsOptionEnabled
 }) => {
   var _pluginConfig$allowBa;
   const {
@@ -206,7 +207,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
     hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
   }
   const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent);
   const {
     menuItems,
     menuCallback

package/dist/es2019/ui/FloatingDragMenu/index.js

@@ -32,9 +32,10 @@ const FloatingDragMenu = ({
     return null;
   }
   const {
-    tableDuplicateCellColouring = false
+    tableDuplicateCellColouring = false,
+    tableWithFixedColumnWidthsOption = false
   } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
-  const shouldUseIncreasedScalingPercent = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+  const shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -70,7 +71,8 @@ const FloatingDragMenu = ({
     scrollableElement: scrollableElement,
     isTableScalingEnabled: isTableScalingEnabled,
     tableDuplicateCellColouring: tableDuplicateCellColouring,
-    shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
+    shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+    isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/es2019/ui/FloatingInsertButton/index.js

@@ -12,7 +12,6 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../commands-with-analytics';
-import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
 import { checkIfNumberColumnEnabled } from '../../utils';
 import getPopupOptions from './getPopupOptions';
@@ -178,22 +177,21 @@ export class FloatingInsertButton extends React.Component {
       editorView,
       insertColumnButtonIndex,
       editorAnalyticsAPI,
-      getEditorFeatureFlags
+      getEditorFeatureFlags,
+      isTableScalingEnabled
     } = this.props;
     if (typeof insertColumnButtonIndex !== 'undefined') {
       event.preventDefault();
       const {
-        isTableScalingEnabled = false
-      } = getPluginState(editorView.state);
-      const shouldUseIncreasedScalingPercent = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
-      const {
-        tableDuplicateCellColouring = false
+        tableDuplicateCellColouring = false,
+        tableWithFixedColumnWidthsOption = false
       } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
+      const shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
       const {
         state,
         dispatch
       } = editorView;
-      insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+      insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
     }
   }
 }