@atlaskit/editor-plugin-table 5.2.1 → 5.3.0

package/src/plugins/table/pm-plugins/table-selection-keymap.ts

@@ -2,12 +2,18 @@ import {
   bindKeymapWithCommand,
   moveLeft,
   moveRight,
+  shiftArrowUp,
 } from '@atlaskit/editor-common/keymaps';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import { arrowLeftFromTable, arrowRightFromTable } from '../commands/selection';
+import {
+  arrowLeftFromTable,
+  arrowRightFromTable,
+  shiftArrowUpFromTable,
+} from '../commands/selection';
 import type tablePlugin from '../index';
 
 export function tableSelectionKeymapPlugin(
@@ -29,6 +35,14 @@ export function tableSelectionKeymapPlugin(
     list,
   );
 
+  if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
+    bindKeymapWithCommand(
+      shiftArrowUp.common!,
+      shiftArrowUpFromTable(editorSelectionAPI)(),
+      list,
+    );
+  }
+
   return keymap(list) as SafePlugin;
 }
 

package/src/plugins/table/toolbar.tsx

@@ -420,7 +420,9 @@ export const getToolbarCellOptionsConfig = (
   };
 };
 
-const getClosestSelectionRect = (state: EditorState): Rect | undefined => {
+export const getClosestSelectionRect = (
+  state: EditorState,
+): Rect | undefined => {
   const selection = state.selection;
   return isSelectionType(selection, 'cell')
     ? getSelectionRect(selection)!

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;

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

@@ -55,6 +55,7 @@ import {
   columnControlsDecoration,
   columnControlsLineMarker,
   DeleteButton,
+  floatingColumnControls,
   HeaderButton,
   HeaderButtonDanger,
   HeaderButtonHover,
@@ -515,6 +516,10 @@ export const tableStyles = (
         }
       }
 
+      .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+        padding: 0 ${tablePadding}px;
+      }
+
       &.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
         padding-left: ${akEditorTableNumberColumnWidth + tablePadding - 1}px;
       }
@@ -670,6 +675,8 @@ export const tableStyles = (
       )}
     }
 
+    ${floatingColumnControls(props)}
+
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
       ${HeaderButtonHover(props)}
       ${HeaderButtonDanger(props)}
@@ -855,6 +862,12 @@ export const tableStyles = (
     .${ClassName.ROW_CONTROLS_WRAPPER} {
       left: -${tableToolbarSize}px;
     }
+
+    .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+      position: absolute;
+      top: ${tableMarginTop + 1}px;
+    }
+
     ${tableWrapperStyles()}
   }
 

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

@@ -374,6 +374,20 @@ const getFloatingDotOverrides = (props: ThemeProps) => {
     : '';
 };
 
+export const floatingColumnControls = (props: ThemeProps) => {
+  return css`
+    .${ClassName.COLUMN_DROP_TARGET_CONTROLS} {
+      box-sizing: border-box;
+      position: absolute;
+
+      .${ClassName.COLUMN_CONTROLS_INNER} {
+        display: flex;
+        flex-direction: row;
+      }
+    }
+  `;
+};
+
 export const columnControlsDecoration = (props: ThemeProps) => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`