@atlaskit/editor-plugin-table 0.0.7 → 0.0.8

package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/index.d.ts

@@ -1,5 +1,6 @@
-import { Component } from 'react';
+import React from 'react';
 import { EditorView } from 'prosemirror-view';
+import type { WrappedComponentProps } from 'react-intl-next';
 export interface Props {
     editorView: EditorView;
     tableRef: HTMLTableElement;
@@ -11,7 +12,6 @@ export interface Props {
     insertRowButtonIndex?: number;
     stickyTop?: number;
 }
-export default class RowControls extends Component<Props> {
-    render(): JSX.Element | null;
-    private clearHoverSelection;
-}
+export declare const RowControls: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};

package/dist/types-ts4.0/plugins/table/nodeviews/types.d.ts

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

package/dist/types-ts4.0/plugins/table/ui/TableFloatingControls/CornerControls/index.d.ts

@@ -1,4 +1,5 @@
-import { Component } from 'react';
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
 import { EditorView } from 'prosemirror-view';
 export interface Props {
     editorView: EditorView;
@@ -10,10 +11,6 @@ export interface Props {
     isHeaderRowEnabled?: boolean;
     stickyTop?: number;
 }
-export default class CornerControls extends Component<Props, any> {
-    render(): JSX.Element | null;
-    private isActive;
-    private clearHoverSelection;
-    private selectTable;
-    private hoverTable;
-}
+export declare const CornerControls: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};

package/dist/types-ts4.0/plugins/table/ui/TableFloatingControls/RowControls/index.d.ts

@@ -1,5 +1,6 @@
-import { Component } from 'react';
+import React from 'react';
 import { EditorView } from 'prosemirror-view';
+import type { WrappedComponentProps } from 'react-intl-next';
 export interface Props {
     editorView: EditorView;
     tableRef: HTMLTableElement;
@@ -11,7 +12,6 @@ export interface Props {
     insertRowButtonIndex?: number;
     stickyTop?: number;
 }
-export default class RowControls extends Component<Props> {
-    render(): JSX.Element | null;
-    private clearHoverSelection;
-}
+export declare const RowControls: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -68,6 +68,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/react": "^12.1.5",
     "@types/prosemirror-history": "^1.0.1",
     "enzyme": "^3.10.0",
     "prosemirror-history": "^1.1.3",
@@ -81,7 +82,11 @@
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "techstack": {
     "@repo/internal": {
-      "theming": "tokens"
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
+      ]
     }
   }
 }

package/src/__tests__/unit/hover-selection.ts

@@ -87,7 +87,7 @@ describe('table hover selection plugin', () => {
         selectColumns([column])(editorView.state, editorView.dispatch);
       });
 
-      test('should add decoration', () => {
+      it('should add decoration', () => {
         const cells = getCellsInColumn(column)(editorView.state.selection)!;
 
         const decor = getTableDecorations(

package/src/__tests__/unit/index-with-fake-timers.ts

@@ -82,6 +82,7 @@ describe.skip('TableView', () => {
       getPos: () => 1,
       getEditorContainerWidth,
       getEditorFeatureFlags: fakeGetEditorFeatureFlags,
+      hasIntlContext: true,
     }).init();
 
     // we expect to have a contentDOM after instanciating the NodeView so that

package/src/__tests__/unit/ui/CornerControls.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
-import { mountWithIntl } from '@atlaskit/editor-test-helpers/enzyme';
 import {
   doc,
   table,
@@ -10,17 +11,12 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
-import {
-  TablePluginState,
-  TableCssClassName as ClassName,
-} from '../../../plugins/table/types';
-import CornerControls from '../../../plugins/table/ui/TableFloatingControls/CornerControls';
+import { TablePluginState } from '../../../plugins/table/types';
+import { CornerControls } from '../../../plugins/table/ui/TableFloatingControls/CornerControls';
 import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import tablePlugin from '../../../plugins/table-plugin';
 
-const CornerButton = `.${ClassName.CONTROLS_CORNER_BUTTON}`;
-
 describe('CornerControls', () => {
   const createEditor = createEditorFactory<TablePluginState>();
 
@@ -40,17 +36,19 @@ describe('CornerControls', () => {
         doc(table()(tr(thEmpty, thEmpty, thEmpty))),
       );
 
-      const controls = mountWithIntl(
-        <CornerControls
-          tableRef={document.querySelector('table')!}
-          editorView={editorView}
-        />,
+      const ref = editorView.dom.querySelector('table') || undefined;
+
+      render(
+        <IntlProvider locale="en">
+          <CornerControls tableRef={ref} editorView={editorView} />
+        </IntlProvider>,
       );
 
-      controls.find(CornerButton).simulate('click');
+      const cornerControl = screen.getByLabelText('Highlight table');
+
+      fireEvent.click(cornerControl);
 
       expect(isTableSelected(editorView.state.selection)).toBe(true);
-      controls.unmount();
     });
   });
 
@@ -62,19 +60,21 @@ describe('CornerControls', () => {
         ),
       );
 
-      const controls = mountWithIntl(
-        <CornerControls
-          tableRef={document.querySelector('table')!}
-          editorView={editorView}
-        />,
+      const ref = editorView.dom.querySelector('table') || undefined;
+
+      render(
+        <IntlProvider locale="en">
+          <CornerControls tableRef={ref} editorView={editorView} />
+        </IntlProvider>,
       );
 
-      controls.find(CornerButton).simulate('mouseover');
+      const cornerControl = screen.getByLabelText('Highlight table');
+
+      fireEvent.mouseOver(cornerControl);
 
       const { hoveredColumns, hoveredRows } = getPluginState(editorView.state);
       expect(hoveredColumns).toEqual([0, 1, 2]);
       expect(hoveredRows).toEqual([0, 1]);
-      controls.unmount();
     });
   });
 });

package/src/__tests__/unit/ui/FloatingDeleteButton.tsx

@@ -69,11 +69,11 @@ describe('Floating Delete Button', () => {
     }
   });
 
-  test('should not render a delete button with no selection', () => {
+  it('should not render a delete button with no selection', () => {
     expect(wrapper.find(DeleteButton).length).toBe(0);
   });
 
-  test('should not render a delete button with whole table selected', () => {
+  it('should not render a delete button with whole table selected', () => {
     // select the whole table
     editorView.dispatch(selectTable(editorView.state.tr));
 
@@ -112,7 +112,7 @@ describe('Floating Delete Button', () => {
       },
     );
 
-    test('should render a single delete button over multiple column selections', () => {
+    it('should render a single delete button over multiple column selections', () => {
       selectColumns([0, 1])(editorView.state, editorView.dispatch);
 
       // We need to force renderer

package/src/__tests__/unit/ui/FloatingInsertButton.tsx

@@ -94,8 +94,8 @@ describe('Floating Insert Button when findDomRefAtPos fails', () => {
     jest.restoreAllMocks();
   });
 
-  test('sends error analytics event after attempting to render for second column', () => {
-    // We need to set the props here, as by default insertColumnButtonIndex in undefined (in
+  it('sends error analytics event after attempting to render for second column', () => {
+    // We need to set the props here, as by default insertColumnButtonIndex is undefined (in
     // mountWithIntl()) and rendering halts when it's undefined
     wrapper.setProps({
       insertColumnButtonIndex: 1,
@@ -115,11 +115,11 @@ describe('Floating Insert Button when findDomRefAtPos fails', () => {
     });
   });
 
-  test('should not render insert button with index', () => {
+  it('should not render insert button by default', () => {
     expect(wrapper.find(InsertButton).length).toBe(0);
   });
 
-  test("shouldn't render insert button for second column", () => {
+  it("shouldn't render insert button for second column", () => {
     wrapper.setProps({
       insertColumnButtonIndex: 1,
     });
@@ -127,7 +127,7 @@ describe('Floating Insert Button when findDomRefAtPos fails', () => {
     expect(wrapper.find(InsertButton).length).toBe(0);
   });
 
-  test("shouldn't render insert button for second row", () => {
+  it("shouldn't render insert button for second row", () => {
     wrapper.setProps({
       insertRowButtonIndex: 1,
     });
@@ -181,21 +181,21 @@ describe('Floating Insert Button', () => {
     wrapper.unmount();
   });
 
-  test('should not render insert button with index', () => {
+  it('should not render insert button by default', () => {
     expect(wrapper.find(InsertButton).length).toBe(0);
   });
 
-  test('should render insert button for second column', () => {
+  it('should render insert button for second column', () => {
     wrapper.setProps({ insertColumnButtonIndex: 1 });
     expect(wrapper.find(InsertButton).length).toBe(1);
   });
 
-  test('should render insert button for second row', () => {
+  it('should render insert button for second row', () => {
     wrapper.setProps({ insertRowButtonIndex: 1 });
     expect(wrapper.find(InsertButton).length).toBe(1);
   });
 
-  test('should no render insert button for first row when row header is enabled', () => {
+  it('should not render insert button for first row when row header is enabled', () => {
     wrapper.setProps({
       insertRowButtonIndex: 0,
       isHeaderRowEnabled: true,
@@ -204,7 +204,7 @@ describe('Floating Insert Button', () => {
     expect(wrapper.find(InsertButton).length).toBe(0);
   });
 
-  test('should render insert button for first row when row header is disabled', () => {
+  it('should render insert button for first row when row header is disabled', () => {
     wrapper.setProps({
       insertRowButtonIndex: 0,
       isHeaderRowEnabled: false,
@@ -213,7 +213,7 @@ describe('Floating Insert Button', () => {
     expect(wrapper.find(InsertButton).length).toBe(1);
   });
 
-  test('should no render insert button for first col when column header is enabled', () => {
+  it('should not render insert button for first col when column header is enabled', () => {
     wrapper.setProps({
       insertColumnButtonIndex: 0,
       isHeaderColumnEnabled: true,
@@ -222,7 +222,7 @@ describe('Floating Insert Button', () => {
     expect(wrapper.find(InsertButton).length).toBe(0);
   });
 
-  test('should render insert button for first col when column header is disabled', () => {
+  it('should render insert button for first col when column header is disabled', () => {
     wrapper.setProps({
       insertColumnButtonIndex: 0,
       isHeaderColumnEnabled: false,
@@ -231,7 +231,7 @@ describe('Floating Insert Button', () => {
     expect(wrapper.find(InsertButton).length).toBe(1);
   });
 
-  test('should render insert button when a single cell is selected', () => {
+  it('should render insert button when a single cell is selected', () => {
     selectCell(1, 1)(editorView.state, editorView.dispatch);
 
     wrapper.setProps({
@@ -242,7 +242,7 @@ describe('Floating Insert Button', () => {
     expect(wrapper.find(InsertButton).length).toBe(1);
   });
 
-  test('should no render insert button when a whole column is selected', () => {
+  it('should not render insert button when a whole column is selected', () => {
     selectColumns([1])(editorView.state, editorView.dispatch);
 
     wrapper.setProps({
@@ -253,7 +253,7 @@ describe('Floating Insert Button', () => {
     expect(wrapper.find(InsertButton).length).toBe(0);
   });
 
-  test('should no render insert button when a whole row is selected', () => {
+  it('should no render insert button when a whole row is selected', () => {
     selectRows([1])(editorView.state, editorView.dispatch);
 
     wrapper.setProps({

package/src/__tests__/unit/ui/RowControls.tsx

@@ -22,7 +22,7 @@ import {
   TablePluginState,
 } from '../../../plugins/table/types';
 import TableFloatingControls from '../../../plugins/table/ui/TableFloatingControls';
-import RowControls from '../../../plugins/table/ui/TableFloatingControls/RowControls';
+import { RowControls } from '../../../plugins/table/ui/TableFloatingControls/RowControls';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { ReactWrapper } from 'enzyme';
 import tablePlugin from '../../../plugins/table-plugin';

package/src/__tests__/unit/ui/TableFloatingControls.tsx

@@ -19,8 +19,8 @@ import {
 import { TablePluginState } from '../../../plugins/table/types';
 import { hoverTable } from '../../../plugins/table/commands';
 import TableFloatingControls from '../../../plugins/table/ui/TableFloatingControls';
-import CornerControls from '../../../plugins/table/ui/TableFloatingControls/CornerControls';
-import RowControls from '../../../plugins/table/ui/TableFloatingControls/RowControls';
+import { CornerControls } from '../../../plugins/table/ui/TableFloatingControls/CornerControls';
+import { RowControls } from '../../../plugins/table/ui/TableFloatingControls/RowControls';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { getDecorations } from '../../../plugins/table/pm-plugins/decorations/plugin';
 import tablePlugin from '../../../plugins/table-plugin';

package/src/plugins/table/__tests__/unit/commands/insert.ts

@@ -53,7 +53,7 @@ describe('table plugin: insert', () => {
         pluginKey,
       });
 
-    test('does scale cells in tables which are not overflowing', () => {
+    it('does scale cells in tables which are not overflowing', () => {
       const { editorView } = editor(
         doc(
           table({ localId: TABLE_LOCAL_ID })(
@@ -84,7 +84,7 @@ describe('table plugin: insert', () => {
       );
     });
 
-    test('does not scale cells in tables which are overflowing', () => {
+    it('does not scale cells in tables which are overflowing', () => {
       const { editorView } = editor(
         doc(
           table({ localId: TABLE_LOCAL_ID })(

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

@@ -810,7 +810,7 @@ describe('table plugin: actions', () => {
      * | th | th | th |
      * | th | td | td |
      */
-    test('should keep right row header and cells after split', () => {
+    it('should keep right row header and cells after split', () => {
       const { editorView } = editor(
         doc(
           table()(
@@ -833,7 +833,7 @@ describe('table plugin: actions', () => {
       );
     });
 
-    test('should split cell with media selected', () => {
+    it('should split cell with media selected', () => {
       const { editorView } = editor(
         doc(
           table()(

package/src/plugins/table/__tests__/unit/nodeviews/TableComponent.tsx

@@ -259,7 +259,7 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
       return { wrapper, view };
     }
 
-    describe('with optimisation on', () => {
+    describe('with optimization on', () => {
       let wrapper: ReactWrapper;
       beforeEach(() => {
         wrapper = setupTable(true).wrapper;
@@ -306,7 +306,7 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
       });
     });
 
-    describe('with optimisation off', () => {
+    describe('with optimization off', () => {
       let wrapper: ReactWrapper;
       beforeEach(() => {
         wrapper = setupTable(false).wrapper;

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/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/types.ts

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

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 {