@atlaskit/editor-plugin-table 7.16.11 → 7.16.12

package/src/ui/FloatingContextualMenu/index.tsx

@@ -2,132 +2,114 @@
 import { jsx } from '@emotion/react';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type {
-  GetEditorContainerWidth,
-  GetEditorFeatureFlags,
-} from '@atlaskit/editor-common/types';
+import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
-  akEditorFloatingDialogZIndex,
-  akEditorFloatingOverlapPanelZIndex,
+	akEditorFloatingDialogZIndex,
+	akEditorFloatingOverlapPanelZIndex,
 } from '@atlaskit/editor-shared-styles';
 import {
-  findCellRectClosestToPos,
-  getSelectionRect,
-  isSelectionType,
+	findCellRectClosestToPos,
+	getSelectionRect,
+	isSelectionType,
 } from '@atlaskit/editor-tables/utils';
 
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { PluginConfig } from '../../types';
 import {
-  contextualMenuDropdownWidth,
-  contextualMenuDropdownWidthDnD,
-  contextualMenuTriggerSize,
-  tablePopupMenuFitHeight,
+	contextualMenuDropdownWidth,
+	contextualMenuDropdownWidthDnD,
+	contextualMenuTriggerSize,
+	tablePopupMenuFitHeight,
 } from '../consts';
 
 import ContextualMenu from './ContextualMenu';
 import { tablePopupStyles } from './styles';
 
 export interface Props {
-  editorView: EditorView;
-  isOpen: boolean;
-  getEditorContainerWidth: GetEditorContainerWidth;
-  getEditorFeatureFlags?: GetEditorFeatureFlags;
-  targetCellPosition?: number;
-  mountPoint?: HTMLElement;
-  boundariesElement?: HTMLElement;
-  scrollableElement?: HTMLElement;
-  pluginConfig?: PluginConfig;
-  editorAnalyticsAPI?: EditorAnalyticsAPI;
+	editorView: EditorView;
+	isOpen: boolean;
+	getEditorContainerWidth: GetEditorContainerWidth;
+	getEditorFeatureFlags?: GetEditorFeatureFlags;
+	targetCellPosition?: number;
+	mountPoint?: HTMLElement;
+	boundariesElement?: HTMLElement;
+	scrollableElement?: HTMLElement;
+	pluginConfig?: PluginConfig;
+	editorAnalyticsAPI?: EditorAnalyticsAPI;
 }
 
 const FloatingContextualMenu = ({
-  mountPoint,
-  boundariesElement,
-  scrollableElement,
-  editorView,
-  isOpen,
-  pluginConfig,
-  editorAnalyticsAPI,
-  getEditorContainerWidth,
-  getEditorFeatureFlags,
+	mountPoint,
+	boundariesElement,
+	scrollableElement,
+	editorView,
+	isOpen,
+	pluginConfig,
+	editorAnalyticsAPI,
+	getEditorContainerWidth,
+	getEditorFeatureFlags,
 }: Props) => {
-  // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-  const { targetCellPosition, isDragAndDropEnabled } = getPluginState(
-    editorView.state,
-  );
-  if (
-    !isOpen ||
-    !targetCellPosition ||
-    editorView.state.doc.nodeSize <= targetCellPosition
-  ) {
-    return null;
-  }
+	// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
+	const { targetCellPosition, isDragAndDropEnabled } = getPluginState(editorView.state);
+	if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
+		return null;
+	}
 
-  const { selection } = editorView.state;
-  const selectionRect = isSelectionType(selection, 'cell')
-    ? getSelectionRect(selection)!
-    : findCellRectClosestToPos(selection.$from);
+	const { selection } = editorView.state;
+	const selectionRect = isSelectionType(selection, 'cell')
+		? getSelectionRect(selection)!
+		: findCellRectClosestToPos(selection.$from);
 
-  if (!selectionRect) {
-    return null;
-  }
-  const domAtPos = editorView.domAtPos.bind(editorView);
-  const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
-  if (!targetCellRef) {
-    return null;
-  }
+	if (!selectionRect) {
+		return null;
+	}
+	const domAtPos = editorView.domAtPos.bind(editorView);
+	const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+	if (!targetCellRef) {
+		return null;
+	}
 
-  const parentSticky =
-    targetCellRef.parentElement &&
-    targetCellRef.parentElement.className.indexOf('sticky') > -1;
+	const parentSticky =
+		targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
 
-  return (
-    <Popup
-      alignX="right"
-      alignY="top"
-      target={targetCellRef as HTMLElement}
-      mountTo={mountPoint}
-      boundariesElement={boundariesElement}
-      scrollableElement={scrollableElement}
-      fitHeight={tablePopupMenuFitHeight}
-      fitWidth={
-        isDragAndDropEnabled
-          ? contextualMenuDropdownWidthDnD
-          : contextualMenuDropdownWidth
-      }
-      // 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={
-        parentSticky
-          ? akEditorFloatingDialogZIndex
-          : akEditorFloatingOverlapPanelZIndex
-      }
-      forcePlacement={true}
-      offset={[-7, 0]}
-      stick={true}
-    >
-      <div css={tablePopupStyles(isDragAndDropEnabled)}>
-        <ContextualMenu
-          editorView={editorView}
-          offset={[contextualMenuTriggerSize / 2, -contextualMenuTriggerSize]}
-          isOpen={isOpen}
-          targetCellPosition={targetCellPosition}
-          allowColumnSorting={pluginConfig && pluginConfig.allowColumnSorting}
-          allowMergeCells={pluginConfig!.allowMergeCells}
-          allowBackgroundColor={pluginConfig!.allowBackgroundColor}
-          selectionRect={selectionRect}
-          boundariesElement={boundariesElement}
-          editorAnalyticsAPI={editorAnalyticsAPI}
-          getEditorContainerWidth={getEditorContainerWidth}
-          getEditorFeatureFlags={getEditorFeatureFlags}
-        />
-      </div>
-    </Popup>
-  );
+	return (
+		<Popup
+			alignX="right"
+			alignY="top"
+			target={targetCellRef as HTMLElement}
+			mountTo={mountPoint}
+			boundariesElement={boundariesElement}
+			scrollableElement={scrollableElement}
+			fitHeight={tablePopupMenuFitHeight}
+			fitWidth={isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth}
+			// 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={parentSticky ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex}
+			forcePlacement={true}
+			offset={[-7, 0]}
+			stick={true}
+		>
+			<div css={tablePopupStyles(isDragAndDropEnabled)}>
+				<ContextualMenu
+					editorView={editorView}
+					offset={[contextualMenuTriggerSize / 2, -contextualMenuTriggerSize]}
+					isOpen={isOpen}
+					targetCellPosition={targetCellPosition}
+					allowColumnSorting={pluginConfig && pluginConfig.allowColumnSorting}
+					allowMergeCells={pluginConfig!.allowMergeCells}
+					allowBackgroundColor={pluginConfig!.allowBackgroundColor}
+					selectionRect={selectionRect}
+					boundariesElement={boundariesElement}
+					editorAnalyticsAPI={editorAnalyticsAPI}
+					getEditorContainerWidth={getEditorContainerWidth}
+					getEditorFeatureFlags={getEditorFeatureFlags}
+				/>
+			</div>
+		</Popup>
+	);
 };
 
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

package/src/ui/FloatingContextualMenu/styles.ts

@@ -5,86 +5,78 @@ import { N60A, N90 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../../types';
-import {
-  contextualMenuDropdownWidth,
-  contextualMenuDropdownWidthDnD,
-} from '../consts';
+import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
 
 export const cellColourPreviewStyles = (selectedColor: string) =>
-  css({
-    '&::before': {
-      background: selectedColor,
-    },
-  });
+	css({
+		'&::before': {
+			background: selectedColor,
+		},
+	});
 
 export const elementBeforeIconStyles = css({
-  marginRight: token('space.negative.075', '-6px'),
-  display: 'flex',
+	marginRight: token('space.negative.075', '-6px'),
+	display: 'flex',
 });
 
 // TODO Delete this comment after verifying space token -> previous value `padding: 8px`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
 export const tablePopupStyles = (
-  isDragAndDropEnabled: boolean | undefined,
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+	isDragAndDropEnabled: boolean | undefined,
+	// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) => css`
-  .${ClassName.CONTEXTUAL_SUBMENU} {
-    border-radius: ${token('border.radius', '3px')};
-    background: ${token('elevation.surface.overlay', 'white')};
-    box-shadow: ${token(
-      'elevation.shadow.overlay',
-      `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`,
-    )};
-    display: block;
-    position: absolute;
-    top: 0;
-    left: ${isDragAndDropEnabled
-      ? contextualMenuDropdownWidthDnD
-      : contextualMenuDropdownWidth}px;
-    padding: ${token('space.100', '8px')};
+	.${ClassName.CONTEXTUAL_SUBMENU} {
+		border-radius: ${token('border.radius', '3px')};
+		background: ${token('elevation.surface.overlay', 'white')};
+		box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
+		display: block;
+		position: absolute;
+		top: 0;
+		left: ${isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth}px;
+		padding: ${token('space.100', '8px')};
 
-    > div {
-      padding: 0;
-    }
-  }
+		> div {
+			padding: 0;
+		}
+	}
 
-  .${ClassName.CONTEXTUAL_MENU_ICON} {
-    display: flex;
+	.${ClassName.CONTEXTUAL_MENU_ICON} {
+		display: flex;
 
-    &::before {
-      content: '';
-      display: block;
-      border: 1px solid ${tableBackgroundBorderColor};
-      border-radius: ${token('border.radius', '3px')};
-      width: 20px;
-      height: 20px;
-    }
+		&::before {
+			content: '';
+			display: block;
+			border: 1px solid ${tableBackgroundBorderColor};
+			border-radius: ${token('border.radius', '3px')};
+			width: 20px;
+			height: 20px;
+		}
 
-    &::after {
-      content: '›';
-      margin-left: ${token('space.050', '4px')};
-      line-height: 20px;
-      color: ${token('color.icon', N90)};
-    }
-  }
+		&::after {
+			content: '›';
+			margin-left: ${token('space.050', '4px')};
+			line-height: 20px;
+			color: ${token('color.icon', N90)};
+		}
+	}
 
-  .${ClassName.CONTEXTUAL_MENU_ICON_SMALL} {
-    display: flex;
+	.${ClassName.CONTEXTUAL_MENU_ICON_SMALL} {
+		display: flex;
 
-    &::before {
-      content: '';
-      display: block;
-      border: 1px solid ${tableBackgroundBorderColor};
-      border-radius: ${token('border.radius', '3px')};
-      width: 14px;
-      height: 14px;
-    }
+		&::before {
+			content: '';
+			display: block;
+			border: 1px solid ${tableBackgroundBorderColor};
+			border-radius: ${token('border.radius', '3px')};
+			width: 14px;
+			height: 14px;
+		}
 
-    &::after {
-      content: '›';
-      margin-left: ${token('space.050', '4px')};
-      line-height: 14px;
-      color: ${token('color.icon', N90)};
-    }
-  }
+		&::after {
+			content: '›';
+			margin-left: ${token('space.050', '4px')};
+			line-height: 14px;
+			color: ${token('color.icon', N90)};
+		}
+	}
 `;

package/src/ui/FloatingDeleteButton/DeleteButton.tsx

@@ -7,47 +7,47 @@ import { injectIntl } from 'react-intl-next';
 import { TableCssClassName as ClassName } from '../../types';
 
 export interface ButtonProps {
-  removeLabel: MessageDescriptor;
-  style?: object;
-  onClick?: (event: SyntheticEvent) => void;
-  onMouseEnter?: (event: SyntheticEvent) => void;
-  onMouseLeave?: (event: SyntheticEvent) => void;
+	removeLabel: MessageDescriptor;
+	style?: object;
+	onClick?: (event: SyntheticEvent) => void;
+	onMouseEnter?: (event: SyntheticEvent) => void;
+	onMouseLeave?: (event: SyntheticEvent) => void;
 }
 
 const DeleteButton = ({
-  style,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  removeLabel,
-  intl: { formatMessage },
+	style,
+	onClick,
+	onMouseEnter,
+	onMouseLeave,
+	removeLabel,
+	intl: { formatMessage },
 }: ButtonProps & WrappedComponentProps) => (
-  <div
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className={ClassName.CONTROLS_DELETE_BUTTON_WRAP}
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    style={style}
-    onMouseEnter={onMouseEnter}
-    onMouseLeave={onMouseLeave}
-  >
-    <button
-      type="button"
-      aria-label={formatMessage(removeLabel, { 0: 1 })}
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className={ClassName.CONTROLS_DELETE_BUTTON}
-      onMouseDown={onClick}
-      onMouseMove={(e) => e.preventDefault()}
-    >
-{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
-      <svg className={ClassName.CONTROLS_BUTTON_ICON}>
-        <path
-          d="M12.242 10.828L9.414 8l2.828-2.829a.999.999 0 1 0-1.414-1.414L8 6.587l-2.829-2.83a1 1 0 0 0-1.414 1.414l2.83 2.83-2.83 2.827a1 1 0 0 0 1.414 1.414l2.83-2.828 2.827 2.828a.999.999 0 1 0 1.414-1.414"
-          fill="currentColor"
-          fillRule="evenodd"
-        />
-      </svg>
-    </button>
-  </div>
+	<div
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+		className={ClassName.CONTROLS_DELETE_BUTTON_WRAP}
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+		style={style}
+		onMouseEnter={onMouseEnter}
+		onMouseLeave={onMouseLeave}
+	>
+		<button
+			type="button"
+			aria-label={formatMessage(removeLabel, { 0: 1 })}
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+			className={ClassName.CONTROLS_DELETE_BUTTON}
+			onMouseDown={onClick}
+			onMouseMove={(e) => e.preventDefault()}
+		>
+			{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
+			<svg className={ClassName.CONTROLS_BUTTON_ICON}>
+				<path
+					d="M12.242 10.828L9.414 8l2.828-2.829a.999.999 0 1 0-1.414-1.414L8 6.587l-2.829-2.83a1 1 0 0 0-1.414 1.414l2.83 2.83-2.83 2.827a1 1 0 0 0 1.414 1.414l2.83-2.828 2.827 2.828a.999.999 0 1 0 1.414-1.414"
+					fill="currentColor"
+					fillRule="evenodd"
+				/>
+			</svg>
+		</button>
+	</div>
 );
 
 export default injectIntl(DeleteButton);

package/src/ui/FloatingDeleteButton/getPopUpOptions.ts

@@ -1,75 +1,65 @@
 import type { PopupProps } from '@atlaskit/editor-common/ui';
 
-import {
-  tableDeleteButtonOffset,
-  tableDeleteButtonSize,
-  tableToolbarSize,
-} from '../consts';
+import { tableDeleteButtonOffset, tableDeleteButtonSize, tableToolbarSize } from '../consts';
 
 import type { CellSelectionType } from './types';
 
 interface GetPopupOptions {
-  left: number;
-  top: number;
-  selectionType?: CellSelectionType;
-  tableWrapper: HTMLElement | null;
+	left: number;
+	top: number;
+	selectionType?: CellSelectionType;
+	tableWrapper: HTMLElement | null;
 }
 
 const DELETE_BUTTON_CONTROLS_OFFSET =
-  tableToolbarSize + tableDeleteButtonSize + tableDeleteButtonOffset;
+	tableToolbarSize + tableDeleteButtonSize + tableDeleteButtonOffset;
 
-function getColumnOptions(
-  left: number,
-  tableWrapper: HTMLElement | null,
-): Partial<PopupProps> {
-  return {
-    alignX: 'left',
-    alignY: 'start',
-    offset: [left, DELETE_BUTTON_CONTROLS_OFFSET],
-    shouldRenderPopup() {
-      if (tableWrapper) {
-        const rect = tableWrapper.getBoundingClientRect();
-        const maxVisibleLeftPosition =
-          rect.width + tableWrapper.scrollLeft - tableDeleteButtonSize;
-        const minVisibleLeftPosition = tableWrapper.scrollLeft;
-        return (
-          maxVisibleLeftPosition - left > 0 && left > minVisibleLeftPosition
-        );
-      }
-      return true;
-    },
-  };
+function getColumnOptions(left: number, tableWrapper: HTMLElement | null): Partial<PopupProps> {
+	return {
+		alignX: 'left',
+		alignY: 'start',
+		offset: [left, DELETE_BUTTON_CONTROLS_OFFSET],
+		shouldRenderPopup() {
+			if (tableWrapper) {
+				const rect = tableWrapper.getBoundingClientRect();
+				const maxVisibleLeftPosition = rect.width + tableWrapper.scrollLeft - tableDeleteButtonSize;
+				const minVisibleLeftPosition = tableWrapper.scrollLeft;
+				return maxVisibleLeftPosition - left > 0 && left > minVisibleLeftPosition;
+			}
+			return true;
+		},
+	};
 }
 
 function getRowOptions(top: number): Partial<PopupProps> {
-  return {
-    alignX: 'left',
-    alignY: 'start',
-    forcePlacement: true,
-    offset: [0, -top],
-    onPositionCalculated(position) {
-      return {
-        ...position,
-        // We need to force left to always be the offset to not be affected by overflow
-        left: -DELETE_BUTTON_CONTROLS_OFFSET,
-      };
-    },
-  };
+	return {
+		alignX: 'left',
+		alignY: 'start',
+		forcePlacement: true,
+		offset: [0, -top],
+		onPositionCalculated(position) {
+			return {
+				...position,
+				// We need to force left to always be the offset to not be affected by overflow
+				left: -DELETE_BUTTON_CONTROLS_OFFSET,
+			};
+		},
+	};
 }
 
 export default function getPopupOptions({
-  left,
-  top,
-  selectionType,
-  tableWrapper,
+	left,
+	top,
+	selectionType,
+	tableWrapper,
 }: GetPopupOptions): Partial<PopupProps> {
-  switch (selectionType) {
-    case 'column':
-      return getColumnOptions(left, tableWrapper);
-    case 'row':
-      return getRowOptions(top);
-    default: {
-      return {};
-    }
-  }
+	switch (selectionType) {
+		case 'column':
+			return getColumnOptions(left, tableWrapper);
+		case 'row':
+			return getRowOptions(top);
+		default: {
+			return {};
+		}
+	}
 }