@atlaskit/editor-plugin-table 7.6.2 → 7.6.4

package/dist/es2019/nodeviews/table.js

@@ -6,6 +6,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';
@@ -15,6 +16,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';
 const tableAttributes = node => {
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
@@ -92,6 +94,22 @@ export default class TableView extends ReactNodeView {
     }
   }
   render(props, forwardRef) {
+    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
@@ -236,13 +254,15 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     isTableScalingEnabled
   } = getPluginState(view.state);
   const {
-    allowColumnResizing
+    allowColumnResizing,
+    allowControls
   } = getPluginConfig(pluginConfig);
   const hasIntlContext = true;
   return new TableView({
     node,
     view,
     allowColumnResizing,
+    allowControls,
     portalProviderAPI,
     eventDispatcher,
     getPos: getPos,

package/dist/es2019/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';
@@ -36,6 +36,9 @@ import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { createTableWithWidth, isLayoutSupported } from './utils';
 const defaultGetEditorFeatureFlags = () => ({});
+
+// 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`.
@@ -59,10 +62,30 @@ const tablesPlugin = ({
     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: () => {
+    getSharedState: editorState => {
+      if (!editorState) {
+        return undefined;
+      }
+      const tablePluginState = getPluginState(editorState);
+      const tableResizingPluginState = getFlexiResizingPlugin(editorState);
+      const 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,
+        widthToWidest: tablePluginState.widthToWidest
       };
     },
     actions: {

package/dist/es2019/toolbar.js

@@ -14,7 +14,6 @@ import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType,
 import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
@@ -54,7 +53,7 @@ export const getToolbarMenuConfig = (config, state, {
     disabled: !state.canCollapseTable,
     hidden: !config.allowCollapse
   }];
-  if (state.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling')) {
+  if (state.isDragAndDropEnabled) {
     return {
       id: 'editor.table.tableOptions',
       type: 'dropdown',
@@ -287,6 +286,7 @@ export const getClosestSelectionOrTableRect = state => {
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
 };
 export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) => config => (state, intl) => {
+  var _tableObject$node$att, _tableObject$node, _tableObject$node$att2;
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
@@ -298,7 +298,8 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     isTableScalingEnabled,
     widthToWidest
   } = pluginState;
-  if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+  const currentTableNodeLocalId = (_tableObject$node$att = tableObject === null || tableObject === void 0 ? void 0 : (_tableObject$node = tableObject.node) === null || _tableObject$node === void 0 ? void 0 : (_tableObject$node$att2 = _tableObject$node.attrs) === null || _tableObject$node$att2 === void 0 ? void 0 : _tableObject$node$att2.localId) !== null && _tableObject$node$att !== void 0 ? _tableObject$node$att : '';
+  if (isTableScalingEnabled && isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
     const {
       stickyScrollbar
     } = getEditorFeatureFlags();
@@ -351,7 +352,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     let cellItems;
     cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
     let columnSettingsItems;
-    columnSettingsItems = pluginState.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled) : [];
+    columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled) : [];
     const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
     // Check if we need to show confirm dialog for delete button

package/dist/es2019/types.js

@@ -6,6 +6,9 @@ export const 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/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -70,11 +70,11 @@ export class ContextualMenu extends Component {
         const node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
         return {
-          content: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? formatMessage(messages.backgroundColor) : formatMessage(messages.cellBackground),
+          content: isDragAndDropEnabled ? formatMessage(messages.backgroundColor) : formatMessage(messages.cellBackground),
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ? jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(EditorBackgroundColorIcon, {
             label: formatMessage(messages.backgroundColor),
@@ -84,7 +84,7 @@ export class ContextualMenu extends Component {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, jsx("div", {
             css: cellColourPreviewStyles(background),
-            className: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
+            className: isDragAndDropEnabled ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && jsx("div", {
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: this.handleSubMenuRef
@@ -122,7 +122,7 @@ export class ContextualMenu extends Component {
             name: 'merge'
           },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ? jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(MergeCellsIcon, null)) : undefined
         }, {
@@ -131,7 +131,7 @@ export class ContextualMenu extends Component {
             name: 'split'
           },
           isDisabled: !splitCell(state),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ? jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(SplitCellIcon, null)) : undefined
         }];
@@ -149,14 +149,14 @@ export class ContextualMenu extends Component {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
       return {
-        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addColumnRight : messages.insertColumn),
+        content: formatMessage(isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn),
         value: {
           name: 'insert_column'
         },
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(AddColRightIcon, null)) : undefined
       };
@@ -172,14 +172,14 @@ export class ContextualMenu extends Component {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
       return {
-        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addRowBelow : messages.insertRow),
+        content: formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow),
         value: {
           name: 'insert_row'
         },
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(AddRowBelowIcon, null)) : undefined
       };
@@ -213,7 +213,7 @@ export class ContextualMenu extends Component {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(CrossCircleIcon, {
           label: formatMessage(messages.clearCells, {
@@ -245,7 +245,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeColumns, {
@@ -277,7 +277,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeRows, {
@@ -301,7 +301,7 @@ export class ContextualMenu extends Component {
           allowDistributeColumns
         }
       } = getPluginState(editorView.state);
-      if (allowDistributeColumns && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowDistributeColumns && !isDragAndDropEnabled) {
         var _newResizeState$chang;
         const {
           isTableScalingEnabled = false
@@ -329,7 +329,7 @@ export class ContextualMenu extends Component {
       const {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
-      if (allowColumnSorting && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowColumnSorting && !isDragAndDropEnabled) {
         const hasMergedCellsInTable = getMergedCellsPositions(editorView.state.tr).length > 0;
         const warning = hasMergedCellsInTable ? {
           tooltipDescription: formatMessage(messages.canNotSortTable),
@@ -568,7 +568,7 @@ export class ContextualMenu extends Component {
     const {
       isDragAndDropEnabled
     } = getPluginState(editorView.state);
-    const items = isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
+    const items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
     return jsx("div", {
       "data-testid": "table-cell-contextual-menu",
       onMouseLeave: this.closeSubmenu
@@ -591,7 +591,7 @@ export class ContextualMenu extends Component {
       fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
       boundariesElement: boundariesElement,
       offset: offset,
-      section: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && getBooleanFF('platform.editor.menu.group-items') ? {
+      section: isDragAndDropEnabled && getBooleanFF('platform.editor.menu.group-items') ? {
         hasSeparator: true
       } : undefined
     }));

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

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

package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js

@@ -5,7 +5,6 @@ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem }
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth } from '../consts';
 const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export const DropdownMenu = ({
@@ -106,37 +105,31 @@ export const DropdownMenu = ({
       // The logic below normalises the index value based on the number
       // of menu items with 2 focusable elements, and adjusts the index to ensure
       // the correct menu item is sent in onItemActivated callback
-      if (getBooleanFF('platform.editor.table.new-cell-context-menu-styling')) {
-        const keys = ['row_numbers', 'header_row', 'header_column'];
-        let doubleItemCount = 0;
-        const firstIndex = results.findIndex(value => keys.includes(value.key));
-        if (firstIndex === -1 || index <= firstIndex) {
+      const keys = ['row_numbers', 'header_row', 'header_column'];
+      let doubleItemCount = 0;
+      const firstIndex = results.findIndex(value => keys.includes(value.key));
+      if (firstIndex === -1 || index <= firstIndex) {
+        onItemActivated && onItemActivated({
+          item: results[index]
+        });
+        return;
+      }
+      for (let i = firstIndex; i < results.length; i += 1) {
+        if (keys.includes(results[i].key)) {
+          doubleItemCount += 1;
+        }
+        if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
           onItemActivated && onItemActivated({
-            item: results[index]
+            item: results[i]
           });
           return;
         }
-        for (let i = firstIndex; i < results.length; i += 1) {
-          if (keys.includes(results[i].key)) {
-            doubleItemCount += 1;
-          }
-          if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
-            onItemActivated && onItemActivated({
-              item: results[i]
-            });
-            return;
-          }
-          if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
-            onItemActivated && onItemActivated({
-              item: results[i]
-            });
-            return;
-          }
+        if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+          onItemActivated && onItemActivated({
+            item: results[i]
+          });
+          return;
         }
-      } else {
-        onItemActivated && onItemActivated({
-          item: results[index]
-        });
       }
     }
   }, innerMenu())));

package/dist/es2019/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';
@@ -35,10 +36,14 @@ export const ColumnControls = ({
   tableContainerWidth,
   isNumberColumnEnabled,
   isDragging,
-  getScrollOffset
+  getScrollOffset,
+  api
 }) => {
   var _colWidths$map$join, _rowHeights$;
   const columnControlsRef = useRef(null);
+  const {
+    selectionState
+  } = useSharedPluginState(api, ['selection']);
   const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(width =>
   // when there is sticky header, a `margin-right: -1px` applied to `tr.sticky th` so it causes colWidths to be 1px wider
   // we need to reduce the width by 1px to avoid misalignment of column controls.
@@ -46,7 +51,7 @@ export const ColumnControls = ({
   // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
   const columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   const colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
-  const selectedColIndexes = getSelectedColumns(editorView.state.selection);
+  const selectedColIndexes = getSelectedColumns((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) || editorView.state.selection);
   const firstRow = tableRef.querySelector('tr');
   const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   const marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;

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

@@ -1,4 +1,5 @@
 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';
@@ -19,7 +20,8 @@ export const TableFloatingColumnControls = ({
   tableContainerWidth,
   isNumberColumnEnabled,
   getScrollOffset,
-  tableWrapperHeight
+  tableWrapperHeight,
+  api
 }) => {
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef(null);
@@ -86,7 +88,8 @@ export const TableFloatingColumnControls = ({
     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/es2019/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';
@@ -54,4 +55,58 @@ const DragCornerControlsComponent = ({
     className: ClassName.DRAG_CORNER_BUTTON_INNER
   }));
 };
+const DragCornerControlsComponentWithSelection = ({
+  editorView,
+  isInDanger,
+  isResizing,
+  intl: {
+    formatMessage
+  },
+  api
+}) => {
+  const {
+    selectionState
+  } = useSharedPluginState(api, ['selection']);
+  const handleOnClick = () => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+  };
+  const handleMouseOut = () => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    clearHoverSelection()(state, dispatch);
+  };
+  const isActive = useMemo(() => {
+    if (!(selectionState !== null && selectionState !== void 0 && selectionState.selection)) {
+      return;
+    }
+    const 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 const DragCornerControlsWithSelection = injectIntl(DragCornerControlsComponentWithSelection);
 export const DragCornerControls = injectIntl(DragCornerControlsComponent);

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

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

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { CornerControls } from './CornerControls';
+import { RowControls } from './RowControls';
+export const FloatingControlsWithSelection = ({
+  editorView,
+  tableRef,
+  isInDanger,
+  isResizing,
+  isHeaderRowEnabled,
+  isHeaderColumnEnabled,
+  hoveredRows,
+  stickyTop,
+  hoverRows,
+  selectRow,
+  tableActive,
+  api
+}) => {
+  const {
+    selectionState
+  } = useSharedPluginState(api, ['selection']);
+  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/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -26,7 +26,8 @@ class RowControlsComponent extends Component {
       isResizing,
       intl: {
         formatMessage
-      }
+      },
+      selection: selectionState
     } = this.props;
     if (!tableRef) {
       return null;
@@ -54,7 +55,7 @@ class RowControlsComponent extends Component {
       }
       const thisRowSticky = this.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
       return /*#__PURE__*/React.createElement("div", {
-        className: `${ClassName.ROW_CONTROLS_BUTTON_WRAP} ${getRowClassNames(startIndex, selection, hoveredRows, isInDanger, isResizing)} ${thisRowSticky ? 'sticky' : ''}`,
+        className: `${ClassName.ROW_CONTROLS_BUTTON_WRAP} ${getRowClassNames(startIndex, selectionState || selection, hoveredRows, isInDanger, isResizing)} ${thisRowSticky ? 'sticky' : ''}`,
         key: startIndex,
         style: {
           height: height,

package/dist/es2019/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 const TableFloatingControls = ({
@@ -21,7 +23,8 @@ export const TableFloatingControls = ({
   isDragAndDropEnabled,
   hoveredCell,
   isTableHovered,
-  tableWrapperWidth
+  tableWrapperWidth,
+  api
 }) => {
   const _selectRow = useCallback((row, expand) => {
     const {
@@ -89,7 +92,13 @@ export const TableFloatingControls = ({
     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,
@@ -108,7 +117,20 @@ export const TableFloatingControls = ({
     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,