@atlaskit/editor-plugin-table 7.6.2 → 7.6.4

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

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 
 import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
@@ -19,7 +20,7 @@ import {
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
-import type { PluginInjectionAPI } from '../types';
+import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
 import { TableCssClassName as ClassName } from '../types';
 
 import { TableResizer } from './TableResizer';
@@ -61,7 +62,7 @@ export const InnerContainer = forwardRef<
       className={className}
       data-number-column={node.attrs.isNumberColumnEnabled}
       data-layout={node.attrs.layout}
-      data-test-id="table-container"
+      data-testid="table-container"
     >
       {children}
     </div>
@@ -79,6 +80,7 @@ type ResizableTableContainerProps = {
   pluginInjectionApi?: PluginInjectionAPI;
   isTableScalingEnabled?: boolean;
   tableWrapperHeight?: number;
+  isWholeTableInDanger?: boolean;
 };
 
 export const ResizableTableContainer = React.memo(
@@ -94,6 +96,7 @@ export const ResizableTableContainer = React.memo(
     pluginInjectionApi,
     isTableScalingEnabled,
     tableWrapperHeight,
+    isWholeTableInDanger,
   }: PropsWithChildren<ResizableTableContainerProps>) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
@@ -178,6 +181,10 @@ export const ResizableTableContainer = React.memo(
     );
 
     const tableWidth = getTableContainerWidth(node);
+    const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
+    const { widthToWidest } = tableState as TableSharedStateInternal;
+    const currentTableNodeLocalId = node?.attrs?.localId ?? '';
+
     // 76 is currently an accepted padding value considering the spacing for resizer handle
     const responsiveContainerWidth = isTableScalingEnabled
       ? containerWidth -
@@ -187,7 +194,16 @@ export const ResizableTableContainer = React.memo(
         akEditorGutterPadding * 2 -
         akEditorMediaResizeHandlerPaddingWide;
 
-    const width = Math.min(tableWidth, responsiveContainerWidth);
+    let width = Math.min(tableWidth, responsiveContainerWidth);
+
+    if (
+      isTableScalingEnabled &&
+      currentTableNodeLocalId &&
+      widthToWidest &&
+      widthToWidest[currentTableNodeLocalId]
+    ) {
+      width = TABLE_MAX_WIDTH;
+    }
 
     if (!isResizing) {
       tableWidthRef.current = width;
@@ -207,6 +223,8 @@ export const ResizableTableContainer = React.memo(
       attachAnalyticsEvent,
       displayGapCursor,
       isTableScalingEnabled,
+      isWholeTableInDanger,
+      pluginInjectionApi,
     };
 
     if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
@@ -259,6 +277,7 @@ type TableContainerProps = {
   pluginInjectionApi?: PluginInjectionAPI;
   isTableScalingEnabled?: boolean;
   tableWrapperHeight?: number;
+  isWholeTableInDanger?: boolean;
 };
 
 export const TableContainer = ({
@@ -276,6 +295,7 @@ export const TableContainer = ({
   isResizing,
   pluginInjectionApi,
   isTableScalingEnabled,
+  isWholeTableInDanger,
 }: PropsWithChildren<TableContainerProps>) => {
   if (isTableResizingEnabled && !isNested) {
     return (
@@ -290,6 +310,7 @@ export const TableContainer = ({
         isResizing={isResizing}
         pluginInjectionApi={pluginInjectionApi}
         isTableScalingEnabled={isTableScalingEnabled}
+        isWholeTableInDanger={isWholeTableInDanger}
       >
         {children}
       </ResizableTableContainer>

package/src/nodeviews/TableResizer.tsx

@@ -16,6 +16,7 @@ import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import {
   focusTableResizer,
   ToolTipContent,
@@ -27,21 +28,21 @@ import { browser } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { token } from '@atlaskit/tokens';
 
 import { updateWidthToWidest } from '../commands/misc';
-import { getPluginState } from '../pm-plugins/plugin-factory';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import {
   COLUMN_MIN_WIDTH,
   getColgroupChildrenLength,
   previewScaleTable,
   scaleTable,
+  TABLE_MAX_WIDTH,
 } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
+import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
 import {
   TABLE_GUIDELINE_VISIBLE_ADJUSTMENT,
   TABLE_HIGHLIGHT_GAP,
@@ -77,7 +78,9 @@ interface TableResizerProps {
     payload: TableEventPayload,
   ) => ((tr: Transaction) => boolean) | undefined;
   displayGapCursor: (toggle: boolean) => boolean;
+  pluginInjectionApi?: PluginInjectionAPI;
   isTableScalingEnabled?: boolean;
+  isWholeTableInDanger?: boolean;
 }
 
 export interface TableResizerImprovementProps extends TableResizerProps {
@@ -170,13 +173,17 @@ export const TableResizer = ({
   attachAnalyticsEvent,
   displayGapCursor,
   isTableScalingEnabled,
+  isWholeTableInDanger,
+  pluginInjectionApi,
 }: PropsWithChildren<TableResizerImprovementProps>) => {
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   const isResizing = useRef(false);
   const areResizeMetaKeysPressed = useRef(false);
-
+  const [localTableWidth, setLocalTableWidth] = useState(width);
   const resizerRef = useRef<ResizerNextHandler>(null);
+  const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
+  const { widthToWidest } = tableState as TableSharedStateInternal;
 
   // used to reposition tooltip when table is resizing via keyboard
   const updateTooltip = React.useRef<() => void>();
@@ -208,7 +215,6 @@ export const TableResizer = ({
 
   const resizerMinWidth = getResizerMinWidth(node);
   const handleSize = getResizerHandleHeight(tableRef);
-  const { isWholeTableInDanger } = getPluginState(editorView.state);
 
   const { startMeasure, endMeasure, countFrames } = useMeasureFramerate();
 
@@ -348,25 +354,28 @@ export const TableResizer = ({
       // and a table is resized to fit the widest guideline when view port width is between 1011 and 1800
       // set the width of the table to 1800 pixels.
       const { state, dispatch } = editorView;
-      const widestGuideLineWidthString = defaultGuidelinesForPreserveTable(
+      const currentTableNodeLocalId = node?.attrs?.localId ?? '';
+
+      const widestGuideline = defaultGuidelinesForPreserveTable(
         containerWidth,
-      )[16]
-        .key?.match(/[\d]*[.]{0,1}[\d]+/g)
-        ?.join('');
-      const widestGuideLineWidth = parseInt(
-        widestGuideLineWidthString || '',
-        10,
-      );
+      ).filter((guideline) => guideline.isFullWidth)[0];
+      const widestGuideLineWidth = widestGuideline
+        ? ((widestGuideline.position?.x || 0) as number) * 2
+        : null;
       const shouldUpdateWidthToWidest = !!(
         isTableScalingEnabled &&
-        defaultGuidelinesForPreserveTable(containerWidth).length === 17 &&
-        widestGuideLineWidth - newWidth <= 1
+        widestGuideLineWidth &&
+        Math.abs(widestGuideLineWidth - newWidth) <= 1
       );
-      updateWidthToWidest(shouldUpdateWidthToWidest)(state, dispatch);
+      shouldUpdateWidthToWidest
+        ? setLocalTableWidth(TABLE_MAX_WIDTH)
+        : setLocalTableWidth(newWidth);
 
-      updateWidth(
-        shouldUpdateWidthToWidest ? akEditorFullWidthLayoutWidth : newWidth,
-      );
+      updateWidthToWidest({
+        [currentTableNodeLocalId]: shouldUpdateWidthToWidest,
+      })(state, dispatch);
+
+      updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
 
       return newWidth;
     },
@@ -391,8 +400,13 @@ export const TableResizer = ({
       let newWidth = originalState.width + delta.width;
       const { state, dispatch } = editorView;
       const pos = getPos();
-      const { widthToWidest } = getPluginState(editorView.state);
-      newWidth = widthToWidest ? akEditorFullWidthLayoutWidth : newWidth;
+      const currentTableNodeLocalId = node?.attrs?.localId ?? '';
+      newWidth =
+        widthToWidest &&
+        currentTableNodeLocalId &&
+        widthToWidest[currentTableNodeLocalId]
+          ? TABLE_MAX_WIDTH
+          : newWidth;
 
       let tr = state.tr.setMeta(tableWidthPluginKey, { resizing: false });
       const frameRateSamples = endMeasure();
@@ -466,6 +480,7 @@ export const TableResizer = ({
       endMeasure,
       onResizeStop,
       isTableScalingEnabled,
+      widthToWidest,
     ],
   );
 
@@ -616,7 +631,7 @@ export const TableResizer = ({
       <ResizerNext
         ref={resizerRef}
         enable={handles}
-        width={width}
+        width={localTableWidth}
         handleAlignmentMethod="sticky"
         handleSize={handleSize}
         handleStyles={handleStyles}

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;

package/src/plugin.tsx

@@ -28,6 +28,7 @@ import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
   NextEditorPlugin,
+  OptionalPlugin,
 } from '@atlaskit/editor-common/types';
 import { browser } from '@atlaskit/editor-common/utils';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
@@ -64,6 +65,7 @@ import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import {
   createPlugin as createFlexiResizingPlugin,
+  getPluginState as getFlexiResizingPlugin,
   pluginKey as tableResizingPluginKey,
 } from './pm-plugins/table-resizing';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
@@ -72,7 +74,11 @@ import {
   pluginKey as tableWidthPluginKey,
 } from './pm-plugins/table-width';
 import { getToolbarConfig } from './toolbar';
-import type { ColumnResizingPluginState, PluginConfig } from './types';
+import type {
+  ColumnResizingPluginState,
+  PluginConfig,
+  TableSharedState,
+} from './types';
 import FloatingContextualButton from './ui/FloatingContextualButton';
 import FloatingContextualMenu from './ui/FloatingContextualMenu';
 import FloatingDeleteButton from './ui/FloatingDeleteButton';
@@ -100,6 +106,17 @@ type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
 
 const defaultGetEditorFeatureFlags = () => ({});
 
+// TODO: duplicating type instead of importing media plugin causing a circular dependency
+type MediaPlugin = NextEditorPlugin<
+  'media',
+  {
+    pluginConfiguration: any;
+    dependencies: any;
+    sharedState: any;
+    actions: any;
+  }
+>;
+
 export type TablePlugin = NextEditorPlugin<
   'table',
   {
@@ -107,10 +124,7 @@ export type TablePlugin = NextEditorPlugin<
     actions: {
       insertTable: InsertTableAction;
     };
-    sharedState: {
-      isFullWidthModeEnabled: boolean;
-      wasFullWidthModeEnabled: boolean;
-    };
+    sharedState?: TableSharedState;
     commands: {
       insertTableWithSize: (
         rowsCount: number,
@@ -124,6 +138,7 @@ export type TablePlugin = NextEditorPlugin<
       WidthPlugin,
       GuidelinePlugin,
       SelectionPlugin,
+      OptionalPlugin<MediaPlugin>,
     ];
   }
 >;
@@ -148,10 +163,36 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 
     // 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?.fullWidthEnabled,
         wasFullWidthModeEnabled: !!options?.wasFullWidthEnabled,
+        isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
+        isHeaderColumnEnabled: tablePluginState.isHeaderColumnEnabled,
+        ordering: tablePluginState.ordering,
+        isResizing: !!(
+          tableResizingPluginState?.dragging ||
+          tableWidthResizingPluginState?.resizing
+        ),
+        isTableResizing: 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,
       };
     },