@atlaskit/editor-plugin-table 5.4.16 → 5.4.17

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 5.4.17
+
+### Patch Changes
+
+- [#59009](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59009) [`f7e9d874ff37`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f7e9d874ff37) - Fix table expand selection when `platform.editor.table-shift-click-selection-backward` FF is enabled
+- [#58768](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58768) [`a300aa54a8e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a300aa54a8e9) - [ux] Fixes resize handle state when column is in danger
+
 ## 5.4.16
 
 ### Patch Changes

package/dist/cjs/plugins/table/commands/hover.js

@@ -106,7 +106,8 @@ var hoverTable = exports.hoverTable = function hoverTable(isInDanger, isSelected
         decorationSet: (0, _utils2.updatePluginStateDecorations)(state, decorations, _types.TableDecorations.TABLE_CONTROLS_HOVER),
         hoveredColumns: hoveredColumns,
         hoveredRows: hoveredRows,
-        isInDanger: isInDanger
+        isInDanger: isInDanger,
+        isWholeTableInDanger: isInDanger
       }
     };
   }, function (tr) {
@@ -119,7 +120,8 @@ var clearHoverSelection = exports.clearHoverSelection = function clearHoverSelec
       type: 'CLEAR_HOVER_SELECTION',
       data: {
         decorationSet: (0, _utils2.updatePluginStateDecorations)(state, [], _types.TableDecorations.ALL_CONTROLS_HOVER),
-        isInDanger: false
+        isInDanger: false,
+        isWholeTableInDanger: false
       }
     };
   });

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -286,7 +286,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _this.containerWidth = _containerWidth;
     _this.isInitialOverflowSent = false;
 
-    // store table size using previous full-width mode so can detect if it has changed
+    // store table size using previous full-width mode so can detect if it has changed.
     var isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
     _this.layoutSize = _this.tableNodeLayoutSize(_this.node, _containerWidth.width, {
       isFullWidthModeEnabled: isFullWidthModeEnabled

package/dist/cjs/plugins/table/nodeviews/TableResizer.js

@@ -105,7 +105,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
   var resizerMinWidth = getResizerMinWidth(node);
   var handleSize = getResizerHandleHeight(tableRef);
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
-    isInDanger = _getPluginState.isInDanger;
+    isWholeTableInDanger = _getPluginState.isWholeTableInDanger;
   var _useMeasureFramerate = (0, _analytics2.useMeasureFramerate)(),
     startMeasure = _useMeasureFramerate.startMeasure,
     endMeasure = _useMeasureFramerate.endMeasure,
@@ -252,7 +252,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
     isHandleVisible: isTableSelected,
-    appearance: isInDanger && isTableSelected ? 'danger' : undefined,
+    appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow",
     handleTooltipContent: formatMessage(_messages.tableMessages.resizeTable)
   }, children);

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

@@ -82,8 +82,8 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   var selection = state.selection;
   var selectionRect = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
   var hasMergedCells = direction === 'row' ? _utils2.hasMergedCellsInRow : _utils2.hasMergedCellsInColumn;
-  var mergedCells = index !== undefined && hasMergedCells(index)(selection);
-  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, mergedCells, tableMap, index, targetCellPosition, selectionRect);
+  var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
+  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

package/dist/es2019/plugins/table/commands/hover.js

@@ -85,7 +85,8 @@ export const hoverTable = (isInDanger, isSelected) => createCommand(state => {
       decorationSet: updatePluginStateDecorations(state, decorations, TableDecorations.TABLE_CONTROLS_HOVER),
       hoveredColumns,
       hoveredRows,
-      isInDanger
+      isInDanger,
+      isWholeTableInDanger: isInDanger
     }
   };
 }, tr => tr.setMeta('addToHistory', false));
@@ -93,7 +94,8 @@ export const clearHoverSelection = () => createCommand(state => ({
   type: 'CLEAR_HOVER_SELECTION',
   data: {
     decorationSet: updatePluginStateDecorations(state, [], TableDecorations.ALL_CONTROLS_HOVER),
-    isInDanger: false
+    isInDanger: false,
+    isWholeTableInDanger: false
   }
 }));
 export const showResizeHandleLine = cellColumnPositioning => createCommand(state => ({

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -284,7 +284,7 @@ class TableComponent extends React.Component {
     this.containerWidth = _containerWidth;
     this.isInitialOverflowSent = false;
 
-    // store table size using previous full-width mode so can detect if it has changed
+    // store table size using previous full-width mode so can detect if it has changed.
     const isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
     this.layoutSize = this.tableNodeLayoutSize(this.node, _containerWidth.width, {
       isFullWidthModeEnabled

package/dist/es2019/plugins/table/nodeviews/TableResizer.js

@@ -90,7 +90,7 @@ export const TableResizer = ({
   const resizerMinWidth = getResizerMinWidth(node);
   const handleSize = getResizerHandleHeight(tableRef);
   const {
-    isInDanger
+    isWholeTableInDanger
   } = getPluginState(editorView.state);
   const {
     startMeasure,
@@ -247,7 +247,7 @@ export const TableResizer = ({
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
     isHandleVisible: isTableSelected,
-    appearance: isInDanger && isTableSelected ? 'danger' : undefined,
+    appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow",
     handleTooltipContent: formatMessage(messages.resizeTable)
   }, children);

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

@@ -73,8 +73,8 @@ export const DragMenu = ({
   } = state;
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
-  const mergedCells = index !== undefined && hasMergedCells(index)(selection);
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, mergedCells, tableMap, index, targetCellPosition, selectionRect);
+  const shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
   const {
     menuItems,
     menuCallback

package/dist/esm/plugins/table/commands/hover.js

@@ -99,7 +99,8 @@ export var hoverTable = function hoverTable(isInDanger, isSelected) {
         decorationSet: updatePluginStateDecorations(state, decorations, TableDecorations.TABLE_CONTROLS_HOVER),
         hoveredColumns: hoveredColumns,
         hoveredRows: hoveredRows,
-        isInDanger: isInDanger
+        isInDanger: isInDanger,
+        isWholeTableInDanger: isInDanger
       }
     };
   }, function (tr) {
@@ -112,7 +113,8 @@ export var clearHoverSelection = function clearHoverSelection() {
       type: 'CLEAR_HOVER_SELECTION',
       data: {
         decorationSet: updatePluginStateDecorations(state, [], TableDecorations.ALL_CONTROLS_HOVER),
-        isInDanger: false
+        isInDanger: false,
+        isWholeTableInDanger: false
       }
     };
   });

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -279,7 +279,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _this.containerWidth = _containerWidth;
     _this.isInitialOverflowSent = false;
 
-    // store table size using previous full-width mode so can detect if it has changed
+    // store table size using previous full-width mode so can detect if it has changed.
     var isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
     _this.layoutSize = _this.tableNodeLayoutSize(_this.node, _containerWidth.width, {
       isFullWidthModeEnabled: isFullWidthModeEnabled

package/dist/esm/plugins/table/nodeviews/TableResizer.js

@@ -95,7 +95,7 @@ export var TableResizer = function TableResizer(_ref) {
   var resizerMinWidth = getResizerMinWidth(node);
   var handleSize = getResizerHandleHeight(tableRef);
   var _getPluginState = getPluginState(editorView.state),
-    isInDanger = _getPluginState.isInDanger;
+    isWholeTableInDanger = _getPluginState.isWholeTableInDanger;
   var _useMeasureFramerate = useMeasureFramerate(),
     startMeasure = _useMeasureFramerate.startMeasure,
     endMeasure = _useMeasureFramerate.endMeasure,
@@ -242,7 +242,7 @@ export var TableResizer = function TableResizer(_ref) {
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
     isHandleVisible: isTableSelected,
-    appearance: isInDanger && isTableSelected ? 'danger' : undefined,
+    appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow",
     handleTooltipContent: formatMessage(messages.resizeTable)
   }, children);

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

@@ -74,8 +74,8 @@ export var DragMenu = function DragMenu(_ref) {
   var selection = state.selection;
   var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   var hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
-  var mergedCells = index !== undefined && hasMergedCells(index)(selection);
-  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, mergedCells, tableMap, index, targetCellPosition, selectionRect);
+  var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
+  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

package/dist/types/plugins/table/types.d.ts

@@ -64,6 +64,7 @@ export interface TablePluginState {
     tableWrapperTarget?: HTMLElement;
     isContextualMenuOpen?: boolean;
     isInDanger?: boolean;
+    isWholeTableInDanger?: boolean;
     insertColumnButtonIndex?: number;
     insertRowButtonIndex?: number;
     isFullWidthModeEnabled?: boolean;

package/dist/types-ts4.5/plugins/table/types.d.ts

@@ -64,6 +64,7 @@ export interface TablePluginState {
     tableWrapperTarget?: HTMLElement;
     isContextualMenuOpen?: boolean;
     isInDanger?: boolean;
+    isWholeTableInDanger?: boolean;
     insertColumnButtonIndex?: number;
     insertRowButtonIndex?: number;
     isFullWidthModeEnabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.4.16",
+  "version": "5.4.17",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/plugins/table/commands/hover.ts

@@ -157,6 +157,7 @@ export const hoverTable = (isInDanger?: boolean, isSelected?: boolean) =>
           hoveredColumns,
           hoveredRows,
           isInDanger,
+          isWholeTableInDanger: isInDanger,
         },
       };
     },
@@ -173,6 +174,7 @@ export const clearHoverSelection = () =>
         TableDecorations.ALL_CONTROLS_HOVER,
       ),
       isInDanger: false,
+      isWholeTableInDanger: false,
     },
   }));
 

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -143,7 +143,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     this.containerWidth = containerWidth;
     this.isInitialOverflowSent = false;
 
-    // store table size using previous full-width mode so can detect if it has changed
+    // store table size using previous full-width mode so can detect if it has changed.
     const isFullWidthModeEnabled = options
       ? options.wasFullWidthModeEnabled
       : false;

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -155,7 +155,7 @@ export const TableResizer = ({
 
   const resizerMinWidth = getResizerMinWidth(node);
   const handleSize = getResizerHandleHeight(tableRef);
-  const { isInDanger } = getPluginState(editorView.state);
+  const { isWholeTableInDanger } = getPluginState(editorView.state);
 
   const { startMeasure, endMeasure, countFrames } = useMeasureFramerate();
 
@@ -394,7 +394,9 @@ export const TableResizer = ({
       snap={guidelineSnaps}
       handlePositioning="adjacent"
       isHandleVisible={isTableSelected}
-      appearance={isInDanger && isTableSelected ? 'danger' : undefined}
+      appearance={
+        isTableSelected && isWholeTableInDanger ? 'danger' : undefined
+      }
       handleHighlight="shadow"
       handleTooltipContent={formatMessage(messages.resizeTable)}
     >

package/src/plugins/table/types.ts

@@ -109,6 +109,7 @@ export interface TablePluginState {
   tableWrapperTarget?: HTMLElement;
   isContextualMenuOpen?: boolean;
   isInDanger?: boolean;
+  isWholeTableInDanger?: boolean;
   insertColumnButtonIndex?: number;
   insertRowButtonIndex?: number;
   isFullWidthModeEnabled?: boolean;

package/src/plugins/table/ui/FloatingDragMenu/DragMenu.tsx

@@ -131,12 +131,13 @@ export const DragMenu = ({
   const hasMergedCells =
     direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
 
-  const mergedCells = index !== undefined && hasMergedCells(index)(selection);
+  const shouldMoveDisabled =
+    index !== undefined && hasMergedCells(index)(selection);
 
   const dragMenuConfig = getDragMenuConfig(
     direction,
     getEditorContainerWidth,
-    mergedCells,
+    shouldMoveDisabled,
     tableMap,
     index,
     targetCellPosition,