@atlaskit/editor-plugin-table 7.11.4 → 7.11.6

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 7.11.6
+
+### Patch Changes
+
+-   [#94875](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94875)
+    [`df9008092ea1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/df9008092ea1) -
+    remove ff for color picker position fix in table
+
+## 7.11.5
+
+### Patch Changes
+
+-   [#96014](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96014)
+    [`a24dcb2018ae`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a24dcb2018ae) -
+    Ensure tables in fixed mode always have explicit width set
+
 ## 7.11.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -543,9 +543,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
       }
-      if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button') && getNode().attrs.displayMode !== this.node.attrs.displayMode) {
-        shouldHandleColgroupUpdates = true;
-      }
       if (shouldHandleColgroupUpdates) {
         this.handleColgroupUpdates();
       }

package/dist/cjs/nodeviews/table.js

@@ -90,24 +90,12 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     value: function getContentDOM() {
       var rendered = _model.DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
       if (rendered.dom) {
+        var _this$options, _this$options2;
         this.table = rendered.dom;
-        if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
-          var _this$options;
-          if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled)) {
-            // Preserve Table Width cannot have inline width set on the table
-            var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
-            if (tableInlineWidth) {
-              handleInlineTableWidth(this.table, tableInlineWidth);
-            }
-          }
-        } else {
-          var _this$options2;
-          if (!((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled) || this.node.attrs.displayMode === 'fixed') {
-            // Preserve Table Width cannot have inline width set on the table
-            var _tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
-            if (_tableInlineWidth) {
-              handleInlineTableWidth(this.table, _tableInlineWidth);
-            }
+        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 && (0, _platformFeatureFlags.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);
           }
         }
       }
@@ -117,7 +105,8 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     key: "setDomAttrs",
     value: function setDomAttrs(node) {
       var _this2 = this,
-        _this$options3;
+        _this$options3,
+        _this$options4;
       if (!this.table) {
         return;
       }
@@ -127,7 +116,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
       });
 
       // Preserve Table Width cannot have inline width set on the table
-      if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled)) {
+      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 && (0, _platformFeatureFlags.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());

package/dist/cjs/ui/FloatingDragMenu/DropdownMenu.js

@@ -13,7 +13,6 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _menu = require("@atlaskit/menu");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("../consts");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -94,32 +93,6 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
       }));
     })));
   };
-  if (disableKeyboardHandling) {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.background-color-flicker-in-drag-menu')) {
-      // This part need be refactor when clean up the ff, to reuse the wrapper
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "drag-dropdown-menu-wrapper"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "drag-dropdown-menu-popup-ref",
-        ref: handleRef
-      }), /*#__PURE__*/_react.default.createElement(_ui.Popup, {
-        target: targetRefDiv,
-        mountTo: mountPoint,
-        boundariesElement: boundariesElement,
-        scrollableElement: scrollableElement,
-        onPlacementChanged: function onPlacementChanged(placement) {
-          setPopupPlacement(placement);
-        },
-        fitHeight: fitHeight,
-        fitWidth: fitWidth,
-        zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
-        offset: [offsetX, offsetY],
-        allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
-      }, innerMenu()));
-    } else {
-      return innerMenu();
-    }
-  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "drag-dropdown-menu-wrapper"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -138,7 +111,7 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
     zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
     offset: [offsetX, offsetY],
     allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
-  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+  }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: _uiMenu.ArrowKeyNavigationType.MENU,
     handleClose: function handleClose() {

package/dist/es2019/nodeviews/TableComponent.js

@@ -529,9 +529,6 @@ class TableComponent extends React.Component {
       shouldScale = true;
       shouldHandleColgroupUpdates = true;
     }
-    if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getNode().attrs.displayMode !== this.node.attrs.displayMode) {
-      shouldHandleColgroupUpdates = true;
-    }
     if (shouldHandleColgroupUpdates) {
       this.handleColgroupUpdates();
     }

package/dist/es2019/nodeviews/table.js

@@ -65,31 +65,19 @@ export default class TableView extends ReactNodeView {
   getContentDOM() {
     const rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
     if (rendered.dom) {
+      var _this$options, _this$options2;
       this.table = rendered.dom;
-      if (!getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
-        var _this$options;
-        if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled)) {
-          // Preserve Table Width cannot have inline width set on the table
-          const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
-          if (tableInlineWidth) {
-            handleInlineTableWidth(this.table, tableInlineWidth);
-          }
-        }
-      } else {
-        var _this$options2;
-        if (!((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled) || this.node.attrs.displayMode === 'fixed') {
-          // Preserve Table Width cannot have inline width set on the table
-          const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
-          if (tableInlineWidth) {
-            handleInlineTableWidth(this.table, tableInlineWidth);
-          }
+      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') {
+        const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
+        if (tableInlineWidth) {
+          handleInlineTableWidth(this.table, tableInlineWidth);
         }
       }
     }
     return rendered;
   }
   setDomAttrs(node) {
-    var _this$options3;
+    var _this$options3, _this$options4;
     if (!this.table) {
       return;
     }
@@ -99,7 +87,7 @@ export default class TableView extends ReactNodeView {
     });
 
     // Preserve Table Width cannot have inline width set on the table
-    if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled)) {
+    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
       const tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());

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

@@ -5,7 +5,6 @@ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem }
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth } from '../consts';
 const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export const DropdownMenu = ({
@@ -73,32 +72,6 @@ export const DropdownMenu = ({
       });
     })))));
   };
-  if (disableKeyboardHandling) {
-    if (getBooleanFF('platform.editor.table.background-color-flicker-in-drag-menu')) {
-      // This part need be refactor when clean up the ff, to reuse the wrapper
-      return /*#__PURE__*/React.createElement("div", {
-        className: "drag-dropdown-menu-wrapper"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "drag-dropdown-menu-popup-ref",
-        ref: handleRef
-      }), /*#__PURE__*/React.createElement(Popup, {
-        target: targetRefDiv,
-        mountTo: mountPoint,
-        boundariesElement: boundariesElement,
-        scrollableElement: scrollableElement,
-        onPlacementChanged: placement => {
-          setPopupPlacement(placement);
-        },
-        fitHeight: fitHeight,
-        fitWidth: fitWidth,
-        zIndex: akEditorFloatingPanelZIndex,
-        offset: [offsetX, offsetY],
-        allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
-      }, innerMenu()));
-    } else {
-      return innerMenu();
-    }
-  }
   return /*#__PURE__*/React.createElement("div", {
     className: "drag-dropdown-menu-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
@@ -117,7 +90,7 @@ export const DropdownMenu = ({
     zIndex: akEditorFloatingPanelZIndex,
     offset: [offsetX, offsetY],
     allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
-  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+  }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: ArrowKeyNavigationType.MENU,
     handleClose: () => handleClose('handle'),

package/dist/esm/nodeviews/TableComponent.js

@@ -536,9 +536,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
       }
-      if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getNode().attrs.displayMode !== this.node.attrs.displayMode) {
-        shouldHandleColgroupUpdates = true;
-      }
       if (shouldHandleColgroupUpdates) {
         this.handleColgroupUpdates();
       }

package/dist/esm/nodeviews/table.js

@@ -83,24 +83,12 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     value: function getContentDOM() {
       var rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
       if (rendered.dom) {
+        var _this$options, _this$options2;
         this.table = rendered.dom;
-        if (!getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
-          var _this$options;
-          if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled)) {
-            // Preserve Table Width cannot have inline width set on the table
-            var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
-            if (tableInlineWidth) {
-              handleInlineTableWidth(this.table, tableInlineWidth);
-            }
-          }
-        } else {
-          var _this$options2;
-          if (!((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled) || this.node.attrs.displayMode === 'fixed') {
-            // Preserve Table Width cannot have inline width set on the table
-            var _tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
-            if (_tableInlineWidth) {
-              handleInlineTableWidth(this.table, _tableInlineWidth);
-            }
+        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);
           }
         }
       }
@@ -110,7 +98,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     key: "setDomAttrs",
     value: function setDomAttrs(node) {
       var _this2 = this,
-        _this$options3;
+        _this$options3,
+        _this$options4;
       if (!this.table) {
         return;
       }
@@ -120,7 +109,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
       });
 
       // Preserve Table Width cannot have inline width set on the table
-      if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled)) {
+      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());

package/dist/esm/ui/FloatingDragMenu/DropdownMenu.js

@@ -6,7 +6,6 @@ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem }
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth } from '../consts';
 var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export var DropdownMenu = function DropdownMenu(_ref) {
@@ -83,32 +82,6 @@ export var DropdownMenu = function DropdownMenu(_ref) {
       }));
     })));
   };
-  if (disableKeyboardHandling) {
-    if (getBooleanFF('platform.editor.table.background-color-flicker-in-drag-menu')) {
-      // This part need be refactor when clean up the ff, to reuse the wrapper
-      return /*#__PURE__*/React.createElement("div", {
-        className: "drag-dropdown-menu-wrapper"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "drag-dropdown-menu-popup-ref",
-        ref: handleRef
-      }), /*#__PURE__*/React.createElement(Popup, {
-        target: targetRefDiv,
-        mountTo: mountPoint,
-        boundariesElement: boundariesElement,
-        scrollableElement: scrollableElement,
-        onPlacementChanged: function onPlacementChanged(placement) {
-          setPopupPlacement(placement);
-        },
-        fitHeight: fitHeight,
-        fitWidth: fitWidth,
-        zIndex: akEditorFloatingPanelZIndex,
-        offset: [offsetX, offsetY],
-        allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
-      }, innerMenu()));
-    } else {
-      return innerMenu();
-    }
-  }
   return /*#__PURE__*/React.createElement("div", {
     className: "drag-dropdown-menu-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
@@ -127,7 +100,7 @@ export var DropdownMenu = function DropdownMenu(_ref) {
     zIndex: akEditorFloatingPanelZIndex,
     offset: [offsetX, offsetY],
     allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
-  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+  }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: ArrowKeyNavigationType.MENU,
     handleClose: function handleClose() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.11.4",
+  "version": "7.11.6",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.12.1",
     "@atlaskit/custom-steps": "^0.1.0",
-    "@atlaskit/editor-common": "^78.36.0",
+    "@atlaskit/editor-common": "^78.37.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.1.0",
@@ -118,9 +118,6 @@
     "platform.editor.transform-slice-for-nested-expand": {
       "type": "boolean"
     },
-    "platform.editor.table.background-color-flicker-in-drag-menu": {
-      "type": "boolean"
-    },
     "platform.editor.table.cmd-a-select-table": {
       "type": "boolean"
     },

package/src/nodeviews/TableComponent.tsx

@@ -490,14 +490,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       shouldHandleColgroupUpdates = true;
     }
 
-    if (
-      isTableScalingEnabled &&
-      getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
-      getNode().attrs.displayMode !== this.node.attrs.displayMode
-    ) {
-      shouldHandleColgroupUpdates = true;
-    }
-
     if (shouldHandleColgroupUpdates) {
       this.handleColgroupUpdates();
     }

package/src/nodeviews/table.tsx

@@ -138,35 +138,21 @@ export default class TableView extends ReactNodeView<Props> {
       this.table = rendered.dom;
 
       if (
-        !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+        !this.options?.isTableScalingEnabled ||
+        (this.options?.isTableScalingEnabled &&
+          getBooleanFF(
+            'platform.editor.table.preserve-widths-with-lock-button',
+          ) &&
+          this.node.attrs.displayMode === 'fixed')
       ) {
-        if (!this.options?.isTableScalingEnabled) {
-          // Preserve Table Width cannot have inline width set on the table
-          const tableInlineWidth = getInlineWidth(
-            this.node,
-            this.reactComponentProps.options,
-            this.reactComponentProps.view.state,
-            this.reactComponentProps.getPos(),
-          );
-          if (tableInlineWidth) {
-            handleInlineTableWidth(this.table, tableInlineWidth);
-          }
-        }
-      } else {
-        if (
-          !this.options?.isTableScalingEnabled ||
-          this.node.attrs.displayMode === 'fixed'
-        ) {
-          // Preserve Table Width cannot have inline width set on the table
-          const tableInlineWidth = getInlineWidth(
-            this.node,
-            this.reactComponentProps.options,
-            this.reactComponentProps.view.state,
-            this.reactComponentProps.getPos(),
-          );
-          if (tableInlineWidth) {
-            handleInlineTableWidth(this.table, tableInlineWidth);
-          }
+        const tableInlineWidth = getInlineWidth(
+          this.node,
+          this.reactComponentProps.options,
+          this.reactComponentProps.view.state,
+          this.reactComponentProps.getPos(),
+        );
+        if (tableInlineWidth) {
+          handleInlineTableWidth(this.table, tableInlineWidth);
         }
       }
     }
@@ -184,7 +170,14 @@ export default class TableView extends ReactNodeView<Props> {
     });
 
     // Preserve Table Width cannot have inline width set on the table
-    if (!this.options?.isTableScalingEnabled) {
+    if (
+      !this.options?.isTableScalingEnabled ||
+      (this.options?.isTableScalingEnabled &&
+        getBooleanFF(
+          'platform.editor.table.preserve-widths-with-lock-button',
+        ) &&
+        node.attrs.displayMode === 'fixed')
+    ) {
       // handle inline style when table been resized
       const tableInlineWidth = getInlineWidth(
         node,

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -11,7 +11,6 @@ import {
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { dragMenuDropdownWidth } from '../consts';
 
@@ -116,39 +115,6 @@ export const DropdownMenu = ({
     );
   };
 
-  if (disableKeyboardHandling) {
-    if (
-      getBooleanFF(
-        'platform.editor.table.background-color-flicker-in-drag-menu',
-      )
-    ) {
-      // This part need be refactor when clean up the ff, to reuse the wrapper
-      return (
-        <div className="drag-dropdown-menu-wrapper">
-          <div className="drag-dropdown-menu-popup-ref" ref={handleRef}></div>
-          <Popup
-            target={targetRefDiv as HTMLElement}
-            mountTo={mountPoint}
-            boundariesElement={boundariesElement}
-            scrollableElement={scrollableElement}
-            onPlacementChanged={(placement: [string, string]) => {
-              setPopupPlacement(placement);
-            }}
-            fitHeight={fitHeight}
-            fitWidth={fitWidth}
-            zIndex={akEditorFloatingPanelZIndex}
-            offset={[offsetX, offsetY]}
-            allowOutOfBounds // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
-          >
-            {innerMenu()}
-          </Popup>
-        </div>
-      );
-    } else {
-      return innerMenu();
-    }
-  }
-
   return (
     <div className="drag-dropdown-menu-wrapper">
       <div className="drag-dropdown-menu-popup-ref" ref={handleRef}></div>
@@ -166,51 +132,55 @@ export const DropdownMenu = ({
         offset={[offsetX, offsetY]}
         allowOutOfBounds // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
       >
-        <ArrowKeyNavigationProvider
-          closeOnTab
-          type={ArrowKeyNavigationType.MENU}
-          handleClose={() => handleClose('handle')}
-          onSelection={(index) => {
-            const results = items.flatMap((item) =>
-              'items' in item ? item.items : item,
-            );
-
-            // onSelection is called when any focusable element is 'activated'
-            // this is an issue as some menu items have toggles, which cause the index value
-            // in the callback to be outside of array length.
-            // The logic below normalises the index value based on the number
-            // of menu items with 2 focusable elements, and adjusts the index to ensure
-            // the correct menu item is sent in onItemActivated callback
-            const keys = ['row_numbers', 'header_row', 'header_column'];
-            let doubleItemCount = 0;
+        {disableKeyboardHandling ? (
+          innerMenu()
+        ) : (
+          <ArrowKeyNavigationProvider
+            closeOnTab
+            type={ArrowKeyNavigationType.MENU}
+            handleClose={() => handleClose('handle')}
+            onSelection={(index) => {
+              const results = items.flatMap((item) =>
+                'items' in item ? item.items : item,
+              );
 
-            const firstIndex = results.findIndex((value) =>
-              keys.includes(value.key!),
-            );
+              // onSelection is called when any focusable element is 'activated'
+              // this is an issue as some menu items have toggles, which cause the index value
+              // in the callback to be outside of array length.
+              // The logic below normalises the index value based on the number
+              // of menu items with 2 focusable elements, and adjusts the index to ensure
+              // the correct menu item is sent in onItemActivated callback
+              const keys = ['row_numbers', 'header_row', 'header_column'];
+              let doubleItemCount = 0;
 
-            if (firstIndex === -1 || index <= firstIndex) {
-              onItemActivated && onItemActivated({ item: results[index] });
-              return;
-            }
+              const firstIndex = results.findIndex((value) =>
+                keys.includes(value.key!),
+              );
 
-            for (let i = firstIndex; i < results.length; i += 1) {
-              if (keys.includes(results[i].key!)) {
-                doubleItemCount += 1;
-              }
-              if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
-                onItemActivated && onItemActivated({ item: results[i] });
+              if (firstIndex === -1 || index <= firstIndex) {
+                onItemActivated && onItemActivated({ item: results[index] });
                 return;
               }
 
-              if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
-                onItemActivated && onItemActivated({ item: results[i] });
-                return;
+              for (let i = firstIndex; i < results.length; i += 1) {
+                if (keys.includes(results[i].key!)) {
+                  doubleItemCount += 1;
+                }
+                if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
+                  onItemActivated && onItemActivated({ item: results[i] });
+                  return;
+                }
+
+                if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+                  onItemActivated && onItemActivated({ item: results[i] });
+                  return;
+                }
               }
-            }
-          }}
-        >
-          {innerMenu()}
-        </ArrowKeyNavigationProvider>
+            }}
+          >
+            {innerMenu()}
+          </ArrowKeyNavigationProvider>
+        )}
       </Popup>
     </div>
   );