@atlaskit/editor-plugin-table 5.8.3 → 5.8.4

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -3,9 +3,16 @@
 import { useState } from 'react';
 
 import { jsx } from '@emotion/react';
+import type {
+  IntlShape,
+  MessageDescriptor,
+  WrappedComponentProps,
+} from 'react-intl-next';
+import { injectIntl } from 'react-intl-next';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 import type {
   Command,
@@ -27,6 +34,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
   findCellRectClosestToPos,
@@ -59,7 +67,10 @@ import {
   hasMergedCellsInColumn,
   hasMergedCellsInRow,
 } from '../../utils';
-import type { DragMenuConfig } from '../../utils/drag-menu';
+import type {
+  DragMenuConfig,
+  DragMenuOptionIdType,
+} from '../../utils/drag-menu';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
 
@@ -86,7 +97,73 @@ type DragMenuProps = {
   editorAnalyticsAPI?: EditorAnalyticsAPI;
 };
 
-const groupedDragMenuConfig = [
+type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
+interface MessageType {
+  message: MessageDescriptor;
+  plural: PluralOptionType;
+}
+
+const MapDragMenuOptionIdToMessage: Record<DragMenuOptionIdType, MessageType> =
+  {
+    add_row_above: {
+      message: messages.addRowAbove,
+      plural: null,
+    },
+    add_row_below: {
+      message: messages.addRowBelow,
+      plural: null,
+    },
+    add_column_left: {
+      message: messages.addColumnLeft,
+      plural: null,
+    },
+    add_column_right: {
+      message: messages.addColumnRight,
+      plural: null,
+    },
+    distribute_columns: {
+      message: messages.distributeColumns,
+      plural: 'noOfCols',
+    },
+    clear_cells: {
+      message: messages.clearCells,
+      plural: 'noOfCells',
+    },
+    delete_row: {
+      message: messages.removeRows,
+      plural: 'noOfRows',
+    },
+    delete_column: {
+      message: messages.removeColumns,
+      plural: 'noOfCols',
+    },
+    move_column_left: {
+      message: messages.moveColumnLeft,
+      plural: 'noOfCols',
+    },
+    move_column_right: {
+      message: messages.moveColumnRight,
+      plural: 'noOfCols',
+    },
+    move_row_up: {
+      message: messages.moveRowUp,
+      plural: 'noOfRows',
+    },
+    move_row_down: {
+      message: messages.moveRowDown,
+      plural: 'noOfRows',
+    },
+    sort_column_asc: {
+      message: messages.sortColumnIncreasing,
+      plural: null,
+    },
+    sort_column_desc: {
+      message: messages.sortColumnDecreasing,
+      plural: null,
+    },
+  };
+
+const groupedDragMenuConfig: DragMenuOptionIdType[][] = [
   [
     'add_row_above',
     'add_row_below',
@@ -101,7 +178,11 @@ const groupedDragMenuConfig = [
   ['sort_column_asc', 'sort_column_desc'],
 ];
 
-const convertToDropdownItems = (dragMenuConfig: DragMenuConfig[]) => {
+const convertToDropdownItems = (
+  dragMenuConfig: DragMenuConfig[],
+  formatMessage: IntlShape['formatMessage'],
+  selectionRect?: Rect,
+) => {
   let menuItemsArr: MenuItem[][] = [...Array(groupedDragMenuConfig.length)].map(
     () => [],
   );
@@ -114,9 +195,38 @@ const convertToDropdownItems = (dragMenuConfig: DragMenuConfig[]) => {
     if (menuGroupIndex === -1) {
       return;
     }
+
+    const isPlural = Boolean(MapDragMenuOptionIdToMessage[item.id]?.plural);
+    let plural = 0;
+
+    if (isPlural && selectionRect) {
+      const { top, bottom, right, left } = selectionRect;
+      switch (
+        MapDragMenuOptionIdToMessage[item.id].plural as PluralOptionType
+      ) {
+        case 'noOfCols': {
+          plural = right - left;
+          break;
+        }
+        case 'noOfRows': {
+          plural = bottom - top;
+          break;
+        }
+        case 'noOfCells': {
+          plural = Math.max(right - left, bottom - top);
+          break;
+        }
+      }
+    }
+
+    const options = isPlural ? { 0: plural } : undefined;
+
     menuItemsArr[menuGroupIndex].push({
       key: item.id,
-      content: item.title,
+      content: formatMessage(
+        MapDragMenuOptionIdToMessage[item.id].message,
+        options,
+      ),
       value: { name: item.id },
       isDisabled: item.disabled,
       elemBefore: item.icon ? (
@@ -125,7 +235,12 @@ const convertToDropdownItems = (dragMenuConfig: DragMenuConfig[]) => {
             display: 'flex',
           }}
         >
-          <item.icon label={item.title} />
+          <item.icon
+            label={formatMessage(
+              MapDragMenuOptionIdToMessage[item.id].message,
+              options,
+            )}
+          />
         </div>
       ) : undefined,
       elemAfter: item.keymap ? (
@@ -156,7 +271,8 @@ export const DragMenu = ({
   canDrag,
   editorAnalyticsAPI,
   pluginConfig,
-}: DragMenuProps) => {
+  intl: { formatMessage },
+}: DragMenuProps & WrappedComponentProps) => {
   const { state, dispatch } = editorView;
   const { selection } = state;
   const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
@@ -188,7 +304,11 @@ export const DragMenu = ({
     editorAnalyticsAPI,
   );
 
-  const { menuItems, menuCallback } = convertToDropdownItems(dragMenuConfig);
+  const { menuItems, menuCallback } = convertToDropdownItems(
+    dragMenuConfig,
+    formatMessage,
+    selectionRect,
+  );
 
   const handleSubMenuRef = (ref: HTMLDivElement | null) => {
     const parent = closestElement(
@@ -226,10 +346,13 @@ export const DragMenu = ({
       node?.attrs?.background || '#ffffff',
     );
     return {
-      content: 'Background color',
+      content: formatMessage(messages.backgroundColor),
       value: { name: 'background' },
       elemBefore: (
-        <EditorBackgroundColorIcon label={'background color'} size="medium" />
+        <EditorBackgroundColorIcon
+          label={formatMessage(messages.backgroundColor)}
+          size="medium"
+        />
       ),
       elemAfter: (
         <div
@@ -274,7 +397,7 @@ export const DragMenu = ({
   const createhHeaderRowColumnMenuItem = (direction: TableDirection) => {
     return direction === 'column'
       ? ({
-          content: 'Header column',
+          content: formatMessage(messages.headerColumn),
           value: { name: 'header_column' },
           elemAfter: (
             <div css={toggleStyles}>
@@ -287,7 +410,7 @@ export const DragMenu = ({
           ),
         } as MenuItem)
       : ({
-          content: 'Header row',
+          content: formatMessage(messages.headerRow),
           value: { name: 'header_row' },
           elemAfter: (
             <div css={toggleStyles}>
@@ -303,7 +426,7 @@ export const DragMenu = ({
 
   const createRowNumbersMenuItem = () => {
     return {
-      content: 'Row numbers',
+      content: formatMessage(messages.rowNumbers),
       value: { name: 'row_numbers' },
       elemAfter: (
         <div css={toggleStyles}>
@@ -464,3 +587,5 @@ export const DragMenu = ({
     />
   );
 };
+
+export default injectIntl(DragMenu);

package/src/ui/FloatingDragMenu/index.tsx

@@ -15,7 +15,7 @@ import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { PluginConfig, TableDirection } from '../../types';
 import { dragMenuDropdownWidth } from '../consts';
 
-import { DragMenu } from './DragMenu';
+import DragMenu from './DragMenu';
 
 export interface Props {
   editorView: EditorView;

package/src/utils/drag-menu.ts

@@ -71,8 +71,24 @@ const isDistributeColumnsEnabled = (state: EditorState) => {
   return false;
 };
 
+export type DragMenuOptionIdType =
+  | 'add_row_above'
+  | 'add_row_below'
+  | 'add_column_left'
+  | 'add_column_right'
+  | 'distribute_columns'
+  | 'clear_cells'
+  | 'delete_row'
+  | 'delete_column'
+  | 'move_column_left'
+  | 'move_column_right'
+  | 'move_row_up'
+  | 'move_row_down'
+  | 'sort_column_asc'
+  | 'sort_column_desc';
+
 export interface DragMenuConfig extends DropdownOptionT<Command> {
-  id: string;
+  id: DragMenuOptionIdType;
   icon?: React.ComponentType<IconProps>;
   keymap?: string;
 }