@atlaskit/editor-plugin-table 5.4.7 → 5.4.9

package/src/__tests__/unit/event-handlers.ts

@@ -26,7 +26,7 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { ffTest } from '@atlassian/feature-flags-test-utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import tablePlugin from '../../plugins/table-plugin';
 import {
@@ -44,6 +44,15 @@ import { getPluginState } from '../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import { TableCssClassName as ClassName } from '../../plugins/table/types';
 
+// Mock Feature flags instead of using ffTest because we don't use the feature flag directly
+jest.mock('@atlaskit/platform-feature-flags', () => ({
+  getBooleanFF: jest.fn().mockImplementation(() => false),
+}));
+
+afterEach(() => {
+  (getBooleanFF as jest.Mock).mockReset();
+});
+
 describe('table plugin: decorations', () => {
   const createEditor = createProsemirrorEditorFactory();
   const editor = (doc: DocBuilder) =>
@@ -263,49 +272,39 @@ describe('withCellTracking', () => {
     });
 
   describe('should fire event handler passed in', () => {
-    ffTest(
-      'platform.editor.table.drag-and-drop',
-      () => {
-        const { editorView } = editor(
-          doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          true,
-        );
-        const eventHandlerSpy = jest.fn();
-        withCellTracking(eventHandlerSpy)(editorView, {} as any);
-
-        expect(eventHandlerSpy).toHaveBeenCalled();
-      },
-      () => {
-        const { editorView } = editor(
-          doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-        );
-        const eventHandlerSpy = jest.fn();
-        withCellTracking(eventHandlerSpy)(editorView, {} as any);
-
-        expect(eventHandlerSpy).toHaveBeenCalled();
-      },
+    (getBooleanFF as jest.Mock).mockImplementation(
+      (name) => name === 'platform.editor.table.drag-and-drop',
     );
+    const { editorView } = editor(
+      doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+      true,
+    );
+    const eventHandlerSpy = jest.fn();
+    withCellTracking(eventHandlerSpy)(editorView, {} as any);
+
+    expect(eventHandlerSpy).toHaveBeenCalled();
   });
 
-  describe('should correctly set table cell coordinates based on mouse location', () => {
-    ffTest('platform.editor.table.drag-and-drop', () => {
-      const { editorView, refs } = editor(
-        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-        true,
-      );
-      const firstCell = editorView.domAtPos(refs['<>']);
+  it('should correctly set table cell coordinates based on mouse location', () => {
+    (getBooleanFF as jest.Mock).mockImplementation(
+      (name) => name === 'platform.editor.table.drag-and-drop',
+    );
+    const { editorView, refs } = editor(
+      doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+      true,
+    );
+    const firstCell = editorView.domAtPos(refs['<>']);
 
-      const event = {
-        target: firstCell.node,
-      };
+    const event = {
+      target: firstCell.node,
+    };
 
-      withCellTracking(jest.fn())(editorView, event as any);
+    withCellTracking(jest.fn())(editorView, event as any);
 
-      const pluginState = getPluginState(editorView.state);
-      expect(pluginState.hoveredCell).toEqual({
-        colIndex: undefined,
-        rowIndex: undefined,
-      });
+    const pluginState = getPluginState(editorView.state);
+    expect(pluginState.hoveredCell).toEqual({
+      colIndex: undefined,
+      rowIndex: undefined,
     });
   });
 });

package/src/__tests__/unit/pm-plugins/decorations/column-controls.ts

@@ -9,47 +9,57 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { ffTest } from '@atlassian/feature-flags-test-utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { buildColumnControlsDecorations } from '../../../../plugins/table/pm-plugins/decorations/utils';
 import { TableDecorations } from '../../../../plugins/table/types';
 
+// Mock Feature flags instead of using ffTest because we don't use the feature flag directly
+jest.mock('@atlaskit/platform-feature-flags', () => ({
+  getBooleanFF: jest.fn().mockImplementation(() => false),
+}));
+
+afterEach(() => {
+  (getBooleanFF as jest.Mock).mockReset();
+});
+
 describe('tables: column controls decorations', () => {
-  describe(`should return a decorationSet with 2 ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type when drag and drop disabled`, () => {
-    ffTest(
-      'platform.editor.table.drag-and-drop',
-      () => {
-        const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
-        const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
-        const nextDecorationSet = buildColumnControlsDecorations({
-          decorationSet: DecorationSet.empty,
-          tr: state.tr,
-        });
-
-        const decorations = nextDecorationSet.find(
-          undefined,
-          undefined,
-          (spec: any) => spec.key.indexOf(decorationKey) > -1,
-        );
-
-        expect(decorations).toHaveLength(0);
-      },
-      () => {
-        const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
-        const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
-        const nextDecorationSet = buildColumnControlsDecorations({
-          decorationSet: DecorationSet.empty,
-          tr: state.tr,
-        });
-
-        const decorations = nextDecorationSet.find(
-          undefined,
-          undefined,
-          (spec: any) => spec.key.indexOf(decorationKey) > -1,
-        );
-
-        expect(decorations).toHaveLength(2);
-      },
+  it(`should return an empty decorationSet ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type when drag and drop is enabled`, () => {
+    (getBooleanFF as jest.Mock).mockImplementation(
+      (name) => name === 'platform.editor.table.drag-and-drop',
     );
+    const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
+    const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
+    const nextDecorationSet = buildColumnControlsDecorations({
+      decorationSet: DecorationSet.empty,
+      tr: state.tr,
+      options: { isDragAndDropEnabled: true },
+    });
+
+    const decorations = nextDecorationSet.find(
+      undefined,
+      undefined,
+      (spec: any) => spec.key.indexOf(decorationKey) > -1,
+    );
+
+    expect(decorations).toHaveLength(0);
+  });
+
+  it(`should return an empty decorationSet ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type when drag and drop is disabled`, () => {
+    const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
+    const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
+    const nextDecorationSet = buildColumnControlsDecorations({
+      decorationSet: DecorationSet.empty,
+      tr: state.tr,
+      options: { isDragAndDropEnabled: false },
+    });
+
+    const decorations = nextDecorationSet.find(
+      undefined,
+      undefined,
+      (spec: any) => spec.key.indexOf(decorationKey) > -1,
+    );
+
+    expect(decorations).toHaveLength(2);
   });
 });

package/src/plugins/table/commands/misc.ts

@@ -1,4 +1,3 @@
-// #region Imports
 import type { CellAttributes } from '@atlaskit/adf-schema';
 import type { Command } from '@atlaskit/editor-common/types';
 import {
@@ -76,11 +75,7 @@ export const setTableRef = (ref?: HTMLTableElement) =>
         closestElement(tableRef, `.${ClassName.TABLE_NODE_WRAPPER}`) ||
         undefined;
       const layout = tableNode ? tableNode.attrs.layout : undefined;
-      const decorationSet = updatePluginStateDecorations(
-        state,
-        createColumnControlsDecoration(state.selection),
-        TableDecorations.COLUMN_CONTROLS_DECORATIONS,
-      );
+      const { isDragAndDropEnabled } = getPluginState(state);
 
       return {
         type: 'SET_TABLE_REF',
@@ -93,7 +88,14 @@ export const setTableRef = (ref?: HTMLTableElement) =>
           isNumberColumnEnabled: checkIfNumberColumnEnabled(state.selection),
           isHeaderRowEnabled: checkIfHeaderRowEnabled(state.selection),
           isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state.selection),
-          decorationSet,
+          // decoration set is drawn by the decoration plugin, skip this for DnD as all controls are floating
+          decorationSet: !isDragAndDropEnabled
+            ? updatePluginStateDecorations(
+                state,
+                createColumnControlsDecoration(state.selection),
+                TableDecorations.COLUMN_CONTROLS_DECORATIONS,
+              )
+            : undefined,
           resizeHandleRowIndex: undefined,
           resizeHandleColumnIndex: undefined,
         },

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

@@ -483,28 +483,26 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     const hasHeaderRow = containsHeaderRow(node);
     const rowControls = (
-      <div className={ClassName.ROW_CONTROLS_WRAPPER}>
-        <TableFloatingControls
-          editorView={view}
-          tableRef={tableRef}
-          tableNode={node}
-          tableActive={tableActive}
-          hoveredRows={hoveredRows}
-          hoveredCell={hoveredCell}
-          isInDanger={isInDanger}
-          isResizing={isResizing}
-          isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
-          isHeaderRowEnabled={isHeaderRowEnabled}
-          isDragAndDropEnabled={isDragAndDropEnabled}
-          ordering={ordering}
-          isHeaderColumnEnabled={isHeaderColumnEnabled}
-          hasHeaderRow={hasHeaderRow}
-          // pass `selection` and `tableHeight` to control re-render
-          selection={view.state.selection}
-          headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
-          stickyHeader={this.state.stickyHeader}
-        />
-      </div>
+      <TableFloatingControls
+        editorView={view}
+        tableRef={tableRef}
+        tableNode={node}
+        tableActive={tableActive}
+        hoveredRows={hoveredRows}
+        hoveredCell={hoveredCell}
+        isInDanger={isInDanger}
+        isResizing={isResizing}
+        isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
+        isHeaderRowEnabled={isHeaderRowEnabled}
+        isDragAndDropEnabled={isDragAndDropEnabled}
+        ordering={ordering}
+        isHeaderColumnEnabled={isHeaderColumnEnabled}
+        hasHeaderRow={hasHeaderRow}
+        // pass `selection` and `tableHeight` to control re-render
+        selection={view.state.selection}
+        headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
+        stickyHeader={this.state.stickyHeader}
+      />
     );
 
     const colControls = isDragAndDropEnabled ? (

package/src/plugins/table/pm-plugins/decorations/plugin.ts

@@ -8,7 +8,6 @@ import type {
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { pluginKey as tableWidthPluginKey } from '../table-width';
@@ -31,11 +30,13 @@ export const handleDocOrSelectionChanged = (
 ): DecorationSet => {
   const isResizing = tableWidthPluginKey.getState(newState)?.resizing;
   const wasResizing = tableWidthPluginKey.getState(oldState)?.resizing;
+  const { isDragAndDropEnabled = false } =
+    tablePluginKey.getState(newState) || {};
 
   const changedResizing = isResizing !== wasResizing;
 
   // Remove column controls when resizing and don't add column decoration controls when DnD enabled
-  if (isResizing || getBooleanFF('platform.editor.table.drag-and-drop')) {
+  if (isResizing) {
     return DecorationSet.empty;
   } else if (
     tr.docChanged ||
@@ -45,6 +46,9 @@ export const handleDocOrSelectionChanged = (
     return buildColumnControlsDecorations({
       decorationSet,
       tr,
+      options: {
+        isDragAndDropEnabled,
+      },
     });
   } else if (tr.selectionSet) {
     const isTransactionFromMouseClick =
@@ -70,6 +74,7 @@ export const createPlugin = () => {
 
       apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
+        // main table plugin --->
         const meta = tr.getMeta(tablePluginKey);
 
         if (meta && meta.data && meta.data.decorationSet) {

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -17,7 +17,10 @@ import {
 } from '../../../utils/decoration';
 
 import { composeDecorations } from './compose-decorations';
-import type { DecorationTransformer } from './types';
+import type {
+  BuildDecorationTransformerParams,
+  DecorationTransformer,
+} from './types';
 
 const isColumnSelected = (tr: Transaction | ReadonlyTransaction): boolean =>
   tr.selection instanceof CellSelection && tr.selection.isColSelection();
@@ -25,13 +28,12 @@ const isColumnSelected = (tr: Transaction | ReadonlyTransaction): boolean =>
 // @see: https://product-fabric.atlassian.net/browse/ED-3796
 const removeControlsHoverDecoration: DecorationTransformer = ({
   decorationSet,
-}): DecorationSet =>
-  decorationSet.remove(findControlsHoverDecoration(decorationSet));
+}) => decorationSet.remove(findControlsHoverDecoration(decorationSet));
 
 const maybeUpdateColumnSelectedDecoration: DecorationTransformer = ({
   decorationSet,
   tr,
-}): DecorationSet => {
+}) => {
   if (!isColumnSelected(tr)) {
     return decorationSet;
   }
@@ -47,10 +49,9 @@ const maybeUpdateColumnSelectedDecoration: DecorationTransformer = ({
 const maybeUpdateColumnControlsDecoration: DecorationTransformer = ({
   decorationSet,
   tr,
-}): DecorationSet => {
+}) => {
   const table = findTable(tr.selection);
 
-  // avoid re-drawing state if dnd decorations don't need to be updated
   if (!table) {
     return decorationSet;
   }
@@ -66,14 +67,13 @@ const maybeUpdateColumnControlsDecoration: DecorationTransformer = ({
 // @see: https://product-fabric.atlassian.net/browse/ED-7304
 const removeColumnControlsSelectedDecoration: DecorationTransformer = ({
   decorationSet,
-}): DecorationSet =>
-  decorationSet.remove(findColumnControlSelectedDecoration(decorationSet));
+}) => decorationSet.remove(findColumnControlSelectedDecoration(decorationSet));
 
 const hasColumnSelectedDecorations = (decorationSet: DecorationSet): boolean =>
   !!findColumnControlSelectedDecoration(decorationSet).length;
 
 export const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer =
-  ({ decorationSet, tr }): DecorationSet => {
+  ({ decorationSet, tr }) => {
     if (!hasColumnSelectedDecorations(decorationSet)) {
       return decorationSet;
     }
@@ -81,10 +81,19 @@ export const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer
     return removeColumnControlsSelectedDecoration({ decorationSet, tr });
   };
 
-export const buildColumnControlsDecorations: DecorationTransformer = ({
+export const buildColumnControlsDecorations = ({
   decorationSet,
   tr,
-}): DecorationSet => {
+  options,
+}: BuildDecorationTransformerParams): DecorationSet => {
+  if (options.isDragAndDropEnabled) {
+    return composeDecorations([
+      removeColumnControlsSelectedDecoration,
+      removeControlsHoverDecoration,
+      maybeUpdateColumnSelectedDecoration,
+    ])({ decorationSet, tr });
+  }
+
   return composeDecorations([
     removeColumnControlsSelectedDecoration,
     removeControlsHoverDecoration,

package/src/plugins/table/pm-plugins/decorations/utils/compose-decorations.ts

@@ -1,10 +1,8 @@
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-
-import { DecorationTransformer } from './types';
+import type { DecorationTransformer } from './types';
 
 export const composeDecorations =
   (transformers: Array<DecorationTransformer>): DecorationTransformer =>
-  ({ decorationSet, tr }): DecorationSet =>
+  ({ decorationSet, tr }) =>
     transformers.reduce(
       (decorationSet, transform) => transform({ decorationSet, tr }),
       decorationSet,

package/src/plugins/table/pm-plugins/decorations/utils/types.ts

@@ -1,14 +1,21 @@
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-import {
+import type {
   ReadonlyTransaction,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
-export type DecorationTransformer = ({
-  decorationSet,
-  tr,
-}: {
+export type DecorationTransformer = (
+  params: DecorationTransformerParams,
+) => DecorationSet;
+
+export type DecorationTransformerParams = {
   decorationSet: DecorationSet;
   tr: Transaction | ReadonlyTransaction;
-}) => DecorationSet;
+};
+
+export type BuildDecorationTransformerParams = DecorationTransformerParams & {
+  options: {
+    isDragAndDropEnabled: boolean;
+  };
+};

package/src/plugins/table/types.ts

@@ -309,7 +309,8 @@ export const TableCssClassName = {
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: `${tablePrefixSelector}-corner-controls__insert-column-marker`,
   CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
 
-  /** Controls with drag handle */
+  /** drag and drop controls */
+  DRAG_ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-drag-row-controls-wrapper`,
   DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
   DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
   DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,

package/src/plugins/table/ui/FloatingDragMenu/DragMenu.tsx

@@ -26,7 +26,12 @@ import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
 import { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import type { PluginConfig, TableDirection } from '../../types';
-import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
+import {
+  getSelectedColumnIndexes,
+  getSelectedRowIndexes,
+  hasMergedCellsInColumn,
+  hasMergedCellsInRow,
+} from '../../utils';
 import type { DragMenuConfig } from '../../utils/drag-menu';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
@@ -123,9 +128,15 @@ export const DragMenu = ({
     ? getSelectionRect(selection)!
     : findCellRectClosestToPos(selection.$from);
 
+  const hasMergedCells =
+    direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
+
+  const mergedCells = index !== undefined && hasMergedCells(index)(selection);
+
   const dragMenuConfig = getDragMenuConfig(
     direction,
     getEditorContainerWidth,
+    mergedCells,
     tableMap,
     index,
     targetCellPosition,

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

@@ -158,75 +158,81 @@ export default class TableFloatingControls extends Component<Props, State> {
         ? stickyHeader.top
         : undefined;
 
+    const wrapperClassName = isDragAndDropEnabled
+      ? ClassName.DRAG_ROW_CONTROLS_WRAPPER
+      : ClassName.ROW_CONTROLS_WRAPPER;
+
     return (
-      <div onMouseDown={(e) => !isDragAndDropEnabled && e.preventDefault()}>
-        {isNumberColumnEnabled ? (
-          <NumberColumn
-            editorView={editorView}
-            hoverRows={this.hoverRows}
-            tableRef={tableRef}
-            tableActive={tableActive}
-            hoveredRows={hoveredRows}
-            hasHeaderRow={hasHeaderRow}
-            isInDanger={isInDanger}
-            isResizing={isResizing}
-            selectRow={this.selectRow}
-            updateCellHoverLocation={this.updateCellHoverLocation}
-            stickyTop={stickyTop}
-            isDragAndDropEnabled={isDragAndDropEnabled}
-          />
-        ) : null}
+      <div className={wrapperClassName}>
+        <div onMouseDown={(e) => !isDragAndDropEnabled && e.preventDefault()}>
+          {isNumberColumnEnabled ? (
+            <NumberColumn
+              editorView={editorView}
+              hoverRows={this.hoverRows}
+              tableRef={tableRef}
+              tableActive={tableActive}
+              hoveredRows={hoveredRows}
+              hasHeaderRow={hasHeaderRow}
+              isInDanger={isInDanger}
+              isResizing={isResizing}
+              selectRow={this.selectRow}
+              updateCellHoverLocation={this.updateCellHoverLocation}
+              stickyTop={stickyTop}
+              isDragAndDropEnabled={isDragAndDropEnabled}
+            />
+          ) : null}
 
-        {tableActive && (
-          <>
-            {isDragAndDropEnabled ? (
-              <>
-                <DragCornerControls
-                  editorView={editorView}
-                  tableRef={tableRef}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                />
-                <DragControls
-                  tableRef={tableRef}
-                  tableNode={tableNode}
-                  hoveredCell={hoveredCell}
-                  editorView={editorView}
-                  tableActive={tableActive}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                  tableWidth={this.state.tableWrapperWidth}
-                  hoverRows={this.hoverRows}
-                  selectRow={this.selectRow}
-                  updateCellHoverLocation={this.updateCellHoverLocation}
-                />
-              </>
-            ) : (
-              <>
-                <CornerControls
-                  editorView={editorView}
-                  tableRef={tableRef}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                  isHeaderRowEnabled={isHeaderRowEnabled}
-                  isHeaderColumnEnabled={isHeaderColumnEnabled}
-                  hoveredRows={hoveredRows}
-                  stickyTop={tableActive ? stickyTop : undefined}
-                />
-                <RowControls
-                  editorView={editorView}
-                  tableRef={tableRef}
-                  hoverRows={this.hoverRows}
-                  hoveredRows={hoveredRows}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                  selectRow={this.selectRow}
-                  stickyTop={tableActive ? stickyTop : undefined}
-                />
-              </>
-            )}
-          </>
-        )}
+          {tableActive && (
+            <>
+              {isDragAndDropEnabled ? (
+                <>
+                  <DragCornerControls
+                    editorView={editorView}
+                    tableRef={tableRef}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                  />
+                  <DragControls
+                    tableRef={tableRef}
+                    tableNode={tableNode}
+                    hoveredCell={hoveredCell}
+                    editorView={editorView}
+                    tableActive={tableActive}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                    tableWidth={this.state.tableWrapperWidth}
+                    hoverRows={this.hoverRows}
+                    selectRow={this.selectRow}
+                    updateCellHoverLocation={this.updateCellHoverLocation}
+                  />
+                </>
+              ) : (
+                <>
+                  <CornerControls
+                    editorView={editorView}
+                    tableRef={tableRef}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                    isHeaderRowEnabled={isHeaderRowEnabled}
+                    isHeaderColumnEnabled={isHeaderColumnEnabled}
+                    hoveredRows={hoveredRows}
+                    stickyTop={tableActive ? stickyTop : undefined}
+                  />
+                  <RowControls
+                    editorView={editorView}
+                    tableRef={tableRef}
+                    hoverRows={this.hoverRows}
+                    hoveredRows={hoveredRows}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                    selectRow={this.selectRow}
+                    stickyTop={tableActive ? stickyTop : undefined}
+                  />
+                </>
+              )}
+            </>
+          )}
+        </div>
       </div>
     );
   }