@atlaskit/editor-plugin-table 9.1.3 → 9.2.0

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -12,7 +12,7 @@ import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { getSelectedColumnIndexes } from '../../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../../types';
-import { DragHandle } from '../../DragHandle';
+import { DragHandle, DragHandleWithSharedState } from '../../DragHandle';
 const getSelectedColumns = selection => {
   if (selection instanceof CellSelection && selection.isColSelection()) {
     const rect = getSelectionRect(selection);
@@ -33,7 +33,6 @@ export const ColumnControls = ({
   isInDanger,
   rowHeights,
   colWidths,
-  hasHeaderColumn,
   isTableHovered,
   tableContainerWidth,
   isNumberColumnEnabled,
@@ -172,7 +171,23 @@ export const ColumnControls = ({
         position: 'relative'
       },
       "data-testid": `table-floating-column-${isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0]}-drag-handle`
-    }, /*#__PURE__*/React.createElement(DragHandle, {
+    }, fg('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/React.createElement(DragHandleWithSharedState, {
+      isDragMenuTarget: !isHover,
+      direction: "column",
+      tableLocalId: localId || '',
+      indexes: indexes,
+      hoveredCell: hoveredCell,
+      previewWidth: previewWidth,
+      forceDefaultHandle: !isHover,
+      previewHeight: previewHeight,
+      appearance: appearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      toggleDragMenu: toggleDragMenuHandler,
+      editorView: editorView,
+      api: api
+    }) : /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',

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

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getColumnsWidths } from '../../pm-plugins/utils/column-controls';
 import { containsHeaderColumn } from '../../pm-plugins/utils/nodes';
 import { getRowHeights } from '../../pm-plugins/utils/row-controls';
@@ -99,7 +98,7 @@ const TableFloatingColumnControls = ({
     isNumberColumnEnabled: isNumberColumnEnabled,
     isDragging: isDragging,
     getScrollOffset: getScrollOffset,
-    api: editorExperiment('platform_editor_table_use_shared_state_hook', true) ? api : undefined
+    api: fg('platform_editor_table_use_shared_state_hook_fg') ? api : undefined
   }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -1,9 +1,10 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
@@ -12,7 +13,7 @@ import { getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-cont
 import { getSelectedRowIndexes } from '../../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../../types';
 import { dropTargetExtendedWidth } from '../../consts';
-import { DragHandle } from '../../DragHandle';
+import { DragHandle, DragHandleWithSharedState } from '../../DragHandle';
 import RowDropTarget from '../RowDropTarget';
 const getSelectedRows = selection => {
   if (selection instanceof CellSelection && selection.isRowSelection()) {
@@ -24,7 +25,7 @@ const getSelectedRows = selection => {
   }
   return [];
 };
-const DragControlsComponent = ({
+export const DragControls = ({
   tableRef,
   tableNode,
   tableWidth,
@@ -37,14 +38,16 @@ const DragControlsComponent = ({
   hoverRows,
   selectRow,
   selectRows,
-  updateCellHoverLocation
+  updateCellHoverLocation,
+  api,
+  selection
 }) => {
   var _tableNode$attrs$loca, _tableNode$attrs;
   const [isDragging, setIsDragging] = useState(false);
   const rowHeights = getRowHeights(tableRef);
   const rowsParams = getRowsParams(rowHeights);
   const heights = rowHeights.map(height => `${height - 1}px`).join(' ');
-  const selectedRowIndexes = getSelectedRows(editorView.state.selection);
+  const selectedRowIndexes = getSelectedRows(selection !== null && selection !== void 0 ? selection : editorView.state.selection);
   const currentNodeLocalId = (_tableNode$attrs$loca = tableNode === null || tableNode === void 0 ? void 0 : (_tableNode$attrs = tableNode.attrs) === null || _tableNode$attrs === void 0 ? void 0 : _tableNode$attrs.localId) !== null && _tableNode$attrs$loca !== void 0 ? _tableNode$attrs$loca : '';
   useEffect(() => {
     return monitorForElements({
@@ -155,7 +158,23 @@ const DragControlsComponent = ({
         pointerEvents: 'none'
       },
       "data-testid": `table-floating-row-${isHover ? rowIndex : selectedRowIndexes[0]}-drag-handle`
-    }, /*#__PURE__*/React.createElement(DragHandle, {
+    }, fg('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/React.createElement(DragHandleWithSharedState, {
+      isDragMenuTarget: !isHover,
+      direction: "row",
+      tableLocalId: currentNodeLocalId,
+      indexes: indexes,
+      forceDefaultHandle: !isHover,
+      previewWidth: tableWidth,
+      previewHeight: previewHeight,
+      appearance: appearance,
+      hoveredCell: hoveredCell,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      toggleDragMenu: toggleDragMenuHandler,
+      editorView: editorView,
+      api: api
+    }) : /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,
@@ -259,4 +278,40 @@ const DragControlsComponent = ({
     }))), rowHandles())
   );
 };
-export const DragControls = injectIntl(DragControlsComponent);
+export const DragControlsWithSelection = ({
+  editorView,
+  tableRef,
+  tableNode,
+  tableWidth,
+  tableActive,
+  hoveredCell,
+  isInDanger,
+  isTableHovered,
+  isResizing,
+  hoverRows,
+  selectRow,
+  selectRows,
+  updateCellHoverLocation,
+  api
+}) => {
+  const {
+    selectionState
+  } = useSharedPluginState(api, ['selection']);
+  return /*#__PURE__*/React.createElement(DragControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    tableNode: tableNode,
+    tableWidth: tableWidth,
+    tableActive: tableActive,
+    hoveredCell: hoveredCell,
+    isInDanger: isInDanger,
+    isTableHovered: isTableHovered,
+    isResizing: isResizing,
+    hoverRows: hoverRows,
+    selectRow: selectRow,
+    selectRows: selectRows,
+    updateCellHoverLocation: updateCellHoverLocation,
+    api: api,
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  });
+};

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

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/commands';
 import { isTableNested } from '../../pm-plugins/utils/nodes';
@@ -11,7 +12,8 @@ import { DragCornerControls, DragCornerControlsWithSelection } from './CornerCon
 import { FloatingControlsWithSelection } from './FloatingControlsWithSelection';
 import NumberColumn from './NumberColumn';
 import { RowControls } from './RowControls/ClassicControls';
-import { DragControls } from './RowControls/DragControls';
+import { DragControls, DragControlsWithSelection } from './RowControls/DragControls';
+// Row controls
 export const TableFloatingControls = ({
   editorView,
   tableRef,
@@ -114,18 +116,36 @@ export const TableFloatingControls = ({
       updateCellHoverLocation: updateCellHoverLocation,
       stickyTop: stickyTop,
       isDragAndDropEnabled: isDragAndDropEnabled
-    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && (editorExperiment('platform_editor_table_use_shared_state_hook', true) ? /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
+    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
       isResizing: isResizing,
       api: api
-    }) : /*#__PURE__*/React.createElement(DragCornerControls, {
+    }), /*#__PURE__*/React.createElement(DragControlsWithSelection, {
+      tableRef: tableRef,
+      tableNode: tableNode,
+      hoveredCell: hoveredCell,
+      isTableHovered: isTableHovered,
+      editorView: editorView,
+      tableActive: tableActive,
+      isInDanger: isInDanger,
+      isResizing: isResizing
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      ,
+      tableWidth: tableWrapperWidth,
+      hoverRows: _hoverRows,
+      selectRow: _selectRow,
+      selectRows: _selectRows,
+      updateCellHoverLocation: updateCellHoverLocation,
+      api: api
+    })) : /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && /*#__PURE__*/React.createElement(DragCornerControls, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
       isResizing: isResizing
-    })), /*#__PURE__*/React.createElement(DragControls, {
+    }), /*#__PURE__*/React.createElement(DragControls, {
       tableRef: tableRef,
       tableNode: tableNode,
       hoveredCell: hoveredCell,
@@ -142,7 +162,7 @@ export const TableFloatingControls = ({
       selectRow: _selectRow,
       selectRows: _selectRows,
       updateCellHoverLocation: updateCellHoverLocation
-    })) : editorExperiment('platform_editor_table_use_shared_state_hook', true) ? /*#__PURE__*/React.createElement(FloatingControlsWithSelection, {
+    }))) : fg('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/React.createElement(FloatingControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,

package/dist/esm/nodeviews/TableComponent.js

@@ -26,7 +26,6 @@ import { akEditorTableNumberColumnWidth, akEditorTableToolbarSize as tableToolba
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { autoSizeTable, clearHoverSelection } from '../pm-plugins/commands';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils/autoscrollers';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -693,7 +692,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getEditorFeatureFlags = _this$props11.getEditorFeatureFlags;
       var isInDanger = this.props.isInDanger;
       var table = findTable(view.state.selection);
-      if (editorExperiment('platform_editor_table_use_shared_state_hook', false)) {
+      if (!fg('platform_editor_table_use_shared_state_hook_fg')) {
         var pluginState = getPluginState(view.state);
         isInDanger = pluginState.isInDanger;
       }
@@ -829,7 +828,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getEditorFeatureFlags = _this$props12.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props12.isTableScalingEnabled,
         allowTableResizing = _this$props12.allowTableResizing,
-        allowTableAlignment = _this$props12.allowTableAlignment;
+        allowTableAlignment = _this$props12.allowTableAlignment,
+        selection = _this$props12.selection;
       var _this$props13 = this.props,
         isInDanger = _this$props13.isInDanger,
         hoveredRows = _this$props13.hoveredRows,
@@ -840,7 +840,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
       var node = getNode();
-      if (editorExperiment('platform_editor_table_use_shared_state_hook', false)) {
+      if (!fg('platform_editor_table_use_shared_state_hook_fg')) {
         var pluginState = getPluginState(view.state);
         isInDanger = pluginState.isInDanger;
         hoveredRows = pluginState.hoveredRows;
@@ -934,7 +934,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
-        className: classnames(ClassName.TABLE_CONTAINER, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ClassName.WITH_CONTROLS, allowControls && tableActive), ClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), ClassName.HOVERED_DELETE_BUTTON, isInDanger), ClassName.TABLE_SELECTED, isTableSelected(view.state.selection))),
+        className: classnames(ClassName.TABLE_CONTAINER, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ClassName.WITH_CONTROLS, allowControls && tableActive), ClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), ClassName.HOVERED_DELETE_BUTTON, isInDanger), ClassName.TABLE_SELECTED, isTableSelected(selection !== null && selection !== void 0 ? selection : view.state.selection))),
         editorView: view,
         getPos: getPos,
         node: node

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -23,10 +23,11 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     forwardRef = _ref.forwardRef,
     allowTableAlignment = _ref.allowTableAlignment,
     allowTableResizing = _ref.allowTableResizing;
-  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media']),
+  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection']),
     widthState = _useSharedPluginState.widthState,
     tableState = _useSharedPluginState.tableState,
-    mediaState = _useSharedPluginState.mediaState;
+    mediaState = _useSharedPluginState.mediaState,
+    selectionState = _useSharedPluginState.selectionState;
   if (!tableState) {
     return null;
   }
@@ -63,7 +64,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     getPos: getPos,
     isMediaFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
     options: options,
-    allowControls: !!allowControls,
+    allowControls: allowControls,
     isHeaderRowEnabled: isHeaderRowEnabled,
     isHeaderColumnEnabled: isHeaderColumnEnabled,
     isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
@@ -86,6 +87,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     hoveredRows: hoveredRows,
     hoveredCell: hoveredCell,
     isTableHovered: isTableHovered,
-    isWholeTableInDanger: isWholeTableInDanger
+    isWholeTableInDanger: isWholeTableInDanger,
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
   });
 };

package/dist/esm/nodeviews/table.js

@@ -18,7 +18,6 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
 import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop/plugin-key';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -134,7 +133,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render(props, forwardRef) {
       var _this3 = this;
-      if (editorExperiment('platform_editor_table_use_shared_state_hook', true)) {
+      if (fg('platform_editor_table_use_shared_state_hook_fg')) {
         return /*#__PURE__*/React.createElement(TableComponentWithSharedState, {
           forwardRef: forwardRef,
           getNode: this.getNode,

package/dist/esm/tablePlugin.js

@@ -102,6 +102,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
         isTableResizing: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.resizing,
         isInDanger: tablePluginState.isInDanger,
         hoveredRows: tablePluginState.hoveredRows,
+        hoveredColumns: tablePluginState.hoveredColumns,
         hoveredCell: tablePluginState.hoveredCell,
         isTableHovered: tablePluginState.isTableHovered,
         isWholeTableInDanger: tablePluginState.isWholeTableInDanger,

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

@@ -1,10 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/* eslint-disable @atlaskit/design-system/no-html-button */
+
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/browser';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
@@ -35,7 +38,9 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     hoveredCell = _ref.hoveredCell,
     onClick = _ref.onClick,
     editorView = _ref.editorView,
-    formatMessage = _ref.intl.formatMessage;
+    formatMessage = _ref.intl.formatMessage,
+    hoveredColumns = _ref.hoveredColumns,
+    hoveredRows = _ref.hoveredRows;
   var dragHandleDivRef = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -43,9 +48,13 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     setPreviewContainer = _useState2[1];
   var state = editorView.state,
     selection = editorView.state.selection;
-  var _getPluginState = getPluginState(state),
-    hoveredColumns = _getPluginState.hoveredColumns,
-    hoveredRows = _getPluginState.hoveredRows;
+  if (hoveredColumns === undefined || hoveredRows === undefined) {
+    var _getPluginState = getPluginState(state),
+      hoveredColumnsState = _getPluginState.hoveredColumns,
+      hoveredRowsState = _getPluginState.hoveredRows;
+    hoveredColumns = hoveredColumnsState;
+    hoveredRows = hoveredRowsState;
+  }
   var _getDnDPluginState = getDnDPluginState(state),
     _getDnDPluginState$is = _getDnDPluginState.isDragMenuOpen,
     isDragMenuOpen = _getDnDPluginState$is === void 0 ? false : _getDnDPluginState$is;
@@ -234,4 +243,44 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     height: previewHeight
   }), previewContainer));
 };
-export var DragHandle = injectIntl(DragHandleComponent);
+var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedState(_ref5) {
+  var isDragMenuTarget = _ref5.isDragMenuTarget,
+    tableLocalId = _ref5.tableLocalId,
+    direction = _ref5.direction,
+    appearance = _ref5.appearance,
+    indexes = _ref5.indexes,
+    forceDefaultHandle = _ref5.forceDefaultHandle,
+    previewHeight = _ref5.previewHeight,
+    previewWidth = _ref5.previewWidth,
+    onMouseOver = _ref5.onMouseOver,
+    onMouseOut = _ref5.onMouseOut,
+    toggleDragMenu = _ref5.toggleDragMenu,
+    hoveredCell = _ref5.hoveredCell,
+    onClick = _ref5.onClick,
+    editorView = _ref5.editorView,
+    intl = _ref5.intl,
+    api = _ref5.api;
+  var _ref6 = useSharedPluginState(api, ['table']),
+    tableState = _ref6.tableState;
+  return /*#__PURE__*/React.createElement(DragHandleComponent, {
+    isDragMenuTarget: isDragMenuTarget,
+    tableLocalId: tableLocalId,
+    direction: direction,
+    appearance: appearance,
+    indexes: indexes,
+    forceDefaultHandle: forceDefaultHandle,
+    previewWidth: previewWidth,
+    previewHeight: previewHeight,
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut,
+    toggleDragMenu: toggleDragMenu,
+    hoveredCell: hoveredCell,
+    onClick: onClick,
+    editorView: editorView,
+    intl: intl,
+    hoveredColumns: tableState === null || tableState === void 0 ? void 0 : tableState.hoveredColumns,
+    hoveredRows: tableState === null || tableState === void 0 ? void 0 : tableState.hoveredRows
+  });
+};
+export var DragHandle = injectIntl(DragHandleComponent);
+export var DragHandleWithSharedState = injectIntl(DragHandleComponentWithSharedState);

package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -12,7 +12,7 @@ import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { getSelectedColumnIndexes } from '../../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../../types';
-import { DragHandle } from '../../DragHandle';
+import { DragHandle, DragHandleWithSharedState } from '../../DragHandle';
 var getSelectedColumns = function getSelectedColumns(selection) {
   if (selection instanceof CellSelection && selection.isColSelection()) {
     var rect = getSelectionRect(selection);
@@ -34,7 +34,6 @@ export var ColumnControls = function ColumnControls(_ref) {
     isInDanger = _ref.isInDanger,
     rowHeights = _ref.rowHeights,
     colWidths = _ref.colWidths,
-    hasHeaderColumn = _ref.hasHeaderColumn,
     isTableHovered = _ref.isTableHovered,
     tableContainerWidth = _ref.tableContainerWidth,
     isNumberColumnEnabled = _ref.isNumberColumnEnabled,
@@ -167,7 +166,23 @@ export var ColumnControls = function ColumnControls(_ref) {
         position: 'relative'
       },
       "data-testid": "table-floating-column-".concat(isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0], "-drag-handle")
-    }, /*#__PURE__*/React.createElement(DragHandle, {
+    }, fg('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/React.createElement(DragHandleWithSharedState, {
+      isDragMenuTarget: !isHover,
+      direction: "column",
+      tableLocalId: localId || '',
+      indexes: indexes,
+      hoveredCell: hoveredCell,
+      previewWidth: previewWidth,
+      forceDefaultHandle: !isHover,
+      previewHeight: previewHeight,
+      appearance: appearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      toggleDragMenu: toggleDragMenuHandler,
+      editorView: editorView,
+      api: api
+    }) : /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',

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

@@ -2,7 +2,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getColumnsWidths } from '../../pm-plugins/utils/column-controls';
 import { containsHeaderColumn } from '../../pm-plugins/utils/nodes';
 import { getRowHeights } from '../../pm-plugins/utils/row-controls';
@@ -99,7 +98,7 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     isNumberColumnEnabled: isNumberColumnEnabled,
     isDragging: isDragging,
     getScrollOffset: getScrollOffset,
-    api: editorExperiment('platform_editor_table_use_shared_state_hook', true) ? api : undefined
+    api: fg('platform_editor_table_use_shared_state_hook_fg') ? api : undefined
   }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,

package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js

@@ -2,9 +2,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
@@ -13,7 +14,7 @@ import { getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-cont
 import { getSelectedRowIndexes } from '../../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../../types';
 import { dropTargetExtendedWidth } from '../../consts';
-import { DragHandle } from '../../DragHandle';
+import { DragHandle, DragHandleWithSharedState } from '../../DragHandle';
 import RowDropTarget from '../RowDropTarget';
 var getSelectedRows = function getSelectedRows(selection) {
   if (selection instanceof CellSelection && selection.isRowSelection()) {
@@ -25,7 +26,7 @@ var getSelectedRows = function getSelectedRows(selection) {
   }
   return [];
 };
-var DragControlsComponent = function DragControlsComponent(_ref) {
+export var DragControls = function DragControls(_ref) {
   var _tableNode$attrs$loca, _tableNode$attrs;
   var tableRef = _ref.tableRef,
     tableNode = _ref.tableNode,
@@ -39,7 +40,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     hoverRows = _ref.hoverRows,
     selectRow = _ref.selectRow,
     selectRows = _ref.selectRows,
-    updateCellHoverLocation = _ref.updateCellHoverLocation;
+    updateCellHoverLocation = _ref.updateCellHoverLocation,
+    api = _ref.api,
+    selection = _ref.selection;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDragging = _useState2[0],
@@ -49,7 +52,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
   var heights = rowHeights.map(function (height) {
     return "".concat(height - 1, "px");
   }).join(' ');
-  var selectedRowIndexes = getSelectedRows(editorView.state.selection);
+  var selectedRowIndexes = getSelectedRows(selection !== null && selection !== void 0 ? selection : editorView.state.selection);
   var currentNodeLocalId = (_tableNode$attrs$loca = tableNode === null || tableNode === void 0 || (_tableNode$attrs = tableNode.attrs) === null || _tableNode$attrs === void 0 ? void 0 : _tableNode$attrs.localId) !== null && _tableNode$attrs$loca !== void 0 ? _tableNode$attrs$loca : '';
   useEffect(function () {
     return monitorForElements({
@@ -157,7 +160,23 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         pointerEvents: 'none'
       },
       "data-testid": "table-floating-row-".concat(isHover ? rowIndex : selectedRowIndexes[0], "-drag-handle")
-    }, /*#__PURE__*/React.createElement(DragHandle, {
+    }, fg('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/React.createElement(DragHandleWithSharedState, {
+      isDragMenuTarget: !isHover,
+      direction: "row",
+      tableLocalId: currentNodeLocalId,
+      indexes: indexes,
+      forceDefaultHandle: !isHover,
+      previewWidth: tableWidth,
+      previewHeight: previewHeight,
+      appearance: appearance,
+      hoveredCell: hoveredCell,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      toggleDragMenu: toggleDragMenuHandler,
+      editorView: editorView,
+      api: api
+    }) : /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,
@@ -261,4 +280,38 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     }), rowHandles())
   );
 };
-export var DragControls = injectIntl(DragControlsComponent);
+export var DragControlsWithSelection = function DragControlsWithSelection(_ref5) {
+  var editorView = _ref5.editorView,
+    tableRef = _ref5.tableRef,
+    tableNode = _ref5.tableNode,
+    tableWidth = _ref5.tableWidth,
+    tableActive = _ref5.tableActive,
+    hoveredCell = _ref5.hoveredCell,
+    isInDanger = _ref5.isInDanger,
+    isTableHovered = _ref5.isTableHovered,
+    isResizing = _ref5.isResizing,
+    hoverRows = _ref5.hoverRows,
+    selectRow = _ref5.selectRow,
+    selectRows = _ref5.selectRows,
+    updateCellHoverLocation = _ref5.updateCellHoverLocation,
+    api = _ref5.api;
+  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return /*#__PURE__*/React.createElement(DragControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    tableNode: tableNode,
+    tableWidth: tableWidth,
+    tableActive: tableActive,
+    hoveredCell: hoveredCell,
+    isInDanger: isInDanger,
+    isTableHovered: isTableHovered,
+    isResizing: isResizing,
+    hoverRows: hoverRows,
+    selectRow: selectRow,
+    selectRows: selectRows,
+    updateCellHoverLocation: updateCellHoverLocation,
+    api: api,
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  });
+};