@atlaskit/editor-plugin-table 5.3.11 → 5.3.13

package/src/plugins/table/ui/FloatingDeleteButton/types.ts

@@ -1 +1,3 @@
-export type CellSelectionType = 'column' | 'row' | undefined;
+import type { TableDirection } from '../../types';
+
+export type CellSelectionType = TableDirection | undefined;

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

@@ -0,0 +1,99 @@
+import React from 'react';
+
+import type { Command } from '@atlaskit/editor-common/types';
+import {
+  ArrowKeyNavigationType,
+  DropdownMenu,
+} from '@atlaskit/editor-common/ui-menu';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+
+import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
+import type { PluginConfig, TableDirection } from '../../types';
+import type { DragMenuConfig } from '../../utils/drag-menu';
+import { getDragMenuConfig } from '../../utils/drag-menu';
+import { dragMenuDropdownWidth } from '../consts';
+
+type DragMenuProps = {
+  direction?: TableDirection;
+  index?: number;
+  tableRef?: HTMLTableElement;
+  tableNode?: PmNode;
+  editorView: EditorView;
+  isOpen?: boolean;
+  targetCellPosition?: number;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
+  pluginConfig?: PluginConfig;
+};
+
+const convertToDropdownItems = (dragMenuConfig: DragMenuConfig[]) => {
+  let menuItems: MenuItem[] = [];
+  let menuCallback: { [key: string]: Command } = {};
+  dragMenuConfig.forEach((item) => {
+    menuItems.push({
+      key: item.id,
+      content: item.title,
+      value: { name: item.id },
+      isDisabled: item.disabled,
+    });
+    item.onClick && (menuCallback[item.id] = item.onClick);
+  });
+  return { menuItems, menuCallback };
+};
+
+export const DragMenu = ({
+  direction = 'row',
+  index,
+  isOpen,
+  editorView,
+  tableNode,
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
+}: DragMenuProps) => {
+  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+
+  const dragMenuConfig = getDragMenuConfig(direction, tableMap, index);
+
+  const { menuItems, menuCallback } = convertToDropdownItems(dragMenuConfig);
+
+  const closeMenu = () => {
+    const { state, dispatch } = editorView;
+    toggleDragMenu(false)(state, dispatch);
+  };
+
+  const onMenuItemActivated = ({ item }: { item: MenuItem }) => {
+    menuCallback[item.value.name]?.(editorView.state, editorView.dispatch);
+    closeMenu();
+  };
+
+  if (!menuItems) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu
+      mountTo={mountPoint}
+      //This needs be removed when the a11y is completely handled
+      //Disabling key navigation now as it works only partially
+      arrowKeyNavigationProviderOptions={{
+        type: ArrowKeyNavigationType.MENU,
+        disableArrowKeyNavigation: true,
+      }}
+      items={[
+        {
+          items: menuItems,
+        },
+      ]}
+      isOpen={isOpen}
+      onOpenChange={closeMenu}
+      onItemActivated={onMenuItemActivated}
+      fitWidth={dragMenuDropdownWidth}
+      boundariesElement={boundariesElement}
+    />
+  );
+};

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

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { Popup } from '@atlaskit/editor-common/ui';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+
+import type { TableDirection } from '../../types';
+import { dragMenuDropdownWidth } from '../consts';
+
+import { DragMenu } from './DragMenu';
+
+export interface Props {
+  editorView: EditorView;
+  isOpen: boolean;
+  tableRef?: HTMLTableElement;
+  tableNode?: PmNode;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
+  direction?: TableDirection;
+  index?: number;
+  targetCellPosition?: number;
+}
+
+const FloatingDragMenu = ({
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
+  editorView,
+  isOpen,
+  tableRef,
+  tableNode,
+  direction,
+  index,
+  targetCellPosition,
+}: Props) => {
+  if (
+    !isOpen ||
+    !targetCellPosition ||
+    editorView.state.doc.nodeSize <= targetCellPosition
+  ) {
+    return null;
+  }
+
+  const domAtPos = editorView.domAtPos.bind(editorView);
+  const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+  if (!targetCellRef) {
+    return null;
+  }
+
+  // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
+  return (
+    <Popup
+      alignX="left"
+      alignY="top"
+      target={targetCellRef as HTMLElement}
+      mountTo={mountPoint}
+      boundariesElement={boundariesElement}
+      scrollableElement={scrollableElement}
+      fitWidth={dragMenuDropdownWidth}
+      // z-index value below is to ensure that this menu is above other floating menu
+      // in table, but below floating dialogs like typeaheads, pickers, etc.
+      zIndex={akEditorFloatingOverlapPanelZIndex}
+      forcePlacement={true}
+      offset={[7, 0]}
+      stick={true}
+    >
+      <DragMenu
+        editorView={editorView}
+        isOpen={isOpen}
+        boundariesElement={boundariesElement}
+        tableNode={tableNode}
+        direction={direction}
+        index={index}
+      />
+    </Popup>
+  );
+};
+
+FloatingDragMenu.displayName = 'FloatingDragMenu';
+
+export default FloatingDragMenu;

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

@@ -14,12 +14,13 @@ import { closestElement } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import Tooltip from '@atlaskit/tooltip';
 
+import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import { tableToolbarSize } from '../consts';
 import tableMessages from '../messages';
 
 export interface ButtonProps {
-  type: 'row' | 'column';
+  direction: TableDirection;
   tableRef: HTMLElement;
   onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
   hasStickyHeaders: boolean;
@@ -69,14 +70,14 @@ const getInsertLineWidth = (tableRef: HTMLElement) => {
   );
 };
 
-const tooltipMessageByType = (type: string) => {
+const tooltipMessageByType = (type: TableDirection) => {
   return type === 'row' ? tableMessages.insertRow : tableMessages.insertColumn;
 };
 
 const InsertButton = ({
   onMouseDown,
   tableRef,
-  type,
+  direction,
   intl: { formatMessage },
   hasStickyHeaders,
 }: ButtonProps & WrappedComponentProps) => {
@@ -84,8 +85,8 @@ const InsertButton = ({
     <Tooltip
       content={
         <ToolTipContent
-          description={formatMessage(tooltipMessageByType(type))}
-          keymap={type === 'row' ? addRowAfter : addColumnAfter}
+          description={formatMessage(tooltipMessageByType(direction))}
+          keymap={direction === 'row' ? addRowAfter : addColumnAfter}
         />
       }
       position="top"
@@ -109,7 +110,7 @@ const InsertButton = ({
         <div
           className={ClassName.CONTROLS_INSERT_LINE}
           style={
-            type === 'row'
+            direction === 'row'
               ? { width: getInsertLineWidth(tableRef) }
               : { height: getInsertLineHeight(tableRef, hasStickyHeaders) }
           }
@@ -119,7 +120,7 @@ const InsertButton = ({
   );
 
   const floatingButtonClassName =
-    type === 'column'
+    direction === 'column'
       ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN
       : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
 

package/src/plugins/table/ui/FloatingInsertButton/getPopupOptions.ts

@@ -1,6 +1,7 @@
 import type { PopupProps } from '@atlaskit/editor-common/ui';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 
+import type { TableDirection } from '../../types';
 import {
   tableInsertColumnButtonOffset,
   tableInsertColumnButtonSize,
@@ -104,12 +105,12 @@ function getColumnOptions(
 }
 
 function getPopupOptions(
-  type: 'column' | 'row',
+  direction: TableDirection,
   index: number,
   hasNumberedColumns: boolean,
   tableContainer: HTMLElement | null,
 ): Partial<PopupProps> {
-  switch (type) {
+  switch (direction) {
     case 'column':
       return getColumnOptions(index, tableContainer, hasNumberedColumns);
     case 'row':

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';
@@ -201,7 +204,7 @@ export class FloatingInsertButton extends React.Component<
         zIndex={zIndex}
       >
         <InsertButton
-          type={type}
+          direction={type}
           tableRef={tableRef}
           onMouseDown={type === 'column' ? this.insertColumn : this.insertRow}
           hasStickyHeaders={this.props.hasStickyHeaders || false}

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

@@ -4,12 +4,14 @@ 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 { 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';
@@ -18,6 +20,7 @@ import { DragHandle } from '../../DragHandle';
 type DragControlsProps = {
   editorView: EditorView;
   tableRef: HTMLTableElement;
+  tableNode?: PmNode;
   tableActive?: boolean;
   hoveredCell?: CellHoverMeta;
   isInDanger?: boolean;
@@ -39,6 +42,7 @@ const getSelectedRows = (selection: Selection) => {
 
 const DragControlsComponent = ({
   tableRef,
+  tableNode,
   hoveredCell,
   tableActive,
   editorView,
@@ -51,6 +55,15 @@ const DragControlsComponent = ({
   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 +74,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;
@@ -126,7 +134,7 @@ const DragControlsComponent = ({
           }}
         >
           <DragHandle
-            tableLocalId={getLocalId()}
+            tableLocalId={tableNode?.attrs?.localId ?? ''}
             indexes={[rowIndex!]}
             previewWidth={rowWidth}
             previewHeight={rowHeights[rowIndex!]}
@@ -140,6 +148,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,6 +161,7 @@ export default class TableFloatingControls extends Component<Props, State> {
             {isDragAndDropEnabled ? (
               <DragControls
                 tableRef={tableRef}
+                tableNode={tableNode}
                 hoveredCell={hoveredCell}
                 editorView={editorView}
                 tableActive={tableActive}

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/utils/drag-menu.ts

@@ -0,0 +1,65 @@
+import type {
+  Command,
+  CommandDispatch,
+  DropdownOptionT,
+} from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { TableMap } from '@atlaskit/editor-tables/table-map';
+
+import { moveSource } from '../pm-plugins/drag-and-drop/commands';
+import type { TableDirection } from '../types';
+
+const canDecrease = (index?: number, min: number = 0) =>
+  index !== undefined && index > min;
+const canIncrease = (index?: number, max: number = 0) =>
+  index !== undefined && index < max;
+
+export interface DragMenuConfig extends DropdownOptionT<Command> {
+  id: string;
+}
+
+export const getDragMenuConfig = (
+  direction: TableDirection,
+  tableMap?: TableMap,
+  index?: number,
+): DragMenuConfig[] => {
+  const moveOptions =
+    direction === 'row'
+      ? [
+          { label: 'up', offset: -1, canMove: canDecrease },
+          {
+            label: 'down',
+            offset: 1,
+            canMove: (index?: number) =>
+              canIncrease(index, (tableMap?.height ?? 0) - 1),
+          },
+        ]
+      : [
+          { label: 'left', offset: -1, canMove: canDecrease },
+          {
+            label: 'right',
+            offset: 1,
+            canMove: (index?: number) =>
+              canIncrease(index, (tableMap?.width ?? 0) - 1),
+          },
+        ];
+
+  return [
+    ...moveOptions.map(({ label, offset, canMove }) => ({
+      id: `move_${direction}_${label}`,
+      title: `Move ${direction} ${label}`,
+      disabled: !canMove(index),
+      onClick: (state: EditorState, dispatch?: CommandDispatch) => {
+        if (canMove(index)) {
+          moveSource(
+            `table-${direction}`,
+            index!,
+            index! + offset,
+          )(state, dispatch);
+          return true;
+        }
+        return false;
+      },
+    })),
+  ];
+};