@atlaskit/editor-plugin-table 5.3.12 → 5.3.14

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

@@ -1,23 +1,26 @@
 import React from 'react';
 
-import { injectIntl, WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { injectIntl } from 'react-intl-next';
 
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type {
+  AnalyticsEventPayload,
+  DispatchAnalyticsEvent,
+  EditorAnalyticsAPI,
+} from '@atlaskit/editor-common/analytics';
 import {
   ACTION,
   ACTION_SUBJECT,
-  AnalyticsEventPayload,
   CONTENT_COMPONENT,
-  DispatchAnalyticsEvent,
   EVENT_TYPE,
   INPUT_METHOD,
 } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { closestElement } from '@atlaskit/editor-common/utils';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -31,7 +34,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { checkIfNumberColumnEnabled } from '../../utils';
 
 import getPopupOptions from './getPopupOptions';
-import InsertButton from './InsertButton';
+import InsertButton, { DragAndDropInsertButton } from './InsertButton';
 
 export interface Props {
   editorView: EditorView;
@@ -42,6 +45,7 @@ export interface Props {
   insertRowButtonIndex?: number;
   isHeaderColumnEnabled?: boolean;
   isHeaderRowEnabled?: boolean;
+  isDragAndDropEnabled?: boolean;
   mountPoint?: HTMLElement;
   boundariesElement?: HTMLElement;
   scrollableElement?: HTMLElement;
@@ -73,6 +77,7 @@ export class FloatingInsertButton extends React.Component<
       boundariesElement,
       isHeaderColumnEnabled,
       isHeaderRowEnabled,
+      isDragAndDropEnabled,
       dispatchAnalyticsEvent,
     } = this.props;
 
@@ -196,16 +201,26 @@ export class FloatingInsertButton extends React.Component<
           type,
           index,
           hasNumberedColumns,
+          !!isDragAndDropEnabled,
           tableContainerWrapper,
         )}
         zIndex={zIndex}
       >
-        <InsertButton
-          type={type}
-          tableRef={tableRef}
-          onMouseDown={type === 'column' ? this.insertColumn : this.insertRow}
-          hasStickyHeaders={this.props.hasStickyHeaders || false}
-        />
+        {isDragAndDropEnabled ? (
+          <DragAndDropInsertButton
+            type={type}
+            tableRef={tableRef}
+            onMouseDown={type === 'column' ? this.insertColumn : this.insertRow}
+            hasStickyHeaders={this.props.hasStickyHeaders || false}
+          />
+        ) : (
+          <InsertButton
+            type={type}
+            tableRef={tableRef}
+            onMouseDown={type === 'column' ? this.insertColumn : this.insertRow}
+            hasStickyHeaders={this.props.hasStickyHeaders || false}
+          />
+        )}
       </Popup>
     );
   }

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

@@ -5,15 +5,17 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { token } from '@atlaskit/tokens';
 
 import {
   clearHoverSelection,
   hoverColumns,
   selectColumn,
 } from '../../../commands';
+import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import type { CellHoverMeta } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
-import { getSelectedColumnIndexes } from '../../../utils';
+import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
 
 export interface ColumnControlsProps {
@@ -27,6 +29,7 @@ export interface ColumnControlsProps {
   localId?: string;
   rowHeights?: number[];
   colWidths?: (number | undefined)[];
+  hasHeaderColumn?: boolean;
 }
 
 const getSelectedColumns = (selection: Selection) => {
@@ -51,10 +54,13 @@ export const ColumnControls = ({
   isInDanger,
   rowHeights,
   colWidths,
+  hasHeaderColumn,
 }: ColumnControlsProps) => {
   const widths =
     colWidths?.map((width) => (width ? `${width - 1}px` : '0px')).join(' ') ??
     '0px';
+  // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
+  const columnParams = getRowsParams(colWidths ?? []);
   const colIndex = hoveredCell?.colIndex;
   const selectedColIndexes = getSelectedColumns(editorView.state.selection);
 
@@ -94,8 +100,13 @@ export const ColumnControls = ({
     }
   }, [editorView, tableActive]);
 
+  const handleMouseUp = useCallback(() => {
+    const { state, dispatch } = editorView;
+    toggleDragMenu(undefined, 'column', colIndex)(state, dispatch);
+  }, [editorView, colIndex]);
+
   return (
-    <div className={ClassName.COLUMN_CONTROLS_WITH_DRAG}>
+    <div className={ClassName.DRAG_COLUMN_CONTROLS}>
       <div
         className={ClassName.COLUMN_CONTROLS_INNER}
         data-testid="table-floating-column-controls"
@@ -104,6 +115,33 @@ export const ColumnControls = ({
           marginTop,
         }}
       >
+        {!isResizing &&
+          columnParams.map(({ startIndex, endIndex }, index) => (
+            <div
+              style={{
+                gridColumn: `${index + 1} / span 1`,
+              }}
+              data-start-index={startIndex}
+              data-end-index={endIndex}
+              className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER}
+              contentEditable={false}
+              key={index}
+            >
+              {!hasHeaderColumn && index === 0 && (
+                <div
+                  style={{
+                    left: '0px',
+                    right: 'unset',
+                  }}
+                  className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
+                />
+              )}
+              <div
+                className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
+                style={columnParams.length - 1 === index ? { right: '0' } : {}}
+              />
+            </div>
+          ))}
         {tableActive &&
           !isResizing &&
           !!hoveredCell &&
@@ -111,7 +149,12 @@ export const ColumnControls = ({
             <div
               style={{
                 gridColumn: gridColumnPosition,
-                marginTop: `-15px`,
+                zIndex: 99,
+                display: 'flex',
+                width: '100%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                marginTop: token('space.negative.025', '-2px'),
               }}
               data-column-control-index={hoveredCell.colIndex}
               data-testid="table-floating-column-control"
@@ -132,6 +175,7 @@ export const ColumnControls = ({
                 onClick={handleClick}
                 onMouseOver={handleMouseOver}
                 onMouseOut={handleMouseOut}
+                onMouseUp={handleMouseUp}
               />
             </div>
           )}

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

@@ -12,7 +12,11 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { CellHoverMeta, DraggableSourceData } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
-import { getColumnsWidths, getRowHeights } from '../../utils';
+import {
+  containsHeaderColumn,
+  getColumnsWidths,
+  getRowHeights,
+} from '../../utils';
 
 import { ColumnControls } from './ColumnControls';
 import { ColumnDropTargets } from './ColumnDropTargets';
@@ -53,6 +57,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   const [hasDropTargets, setHasDropTargets] = useState(false);
   const node = getNode();
   const currentNodeLocalId = node?.attrs.localId;
+  const hasHeaderColumn = containsHeaderColumn(node);
 
   useEffect(() => {
     if (tableRef && window?.ResizeObserver) {
@@ -118,12 +123,13 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
 
   const mountTo = (tableRef && tableRef?.parentElement) || document.body;
 
+  if (!tableActive) {
+    return null;
+  }
+
   return ReactDOM.createPortal(
     <div
       className={ClassName.COLUMN_CONTROLS_WRAPPER}
-      style={{
-        pointerEvents: 'none',
-      }}
       data-testid="table-floating-column-controls-wrapper"
     >
       <ColumnControls
@@ -137,6 +143,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         isInDanger={isInDanger}
         rowHeights={rowHeights}
         colWidths={colWidths}
+        hasHeaderColumn={hasHeaderColumn}
       />
       {hasDropTargets && (
         <ColumnDropTargets

package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -4,23 +4,33 @@ import React, { useCallback, useMemo } from 'react';
 import { injectIntl } from 'react-intl-next';
 import type { WrappedComponentProps } from 'react-intl-next';
 
+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 { CellSelection } from '@atlaskit/editor-tables';
-import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../commands';
+import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import type { CellHoverMeta } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
-import { getRowHeights, getSelectedRowIndexes } from '../../../utils';
+import {
+  getRowHeights,
+  getRowsParams,
+  getSelectedRowIndexes,
+} from '../../../utils';
 import { DragHandle } from '../../DragHandle';
 
 type DragControlsProps = {
   editorView: EditorView;
   tableRef: HTMLTableElement;
+  tableNode?: PmNode;
   tableActive?: boolean;
   hoveredCell?: CellHoverMeta;
   isInDanger?: boolean;
+  isResizing?: boolean;
+  hasHeaderRow?: boolean;
   hoverRows: (rows: number[], danger?: boolean) => void;
   selectRow: (row: number, expand: boolean) => void;
   updateCellHoverLocation: (rowIndex: number) => void;
@@ -39,18 +49,31 @@ const getSelectedRows = (selection: Selection) => {
 
 const DragControlsComponent = ({
   tableRef,
+  tableNode,
   hoveredCell,
   tableActive,
   editorView,
   isInDanger,
+  isResizing,
+  hasHeaderRow,
   hoverRows,
   selectRow,
   updateCellHoverLocation,
 }: DragControlsProps & WrappedComponentProps) => {
   const rowHeights = getRowHeights(tableRef);
+  const rowsParams = getRowsParams(rowHeights);
   const heights = rowHeights.map((height) => `${height - 1}px`).join(' ');
   const selectedRowIndexes = getSelectedRows(editorView.state.selection);
   const rowWidth = tableRef.offsetWidth;
+
+  const onMouseUp = useCallback(() => {
+    toggleDragMenu(
+      undefined,
+      'row',
+      hoveredCell?.rowIndex,
+    )(editorView.state, editorView.dispatch);
+  }, [editorView, hoveredCell?.rowIndex]);
+
   const rowIndex = hoveredCell?.rowIndex;
 
   const gridRowPosition = useMemo(() => {
@@ -61,11 +84,6 @@ const DragControlsComponent = ({
     return `${rowIndex! + 1} / span 1`;
   }, [rowIndex, selectedRowIndexes]);
 
-  const getLocalId = () => {
-    const tableNode = findTable(editorView.state.selection);
-    return tableNode?.node?.attrs?.localId || '';
-  };
-
   const handleMouseOut = useCallback(() => {
     if (tableActive) {
       const { state, dispatch } = editorView;
@@ -75,25 +93,21 @@ const DragControlsComponent = ({
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
-      // avoid updating if event target is drag handle
-      if (
-        !(e.nativeEvent.target as Element).classList.contains(
-          ClassName.ROW_CONTROLS_WITH_DRAG,
-        )
-      ) {
+      const isParentDragControls = (e.nativeEvent.target as Element).closest(
+        `.${ClassName.DRAG_ROW_CONTROLS}`,
+      );
+      const rowIndex = (e.nativeEvent.target as Element).getAttribute(
+        'data-start-index',
+      );
+
+      // avoid updating if event target is not related
+      if (!isParentDragControls || !rowIndex) {
         return;
       }
 
-      const hoverHeight = e.nativeEvent.offsetY;
-      let totalHeight = 0;
-      const rowIndex = rowHeights.findIndex((row) => {
-        totalHeight += row;
-        return hoverHeight <= totalHeight;
-      });
-
-      updateCellHoverLocation(rowIndex);
+      updateCellHoverLocation(Number(rowIndex));
     },
-    [updateCellHoverLocation, rowHeights],
+    [updateCellHoverLocation],
   );
 
   const handleMouseOver = useCallback(() => {
@@ -109,13 +123,37 @@ const DragControlsComponent = ({
 
   return (
     <div
-      className={ClassName.ROW_CONTROLS_WITH_DRAG}
+      className={ClassName.DRAG_ROW_CONTROLS}
       style={{
         gridTemplateRows: heights,
       }}
       onMouseMove={handleMouseMove}
     >
-      {Number.isFinite(rowIndex) && (
+      {!isResizing &&
+        rowsParams.map(({ startIndex, endIndex }, index) => (
+          <div
+            style={{
+              gridRow: `${index + 1} / span 1`,
+            }}
+            data-start-index={startIndex}
+            data-end-index={endIndex}
+            className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER}
+            contentEditable={false}
+            key={index}
+          >
+            {!hasHeaderRow && index === 0 && (
+              <div
+                style={{
+                  top: '0px',
+                  left: token('space.075', '6px'),
+                }}
+                className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT}
+              />
+            )}
+            <div className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT} />
+          </div>
+        ))}
+      {!isResizing && Number.isFinite(rowIndex) && (
         <div
           style={{
             gridRow: gridRowPosition,
@@ -124,9 +162,10 @@ const DragControlsComponent = ({
             alignItems: 'center',
             justifyContent: 'center',
           }}
+          data-testid="table-floating-row-drag-handle"
         >
           <DragHandle
-            tableLocalId={getLocalId()}
+            tableLocalId={tableNode?.attrs?.localId ?? ''}
             indexes={[rowIndex!]}
             previewWidth={rowWidth}
             previewHeight={rowHeights[rowIndex!]}
@@ -140,6 +179,7 @@ const DragControlsComponent = ({
             onClick={handleClick}
             onMouseOver={handleMouseOver}
             onMouseOut={handleMouseOut}
+            onMouseUp={onMouseUp}
           />
         </div>
       )}

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

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import { browser } from '@atlaskit/editor-common/utils';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
@@ -19,6 +20,7 @@ export interface Props {
   editorView: EditorView;
   selection?: Selection;
   tableRef?: HTMLTableElement;
+  tableNode?: PmNode;
   tableActive?: boolean;
   isInDanger?: boolean;
   isResizing?: boolean;
@@ -32,6 +34,7 @@ export interface Props {
   hoveredCell?: CellHoverMeta;
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
+  insertRowButtonIndex?: number;
 }
 
 interface State {
@@ -111,6 +114,7 @@ export default class TableFloatingControls extends Component<Props, State> {
     const {
       editorView,
       tableRef,
+      tableNode,
       isInDanger,
       isResizing,
       isNumberColumnEnabled,
@@ -157,10 +161,13 @@ export default class TableFloatingControls extends Component<Props, State> {
             {isDragAndDropEnabled ? (
               <DragControls
                 tableRef={tableRef}
+                tableNode={tableNode}
                 hoveredCell={hoveredCell}
                 editorView={editorView}
                 tableActive={tableActive}
                 isInDanger={isInDanger}
+                isResizing={isResizing}
+                hasHeaderRow={hasHeaderRow}
                 hoverRows={this.hoverRows}
                 selectRow={this.selectRow}
                 updateCellHoverLocation={this.updateCellHoverLocation}

package/src/plugins/table/ui/common-styles.ts

@@ -56,6 +56,7 @@ import {
   columnControlsDecoration,
   columnControlsLineMarker,
   DeleteButton,
+  dragInsertButtonWrapper,
   floatingColumnControls,
   HeaderButton,
   HeaderButtonDanger,
@@ -357,6 +358,8 @@ export const tableStyles = (
       ${insertRowButtonWrapper(props)}
     }
 
+    ${dragInsertButtonWrapper(props)}
+
     /* Delete button */
     ${DeleteButton(props)}
     /* Ends Delete button */
@@ -700,12 +703,64 @@ export const tableStyles = (
       )}
     }
 
-    .${ClassName.ROW_CONTROLS_WITH_DRAG} {
+    .${ClassName.DRAG_ROW_CONTROLS} {
       display: grid;
       align-items: center;
       position: absolute;
       left: -4px;
       z-index: ${akEditorUnitZIndex};
+
+      .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
+        align-self: end;
+        position: absolute;
+        height: 100%;
+        width: 24px;
+      }
+
+      .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT} {
+        position: absolute;
+        bottom: -3px;
+        left: 6px;
+        background-color: ${token(
+          'color.background.accent.gray.subtler',
+          '#C1C7D0',
+        )};
+        height: 4px;
+        width: 4px;
+        border-radius: 50%;
+      }
+    }
+
+    .${ClassName.DRAG_COLUMN_CONTROLS} {
+      .${ClassName.COLUMN_CONTROLS_INNER} {
+        height: 24px;
+        position: absolute;
+        top: ${token('space.negative.150', '-12px')};
+        z-index: ${akEditorUnitZIndex};
+      }
+
+      .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER} {
+        position: absolute;
+        height: 24px;
+        width: 100%;
+      }
+
+      .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT} {
+        background-color: ${token(
+          'color.background.accent.gray.subtler',
+          '#C1C7D0',
+        )};
+        height: 4px;
+        width: 4px;
+        border-radius: 50%;
+        position: absolute;
+        right: -2px;
+      }
+    }
+
+    .${ClassName.CONTROLS_FLOATING_BUTTON_ROW}
+      .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
+      bottom: -1px;
     }
 
     .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
@@ -719,10 +774,10 @@ export const tableStyles = (
       display: flex;
       justify-content: center;
       align-items: center;
+      outline: none !important;
 
       svg {
         rect {
-          //
           fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
         }
         g {

package/src/plugins/table/ui/consts.ts

@@ -149,3 +149,5 @@ export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;
 export const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+
+export const dragMenuDropdownWidth = 240;

package/src/plugins/table/ui/ui-styles.ts

@@ -180,6 +180,32 @@ const InsertButtonHover = () => css`
   }
 `;
 
+export const dragInsertButtonWrapper = (props: ThemeProps) => css`
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
+    position: absolute;
+    z-index: ${akEditorUnitZIndex + 10};
+    bottom: -5px;
+    left: 3px;
+  }
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
+    ${Button(`
+    background: ${token('elevation.surface.overlay', 'white')};
+    color: ${token('color.icon', N300)};
+    border: 1px solid ${token(
+      'color.background.accent.gray.subtler',
+      '#C1C7D0',
+    )};
+    border-radius: 50%;
+  `)}
+  }
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON}:hover {
+    background: ${token('color.background.brand.bold', B300)};
+    border: 1px solid ${token('color.background.brand.bold', B300)};
+    color: ${token('color.icon.inverse', 'white')};
+    cursor: pointer;
+  }
+`;
+
 export const insertColumnButtonWrapper = (props: ThemeProps) => css`
   ${InsertButton()}
   ${InsertButtonHover()}
@@ -388,7 +414,7 @@ export const floatingColumnControls = (props: ThemeProps) => {
       }
     }
 
-    .${ClassName.COLUMN_CONTROLS_WITH_DRAG} {
+    .${ClassName.DRAG_COLUMN_CONTROLS} {
       box-sizing: border-box;
 
       .${ClassName.COLUMN_CONTROLS_INNER} {

package/src/plugins/table/utils/dom.ts

@@ -40,10 +40,6 @@ export const isRowControlsButton = (node: HTMLElement | null): boolean =>
   containsClassName(node, ClassName.ROW_CONTROLS_BUTTON) ||
   containsClassName(node, ClassName.NUMBERED_COLUMN_BUTTON);
 
-export const isRowDragControlsButton = (node: HTMLElement | null) =>
-  containsClassName(node, ClassName.ROW_CONTROLS_WITH_DRAG) ||
-  closestElement(node, `.${ClassName.ROW_CONTROLS_WITH_DRAG}`);
-
 export const isResizeHandleDecoration = (node: HTMLElement | null): boolean =>
   containsClassName(node, ClassName.RESIZE_HANDLE_DECORATION);
 
@@ -55,6 +51,17 @@ export const isTableContainerOrWrapper = (node: HTMLElement | null): boolean =>
   containsClassName(node, ClassName.TABLE_CONTAINER) ||
   containsClassName(node, ClassName.TABLE_NODE_WRAPPER);
 
+/** drag-and-drop classes */
+export const isRowDragControlsButton = (node: HTMLElement | null) =>
+  containsClassName(node, ClassName.DRAG_ROW_CONTROLS) ||
+  closestElement(node, `.${ClassName.DRAG_ROW_CONTROLS}`);
+
+export const isDragRowFloatingInsertDot = (node: HTMLElement | null) =>
+  containsClassName(node, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER);
+
+export const isDragColumnFloatingInsertDot = (node: HTMLElement | null) =>
+  containsClassName(node, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
+
 /*
  * This function returns which side of a given element the mouse cursor is,
  * using as a base the half of the width by default, for example: