@atlaskit/editor-plugin-table 5.3.8 → 5.3.10

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

@@ -1,37 +1,26 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React 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';
+
+import { ColumnDropTarget } from './ColumnDropTarget';
 
 export interface Props {
-  editorView: EditorView;
   tableRef: HTMLTableElement;
   stickyTop?: number;
   tableHeight?: number;
   localId?: string;
+  rowHeights?: number[];
+  colWidths?: (number | undefined)[];
 }
 
 export const ColumnDropTargets: React.FC<Props> = ({
-  editorView,
   tableRef,
   tableHeight,
   stickyTop,
   localId,
+  rowHeights,
+  colWidths,
 }) => {
-  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;
   }
@@ -45,12 +34,15 @@ export const ColumnDropTargets: React.FC<Props> = ({
     hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
 
   return (
-    <div className={ClassName.COLUMN_DROP_TARGET_CONTROLS}>
+    <div
+      className={ClassName.COLUMN_DROP_TARGET_CONTROLS}
+      contentEditable={false}
+    >
       <div
         className={ClassName.COLUMN_CONTROLS_INNER}
         data-testid="table-floating-column-controls-drop-targets"
       >
-        {colWidths.map((width, index) => {
+        {colWidths?.map((width, index) => {
           return (
             <ColumnDropTarget
               key={index}
@@ -66,63 +58,3 @@ export const ColumnDropTargets: React.FC<Props> = ({
     </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

@@ -4,13 +4,15 @@ import ReactDOM from 'react-dom';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { findTable } from '@atlaskit/editor-tables';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { CellHoverCoordinates } from '../../types';
+import type { CellHoverMeta, DraggableSourceData } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
+import { getColumnsWidths, getRowHeights } from '../../utils';
 
 import { ColumnControls } from './ColumnControls';
 import { ColumnDropTargets } from './ColumnDropTargets';
@@ -20,11 +22,12 @@ export interface Props {
   getEditorFeatureFlags: GetEditorFeatureFlags;
   selection?: Selection;
   tableRef?: HTMLTableElement;
+  getNode: () => PmNode;
   tableActive?: boolean;
   hasHeaderRow?: boolean;
   headerRowHeight?: number;
   hoveredRows?: number[];
-  hoveredCell?: CellHoverCoordinates;
+  hoveredCell?: CellHoverMeta;
   isResizing?: boolean;
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
@@ -33,6 +36,7 @@ export interface Props {
 export const TableFloatingColumnControls: React.FC<Props> = ({
   editorView,
   tableRef,
+  getNode,
   tableActive,
   hasHeaderRow,
   hoveredCell,
@@ -44,6 +48,10 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
     { width: 0, height: 0 },
   );
 
+  const [hasDropTargets, setHasDropTargets] = useState(false);
+  const node = getNode();
+  const currentNodeLocalId = node?.attrs.localId;
+
   useEffect(() => {
     if (tableRef && window?.ResizeObserver) {
       const resizeObserver = new ResizeObserver((entries) => {
@@ -67,23 +75,40 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
     }
   }, [tableRef]);
 
-  const selectedLocalId = useMemo(() => {
-    if (!selection) {
-      return undefined;
-    }
-
-    const tableNode = findTable(selection);
-    if (!tableNode) {
-      return undefined;
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor({ source }) {
+        const { type, localId, indexes } =
+          source.data as Partial<DraggableSourceData>;
+        return (
+          type === 'table-column' &&
+          !!indexes?.length &&
+          localId === currentNodeLocalId
+        );
+      },
+      onDragStart() {
+        setHasDropTargets(true);
+      },
+      onDrop() {
+        setHasDropTargets(false);
+      },
+    });
+  }, [editorView, currentNodeLocalId]);
+
+  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 && !!tableRect.height) {
+      return getRowHeights(tableRef);
     }
-
-    return tableNode.node.attrs.localId;
-  }, [selection]);
+    return [0];
+  }, [tableRef, tableRect.height]);
 
   if (!tableRef) {
     return null;
   }
 
+  const colWidths = getColumnsWidths(editorView);
+
   const stickyTop =
     stickyHeader && stickyHeader.sticky && hasHeaderRow
       ? stickyHeader.top
@@ -92,29 +117,34 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   const mountTo = (tableRef && tableRef?.parentElement) || document.body;
 
   return ReactDOM.createPortal(
-    <div className={ClassName.COLUMN_CONTROLS_WRAPPER}>
-      <div
-        onMouseDown={(e) => e.preventDefault()}
-        data-testid="table-floating-column-controls-wrapper"
-      >
-        <ColumnControls
-          editorView={editorView}
-          hoveredCell={hoveredCell}
-          tableRef={tableRef}
-          isResizing={isResizing}
-          tableActive={tableActive}
-          stickyTop={tableActive ? stickyTop : undefined}
-          tableHeight={tableRect.height}
-          localId={selectedLocalId}
-        />
+    <div
+      className={ClassName.COLUMN_CONTROLS_WRAPPER}
+      style={{
+        pointerEvents: 'none',
+      }}
+      data-testid="table-floating-column-controls-wrapper"
+    >
+      <ColumnControls
+        editorView={editorView}
+        hoveredCell={hoveredCell}
+        tableRef={tableRef}
+        isResizing={isResizing}
+        tableActive={tableActive}
+        stickyTop={tableActive ? stickyTop : undefined}
+        localId={currentNodeLocalId}
+        rowHeights={rowHeights}
+        colWidths={colWidths}
+      />
+      {hasDropTargets && (
         <ColumnDropTargets
-          editorView={editorView}
           tableRef={tableRef}
           stickyTop={tableActive ? stickyTop : undefined}
           tableHeight={tableRect.height}
-          localId={selectedLocalId}
+          localId={currentNodeLocalId}
+          rowHeights={rowHeights}
+          colWidths={colWidths}
         />
-      </div>
+      )}
     </div>,
     mountTo,
   );

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

@@ -6,7 +6,7 @@ import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
-import type { CellHoverCoordinates } from '../../../types';
+import type { CellHoverMeta } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -15,7 +15,7 @@ type DragControlsProps = {
   editorView: EditorView;
   tableRef: HTMLTableElement;
   tableActive?: boolean;
-  hoveredCell?: CellHoverCoordinates;
+  hoveredCell?: CellHoverMeta;
   hoverRows?: (rows: number[], danger?: boolean) => void;
   selectRow?: (row: number, expand: boolean) => void;
 };

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

@@ -7,7 +7,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import { hoverRows, selectRow } from '../../commands';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { CellHoverCoordinates } from '../../types';
+import type { CellHoverMeta } from '../../types';
 import { isSelectionUpdated } from '../../utils';
 
 import { CornerControls } from './CornerControls';
@@ -28,7 +28,7 @@ export interface Props {
   hasHeaderRow?: boolean;
   headerRowHeight?: number;
   hoveredRows?: number[];
-  hoveredCell?: CellHoverCoordinates;
+  hoveredCell?: CellHoverMeta;
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
 }

package/src/plugins/table/ui/icons/index.ts

@@ -0,0 +1,2 @@
+export { DragHandleIcon } from './DragHandleIcon';
+export { DragInMotionIcon } from './DragInMotionIcon';

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

@@ -381,7 +381,6 @@ export const floatingColumnControls = (props: ThemeProps) => {
       box-sizing: border-box;
       position: absolute;
       top: 0;
-      z-index: -1;
 
       .${ClassName.COLUMN_CONTROLS_INNER} {
         display: flex;