@atlaskit/editor-plugin-table 0.0.6 → 0.0.8

package/src/plugins/table/__tests__/unit/nodeviews/table.ts

@@ -73,6 +73,7 @@ describe('table -> nodeviews -> table.tsx', () => {
             tableRenderOptimization: true,
             getEditorContainerWidth: () => ({ width: 500 }),
             getEditorFeatureFlags: () => ({}),
+            hasIntlContext: true,
           }).init();
 
           renderSpy = jest.spyOn(tableNodeView, 'render');

package/src/plugins/table/event-handlers.ts

@@ -18,11 +18,6 @@ import { EditorView } from 'prosemirror-view';
 
 import { browser } from '@atlaskit/editor-common/utils';
 
-// import {
-//   isElementInTableCell,
-//   isLastItemMediaGroup,
-//   setNodeSelection,
-// } from '@atlaskit/editor-core/src/utils';
 import {
   isElementInTableCell,
   isLastItemMediaGroup,
@@ -160,8 +155,12 @@ export const handleClick = (view: EditorView, event: Event): boolean => {
       },
     },
   } = view;
-  const editorElement = table.node.nodeAt(map.map[cellIndex]) as PmNode;
+  const cellPos = map.map[cellIndex];
+  if (isNaN(cellPos) || cellPos === undefined || typeof cellPos !== 'number') {
+    return false;
+  }
 
+  const editorElement = table.node.nodeAt(cellPos) as PmNode;
   /** Only if the last item is media group, insert a paragraph */
   if (isLastItemMediaGroup(editorElement)) {
     const posInTable = map.map[cellIndex] + editorElement.nodeSize;

package/src/plugins/table/nodeviews/table.tsx

@@ -72,6 +72,10 @@ export default class TableView extends ReactNodeView<Props> {
       props.portalProviderAPI,
       props.eventDispatcher,
       props,
+      undefined,
+      undefined,
+      undefined,
+      props.hasIntlContext,
     );
     this.getPos = props.getPos;
     this.tableRenderOptimization = props.tableRenderOptimization;
@@ -233,6 +237,8 @@ export const createTableView = (
   const { pluginConfig } = getPluginState(view.state);
   const { allowColumnResizing } = getPluginConfig(pluginConfig);
   const { tableRenderOptimization } = getEditorFeatureFlags();
+  const hasIntlContext = true;
+
   return new TableView({
     node,
     view,
@@ -244,5 +250,6 @@ export const createTableView = (
     tableRenderOptimization,
     getEditorContainerWidth,
     getEditorFeatureFlags,
+    hasIntlContext,
   }).init();
 };

package/src/plugins/table/nodeviews/tableCell.tsx

@@ -11,6 +11,9 @@ import {
 } from '@atlaskit/adf-schema';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 
+const DEFAULT_COL_SPAN = 1;
+const DEFAULT_ROW_SPAN = 1;
+
 export default class TableCellNodeView implements NodeView {
   node: Node;
   dom: HTMLElement;
@@ -62,11 +65,9 @@ export default class TableCellNodeView implements NodeView {
 
     // 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)
+      colspan !== (node.attrs.colspan || DEFAULT_COL_SPAN) ||
+      rowspan !== (node.attrs.rowspan || DEFAULT_ROW_SPAN)
     ) {
       return false;
     }

package/src/plugins/table/nodeviews/types.ts

@@ -26,4 +26,5 @@ export interface Props {
   tableRenderOptimization?: boolean;
   getEditorContainerWidth: GetEditorContainerWidth;
   getEditorFeatureFlags: GetEditorFeatureFlags;
+  hasIntlContext: boolean;
 }

package/src/plugins/table/pm-plugins/table-resizing/utils/column-state.ts

@@ -62,7 +62,7 @@ export const getCellsRefsInColumn = (
   return cells;
 };
 
-// calculates column withs based on `cells` DOM refs
+// calculates column widths based on `cells` DOM refs
 export const calculateColumnWidth = (
   cells: HTMLElement[],
   calculateColumnWidthCb: (

package/src/plugins/table/pm-plugins/table-resizing/utils/resize-logic.ts

@@ -8,8 +8,8 @@ export const growColumn = (
   amount: number,
   selectedColumns?: number[],
 ): ResizeState => {
-  // 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;
   }
   const res = moveSpaceFrom(state, colIndex + 1, colIndex, amount);
@@ -32,6 +32,10 @@ export const shrinkColumn = (
   amount: number,
   selectedColumns?: number[],
 ): ResizeState => {
+  // 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;

package/src/plugins/table/toolbar.ts

@@ -57,7 +57,6 @@ import { findParentDomRefOfType } from 'prosemirror-utils';
 import { EditorView } from 'prosemirror-view';
 import { closestElement } from '@atlaskit/editor-common/utils';
 
-// TODO: ED-14403 investigate why these translations don't work
 export const messages = defineMessages({
   tableOptions: {
     id: 'fabric.editor.tableOptions',

package/src/plugins/table/ui/FloatingContextualMenu/__tests__/ContextualMenu.tsx

@@ -37,7 +37,7 @@ it.skip('TODO: restore unit', () => {});
 //       }));
 //     });
 
-//     test('should render contextual menu when no tableCellPosition is passed but exist on editor state ', () => {
+//     it('should render contextual menu when no tableCellPosition is passed but exist on editor state ', () => {
 //       const intl = createIntl({ locale: 'en' });
 //       const wrapper = shallow(
 //         <ContextualMenu

package/src/plugins/table/ui/FloatingContextualMenu/__tests__/FloatingContextualMenu.tsx

@@ -34,7 +34,7 @@ it.skip('TODO: restore unit', () => {});
 //       }));
 //     });
 
-//     test('should render floating contextual menu when no tableCellPosition is passed but exist on editor state ', () => {
+//     it('should render floating contextual menu when no tableCellPosition is passed but exist on editor state ', () => {
 //       const wrapper = shallow(
 //         <FloatingContextualMenu
 //           editorView={editorView}

package/src/plugins/table/ui/TableFloatingControls/CornerControls/index.tsx

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { defineMessages, injectIntl } from 'react-intl-next';
 
 import classnames from 'classnames';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -12,6 +14,15 @@ import { EditorView } from 'prosemirror-view';
 import { clearHoverSelection, hoverTable } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 
+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.',
+  },
+});
+
 export interface Props {
   editorView: EditorView;
   tableRef?: HTMLTableElement;
@@ -23,13 +34,17 @@ export interface Props {
   stickyTop?: number;
 }
 
-export default class CornerControls extends Component<Props, any> {
+class CornerControlComponent extends Component<
+  Props & WrappedComponentProps,
+  any
+> {
   render() {
     const {
       isInDanger,
       tableRef,
       isHeaderColumnEnabled,
       isHeaderRowEnabled,
+      intl: { formatMessage },
     } = this.props;
     if (!tableRef) {
       return null;
@@ -50,6 +65,7 @@ export default class CornerControls extends Component<Props, any> {
         }}
       >
         <button
+          aria-label={formatMessage(messages.cornerControl)}
           type="button"
           className={classnames(ClassName.CONTROLS_CORNER_BUTTON, {
             danger: isActive && isInDanger,
@@ -103,3 +119,5 @@ export default class CornerControls extends Component<Props, any> {
     hoverTable()(state, dispatch);
   };
 }
+
+export const CornerControls = injectIntl(CornerControlComponent);

package/src/plugins/table/ui/TableFloatingControls/RowControls/index.tsx

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 
 import { EditorView } from 'prosemirror-view';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { defineMessages, injectIntl } from 'react-intl-next';
 
 import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -12,6 +14,15 @@ import {
 } from '../../../utils';
 import { tableControlsSpacing, tableToolbarSize } from '../../consts';
 
+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.',
+  },
+});
+
 export interface Props {
   editorView: EditorView;
   tableRef: HTMLTableElement;
@@ -24,7 +35,7 @@ export interface Props {
   stickyTop?: number;
 }
 
-export default class RowControls extends Component<Props> {
+class RowControlsComponent extends Component<Props & WrappedComponentProps> {
   render() {
     const {
       editorView,
@@ -32,6 +43,7 @@ export default class RowControls extends Component<Props> {
       hoveredRows,
       isInDanger,
       isResizing,
+      intl: { formatMessage },
     } = this.props;
     if (!tableRef) {
       return null;
@@ -89,6 +101,7 @@ export default class RowControls extends Component<Props> {
                   }}
                 >
                   <button
+                    aria-label={formatMessage(messages.rowControl)}
                     type="button"
                     className={`${ClassName.ROW_CONTROLS_BUTTON}
                   ${ClassName.CONTROLS_BUTTON}
@@ -117,3 +130,5 @@ export default class RowControls extends Component<Props> {
     clearHoverSelection()(state, dispatch);
   };
 }
+
+export const RowControls = injectIntl(RowControlsComponent);

package/src/plugins/table/ui/TableFloatingControls/index.tsx

@@ -11,9 +11,9 @@ import { RowStickyState } from '../../pm-plugins/sticky-headers';
 
 import { isSelectionUpdated } from '../../utils';
 
-import CornerControls from './CornerControls';
+import { CornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
-import RowControls from './RowControls';
+import { RowControls } from './RowControls';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 
 export interface Props {

package/src/plugins/table/utils/column-controls.ts

@@ -144,7 +144,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);
   }