@atlaskit/editor-plugin-table 7.6.2 → 7.6.3

package/dist/esm/nodeviews/TableComponent.js

@@ -498,9 +498,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         options = _this$props10.options,
         isTableScalingEnabled = _this$props10.isTableScalingEnabled,
         getPos = _this$props10.getPos;
-      var _getPluginState = getPluginState(view.state),
-        isInDanger = _getPluginState.isInDanger;
+      var isInDanger = this.props.isInDanger;
       var table = findTable(view.state.selection);
+      if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+        var pluginState = getPluginState(view.state);
+        isInDanger = pluginState.isInDanger;
+      }
       if (isTableScalingEnabled) {
         this.handleColgroupUpdates();
       }
@@ -602,16 +605,24 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isDragAndDropEnabled = _this$props11.isDragAndDropEnabled,
         getEditorFeatureFlags = _this$props11.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props11.isTableScalingEnabled;
+      var _this$props12 = this.props,
+        isInDanger = _this$props12.isInDanger,
+        hoveredRows = _this$props12.hoveredRows,
+        hoveredCell = _this$props12.hoveredCell,
+        isTableHovered = _this$props12.isTableHovered,
+        isWholeTableInDanger = _this$props12.isWholeTableInDanger;
       var _this$state3 = this.state,
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
       var node = getNode();
-      // doesn't work well with WithPluginState
-      var _getPluginState2 = getPluginState(view.state),
-        isInDanger = _getPluginState2.isInDanger,
-        hoveredRows = _getPluginState2.hoveredRows,
-        hoveredCell = _getPluginState2.hoveredCell,
-        isTableHovered = _getPluginState2.isTableHovered;
+      if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+        var pluginState = getPluginState(view.state);
+        isInDanger = pluginState.isInDanger;
+        hoveredRows = pluginState.hoveredRows;
+        hoveredCell = pluginState.hoveredCell;
+        isTableHovered = pluginState.isTableHovered;
+        isWholeTableInDanger = pluginState.isWholeTableInDanger;
+      }
       var tableRef = this.table || undefined;
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
       var hasHeaderRow = containsHeaderRow(node);
@@ -636,7 +647,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         selection: view.state.selection,
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader,
-        tableWrapperWidth: this.state.tableWrapperWidth
+        tableWrapperWidth: this.state.tableWrapperWidth,
+        api: pluginInjectionApi
       });
       var tableContainerWidth = getTableContainerWidth(node);
       var colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
@@ -663,7 +675,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           var _this4$wrapper;
           return ((_this4$wrapper = _this4.wrapper) === null || _this4$wrapper === void 0 ? void 0 : _this4$wrapper.scrollLeft) || 0;
         },
-        tableWrapperHeight: this.state.tableWrapperHeight
+        tableWrapperHeight: this.state.tableWrapperHeight,
+        api: pluginInjectionApi
       }) : null;
       var shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
       var shadowStyle = memoizeOne(function (visible) {
@@ -700,7 +713,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableWrapperHeight: this.state.tableWrapperHeight,
         isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
         isResizing: isResizing,
-        isTableScalingEnabled: isTableScalingEnabled
+        isTableScalingEnabled: isTableScalingEnabled,
+        isWholeTableInDanger: isWholeTableInDanger
       }, /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { findTable } from '@atlaskit/editor-tables';
+import TableComponent from './TableComponent';
+/**
+ * Use useSharedPluginState to control re-renders from plugin dependencies
+ */
+export var TableComponentWithSharedState = function TableComponentWithSharedState(_ref) {
+  var view = _ref.view,
+    options = _ref.options,
+    getNode = _ref.getNode,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    api = _ref.api,
+    getEditorFeatureFlags = _ref.getEditorFeatureFlags,
+    eventDispatcher = _ref.eventDispatcher,
+    allowColumnResizing = _ref.allowColumnResizing,
+    allowControls = _ref.allowControls,
+    getPos = _ref.getPos,
+    forwardRef = _ref.forwardRef;
+  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media']),
+    widthState = _useSharedPluginState.widthState,
+    tableState = _useSharedPluginState.tableState,
+    mediaState = _useSharedPluginState.mediaState;
+  if (!tableState) {
+    return null;
+  }
+  var _ref2 = tableState,
+    isTableResizing = _ref2.isTableResizing,
+    isHeaderColumnEnabled = _ref2.isHeaderColumnEnabled,
+    isHeaderRowEnabled = _ref2.isHeaderRowEnabled,
+    ordering = _ref2.ordering,
+    isResizing = _ref2.isResizing,
+    isInDanger = _ref2.isInDanger,
+    hoveredCell = _ref2.hoveredCell,
+    hoveredRows = _ref2.hoveredRows,
+    isTableHovered = _ref2.isTableHovered,
+    isWholeTableInDanger = _ref2.isWholeTableInDanger;
+
+  /**
+   *  ED-19810
+   *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
+   *  directly to confluence since this bug is now in production.
+   */
+  var currentTablePos;
+  try {
+    currentTablePos = getPos ? getPos() : undefined;
+  } catch (e) {
+    currentTablePos = undefined;
+  }
+  var selectedTable = findTable(view.state.selection);
+  var tablePos = selectedTable && selectedTable.start - 1;
+  var tableActive = typeof currentTablePos === 'number' && typeof tablePos === 'number' && currentTablePos === tablePos && !isTableResizing;
+  return /*#__PURE__*/React.createElement(TableComponent, {
+    view: view,
+    allowColumnResizing: allowColumnResizing,
+    eventDispatcher: eventDispatcher,
+    getPos: getPos,
+    isMediaFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
+    options: options,
+    allowControls: !!allowControls,
+    isHeaderRowEnabled: isHeaderRowEnabled,
+    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
+    isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+    tableActive: tableActive,
+    ordering: ordering,
+    isResizing: isResizing,
+    getNode: getNode,
+    containerWidth: widthState,
+    contentDOM: forwardRef,
+    getEditorFeatureFlags: getEditorFeatureFlags,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    pluginInjectionApi: api,
+    isInDanger: !!isInDanger,
+    hoveredRows: hoveredRows,
+    hoveredCell: hoveredCell,
+    isTableHovered: isTableHovered,
+    isWholeTableInDanger: isWholeTableInDanger
+  });
+};

package/dist/esm/nodeviews/TableContainer.js

@@ -46,7 +46,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     isResizing = _ref2.isResizing,
     pluginInjectionApi = _ref2.pluginInjectionApi,
     isTableScalingEnabled = _ref2.isTableScalingEnabled,
-    tableWrapperHeight = _ref2.tableWrapperHeight;
+    tableWrapperHeight = _ref2.tableWrapperHeight,
+    isWholeTableInDanger = _ref2.isWholeTableInDanger;
   var containerRef = useRef(null);
   var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   var _useState = useState(false),
@@ -125,7 +126,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     displayGuideline: displayGuideline,
     attachAnalyticsEvent: attachAnalyticsEvent,
     displayGapCursor: displayGapCursor,
-    isTableScalingEnabled: isTableScalingEnabled
+    isTableScalingEnabled: isTableScalingEnabled,
+    isWholeTableInDanger: isWholeTableInDanger
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
@@ -166,7 +168,8 @@ export var TableContainer = function TableContainer(_ref3) {
     tableWrapperHeight = _ref3.tableWrapperHeight,
     isResizing = _ref3.isResizing,
     pluginInjectionApi = _ref3.pluginInjectionApi,
-    isTableScalingEnabled = _ref3.isTableScalingEnabled;
+    isTableScalingEnabled = _ref3.isTableScalingEnabled,
+    isWholeTableInDanger = _ref3.isWholeTableInDanger;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
       className: className,
@@ -178,7 +181,8 @@ export var TableContainer = function TableContainer(_ref3) {
       tableWrapperHeight: tableWrapperHeight,
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
-      isTableScalingEnabled: isTableScalingEnabled
+      isTableScalingEnabled: isTableScalingEnabled,
+      isWholeTableInDanger: isWholeTableInDanger
     }, children);
   }
   var tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';

package/dist/esm/nodeviews/TableResizer.js

@@ -90,7 +90,8 @@ export var TableResizer = function TableResizer(_ref) {
     displayGuideline = _ref.displayGuideline,
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
     displayGapCursor = _ref.displayGapCursor,
-    isTableScalingEnabled = _ref.isTableScalingEnabled;
+    isTableScalingEnabled = _ref.isTableScalingEnabled,
+    isWholeTableInDanger = _ref.isWholeTableInDanger;
   var currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = useRef(false);
@@ -126,8 +127,6 @@ export var TableResizer = function TableResizer(_ref) {
   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();
   var resizerMinWidth = getResizerMinWidth(node);
   var handleSize = getResizerHandleHeight(tableRef);
-  var _getPluginState = getPluginState(editorView.state),
-    isWholeTableInDanger = _getPluginState.isWholeTableInDanger;
   var _useMeasureFramerate = useMeasureFramerate(),
     startMeasure = _useMeasureFramerate.startMeasure,
     endMeasure = _useMeasureFramerate.endMeasure,
@@ -223,8 +222,8 @@ export var TableResizer = function TableResizer(_ref) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
     var pos = getPos();
-    var _getPluginState2 = getPluginState(editorView.state),
-      widthToWidest = _getPluginState2.widthToWidest;
+    var _getPluginState = getPluginState(editorView.state),
+      widthToWidest = _getPluginState.widthToWidest;
     newWidth = widthToWidest ? akEditorFullWidthLayoutWidth : newWidth;
     var tr = state.tr.setMeta(tableWidthPluginKey, {
       resizing: false

package/dist/esm/nodeviews/table.js

@@ -17,6 +17,7 @@ import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -26,6 +27,7 @@ import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { isTableNested } from '../utils';
 import TableComponent from './TableComponent';
+import { TableComponentWithSharedState } from './TableComponentWithSharedState';
 var tableAttributes = function tableAttributes(node) {
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
@@ -116,6 +118,22 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render(props, forwardRef) {
       var _this3 = this;
+      if (getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+        return /*#__PURE__*/React.createElement(TableComponentWithSharedState, {
+          forwardRef: forwardRef,
+          getNode: this.getNode,
+          view: props.view,
+          options: props.options,
+          eventDispatcher: props.eventDispatcher,
+          api: props.pluginInjectionApi,
+          allowColumnResizing: props.allowColumnResizing,
+          allowControls: props.allowControls,
+          getPos: props.getPos,
+          getEditorFeatureFlags: props.getEditorFeatureFlags,
+          dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
+        });
+      }
+
       // TODO: ED-15663
       // Please, do not copy or use this kind of code below
       // @ts-ignore
@@ -262,12 +280,14 @@ export var createTableView = function createTableView(node, view, getPos, portal
     isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled,
     isTableScalingEnabled = _getPluginState2.isTableScalingEnabled;
   var _getPluginConfig = getPluginConfig(pluginConfig),
-    allowColumnResizing = _getPluginConfig.allowColumnResizing;
+    allowColumnResizing = _getPluginConfig.allowColumnResizing,
+    allowControls = _getPluginConfig.allowControls;
   var hasIntlContext = true;
   return new TableView({
     node: node,
     view: view,
     allowColumnResizing: allowColumnResizing,
+    allowControls: allowControls,
     portalProviderAPI: portalProviderAPI,
     eventDispatcher: eventDispatcher,
     getPos: getPos,

package/dist/esm/plugin.js

@@ -24,7 +24,7 @@ import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPl
 import { createPlugin as createStickyHeadersPlugin, findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from './pm-plugins/sticky-headers';
 import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins/table-analytics';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
-import { createPlugin as createFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import { createPlugin as createFlexiResizingPlugin, getPluginState as getFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { getToolbarConfig } from './toolbar';
@@ -38,6 +38,9 @@ import { createTableWithWidth, isLayoutSupported } from './utils';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
+
+// TODO: duplicating type instead of importing media plugin causing a circular dependency
+
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
@@ -60,10 +63,29 @@ var tablesPlugin = function tablesPlugin(_ref) {
     name: 'table',
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
     // to most up to date values - passing to createPluginState will not re-initialise the state
-    getSharedState: function getSharedState() {
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      var tablePluginState = getPluginState(editorState);
+      var tableResizingPluginState = getFlexiResizingPlugin(editorState);
+      var tableWidthResizingPluginState = tableWidthPluginKey.getState(editorState);
       return {
         isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
-        wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled)
+        wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
+        isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
+        isHeaderColumnEnabled: tablePluginState.isHeaderColumnEnabled,
+        ordering: tablePluginState.ordering,
+        isResizing: !!(tableResizingPluginState !== null && tableResizingPluginState !== void 0 && tableResizingPluginState.dragging || tableWidthResizingPluginState !== null && tableWidthResizingPluginState !== void 0 && tableWidthResizingPluginState.resizing),
+        isTableResizing: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.resizing,
+        isInDanger: tablePluginState.isInDanger,
+        hoveredRows: tablePluginState.hoveredRows,
+        hoveredCell: tablePluginState.hoveredCell,
+        isTableHovered: tablePluginState.isTableHovered,
+        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
       };
     },
     actions: {

package/dist/esm/types.js

@@ -9,6 +9,9 @@ export var RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
  * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6877 Internal documentation for deprecation (no external access)}
  **/
 
+// override getPluginState but do not expose publicly as this type is experimental and will change
+// in the future
+
 /*
  * This type represents the start and end from a cell in a column,
  * for example, on this table the cell C1 will have

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

@@ -1,6 +1,7 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 import React, { useCallback, useMemo, useRef } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
@@ -36,8 +37,11 @@ export var ColumnControls = function ColumnControls(_ref) {
     tableContainerWidth = _ref.tableContainerWidth,
     isNumberColumnEnabled = _ref.isNumberColumnEnabled,
     isDragging = _ref.isDragging,
-    getScrollOffset = _ref.getScrollOffset;
+    getScrollOffset = _ref.getScrollOffset,
+    api = _ref.api;
   var columnControlsRef = useRef(null);
+  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return (
       // when there is sticky header, a `margin-right: -1px` applied to `tr.sticky th` so it causes colWidths to be 1px wider
@@ -48,7 +52,7 @@ export var ColumnControls = function ColumnControls(_ref) {
   // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
   var columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
-  var selectedColIndexes = getSelectedColumns(editorView.state.selection);
+  var selectedColIndexes = getSelectedColumns((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) || editorView.state.selection);
   var firstRow = tableRef.querySelector('tr');
   var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   var marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;

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

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { TableCssClassName as ClassName } from '../../types';
 import { containsHeaderColumn, getColumnsWidths, getRowHeights } from '../../utils';
@@ -20,7 +21,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     tableContainerWidth = _ref.tableContainerWidth,
     isNumberColumnEnabled = _ref.isNumberColumnEnabled,
     getScrollOffset = _ref.getScrollOffset,
-    tableWrapperHeight = _ref.tableWrapperHeight;
+    tableWrapperHeight = _ref.tableWrapperHeight,
+    api = _ref.api;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDragging = _useState2[0],
@@ -87,7 +89,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     tableContainerWidth: tableContainerWidth,
     isNumberColumnEnabled: isNumberColumnEnabled,
     isDragging: isDragging,
-    getScrollOffset: getScrollOffset
+    getScrollOffset: getScrollOffset,
+    api: getBooleanFF('platform.editor.table.use-shared-state-hook') ? 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/CornerControls/DragCornerControls.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection } from '../../../commands';
@@ -45,4 +46,50 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
     className: ClassName.DRAG_CORNER_BUTTON_INNER
   }));
 };
+var DragCornerControlsComponentWithSelection = function DragCornerControlsComponentWithSelection(_ref2) {
+  var editorView = _ref2.editorView,
+    isInDanger = _ref2.isInDanger,
+    isResizing = _ref2.isResizing,
+    formatMessage = _ref2.intl.formatMessage,
+    api = _ref2.api;
+  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  var handleOnClick = function handleOnClick() {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+  };
+  var handleMouseOut = function handleMouseOut() {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    clearHoverSelection()(state, dispatch);
+  };
+  var isActive = useMemo(function () {
+    if (!(selectionState !== null && selectionState !== void 0 && selectionState.selection)) {
+      return;
+    }
+    var table = findTable(selectionState.selection);
+    if (!table) {
+      return false;
+    }
+    return isTableSelected(selectionState.selection);
+  }, [selectionState]);
+  if (isResizing) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("button", {
+    className: classnames(ClassName.DRAG_CORNER_BUTTON, {
+      active: isActive,
+      danger: isActive && isInDanger
+    }),
+    "aria-label": formatMessage(messages.cornerControl),
+    type: "button",
+    onClick: handleOnClick,
+    onMouseOut: handleMouseOut,
+    contentEditable: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ClassName.DRAG_CORNER_BUTTON_INNER
+  }));
+};
+export var DragCornerControlsWithSelection = injectIntl(DragCornerControlsComponentWithSelection);
 export var DragCornerControls = injectIntl(DragCornerControlsComponent);

package/dist/esm/ui/TableFloatingControls/CornerControls/index.js

@@ -1,2 +1,2 @@
 export { CornerControls } from './ClassicCornerControls';
-export { DragCornerControls } from './DragCornerControls';
+export { DragCornerControls, DragCornerControlsWithSelection } from './DragCornerControls';

package/dist/esm/ui/TableFloatingControls/FloatingControlsWithSelection.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { CornerControls } from './CornerControls';
+import { RowControls } from './RowControls';
+export var FloatingControlsWithSelection = function FloatingControlsWithSelection(_ref) {
+  var editorView = _ref.editorView,
+    tableRef = _ref.tableRef,
+    isInDanger = _ref.isInDanger,
+    isResizing = _ref.isResizing,
+    isHeaderRowEnabled = _ref.isHeaderRowEnabled,
+    isHeaderColumnEnabled = _ref.isHeaderColumnEnabled,
+    hoveredRows = _ref.hoveredRows,
+    stickyTop = _ref.stickyTop,
+    hoverRows = _ref.hoverRows,
+    selectRow = _ref.selectRow,
+    tableActive = _ref.tableActive,
+    api = _ref.api;
+  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    isHeaderRowEnabled: isHeaderRowEnabled,
+    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    hoveredRows: hoveredRows,
+    stickyTop: tableActive ? stickyTop : undefined
+  }), /*#__PURE__*/React.createElement(RowControls, {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
+    editorView: editorView,
+    tableRef: tableRef,
+    hoverRows: hoverRows,
+    hoveredRows: hoveredRows,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    selectRow: selectRow,
+    stickyTop: tableActive ? stickyTop : undefined
+  }));
+};

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

@@ -42,7 +42,8 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
         hoveredRows = _this$props.hoveredRows,
         isInDanger = _this$props.isInDanger,
         isResizing = _this$props.isResizing,
-        formatMessage = _this$props.intl.formatMessage;
+        formatMessage = _this$props.intl.formatMessage,
+        selectionState = _this$props.selection;
       if (!tableRef) {
         return null;
       }
@@ -66,7 +67,7 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
         }
         var thisRowSticky = _this2.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
         return /*#__PURE__*/React.createElement("div", {
-          className: "".concat(ClassName.ROW_CONTROLS_BUTTON_WRAP, " ").concat(getRowClassNames(startIndex, selection, hoveredRows, isInDanger, isResizing), " ").concat(thisRowSticky ? 'sticky' : ''),
+          className: "".concat(ClassName.ROW_CONTROLS_BUTTON_WRAP, " ").concat(getRowClassNames(startIndex, selectionState || selection, hoveredRows, isInDanger, isResizing), " ").concat(thisRowSticky ? 'sticky' : ''),
           key: startIndex,
           style: {
             height: height,

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

@@ -1,8 +1,10 @@
 import React, { useCallback } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
-import { CornerControls, DragCornerControls } from './CornerControls';
+import { CornerControls, DragCornerControls, DragCornerControlsWithSelection } from './CornerControls';
+import { FloatingControlsWithSelection } from './FloatingControlsWithSelection';
 import NumberColumn from './NumberColumn';
 import { DragControls, RowControls } from './RowControls';
 export var TableFloatingControls = function TableFloatingControls(_ref) {
@@ -21,7 +23,8 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
     isDragAndDropEnabled = _ref.isDragAndDropEnabled,
     hoveredCell = _ref.hoveredCell,
     isTableHovered = _ref.isTableHovered,
-    tableWrapperWidth = _ref.tableWrapperWidth;
+    tableWrapperWidth = _ref.tableWrapperWidth,
+    api = _ref.api;
   var _selectRow = useCallback(function (row, expand) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
@@ -82,7 +85,13 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
     updateCellHoverLocation: updateCellHoverLocation,
     stickyTop: stickyTop,
     isDragAndDropEnabled: isDragAndDropEnabled
-  }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragCornerControls, {
+  }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, getBooleanFF('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    api: api
+  }) : /*#__PURE__*/React.createElement(DragCornerControls, {
     editorView: editorView,
     tableRef: tableRef,
     isInDanger: isInDanger,
@@ -101,7 +110,20 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
     selectRow: _selectRow,
     selectRows: _selectRows,
     updateCellHoverLocation: updateCellHoverLocation
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
+  })) : getBooleanFF('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(FloatingControlsWithSelection, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    isHeaderRowEnabled: isHeaderRowEnabled,
+    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    hoveredRows: hoveredRows,
+    stickyTop: tableActive ? stickyTop : undefined,
+    tableActive: tableActive,
+    hoverRows: _hoverRows,
+    selectRow: _selectRow,
+    api: api
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
     editorView: editorView,
     tableRef: tableRef,
     isInDanger: isInDanger,