@atlaskit/editor-plugin-table 15.3.10 → 15.3.11

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 15.3.11
+
+### Patch Changes
+
+- [`e3336879840a4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3336879840a4) -
+  [ux] EDITOR-2620 Toggle contextual menu when drag menu is opened
+- [`8b2c7333efccd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8b2c7333efccd) -
+  fix table width css used for table scaling
+- Updated dependencies
+
 ## 15.3.10
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponentLegacy.js

@@ -693,7 +693,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           isTableDisplayModeChanged: isTableDisplayModeChanged,
           isNumberColumnChanged: isNumberColumnChanged,
           isNumberOfColumnsChanged: isNumberOfColumnsChanged,
-          isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged
+          isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged,
+          isTableResized: isTableResized
         });
         var _getEditorFeatureFlag = getEditorFeatureFlags(),
           _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
@@ -794,8 +795,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
       }
-      if (this.state.windowResized) {
-        shouldHandleColgroupUpdates = true;
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_table_width_refactor')) {
+        if (this.state.windowResized) {
+          shouldHandleColgroupUpdates = true;
+        }
       }
       if (shouldHandleColgroupUpdates) {
         this.handleColgroupUpdates();

package/dist/cjs/nodeviews/TableComponentNext.js

@@ -627,7 +627,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           isTableDisplayModeChanged: isTableDisplayModeChanged,
           isNumberColumnChanged: isNumberColumnChanged,
           isNumberOfColumnsChanged: isNumberOfColumnsChanged,
-          isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged
+          isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged,
+          isTableResized: isTableResized
         });
         var _getEditorFeatureFlag = getEditorFeatureFlags(),
           _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
@@ -725,8 +726,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
       }
-      if (this.state.windowResized) {
-        shouldHandleColgroupUpdates = true;
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_table_width_refactor')) {
+        if (this.state.windowResized) {
+          shouldHandleColgroupUpdates = true;
+        }
       }
       if (shouldHandleColgroupUpdates) {
         this.handleColgroupUpdates();

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

@@ -11,6 +11,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("./consts");
 var _misc = require("./misc");
 /**
@@ -76,17 +77,27 @@ var generateColgroupFromNode = exports.generateColgroupFromNode = function gener
         }
       });
     } else {
-      // columns has not been resized, so distribute the width evenly
-      cols.push.apply(cols, (0, _toConsumableArray2.default)(Array.from({
-        length: colspan
-      }, function (_) {
-        var tableWidth = (0, _misc.getTableContainerElementWidth)(table);
-        var columnWidth = tableWidth / map.width || 0;
-        var fixedColWidth = getColWidthFix(columnWidth, map.width || 0);
-        return ['col', {
-          style: generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth)
-        }];
-      })));
+      if (!isTableScalingEnabled && (0, _platformFeatureFlags.fg)('platform_editor_table_width_refactor')) {
+        cols.push.apply(cols, (0, _toConsumableArray2.default)(Array.from({
+          length: colspan
+        }, function (_) {
+          return ['col', {
+            style: "width: ".concat(_styles.tableCellMinWidth, "px;")
+          }];
+        })));
+      } else {
+        // columns has not been resized, so distribute the width evenly
+        cols.push.apply(cols, (0, _toConsumableArray2.default)(Array.from({
+          length: colspan
+        }, function (_) {
+          var tableWidth = (0, _misc.getTableContainerElementWidth)(table);
+          var columnWidth = tableWidth / map.width || 0;
+          var fixedColWidth = getColWidthFix(columnWidth, map.width || 0);
+          return ['col', {
+            style: generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth)
+          }];
+        })));
+      }
     }
   });
   return cols;

package/dist/cjs/ui/ContentComponent.js

@@ -13,6 +13,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
 var _FloatingContextualButton = _interopRequireDefault(require("./FloatingContextualButton"));
 var _FloatingContextualMenu = _interopRequireDefault(require("./FloatingContextualMenu"));
 var _FloatingDeleteButton = _interopRequireDefault(require("./FloatingDeleteButton"));
@@ -145,7 +146,8 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
     isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
     isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
-    api: api
+    api: api,
+    isDragMenuOpen: isDragAndDropEnabled && (0, _expVal.expValNoExposure)('platform_editor_lovability_user_intent', 'isEnabled', true) ? isDragMenuOpen : undefined
   }), isDragAndDropEnabled && /*#__PURE__*/_react.default.createElement(_FloatingDragMenu.default, {
     editorView: editorView,
     mountPoint: popupsMountPoint,

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

@@ -43,6 +43,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
 var _commands = require("../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../pm-plugins/commands/commands-with-analytics");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
@@ -748,6 +749,16 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         }));
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _getPluginState11 = (0, _pluginFactory.getPluginState)(this.props.editorView.state),
+        isDragAndDropEnabled = _getPluginState11.isDragAndDropEnabled,
+        isContextualMenuOpen = _getPluginState11.isContextualMenuOpen;
+      if (isDragAndDropEnabled && this.props.isDragMenuOpen && isContextualMenuOpen && (0, _expVal.expValNoExposure)('platform_editor_lovability_user_intent', 'isEnabled', true)) {
+        (0, _commands.toggleContextualMenu)()(this.props.editorView.state, this.props.editorView.dispatch);
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -760,8 +771,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         editorView = _this$props13.editorView,
         isCellMenuOpenByKeyboard = _this$props13.isCellMenuOpenByKeyboard,
         api = _this$props13.api;
-      var _getPluginState11 = (0, _pluginFactory.getPluginState)(editorView.state),
-        isDragAndDropEnabled = _getPluginState11.isDragAndDropEnabled;
+      var _getPluginState12 = (0, _pluginFactory.getPluginState)(editorView.state),
+        isDragAndDropEnabled = _getPluginState12.isDragAndDropEnabled;
       var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
       var isOpenAllowed = false;
       isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
@@ -802,7 +813,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       };
       if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_user_intent', 'isEnabled', true)) {
         return (0, _react2.jsx)(_userIntent.UserIntentPopupWrapper, {
-          userIntent: "tablePopupOpen",
+          userIntent: "tableContextualMenuPopupOpen",
           api: api
         }, popupContent());
       }

package/dist/cjs/ui/FloatingContextualMenu/index.js

@@ -12,6 +12,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _consts = require("../consts");
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
@@ -37,6 +38,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     getEditorFeatureFlags = _ref.getEditorFeatureFlags,
     isCellMenuOpenByKeyboard = _ref.isCellMenuOpenByKeyboard,
     isCommentEditor = _ref.isCommentEditor,
+    isDragMenuOpen = _ref.isDragMenuOpen,
     api = _ref.api;
   if ((0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
     return null;
@@ -118,7 +120,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     getEditorFeatureFlags: getEditorFeatureFlags,
     isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
     isCommentEditor: isCommentEditor,
-    api: api
+    api: api,
+    isDragMenuOpen: (0, _expVal.expValNoExposure)('platform_editor_lovability_user_intent', 'isEnabled', true) ? isDragMenuOpen : undefined
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

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

@@ -561,7 +561,7 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
   });
   return isToolbarAIFCEnabled || (0, _expValEquals.expValEquals)('platform_editor_lovability_user_intent', 'isEnabled', true) ? (0, _react2.jsx)(_userIntent.UserIntentPopupWrapper, {
     api: api,
-    userIntent: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_user_intent', 'isEnabled', true) ? 'tablePopupOpen' : undefined
+    userIntent: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_user_intent', 'isEnabled', true) ? 'tableDragMenuPopupOpen' : undefined
   }, Menu) : Menu;
 });
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(DragMenu);

package/dist/es2019/nodeviews/TableComponentLegacy.js

@@ -664,7 +664,8 @@ class TableComponent extends React.Component {
         isTableDisplayModeChanged,
         isNumberColumnChanged,
         isNumberOfColumnsChanged,
-        isFullWidthModeAndLineLengthChanged
+        isFullWidthModeAndLineLengthChanged,
+        isTableResized
       });
       const {
         tableWithFixedColumnWidthsOption = false
@@ -762,8 +763,10 @@ class TableComponent extends React.Component {
       shouldScale = true;
       shouldHandleColgroupUpdates = true;
     }
-    if (this.state.windowResized) {
-      shouldHandleColgroupUpdates = true;
+    if (!fg('platform_editor_table_width_refactor')) {
+      if (this.state.windowResized) {
+        shouldHandleColgroupUpdates = true;
+      }
     }
     if (shouldHandleColgroupUpdates) {
       this.handleColgroupUpdates();

package/dist/es2019/nodeviews/TableComponentNext.js

@@ -588,7 +588,8 @@ class TableComponent extends React.Component {
         isTableDisplayModeChanged,
         isNumberColumnChanged,
         isNumberOfColumnsChanged,
-        isFullWidthModeAndLineLengthChanged
+        isFullWidthModeAndLineLengthChanged,
+        isTableResized
       });
       const {
         tableWithFixedColumnWidthsOption = false
@@ -686,8 +687,10 @@ class TableComponent extends React.Component {
       shouldScale = true;
       shouldHandleColgroupUpdates = true;
     }
-    if (this.state.windowResized) {
-      shouldHandleColgroupUpdates = true;
+    if (!fg('platform_editor_table_width_refactor')) {
+      if (this.state.windowResized) {
+        shouldHandleColgroupUpdates = true;
+      }
     }
     if (shouldHandleColgroupUpdates) {
       this.handleColgroupUpdates();

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

@@ -3,6 +3,7 @@ import { calcTableColumnWidths, getFragmentBackingArray } from '@atlaskit/editor
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { COLUMN_MIN_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
 import { getScalingPercentForTableWithoutWidth, getTableContainerElementWidth, getTableScalingPercent } from './misc';
 /**
@@ -64,17 +65,25 @@ export const generateColgroupFromNode = (table, isCommentEditor, isChromelessEdi
         }
       });
     } else {
-      // columns has not been resized, so distribute the width evenly
-      cols.push(...Array.from({
-        length: colspan
-      }, _ => {
-        const tableWidth = getTableContainerElementWidth(table);
-        const columnWidth = tableWidth / map.width || 0;
-        const fixedColWidth = getColWidthFix(columnWidth, map.width || 0);
-        return ['col', {
-          style: generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth)
-        }];
-      }));
+      if (!isTableScalingEnabled && fg('platform_editor_table_width_refactor')) {
+        cols.push(...Array.from({
+          length: colspan
+        }, _ => ['col', {
+          style: `width: ${tableCellMinWidth}px;`
+        }]));
+      } else {
+        // columns has not been resized, so distribute the width evenly
+        cols.push(...Array.from({
+          length: colspan
+        }, _ => {
+          const tableWidth = getTableContainerElementWidth(table);
+          const columnWidth = tableWidth / map.width || 0;
+          const fixedColWidth = getColWidthFix(columnWidth, map.width || 0);
+          return ['col', {
+            style: generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth)
+          }];
+        }));
+      }
     }
   });
   return cols;

package/dist/es2019/ui/ContentComponent.js

@@ -6,6 +6,7 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { expValNoExposure } from '@atlaskit/tmp-editor-statsig/expVal';
 import FloatingContextualButton from './FloatingContextualButton';
 import FloatingContextualMenu from './FloatingContextualMenu';
 import FloatingDeleteButton from './FloatingDeleteButton';
@@ -140,7 +141,8 @@ const ContentComponentInternal = ({
     getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
     isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
     isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
-    api: api
+    api: api,
+    isDragMenuOpen: isDragAndDropEnabled && expValNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true) ? isDragMenuOpen : undefined
   }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
     editorView: editorView,
     mountPoint: popupsMountPoint,

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

@@ -36,6 +36,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { expValNoExposure } from '@atlaskit/tmp-editor-statsig/expVal';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
@@ -807,6 +808,15 @@ export class ContextualMenu extends Component {
       });
     }
   }
+  componentDidUpdate() {
+    const {
+      isDragAndDropEnabled,
+      isContextualMenuOpen
+    } = getPluginState(this.props.editorView.state);
+    if (isDragAndDropEnabled && this.props.isDragMenuOpen && isContextualMenuOpen && expValNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true)) {
+      toggleContextualMenu()(this.props.editorView.state, this.props.editorView.dispatch);
+    }
+  }
   render() {
     const {
       isOpen,
@@ -858,7 +868,7 @@ export class ContextualMenu extends Component {
     }));
     if (expValEqualsNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true)) {
       return jsx(UserIntentPopupWrapper, {
-        userIntent: "tablePopupOpen",
+        userIntent: "tableContextualMenuPopupOpen",
         api: api
       }, popupContent());
     }

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

@@ -10,6 +10,7 @@ import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValNoExposure } from '@atlaskit/tmp-editor-statsig/expVal';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
 
@@ -29,6 +30,7 @@ const FloatingContextualMenu = ({
   getEditorFeatureFlags,
   isCellMenuOpenByKeyboard,
   isCommentEditor,
+  isDragMenuOpen,
   api
 }) => {
   if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
@@ -114,7 +116,8 @@ const FloatingContextualMenu = ({
     getEditorFeatureFlags: getEditorFeatureFlags,
     isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
     isCommentEditor: isCommentEditor,
-    api: api
+    api: api,
+    isDragMenuOpen: expValNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true) ? isDragMenuOpen : undefined
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

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

@@ -560,7 +560,7 @@ const DragMenu = /*#__PURE__*/React.memo(({
   });
   return isToolbarAIFCEnabled || expValEquals('platform_editor_lovability_user_intent', 'isEnabled', true) ? jsx(UserIntentPopupWrapper, {
     api: api,
-    userIntent: expValEqualsNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true) ? 'tablePopupOpen' : undefined
+    userIntent: expValEqualsNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true) ? 'tableDragMenuPopupOpen' : undefined
   }, Menu) : Menu;
 });
 export default injectIntl(DragMenu);

package/dist/esm/nodeviews/TableComponentLegacy.js

@@ -687,7 +687,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           isTableDisplayModeChanged: isTableDisplayModeChanged,
           isNumberColumnChanged: isNumberColumnChanged,
           isNumberOfColumnsChanged: isNumberOfColumnsChanged,
-          isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged
+          isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged,
+          isTableResized: isTableResized
         });
         var _getEditorFeatureFlag = getEditorFeatureFlags(),
           _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
@@ -788,8 +789,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
       }
-      if (this.state.windowResized) {
-        shouldHandleColgroupUpdates = true;
+      if (!fg('platform_editor_table_width_refactor')) {
+        if (this.state.windowResized) {
+          shouldHandleColgroupUpdates = true;
+        }
       }
       if (shouldHandleColgroupUpdates) {
         this.handleColgroupUpdates();

package/dist/esm/nodeviews/TableComponentNext.js

@@ -621,7 +621,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           isTableDisplayModeChanged: isTableDisplayModeChanged,
           isNumberColumnChanged: isNumberColumnChanged,
           isNumberOfColumnsChanged: isNumberOfColumnsChanged,
-          isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged
+          isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged,
+          isTableResized: isTableResized
         });
         var _getEditorFeatureFlag = getEditorFeatureFlags(),
           _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
@@ -719,8 +720,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
       }
-      if (this.state.windowResized) {
-        shouldHandleColgroupUpdates = true;
+      if (!fg('platform_editor_table_width_refactor')) {
+        if (this.state.windowResized) {
+          shouldHandleColgroupUpdates = true;
+        }
       }
       if (shouldHandleColgroupUpdates) {
         this.handleColgroupUpdates();

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

@@ -4,6 +4,7 @@ import { calcTableColumnWidths, getFragmentBackingArray } from '@atlaskit/editor
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { COLUMN_MIN_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
 import { getScalingPercentForTableWithoutWidth, getTableContainerElementWidth, getTableScalingPercent } from './misc';
 /**
@@ -69,17 +70,27 @@ export var generateColgroupFromNode = function generateColgroupFromNode(table, i
         }
       });
     } else {
-      // columns has not been resized, so distribute the width evenly
-      cols.push.apply(cols, _toConsumableArray(Array.from({
-        length: colspan
-      }, function (_) {
-        var tableWidth = getTableContainerElementWidth(table);
-        var columnWidth = tableWidth / map.width || 0;
-        var fixedColWidth = getColWidthFix(columnWidth, map.width || 0);
-        return ['col', {
-          style: generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth)
-        }];
-      })));
+      if (!isTableScalingEnabled && fg('platform_editor_table_width_refactor')) {
+        cols.push.apply(cols, _toConsumableArray(Array.from({
+          length: colspan
+        }, function (_) {
+          return ['col', {
+            style: "width: ".concat(tableCellMinWidth, "px;")
+          }];
+        })));
+      } else {
+        // columns has not been resized, so distribute the width evenly
+        cols.push.apply(cols, _toConsumableArray(Array.from({
+          length: colspan
+        }, function (_) {
+          var tableWidth = getTableContainerElementWidth(table);
+          var columnWidth = tableWidth / map.width || 0;
+          var fixedColWidth = getColWidthFix(columnWidth, map.width || 0);
+          return ['col', {
+            style: generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth)
+          }];
+        })));
+      }
     }
   });
   return cols;

package/dist/esm/ui/ContentComponent.js

@@ -6,6 +6,7 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { expValNoExposure } from '@atlaskit/tmp-editor-statsig/expVal';
 import FloatingContextualButton from './FloatingContextualButton';
 import FloatingContextualMenu from './FloatingContextualMenu';
 import FloatingDeleteButton from './FloatingDeleteButton';
@@ -137,7 +138,8 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
     isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
     isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
-    api: api
+    api: api,
+    isDragMenuOpen: isDragAndDropEnabled && expValNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true) ? isDragMenuOpen : undefined
   }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
     editorView: editorView,
     mountPoint: popupsMountPoint,

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

@@ -46,6 +46,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { expValNoExposure } from '@atlaskit/tmp-editor-statsig/expVal';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
@@ -742,6 +743,16 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         }));
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _getPluginState11 = getPluginState(this.props.editorView.state),
+        isDragAndDropEnabled = _getPluginState11.isDragAndDropEnabled,
+        isContextualMenuOpen = _getPluginState11.isContextualMenuOpen;
+      if (isDragAndDropEnabled && this.props.isDragMenuOpen && isContextualMenuOpen && expValNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true)) {
+        toggleContextualMenu()(this.props.editorView.state, this.props.editorView.dispatch);
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -754,8 +765,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         editorView = _this$props13.editorView,
         isCellMenuOpenByKeyboard = _this$props13.isCellMenuOpenByKeyboard,
         api = _this$props13.api;
-      var _getPluginState11 = getPluginState(editorView.state),
-        isDragAndDropEnabled = _getPluginState11.isDragAndDropEnabled;
+      var _getPluginState12 = getPluginState(editorView.state),
+        isDragAndDropEnabled = _getPluginState12.isDragAndDropEnabled;
       var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
       var isOpenAllowed = false;
       isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
@@ -796,7 +807,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       };
       if (expValEqualsNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true)) {
         return jsx(UserIntentPopupWrapper, {
-          userIntent: "tablePopupOpen",
+          userIntent: "tableContextualMenuPopupOpen",
           api: api
         }, popupContent());
       }

package/dist/esm/ui/FloatingContextualMenu/index.js

@@ -10,6 +10,7 @@ import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValNoExposure } from '@atlaskit/tmp-editor-statsig/expVal';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
 
@@ -29,6 +30,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     getEditorFeatureFlags = _ref.getEditorFeatureFlags,
     isCellMenuOpenByKeyboard = _ref.isCellMenuOpenByKeyboard,
     isCommentEditor = _ref.isCommentEditor,
+    isDragMenuOpen = _ref.isDragMenuOpen,
     api = _ref.api;
   if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
     return null;
@@ -110,7 +112,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     getEditorFeatureFlags: getEditorFeatureFlags,
     isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
     isCommentEditor: isCommentEditor,
-    api: api
+    api: api,
+    isDragMenuOpen: expValNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true) ? isDragMenuOpen : undefined
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

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

@@ -550,7 +550,7 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
   });
   return isToolbarAIFCEnabled || expValEquals('platform_editor_lovability_user_intent', 'isEnabled', true) ? jsx(UserIntentPopupWrapper, {
     api: api,
-    userIntent: expValEqualsNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true) ? 'tablePopupOpen' : undefined
+    userIntent: expValEqualsNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true) ? 'tableDragMenuPopupOpen' : undefined
   }, Menu) : Menu;
 });
 export default injectIntl(DragMenu);

package/dist/types/ui/FloatingContextualMenu/ContextualMenu.d.ts

@@ -22,6 +22,7 @@ interface Props {
     getEditorFeatureFlags?: GetEditorFeatureFlags;
     isCellMenuOpenByKeyboard?: boolean;
     isCommentEditor?: boolean;
+    isDragMenuOpen?: boolean;
     isOpen: boolean;
     mountPoint?: HTMLElement;
     offset?: Array<number>;
@@ -39,6 +40,7 @@ export declare class ContextualMenu extends Component<Props & WrappedComponentPr
     };
     private dropdownMenuRef;
     componentDidMount(): void;
+    componentDidUpdate(): void;
     render(): jsx.JSX.Element;
     private handleSubMenuRef;
     private createBackgroundColorItem;

package/dist/types/ui/FloatingContextualMenu/index.d.ts

@@ -16,6 +16,7 @@ interface Props {
     getEditorFeatureFlags?: GetEditorFeatureFlags;
     isCellMenuOpenByKeyboard?: boolean;
     isCommentEditor?: boolean;
+    isDragMenuOpen?: boolean;
     isOpen: boolean;
     mountPoint?: HTMLElement;
     pluginConfig?: PluginConfig;
@@ -23,7 +24,7 @@ interface Props {
     targetCellPosition?: number;
 }
 declare const FloatingContextualMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, isCellMenuOpenByKeyboard, isCommentEditor, api, }: Props): jsx.JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, isCellMenuOpenByKeyboard, isCommentEditor, isDragMenuOpen, api, }: Props): jsx.JSX.Element | null;
     displayName: string;
 };
 export default FloatingContextualMenu;

package/dist/types-ts4.5/ui/FloatingContextualMenu/ContextualMenu.d.ts

@@ -22,6 +22,7 @@ interface Props {
     getEditorFeatureFlags?: GetEditorFeatureFlags;
     isCellMenuOpenByKeyboard?: boolean;
     isCommentEditor?: boolean;
+    isDragMenuOpen?: boolean;
     isOpen: boolean;
     mountPoint?: HTMLElement;
     offset?: Array<number>;
@@ -39,6 +40,7 @@ export declare class ContextualMenu extends Component<Props & WrappedComponentPr
     };
     private dropdownMenuRef;
     componentDidMount(): void;
+    componentDidUpdate(): void;
     render(): jsx.JSX.Element;
     private handleSubMenuRef;
     private createBackgroundColorItem;

package/dist/types-ts4.5/ui/FloatingContextualMenu/index.d.ts

@@ -16,6 +16,7 @@ interface Props {
     getEditorFeatureFlags?: GetEditorFeatureFlags;
     isCellMenuOpenByKeyboard?: boolean;
     isCommentEditor?: boolean;
+    isDragMenuOpen?: boolean;
     isOpen: boolean;
     mountPoint?: HTMLElement;
     pluginConfig?: PluginConfig;
@@ -23,7 +24,7 @@ interface Props {
     targetCellPosition?: number;
 }
 declare const FloatingContextualMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, isCellMenuOpenByKeyboard, isCommentEditor, api, }: Props): jsx.JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, isCellMenuOpenByKeyboard, isCommentEditor, isDragMenuOpen, api, }: Props): jsx.JSX.Element | null;
     displayName: string;
 };
 export default FloatingContextualMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "15.3.10",
+	"version": "15.3.11",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -59,7 +59,7 @@
 		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/react-ufo": "^4.14.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.26.0",
+		"@atlaskit/tmp-editor-statsig": "^13.30.0",
 		"@atlaskit/toggle": "^15.1.0",
 		"@atlaskit/tokens": "^7.1.0",
 		"@atlaskit/tooltip": "^20.7.0",
@@ -72,7 +72,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.22.0",
+		"@atlaskit/editor-common": "^110.23.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -144,6 +144,9 @@
 		},
 		"platform_editor_content_mode_button_mvp": {
 			"type": "boolean"
+		},
+		"platform_editor_table_width_refactor": {
+			"type": "boolean"
 		}
 	}
 }