@atlaskit/editor-plugin-table 5.8.3 → 5.8.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 5.8.5
+
+### Patch Changes
+
+- [#67238](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67238) [`40533849b2ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/40533849b2ec) - [ED-21835] Change EditorAPI type to always union with undefined
+
+## 5.8.4
+
+### Patch Changes
+
+- [#67113](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67113) [`7160ae19d9e5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7160ae19d9e5) - [ux] Adds localisation for table drag handle menu options
+- [#66456](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66456) [`f67ea3106bb9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f67ea3106bb9) - Add support for i18n for drag handles
+
 ## 5.8.3
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -57,11 +57,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
     current: null
   };
   var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
-    var _document$body$offset, _document, _api$width$sharedStat;
+    var _document$body$offset, _document, _api$width$sharedStat, _api$width;
     var defaultState = {
       width: (_document$body$offset = (_document = document) === null || _document === void 0 || (_document = _document.body) === null || _document === void 0 ? void 0 : _document.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
     };
-    return (_api$width$sharedStat = api === null || api === void 0 ? void 0 : api.width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
+    return (_api$width$sharedStat = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
   };
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {

package/dist/cjs/ui/DragHandle/index.js

@@ -11,6 +11,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-common/utils");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview");
@@ -21,7 +23,7 @@ var _DragPreview = require("../DragPreview");
 var _HandleIconComponent = require("./HandleIconComponent");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var DragHandle = exports.DragHandle = function DragHandle(_ref) {
+var DragHandleComponent = function DragHandleComponent(_ref) {
   var isDragMenuTarget = _ref.isDragMenuTarget,
     tableLocalId = _ref.tableLocalId,
     _ref$direction = _ref.direction,
@@ -39,7 +41,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     onClick = _ref.onClick,
     editorView = _ref.editorView,
     _ref$canDrag = _ref.canDrag,
-    _canDrag = _ref$canDrag === void 0 ? false : _ref$canDrag;
+    _canDrag = _ref$canDrag === void 0 ? false : _ref$canDrag,
+    formatMessage = _ref.intl.formatMessage;
   var dragHandleDivRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -124,6 +127,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       transform: direction === 'column' ? 'none' : 'rotate(90deg)'
     },
     "data-testid": "table-drag-handle-button",
+    "aria-label": formatMessage(direction === 'row' ? _messages.tableMessages.rowDragHandle : _messages.tableMessages.columnDragHandle),
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseUp: function onMouseUp(e) {
@@ -142,4 +146,5 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     width: previewWidth,
     height: previewHeight
   }), previewContainer));
-};
+};
+var DragHandle = exports.DragHandle = (0, _reactIntlNext.injectIntl)(DragHandleComponent);

package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -148,7 +148,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _getPluginState3 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
       return {
-        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addColumn : _messages.tableMessages.insertColumn),
+        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addColumnRight : _messages.tableMessages.insertColumn),
         value: {
           name: 'insert_column'
         },
@@ -165,7 +165,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _getPluginState4 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
       return {
-        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addRow : _messages.tableMessages.insertRow),
+        content: formatMessage(isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? _messages.tableMessages.addRowBelow : _messages.tableMessages.insertRow),
         value: {
           name: 'insert_row'
         },

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

@@ -4,12 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DragMenu = void 0;
+exports.default = exports.DragMenu = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
 var _styles = require("@atlaskit/editor-common/styles");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
@@ -34,22 +36,109 @@ var _styles2 = require("./styles");
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 
+var MapDragMenuOptionIdToMessage = {
+  add_row_above: {
+    message: _messages.tableMessages.addRowAbove,
+    plural: null
+  },
+  add_row_below: {
+    message: _messages.tableMessages.addRowBelow,
+    plural: null
+  },
+  add_column_left: {
+    message: _messages.tableMessages.addColumnLeft,
+    plural: null
+  },
+  add_column_right: {
+    message: _messages.tableMessages.addColumnRight,
+    plural: null
+  },
+  distribute_columns: {
+    message: _messages.tableMessages.distributeColumns,
+    plural: 'noOfCols'
+  },
+  clear_cells: {
+    message: _messages.tableMessages.clearCells,
+    plural: 'noOfCells'
+  },
+  delete_row: {
+    message: _messages.tableMessages.removeRows,
+    plural: 'noOfRows'
+  },
+  delete_column: {
+    message: _messages.tableMessages.removeColumns,
+    plural: 'noOfCols'
+  },
+  move_column_left: {
+    message: _messages.tableMessages.moveColumnLeft,
+    plural: 'noOfCols'
+  },
+  move_column_right: {
+    message: _messages.tableMessages.moveColumnRight,
+    plural: 'noOfCols'
+  },
+  move_row_up: {
+    message: _messages.tableMessages.moveRowUp,
+    plural: 'noOfRows'
+  },
+  move_row_down: {
+    message: _messages.tableMessages.moveRowDown,
+    plural: 'noOfRows'
+  },
+  sort_column_asc: {
+    message: _messages.tableMessages.sortColumnIncreasing,
+    plural: null
+  },
+  sort_column_desc: {
+    message: _messages.tableMessages.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 = (0, _toConsumableArray2.default)(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
       },
@@ -59,7 +148,7 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
           display: 'flex'
         }
       }, (0, _react2.jsx)(item.icon, {
-        label: item.title
+        label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)
       })) : undefined,
       elemAfter: item.keymap ? (0, _react2.jsx)("div", {
         css: _shortcut.shortcutStyle
@@ -93,7 +182,8 @@ var DragMenu = exports.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;
@@ -108,7 +198,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   var hasMergedCellsInTable = (0, _utils3.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 = (0, _dragMenu.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) {
@@ -138,12 +228,12 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
     var background = (0, _editorPalette.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.tableMessages.backgroundColor),
       value: {
         name: 'background'
       },
       elemBefore: (0, _react2.jsx)(_backgroundColor.default, {
-        label: 'background color',
+        label: formatMessage(_messages.tableMessages.backgroundColor),
         size: "medium"
       }),
       elemAfter: (0, _react2.jsx)("div", {
@@ -178,7 +268,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   };
   var createhHeaderRowColumnMenuItem = function createhHeaderRowColumnMenuItem(direction) {
     return direction === 'column' ? {
-      content: 'Header column',
+      content: formatMessage(_messages.tableMessages.headerColumn),
       value: {
         name: 'header_column'
       },
@@ -190,7 +280,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
         isChecked: (0, _utils3.checkIfHeaderColumnEnabled)(selection)
       }))
     } : {
-      content: 'Header row',
+      content: formatMessage(_messages.tableMessages.headerRow),
       value: {
         name: 'header_row'
       },
@@ -205,7 +295,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   };
   var createRowNumbersMenuItem = function createRowNumbersMenuItem() {
     return {
-      content: 'Row numbers',
+      content: formatMessage(_messages.tableMessages.rowNumbers),
       value: {
         name: 'row_numbers'
       },
@@ -333,4 +423,5 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
       hasSeparator: true
     }
   });
-};
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(DragMenu);

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

@@ -10,7 +10,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _consts = require("../consts");
-var _DragMenu = require("./DragMenu");
+var _DragMenu = _interopRequireDefault(require("./DragMenu"));
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
   var mountPoint = _ref.mountPoint,
     boundariesElement = _ref.boundariesElement,
@@ -53,7 +53,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     forcePlacement: true,
     offset: offset,
     stick: true
-  }, /*#__PURE__*/_react.default.createElement(_DragMenu.DragMenu, {
+  }, /*#__PURE__*/_react.default.createElement(_DragMenu.default, {
     editorView: editorView,
     isOpen: isOpen,
     boundariesElement: boundariesElement,

package/dist/es2019/plugin.js

@@ -49,11 +49,11 @@ const tablesPlugin = ({
     current: null
   };
   const defaultGetEditorContainerWidth = () => {
-    var _document$body$offset, _document, _document$body, _api$width$sharedStat;
+    var _document$body$offset, _document, _document$body, _api$width$sharedStat, _api$width;
     const defaultState = {
       width: (_document$body$offset = (_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
     };
-    return (_api$width$sharedStat = api === null || api === void 0 ? void 0 : api.width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
+    return (_api$width$sharedStat = api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
   };
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {

package/dist/es2019/ui/DragHandle/index.js

@@ -1,6 +1,8 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
+import { injectIntl } from 'react-intl-next';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { browser } from '@atlaskit/editor-common/utils';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
@@ -9,7 +11,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
-export const DragHandle = ({
+const DragHandleComponent = ({
   isDragMenuTarget,
   tableLocalId,
   direction = 'row',
@@ -23,7 +25,10 @@ export const DragHandle = ({
   onMouseUp,
   onClick,
   editorView,
-  canDrag = false
+  canDrag = false,
+  intl: {
+    formatMessage
+  }
 }) => {
   const dragHandleDivRef = useRef(null);
   const [previewContainer, setPreviewContainer] = useState(null);
@@ -110,6 +115,7 @@ export const DragHandle = ({
       transform: direction === 'column' ? 'none' : 'rotate(90deg)'
     },
     "data-testid": "table-drag-handle-button",
+    "aria-label": formatMessage(direction === 'row' ? messages.rowDragHandle : messages.columnDragHandle),
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseUp: e => {
@@ -128,4 +134,5 @@ export const DragHandle = ({
     width: previewWidth,
     height: previewHeight
   }), previewContainer));
-};
+};
+export const DragHandle = injectIntl(DragHandleComponent);

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -143,7 +143,7 @@ export class ContextualMenu extends Component {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
       return {
-        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addColumn : messages.insertColumn),
+        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addColumnRight : messages.insertColumn),
         value: {
           name: 'insert_column'
         },
@@ -164,7 +164,7 @@ export class ContextualMenu extends Component {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
       return {
-        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addRow : messages.insertRow),
+        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addRowBelow : messages.insertRow),
         value: {
           name: 'insert_row'
         },

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

@@ -2,7 +2,9 @@
 /** @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';
@@ -24,18 +26,107 @@ import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColum
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
 import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
+const 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
+  }
+};
 const 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']];
-const convertToDropdownItems = dragMenuConfig => {
+const convertToDropdownItems = (dragMenuConfig, formatMessage, selectionRect) => {
   let menuItemsArr = [...Array(groupedDragMenuConfig.length)].map(() => []);
   let menuCallback = {};
   dragMenuConfig.forEach(item => {
+    var _MapDragMenuOptionIdT;
     const menuGroupIndex = groupedDragMenuConfig.findIndex(group => group.includes(item.id));
     if (menuGroupIndex === -1) {
       return;
     }
+    const isPlural = Boolean((_MapDragMenuOptionIdT = MapDragMenuOptionIdToMessage[item.id]) === null || _MapDragMenuOptionIdT === void 0 ? void 0 : _MapDragMenuOptionIdT.plural);
+    let plural = 0;
+    if (isPlural && selectionRect) {
+      const {
+        top,
+        bottom,
+        right,
+        left
+      } = selectionRect;
+      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;
+          }
+      }
+    }
+    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
       },
@@ -45,7 +136,7 @@ const 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
@@ -77,7 +168,10 @@ export const DragMenu = ({
   getEditorContainerWidth,
   canDrag,
   editorAnalyticsAPI,
-  pluginConfig
+  pluginConfig,
+  intl: {
+    formatMessage
+  }
 }) => {
   var _pluginConfig$allowBa;
   const {
@@ -98,7 +192,7 @@ export const DragMenu = ({
   const {
     menuItems,
     menuCallback
-  } = convertToDropdownItems(dragMenuConfig);
+  } = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect);
   const handleSubMenuRef = ref => {
     const parent = closestElement(editorView.dom, '.fabric-editor-popup-scroll-parent');
     if (!(parent && ref)) {
@@ -130,12 +224,12 @@ export const DragMenu = ({
     const node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
     const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? 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 +264,7 @@ export const DragMenu = ({
   };
   const createhHeaderRowColumnMenuItem = direction => {
     return direction === 'column' ? {
-      content: 'Header column',
+      content: formatMessage(messages.headerColumn),
       value: {
         name: 'header_column'
       },
@@ -182,7 +276,7 @@ export const DragMenu = ({
         isChecked: checkIfHeaderColumnEnabled(selection)
       }))
     } : {
-      content: 'Header row',
+      content: formatMessage(messages.headerRow),
       value: {
         name: 'header_row'
       },
@@ -197,7 +291,7 @@ export const DragMenu = ({
   };
   const createRowNumbersMenuItem = () => {
     return {
-      content: 'Row numbers',
+      content: formatMessage(messages.rowNumbers),
       value: {
         name: 'row_numbers'
       },
@@ -331,4 +425,5 @@ export const DragMenu = ({
       hasSeparator: true
     }
   });
-};
+};
+export default injectIntl(DragMenu);

package/dist/es2019/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';
 const FloatingDragMenu = ({
   mountPoint,
   boundariesElement,

package/dist/esm/plugin.js

@@ -50,11 +50,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
     current: null
   };
   var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
-    var _document$body$offset, _document, _api$width$sharedStat;
+    var _document$body$offset, _document, _api$width$sharedStat, _api$width;
     var defaultState = {
       width: (_document$body$offset = (_document = document) === null || _document === void 0 || (_document = _document.body) === null || _document === void 0 ? void 0 : _document.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
     };
-    return (_api$width$sharedStat = api === null || api === void 0 ? void 0 : api.width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
+    return (_api$width$sharedStat = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
   };
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {

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

@@ -3,6 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
+import { injectIntl } from 'react-intl-next';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { browser } from '@atlaskit/editor-common/utils';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
@@ -11,7 +13,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
-export var DragHandle = function DragHandle(_ref) {
+var DragHandleComponent = function DragHandleComponent(_ref) {
   var isDragMenuTarget = _ref.isDragMenuTarget,
     tableLocalId = _ref.tableLocalId,
     _ref$direction = _ref.direction,
@@ -29,7 +31,8 @@ export var DragHandle = function DragHandle(_ref) {
     onClick = _ref.onClick,
     editorView = _ref.editorView,
     _ref$canDrag = _ref.canDrag,
-    _canDrag = _ref$canDrag === void 0 ? false : _ref$canDrag;
+    _canDrag = _ref$canDrag === void 0 ? false : _ref$canDrag,
+    formatMessage = _ref.intl.formatMessage;
   var dragHandleDivRef = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -114,6 +117,7 @@ export var DragHandle = function DragHandle(_ref) {
       transform: direction === 'column' ? 'none' : 'rotate(90deg)'
     },
     "data-testid": "table-drag-handle-button",
+    "aria-label": formatMessage(direction === 'row' ? messages.rowDragHandle : messages.columnDragHandle),
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseUp: function onMouseUp(e) {
@@ -132,4 +136,5 @@ export var DragHandle = function DragHandle(_ref) {
     width: previewWidth,
     height: previewHeight
   }), previewContainer));
-};
+};
+export var DragHandle = injectIntl(DragHandleComponent);