@atlaskit/editor-plugin-table 0.0.6 → 0.0.8

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 0.0.8
+
+### Patch Changes
+
+- [`e5b0deecf68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e5b0deecf68) - Add ability to localize for nodeview and add aria labels to RowControl and CornerControl
+
+## 0.0.7
+
+### Patch Changes
+
+- [`3b93848ef7e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3b93848ef7e) - This changes addresses a bug that occurs when a user is resizing tables and receives a TypeError (found on Sentry). This change adds a null check on columns existing in the growColumn and shrinkColumn functions so that we do not try to access a column that doesn't exist.
+- [`a1b80e72418`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a1b80e72418) - This change addresses a RangeError on `getRelativeDomCellWidths` found on Sentry. It sets the check for `colspan` to be strict equals to one as the value comes from the first table row's colspan DOM attribute and cannot be negative.
+
+  Reference: https://sentry.io/organizations/atlassian-2y/issues/3434914334/?project=5988900
+
+- [`b63aa34e1fe`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b63aa34e1fe) - This change addresses a bug that occurs when a user is clicking into an element inside the table and receives a RangeError (found on Sentry). This change adds bounds, NaN, and type checks when reading a cellIndex from tableMap so that we don't pass NaN or undefined to the call to nodeAt.
+
 ## 0.0.6
 
 ### Patch Changes

package/dist/cjs/plugins/table/event-handlers.js

@@ -37,11 +37,6 @@ var _utils3 = require("./utils");
 
 var _getAllowAddColumnCustomStep = require("./utils/get-allow-add-column-custom-step");
 
-// import {
-//   isElementInTableCell,
-//   isLastItemMediaGroup,
-//   setNodeSelection,
-// } from '@atlaskit/editor-core/src/utils';
 // import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
 var isFocusingCalendar = function isFocusingCalendar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
@@ -113,7 +108,13 @@ var handleClick = function handleClick(view, event) {
       _view$state = view.state,
       tr = _view$state.tr,
       paragraph = _view$state.schema.nodes.paragraph;
-  var editorElement = table.node.nodeAt(map.map[cellIndex]);
+  var cellPos = map.map[cellIndex];
+
+  if (isNaN(cellPos) || cellPos === undefined || typeof cellPos !== 'number') {
+    return false;
+  }
+
+  var editorElement = table.node.nodeAt(cellPos);
   /** Only if the last item is media group, insert a paragraph */
 
   if ((0, _utils2.isLastItemMediaGroup)(editorElement)) {

package/dist/cjs/plugins/table/nodeviews/table.js

@@ -81,7 +81,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     var _this;
 
     (0, _classCallCheck2.default)(this, TableView);
-    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined, undefined, props.hasIntlContext);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNode", function () {
       return _this.node;
     });
@@ -250,6 +250,7 @@ var createTableView = function createTableView(node, view, getPos, portalProvide
   var _getEditorFeatureFlag = getEditorFeatureFlags(),
       tableRenderOptimization = _getEditorFeatureFlag.tableRenderOptimization;
 
+  var hasIntlContext = true;
   return new TableView({
     node: node,
     view: view,
@@ -260,7 +261,8 @@ var createTableView = function createTableView(node, view, getPos, portalProvide
     options: options,
     tableRenderOptimization: tableRenderOptimization,
     getEditorContainerWidth: getEditorContainerWidth,
-    getEditorFeatureFlags: getEditorFeatureFlags
+    getEditorFeatureFlags: getEditorFeatureFlags,
+    hasIntlContext: hasIntlContext
   }).init();
 };
 

package/dist/cjs/plugins/table/nodeviews/tableCell.js

@@ -19,6 +19,9 @@ var _prosemirrorModel = require("prosemirror-model");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
+var DEFAULT_COL_SPAN = 1;
+var DEFAULT_ROW_SPAN = 1;
+
 var TableCellNodeView = /*#__PURE__*/function () {
   function TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer) {
     (0, _classCallCheck2.default)(this, TableCellNodeView);
@@ -62,10 +65,7 @@ var TableCellNodeView = /*#__PURE__*/function () {
       // this can happen when undoing merge cells
 
 
-      var defaultColspan = 1,
-          defaultRowspan = 1;
-
-      if (colspan !== (node.attrs.colspan || defaultColspan) || rowspan !== (node.attrs.rowspan || defaultRowspan)) {
+      if (colspan !== (node.attrs.colspan || DEFAULT_COL_SPAN) || rowspan !== (node.attrs.rowspan || DEFAULT_ROW_SPAN)) {
         return false;
       } // added + changed attributes
 

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/column-state.js

@@ -54,7 +54,7 @@ var getCellsRefsInColumn = function getCellsRefsInColumn(columnIndex, table, tab
     }
   });
   return cells;
-}; // calculates column withs based on `cells` DOM refs
+}; // calculates column widths based on `cells` DOM refs
 
 
 exports.getCellsRefsInColumn = getCellsRefsInColumn;

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/resize-logic.js

@@ -24,8 +24,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var growColumn = function growColumn(state, colIndex, amount, selectedColumns) {
-  // can't grow the last column
-  if (!state.cols[colIndex + 1]) {
+  // can't grow if columns don't exist or it's the last column
+  if (!state.cols[colIndex] || !state.cols[colIndex + 1]) {
     return state;
   }
 
@@ -47,7 +47,12 @@ var growColumn = function growColumn(state, colIndex, amount, selectedColumns) {
 exports.growColumn = growColumn;
 
 var shrinkColumn = function shrinkColumn(state, colIndex, amount, selectedColumns) {
-  // try to shrink dragging column by giving from the column to the right first
+  // can't shrink if columns don't exist
+  if (!state.cols[colIndex] || !state.cols[colIndex + 1]) {
+    return state;
+  } // try to shrink dragging column by giving from the column to the right first
+
+
   var res = moveSpaceFrom(state, colIndex, colIndex + 1, -amount);
   var newState = res.state;
   var isOverflownTable = (0, _resizeState.getTotalWidth)(newState) > newState.maxSize;

package/dist/cjs/plugins/table/toolbar.js

@@ -41,7 +41,6 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _utils2 = require("@atlaskit/editor-common/utils");
 
-// TODO: ED-14403 investigate why these translations don't work
 var messages = (0, _reactIntlNext.defineMessages)({
   tableOptions: {
     id: 'fabric.editor.tableOptions',

package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CornerControls = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -25,6 +25,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _tableMap = require("@atlaskit/editor-tables/table-map");
@@ -43,15 +45,23 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var CornerControls = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(CornerControls, _Component);
+var messages = (0, _reactIntlNext.defineMessages)({
+  cornerControl: {
+    id: 'fabric.editor.cornerControl',
+    defaultMessage: 'Highlight table',
+    description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
+  }
+});
+
+var CornerControlComponent = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(CornerControlComponent, _Component);
 
-  var _super = _createSuper(CornerControls);
+  var _super = _createSuper(CornerControlComponent);
 
-  function CornerControls() {
+  function CornerControlComponent() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, CornerControls);
+    (0, _classCallCheck2.default)(this, CornerControlComponent);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -93,14 +103,15 @@ var CornerControls = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  (0, _createClass2.default)(CornerControls, [{
+  (0, _createClass2.default)(CornerControlComponent, [{
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
           isInDanger = _this$props2.isInDanger,
           tableRef = _this$props2.tableRef,
           isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
-          isHeaderRowEnabled = _this$props2.isHeaderRowEnabled;
+          isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
+          formatMessage = _this$props2.intl.formatMessage;
 
       if (!tableRef) {
         return null;
@@ -116,6 +127,7 @@ var CornerControls = /*#__PURE__*/function (_Component) {
           top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
         }
       }, /*#__PURE__*/_react.default.createElement("button", {
+        "aria-label": formatMessage(messages.cornerControl),
         type: "button",
         className: (0, _classnames.default)(_types.TableCssClassName.CONTROLS_CORNER_BUTTON, {
           danger: isActive && isInDanger
@@ -134,7 +146,8 @@ var CornerControls = /*#__PURE__*/function (_Component) {
       })));
     }
   }]);
-  return CornerControls;
+  return CornerControlComponent;
 }(_react.Component);
 
-exports.default = CornerControls;
+var CornerControls = (0, _reactIntlNext.injectIntl)(CornerControlComponent);
+exports.CornerControls = CornerControls;

package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.RowControls = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -25,6 +25,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _commands = require("../../../commands");
 
 var _types = require("../../../types");
@@ -41,15 +43,23 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var RowControls = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(RowControls, _Component);
+var messages = (0, _reactIntlNext.defineMessages)({
+  rowControl: {
+    id: 'fabric.editor.rowControl',
+    defaultMessage: 'Highlight row',
+    description: 'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.'
+  }
+});
+
+var RowControlsComponent = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(RowControlsComponent, _Component);
 
-  var _super = _createSuper(RowControls);
+  var _super = _createSuper(RowControlsComponent);
 
-  function RowControls() {
+  function RowControlsComponent() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, RowControls);
+    (0, _classCallCheck2.default)(this, RowControlsComponent);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -65,7 +75,7 @@ var RowControls = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  (0, _createClass2.default)(RowControls, [{
+  (0, _createClass2.default)(RowControlsComponent, [{
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -75,7 +85,8 @@ var RowControls = /*#__PURE__*/function (_Component) {
           tableRef = _this$props.tableRef,
           hoveredRows = _this$props.hoveredRows,
           isInDanger = _this$props.isInDanger,
-          isResizing = _this$props.isResizing;
+          isResizing = _this$props.isResizing,
+          formatMessage = _this$props.intl.formatMessage;
 
       if (!tableRef) {
         return null;
@@ -112,6 +123,7 @@ var RowControls = /*#__PURE__*/function (_Component) {
             paddingTop: thisRowSticky ? "".concat(_consts.tableControlsSpacing, "px") : undefined
           }
         }, /*#__PURE__*/_react.default.createElement("button", {
+          "aria-label": formatMessage(messages.rowControl),
           type: "button",
           className: "".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON, "\n                  ").concat(_types.TableCssClassName.CONTROLS_BUTTON, "\n                "),
           onClick: function onClick(event) {
@@ -129,7 +141,8 @@ var RowControls = /*#__PURE__*/function (_Component) {
       })));
     }
   }]);
-  return RowControls;
+  return RowControlsComponent;
 }(_react.Component);
 
-exports.default = RowControls;
+var RowControls = (0, _reactIntlNext.injectIntl)(RowControlsComponent);
+exports.RowControls = RowControls;

package/dist/cjs/plugins/table/ui/TableFloatingControls/index.js

@@ -31,11 +31,11 @@ var _commands = require("../../commands");
 
 var _utils2 = require("../../utils");
 
-var _CornerControls = _interopRequireDefault(require("./CornerControls"));
+var _CornerControls = require("./CornerControls");
 
 var _NumberColumn = _interopRequireDefault(require("./NumberColumn"));
 
-var _RowControls = _interopRequireDefault(require("./RowControls"));
+var _RowControls = require("./RowControls");
 
 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); }
 
@@ -201,7 +201,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         isResizing: isResizing,
         selectRow: this.selectRow,
         stickyTop: stickyTop
-      }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.default, {
+      }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
         editorView: editorView,
         tableRef: tableRef,
         isInDanger: isInDanger,
@@ -210,7 +210,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         isHeaderColumnEnabled: isHeaderColumnEnabled,
         hoveredRows: hoveredRows,
         stickyTop: tableActive ? stickyTop : undefined
-      }), /*#__PURE__*/_react.default.createElement(_RowControls.default, {
+      }), /*#__PURE__*/_react.default.createElement(_RowControls.RowControls, {
         editorView: editorView,
         tableRef: tableRef,
         hoverRows: this.hoverRows,

package/dist/cjs/plugins/table/utils/column-controls.js

@@ -149,7 +149,7 @@ var getRelativeDomCellWidths = function getRelativeDomCellWidths(_ref) {
   // for cells in a table with unchanged column widths,
   // these are identified by the lack of colwidth data attribute,
   // return equally partitioned total cell width in DOM for each cell.
-  if (colspan <= 1 || !colwidth) {
+  if (colspan === 1 || !colwidth) {
     return new Array(colspan).fill(width / colspan);
   } // For cells that have colSpan > 1 and
   // are part of a table with resized columns

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.0.6"
+	"version": "0.0.8"
 }

package/dist/es2019/plugins/table/event-handlers.js

@@ -2,12 +2,7 @@ import { Selection, TextSelection } from 'prosemirror-state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
-import { browser } from '@atlaskit/editor-common/utils'; // import {
-//   isElementInTableCell,
-//   isLastItemMediaGroup,
-//   setNodeSelection,
-// } from '@atlaskit/editor-core/src/utils';
-
+import { browser } from '@atlaskit/editor-common/utils';
 import { isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '@atlaskit/editor-common/utils'; // import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
 
 import { closestElement } from '@atlaskit/editor-common/utils';
@@ -89,7 +84,13 @@ export const handleClick = (view, event) => {
       }
     }
   } = view;
-  const editorElement = table.node.nodeAt(map.map[cellIndex]);
+  const cellPos = map.map[cellIndex];
+
+  if (isNaN(cellPos) || cellPos === undefined || typeof cellPos !== 'number') {
+    return false;
+  }
+
+  const editorElement = table.node.nodeAt(cellPos);
   /** Only if the last item is media group, insert a paragraph */
 
   if (isLastItemMediaGroup(editorElement)) {

package/dist/es2019/plugins/table/nodeviews/table.js

@@ -32,7 +32,7 @@ const toDOM = (node, props) => {
 
 export default class TableView extends ReactNodeView {
   constructor(props) {
-    super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined, undefined, props.hasIntlContext);
 
     _defineProperty(this, "getNode", () => {
       return this.node;
@@ -190,6 +190,7 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
   const {
     tableRenderOptimization
   } = getEditorFeatureFlags();
+  const hasIntlContext = true;
   return new TableView({
     node,
     view,
@@ -200,6 +201,7 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     options,
     tableRenderOptimization,
     getEditorContainerWidth,
-    getEditorFeatureFlags
+    getEditorFeatureFlags,
+    hasIntlContext
   }).init();
 };

package/dist/es2019/plugins/table/nodeviews/tableCell.js

@@ -1,6 +1,8 @@
 import uuid from 'uuid';
 import { DOMSerializer } from 'prosemirror-model';
 import { getCellDomAttrs, getCellAttrs } from '@atlaskit/adf-schema';
+const DEFAULT_COL_SPAN = 1;
+const DEFAULT_ROW_SPAN = 1;
 export default class TableCellNodeView {
   constructor(node, view, getPos, getEditorFeatureFlags, observer) {
     this.view = view;
@@ -37,10 +39,7 @@ export default class TableCellNodeView {
     } = getCellAttrs(this.dom); // need to rerender when colspan/rowspan in dom are different from the node attrs
     // this can happen when undoing merge cells
 
-    const defaultColspan = 1,
-          defaultRowspan = 1;
-
-    if (colspan !== (node.attrs.colspan || defaultColspan) || rowspan !== (node.attrs.rowspan || defaultRowspan)) {
+    if (colspan !== (node.attrs.colspan || DEFAULT_COL_SPAN) || rowspan !== (node.attrs.rowspan || DEFAULT_ROW_SPAN)) {
       return false;
     } // added + changed attributes
 

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/column-state.js

@@ -35,7 +35,7 @@ export const getCellsRefsInColumn = (columnIndex, table, tableStart, domAtPos) =
     }
   });
   return cells;
-}; // calculates column withs based on `cells` DOM refs
+}; // calculates column widths based on `cells` DOM refs
 
 export const calculateColumnWidth = (cells, calculateColumnWidthCb) => {
   let maxColWidth = 0;

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/resize-logic.js

@@ -1,8 +1,8 @@
 import { getFreeSpace } from './column-state';
 import { bulkColumnsResize, getTotalWidth } from './resize-state';
 export const growColumn = (state, colIndex, amount, selectedColumns) => {
-  // can't grow the last column
-  if (!state.cols[colIndex + 1]) {
+  // can't grow if columns don't exist or it's the last column
+  if (!state.cols[colIndex] || !state.cols[colIndex + 1]) {
     return state;
   }
 
@@ -21,7 +21,12 @@ export const growColumn = (state, colIndex, amount, selectedColumns) => {
   return newState;
 };
 export const shrinkColumn = (state, colIndex, amount, selectedColumns) => {
-  // try to shrink dragging column by giving from the column to the right first
+  // can't shrink if columns don't exist
+  if (!state.cols[colIndex] || !state.cols[colIndex + 1]) {
+    return state;
+  } // try to shrink dragging column by giving from the column to the right first
+
+
   const res = moveSpaceFrom(state, colIndex, colIndex + 1, -amount);
   let newState = res.state;
   const isOverflownTable = getTotalWidth(newState) > newState.maxSize;

package/dist/es2019/plugins/table/toolbar.js

@@ -14,8 +14,7 @@ import { splitCell } from '@atlaskit/editor-tables/utils';
 import tableMessages from './ui/messages';
 import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
 import { findParentDomRefOfType } from 'prosemirror-utils';
-import { closestElement } from '@atlaskit/editor-common/utils'; // TODO: ED-14403 investigate why these translations don't work
-
+import { closestElement } from '@atlaskit/editor-common/utils';
 export const messages = defineMessages({
   tableOptions: {
     id: 'fabric.editor.tableOptions',

package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/index.js

@@ -1,11 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import classnames from 'classnames';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverTable } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
-export default class CornerControls extends Component {
+const messages = defineMessages({
+  cornerControl: {
+    id: 'fabric.editor.cornerControl',
+    defaultMessage: 'Highlight table',
+    description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
+  }
+});
+
+class CornerControlComponent extends Component {
   constructor(...args) {
     super(...args);
 
@@ -57,7 +66,10 @@ export default class CornerControls extends Component {
       isInDanger,
       tableRef,
       isHeaderColumnEnabled,
-      isHeaderRowEnabled
+      isHeaderRowEnabled,
+      intl: {
+        formatMessage
+      }
     } = this.props;
 
     if (!tableRef) {
@@ -74,6 +86,7 @@ export default class CornerControls extends Component {
         top: this.props.stickyTop !== undefined ? `${this.props.stickyTop}px` : undefined
       }
     }, /*#__PURE__*/React.createElement("button", {
+      "aria-label": formatMessage(messages.cornerControl),
       type: "button",
       className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
         danger: isActive && isInDanger
@@ -92,4 +105,6 @@ export default class CornerControls extends Component {
     })));
   }
 
-}
+}
+
+export const CornerControls = injectIntl(CornerControlComponent);

package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/index.js

@@ -1,10 +1,19 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
 import { tableControlsSpacing, tableToolbarSize } from '../../consts';
-export default class RowControls extends Component {
+const messages = defineMessages({
+  rowControl: {
+    id: 'fabric.editor.rowControl',
+    defaultMessage: 'Highlight row',
+    description: 'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.'
+  }
+});
+
+class RowControlsComponent extends Component {
   constructor(...args) {
     super(...args);
 
@@ -23,7 +32,10 @@ export default class RowControls extends Component {
       tableRef,
       hoveredRows,
       isInDanger,
-      isResizing
+      isResizing,
+      intl: {
+        formatMessage
+      }
     } = this.props;
 
     if (!tableRef) {
@@ -64,6 +76,7 @@ export default class RowControls extends Component {
           paddingTop: thisRowSticky ? `${tableControlsSpacing}px` : undefined
         }
       }, /*#__PURE__*/React.createElement("button", {
+        "aria-label": formatMessage(messages.rowControl),
         type: "button",
         className: `${ClassName.ROW_CONTROLS_BUTTON}
                   ${ClassName.CONTROLS_BUTTON}
@@ -79,4 +92,6 @@ export default class RowControls extends Component {
     })));
   }
 
-}
+}
+
+export const RowControls = injectIntl(RowControlsComponent);

package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js

@@ -3,9 +3,9 @@ import React, { Component } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
 import { hoverRows, selectRow } from '../../commands';
 import { isSelectionUpdated } from '../../utils';
-import CornerControls from './CornerControls';
+import { CornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
-import RowControls from './RowControls';
+import { RowControls } from './RowControls';
 export default class TableFloatingControls extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/plugins/table/utils/column-controls.js

@@ -115,7 +115,7 @@ const getRelativeDomCellWidths = ({
   // for cells in a table with unchanged column widths,
   // these are identified by the lack of colwidth data attribute,
   // return equally partitioned total cell width in DOM for each cell.
-  if (colspan <= 1 || !colwidth) {
+  if (colspan === 1 || !colwidth) {
     return new Array(colspan).fill(width / colspan);
   } // For cells that have colSpan > 1 and
   // are part of a table with resized columns

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.0.6"
+	"version": "0.0.8"
 }

package/dist/esm/plugins/table/event-handlers.js

@@ -3,12 +3,7 @@ import { Selection, TextSelection } from 'prosemirror-state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
-import { browser } from '@atlaskit/editor-common/utils'; // import {
-//   isElementInTableCell,
-//   isLastItemMediaGroup,
-//   setNodeSelection,
-// } from '@atlaskit/editor-core/src/utils';
-
+import { browser } from '@atlaskit/editor-common/utils';
 import { isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '@atlaskit/editor-common/utils'; // import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
 
 import { closestElement } from '@atlaskit/editor-common/utils';
@@ -84,7 +79,13 @@ export var handleClick = function handleClick(view, event) {
       _view$state = view.state,
       tr = _view$state.tr,
       paragraph = _view$state.schema.nodes.paragraph;
-  var editorElement = table.node.nodeAt(map.map[cellIndex]);
+  var cellPos = map.map[cellIndex];
+
+  if (isNaN(cellPos) || cellPos === undefined || typeof cellPos !== 'number') {
+    return false;
+  }
+
+  var editorElement = table.node.nodeAt(cellPos);
   /** Only if the last item is media group, insert a paragraph */
 
   if (isLastItemMediaGroup(editorElement)) {