@atlaskit/editor-plugin-table 0.1.0 → 0.1.2

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

@@ -1,5 +1,9 @@
 import { Node as PMNode } from 'prosemirror-model';
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   p,
@@ -11,39 +15,37 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import { TableAttributes } from '@atlaskit/adf-schema';
-import { TablePluginState } from '../../../plugins/table/types';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import tablePlugin from '../../../plugins/table';
 import TableView from '../../../plugins/table/nodeviews/table';
 import defaultSchema from '@atlaskit/editor-test-helpers/schema';
-import type { EditorProps } from '@atlaskit/editor-core';
 import { EditorView } from 'prosemirror-view';
 import { hoverRows } from '../../../plugins/table/commands';
 
 describe('table -> nodeviews -> table.tsx', () => {
-  const createEditor = createEditorFactory<TablePluginState>();
-  const createTableNode = (attrs?: TableAttributes) => (...args: any) =>
-    table(attrs)(...args)(defaultSchema);
-
-  const editor = (doc: DocBuilder, props?: EditorProps) =>
-    createEditor({
-      doc,
-      editorProps: {
-        allowTables: false,
-        dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin()],
-        },
-        ...props,
-      },
-      pluginKey,
-    });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
+  const createEditor = createProsemirrorEditorFactory();
+  const createTableNode =
+    (attrs?: TableAttributes) =>
+    (...args: any) =>
+      table(attrs)(...args)(defaultSchema);
 
   describe('TableView', () => {
     describe('with tableRenderOptimization', () => {
+      const editor = (doc: DocBuilder) =>
+        createEditor({
+          doc,
+          preset: new Preset<LightEditorPlugin>().add([
+            tablePlugin,
+            {
+              tableOptions: {},
+              getEditorFeatureFlags: () => ({
+                tableRenderOptimization: true,
+              }),
+            },
+          ]),
+          pluginKey,
+        });
+
       describe('on view update', () => {
         let tableNode: PMNode,
           tableNodeView: TableView,
@@ -58,9 +60,6 @@ describe('table -> nodeviews -> table.tsx', () => {
               p('text'),
               table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty)),
             ),
-            {
-              featureFlags: { tableRenderOptimization: true },
-            },
           );
           view = editorView;
           tableNodeView = new TableView({

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

@@ -1,4 +1,8 @@
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   DocBuilder,
@@ -8,20 +12,19 @@ import {
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import { TablePluginState } from '../../../plugins/table/types';
+import tablePlugin from '../../../plugins/table-plugin';
 
 describe('table/safari-delete-composition-text-issue-workaround', () => {
   let editor: any;
   beforeEach(() => {
-    const createEditor = createEditorFactory<TablePluginState>();
+    const createEditor = createProsemirrorEditorFactory();
     editor = (doc: DocBuilder) =>
       createEditor({
         doc,
-        editorProps: {
-          allowTables: {
-            allowColumnResizing: true,
-          },
-        },
+        preset: new Preset<LightEditorPlugin>().add([
+          tablePlugin,
+          { tableOptions: { allowColumnResizing: true } },
+        ]),
         pluginKey,
       });
   });

package/src/__tests__/unit/pm-plugins/sticky-headers/tableRow.tsx

@@ -361,10 +361,9 @@ describe('TableRowNodeView', () => {
     }
 
     function mockScrollPositions(tableRowDom: HTMLTableRowElement) {
-      const { tableWrapper, tableParent, scrollContainer } = getTableElements(
-        tableRowDom,
-      );
-      ((findOverflowScrollParent as unknown) as jest.SpyInstance).mockReturnValue(
+      const { tableWrapper, tableParent, scrollContainer } =
+        getTableElements(tableRowDom);
+      (findOverflowScrollParent as unknown as jest.SpyInstance).mockReturnValue(
         scrollContainer,
       );
 
@@ -409,11 +408,11 @@ describe('TableRowNodeView', () => {
           contentDOM={
             disableContentDomMock
               ? jest.fn()
-              : (wrapper: HTMLElement | null) => {
+              : (table: HTMLElement | null) => {
                   const node = editorView.dom.getElementsByTagName('table')[0];
 
-                  if (!wrapper?.firstChild) {
-                    wrapper?.appendChild(node);
+                  if (!table?.firstChild) {
+                    table?.appendChild(node);
                   }
                 }
           }
@@ -439,8 +438,8 @@ describe('TableRowNodeView', () => {
       expect(sentinelBottom).toBeTruthy();
     });
 
-    describe('updates sticky header state', () => {
-      it('top sentinel does nothing if the rootBounds has height 0', () => {
+    describe('updates sticky header', () => {
+      it('does not update sticky header if trigger is sentinel top in confluence preview mode', () => {
         renderTableComponent();
         const sentinelTop = screen.getByTestId('sticky-sentinel-top');
 
@@ -454,7 +453,7 @@ describe('TableRowNodeView', () => {
         expect(updateStickyState).not.toHaveBeenCalled();
       });
 
-      it('bottom sentinel does nothing if the rootBounds has height 0', () => {
+      it('does not update sticky header if trigger is sentinel bottom in confluence preview mode', () => {
         renderTableComponent();
         const sentinelBottom = screen.getByTestId('sticky-sentinel-bottom');
         triggerElementIntersect({
@@ -467,7 +466,7 @@ describe('TableRowNodeView', () => {
         expect(updateStickyState).not.toHaveBeenCalled();
       });
 
-      it('updates sticky header when top of sticky header sentinel leaves scroll area', () => {
+      it('updates sticky header when sentinel is below scroll area', () => {
         renderTableComponent();
         const sentinelTop = screen.getByTestId('sticky-sentinel-top');
 
@@ -502,7 +501,7 @@ describe('TableRowNodeView', () => {
         );
       });
 
-      it('updates sticky header when bottom of sticky header sentinel enters or leaves scroll area', () => {
+      it('updates sticky header when sentinel is above scroll area', () => {
         renderTableComponent();
         const sentinelBottom = screen.getByTestId('sticky-sentinel-bottom');
 

package/src/__tests__/unit/toolbar.ts

@@ -3,7 +3,11 @@ import {
   getToolbarCellOptionsConfig,
 } from '../../plugins/table/toolbar';
 import { ToolbarMenuConfig, ToolbarMenuState } from '../../plugins/table/types';
-import { createEditorState } from '@atlaskit/editor-test-helpers/create-editor-state';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   p,
@@ -19,6 +23,8 @@ import type {
 import { splitCell } from '@atlaskit/editor-tables/utils';
 import { canMergeCells } from '../../plugins/table/transforms';
 import { Rect } from '@atlaskit/editor-tables/table-map';
+import tablePlugin from '../../plugins/table';
+import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 
 jest.mock('@atlaskit/editor-tables/utils');
 jest.mock('../../plugins/table/transforms');
@@ -131,7 +137,14 @@ describe('getToolbarMenuConfig', () => {
 });
 
 describe('getToolbarCellOptionsConfig', () => {
-  const state = createEditorState(doc(table()(row(td()(p('1{cursor}'))))));
+  const createEditor = createProsemirrorEditorFactory();
+  const {
+    editorView: { state },
+  } = createEditor({
+    doc: doc(table()(row(td()(p('1{cursor}'))))),
+    preset: new Preset<LightEditorPlugin>().add(tablePlugin),
+    pluginKey,
+  });
   const getEditorContainerWidth = () => ({ width: 500 });
 
   const formatMessage: (t: { id: string }) => string = (message) =>
@@ -187,7 +200,7 @@ describe('getToolbarCellOptionsConfig', () => {
   });
 
   it('should have enabled merge cells when multiple cells are selected', () => {
-    ((canMergeCells as Function) as jest.Mock<{}>).mockImplementation(
+    (canMergeCells as Function as jest.Mock<{}>).mockImplementation(
       () => () => true,
     );
     //
@@ -211,8 +224,8 @@ describe('getToolbarCellOptionsConfig', () => {
   });
 
   it('should have enabled split cell when cell can be splitted', () => {
-    ((splitCell as Function) as jest.Mock<{}>).mockImplementation(() => () =>
-      true,
+    (splitCell as Function as jest.Mock<{}>).mockImplementation(
+      () => () => true,
     );
     //
     const cellOptionsMenu = getToolbarCellOptionsConfig(

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { EditorView } from 'prosemirror-view';
+import { createIntl } from 'react-intl-next';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  p,
+  table,
+  tdCursor,
+  tdEmpty,
+  th,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import tablePlugin from '../../../plugins/table-plugin';
+
+import { ContextualMenu } from '../../../plugins/table/ui/FloatingContextualMenu/ContextualMenu';
+
+describe('ContextualMenu', () => {
+  const getEditorContainerWidth = () => ({ width: 500 });
+  const createEditor = createProsemirrorEditorFactory();
+  describe('with right table cell position in plugin state', () => {
+    let editorView: EditorView;
+    beforeEach(() => {
+      ({ editorView } = createEditor({
+        doc: doc(table()(tr(th()(p('')), th()(p(''))), tr(tdCursor, tdEmpty))),
+        preset: new Preset<LightEditorPlugin>().add([
+          tablePlugin,
+          { tableOptions: { advanced: true } },
+        ]),
+      }));
+    });
+
+    it('should render contextual menu when no tableCellPosition is passed but exist on editor state ', () => {
+      const intl = createIntl({ locale: 'en' });
+      render(
+        <ContextualMenu
+          intl={intl}
+          editorView={editorView}
+          isOpen
+          selectionRect={{ bottom: 0, left: 0, right: 0, top: 0 }}
+          getEditorContainerWidth={getEditorContainerWidth}
+        />,
+      );
+
+      expect(
+        screen.getByTestId('table-cell-contextual-menu'),
+      ).toBeInTheDocument();
+    });
+  });
+});

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

@@ -2,7 +2,11 @@ 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 {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   table,
@@ -11,22 +15,18 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
-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';
 
 describe('CornerControls', () => {
-  const createEditor = createEditorFactory<TablePluginState>();
+  const createEditor = createProsemirrorEditorFactory();
 
   const editor = (doc: DocBuilder) =>
     createEditor({
       doc,
-      editorProps: {
-        allowTables: false,
-        dangerouslyAppendPlugins: { __plugins: [tablePlugin()] },
-      },
+      preset: new Preset<LightEditorPlugin>().add(tablePlugin),
       pluginKey,
     });
 

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

@@ -1,9 +1,14 @@
-import { ReactWrapper } from 'enzyme';
-import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import * as prosemirrorUtils from 'prosemirror-utils';
+import type { ContentNodeWithPos } from 'prosemirror-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
 import { EditorView } from 'prosemirror-view';
 import React from 'react';
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
-import { mountWithIntl } from '@atlaskit/editor-test-helpers/enzyme';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   table,
@@ -14,29 +19,23 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { TablePluginState } from '../../../plugins/table/types';
 import FloatingContextualButton, {
   Props as FloatingContextualButtonProps,
-  FloatingContextualButtonInner,
 } from '../../../plugins/table/ui/FloatingContextualButton';
 import tablePlugin from '../../../plugins/table-plugin';
 
-describe('Floating Contextual Button', () => {
-  const createEditor = createEditorFactory<TablePluginState>();
-  let createAnalyticsEvent = jest.fn(() => ({ fire() {} } as UIAnalyticsEvent));
-  const editor = (doc: DocBuilder) =>
-    createEditor({
-      doc,
-      editorProps: {
-        allowTables: false,
-        dangerouslyAppendPlugins: { __plugins: [tablePlugin()] },
-      },
-      createAnalyticsEvent,
-    });
+const createEditor = createProsemirrorEditorFactory();
+let createAnalyticsEvent = jest.fn(() => ({ fire() {} } as UIAnalyticsEvent));
+const editor = (doc: DocBuilder) =>
+  createEditor({
+    doc,
+    preset: new Preset<LightEditorPlugin>().add(tablePlugin),
+  });
 
-  let wrapper: ReactWrapper<FloatingContextualButtonProps>;
+describe('Floating Contextual Button', () => {
   let editorView: EditorView;
   let refs: { [name: string]: number };
+  let tableNode: ContentNodeWithPos | undefined;
 
   beforeEach(() => {
     ({ editorView, refs } = editor(
@@ -49,47 +48,44 @@ describe('Floating Contextual Button', () => {
       ),
     ));
 
-    const tableNode = findParentNodeOfTypeClosestToPos(
+    tableNode = prosemirrorUtils.findParentNodeOfTypeClosestToPos(
       editorView.state.selection.$from,
       editorView.state.schema.nodes.table,
     );
+  });
 
-    wrapper = mountWithIntl(
-      <FloatingContextualButton
-        editorView={editorView}
-        tableNode={tableNode && tableNode.node}
-        targetCellPosition={refs.firstCell}
-        dispatchAnalyticsEvent={createAnalyticsEvent}
-      />,
+  const component = (props: FloatingContextualButtonProps) =>
+    render(
+      <IntlProvider locale="en">
+        <FloatingContextualButton
+          tableNode={tableNode && tableNode.node}
+          dispatchAnalyticsEvent={createAnalyticsEvent}
+          {...props}
+        />
+      </IntlProvider>,
     );
-  });
 
   describe('when an error is thrown in the component', () => {
-    it('handles it gracefully', () => {
-      const buttonWrapper = wrapper.find(FloatingContextualButtonInner);
-      expect(() =>
-        buttonWrapper.simulateError(new Error('Oh no!')),
-      ).not.toThrow();
+    it('renders', () => {
+      component({
+        editorView,
+        targetCellPosition: refs.firstCell,
+      });
+
+      expect(screen.getByLabelText('Cell options')).toBeInTheDocument();
     });
 
     it('dispatches an analytics event', () => {
-      wrapper
-        .find(FloatingContextualButtonInner)
-        .simulateError(new Error('Oh no!'));
-      expect(createAnalyticsEvent).toHaveBeenCalledWith({
-        action: 'unhandledErrorCaught',
-        actionSubject: 'floatingContextualButton',
-        eventType: 'operational',
-        attributes: {
-          error: new Error('Oh no!'),
-          errorInfo: expect.objectContaining({
-            componentStack: expect.stringContaining(
-              'in FloatingContextualButton',
-            ),
-          }),
-          errorRethrown: false,
-        },
+      const mock = jest.spyOn(prosemirrorUtils, 'findDomRefAtPos');
+      mock.mockImplementation(() => {
+        throw new Error('Error message from mock');
       });
+      component({
+        editorView,
+        targetCellPosition: refs.firstCell,
+      });
+
+      expect(createAnalyticsEvent).toHaveBeenCalled();
     });
   });
 });

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { EditorView } from 'prosemirror-view';
+import { IntlProvider } from 'react-intl-next';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  p,
+  table,
+  tdCursor,
+  tdEmpty,
+  th,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
+import FloatingContextualMenu from '../../../plugins/table/ui/FloatingContextualMenu';
+import tablePlugin from '../../../plugins/table-plugin';
+
+describe('FloatingContextualMenu', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  describe('with right position in plugin state', () => {
+    let editorView: EditorView;
+    beforeEach(() => {
+      ({ editorView } = createEditor({
+        doc: doc(table()(tr(th()(p('')), th()(p(''))), tr(tdCursor, tdEmpty))),
+        preset: new Preset<LightEditorPlugin>().add(tablePlugin),
+      }));
+    });
+
+    it('should render floating contextual menu when no tableCellPosition is passed but exist on editor state ', () => {
+      render(
+        <IntlProvider locale="en">
+          <FloatingContextualMenu
+            editorView={editorView}
+            isOpen
+            pluginConfig={getPluginState(editorView.state).pluginConfig}
+            getEditorContainerWidth={jest.fn()}
+          />
+        </IntlProvider>,
+      );
+      expect(screen.getAllByLabelText('Popup').length).toBeGreaterThan(0);
+    });
+  });
+});

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

@@ -9,10 +9,10 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import { selectColumns, selectRows } from '@atlaskit/editor-test-helpers/table';
-import { selectTable } from '@atlaskit/editor-tables/utils';
+import { selectTable, getCellsInColumn } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { IntlProvider } from 'react-intl-next';
 import {
   TablePluginState,
@@ -134,4 +134,32 @@ describe('Floating Delete Button', () => {
       expect(screen.getAllByLabelText('Delete row').length).toBe(1);
     });
   });
+  describe('when deleting with the delete button', () => {
+    describe('Columns', () => {
+      it('should move cursor within the table after delete', () => {
+        selectColumns([0, 1])(editorView.state, editorView.dispatch);
+        component({ selection: editorView.state.selection, editorView });
+        const { tr } = editorView.state;
+        const { pos } = getCellsInColumn(2)(tr.selection)![2];
+        const lastCellPos = tr.doc.resolve(pos).pos + 1;
+        fireEvent.click(screen.getByLabelText('Delete column'));
+        expect(editorView.state.selection.from).toBeLessThanOrEqual(
+          lastCellPos,
+        );
+      });
+    });
+    describe('Rows', () => {
+      it('should move cursor within the table after delete', () => {
+        selectRows([0, 1])(editorView.state, editorView.dispatch);
+        component({ selection: editorView.state.selection, editorView });
+        const { tr } = editorView.state;
+        const { pos } = getCellsInColumn(2)(tr.selection)![2];
+        const lastCellPos = tr.doc.resolve(pos).pos + 1;
+        fireEvent.click(screen.getByLabelText('Delete row'));
+        expect(editorView.state.selection.from).toBeLessThanOrEqual(
+          lastCellPos,
+        );
+      });
+    });
+  });
 });