@atlaskit/editor-plugin-table 7.16.11 → 7.16.12

package/src/pm-plugins/drag-and-drop/reducer.ts

@@ -4,35 +4,35 @@ import { DropTargetType } from './consts';
 import type { DragAndDropPluginState } from './types';
 
 export default (
-  pluginState: DragAndDropPluginState,
-  action: DragAndDropPluginAction,
+	pluginState: DragAndDropPluginState,
+	action: DragAndDropPluginAction,
 ): DragAndDropPluginState => {
-  switch (action.type) {
-    case DragAndDropActionType.SET_DROP_TARGET:
-      return {
-        ...pluginState,
-        decorationSet: action.data.decorationSet,
-        dropTargetType: action.data.type,
-        dropTargetIndex: action.data.index,
-        isDragging: true,
-      };
-    case DragAndDropActionType.CLEAR_DROP_TARGET:
-      return {
-        ...pluginState,
-        decorationSet: action.data.decorationSet,
-        dropTargetType: DropTargetType.NONE,
-        dropTargetIndex: 0,
-        isDragging: false,
-      };
-    case DragAndDropActionType.TOGGLE_DRAG_MENU:
-      return {
-        ...pluginState,
-        isDragMenuOpen: action.data.isDragMenuOpen,
-        dragMenuDirection: action.data.direction,
-        dragMenuIndex: action.data.index,
-        isKeyboardModeActive: action.data.isKeyboardModeActive,
-      };
-    default:
-      return pluginState;
-  }
+	switch (action.type) {
+		case DragAndDropActionType.SET_DROP_TARGET:
+			return {
+				...pluginState,
+				decorationSet: action.data.decorationSet,
+				dropTargetType: action.data.type,
+				dropTargetIndex: action.data.index,
+				isDragging: true,
+			};
+		case DragAndDropActionType.CLEAR_DROP_TARGET:
+			return {
+				...pluginState,
+				decorationSet: action.data.decorationSet,
+				dropTargetType: DropTargetType.NONE,
+				dropTargetIndex: 0,
+				isDragging: false,
+			};
+		case DragAndDropActionType.TOGGLE_DRAG_MENU:
+			return {
+				...pluginState,
+				isDragMenuOpen: action.data.isDragMenuOpen,
+				dragMenuDirection: action.data.direction,
+				dragMenuIndex: action.data.index,
+				isKeyboardModeActive: action.data.isKeyboardModeActive,
+			};
+		default:
+			return pluginState;
+	}
 };

package/src/pm-plugins/drag-and-drop/types.ts

@@ -5,14 +5,14 @@ import type { TableDirection } from '../../types';
 import type { DropTargetType } from './consts';
 
 export interface DragAndDropPluginState {
-  decorationSet: DecorationSet;
-  dropTargetType: DropTargetType;
-  dropTargetIndex: number;
-  isDragMenuOpen: boolean;
-  dragMenuDirection?: TableDirection;
-  dragMenuIndex: number;
-  isDragging: boolean;
-  isKeyboardModeActive: boolean;
+	decorationSet: DecorationSet;
+	dropTargetType: DropTargetType;
+	dropTargetIndex: number;
+	isDragMenuOpen: boolean;
+	dragMenuDirection?: TableDirection;
+	dragMenuIndex: number;
+	isDragging: boolean;
+	isKeyboardModeActive: boolean;
 }
 
 export type TriggerType = 'mouse' | 'keyboard';

package/src/pm-plugins/drag-and-drop/utils/autoscrollers.ts

@@ -6,47 +6,44 @@ import type { DraggableSourceData } from '../../../types';
 import { dropTargetExtendedWidth } from '../../../ui/consts';
 
 type AutoScrollerFactory = {
-  tableWrapper: HTMLElement;
-  getNode: () => PmNode;
+	tableWrapper: HTMLElement;
+	getNode: () => PmNode;
 };
 
-export const autoScrollerFactory = ({
-  tableWrapper,
-  getNode,
-}: AutoScrollerFactory) => {
-  return [
-    autoScrollForElements({
-      element: tableWrapper,
-      canScroll: ({ source }) => {
-        const { localId, type } = source.data as Partial<DraggableSourceData>;
-        const node = getNode();
-        return localId === node?.attrs.localId && type === 'table-column';
-      },
-    }),
-    unsafeOverflowAutoScrollForElements({
-      element: tableWrapper,
-      canScroll: ({ source }) => {
-        const { localId, type } = source.data as Partial<DraggableSourceData>;
-        const node = getNode();
-        return localId === node?.attrs.localId && type === 'table-column';
-      },
-      getOverflow: () => ({
-        fromTopEdge: {
-          top: dropTargetExtendedWidth,
-          right: dropTargetExtendedWidth,
-          left: dropTargetExtendedWidth,
-        },
-        fromRightEdge: {
-          right: dropTargetExtendedWidth,
-          top: dropTargetExtendedWidth,
-          bottom: dropTargetExtendedWidth,
-        },
-        fromLeftEdge: {
-          top: dropTargetExtendedWidth,
-          left: dropTargetExtendedWidth,
-          bottom: dropTargetExtendedWidth,
-        },
-      }),
-    }),
-  ];
+export const autoScrollerFactory = ({ tableWrapper, getNode }: AutoScrollerFactory) => {
+	return [
+		autoScrollForElements({
+			element: tableWrapper,
+			canScroll: ({ source }) => {
+				const { localId, type } = source.data as Partial<DraggableSourceData>;
+				const node = getNode();
+				return localId === node?.attrs.localId && type === 'table-column';
+			},
+		}),
+		unsafeOverflowAutoScrollForElements({
+			element: tableWrapper,
+			canScroll: ({ source }) => {
+				const { localId, type } = source.data as Partial<DraggableSourceData>;
+				const node = getNode();
+				return localId === node?.attrs.localId && type === 'table-column';
+			},
+			getOverflow: () => ({
+				fromTopEdge: {
+					top: dropTargetExtendedWidth,
+					right: dropTargetExtendedWidth,
+					left: dropTargetExtendedWidth,
+				},
+				fromRightEdge: {
+					right: dropTargetExtendedWidth,
+					top: dropTargetExtendedWidth,
+					bottom: dropTargetExtendedWidth,
+				},
+				fromLeftEdge: {
+					top: dropTargetExtendedWidth,
+					left: dropTargetExtendedWidth,
+					bottom: dropTargetExtendedWidth,
+				},
+			}),
+		}),
+	];
 };

package/src/pm-plugins/drag-and-drop/utils/getDragBehaviour.ts

@@ -3,10 +3,7 @@ import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types';
 
 import type { DraggableBehaviour } from '../../../types';
 
-export const getDragBehaviour = ({
-  altKey,
-  ctrlKey,
-}: Input): DraggableBehaviour => {
-  const isCloneModifierKeyPressed = browser.mac ? altKey : ctrlKey;
-  return isCloneModifierKeyPressed ? 'clone' : 'move';
+export const getDragBehaviour = ({ altKey, ctrlKey }: Input): DraggableBehaviour => {
+	const isCloneModifierKeyPressed = browser.mac ? altKey : ctrlKey;
+	return isCloneModifierKeyPressed ? 'clone' : 'move';
 };

package/src/pm-plugins/drag-and-drop/utils/monitor.ts

@@ -2,85 +2,72 @@ import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/clo
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
-import type {
-  DraggableData,
-  DraggableSourceData,
-  DraggableTargetData,
-} from '../../../types';
+import type { DraggableData, DraggableSourceData, DraggableTargetData } from '../../../types';
 
 import { getDragBehaviour } from './getDragBehaviour';
 
 export const getDraggableDataFromEvent = ({
-  location,
-  source,
+	location,
+	source,
 }: ElementEventBasePayload): DraggableData | undefined => {
-  const destination = location.current.dropTargets.at(0);
-  // If no target exists at the current location, then the current draggable is not over a target or the target doesn't support
-  // the current draggable.
-  if (!destination) {
-    return undefined;
-  }
+	const destination = location.current.dropTargets.at(0);
+	// If no target exists at the current location, then the current draggable is not over a target or the target doesn't support
+	// the current draggable.
+	if (!destination) {
+		return undefined;
+	}
 
-  // This is the draggable elements data
-  const {
-    indexes: sourceIndexes,
-    type: sourceType,
-    localId: sourceLocalId,
-  } = source.data as DraggableSourceData;
+	// This is the draggable elements data
+	const {
+		indexes: sourceIndexes,
+		type: sourceType,
+		localId: sourceLocalId,
+	} = source.data as DraggableSourceData;
 
-  // This is the drop target's data
-  const {
-    targetIndex,
-    type: targetType,
-    localId: targetLocalId,
-  } = destination.data as DraggableTargetData;
+	// This is the drop target's data
+	const {
+		targetIndex,
+		type: targetType,
+		localId: targetLocalId,
+	} = destination.data as DraggableTargetData;
 
-  // Some basic check to abort early with...
-  if (
-    !sourceIndexes ||
-    targetIndex < 0 ||
-    // abort if the type of the draggable is different to the target, for eg. rows cannot be dropped onto column targets.
-    sourceType !== targetType ||
-    // abort if the draggable is coming from a different table that the target is on.
-    sourceLocalId !== targetLocalId
-  ) {
-    return undefined;
-  }
+	// Some basic check to abort early with...
+	if (
+		!sourceIndexes ||
+		targetIndex < 0 ||
+		// abort if the type of the draggable is different to the target, for eg. rows cannot be dropped onto column targets.
+		sourceType !== targetType ||
+		// abort if the draggable is coming from a different table that the target is on.
+		sourceLocalId !== targetLocalId
+	) {
+		return undefined;
+	}
 
-  const targetClosestEdge =
-    extractClosestEdge(destination.data) ??
-    ((targetType === 'table-row' ? 'top' : 'left') as Edge);
-  // NOTE: By default we always insert row/cols at the target index to the top/left (retrospectively of row/cols).
-  // This introduces an offset in the event the drop occured closer to the bottom/right of the target. We want
-  // the new target index to be 1 index higher.
-  const targetOffset =
-    targetClosestEdge === 'right' || targetClosestEdge === 'bottom' ? 1 : 0;
+	const targetClosestEdge =
+		extractClosestEdge(destination.data) ?? ((targetType === 'table-row' ? 'top' : 'left') as Edge);
+	// NOTE: By default we always insert row/cols at the target index to the top/left (retrospectively of row/cols).
+	// This introduces an offset in the event the drop occured closer to the bottom/right of the target. We want
+	// the new target index to be 1 index higher.
+	const targetOffset = targetClosestEdge === 'right' || targetClosestEdge === 'bottom' ? 1 : 0;
 
-  // if the min index is greater then the target index, the then the direction of the DnD is decreasing
-  // if the target is within the min/max index then we can assume that no direction exists so it will be 0.
-  const srcMin = Math.min(...sourceIndexes);
-  const srcMax = Math.max(...sourceIndexes);
-  const direction =
-    targetIndex >= srcMin && targetIndex <= srcMax
-      ? 0
-      : srcMin >= targetIndex
-      ? -1
-      : 1;
+	// if the min index is greater then the target index, the then the direction of the DnD is decreasing
+	// if the target is within the min/max index then we can assume that no direction exists so it will be 0.
+	const srcMin = Math.min(...sourceIndexes);
+	const srcMax = Math.max(...sourceIndexes);
+	const direction =
+		targetIndex >= srcMin && targetIndex <= srcMax ? 0 : srcMin >= targetIndex ? -1 : 1;
 
-  return {
-    sourceType,
-    sourceLocalId,
-    sourceIndexes,
-    targetType,
-    targetLocalId,
-    targetIndex,
-    targetAdjustedIndex: targetIndex + targetOffset,
-    targetClosestEdge,
-    targetDirection:
-      targetClosestEdge === 'top' || targetClosestEdge === 'left'
-        ? 'start'
-        : 'end',
-    direction,
-    behaviour: getDragBehaviour(location.current.input),
-  };
+	return {
+		sourceType,
+		sourceLocalId,
+		sourceIndexes,
+		targetType,
+		targetLocalId,
+		targetIndex,
+		targetAdjustedIndex: targetIndex + targetOffset,
+		targetClosestEdge,
+		targetDirection: targetClosestEdge === 'top' || targetClosestEdge === 'left' ? 'start' : 'end',
+		direction,
+		behaviour: getDragBehaviour(location.current.input),
+	};
 };