@atlaskit/editor-plugin-table 7.6.2 → 7.6.3

package/dist/types-ts4.5/ui/TableFloatingControls/index.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 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 type { TablePlugin } from '../../plugin';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { CellHoverMeta } from '../../types';
 export interface TableFloatingControlsProps {
@@ -27,5 +29,146 @@ export interface TableFloatingControlsProps {
     insertRowButtonIndex?: number;
     tableWrapperWidth?: number;
 }
-export declare const TableFloatingControls: ({ editorView, tableRef, tableNode, isInDanger, isResizing, isNumberColumnEnabled, isHeaderRowEnabled, isHeaderColumnEnabled, tableActive, hasHeaderRow, hoveredRows, stickyHeader, isDragAndDropEnabled, hoveredCell, isTableHovered, tableWrapperWidth, }: TableFloatingControlsProps) => JSX.Element | null;
+export declare const TableFloatingControls: ({ editorView, tableRef, tableNode, isInDanger, isResizing, isNumberColumnEnabled, isHeaderRowEnabled, isHeaderColumnEnabled, tableActive, hasHeaderRow, hoveredRows, stickyHeader, isDragAndDropEnabled, hoveredCell, isTableHovered, tableWrapperWidth, api, }: TableFloatingControlsProps & {
+    api?: import("@atlaskit/editor-common/types").PublicPluginAPI<[
+        import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"table", {
+            pluginConfiguration: import("../../plugin").TablePluginOptions | undefined;
+            actions: {
+                insertTable: (analyticsPayload: import("@atlaskit/editor-common/analytics").AnalyticsEventPayload) => import("@atlaskit/editor-common/types").Command;
+            };
+            sharedState?: import("../../types").TableSharedState | undefined;
+            commands: {
+                insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: import("@atlaskit/editor-common/analytics").INPUT_METHOD.PICKER | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
+            };
+            dependencies: [
+                import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+                    pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
+                    sharedState: {
+                        createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
+                        attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
+                        performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
+                    };
+                    dependencies: [
+                        import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                            pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
+                            sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
+                        }, import("@atlaskit/editor-common/types").FeatureFlags>>
+                    ];
+                    actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
+                }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>,
+                import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contentInsertion", {
+                    actions: import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI;
+                    dependencies: [
+                        import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+                            pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
+                            sharedState: {
+                                createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
+                                attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
+                                performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
+                            };
+                            dependencies: [
+                                import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                                    pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
+                                    sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
+                                }, import("@atlaskit/editor-common/types").FeatureFlags>>
+                            ];
+                            actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
+                        }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>
+                    ];
+                }, undefined>,
+                import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
+                    sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
+                }, undefined>,
+                import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"guideline", {
+                    dependencies: [
+                        import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
+                            sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
+                        }, undefined>
+                    ];
+                    sharedState: import("@atlaskit/editor-common/guideline").GuidelinePluginState | null;
+                    actions: {
+                        displayGuideline: import("@atlaskit/editor-common/guideline").DisplayGuideline;
+                    };
+                }, undefined>,
+                import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"selection", {
+                    pluginConfiguration: import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined;
+                    actions: import("@atlaskit/editor-plugin-selection").EditorSelectionAPI;
+                    commands: {
+                        displayGapCursor: (toggle: boolean) => import("@atlaskit/editor-common/types").EditorCommand;
+                    };
+                    sharedState: import("@atlaskit/editor-common/selection").SelectionSharedState;
+                }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>,
+                import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"media", {
+                    pluginConfiguration: any;
+                    dependencies: any;
+                    sharedState: any;
+                    actions: any;
+                }, any>>
+            ];
+        }, import("../../plugin").TablePluginOptions | undefined>,
+        import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+            pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
+            sharedState: {
+                createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
+                attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
+                performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
+            };
+            dependencies: [
+                import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                    pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
+                    sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
+                }, import("@atlaskit/editor-common/types").FeatureFlags>>
+            ];
+            actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
+        }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>,
+        import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contentInsertion", {
+            actions: import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI;
+            dependencies: [
+                import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+                    pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
+                    sharedState: {
+                        createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
+                        attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
+                        performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
+                    };
+                    dependencies: [
+                        import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                            pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
+                            sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
+                        }, import("@atlaskit/editor-common/types").FeatureFlags>>
+                    ];
+                    actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
+                }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>
+            ];
+        }, undefined>,
+        import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
+            sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
+        }, undefined>,
+        import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"guideline", {
+            dependencies: [
+                import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
+                    sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
+                }, undefined>
+            ];
+            sharedState: import("@atlaskit/editor-common/guideline").GuidelinePluginState | null;
+            actions: {
+                displayGuideline: import("@atlaskit/editor-common/guideline").DisplayGuideline;
+            };
+        }, undefined>,
+        import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"selection", {
+            pluginConfiguration: import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined;
+            actions: import("@atlaskit/editor-plugin-selection").EditorSelectionAPI;
+            commands: {
+                displayGapCursor: (toggle: boolean) => import("@atlaskit/editor-common/types").EditorCommand;
+            };
+            sharedState: import("@atlaskit/editor-common/selection").SelectionSharedState;
+        }, import("@atlaskit/editor-plugin-selection/types").SelectionPluginOptions | undefined>,
+        import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"media", {
+            pluginConfiguration: any;
+            dependencies: any;
+            sharedState: any;
+            actions: any;
+        }, any>>
+    ]> | undefined;
+}) => JSX.Element | null;
 export default TableFloatingControls;

package/dist/types-ts4.5/ui/common-styles.d.ts

@@ -1,6 +1,9 @@
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 export declare const insertColumnButtonOffset: number;
 export declare const tableRowHeight = 44;
+export declare const baseTableStyles: (props: {
+    featureFlags?: FeatureFlags;
+}) => import("@emotion/react").SerializedStyles;
 export declare const tableStyles: (props: {
     featureFlags?: FeatureFlags;
 }) => import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.6.2",
+  "version": "7.6.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.7.0",
     "@atlaskit/custom-steps": "^0.0.16",
-    "@atlaskit/editor-common": "^78.20.0",
+    "@atlaskit/editor-common": "^78.21.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
@@ -47,7 +47,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
     "@atlaskit/primitives": "^5.1.0",
-    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/theme": "^12.7.0",
     "@atlaskit/toggle": "^13.0.0",
     "@atlaskit/tokens": "^1.42.0",
     "@atlaskit/tooltip": "^18.1.0",
@@ -148,6 +148,9 @@
     },
     "platform.editor.table.cmd-a-select-table": {
       "type": "boolean"
+    },
+    "platform.editor.table.use-shared-state-hook": {
+      "type": "boolean"
     }
   }
 }

package/src/nodeviews/TableComponent.tsx

@@ -57,7 +57,7 @@ import {
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_EDITOR_MARGIN } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
-import type { PluginInjectionAPI } from '../types';
+import type { CellHoverMeta, PluginInjectionAPI } from '../types';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import {
   tableOverflowShadowWidth,
@@ -107,11 +107,18 @@ export interface ComponentProps {
   isDragAndDropEnabled?: boolean;
   isTableScalingEnabled?: boolean;
   tableActive: boolean;
-  ordering: TableColumnOrdering;
+  ordering?: TableColumnOrdering;
   isResizing?: boolean;
   getEditorFeatureFlags: GetEditorFeatureFlags;
   dispatchAnalyticsEvent: DispatchAnalyticsEvent;
   pluginInjectionApi?: PluginInjectionAPI;
+
+  // marking props as option to ensure backward compatibility when platform.editor.table.use-shared-state-hook disabled
+  isInDanger?: boolean;
+  hoveredRows?: number[];
+  hoveredCell?: CellHoverMeta;
+  isTableHovered?: boolean;
+  isWholeTableInDanger?: boolean;
 }
 
 interface TableState {
@@ -392,9 +399,15 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       isTableScalingEnabled,
       getPos,
     } = this.props;
-    const { isInDanger } = getPluginState(view.state);
+    let { isInDanger } = this.props;
+
     const table = findTable(view.state.selection);
 
+    if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+      const pluginState = getPluginState(view.state);
+      isInDanger = pluginState.isInDanger;
+    }
+
     if (isTableScalingEnabled) {
       this.handleColgroupUpdates();
     }
@@ -454,7 +467,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isNoOfColumnsChanged
       ) {
         const { view } = this.props;
-
         const shouldRecreateResizeCols =
           !options?.isTableResizingEnabled ||
           !isResizing ||
@@ -570,11 +582,25 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       isTableScalingEnabled,
     } = this.props;
 
+    let {
+      isInDanger,
+      hoveredRows,
+      hoveredCell,
+      isTableHovered,
+      isWholeTableInDanger,
+    } = this.props;
+
     const { showBeforeShadow, showAfterShadow } = this.state;
     const node = getNode();
-    // doesn't work well with WithPluginState
-    const { isInDanger, hoveredRows, hoveredCell, isTableHovered } =
-      getPluginState(view.state);
+
+    if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+      const pluginState = getPluginState(view.state);
+      isInDanger = pluginState.isInDanger;
+      hoveredRows = pluginState.hoveredRows;
+      hoveredCell = pluginState.hoveredCell;
+      isTableHovered = pluginState.isTableHovered;
+      isWholeTableInDanger = pluginState.isWholeTableInDanger;
+    }
 
     const tableRef = this.table || undefined;
     const headerRow = tableRef
@@ -604,6 +630,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
         stickyHeader={this.state.stickyHeader}
         tableWrapperWidth={this.state.tableWrapperWidth}
+        api={pluginInjectionApi}
       />
     );
     const tableContainerWidth = getTableContainerWidth(node);
@@ -629,6 +656,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
         getScrollOffset={() => this.wrapper?.scrollLeft || 0}
         tableWrapperHeight={this.state.tableWrapperHeight}
+        api={pluginInjectionApi}
       />
     ) : null;
 
@@ -685,6 +713,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isTableResizingEnabled={options?.isTableResizingEnabled}
         isResizing={isResizing}
         isTableScalingEnabled={isTableScalingEnabled}
+        isWholeTableInDanger={isWholeTableInDanger}
       >
         <div
           className={ClassName.TABLE_STICKY_SENTINEL_TOP}

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import type {
+  GetEditorFeatureFlags,
+  getPosHandlerNode,
+} from '@atlaskit/editor-common/types';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { findTable } from '@atlaskit/editor-tables';
+
+import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
+
+import TableComponent from './TableComponent';
+import type { TableOptions } from './types';
+
+type ForwardRef = (node: HTMLElement | null) => any;
+
+type TableComponentWithSharedStateProps = {
+  view: EditorView;
+  options?: TableOptions;
+  getNode: () => PmNode;
+  dispatchAnalyticsEvent: DispatchAnalyticsEvent;
+  getEditorFeatureFlags: GetEditorFeatureFlags;
+  api?: PluginInjectionAPI;
+  eventDispatcher: EventDispatcher;
+  forwardRef: ForwardRef;
+  getPos: getPosHandlerNode;
+  allowColumnResizing?: boolean;
+  allowControls?: boolean;
+};
+
+/**
+ * Use useSharedPluginState to control re-renders from plugin dependencies
+ */
+export const TableComponentWithSharedState = ({
+  view,
+  options,
+  getNode,
+  dispatchAnalyticsEvent,
+  api,
+  getEditorFeatureFlags,
+  eventDispatcher,
+  allowColumnResizing,
+  allowControls,
+  getPos,
+  forwardRef,
+}: TableComponentWithSharedStateProps) => {
+  const { widthState, tableState, mediaState } = useSharedPluginState(api, [
+    'width',
+    'table',
+    'media',
+  ]);
+
+  if (!tableState) {
+    return null;
+  }
+
+  const {
+    isTableResizing,
+    isHeaderColumnEnabled,
+    isHeaderRowEnabled,
+    ordering,
+    isResizing,
+    isInDanger,
+    hoveredCell,
+    hoveredRows,
+    isTableHovered,
+    isWholeTableInDanger,
+  } = tableState as TableSharedStateInternal;
+
+  /**
+   *  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.
+   */
+  let currentTablePos: number | undefined;
+  try {
+    currentTablePos = getPos ? getPos() : undefined;
+  } catch (e) {
+    currentTablePos = undefined;
+  }
+
+  const selectedTable = findTable(view.state.selection);
+
+  const tablePos = selectedTable && selectedTable.start - 1;
+
+  const tableActive =
+    typeof currentTablePos === 'number' &&
+    typeof tablePos === 'number' &&
+    currentTablePos === tablePos &&
+    !isTableResizing;
+
+  return (
+    <TableComponent
+      view={view}
+      allowColumnResizing={allowColumnResizing}
+      eventDispatcher={eventDispatcher}
+      getPos={getPos}
+      isMediaFullscreen={mediaState?.isFullscreen}
+      options={options}
+      allowControls={!!allowControls}
+      isHeaderRowEnabled={isHeaderRowEnabled}
+      isHeaderColumnEnabled={isHeaderColumnEnabled}
+      isDragAndDropEnabled={options?.isDragAndDropEnabled}
+      isTableScalingEnabled={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/src/nodeviews/TableContainer.tsx

@@ -79,6 +79,7 @@ type ResizableTableContainerProps = {
   pluginInjectionApi?: PluginInjectionAPI;
   isTableScalingEnabled?: boolean;
   tableWrapperHeight?: number;
+  isWholeTableInDanger?: boolean;
 };
 
 export const ResizableTableContainer = React.memo(
@@ -94,6 +95,7 @@ export const ResizableTableContainer = React.memo(
     pluginInjectionApi,
     isTableScalingEnabled,
     tableWrapperHeight,
+    isWholeTableInDanger,
   }: PropsWithChildren<ResizableTableContainerProps>) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
@@ -207,6 +209,7 @@ export const ResizableTableContainer = React.memo(
       attachAnalyticsEvent,
       displayGapCursor,
       isTableScalingEnabled,
+      isWholeTableInDanger,
     };
 
     if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
@@ -259,6 +262,7 @@ type TableContainerProps = {
   pluginInjectionApi?: PluginInjectionAPI;
   isTableScalingEnabled?: boolean;
   tableWrapperHeight?: number;
+  isWholeTableInDanger?: boolean;
 };
 
 export const TableContainer = ({
@@ -276,6 +280,7 @@ export const TableContainer = ({
   isResizing,
   pluginInjectionApi,
   isTableScalingEnabled,
+  isWholeTableInDanger,
 }: PropsWithChildren<TableContainerProps>) => {
   if (isTableResizingEnabled && !isNested) {
     return (
@@ -290,6 +295,7 @@ export const TableContainer = ({
         isResizing={isResizing}
         pluginInjectionApi={pluginInjectionApi}
         isTableScalingEnabled={isTableScalingEnabled}
+        isWholeTableInDanger={isWholeTableInDanger}
       >
         {children}
       </ResizableTableContainer>

package/src/nodeviews/TableResizer.tsx

@@ -78,6 +78,7 @@ interface TableResizerProps {
   ) => ((tr: Transaction) => boolean) | undefined;
   displayGapCursor: (toggle: boolean) => boolean;
   isTableScalingEnabled?: boolean;
+  isWholeTableInDanger?: boolean;
 }
 
 export interface TableResizerImprovementProps extends TableResizerProps {
@@ -170,6 +171,7 @@ export const TableResizer = ({
   attachAnalyticsEvent,
   displayGapCursor,
   isTableScalingEnabled,
+  isWholeTableInDanger,
 }: PropsWithChildren<TableResizerImprovementProps>) => {
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
@@ -208,7 +210,6 @@ export const TableResizer = ({
 
   const resizerMinWidth = getResizerMinWidth(node);
   const handleSize = getResizerHandleHeight(tableRef);
-  const { isWholeTableInDanger } = getPluginState(editorView.state);
 
   const { startMeasure, endMeasure, countFrames } = useMeasureFramerate();
 

package/src/nodeviews/table.tsx

@@ -25,6 +25,7 @@ import type {
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 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';
@@ -37,6 +38,7 @@ import type { PluginInjectionAPI } from '../types';
 import { isTableNested } from '../utils';
 
 import TableComponent from './TableComponent';
+import { TableComponentWithSharedState } from './TableComponentWithSharedState';
 import type { Props } from './types';
 
 type ForwardRef = (node: HTMLElement | null) => void;
@@ -182,6 +184,24 @@ export default class TableView extends ReactNodeView<Props> {
   };
 
   render(props: Props, forwardRef: ForwardRef) {
+    if (getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+      return (
+        <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
@@ -363,13 +383,14 @@ export const createTableView = (
     isDragAndDropEnabled,
     isTableScalingEnabled,
   } = getPluginState(view.state);
-  const { allowColumnResizing } = getPluginConfig(pluginConfig);
+  const { allowColumnResizing, allowControls } = getPluginConfig(pluginConfig);
   const hasIntlContext = true;
 
   return new TableView({
     node,
     view,
     allowColumnResizing,
+    allowControls,
     portalProviderAPI,
     eventDispatcher,
     getPos: getPos as getPosHandlerNode,

package/src/nodeviews/types.ts

@@ -23,6 +23,7 @@ export interface Props {
   node: PmNode;
   view: EditorView;
   allowColumnResizing?: boolean;
+  allowControls?: boolean;
   cellMinWidth?: number;
   portalProviderAPI: PortalProviderAPI;
   eventDispatcher: EventDispatcher;