@atlaskit/editor-plugin-table 7.6.8 → 7.6.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 7.6.10
+
+### Patch Changes
+
+- [#88096](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88096) [`38f5046368e5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/38f5046368e5) - fix preserve table width undo / redo issue and show full width guide on small screens
+
+## 7.6.9
+
+### Patch Changes
+
+- [#87069](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87069) [`3c2cb323593e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3c2cb323593e) - remove feature flag in-danger-hover-merged-cells-fix
+
 ## 7.6.8
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableContainer.js

@@ -10,7 +10,6 @@ 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");
@@ -47,7 +46,6 @@ var InnerContainer = exports.InnerContainer = /*#__PURE__*/(0, _react.forwardRef
   }, 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,
@@ -119,18 +117,10 @@ 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;
   }
@@ -174,24 +164,24 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     node: node
   }, children))));
 });
-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;
+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;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
       className: className,

package/dist/cjs/nodeviews/TableResizer.js

@@ -104,10 +104,6 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
   // 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;
@@ -116,10 +112,10 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
 
   // used to reposition tooltip when table is resizing via keyboard
   var updateTooltip = _react.default.useRef();
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    snappingEnabled = _useState4[0],
-    setSnappingEnabled = _useState4[1];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    snappingEnabled = _useState2[0],
+    setSnappingEnabled = _useState2[1];
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var isTableSelected = ((_findTable = (0, _utils2.findTable)((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
@@ -179,7 +175,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     }
   }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = (0, _react.useCallback)(function (originalState, delta) {
-    var _node$attrs$localId, _node$attrs, _widestGuideline$posi;
+    var _node$attrs$localId, _node$attrs;
     countFrames();
     var newWidth = originalState.width + delta.width;
     var pos;
@@ -197,20 +193,18 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE));
+    var closestSnap = (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE);
+    updateActiveGuidelines(closestSnap);
 
-    // when isTableScalingEnabled true
-    // and a table is resized to fit the widest guideline when view port width is between 1011 and 1800
-    // set the width of the table to 1800 pixels.
+    // When snapping to the full width guideline, resize the table to be 1800px
     var state = editorView.state,
       dispatch = editorView.dispatch;
     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) {
+    var fullWidthGuideline = (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);
+    var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
+    var shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
     (0, _misc.updateWidthToWidest)((0, _defineProperty2.default)({}, currentTableNodeLocalId, shouldUpdateWidthToWidest))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? _utils3.TABLE_MAX_WIDTH : newWidth);
     return newWidth;
@@ -290,7 +284,6 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {
       return;
     }
-    setLocalTableWidth(newWidth);
     handleResizeStop({
       width: width,
       x: 0,
@@ -369,7 +362,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: localTableWidth,
+    width: width,
     handleAlignmentMethod: "sticky",
     handleSize: handleSize,
     handleStyles: handleStyles,

package/dist/cjs/utils/decoration.js

@@ -13,7 +13,6 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../types");
 var _ColumnResizeWidget = require("../ui/ColumnResizeWidget");
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
@@ -71,51 +70,13 @@ var createControlsHoverDecoration = exports.createControlsHoverDecoration = func
   // So If the table cells are in danger we want to create a "rectangle" selection
   // to match the "clicked" selection
 
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.in-danger-hover-merged-cells-fix')) {
-    if (danger && type !== 'table') {
-      var selection = tr.selection;
-      var _table = (0, _utils2.findTable)(selection);
-      var rect = (0, _utils2.getSelectionRect)(selection);
-      if (_table && rect) {
-        updatedCells = map.cellsInRect(rect).map(function (x) {
-          return x + _table.start;
-        });
-      }
-    }
-  } else {
-    if (danger) {
-      // Find the bounding rectangle of all the given cells, also considering
-      // merged cells.
-      var _cells$reduce3 = cells.reduce(function (acc, cell) {
-          var _map$findCell = map.findCell(cell.pos - table.start),
-            left = _map$findCell.left,
-            right = _map$findCell.right,
-            bottom = _map$findCell.bottom,
-            top = _map$findCell.top;
-          // Finding the bounding rect requires finding the min left and top positions,
-          // and the max right and bottom positions of the cells
-          return {
-            recLeft: Math.min(acc.recLeft, left),
-            recTop: Math.min(acc.recTop, top),
-            recRight: Math.max(acc.recRight, right),
-            recBottom: Math.max(acc.recBottom, bottom)
-          };
-        },
-        // +-Infinity as initialisation vars which will always be overwritten
-        // by smaller/larger values respectively
-        {
-          recLeft: Infinity,
-          recTop: Infinity,
-          recRight: -Infinity,
-          recBottom: -Infinity
-        }),
-        recLeft = _cells$reduce3.recLeft,
-        recTop = _cells$reduce3.recTop,
-        recRight = _cells$reduce3.recRight,
-        recBottom = _cells$reduce3.recBottom;
-      var _rect = new _tableMap.Rect(recLeft, recTop, recRight, recBottom);
-      updatedCells = map.cellsInRect(_rect).map(function (x) {
-        return x + table.start;
+  if (danger && type !== 'table') {
+    var selection = tr.selection;
+    var _table = (0, _utils2.findTable)(selection);
+    var rect = (0, _utils2.getSelectionRect)(selection);
+    if (_table && rect) {
+      updatedCells = map.cellsInRect(rect).map(function (x) {
+        return x + _table.start;
       });
     }
   }

package/dist/es2019/nodeviews/TableContainer.js

@@ -1,6 +1,5 @@
 import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -47,7 +46,6 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   tableWrapperHeight,
   isWholeTableInDanger
 }) => {
-  var _node$attrs$localId, _node$attrs;
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   const [resizing, setIsResizing] = useState(false);
@@ -104,20 +102,10 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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]);
   const tableWidth = getTableContainerWidth(node);
-  const {
-    tableState
-  } = useSharedPluginState(pluginInjectionApi, ['table']);
-  const {
-    widthToWidest
-  } = tableState;
-  const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? 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
   const responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
   let width = Math.min(tableWidth, responsiveContainerWidth);
-  if (isTableScalingEnabled && currentTableNodeLocalId && widthToWidest && widthToWidest[currentTableNodeLocalId]) {
-    width = TABLE_MAX_WIDTH;
-  }
   if (!isResizing) {
     tableWidthRef.current = width;
   }

package/dist/es2019/nodeviews/TableResizer.js

@@ -91,7 +91,6 @@ export const TableResizer = ({
   // track resizing state - use ref over state to avoid re-render
   const isResizing = useRef(false);
   const areResizeMetaKeysPressed = useRef(false);
-  const [localTableWidth, setLocalTableWidth] = useState(width);
   const resizerRef = useRef(null);
   const {
     tableState
@@ -171,7 +170,7 @@ export const TableResizer = ({
     }
   }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
   const handleResize = useCallback((originalState, delta) => {
-    var _node$attrs$localId, _node$attrs, _widestGuideline$posi;
+    var _node$attrs$localId, _node$attrs;
     countFrames();
     const newWidth = originalState.width + delta.width;
     let pos;
@@ -189,20 +188,18 @@ export const TableResizer = ({
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    updateActiveGuidelines(findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
+    const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
+    updateActiveGuidelines(closestSnap);
 
-    // when isTableScalingEnabled true
-    // and a table is resized to fit the widest guideline when view port width is between 1011 and 1800
-    // set the width of the table to 1800 pixels.
+    // When snapping to the full width guideline, resize the table to be 1800px
     const {
       state,
       dispatch
     } = editorView;
     const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? 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 : '';
-    const widestGuideline = defaultGuidelinesForPreserveTable(containerWidth).filter(guideline => guideline.isFullWidth)[0];
-    const widestGuideLineWidth = widestGuideline ? (((_widestGuideline$posi = widestGuideline.position) === null || _widestGuideline$posi === void 0 ? void 0 : _widestGuideline$posi.x) || 0) * 2 : null;
-    const shouldUpdateWidthToWidest = !!(isTableScalingEnabled && widestGuideLineWidth && Math.abs(widestGuideLineWidth - newWidth) <= 1);
-    shouldUpdateWidthToWidest ? setLocalTableWidth(TABLE_MAX_WIDTH) : setLocalTableWidth(newWidth);
+    const fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth).filter(guideline => guideline.isFullWidth)[0];
+    const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
+    const shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
     updateWidthToWidest({
       [currentTableNodeLocalId]: shouldUpdateWidthToWidest
     })(state, dispatch);
@@ -285,7 +282,6 @@ export const TableResizer = ({
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {
       return;
     }
-    setLocalTableWidth(newWidth);
     handleResizeStop({
       width: width,
       x: 0,
@@ -364,7 +360,7 @@ export const TableResizer = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
     ref: resizerRef,
     enable: handles,
-    width: localTableWidth,
+    width: width,
     handleAlignmentMethod: "sticky",
     handleSize: handleSize,
     handleStyles: handleStyles,

package/dist/es2019/utils/decoration.js

@@ -6,9 +6,8 @@ import { nonNullable } from '@atlaskit/editor-common/utils';
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
 const filterDecorationByKey = (key, decorationSet) => decorationSet.find(undefined, undefined, spec => spec.key.indexOf(key) > -1);
@@ -44,51 +43,13 @@ export const createControlsHoverDecoration = (cells, type, tr, isDragAndDropEnab
   // So If the table cells are in danger we want to create a "rectangle" selection
   // to match the "clicked" selection
 
-  if (getBooleanFF('platform.editor.table.in-danger-hover-merged-cells-fix')) {
-    if (danger && type !== 'table') {
-      const {
-        selection
-      } = tr;
-      const table = findTable(selection);
-      const rect = getSelectionRect(selection);
-      if (table && rect) {
-        updatedCells = map.cellsInRect(rect).map(x => x + table.start);
-      }
-    }
-  } else {
-    if (danger) {
-      // Find the bounding rectangle of all the given cells, also considering
-      // merged cells.
-      const {
-        recLeft,
-        recTop,
-        recRight,
-        recBottom
-      } = cells.reduce((acc, cell) => {
-        const {
-          left,
-          right,
-          bottom,
-          top
-        } = map.findCell(cell.pos - table.start);
-        // Finding the bounding rect requires finding the min left and top positions,
-        // and the max right and bottom positions of the cells
-        return {
-          recLeft: Math.min(acc.recLeft, left),
-          recTop: Math.min(acc.recTop, top),
-          recRight: Math.max(acc.recRight, right),
-          recBottom: Math.max(acc.recBottom, bottom)
-        };
-      },
-      // +-Infinity as initialisation vars which will always be overwritten
-      // by smaller/larger values respectively
-      {
-        recLeft: Infinity,
-        recTop: Infinity,
-        recRight: -Infinity,
-        recBottom: -Infinity
-      });
-      const rect = new Rect(recLeft, recTop, recRight, recBottom);
+  if (danger && type !== 'table') {
+    const {
+      selection
+    } = tr;
+    const table = findTable(selection);
+    const rect = getSelectionRect(selection);
+    if (table && rect) {
       updatedCells = map.cellsInRect(rect).map(x => x + table.start);
     }
   }

package/dist/esm/nodeviews/TableContainer.js

@@ -4,7 +4,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -37,7 +36,6 @@ export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, children);
 });
 export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
-  var _node$attrs$localId, _node$attrs;
   var children = _ref2.children,
     className = _ref2.className,
     node = _ref2.node,
@@ -109,18 +107,10 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     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 = getTableContainerWidth(node);
-  var _useSharedPluginState = 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 - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
   var width = Math.min(tableWidth, responsiveContainerWidth);
-  if (isTableScalingEnabled && currentTableNodeLocalId && widthToWidest && widthToWidest[currentTableNodeLocalId]) {
-    width = TABLE_MAX_WIDTH;
-  }
   if (!isResizing) {
     tableWidthRef.current = width;
   }
@@ -164,24 +154,24 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     node: node
   }, children))));
 });
-export var 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;
+export var 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;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
       className: className,

package/dist/esm/nodeviews/TableResizer.js

@@ -94,10 +94,6 @@ export var TableResizer = function TableResizer(_ref) {
   // track resizing state - use ref over state to avoid re-render
   var isResizing = useRef(false);
   var areResizeMetaKeysPressed = useRef(false);
-  var _useState = useState(width),
-    _useState2 = _slicedToArray(_useState, 2),
-    localTableWidth = _useState2[0],
-    setLocalTableWidth = _useState2[1];
   var resizerRef = useRef(null);
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table']),
     tableState = _useSharedPluginState.tableState;
@@ -106,10 +102,10 @@ export var TableResizer = function TableResizer(_ref) {
 
   // used to reposition tooltip when table is resizing via keyboard
   var updateTooltip = React.useRef();
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    snappingEnabled = _useState4[0],
-    setSnappingEnabled = _useState4[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    snappingEnabled = _useState2[0],
+    setSnappingEnabled = _useState2[1];
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var isTableSelected = ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
@@ -169,7 +165,7 @@ export var TableResizer = function TableResizer(_ref) {
     }
   }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = useCallback(function (originalState, delta) {
-    var _node$attrs$localId, _node$attrs, _widestGuideline$posi;
+    var _node$attrs$localId, _node$attrs;
     countFrames();
     var newWidth = originalState.width + delta.width;
     var pos;
@@ -187,20 +183,18 @@ export var TableResizer = function TableResizer(_ref) {
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    updateActiveGuidelines(findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
+    var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
+    updateActiveGuidelines(closestSnap);
 
-    // when isTableScalingEnabled true
-    // and a table is resized to fit the widest guideline when view port width is between 1011 and 1800
-    // set the width of the table to 1800 pixels.
+    // When snapping to the full width guideline, resize the table to be 1800px
     var state = editorView.state,
       dispatch = editorView.dispatch;
     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 = defaultGuidelinesForPreserveTable(containerWidth).filter(function (guideline) {
+    var fullWidthGuideline = 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(TABLE_MAX_WIDTH) : setLocalTableWidth(newWidth);
+    var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
+    var shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
     updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
     return newWidth;
@@ -280,7 +274,6 @@ export var TableResizer = function TableResizer(_ref) {
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {
       return;
     }
-    setLocalTableWidth(newWidth);
     handleResizeStop({
       width: width,
       x: 0,
@@ -359,7 +352,7 @@ export var TableResizer = function TableResizer(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
     ref: resizerRef,
     enable: handles,
-    width: localTableWidth,
+    width: width,
     handleAlignmentMethod: "sticky",
     handleSize: handleSize,
     handleStyles: handleStyles,

package/dist/esm/utils/decoration.js

@@ -7,9 +7,8 @@ import { nonNullable } from '@atlaskit/editor-common/utils';
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
 var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
@@ -65,51 +64,13 @@ export var createControlsHoverDecoration = function createControlsHoverDecoratio
   // So If the table cells are in danger we want to create a "rectangle" selection
   // to match the "clicked" selection
 
-  if (getBooleanFF('platform.editor.table.in-danger-hover-merged-cells-fix')) {
-    if (danger && type !== 'table') {
-      var selection = tr.selection;
-      var _table = findTable(selection);
-      var rect = getSelectionRect(selection);
-      if (_table && rect) {
-        updatedCells = map.cellsInRect(rect).map(function (x) {
-          return x + _table.start;
-        });
-      }
-    }
-  } else {
-    if (danger) {
-      // Find the bounding rectangle of all the given cells, also considering
-      // merged cells.
-      var _cells$reduce3 = cells.reduce(function (acc, cell) {
-          var _map$findCell = map.findCell(cell.pos - table.start),
-            left = _map$findCell.left,
-            right = _map$findCell.right,
-            bottom = _map$findCell.bottom,
-            top = _map$findCell.top;
-          // Finding the bounding rect requires finding the min left and top positions,
-          // and the max right and bottom positions of the cells
-          return {
-            recLeft: Math.min(acc.recLeft, left),
-            recTop: Math.min(acc.recTop, top),
-            recRight: Math.max(acc.recRight, right),
-            recBottom: Math.max(acc.recBottom, bottom)
-          };
-        },
-        // +-Infinity as initialisation vars which will always be overwritten
-        // by smaller/larger values respectively
-        {
-          recLeft: Infinity,
-          recTop: Infinity,
-          recRight: -Infinity,
-          recBottom: -Infinity
-        }),
-        recLeft = _cells$reduce3.recLeft,
-        recTop = _cells$reduce3.recTop,
-        recRight = _cells$reduce3.recRight,
-        recBottom = _cells$reduce3.recBottom;
-      var _rect = new Rect(recLeft, recTop, recRight, recBottom);
-      updatedCells = map.cellsInRect(_rect).map(function (x) {
-        return x + table.start;
+  if (danger && type !== 'table') {
+    var selection = tr.selection;
+    var _table = findTable(selection);
+    var rect = getSelectionRect(selection);
+    if (_table && rect) {
+      updatedCells = map.cellsInRect(rect).map(function (x) {
+        return x + _table.start;
       });
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.6.8",
+  "version": "7.6.10",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -129,9 +129,6 @@
     "platform.editor.menu.group-items": {
       "type": "boolean"
     },
-    "platform.editor.table.in-danger-hover-merged-cells-fix": {
-      "type": "boolean"
-    },
     "platform.editor.a11y-column-resizing_emcvz": {
       "type": "boolean"
     },

package/src/nodeviews/TableContainer.tsx

@@ -5,7 +5,6 @@ import classNames from 'classnames';
 
 import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
@@ -20,7 +19,7 @@ import {
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
-import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
+import type { PluginInjectionAPI } from '../types';
 import { TableCssClassName as ClassName } from '../types';
 
 import { TableResizer } from './TableResizer';
@@ -181,9 +180,6 @@ export const ResizableTableContainer = React.memo(
     );
 
     const tableWidth = getTableContainerWidth(node);
-    const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
-    const { widthToWidest } = tableState as TableSharedStateInternal;
-    const currentTableNodeLocalId = node?.attrs?.localId ?? '';
 
     // 76 is currently an accepted padding value considering the spacing for resizer handle
     const responsiveContainerWidth = isTableScalingEnabled
@@ -196,15 +192,6 @@ export const ResizableTableContainer = React.memo(
 
     let width = Math.min(tableWidth, responsiveContainerWidth);
 
-    if (
-      isTableScalingEnabled &&
-      currentTableNodeLocalId &&
-      widthToWidest &&
-      widthToWidest[currentTableNodeLocalId]
-    ) {
-      width = TABLE_MAX_WIDTH;
-    }
-
     if (!isResizing) {
       tableWidthRef.current = width;
     }

package/src/nodeviews/TableResizer.tsx

@@ -176,7 +176,6 @@ export const TableResizer = ({
   // track resizing state - use ref over state to avoid re-render
   const isResizing = useRef(false);
   const areResizeMetaKeysPressed = useRef(false);
-  const [localTableWidth, setLocalTableWidth] = useState(width);
   const resizerRef = useRef<ResizerNextHandler>(null);
   const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
   const { widthToWidest } = tableState as TableSharedStateInternal;
@@ -313,40 +312,33 @@ export const TableResizer = ({
         isTableScalingEnabled,
       );
 
-      updateActiveGuidelines(
-        findClosestSnap(
-          newWidth,
-          isTableScalingEnabled
-            ? defaultTablePreserveSnappingWidths(containerWidth)
-            : defaultSnappingWidths,
-          isTableScalingEnabled
-            ? defaultGuidelinesForPreserveTable(containerWidth)
-            : defaultGuidelines,
-          TABLE_HIGHLIGHT_GAP,
-          TABLE_HIGHLIGHT_TOLERANCE,
-        ),
+      const closestSnap = findClosestSnap(
+        newWidth,
+        isTableScalingEnabled
+          ? defaultTablePreserveSnappingWidths(containerWidth)
+          : defaultSnappingWidths,
+        isTableScalingEnabled
+          ? defaultGuidelinesForPreserveTable(containerWidth)
+          : defaultGuidelines,
+        TABLE_HIGHLIGHT_GAP,
+        TABLE_HIGHLIGHT_TOLERANCE,
       );
 
-      // when isTableScalingEnabled true
-      // and a table is resized to fit the widest guideline when view port width is between 1011 and 1800
-      // set the width of the table to 1800 pixels.
+      updateActiveGuidelines(closestSnap);
+
+      // When snapping to the full width guideline, resize the table to be 1800px
       const { state, dispatch } = editorView;
       const currentTableNodeLocalId = node?.attrs?.localId ?? '';
 
-      const widestGuideline = defaultGuidelinesForPreserveTable(
+      const fullWidthGuideline = defaultGuidelinesForPreserveTable(
         containerWidth,
       ).filter((guideline) => guideline.isFullWidth)[0];
-      const widestGuideLineWidth = widestGuideline
-        ? ((widestGuideline.position?.x || 0) as number) * 2
-        : null;
-      const shouldUpdateWidthToWidest = !!(
-        isTableScalingEnabled &&
-        widestGuideLineWidth &&
-        Math.abs(widestGuideLineWidth - newWidth) <= 1
+
+      const isFullWidthGuidelineActive = closestSnap.keys.includes(
+        fullWidthGuideline.key,
       );
-      shouldUpdateWidthToWidest
-        ? setLocalTableWidth(TABLE_MAX_WIDTH)
-        : setLocalTableWidth(newWidth);
+      const shouldUpdateWidthToWidest =
+        !!isTableScalingEnabled && isFullWidthGuidelineActive;
 
       updateWidthToWidest({
         [currentTableNodeLocalId]: shouldUpdateWidthToWidest,
@@ -486,7 +478,6 @@ export const TableResizer = ({
       if (newWidth > maxWidth || newWidth < resizerMinWidth) {
         return;
       }
-      setLocalTableWidth(newWidth);
       handleResizeStop(
         { width: width, x: 0, y: 0, height: 0 },
         { width: step, height: 0 },
@@ -599,7 +590,7 @@ export const TableResizer = ({
       <ResizerNext
         ref={resizerRef}
         enable={handles}
-        width={localTableWidth}
+        width={width}
         handleAlignmentMethod="sticky"
         handleSize={handleSize}
         handleStyles={handleStyles}

package/src/utils/decoration.ts

@@ -16,13 +16,12 @@ import type {
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
   findTable,
   getCellsInRow,
   getSelectionRect,
 } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import type { Cell, CellColumnPositioning } from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
@@ -102,44 +101,12 @@ export const createControlsHoverDecoration = (
   // So If the table cells are in danger we want to create a "rectangle" selection
   // to match the "clicked" selection
 
-  if (getBooleanFF('platform.editor.table.in-danger-hover-merged-cells-fix')) {
-    if (danger && type !== 'table') {
-      const { selection } = tr;
-      const table = findTable(selection);
-      const rect = getSelectionRect(selection);
+  if (danger && type !== 'table') {
+    const { selection } = tr;
+    const table = findTable(selection);
+    const rect = getSelectionRect(selection);
 
-      if (table && rect) {
-        updatedCells = map.cellsInRect(rect).map((x) => x + table.start);
-      }
-    }
-  } else {
-    if (danger) {
-      // Find the bounding rectangle of all the given cells, also considering
-      // merged cells.
-      const { recLeft, recTop, recRight, recBottom } = cells.reduce(
-        (acc, cell) => {
-          const { left, right, bottom, top } = map.findCell(
-            cell.pos - table.start,
-          );
-          // Finding the bounding rect requires finding the min left and top positions,
-          // and the max right and bottom positions of the cells
-          return {
-            recLeft: Math.min(acc.recLeft, left),
-            recTop: Math.min(acc.recTop, top),
-            recRight: Math.max(acc.recRight, right),
-            recBottom: Math.max(acc.recBottom, bottom),
-          };
-        },
-        // +-Infinity as initialisation vars which will always be overwritten
-        // by smaller/larger values respectively
-        {
-          recLeft: Infinity,
-          recTop: Infinity,
-          recRight: -Infinity,
-          recBottom: -Infinity,
-        },
-      );
-      const rect = new Rect(recLeft, recTop, recRight, recBottom);
+    if (table && rect) {
       updatedCells = map.cellsInRect(rect).map((x) => x + table.start);
     }
   }