@atlaskit/editor-plugin-table 7.6.3 → 7.6.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 7.6.4
+
+### Patch Changes
+
+- [#84595](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84595) [`412b82018310`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/412b82018310) - ED-22555: Added isFullWidth to GuidelineConfig and use it as a signal
+- Updated dependencies
+
 ## 7.6.3
 
 ### Patch Changes

package/dist/cjs/commands/misc.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
@@ -566,13 +567,13 @@ var updateWidthToWidest = exports.updateWidthToWidest = function updateWidthToWi
   return (0, _pluginFactory.createCommand)(function (state) {
     var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
       prevWidthToWidest = _getPluginState4.widthToWidest;
-    if (prevWidthToWidest === widthToWidest) {
+    if ((0, _isEqual.default)(widthToWidest, prevWidthToWidest)) {
       return false;
     }
     return {
       type: 'UPDATE_TABLE_WIDTH_TO_WIDEST',
       data: {
-        widthToWidest: widthToWidest
+        widthToWidest: _objectSpread(_objectSpread({}, prevWidthToWidest), widthToWidest)
       }
     };
   });

package/dist/cjs/nodeviews/TableContainer.js

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -42,10 +43,11 @@ var InnerContainer = exports.InnerContainer = /*#__PURE__*/(0, _react.forwardRef
     className: className,
     "data-number-column": node.attrs.isNumberColumnEnabled,
     "data-layout": node.attrs.layout,
-    "data-test-id": "table-container"
+    "data-testid": "table-container"
   }, children);
 });
 var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_react.default.memo(function (_ref2) {
+  var _node$attrs$localId, _node$attrs;
   var children = _ref2.children,
     className = _ref2.className,
     node = _ref2.node,
@@ -117,9 +119,18 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
   var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table']),
+    tableState = _useSharedPluginState.tableState;
+  var _ref3 = tableState,
+    widthToWidest = _ref3.widthToWidest;
+  var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
+
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   var responsiveContainerWidth = isTableScalingEnabled ? containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
   var width = Math.min(tableWidth, responsiveContainerWidth);
+  if (isTableScalingEnabled && currentTableNodeLocalId && widthToWidest && widthToWidest[currentTableNodeLocalId]) {
+    width = _utils.TABLE_MAX_WIDTH;
+  }
   if (!isResizing) {
     tableWidthRef.current = width;
   }
@@ -137,7 +148,8 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     attachAnalyticsEvent: attachAnalyticsEvent,
     displayGapCursor: displayGapCursor,
     isTableScalingEnabled: isTableScalingEnabled,
-    isWholeTableInDanger: isWholeTableInDanger
+    isWholeTableInDanger: isWholeTableInDanger,
+    pluginInjectionApi: pluginInjectionApi
   };
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
@@ -162,24 +174,24 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     node: node
   }, children))));
 });
-var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
-  var children = _ref3.children,
-    node = _ref3.node,
-    className = _ref3.className,
-    _ref3$containerWidth = _ref3.containerWidth,
-    lineLength = _ref3$containerWidth.lineLength,
-    editorWidth = _ref3$containerWidth.width,
-    isTableResizingEnabled = _ref3.isTableResizingEnabled,
-    isBreakoutEnabled = _ref3.isBreakoutEnabled,
-    editorView = _ref3.editorView,
-    getPos = _ref3.getPos,
-    tableRef = _ref3.tableRef,
-    isNested = _ref3.isNested,
-    tableWrapperHeight = _ref3.tableWrapperHeight,
-    isResizing = _ref3.isResizing,
-    pluginInjectionApi = _ref3.pluginInjectionApi,
-    isTableScalingEnabled = _ref3.isTableScalingEnabled,
-    isWholeTableInDanger = _ref3.isWholeTableInDanger;
+var TableContainer = exports.TableContainer = function TableContainer(_ref4) {
+  var children = _ref4.children,
+    node = _ref4.node,
+    className = _ref4.className,
+    _ref4$containerWidth = _ref4.containerWidth,
+    lineLength = _ref4$containerWidth.lineLength,
+    editorWidth = _ref4$containerWidth.width,
+    isTableResizingEnabled = _ref4.isTableResizingEnabled,
+    isBreakoutEnabled = _ref4.isBreakoutEnabled,
+    editorView = _ref4.editorView,
+    getPos = _ref4.getPos,
+    tableRef = _ref4.tableRef,
+    isNested = _ref4.isNested,
+    tableWrapperHeight = _ref4.tableWrapperHeight,
+    isResizing = _ref4.isResizing,
+    pluginInjectionApi = _ref4.pluginInjectionApi,
+    isTableScalingEnabled = _ref4.isTableScalingEnabled,
+    isWholeTableInDanger = _ref4.isWholeTableInDanger;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
       className: className,

package/dist/cjs/nodeviews/TableResizer.js

@@ -14,15 +14,14 @@ var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _guideline = require("@atlaskit/editor-common/guideline");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _utils = require("@atlaskit/editor-common/utils");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _misc = require("../commands/misc");
-var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
 var _utils3 = require("../pm-plugins/table-resizing/utils");
 var _tableWidth = require("../pm-plugins/table-width");
@@ -101,28 +100,37 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
     displayGapCursor = _ref.displayGapCursor,
     isTableScalingEnabled = _ref.isTableScalingEnabled,
-    isWholeTableInDanger = _ref.isWholeTableInDanger;
+    isWholeTableInDanger = _ref.isWholeTableInDanger,
+    pluginInjectionApi = _ref.pluginInjectionApi;
   var currentGap = (0, _react.useRef)(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = (0, _react.useRef)(false);
   var areResizeMetaKeysPressed = (0, _react.useRef)(false);
+  var _useState = (0, _react.useState)(width),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    localTableWidth = _useState2[0],
+    setLocalTableWidth = _useState2[1];
   var resizerRef = (0, _react.useRef)(null);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table']),
+    tableState = _useSharedPluginState.tableState;
+  var _ref2 = tableState,
+    widthToWidest = _ref2.widthToWidest;
 
   // used to reposition tooltip when table is resizing via keyboard
   var updateTooltip = _react.default.useRef();
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    snappingEnabled = _useState2[0],
-    setSnappingEnabled = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    snappingEnabled = _useState4[0],
+    setSnappingEnabled = _useState4[1];
 
   // we don't want to update aria-live region on each width change, it might provide bad experience for screen reader users
-  var _useState3 = (0, _react.useState)({
+  var _useState5 = (0, _react.useState)({
       type: 'none',
       width: width
     }),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    screenReaderResizeInformation = _useState4[0],
-    setScreenReaderResizeInformation = _useState4[1];
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    screenReaderResizeInformation = _useState6[0],
+    setScreenReaderResizeInformation = _useState6[1];
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var screenReaderResizeAnnouncerMessages = {
@@ -141,9 +149,9 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     startMeasure = _useMeasureFramerate.startMeasure,
     endMeasure = _useMeasureFramerate.endMeasure,
     countFrames = _useMeasureFramerate.countFrames;
-  var updateActiveGuidelines = (0, _react.useCallback)(function (_ref2) {
-    var gap = _ref2.gap,
-      keys = _ref2.keys;
+  var updateActiveGuidelines = (0, _react.useCallback)(function (_ref3) {
+    var gap = _ref3.gap,
+      keys = _ref3.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
       var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, containerWidth);
@@ -191,7 +199,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     }
   }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = (0, _react.useCallback)(function (originalState, delta) {
-    var _defaultGuidelinesFor;
+    var _node$attrs$localId, _node$attrs, _widestGuideline$posi;
     countFrames();
     var newWidth = originalState.width + delta.width;
     var pos;
@@ -216,25 +224,29 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     // set the width of the table to 1800 pixels.
     var state = editorView.state,
       dispatch = editorView.dispatch;
-    var widestGuideLineWidthString = (_defaultGuidelinesFor = (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth)[16].key) === null || _defaultGuidelinesFor === void 0 || (_defaultGuidelinesFor = _defaultGuidelinesFor.match(/[\d]*[.]{0,1}[\d]+/g)) === null || _defaultGuidelinesFor === void 0 ? void 0 : _defaultGuidelinesFor.join('');
-    var widestGuideLineWidth = parseInt(widestGuideLineWidthString || '', 10);
-    var shouldUpdateWidthToWidest = !!(isTableScalingEnabled && (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth).length === 17 && widestGuideLineWidth - newWidth <= 1);
-    (0, _misc.updateWidthToWidest)(shouldUpdateWidthToWidest)(state, dispatch);
-    updateWidth(shouldUpdateWidthToWidest ? _editorSharedStyles.akEditorFullWidthLayoutWidth : newWidth);
+    var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
+    var widestGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth).filter(function (guideline) {
+      return guideline.isFullWidth;
+    })[0];
+    var widestGuideLineWidth = widestGuideline ? (((_widestGuideline$posi = widestGuideline.position) === null || _widestGuideline$posi === void 0 ? void 0 : _widestGuideline$posi.x) || 0) * 2 : null;
+    var shouldUpdateWidthToWidest = !!(isTableScalingEnabled && widestGuideLineWidth && Math.abs(widestGuideLineWidth - newWidth) <= 1);
+    shouldUpdateWidthToWidest ? setLocalTableWidth(_utils3.TABLE_MAX_WIDTH) : setLocalTableWidth(newWidth);
+    (0, _misc.updateWidthToWidest)((0, _defineProperty2.default)({}, currentTableNodeLocalId, shouldUpdateWidthToWidest))(state, dispatch);
+    updateWidth(shouldUpdateWidthToWidest ? _utils3.TABLE_MAX_WIDTH : newWidth);
     return newWidth;
   }, [countFrames, isTableScalingEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
   var scheduleResize = (0, _react.useMemo)(function () {
     return (0, _rafSchd.default)(handleResize);
   }, [handleResize]);
   var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
+    var _node$attrs$localId2, _node$attrs2;
     isResizing.current = false;
     var newWidth = originalState.width + delta.width;
     var state = editorView.state,
       dispatch = editorView.dispatch;
     var pos = getPos();
-    var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
-      widthToWidest = _getPluginState.widthToWidest;
-    newWidth = widthToWidest ? _editorSharedStyles.akEditorFullWidthLayoutWidth : newWidth;
+    var currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
+    newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? _utils3.TABLE_MAX_WIDTH : newWidth;
     var tr = state.tr.setMeta(_tableWidth.pluginKey, {
       resizing: false
     });
@@ -279,7 +291,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest]);
   var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {
@@ -384,7 +396,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
     ref: resizerRef,
     enable: handles,
-    width: width,
+    width: localTableWidth,
     handleAlignmentMethod: "sticky",
     handleSize: handleSize,
     handleStyles: handleStyles,
@@ -401,8 +413,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     needExtendedResizeZone: !isTableSelected,
     appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow",
-    handleTooltipContent: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv') ? function (_ref3) {
-      var update = _ref3.update;
+    handleTooltipContent: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv') ? function (_ref4) {
+      var update = _ref4.update;
       updateTooltip.current = update;
       return /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
         description: formatMessage(_messages.tableMessages.resizeTable),

package/dist/cjs/plugin.js

@@ -92,7 +92,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
         isWholeTableInDanger: tablePluginState.isWholeTableInDanger,
         // IMPORTANT: Need to continue to pass tableNode to control re-renders
         // TableComponent listens for node attribute changes to update colgroups
-        tableNode: tablePluginState.tableNode
+        tableNode: tablePluginState.tableNode,
+        widthToWidest: tablePluginState.widthToWidest
       };
     },
     actions: {

package/dist/cjs/toolbar.js

@@ -22,7 +22,6 @@ var _utils3 = require("@atlaskit/editor-tables/utils");
 var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("./commands");
 var _commandsWithAnalytics = require("./commands-with-analytics");
 var _pluginFactory = require("./pm-plugins/plugin-factory");
@@ -65,7 +64,7 @@ var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMen
     disabled: !state.canCollapseTable,
     hidden: !config.allowCollapse
   }];
-  if (state.isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling')) {
+  if (state.isDragAndDropEnabled) {
     return {
       id: 'editor.table.tableOptions',
       type: 'dropdown',
@@ -301,6 +300,7 @@ var getClosestSelectionOrTableRect = exports.getClosestSelectionOrTableRect = fu
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) {
   return function (config) {
     return function (state, intl) {
+      var _tableObject$node$att, _tableObject$node;
       var tableObject = (0, _utils3.findTable)(state.selection);
       var pluginState = (0, _pluginFactory.getPluginState)(state);
       var resizeState = _tableResizing.pluginKey.getState(state);
@@ -310,7 +310,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
       var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
       var isTableScalingEnabled = pluginState.isTableScalingEnabled,
         widthToWidest = pluginState.widthToWidest;
-      if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+      var currentTableNodeLocalId = (_tableObject$node$att = tableObject === null || tableObject === void 0 || (_tableObject$node = tableObject.node) === null || _tableObject$node === void 0 || (_tableObject$node = _tableObject$node.attrs) === null || _tableObject$node === void 0 ? void 0 : _tableObject$node.localId) !== null && _tableObject$node$att !== void 0 ? _tableObject$node$att : '';
+      if (isTableScalingEnabled && isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
         var _getEditorFeatureFlag = getEditorFeatureFlags(),
           stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
         var nodeType = state.schema.nodes.table;
@@ -362,7 +363,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled);
         var columnSettingsItems;
-        columnSettingsItems = pluginState.isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled) : [];
+        columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
         // Check if we need to show confirm dialog for delete button

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

@@ -85,11 +85,11 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         var node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         var background = (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
         return {
-          content: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? formatMessage(_messages.tableMessages.backgroundColor) : formatMessage(_messages.tableMessages.cellBackground),
+          content: isDragAndDropEnabled ? formatMessage(_messages.tableMessages.backgroundColor) : formatMessage(_messages.tableMessages.cellBackground),
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
             css: _styles2.elementBeforeIconStyles
           }, (0, _react2.jsx)(_backgroundColor.default, {
             label: formatMessage(_messages.tableMessages.backgroundColor),
@@ -99,7 +99,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             className: _styles.DropdownMenuSharedCssClassName.SUBMENU
           }, (0, _react2.jsx)("div", {
             css: (0, _styles2.cellColourPreviewStyles)(background),
-            className: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL : _types.TableCssClassName.CONTEXTUAL_MENU_ICON
+            className: isDragAndDropEnabled ? _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL : _types.TableCssClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && (0, _react2.jsx)("div", {
             className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
@@ -131,7 +131,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             name: 'merge'
           },
           isDisabled: !(0, _transforms.canMergeCells)(state.tr),
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
             css: _styles2.elementBeforeIconStyles
           }, (0, _react2.jsx)(_icons.MergeCellsIcon, null)) : undefined
         }, {
@@ -140,7 +140,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             name: 'split'
           },
           isDisabled: !(0, _utils2.splitCell)(state),
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
             css: _styles2.elementBeforeIconStyles
           }, (0, _react2.jsx)(_icons.SplitCellIcon, null)) : undefined
         }];
@@ -154,14 +154,14 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _getPluginState3 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
       return {
-        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addColumnRight : _messages.tableMessages.insertColumn),
+        content: formatMessage(isDragAndDropEnabled ? _messages.tableMessages.addColumnRight : _messages.tableMessages.insertColumn),
         value: {
           name: 'insert_column'
         },
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_icons.AddColRightIcon, null)) : undefined
       };
@@ -173,14 +173,14 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _getPluginState4 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
       return {
-        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addRowBelow : _messages.tableMessages.insertRow),
+        content: formatMessage(isDragAndDropEnabled ? _messages.tableMessages.addRowBelow : _messages.tableMessages.insertRow),
         value: {
           name: 'insert_row'
         },
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addRowAfter)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_icons.AddRowBelowIcon, null)) : undefined
       };
@@ -208,7 +208,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.backspace)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_crossCircle.default, {
           label: formatMessage(_messages.tableMessages.clearCells, {
@@ -234,7 +234,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_remove.default, {
           label: formatMessage(_messages.tableMessages.removeColumns, {
@@ -260,7 +260,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)("span", {
           css: _styles2.elementBeforeIconStyles
         }, (0, _react2.jsx)(_remove.default, {
           label: formatMessage(_messages.tableMessages.removeRows, {
@@ -278,7 +278,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _getPluginState8 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState8.isDragAndDropEnabled,
         allowDistributeColumns = _getPluginState8.pluginConfig.allowDistributeColumns;
-      if (allowDistributeColumns && (!isDragAndDropEnabled || !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowDistributeColumns && !isDragAndDropEnabled) {
         var _newResizeState$chang;
         var _getPluginState9 = (0, _pluginFactory.getPluginState)(editorView.state),
           _getPluginState9$isTa = _getPluginState9.isTableScalingEnabled,
@@ -302,7 +302,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         allowColumnSorting = _this$props9.allowColumnSorting;
       var _getPluginState10 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState10.isDragAndDropEnabled;
-      if (allowColumnSorting && (!isDragAndDropEnabled || !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowColumnSorting && !isDragAndDropEnabled) {
         var hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(editorView.state.tr).length > 0;
         var warning = hasMergedCellsInTable ? {
           tooltipDescription: formatMessage(_messages.tableMessages.canNotSortTable),
@@ -520,7 +520,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         editorView = _this$props14.editorView;
       var _getPluginState14 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState14.isDragAndDropEnabled;
-      var items = isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
+      var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
       return (0, _react2.jsx)("div", {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
@@ -543,7 +543,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth,
         boundariesElement: boundariesElement,
         offset: offset,
-        section: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.menu.group-items') ? {
+        section: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.menu.group-items') ? {
           hasSeparator: true
         } : undefined
       }));

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

@@ -448,20 +448,20 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
   if (!menuItems) {
     return null;
   }
-  if (allowBackgroundColor && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling')) {
+  if (allowBackgroundColor) {
     menuItems[0].items.unshift(createBackgroundColorMenuItem());
   }
 
   // If first row, add toggle for Header row, default is true
   // If first column, add toggle for Header column, default is false
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') && index === 0) {
+  if (index === 0) {
     menuItems.push({
       items: [createHeaderRowColumnMenuItem(direction)]
     });
   }
 
   // All rows, add toggle for numbered rows, default is false
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') && direction === 'row') {
+  if (direction === 'row') {
     index === 0 ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem()) : menuItems.push({
       items: [createRowNumbersMenuItem()]
     });

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; }
@@ -129,39 +128,33 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
       // 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
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling')) {
-        var keys = ['row_numbers', 'header_row', 'header_column'];
-        var doubleItemCount = 0;
-        var firstIndex = results.findIndex(function (value) {
-          return keys.includes(value.key);
+      var keys = ['row_numbers', 'header_row', 'header_column'];
+      var doubleItemCount = 0;
+      var firstIndex = results.findIndex(function (value) {
+        return keys.includes(value.key);
+      });
+      if (firstIndex === -1 || index <= firstIndex) {
+        onItemActivated && onItemActivated({
+          item: results[index]
         });
-        if (firstIndex === -1 || index <= firstIndex) {
+        return;
+      }
+      for (var 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[index]
+            item: results[i]
           });
           return;
         }
-        for (var 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;
-          }
+        if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+          onItemActivated && onItemActivated({
+            item: results[i]
+          });
+          return;
         }
-      } else {
-        onItemActivated && onItemActivated({
-          item: results[index]
-        });
       }
     }
   }, innerMenu())));

package/dist/cjs/utils/guidelines.js

@@ -12,5 +12,5 @@ var _snapping = require("./snapping");
 // If we don't do this then the guidelines will not align correctly to the edge of the table
 var defaultGuidelines = exports.defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultSnappings)(-1))));
 var defaultGuidelinesForPreserveTable = exports.defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
-  return (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth))));
+  return (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth))), undefined, true);
 };

package/dist/es2019/commands/misc.js

@@ -1,3 +1,4 @@
+import isEqual from 'lodash/isEqual';
 import { closestElement, isParagraph, isTextSelection, mapSlice } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -527,13 +528,16 @@ export const updateWidthToWidest = widthToWidest => createCommand(state => {
   let {
     widthToWidest: prevWidthToWidest
   } = getPluginState(state);
-  if (prevWidthToWidest === widthToWidest) {
+  if (isEqual(widthToWidest, prevWidthToWidest)) {
     return false;
   }
   return {
     type: 'UPDATE_TABLE_WIDTH_TO_WIDEST',
     data: {
-      widthToWidest
+      widthToWidest: {
+        ...prevWidthToWidest,
+        ...widthToWidest
+      }
     }
   };
 });