@atlaskit/editor-plugin-table 5.3.7 → 5.3.9

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

@@ -1,13 +1,20 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
+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, DraggableSourceData } from '../../types';
+import { TableCssClassName as ClassName } from '../../types';
+import { getColumnsWidths, getRowHeights } from '../../utils';
 
+import { ColumnControls } from './ColumnControls';
 import { ColumnDropTargets } from './ColumnDropTargets';
 
 export interface Props {
@@ -15,10 +22,13 @@ export interface Props {
   getEditorFeatureFlags: GetEditorFeatureFlags;
   selection?: Selection;
   tableRef?: HTMLTableElement;
+  getNode: () => PmNode;
   tableActive?: boolean;
   hasHeaderRow?: boolean;
   headerRowHeight?: number;
   hoveredRows?: number[];
+  hoveredCell?: CellHoverCoordinates;
+  isResizing?: boolean;
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
 }
@@ -26,8 +36,11 @@ export interface Props {
 export const TableFloatingColumnControls: React.FC<Props> = ({
   editorView,
   tableRef,
+  getNode,
   tableActive,
   hasHeaderRow,
+  hoveredCell,
+  isResizing,
   stickyHeader,
   selection,
 }) => {
@@ -35,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) => {
@@ -58,43 +75,78 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
     }
   }, [tableRef]);
 
-  const selectedLocalId = useMemo(() => {
-    if (!selection) {
-      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 tableNode = findTable(selection);
-    if (!tableNode) {
-      return undefined;
+  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
       : undefined;
 
-  return (
+  const mountTo = (tableRef && tableRef?.parentElement) || document.body;
+
+  return ReactDOM.createPortal(
     <div
-      onMouseDown={(e) => e.preventDefault()}
+      className={ClassName.COLUMN_CONTROLS_WRAPPER}
+      style={{
+        pointerEvents: 'none',
+      }}
       data-testid="table-floating-column-controls-wrapper"
     >
-      {tableActive && (
+      <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/common-styles.ts

@@ -69,6 +69,7 @@ import {
   insertRowButtonWrapper,
   OverflowShadow,
   resizeHandle,
+  rowControlsWrapperDotStyle,
 } from './ui-styles';
 
 const cornerControlHeight = tableToolbarSize + 1;
@@ -573,6 +574,7 @@ export const tableStyles = (
     ${breakoutWidthStyling()}
 
     ${columnControlsDecoration(props)};
+    ${rowControlsWrapperDotStyle(props)};
 
     /* Corner controls */
     .${ClassName.CORNER_CONTROLS} {
@@ -833,10 +835,6 @@ export const tableStyles = (
         margin-top: 0;
       }
 
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG} + * {
-        margin-top: 0;
-      }
-
       /*
        * Headings have a top margin by default, but we don't want this on the
        * first heading within table header cells.

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

@@ -380,27 +380,50 @@ export const floatingColumnControls = (props: ThemeProps) => {
     .${ClassName.COLUMN_DROP_TARGET_CONTROLS} {
       box-sizing: border-box;
       position: absolute;
+      top: 0;
 
       .${ClassName.COLUMN_CONTROLS_INNER} {
         display: flex;
         flex-direction: row;
       }
     }
+
+    .${ClassName.COLUMN_CONTROLS_WITH_DRAG} {
+      box-sizing: border-box;
+
+      .${ClassName.COLUMN_CONTROLS_INNER} {
+        display: grid;
+        justify-items: center;
+      }
+    }
   `;
 };
 
-export const columnControlsDecoration = (props: ThemeProps) => {
+export const rowControlsWrapperDotStyle = (props: ThemeProps) => {
   if (getBooleanFF('platform.editor.table.drag-and-drop')) {
     return css`
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG} {
+      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
+        display: none;
+      }
+    `;
+  } else {
+    return css`
+      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
+        content: ' ';
+        background-color: ${tableBorderColor(props)};
         position: absolute;
-        // kinda a hacky way to center an element with absolute positioning inside a relative element
-        top: 25%;
-        left: 50%;
-        transform: translate(-50%, -100%);
+        height: ${lineMarkerSize}px;
+        width: ${lineMarkerSize}px;
+        border-radius: 50%;
+        pointer-events: none;
+        top: -${tableToolbarSize + tableCellBorderWidth}px;
+        right: -1px;
       }
     `;
   }
+};
+
+export const columnControlsDecoration = (props: ThemeProps) => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
       .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
@@ -452,18 +475,6 @@ export const columnControlsDecoration = (props: ThemeProps) => {
       // floating dot for adding column button - overriding style on last column to avoid scroll
       ${getFloatingDotOverrides(props)}
 
-      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
-        content: ' ';
-        background-color: ${tableBorderColor(props)};
-        position: absolute;
-        height: ${lineMarkerSize}px;
-        width: ${lineMarkerSize}px;
-        border-radius: 50%;
-        pointer-events: none;
-        top: -${tableToolbarSize + tableCellBorderWidth}px;
-        right: -1px;
-      }
-
       .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
         display: block;
       }
@@ -572,18 +583,6 @@ export const columnControlsDecoration = (props: ThemeProps) => {
       // floating dot for adding column button - overriding style on last column to avoid scroll
       ${getFloatingDotOverrides(props)}
 
-      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
-        content: ' ';
-        background-color: ${tableBorderColor(props)};
-        position: absolute;
-        height: ${lineMarkerSize}px;
-        width: ${lineMarkerSize}px;
-        border-radius: 50%;
-        pointer-events: none;
-        top: -${tableToolbarSize + tableCellBorderWidth}px;
-        right: -1px;
-      }
-
       .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
         display: block;
       }

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

@@ -24,14 +24,9 @@ import {
 } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import type {
-  Cell,
-  CellColumnPositioning,
-  CellHoverCoordinates,
-} from '../types';
+import type { Cell, CellColumnPositioning } from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
-import { DragHandle } from '../ui/DragHandle';
 
 const filterDecorationByKey = (
   key: TableDecorations,
@@ -212,48 +207,11 @@ export const createColumnSelectedDecoration = (
 
 export const createColumnControlsDecoration = (
   selection: Selection,
-  hoverLocation?: CellHoverCoordinates,
 ): Decoration[] => {
-  // todo: issue here where table may not be selected yet
   const cells: ContentNodeWithPos[] = getCellsInRow(0)(selection) || [];
-  const table = findTable(selection);
 
-  if (
-    getBooleanFF('platform.editor.table.drag-and-drop') &&
-    hoverLocation &&
-    !Number.isNaN(hoverLocation?.colIndex) &&
-    table
-  ) {
-    const colIndex = hoverLocation.colIndex as number;
-    const cell = cells[colIndex];
-    return [
-      Decoration.widget(
-        cell.pos + 1,
-        () => {
-          const element = document.createElement('div');
-          element.classList.add(
-            ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG,
-          );
-          ReactDOM.render(
-            createElement(DragHandle, {
-              tableLocalId: table.node.attrs.localId,
-              direction: 'column',
-              indexes: [colIndex],
-            }),
-            element,
-          );
-          return element;
-        },
-        {
-          key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${colIndex}`,
-          // this decoration should be the first one, even before gap cursor.
-          side: -100,
-          destroy: (node) => {
-            ReactDOM.unmountComponentAtNode(node as HTMLDivElement);
-          },
-        },
-      ),
-    ];
+  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
+    return [];
   } else {
     let index = 0;
     return cells.map((cell) => {

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

@@ -36,10 +36,6 @@ export const isColumnControlsDecorations = (
   node: HTMLElement | null,
 ): boolean => containsClassName(node, ClassName.COLUMN_CONTROLS_DECORATIONS);
 
-export const isColumnDragControlsDecorations = (node: HTMLElement | null) =>
-  containsClassName(node, ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG) ||
-  closestElement(node, `.${ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG}`);
-
 export const isRowControlsButton = (node: HTMLElement | null): boolean =>
   containsClassName(node, ClassName.ROW_CONTROLS_BUTTON) ||
   containsClassName(node, ClassName.NUMBERED_COLUMN_BUTTON);

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

@@ -46,7 +46,6 @@ export {
   isColumnControlsDecorations,
   isTableControlsButton,
   isTableContainerOrWrapper,
-  isColumnDragControlsDecorations,
   isRowDragControlsButton,
   isRowControlsButton,
   getColumnOrRowIndex,