@atlaskit/editor-plugin-table 7.6.2 → 7.6.4

package/src/ui/TableFloatingControls/FloatingControlsWithSelection.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+import type { TablePlugin } from '../../plugin';
+
+import { CornerControls } from './CornerControls';
+import { RowControls } from './RowControls';
+
+type FloatingControlsWithSelectionProps = {
+  editorView: EditorView;
+  tableRef: HTMLTableElement;
+  isInDanger?: boolean;
+  isResizing?: boolean;
+  isHeaderRowEnabled?: boolean;
+  isHeaderColumnEnabled?: boolean;
+  hoveredRows?: number[];
+  stickyTop?: number;
+  hoverRows: (rows: number[]) => void;
+  selectRow: (row: number, expand: boolean) => void;
+  tableActive: boolean;
+  api?: ExtractInjectionAPI<TablePlugin>;
+};
+
+export const FloatingControlsWithSelection = ({
+  editorView,
+  tableRef,
+  isInDanger,
+  isResizing,
+  isHeaderRowEnabled,
+  isHeaderColumnEnabled,
+  hoveredRows,
+  stickyTop,
+  hoverRows,
+  selectRow,
+  tableActive,
+  api,
+}: FloatingControlsWithSelectionProps) => {
+  const { selectionState } = useSharedPluginState(api, ['selection']);
+
+  return (
+    <>
+      <CornerControls
+        editorView={editorView}
+        tableRef={tableRef}
+        isInDanger={isInDanger}
+        isResizing={isResizing}
+        isHeaderRowEnabled={isHeaderRowEnabled}
+        isHeaderColumnEnabled={isHeaderColumnEnabled}
+        hoveredRows={hoveredRows}
+        stickyTop={tableActive ? stickyTop : undefined}
+      />
+      <RowControls
+        selection={selectionState?.selection}
+        editorView={editorView}
+        tableRef={tableRef}
+        hoverRows={hoverRows}
+        hoveredRows={hoveredRows}
+        isInDanger={isInDanger}
+        isResizing={isResizing}
+        selectRow={selectRow}
+        stickyTop={tableActive ? stickyTop : undefined}
+      />
+    </>
+  );
+};

package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx

@@ -4,6 +4,7 @@ import type { WrappedComponentProps } from 'react-intl-next';
 import { injectIntl } from 'react-intl-next';
 
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import { clearHoverSelection } from '../../../commands';
@@ -22,6 +23,7 @@ export interface Props {
   isResizing?: boolean;
   insertRowButtonIndex?: number;
   stickyTop?: number;
+  selection?: Selection;
 }
 
 class RowControlsComponent extends Component<Props & WrappedComponentProps> {
@@ -33,6 +35,7 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
       isInDanger,
       isResizing,
       intl: { formatMessage },
+      selection: selectionState,
     } = this.props;
     if (!tableRef) {
       return null;
@@ -72,7 +75,7 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
                     ClassName.ROW_CONTROLS_BUTTON_WRAP
                   } ${getRowClassNames(
                     startIndex,
-                    selection,
+                    selectionState || selection,
                     hoveredRows,
                     isInDanger,
                     isResizing,

package/src/ui/TableFloatingControls/index.tsx

@@ -1,17 +1,25 @@
 import React, { useCallback } from 'react';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { browser } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
+import type { TablePlugin } from '../../plugin';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 import type { CellHoverMeta } 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';
 
@@ -55,7 +63,8 @@ export const TableFloatingControls = ({
   hoveredCell,
   isTableHovered,
   tableWrapperWidth,
-}: TableFloatingControlsProps) => {
+  api,
+}: TableFloatingControlsProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
   const _selectRow = useCallback(
     (row: number, expand: boolean) => {
       const { state, dispatch } = editorView;
@@ -141,12 +150,22 @@ export const TableFloatingControls = ({
           <>
             {isDragAndDropEnabled ? (
               <>
-                <DragCornerControls
-                  editorView={editorView}
-                  tableRef={tableRef}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                />
+                {getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
+                  <DragCornerControlsWithSelection
+                    editorView={editorView}
+                    tableRef={tableRef}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                    api={api}
+                  />
+                ) : (
+                  <DragCornerControls
+                    editorView={editorView}
+                    tableRef={tableRef}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                  />
+                )}
                 <DragControls
                   tableRef={tableRef}
                   tableNode={tableNode}
@@ -163,6 +182,21 @@ export const TableFloatingControls = ({
                   updateCellHoverLocation={updateCellHoverLocation}
                 />
               </>
+            ) : getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
+              <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}
+              />
             ) : (
               <>
                 <CornerControls