@atlaskit/editor-plugin-table 0.0.9 → 0.1.0

package/src/{plugins/table/__tests__ → __tests__}/unit/pm-plugins/main.ts

@@ -15,19 +15,19 @@ import {
 import { Selection } from 'prosemirror-state';
 import * as pmUtils from 'prosemirror-utils';
 
-import tablePlugin from '../../../../table';
+import tablePlugin from '../../../plugins/table';
 import textFormattingPlugin from '@atlaskit/editor-core/src/plugins/text-formatting';
-import { pluginKey } from '../../../pm-plugins/plugin-key';
-import { getPluginState } from '../../../pm-plugins/plugin-factory';
-import { setEditorFocus } from '../../../../table/commands/misc';
-import * as miscCommands from '../../../../table/commands/misc';
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
+import { setEditorFocus } from '../../../plugins/table/commands/misc';
+import * as miscCommands from '../../../plugins/table/commands/misc';
 import { NodeType } from 'prosemirror-model';
 import { undo } from 'prosemirror-history';
 import {
   toggleHeaderColumn,
   toggleHeaderRow,
   toggleNumberColumn,
-} from '../../../../table/commands';
+} from '../../../plugins/table/commands';
 
 describe('tables: main plugin', () => {
   const createEditor = createProsemirrorEditorFactory();

package/src/{plugins/table/__tests__ → __tests__}/unit/pm-plugins/safari-delete-composition-text-issue-workaround.ts

@@ -7,8 +7,8 @@ import {
   td,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { pluginKey } from '../../../pm-plugins/plugin-key';
-import { TablePluginState } from '../../../types';
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+import { TablePluginState } from '../../../plugins/table/types';
 
 describe('table/safari-delete-composition-text-issue-workaround', () => {
   let editor: any;

package/src/{plugins/table/__tests__ → __tests__}/unit/pm-plugins/sticky-headers/tableRow.tsx

@@ -13,33 +13,36 @@ import {
   tr,
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { TableRowNodeView } from '../../../../pm-plugins/sticky-headers';
-import tablePlugin from '../../../../../table';
-import { pluginKey } from '../../../../pm-plugins/plugin-key';
+import { TableRowNodeView } from '../../../../plugins/table/pm-plugins/sticky-headers';
+import tablePlugin from '../../../../plugins/table';
+import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import createStub, { Stub } from 'raf-stub';
 import featureFlagsPlugin from '@atlaskit/editor-core/src/plugins/feature-flags-context';
-jest.mock('../../../../pm-plugins/sticky-headers/commands', () => ({
-  ...jest.requireActual<Object>(
-    '../../../../pm-plugins/sticky-headers/commands',
-  ),
-  updateStickyState: jest.fn(() => jest.fn()),
-}));
+jest.mock(
+  '../../../../plugins/table/pm-plugins/sticky-headers/commands',
+  () => ({
+    ...jest.requireActual<Object>(
+      '../../../../plugins/table/pm-plugins/sticky-headers/commands',
+    ),
+    updateStickyState: jest.fn(() => jest.fn()),
+  }),
+);
 jest.mock('@atlaskit/editor-common/ui', () => ({
   ...jest.requireActual<Object>('@atlaskit/editor-common/ui'),
   findOverflowScrollParent: jest.fn(() => jest.fn()),
 }));
 
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
-import { updateStickyState } from '../../../../pm-plugins/sticky-headers/commands';
-import { TableCssClassName } from '../../../../types';
-import TableComponent from '../../../../nodeviews/TableComponent';
+import { updateStickyState } from '../../../../plugins/table/pm-plugins/sticky-headers/commands';
+import { TableCssClassName } from '../../../../plugins/table/types';
+import TableComponent from '../../../../plugins/table/nodeviews/TableComponent';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import {
   stickyRowOffsetTop,
   tableScrollbarOffset,
-} from '../../../../ui/consts';
+} from '../../../../plugins/table/ui/consts';
 
 describe('TableRowNodeView', () => {
   let tableRowNodeView: TableRowNodeView;

package/src/{plugins/table/__tests__ → __tests__}/unit/pm-plugins/table-local-id.ts

@@ -7,7 +7,7 @@ import dispatchPasteEvent from '@atlaskit/editor-test-helpers/dispatch-paste-eve
 import { insertText } from '@atlaskit/editor-test-helpers/transactions';
 import { replaceRaf } from 'raf-stub';
 
-import { handleCut } from '../../../event-handlers';
+import { handleCut } from '../../../plugins/table/event-handlers';
 
 import {
   doc,
@@ -21,11 +21,8 @@ import {
   th,
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import {
-  TablePluginState,
-  PluginConfig,
-} from '../../../../../plugins/table/types';
-import { pluginKey as tablePluginKey } from '../../../../../plugins/table/pm-plugins/plugin-key';
+import { TablePluginState, PluginConfig } from '../../../plugins/table/types';
+import { pluginKey as tablePluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { CellSelection } from '@atlaskit/editor-tables';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';

package/src/{plugins/table/__tests__ → __tests__}/unit/pm-plugins/table-resizing/colgroup.ts

@@ -1,6 +1,6 @@
 import { p, table, tr, td } from '@atlaskit/editor-test-helpers/doc-builder';
 import defaultSchema from '@atlaskit/editor-test-helpers/schema';
-import { generateColgroup } from '../../../../pm-plugins/table-resizing/utils';
+import { generateColgroup } from '../../../../plugins/table/pm-plugins/table-resizing/utils';
 
 describe('table-resizing/colgroup', () => {
   describe('#generateColgroup', () => {

package/src/{plugins/table/__tests__ → __tests__}/unit/pm-plugins/table-resizing/event-handlers.ts

@@ -3,7 +3,7 @@ import {
   LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-import { setResizeHandlePos } from '../../../../../../plugins/table/pm-plugins/table-resizing/commands';
+import { setResizeHandlePos } from '../../../../plugins/table/pm-plugins/table-resizing/commands';
 import {
   doc,
   table,
@@ -19,8 +19,8 @@ import {
   TABLE_ACTION,
 } from '@atlaskit/editor-common/analytics';
 
-import tablePlugin from '../../../../../table';
-import { pluginKey } from '../../../../pm-plugins/plugin-key';
+import tablePlugin from '../../../../plugins/table';
+import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
 import { TextSelection, NodeSelection } from 'prosemirror-state';
 import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
 import widthPlugin from '@atlaskit/editor-core/src/plugins/width';

package/src/{plugins/table/__tests__ → __tests__}/unit/pm-plugins/table-selection-keymap.ts

@@ -23,9 +23,9 @@ import { uuid } from '@atlaskit/adf-schema';
 import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';
 import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
 import codeBlockPlugin from '@atlaskit/editor-core/src/plugins/code-block';
-import tablePlugin from '../../../index';
-import { TablePluginState } from '../../../types';
-import { pluginKey } from '../../../pm-plugins/plugin-key';
+import tablePlugin from '../../../plugins/table';
+import { TablePluginState } from '../../../plugins/table/types';
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { createEditorSelectionAPI } from '@atlaskit/editor-core/src/selection-api/api';
 import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 

package/src/{plugins/table/__tests__ → __tests__}/unit/toolbar.ts

@@ -1,8 +1,8 @@
 import {
   getToolbarMenuConfig,
   getToolbarCellOptionsConfig,
-} from '../../toolbar';
-import { ToolbarMenuConfig, ToolbarMenuState } from '../../types';
+} from '../../plugins/table/toolbar';
+import { ToolbarMenuConfig, ToolbarMenuState } from '../../plugins/table/types';
 import { createEditorState } from '@atlaskit/editor-test-helpers/create-editor-state';
 import {
   doc,
@@ -17,11 +17,11 @@ import type {
   FloatingToolbarDropdown,
 } from '@atlaskit/editor-common/types';
 import { splitCell } from '@atlaskit/editor-tables/utils';
-import { canMergeCells } from '../../transforms';
+import { canMergeCells } from '../../plugins/table/transforms';
 import { Rect } from '@atlaskit/editor-tables/table-map';
 
 jest.mock('@atlaskit/editor-tables/utils');
-jest.mock('../../transforms');
+jest.mock('../../plugins/table/transforms');
 
 const formatMessage: (t: unknown) => string = (id) => 'Lorem ipsum';
 const ctx = { formatMessage };
@@ -133,7 +133,7 @@ describe('getToolbarMenuConfig', () => {
 describe('getToolbarCellOptionsConfig', () => {
   const state = createEditorState(doc(table()(row(td()(p('1{cursor}'))))));
   const getEditorContainerWidth = () => ({ width: 500 });
-  //
+
   const formatMessage: (t: { id: string }) => string = (message) =>
     `${message.id}`;
   const rect = new Rect(1, 1, 1, 1);
@@ -146,10 +146,6 @@ describe('getToolbarCellOptionsConfig', () => {
     getEditorContainerWidth,
     undefined,
   );
-  //
-  it('is hidden by default', () => {
-    expect(cellOptionsMenu.hidden).toBe(true);
-  });
 
   it('is a dropdown with the following dropdown items with the given order', () => {
     const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
+import DeleteButton from '../../../plugins/table/ui/FloatingDeleteButton/DeleteButton';
+import tableMessages from '../../../plugins/table/ui/messages';
+
+describe('<DeleteButton />', () => {
+  it('should fire the onMouseEnter callback', () => {
+    const onMouseEnter = jest.fn();
+    render(
+      <IntlProvider locale="en">
+        <DeleteButton
+          removeLabel={tableMessages.removeColumns}
+          onMouseEnter={onMouseEnter}
+        />
+      </IntlProvider>,
+    );
+    fireEvent.mouseEnter(screen.getByLabelText('Delete column'));
+    expect(onMouseEnter).toHaveBeenCalled();
+  });
+
+  it('should fire the onMouseLeave callback', () => {
+    const onMouseLeave = jest.fn();
+    render(
+      <IntlProvider locale="en">
+        <DeleteButton
+          removeLabel={tableMessages.removeColumns}
+          onMouseLeave={onMouseLeave}
+        />
+      </IntlProvider>,
+    );
+    fireEvent.mouseLeave(screen.getByLabelText('Delete column'));
+    expect(onMouseLeave).toHaveBeenCalled();
+  });
+});

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

@@ -1,5 +1,4 @@
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
-import { mountWithIntl } from '@atlaskit/editor-test-helpers/enzyme';
 import {
   doc,
   table,
@@ -10,10 +9,11 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import { selectColumns, selectRows } from '@atlaskit/editor-test-helpers/table';
-import { ReactWrapper } from 'enzyme';
 import { selectTable } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
 import {
   TablePluginState,
   TableCssClassName,
@@ -21,8 +21,6 @@ import {
 import FloatingDeleteButton, {
   Props as FloatingDeleteButtonProps,
 } from '../../../plugins/table/ui/FloatingDeleteButton';
-import DeleteButton from '../../../plugins/table/ui/FloatingDeleteButton/DeleteButton';
-import tableMessages from '../../../plugins/table/ui/messages';
 import * as tableColumnControlsUtils from '../../../plugins/table/utils/column-controls';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import tablePlugin from '../../../plugins/table-plugin';
@@ -40,7 +38,6 @@ describe('Floating Delete Button', () => {
       pluginKey,
     });
 
-  let wrapper: ReactWrapper<FloatingDeleteButtonProps>;
   let editorView: EditorView;
 
   beforeEach(() => {
@@ -53,34 +50,31 @@ describe('Floating Delete Button', () => {
         ),
       ),
     ));
-
-    wrapper = (mountWithIntl(
-      <FloatingDeleteButton
-        tableRef={document.querySelector('table')!}
-        editorView={editorView}
-        selection={editorView.state.selection}
-      />,
-    ) as unknown) as ReactWrapper<FloatingDeleteButtonProps>;
   });
 
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
+  const component = (props: FloatingDeleteButtonProps) =>
+    render(
+      <IntlProvider locale="en">
+        <FloatingDeleteButton
+          tableRef={editorView.dom.querySelector('table')!}
+          {...props}
+        />
+      </IntlProvider>,
+    );
 
   it('should not render a delete button with no selection', () => {
-    expect(wrapper.find(DeleteButton).length).toBe(0);
+    component({ selection: editorView.state.selection, editorView });
+
+    expect(screen.queryByLabelText('Popup')).toBeFalsy();
   });
 
   it('should not render a delete button with whole table selected', () => {
-    // select the whole table
+    // selects the whole table
     editorView.dispatch(selectTable(editorView.state.tr));
 
-    // We need to force renderer
-    wrapper.setProps({ selection: editorView.state.selection });
-    // set numberOfColumns prop to trick shouldComponentUpdate and force re-render
-    expect(wrapper.find(DeleteButton).length).toBe(0);
+    component({ selection: editorView.state.selection, editorView });
+
+    expect(screen.queryByLabelText('Popup')).toBeFalsy();
   });
 
   describe('Columns', () => {
@@ -104,21 +98,18 @@ describe('Floating Delete Button', () => {
         // Select columns start from 0
         selectColumns([column - 1])(editorView.state, editorView.dispatch);
 
-        // We need to force renderer
-        wrapper.setProps({ selection: editorView.state.selection });
+        component({ selection: editorView.state.selection, editorView });
 
-        // we should now have a delete button
-        expect(wrapper.find(DeleteButton).length).toBe(1);
+        expect(screen.getAllByLabelText('Delete column').length).toBe(1);
       },
     );
 
     it('should render a single delete button over multiple column selections', () => {
       selectColumns([0, 1])(editorView.state, editorView.dispatch);
 
-      // We need to force renderer
-      wrapper.setProps({ selection: editorView.state.selection });
+      component({ selection: editorView.state.selection, editorView });
 
-      expect(wrapper.find(DeleteButton).length).toBe(1);
+      expect(screen.getAllByLabelText('Delete column').length).toBe(1);
     });
   });
 
@@ -128,9 +119,9 @@ describe('Floating Delete Button', () => {
       (row) => {
         selectRows([row - 1])(editorView.state, editorView.dispatch);
 
-        wrapper.setProps({ selection: editorView.state.selection });
+        component({ selection: editorView.state.selection, editorView });
 
-        expect(wrapper.find(DeleteButton).length).toBe(1);
+        expect(screen.getAllByLabelText('Delete row').length).toBe(1);
       },
     );
 
@@ -138,38 +129,9 @@ describe('Floating Delete Button', () => {
       selectRows([0, 1])(editorView.state, editorView.dispatch);
 
       // selecting the row mutates the editor state (which is inside editorView)
-      // we set tableHeight prop to trick shouldComponentUpdate and force re-render
-      wrapper.setProps({ selection: editorView.state.selection });
-
-      expect(wrapper.find(DeleteButton).length).toBe(1);
-    });
-  });
-
-  describe('<DeleteButton />', () => {
-    it('should fire the onMouseEnter callback', () => {
-      const onMouseEnter = jest.fn();
-      const button = mountWithIntl(
-        <DeleteButton
-          removeLabel={tableMessages.removeColumns}
-          onMouseEnter={onMouseEnter}
-        />,
-      );
-      button.simulate('mouseenter');
-      expect(onMouseEnter).toBeCalled();
-      button.unmount();
-    });
+      component({ selection: editorView.state.selection, editorView });
 
-    it('should fire the onMouseLeave callback', () => {
-      const onMouseLeave = jest.fn();
-      const button = mountWithIntl(
-        <DeleteButton
-          removeLabel={tableMessages.removeRows}
-          onMouseLeave={onMouseLeave}
-        />,
-      );
-      button.simulate('mouseleave');
-      expect(onMouseLeave).toBeCalled();
-      button.unmount();
+      expect(screen.getAllByLabelText('Delete row').length).toBe(1);
     });
   });
 });

package/src/{plugins/table/__tests__ → __tests__}/unit/utils/collapse.ts

@@ -11,13 +11,13 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
-import tablePlugin from '../../../../table';
+import tablePlugin from '../../../plugins/table';
 import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
 
 import {
   isTableCollapsible,
   collapseSelectedTable,
-} from '../../../utils/collapse';
+} from '../../../plugins/table/utils/collapse';
 
 describe('collapse', () => {
   const createEditor = createProsemirrorEditorFactory();

package/src/{plugins/table/__tests__ → __tests__}/unit/utils/column-controls.ts

@@ -1,4 +1,4 @@
-import { colWidthsForRow } from '../../../utils/column-controls';
+import { colWidthsForRow } from '../../../plugins/table/utils/column-controls';
 
 const createRow = (colCount: number, childType = 'td') => {
   const tr = document.createElement('tr');

package/src/{plugins/table/__tests__ → __tests__}/visual-regression/cell-options-menu.ts

@@ -1,3 +1,5 @@
+export {};
+
 // import {
 //   PuppeteerPage,
 //   waitForNoTooltip,

package/src/__tests__/visual-regression/copy-button.ts

@@ -0,0 +1,181 @@
+export {};
+
+it.skip('TODO: restore vr `packages/editor/editor-plugin-table/src/plugins/table/__tests__/visual-regression/copy-button.ts`', () => {});
+
+// import { _getCopyButtonTestSuite } from '../../../copy-button/__tests__/visual-regression/_getCopyButtonTestSuite';
+
+// _getCopyButtonTestSuite({
+//   nodeName: 'Table',
+//   editorOptions: {
+//     allowTables: {
+//       advanced: true,
+//     },
+//     defaultValue: {
+//       version: 1,
+//       type: 'doc',
+//       content: [
+//         {
+//           type: 'table',
+//           attrs: {
+//             isNumberColumnEnabled: false,
+//             layout: 'default',
+//             localId: '15804638-b946-4591-b64c-beffe5122733',
+//           },
+//           content: [
+//             {
+//               type: 'tableRow',
+//               content: [
+//                 {
+//                   type: 'tableHeader',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '1',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableHeader',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '2',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableHeader',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '3',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//               ],
+//             },
+//             {
+//               type: 'tableRow',
+//               content: [
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '4',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '5',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '6',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//               ],
+//             },
+//             {
+//               type: 'tableRow',
+//               content: [
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '7',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '8',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '9',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//               ],
+//             },
+//           ],
+//         },
+//       ],
+//     },
+//   },
+//   nodeSelector: '.pm-table-cell-content-wrap',
+// });

package/src/{plugins/table/__tests__ → __tests__}/visual-regression/index.ts

@@ -1,8 +1,10 @@
+export {};
+
 // import { PuppeteerPage } from '@atlaskit/visual-regression/helper';
+// import { Device } from '@atlaskit/editor-test-helpers/vr-utils/device-viewport';
 // import {
 //   snapshot,
 //   initFullPageEditorWithAdf,
-//   Device,
 // } from '../../../../__tests__/visual-regression/_utils';
 // import tableWith100ListItemsADF from './__fixtures__/table-with-100-numbered-list-items.json';
 // import {