@atlaskit/editor-plugin-table 5.8.3 → 5.8.4

package/dist/esm/ui/FloatingDragMenu/DragMenu.js

@@ -4,7 +4,9 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /** @jsx jsx */
 import { useState } from 'react';
 import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
 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 { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
@@ -26,22 +28,109 @@ import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColum
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
 import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
+var MapDragMenuOptionIdToMessage = {
+  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
+  }
+};
 var groupedDragMenuConfig = [['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']];
-var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
+var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect) {
   var menuItemsArr = _toConsumableArray(Array(groupedDragMenuConfig.length)).map(function () {
     return [];
   });
   var menuCallback = {};
   dragMenuConfig.forEach(function (item) {
+    var _MapDragMenuOptionIdT;
     var menuGroupIndex = groupedDragMenuConfig.findIndex(function (group) {
       return group.includes(item.id);
     });
     if (menuGroupIndex === -1) {
       return;
     }
+    var isPlural = Boolean((_MapDragMenuOptionIdT = MapDragMenuOptionIdToMessage[item.id]) === null || _MapDragMenuOptionIdT === void 0 ? void 0 : _MapDragMenuOptionIdT.plural);
+    var plural = 0;
+    if (isPlural && selectionRect) {
+      var top = selectionRect.top,
+        bottom = selectionRect.bottom,
+        right = selectionRect.right,
+        left = selectionRect.left;
+      switch (MapDragMenuOptionIdToMessage[item.id].plural) {
+        case 'noOfCols':
+          {
+            plural = right - left;
+            break;
+          }
+        case 'noOfRows':
+          {
+            plural = bottom - top;
+            break;
+          }
+        case 'noOfCells':
+          {
+            plural = Math.max(right - left, bottom - top);
+            break;
+          }
+      }
+    }
+    var 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
       },
@@ -51,7 +140,7 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
           display: 'flex'
         }
       }, jsx(item.icon, {
-        label: item.title
+        label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)
       })) : undefined,
       elemAfter: item.keymap ? jsx("div", {
         css: shortcutStyle
@@ -85,7 +174,8 @@ export var DragMenu = function DragMenu(_ref) {
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     canDrag = _ref.canDrag,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
-    pluginConfig = _ref.pluginConfig;
+    pluginConfig = _ref.pluginConfig,
+    formatMessage = _ref.intl.formatMessage;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
@@ -100,7 +190,7 @@ export var DragMenu = function DragMenu(_ref) {
   var hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
   var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
   var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI);
-  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
+  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
   var handleSubMenuRef = function handleSubMenuRef(ref) {
@@ -130,12 +220,12 @@ export var DragMenu = function DragMenu(_ref) {
     var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
     var background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
     return {
-      content: 'Background color',
+      content: formatMessage(messages.backgroundColor),
       value: {
         name: 'background'
       },
       elemBefore: jsx(EditorBackgroundColorIcon, {
-        label: 'background color',
+        label: formatMessage(messages.backgroundColor),
         size: "medium"
       }),
       elemAfter: jsx("div", {
@@ -170,7 +260,7 @@ export var DragMenu = function DragMenu(_ref) {
   };
   var createhHeaderRowColumnMenuItem = function createhHeaderRowColumnMenuItem(direction) {
     return direction === 'column' ? {
-      content: 'Header column',
+      content: formatMessage(messages.headerColumn),
       value: {
         name: 'header_column'
       },
@@ -182,7 +272,7 @@ export var DragMenu = function DragMenu(_ref) {
         isChecked: checkIfHeaderColumnEnabled(selection)
       }))
     } : {
-      content: 'Header row',
+      content: formatMessage(messages.headerRow),
       value: {
         name: 'header_row'
       },
@@ -197,7 +287,7 @@ export var DragMenu = function DragMenu(_ref) {
   };
   var createRowNumbersMenuItem = function createRowNumbersMenuItem() {
     return {
-      content: 'Row numbers',
+      content: formatMessage(messages.rowNumbers),
       value: {
         name: 'row_numbers'
       },
@@ -325,4 +415,5 @@ export var DragMenu = function DragMenu(_ref) {
       hasSeparator: true
     }
   });
-};
+};
+export default injectIntl(DragMenu);

package/dist/esm/ui/FloatingDragMenu/index.js

@@ -3,7 +3,7 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { dragMenuDropdownWidth } from '../consts';
-import { DragMenu } from './DragMenu';
+import DragMenu from './DragMenu';
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
   var mountPoint = _ref.mountPoint,
     boundariesElement = _ref.boundariesElement,

package/dist/types/ui/DragHandle/index.d.ts

@@ -1,4 +1,6 @@
 import type { MouseEventHandler } from 'react';
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TableDirection } from '../../types';
 type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
@@ -18,5 +20,7 @@ type DragHandleProps = {
     canDrag?: boolean;
     isDragMenuTarget: boolean;
 };
-export declare const DragHandle: ({ isDragMenuTarget, tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: React.FC<import("react-intl-next").WithIntlProps<DragHandleProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<DragHandleProps & WrappedComponentProps<"intl">>;
+};
 export {};

package/dist/types/ui/FloatingDragMenu/DragMenu.d.ts

@@ -1,4 +1,6 @@
+/// <reference types="react" />
 import { jsx } from '@emotion/react';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -20,5 +22,8 @@ type DragMenuProps = {
     canDrag?: boolean;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
 };
-export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, pluginConfig, }: DragMenuProps) => jsx.JSX.Element | null;
-export {};
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<DragMenuProps & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types/utils/drag-menu.d.ts

@@ -4,8 +4,9 @@ import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } fro
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import type { TableDirection } from '../types';
+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;
 }

package/dist/types-ts4.5/ui/DragHandle/index.d.ts

@@ -1,4 +1,6 @@
 import type { MouseEventHandler } from 'react';
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TableDirection } from '../../types';
 type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
@@ -18,5 +20,7 @@ type DragHandleProps = {
     canDrag?: boolean;
     isDragMenuTarget: boolean;
 };
-export declare const DragHandle: ({ isDragMenuTarget, tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: React.FC<import("react-intl-next").WithIntlProps<DragHandleProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<DragHandleProps & WrappedComponentProps<"intl">>;
+};
 export {};

package/dist/types-ts4.5/ui/FloatingDragMenu/DragMenu.d.ts

@@ -1,4 +1,6 @@
+/// <reference types="react" />
 import { jsx } from '@emotion/react';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -20,5 +22,8 @@ type DragMenuProps = {
     canDrag?: boolean;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
 };
-export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, pluginConfig, }: DragMenuProps) => jsx.JSX.Element | null;
-export {};
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<DragMenuProps & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types-ts4.5/utils/drag-menu.d.ts

@@ -4,8 +4,9 @@ import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } fro
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import type { TableDirection } from '../types';
+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;
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.8.3",
+  "version": "5.8.4",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",