@atlaskit/editor-plugin-table 7.11.3 → 7.11.5

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 import DragMenu from './DragMenu';
 const FloatingDragMenu = ({
@@ -18,7 +17,8 @@ const FloatingDragMenu = ({
   getEditorContainerWidth,
   editorAnalyticsAPI,
   stickyHeaders,
-  pluginConfig
+  pluginConfig,
+  isTableScalingEnabled
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
@@ -29,9 +29,6 @@ const FloatingDragMenu = ({
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
-  const {
-    isTableScalingEnabled = false
-  } = getPluginState(editorView.state);
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,

package/dist/es2019/ui/common-styles.js

@@ -158,44 +158,32 @@ const viewModeSortStyles = () => {
   }
 };
 const tableBorderStyles = () => {
-  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return `border-color: ${tableBorderDeleteColor}`;
-  } else {
-    return `border: 1px solid ${tableBorderDeleteColor}`;
-  }
+  return `border-color: ${tableBorderDeleteColor}`;
 };
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 const tableStickyHeaderColumnControlsDecorationsStyle = () => {
-  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return css`
-      .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-        z-index: 0;
-        left: -1px;
-      }
+  return css`
+    .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+      z-index: 0;
+      left: -1px;
+    }
 
-      .${ClassName.TABLE_STICKY}
-        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        border-left: 1px solid ${tableBorderColor};
-      }
+    .${ClassName.TABLE_STICKY}
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+      border-left: 1px solid ${tableBorderColor};
+    }
 
-      .${ClassName.TABLE_STICKY}
-        tr:first-of-type
-        th.${ClassName.TABLE_HEADER_CELL} {
-        &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
-          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            left: 0;
-          }
+    .${ClassName.TABLE_STICKY}
+      tr:first-of-type
+      th.${ClassName.TABLE_HEADER_CELL} {
+      &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
+        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+          left: 0;
         }
       }
-    `;
-  } else {
-    return css`
-      .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-        z-index: 0;
-      }
-    `;
-  }
+    }
+  `;
 };
 const tableStickyHeaderFirefoxFixStyle = () => {
   /*

package/dist/es2019/ui/ui-styles.js

@@ -2,7 +2,6 @@
 import { css } from '@emotion/react';
 import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
 import { akEditorShadowZIndex, akEditorTableBorder, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
@@ -317,28 +316,15 @@ const overflowShadowWidhoutDnD = isDragAndDropEnabled => {
   }
 };
 const columnHeaderButton = cssString => {
-  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return css({
-      background: tableHeaderCellBackgroundColor,
-      display: 'block',
-      boxSizing: 'border-box',
-      padding: 0,
-      ':focus': {
-        outline: 'none'
-      }
-    }, cssString);
-  } else {
-    return css({
-      background: tableHeaderCellBackgroundColor,
-      border: `1px solid ${tableBorderColor}`,
-      display: 'block',
-      boxSizing: 'border-box',
-      padding: 0,
-      ':focus': {
-        outline: 'none'
-      }
-    }, cssString);
-  }
+  return css({
+    background: tableHeaderCellBackgroundColor,
+    display: 'block',
+    boxSizing: 'border-box',
+    padding: 0,
+    ':focus': {
+      outline: 'none'
+    }
+  }, cssString);
 };
 const columnHeaderButtonSelected = () => css({
   color: `var(--ds-text-inverse, ${N0})`,
@@ -410,33 +396,32 @@ export const rowControlsWrapperDotStyle = () => {
   `;
 };
 export const columnControlsDecoration = () => {
-  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return css`
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-        display: none;
-        cursor: pointer;
+  return css`
+    .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+      display: none;
+      cursor: pointer;
+      position: absolute;
+      width: 100%;
+      left: 0;
+      top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
+      height: ${columnControlsDecorationHeight}px;
+      // floating dot for adding column button
+      &::before {
+        content: ' ';
+        background-color: ${tableBorderColor};
         position: absolute;
-        width: 100%;
-        left: 0;
-        top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
-        height: ${columnControlsDecorationHeight}px;
-        // floating dot for adding column button
-        &::before {
-          content: ' ';
-          background-color: ${tableBorderColor};
-          position: absolute;
-          height: ${lineMarkerSize}px;
-          width: ${lineMarkerSize}px;
-          border-radius: 50%;
-          pointer-events: none;
-          top: 2px;
-          right: -1px;
-        }
+        height: ${lineMarkerSize}px;
+        width: ${lineMarkerSize}px;
+        border-radius: 50%;
+        pointer-events: none;
+        top: 2px;
+        right: ${"var(--ds-space-negative-025, -2px)"};
+      }
 
-        &::after {
-          content: ' ';
+      &::after {
+        content: ' ';
 
-          ${columnHeaderButton(`
+        ${columnHeaderButton(`
         border-right: ${tableCellBorderWidth}px solid ${tableBorderColor};
         border-top: ${tableCellBorderWidth}px solid ${tableBorderColor};
         border-bottom: ${tableCellBorderWidth}px solid ${tableBorderColor};
@@ -448,156 +433,85 @@ export const columnControlsDecoration = () => {
         left: 0px;
         z-index: ${columnControlsZIndex};
       `)}
-        }
       }
+    }
 
-      // floating dot for adding column button - overriding style on last column to avoid scroll
-      ${getFloatingDotOverrides()}
-
-      .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-        display: block;
-      }
+    // floating dot for adding column button - overriding style on last column to avoid scroll
+    ${getFloatingDotOverrides()}
 
-      table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
-        &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_TABLE} {
-          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            ${columnHeaderButtonSelected()};
-          }
-
-          &.${ClassName.HOVERED_CELL_IN_DANGER}
-            .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            background-color: ${tableToolbarDeleteColor};
-            border-color: ${tableBorderDeleteColor};
-            z-index: ${akEditorUnitZIndex * 100};
-          }
-        }
-      }
+    .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+      display: block;
+    }
 
-      table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
-        &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
-          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            ${columnHeaderButtonSelected()};
-            border-left: ${tableCellBorderWidth}px solid
-              ${tableBorderSelectedColor};
-            left: -${tableCellBorderWidth}px;
-          }
+    table
+      tr:first-of-type
+      td.${ClassName.TABLE_CELL},table
+      tr:first-of-type
+      th.${ClassName.TABLE_HEADER_CELL} {
+      &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_TABLE} {
+        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+          ${columnHeaderButtonSelected()};
         }
-      }
 
-      table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
-        &.${ClassName.HOVERED_COLUMN} {
+        &.${ClassName.HOVERED_CELL_IN_DANGER}
           .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            ${columnHeaderButtonSelected()};
-          }
-
-          &.${ClassName.HOVERED_CELL_IN_DANGER}
-            .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            background-color: ${tableToolbarDeleteColor};
-            border-color: ${tableBorderDeleteColor};
-            border-left: ${tableCellBorderWidth}px solid
-              ${tableBorderDeleteColor};
-            left: -${tableCellBorderWidth}px;
-            z-index: ${akEditorUnitZIndex * 100};
-          }
+          background-color: ${tableToolbarDeleteColor};
+          border-color: ${tableBorderDeleteColor};
+          z-index: ${akEditorUnitZIndex * 100};
         }
       }
+    }
 
-      .${ClassName.TABLE_SELECTED}
-        table
-        tr:first-of-type
-        td.${ClassName.TABLE_CELL},
-        .${ClassName.TABLE_SELECTED}
-        table
-        tr:first-of-type
-        th.${ClassName.TABLE_HEADER_CELL} {
+    table
+      tr:first-of-type
+      td.${ClassName.TABLE_CELL},table
+      tr:first-of-type
+      th.${ClassName.TABLE_HEADER_CELL} {
+      &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
           ${columnHeaderButtonSelected()};
+          border-left: ${tableCellBorderWidth}px solid
+            ${tableBorderSelectedColor};
+          left: -${tableCellBorderWidth}px;
         }
       }
-    `;
-  } else {
-    return css`
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-        display: none;
-        cursor: pointer;
-        position: absolute;
-        width: calc(100% + ${tableCellBorderWidth * 2}px);
-        left: -1px;
-        top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
-        height: ${columnControlsDecorationHeight}px;
-        // floating dot for adding column button
-        &::before {
-          content: ' ';
-          background-color: ${tableBorderColor};
-          position: absolute;
-          height: ${lineMarkerSize}px;
-          width: ${lineMarkerSize}px;
-          border-radius: 50%;
-          pointer-events: none;
-          top: 2px;
-          right: -1px;
-        }
-
-        &::after {
-          content: ' ';
+    }
 
-          ${columnHeaderButton(`
-        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor};
-        border-bottom: none;
-        height: ${tableToolbarSize}px;
-        width: 100%;
-        position: absolute;
-        top: ${columnControlsDecorationHeight - tableToolbarSize}px;
-        left: 0px;
-        z-index: ${columnControlsZIndex};
-      `)}
+    table
+      tr:first-of-type
+      td.${ClassName.TABLE_CELL},
+      table
+      tr:first-of-type
+      th.${ClassName.TABLE_HEADER_CELL} {
+      &.${ClassName.HOVERED_COLUMN} {
+        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+          ${columnHeaderButtonSelected()};
         }
-      }
-
-      // floating dot for adding column button - overriding style on last column to avoid scroll
-      ${getFloatingDotOverrides()}
 
-      .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-        display: block;
-      }
-
-      table
-        tr:first-of-type
-        td.${ClassName.TABLE_CELL},
-        table
-        tr:first-of-type
-        th.${ClassName.TABLE_HEADER_CELL} {
-        &.${ClassName.COLUMN_SELECTED},
-          &.${ClassName.HOVERED_COLUMN},
-          &.${ClassName.HOVERED_TABLE} {
+        &.${ClassName.HOVERED_CELL_IN_DANGER}
           .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            ${columnHeaderButtonSelected()};
-          }
-
-          &.${ClassName.HOVERED_CELL_IN_DANGER}
-            .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            background-color: ${tableToolbarDeleteColor};
-            border: 1px solid ${tableBorderDeleteColor};
-            border-bottom: none;
-            z-index: ${akEditorUnitZIndex * 100};
-          }
+          background-color: ${tableToolbarDeleteColor};
+          border-color: ${tableBorderDeleteColor};
+          border-left: ${tableCellBorderWidth}px solid ${tableBorderDeleteColor};
+          left: -${tableCellBorderWidth}px;
+          z-index: ${akEditorUnitZIndex * 100};
         }
       }
+    }
 
+    .${ClassName.TABLE_SELECTED}
+      table
+      tr:first-of-type
+      td.${ClassName.TABLE_CELL},
       .${ClassName.TABLE_SELECTED}
-        table
-        tr:first-of-type
-        td.${ClassName.TABLE_CELL},
-        .${ClassName.TABLE_SELECTED}
-        table
-        tr:first-of-type
-        th.${ClassName.TABLE_HEADER_CELL} {
-        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-          ${columnHeaderButtonSelected()};
-        }
+      table
+      tr:first-of-type
+      th.${ClassName.TABLE_HEADER_CELL} {
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+        ${columnHeaderButtonSelected()};
       }
-    `;
-  }
+    }
+  `;
 };
 export const hoveredDeleteButton = () => css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.HOVERED_DELETE_BUTTON} {

package/dist/esm/commands/column-resize.js

@@ -204,6 +204,10 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(_ref4) {
       layout: originalTable.attrs.layout,
       getEditorContainerWidth: getEditorContainerWidth
     });
+    var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
+    if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+      isTableScalingEnabledOnCurrentTable = originalTable.attrs.displayMode !== 'fixed';
+    }
     var initialResizeState = getResizeState({
       minWidth: tableCellMinWidth,
       maxSize: maxSize,
@@ -211,7 +215,7 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(_ref4) {
       tableRef: dom,
       start: tableStartPosition,
       domAtPos: domAtPos,
-      isTableScalingEnabled: isTableScalingEnabled
+      isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
     });
     updateControls()(state);
     var selectionRect = getSelectionRect(state.selection);

package/dist/esm/nodeviews/TableComponent.js

@@ -348,7 +348,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
         }
       }
-      if (isTableScalingEnabled) {
+      if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+        this.handleColgroupUpdates(true);
+      }
+      if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getNode().attrs.displayMode !== 'fixed') {
         this.handleColgroupUpdates(true);
       }
       if (allowColumnResizing && this.wrapper && !isIE11) {
@@ -472,8 +475,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var wasTableResized = hasTableBeenResized(this.node);
         var isTableResized = hasTableBeenResized(tableNode);
         var isColumnsDistributed = wasTableResized && !isTableResized;
-        var shouldScale = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged;
-        if (force || !isResizing && shouldScale) {
+        var isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
+        var shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged;
+        if (force || !isResizing && shouldUpdateColgroup) {
+          var _this$props$options, _this$props$options2;
           var resizeState = getResizeState({
             minWidth: COLUMN_MIN_WIDTH,
             maxSize: tableRenderWidth,
@@ -483,10 +488,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             domAtPos: view.domAtPos,
             isTableScalingEnabled: true
           });
+          var 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')) {
+            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') {
+            shouldScaleOnColgroupUpdate = true;
+          }
 
           // Request animation frame required for Firefox
           requestAnimationFrame(function () {
-            updateColgroup(resizeState, _this2.table, tableNode, true);
+            updateColgroup(resizeState, _this2.table, tableNode, shouldScaleOnColgroupUpdate);
           });
         }
       }
@@ -514,7 +526,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var pluginState = getPluginState(view.state);
         isInDanger = pluginState.isInDanger;
       }
-      if (isTableScalingEnabled) {
+      var shouldScale = false;
+      var shouldHandleColgroupUpdates = false;
+      if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+        shouldScale = true;
+        shouldHandleColgroupUpdates = true;
+      }
+      if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getNode().attrs.displayMode !== 'fixed') {
+        shouldScale = true;
+        shouldHandleColgroupUpdates = true;
+      }
+      if (shouldHandleColgroupUpdates) {
         this.handleColgroupUpdates();
       }
       if (isInDanger && !table) {
@@ -561,7 +583,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           if (shouldRecreateResizeCols) {
             var start = getPos() || 0;
             var depth = _view.state.doc.resolve(start).depth;
-            var shouldScale = depth === 0 && isTableScalingEnabled;
+            shouldScale = depth === 0 && shouldScale;
             insertColgroupFromNode(this.table, currentTable, shouldScale);
           }
           updateControls()(_view.state);

package/dist/esm/nodeviews/table.js

@@ -83,10 +83,9 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     value: function getContentDOM() {
       var rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
       if (rendered.dom) {
-        var _this$options;
+        var _this$options, _this$options2;
         this.table = rendered.dom;
-        // Preserve Table Width cannot have inline width set on the table
-        if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled)) {
+        if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && this.node.attrs.displayMode === 'fixed') {
           var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
           if (tableInlineWidth) {
             handleInlineTableWidth(this.table, tableInlineWidth);
@@ -99,7 +98,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     key: "setDomAttrs",
     value: function setDomAttrs(node) {
       var _this2 = this,
-        _tableWidthPluginKey$;
+        _this$options3,
+        _this$options4;
       if (!this.table) {
         return;
       }
@@ -108,11 +108,15 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
         _this2.table.setAttribute(attr, attrs[attr]);
       });
 
-      // handle inline style when table been resized
-      var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
-      var isTableResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(this.view.state)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
-      if (!isTableResizing && tableInlineWidth) {
-        handleInlineTableWidth(this.table, tableInlineWidth);
+      // Preserve Table Width cannot have inline width set on the table
+      if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled) || (_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && node.attrs.displayMode === 'fixed') {
+        var _tableWidthPluginKey$;
+        // handle inline style when table been resized
+        var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
+        var isTableResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(this.view.state)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
+        if (!isTableResizing && tableInlineWidth) {
+          handleInlineTableWidth(this.table, tableInlineWidth);
+        }
       }
     }
   }, {
@@ -165,6 +169,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
         },
         editorView: props.view,
         render: function render(pluginStates) {
+          var _props$options;
           var tableResizingPluginState = pluginStates.tableResizingPluginState,
             tableWidthPluginState = pluginStates.tableWidthPluginState,
             pluginState = pluginStates.pluginState,
@@ -196,7 +201,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             isHeaderRowEnabled: pluginState.isHeaderRowEnabled,
             isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
             isDragAndDropEnabled: pluginState.isDragAndDropEnabled,
-            isTableScalingEnabled: pluginState.isTableScalingEnabled,
+            isTableScalingEnabled: (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.isTableScalingEnabled // this.options?.isTableScalingEnabled sams as TableOptions.isTableScalingEnabled same as pluginState.isTableScalingEnabled
+            ,
             tableActive: tableActive,
             ordering: pluginState.ordering,
             isResizing: isResizing,
@@ -296,7 +302,7 @@ export var createTableView = function createTableView(node, view, getPos, portal
       wasFullWidthModeEnabled: wasFullWidthModeEnabled,
       isTableResizingEnabled: isTableResizingEnabled,
       isDragAndDropEnabled: isDragAndDropEnabled,
-      isTableScalingEnabled: isTableScalingEnabled
+      isTableScalingEnabled: isTableScalingEnabled // same as options.isTableScalingEnabled
     },
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,

package/dist/esm/plugin.js

@@ -151,12 +151,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var _ref5 = options || {},
             fullWidthEnabled = _ref5.fullWidthEnabled,
             tableOptions = _ref5.tableOptions,
-            getEditorFeatureFlags = _ref5.getEditorFeatureFlags;
+            getEditorFeatureFlags = _ref5.getEditorFeatureFlags,
+            isTableScalingEnabled = _ref5.isTableScalingEnabled;
           var _pluginConfig = pluginConfig(tableOptions),
             allowColumnResizing = _pluginConfig.allowColumnResizing;
           return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false) : undefined;
         }
       }, {
         name: 'tableEditing',
@@ -234,10 +235,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableWidth',
         plugin: function plugin(_ref13) {
-          var _options$fullWidthEna;
+          var _options$fullWidthEna, _options$isTableScali;
           var dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent,
             dispatch = _ref13.dispatch;
-          return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
+          return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -377,7 +378,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             editorAnalyticsAPI: editorAnalyticsAPI,
             stickyHeaders: stickyHeader,
-            pluginConfig: pluginConfig
+            pluginConfig: pluginConfig,
+            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,
@@ -409,10 +411,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             var _api$table;
             // see comment on tablesPlugin.getSharedState on usage
             var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
-            var _getPluginState = getPluginState(state),
-              _getPluginState$isTab = _getPluginState.isTableScalingEnabled,
-              isTableScalingEnabled = _getPluginState$isTab === void 0 ? false : _getPluginState$isTab;
-            var tr = insert(createTableWithWidth(isTableScalingEnabled, tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled)(state.schema));
+            var tr = insert(createTableWithWidth(options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled)(state.schema));
             editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
               action: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.DOCUMENT,

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

@@ -3,6 +3,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow, getSelectedCellInfo } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -156,7 +157,11 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
             var _getTablePluginState4 = getTablePluginState(editorView.state),
               _getTablePluginState5 = _getTablePluginState4.isTableScalingEnabled,
               isTableScalingEnabled = _getTablePluginState5 === void 0 ? false : _getTablePluginState5;
-            insertColgroupFromNode(tableRef, tableNode, isTableScalingEnabled);
+            var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
+            if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+              isTableScalingEnabledOnCurrentTable = tableNode.attrs.displayMode !== 'fixed';
+            }
+            insertColgroupFromNode(tableRef, tableNode, isTableScalingEnabledOnCurrentTable);
           }
         }
         editorView.focus();