@atlaskit/editor-plugin-table 5.2.2 → 5.3.0

package/dist/types-ts4.5/plugins/table/types.d.ts

@@ -225,6 +225,7 @@ export declare enum TableDecorations {
     TABLE_CONTROLS_HOVER = "TABLE_CONTROLS_HOVER",
     CELL_CONTROLS_HOVER = "CELL_CONTROLS_HOVER",
     COLUMN_CONTROLS_DECORATIONS = "COLUMN_CONTROLS_DECORATIONS",
+    COLUMN_DROP_TARGET_DECORATIONS = "COLUMN_DROP_TARGET_DECORATIONS",
     COLUMN_SELECTED = "COLUMN_SELECTED",
     COLUMN_RESIZING_HANDLE = "COLUMN_RESIZING_HANDLE",
     COLUMN_RESIZING_HANDLE_WIDGET = "COLUMN_RESIZING_HANDLE_WIDGET",
@@ -235,6 +236,9 @@ export declare const TableCssClassName: {
     COLUMN_CONTROLS: string;
     COLUMN_CONTROLS_DECORATIONS: string;
     COLUMN_SELECTED: string;
+    COLUMN_CONTROLS_WRAPPER: string;
+    COLUMN_DROP_TARGET_CONTROLS: string;
+    COLUMN_CONTROLS_INNER: string;
     ROW_CONTROLS_WRAPPER: string;
     ROW_CONTROLS: string;
     ROW_CONTROLS_INNER: string;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export interface Props {
+    editorView: EditorView;
+    tableRef: HTMLTableElement;
+    stickyTop?: number;
+    tableHeight?: number;
+    localId?: string;
+}
+export declare const ColumnDropTargets: React.FC<Props>;
+export default ColumnDropTargets;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingColumnControls/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { RowStickyState } from '../../pm-plugins/sticky-headers';
+export interface Props {
+    editorView: EditorView;
+    getEditorFeatureFlags: GetEditorFeatureFlags;
+    selection?: Selection;
+    tableRef?: HTMLTableElement;
+    tableActive?: boolean;
+    hasHeaderRow?: boolean;
+    headerRowHeight?: number;
+    hoveredRows?: number[];
+    ordering?: TableColumnOrdering;
+    stickyHeader?: RowStickyState;
+}
+export declare const TableFloatingColumnControls: React.FC<Props>;
+export default TableFloatingColumnControls;

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

@@ -8,6 +8,7 @@ export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emo
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;
 export declare const DeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const OverflowShadow: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const floatingColumnControls: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/__tests__/unit/ui/TableFloatingColumnControls.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
+
+import type { DocBuilder } from '@atlaskit/editor-common/types';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import {
+  doc,
+  p,
+  table,
+  tdEmpty,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import tablePlugin from '../../../plugins/table-plugin';
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+import type { TablePluginState } from '../../../plugins/table/types';
+import TableFloatingColumnControls from '../../../plugins/table/ui/TableFloatingColumnControls';
+
+describe('TableFloatingColumnControls', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const fakeGetEditorFeatureFlags = () => ({});
+  const editor = (
+    doc: DocBuilder,
+    options?: {
+      dragAndDropEnabled?: boolean;
+    },
+  ) => {
+    const preset = new Preset<LightEditorPlugin>()
+      .add([featureFlagsPlugin, {}])
+      .add([analyticsPlugin, {}])
+      .add(contentInsertionPlugin)
+      .add(widthPlugin)
+      .add(guidelinePlugin)
+      .add(selectionPlugin)
+      .add([tablePlugin, { ...options, tableOptions: {} }]);
+    return createEditor<TablePluginState, PluginKey, typeof preset>({
+      doc,
+      preset,
+      pluginKey: pluginKey,
+    });
+  };
+
+  it('should not render floating column controls when tableRef undefined and drag and drop is not enabled', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
+    );
+    const { container } = render(
+      <TableFloatingColumnControls
+        editorView={editorView}
+        getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+      />,
+    );
+    expect(container.innerHTML).toEqual('');
+  });
+
+  it('should not render floating column controls when tableRef undefined and drag and drop is enabled', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
+      {
+        dragAndDropEnabled: true,
+      },
+    );
+    const { container } = render(
+      <TableFloatingColumnControls
+        editorView={editorView}
+        getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+      />,
+    );
+    expect(container.innerHTML).toEqual('');
+  });
+
+  it('should render a drop target per column', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty, tdEmpty, tdEmpty))),
+      {
+        dragAndDropEnabled: true,
+      },
+    );
+    const ref = editorView.dom.querySelector('table') || undefined;
+
+    render(
+      <IntlProvider locale="en">
+        <TableFloatingColumnControls
+          tableRef={ref}
+          tableActive={true}
+          editorView={editorView}
+          getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+        />
+      </IntlProvider>,
+    );
+
+    const dropTargets = screen.getAllByTestId(
+      'table-floating-column-controls-drop-target',
+    );
+    expect(dropTargets).toHaveLength(5);
+  });
+
+  it('should render a drop target per column regardless of row count', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty), tr(tdEmpty), tr(tdEmpty))),
+      {
+        dragAndDropEnabled: true,
+      },
+    );
+    const ref = editorView.dom.querySelector('table') || undefined;
+
+    render(
+      <IntlProvider locale="en">
+        <TableFloatingColumnControls
+          tableRef={ref}
+          tableActive={true}
+          editorView={editorView}
+          getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+        />
+      </IntlProvider>,
+    );
+
+    const dropTargets = screen.getAllByTestId(
+      'table-floating-column-controls-drop-target',
+    );
+    expect(dropTargets).toHaveLength(1);
+  });
+});

package/src/plugins/table/index.tsx

@@ -78,7 +78,7 @@ import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
-interface TablePluginOptions {
+export interface TablePluginOptions {
   tableOptions: PluginConfig;
   // experimental custom table resizing experience, set inside editor-core behind a feature flag
   // will eventually replace breakoutEnabled

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -58,6 +58,7 @@ import {
   tableOverflowShadowWidth,
   tableOverflowShadowWidthWide,
 } from '../ui/consts';
+import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import {
   containsHeaderRow,
@@ -91,6 +92,7 @@ export interface ComponentProps {
   isHeaderRowEnabled: boolean;
   isHeaderColumnEnabled: boolean;
   isMediaFullscreen?: boolean;
+  isDragAndDropEnabled?: boolean;
   tableActive: boolean;
   ordering: TableColumnOrdering;
   isResizing?: boolean;
@@ -396,6 +398,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       options,
       getPos,
       pluginInjectionApi,
+      isDragAndDropEnabled,
     } = this.props;
     const { showBeforeShadow, showAfterShadow } = this.state;
     const node = getNode();
@@ -431,6 +434,24 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       </div>
     );
 
+    const colControls = (
+      <div className={ClassName.COLUMN_CONTROLS_WRAPPER}>
+        <TableFloatingColumnControls
+          editorView={view}
+          tableRef={tableRef}
+          tableActive={tableActive}
+          hoveredRows={hoveredRows}
+          ordering={ordering}
+          hasHeaderRow={hasHeaderRow}
+          // pass `selection` and `tableHeight` to control re-render
+          selection={view.state.selection}
+          headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
+          stickyHeader={this.state.stickyHeader}
+          getEditorFeatureFlags={this.props.getEditorFeatureFlags}
+        />
+      </div>
+    );
+
     const shadowPadding =
       allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
 
@@ -482,7 +503,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             data-testid="sticky-scrollbar-sentinel-top"
           />
         )}
+
         {allowControls && rowControls}
+
+        {isDragAndDropEnabled && allowControls && colControls}
+
         <div
           style={shadowStyle(showBeforeShadow)}
           className={ClassName.TABLE_LEFT_SHADOW}

package/src/plugins/table/nodeviews/table.tsx

@@ -248,6 +248,7 @@ export default class TableView extends ReactNodeView<Props> {
               allowControls={pluginState!.pluginConfig.allowControls!}
               isHeaderRowEnabled={pluginState!.isHeaderRowEnabled}
               isHeaderColumnEnabled={pluginState!.isHeaderColumnEnabled}
+              isDragAndDropEnabled={pluginState!.isDragAndDropEnabled}
               tableActive={tableActive}
               ordering={pluginState!.ordering as TableColumnOrdering}
               isResizing={isResizing}

package/src/plugins/table/pm-plugins/drag-and-drop/handlers.ts

@@ -0,0 +1,35 @@
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+import type {
+  ReadonlyTransaction,
+  Transaction,
+} from '@atlaskit/editor-prosemirror/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import { findTable } from '@atlaskit/editor-tables/utils';
+
+import type { DragAndDropPluginState } from './types';
+
+type BuilderDragAndDropPluginState = (props: {
+  tr: Transaction | ReadonlyTransaction;
+  table?: ContentNodeWithPos;
+}) => (pluginState: DragAndDropPluginState) => DragAndDropPluginState;
+
+const buildPluginState =
+  (
+    builders: Array<BuilderDragAndDropPluginState>,
+  ): BuilderDragAndDropPluginState =>
+  (props) =>
+  (pluginState) => {
+    return builders.reduce(
+      (_pluginState, transform) => transform(props)(_pluginState),
+      pluginState,
+    );
+  };
+
+export const handleDocOrSelectionChanged = (
+  tr: Transaction | ReadonlyTransaction,
+  pluginState: DragAndDropPluginState,
+): DragAndDropPluginState =>
+  buildPluginState([])({
+    tr,
+    table: findTable(tr.selection),
+  })(pluginState);

package/src/plugins/table/pm-plugins/drag-and-drop/plugin-factory.ts

@@ -1,8 +1,33 @@
 import { pluginFactory } from '@atlaskit/editor-common/utils';
 
+import { pluginKey as tablePluginKey } from '../plugin-key';
+
+import { handleDocOrSelectionChanged } from './handlers';
 import { pluginKey } from './plugin-key';
 import reducer from './reducer';
 
-const { createPluginState, createCommand } = pluginFactory(pluginKey, reducer);
+export const { createPluginState, createCommand, getPluginState } =
+  pluginFactory(pluginKey, reducer, {
+    mapping: (tr, pluginState) => {
+      if (tr.docChanged) {
+        let decorationSet = pluginState.decorationSet;
+
+        const meta = tr.getMeta(tablePluginKey);
+        if (meta && meta.data && meta.data.decorationSet) {
+          decorationSet = meta.data.decorationSet;
+        }
+
+        if (decorationSet) {
+          decorationSet = decorationSet.map(tr.mapping, tr.doc);
+        }
 
-export { createPluginState, createCommand };
+        return {
+          ...pluginState,
+          ...{ decorationSet },
+        };
+      }
+      return pluginState;
+    },
+    onDocChanged: handleDocOrSelectionChanged,
+    onSelectionChanged: handleDocOrSelectionChanged,
+  });

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -4,9 +4,10 @@ import type {
 } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
 import { DropTargetType } from './consts';
-import { createPluginState } from './plugin-factory';
+import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 
 export const createPlugin = (
@@ -14,19 +15,27 @@ export const createPlugin = (
   eventDispatcher: EventDispatcher,
 ) => {
   return new SafePlugin({
-    state: createPluginState(dispatch, {
+    state: createPluginState(dispatch, (state) => ({
+      decorationSet: DecorationSet.empty,
       // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
       // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
       dropTargetType: DropTargetType.NONE,
       dropTargetIndex: 0,
-    }),
+    })),
     key: pluginKey,
     view: (editorView: EditorView) => {
       // TODO: Add Pragmatic DnD monitor when the view is constructed.
+
       return {
         // TODO: Cleanup monitor instance
         // destroy: cleanup,
       };
     },
+    props: {
+      decorations: (state) => {
+        const { decorationSet } = getPluginState(state);
+        return decorationSet;
+      },
+    },
   });
 };

package/src/plugins/table/pm-plugins/drag-and-drop/types.ts

@@ -1,6 +1,9 @@
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+
 import type { DropTargetType } from './consts';
 
 export interface DragAndDropPluginState {
+  decorationSet: DecorationSet;
   dropTargetType: DropTargetType;
   dropTargetIndex: number;
 }

package/src/plugins/table/types.ts

@@ -239,6 +239,7 @@ export enum TableDecorations {
   CELL_CONTROLS_HOVER = 'CELL_CONTROLS_HOVER',
 
   COLUMN_CONTROLS_DECORATIONS = 'COLUMN_CONTROLS_DECORATIONS',
+  COLUMN_DROP_TARGET_DECORATIONS = 'COLUMN_DROP_TARGET_DECORATIONS',
   COLUMN_SELECTED = 'COLUMN_SELECTED',
   COLUMN_RESIZING_HANDLE = 'COLUMN_RESIZING_HANDLE',
   COLUMN_RESIZING_HANDLE_WIDGET = 'COLUMN_RESIZING_HANDLE_WIDGET',
@@ -254,6 +255,10 @@ export const TableCssClassName = {
   COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
   COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
 
+  COLUMN_CONTROLS_WRAPPER: `${tablePrefixSelector}-col-controls-wrapper`,
+  COLUMN_DROP_TARGET_CONTROLS: `${tablePrefixSelector}-col-drop-target-controls`,
+  COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
+
   ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-row-controls-wrapper`,
   ROW_CONTROLS: `${tablePrefixSelector}-row-controls`,
   ROW_CONTROLS_INNER: `${tablePrefixSelector}-row-controls__inner`,

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+
+import type { DraggableSourceData } from '../../../types';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getColumnsWidths, getRowHeights } from '../../../utils';
+
+export interface Props {
+  editorView: EditorView;
+  tableRef: HTMLTableElement;
+  stickyTop?: number;
+  tableHeight?: number;
+  localId?: string;
+}
+
+export const ColumnDropTargets: React.FC<Props> = ({
+  editorView,
+  tableRef,
+  tableHeight,
+  stickyTop,
+  localId,
+}) => {
+  const colWidths = getColumnsWidths(editorView);
+  const rowHeights = useMemo(() => {
+    // NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
+    if (tableRef && !!tableHeight) {
+      return getRowHeights(tableRef);
+    }
+    return [0];
+  }, [tableRef, tableHeight]);
+
+  if (!tableRef) {
+    return null;
+  }
+
+  const firstRow = tableRef.querySelector('tr');
+  const hasHeaderRow = firstRow
+    ? firstRow.getAttribute('data-header-row')
+    : false;
+
+  const marginTop =
+    hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
+
+  return (
+    <div className={ClassName.COLUMN_DROP_TARGET_CONTROLS}>
+      <div
+        className={ClassName.COLUMN_CONTROLS_INNER}
+        data-testid="table-floating-column-controls-drop-targets"
+      >
+        {colWidths.map((width, index) => {
+          return (
+            <ColumnDropTarget
+              key={index}
+              index={index}
+              localId={localId}
+              width={width}
+              height={tableHeight}
+              marginTop={marginTop}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ColumnDropTargets;
+
+const ColumnDropTarget: React.FC<{
+  index: number;
+  localId?: string;
+  width?: number;
+  height?: number;
+  marginTop?: number;
+}> = ({ index, localId, width, height, marginTop }) => {
+  const dropTargetRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!dropTargetRef.current) {
+      return;
+    }
+
+    return dropTargetForElements({
+      element: dropTargetRef.current,
+      canDrop({ source }) {
+        const data = source.data as DraggableSourceData;
+        return (
+          // Only draggables of row type can be dropped on this target
+          data.type === 'table-column' &&
+          // Only draggables which came from the same table can be dropped on this target
+          data.localId === localId &&
+          // Only draggables which DO NOT include this drop targets index can be dropped
+          !!data.indexes?.length &&
+          data.indexes?.indexOf(index) === -1
+        );
+      },
+      getData({ input, element }) {
+        const data = {
+          localId,
+          type: 'table-column',
+          targetIndex: index,
+        };
+        return attachClosestEdge(data, {
+          input,
+          element,
+          allowedEdges: ['left', 'right'],
+        });
+      },
+    });
+  }, [index, localId]);
+
+  return (
+    <div
+      ref={dropTargetRef}
+      style={{
+        width: width && `${width - 1}px`,
+        height: height && `${height}px`,
+        marginTop: marginTop && `${marginTop}px`,
+      }}
+      data-drop-target-index={index}
+      data-drop-target-localid={localId}
+      data-testid="table-floating-column-controls-drop-target"
+    ></div>
+  );
+};

package/src/plugins/table/ui/TableFloatingColumnControls/index.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { findTable } from '@atlaskit/editor-tables';
+
+import type { RowStickyState } from '../../pm-plugins/sticky-headers';
+
+import { ColumnDropTargets } from './ColumnDropTargets';
+
+export interface Props {
+  editorView: EditorView;
+  getEditorFeatureFlags: GetEditorFeatureFlags;
+  selection?: Selection;
+  tableRef?: HTMLTableElement;
+  tableActive?: boolean;
+  hasHeaderRow?: boolean;
+  headerRowHeight?: number;
+  hoveredRows?: number[];
+  ordering?: TableColumnOrdering;
+  stickyHeader?: RowStickyState;
+}
+
+export const TableFloatingColumnControls: React.FC<Props> = ({
+  editorView,
+  tableRef,
+  tableActive,
+  hasHeaderRow,
+  stickyHeader,
+  selection,
+}) => {
+  const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
+    { width: 0, height: 0 },
+  );
+
+  useEffect(() => {
+    if (tableRef && window?.ResizeObserver) {
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          setTableRect((prev) => {
+            if (
+              prev.width !== entry.contentRect.width ||
+              prev.height !== entry.contentRect.height
+            ) {
+              return entry.contentRect;
+            }
+            return prev;
+          });
+        }
+      });
+      resizeObserver.observe(tableRef);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [tableRef]);
+
+  const selectedLocalId = useMemo(() => {
+    if (!selection) {
+      return undefined;
+    }
+
+    const tableNode = findTable(selection);
+    if (!tableNode) {
+      return undefined;
+    }
+
+    return tableNode.node.attrs.localId;
+  }, [selection]);
+
+  if (!tableRef) {
+    return null;
+  }
+
+  const stickyTop =
+    stickyHeader && stickyHeader.sticky && hasHeaderRow
+      ? stickyHeader.top
+      : undefined;
+
+  return (
+    <div
+      onMouseDown={(e) => e.preventDefault()}
+      data-testid="table-floating-column-controls-wrapper"
+    >
+      {tableActive && (
+        <ColumnDropTargets
+          editorView={editorView}
+          tableRef={tableRef}
+          stickyTop={tableActive ? stickyTop : undefined}
+          tableHeight={tableRect.height}
+          localId={selectedLocalId}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TableFloatingColumnControls;