@atlaskit/editor-plugin-table 0.1.0 → 0.1.1

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

@@ -1,5 +1,10 @@
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
-import { mountWithIntl } from '@atlaskit/editor-test-helpers/enzyme';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   p,
@@ -14,39 +19,18 @@ import {
 import { selectRows } from '@atlaskit/editor-test-helpers/table';
 import { getSelectionRect, selectRow } from '@atlaskit/editor-tables/utils';
 import React from 'react';
-import type { EditorProps } from '@atlaskit/editor-core';
 import { setTextSelection } from '@atlaskit/editor-common/utils';
 import { hoverRows } from '../../../plugins/table/commands';
-import {
-  TableCssClassName as ClassName,
-  TablePluginState,
-} from '../../../plugins/table/types';
 import TableFloatingControls from '../../../plugins/table/ui/TableFloatingControls';
 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';
 
-const ControlsButton = `.${ClassName.CONTROLS_BUTTON}`;
-const RowControlsButtonWrap = `.${ClassName.ROW_CONTROLS_BUTTON_WRAP}`;
-
 describe('RowControls', () => {
-  const createEditor = createEditorFactory<TablePluginState>();
+  const createEditor = createProsemirrorEditorFactory();
   const fakeGetEditorFeatureFlags = jest.fn(() => ({}));
-  let floatingControls: ReactWrapper;
   let originalResizeObserver: any;
 
-  let triggerElementResize = (element: HTMLElement, height: number) => {
-    const entries = [
-      {
-        target: element,
-        contentRect: { height },
-      },
-    ];
-    resizeCallback(entries);
-  };
-  let resizeCallback: (entries: any[]) => {};
-
   beforeAll(() => {
     originalResizeObserver = (window as any).ResizeObserver;
     (window as any).ResizeObserver = function resizeObserverMock(
@@ -54,7 +38,6 @@ describe('RowControls', () => {
     ) {
       this.disconnect = jest.fn();
       this.observe = jest.fn();
-      resizeCallback = callback;
     };
   });
 
@@ -63,23 +46,13 @@ describe('RowControls', () => {
   });
 
   afterEach(() => {
-    if (floatingControls && floatingControls.length) {
-      floatingControls.unmount();
-    }
     jest.clearAllMocks();
   });
 
-  const editor = (doc: DocBuilder, props?: EditorProps) => {
-    const { featureFlags } = props || {};
-    fakeGetEditorFeatureFlags.mockReturnValue(featureFlags || {});
-
+  const editor = (doc: DocBuilder) => {
     return createEditor({
       doc,
-      editorProps: {
-        allowTables: false,
-        dangerouslyAppendPlugins: { __plugins: [tablePlugin()] },
-        ...props,
-      },
+      preset: new Preset<LightEditorPlugin>().add(tablePlugin),
       pluginKey,
     });
   };
@@ -92,52 +65,42 @@ describe('RowControls', () => {
           rows.push(tr(tdEmpty));
         }
         const { editorView } = editor(doc(p('text'), table()(...rows)));
-        floatingControls = mountWithIntl(
-          <TableFloatingControls
-            tableRef={document.querySelector('table')!}
-            tableActive={true}
-            editorView={editorView}
-            getEditorFeatureFlags={fakeGetEditorFeatureFlags}
-          />,
+        const ref = editorView.dom.querySelector('table') || undefined;
+
+        render(
+          <IntlProvider locale="en">
+            <TableFloatingControls
+              tableRef={ref}
+              tableActive
+              editorView={editorView}
+              getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+            />
+          </IntlProvider>,
         );
-        expect(floatingControls.find(RowControlsButtonWrap)).toHaveLength(row);
+
+        const rowControlButtons = screen.getAllByLabelText('Highlight row');
+
+        expect(rowControlButtons).toHaveLength(row);
       });
     });
   });
 
   it('does not render rowControls if table is not active', () => {
     const { editorView } = editor(doc(p('text'), table()(tr(tdCursor))));
-    floatingControls = mountWithIntl(
-      <TableFloatingControls
-        tableRef={document.querySelector('table')!}
-        tableActive={false}
-        editorView={editorView}
-        getEditorFeatureFlags={fakeGetEditorFeatureFlags}
-      />,
-    );
-    expect(floatingControls.find(RowControlsButtonWrap)).toHaveLength(0);
-  });
+    const ref = editorView.dom.querySelector('table') || undefined;
 
-  describe('with tableRenderOptimization enabled', () => {
-    it('updates rowControls if table height changes', () => {
-      const { editorView } = editor(doc(table()(tr(tdCursor))), {
-        featureFlags: { tableRenderOptimization: true },
-      });
-      floatingControls = mountWithIntl(
+    render(
+      <IntlProvider locale="en">
         <TableFloatingControls
-          tableRef={document.querySelector('table')!}
-          tableActive={true}
+          tableRef={ref}
+          tableActive={false}
           editorView={editorView}
           getEditorFeatureFlags={fakeGetEditorFeatureFlags}
-        />,
-      );
-      const tableElement = editorView.domAtPos(1).node as HTMLElement;
-      triggerElementResize(tableElement, 10);
-      expect(floatingControls.state('tableHeight')).toBe(10);
-      tableElement.style.height = '100px';
-      triggerElementResize(tableElement, 100);
-      expect(floatingControls.state('tableHeight')).toBe(100);
-    });
+        />
+      </IntlProvider>,
+    );
+
+    expect(screen.queryByLabelText('Highlight row')).toBeFalsy();
   });
 
   [0, 1, 2].forEach((row) => {
@@ -153,13 +116,17 @@ describe('RowControls', () => {
           ),
         );
 
-        floatingControls = mountWithIntl(
-          <TableFloatingControls
-            tableRef={document.querySelector('table')!}
-            tableActive={true}
-            editorView={editorView}
-            getEditorFeatureFlags={fakeGetEditorFeatureFlags}
-          />,
+        const ref = editorView.dom.querySelector('table') || undefined;
+
+        render(
+          <IntlProvider locale="en">
+            <TableFloatingControls
+              tableRef={ref}
+              tableActive
+              editorView={editorView}
+              getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+            />
+          </IntlProvider>,
         );
 
         // move to header row
@@ -167,24 +134,16 @@ describe('RowControls', () => {
         setTextSelection(editorView, nextPos);
 
         // now hover the row
-        floatingControls
-          .find(RowControlsButtonWrap)
-          .at(row)
-          .find('button')
-          .first()
-          .simulate('mouseover');
+        const rowControls = screen.getAllByLabelText('Highlight row');
+
+        fireEvent.mouseOver(rowControls[row]);
 
         // assert the cursor is still in same position
         expect(editorView.state.selection.$from.pos).toBe(nextPos);
         expect(editorView.state.selection.$to.pos).toBe(nextPos);
 
         // release the hover
-        floatingControls
-          .find(RowControlsButtonWrap)
-          .at(row)
-          .find('button')
-          .first()
-          .simulate('mouseout');
+        fireEvent.mouseOut(rowControls[row]);
 
         // assert the cursor is still in same position
         expect(editorView.state.selection.$from.pos).toBe(nextPos);
@@ -204,31 +163,37 @@ describe('RowControls', () => {
       ),
     );
 
-    floatingControls = mountWithIntl(
-      <RowControls
-        tableRef={document.querySelector('table')!}
-        editorView={editorView}
-        hoverRows={(rows, danger) => {
-          hoverRows(rows, danger)(editorView.state, editorView.dispatch);
-        }}
-        hoveredRows={[0, 1]}
-        isInDanger={true}
-        selectRow={(row) => {
-          editorView.dispatch(selectRow(row)(editorView.state.tr));
-        }}
-      />,
+    const ref = editorView.dom.querySelector('table') || undefined;
+
+    render(
+      <IntlProvider locale="en">
+        <RowControls
+          tableRef={ref!}
+          editorView={editorView}
+          hoverRows={(rows, danger) => {
+            hoverRows(rows, danger)(editorView.state, editorView.dispatch);
+          }}
+          hoveredRows={[0, 1]}
+          isInDanger={true}
+          selectRow={(row) => {
+            editorView.dispatch(selectRow(row)(editorView.state.tr));
+          }}
+        />
+      </IntlProvider>,
     );
 
-    floatingControls
-      .find(RowControlsButtonWrap)
+    const rowControls = screen.getAllByLabelText('Highlight row');
+    rowControls
       .slice(0, 2)
-      .forEach((buttonWrap) => {
-        expect(buttonWrap.hasClass('danger')).toBe(true);
-      });
+      .forEach((control) =>
+        expect(
+          control?.parentElement?.classList?.contains('danger'),
+        ).toBeTruthy(),
+      );
   });
 
   describe('row shift selection', () => {
-    it('should shift select rows after the currently selected row', () => {
+    it('should be able to shift + click to select rows after the currently selected row', () => {
       const { editorView } = editor(
         doc(
           table()(
@@ -241,29 +206,32 @@ describe('RowControls', () => {
       );
 
       selectRows([0])(editorView.state, editorView.dispatch);
-      floatingControls = mountWithIntl(
-        <RowControls
-          tableRef={document.querySelector('table')!}
-          editorView={editorView}
-          hoverRows={(rows, danger) => {
-            hoverRows(rows, danger)(editorView.state, editorView.dispatch);
-          }}
-          selectRow={(row, expand) => {
-            editorView.dispatch(selectRow(row, expand)(editorView.state.tr));
-          }}
-        />,
+
+      const ref = editorView.dom.querySelector('table');
+
+      render(
+        <IntlProvider locale="en">
+          <RowControls
+            tableRef={ref!}
+            editorView={editorView}
+            hoverRows={(rows, danger) => {
+              hoverRows(rows, danger)(editorView.state, editorView.dispatch);
+            }}
+            selectRow={(row, expand) => {
+              editorView.dispatch(selectRow(row, expand)(editorView.state.tr));
+            }}
+          />
+        </IntlProvider>,
       );
 
-      floatingControls
-        .find(ControlsButton)
-        .at(2)
-        .simulate('click', { shiftKey: true });
+      const rowControls = screen.getAllByLabelText('Highlight row');
+      fireEvent.click(rowControls[2], { shiftKey: true });
 
       const rect = getSelectionRect(editorView.state.selection);
       expect(rect).toEqual({ left: 0, top: 0, right: 3, bottom: 3 });
     });
 
-    it('should shift select row before the currently selected row', () => {
+    it('should be able to shift + click to select rows before the currently selected row', () => {
       const { editorView } = editor(
         doc(
           table()(
@@ -276,23 +244,26 @@ describe('RowControls', () => {
       );
 
       selectRows([2])(editorView.state, editorView.dispatch);
-      floatingControls = mountWithIntl(
-        <RowControls
-          tableRef={document.querySelector('table')!}
-          editorView={editorView}
-          hoverRows={(rows, danger) => {
-            hoverRows(rows, danger)(editorView.state, editorView.dispatch);
-          }}
-          selectRow={(row, expand) => {
-            editorView.dispatch(selectRow(row, expand)(editorView.state.tr));
-          }}
-        />,
+
+      const ref = editorView.dom.querySelector('table') || undefined;
+
+      render(
+        <IntlProvider locale="en">
+          <RowControls
+            tableRef={ref!}
+            editorView={editorView}
+            hoverRows={(rows, danger) => {
+              hoverRows(rows, danger)(editorView.state, editorView.dispatch);
+            }}
+            selectRow={(row, expand) => {
+              editorView.dispatch(selectRow(row, expand)(editorView.state.tr));
+            }}
+          />
+        </IntlProvider>,
       );
 
-      floatingControls
-        .find(ControlsButton)
-        .first()
-        .simulate('click', { shiftKey: true });
+      const rowControls = screen.getAllByLabelText('Highlight row');
+      fireEvent.click(rowControls[0], { shiftKey: true });
 
       const rect = getSelectionRect(editorView.state.selection);
       expect(rect).toEqual({ left: 0, top: 0, right: 3, bottom: 3 });

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

@@ -1,4 +1,5 @@
-import { shallow, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
 import React from 'react';
 
 import {
@@ -19,8 +20,6 @@ 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 { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { getDecorations } from '../../../plugins/table/pm-plugins/decorations/plugin';
 import tablePlugin from '../../../plugins/table-plugin';
@@ -43,14 +42,13 @@ describe('TableFloatingControls', () => {
       const { editorView } = editor(
         doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
       );
-      const floatingControls = mount(
+      const { container } = render(
         <TableFloatingControls
           editorView={editorView}
           getEditorFeatureFlags={fakeGetEditorFeatureFlags}
         />,
       );
-      expect(floatingControls.html()).toEqual(null);
-      floatingControls.unmount();
+      expect(container.innerHTML).toEqual('');
     });
   });
 
@@ -59,16 +57,21 @@ describe('TableFloatingControls', () => {
       const { editorView } = editor(
         doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
       );
-      const floatingControls = shallow(
-        <TableFloatingControls
-          tableRef={document.createElement('table')}
-          tableActive={true}
-          editorView={editorView}
-          getEditorFeatureFlags={fakeGetEditorFeatureFlags}
-        />,
+      const ref = editorView.dom.querySelector('table') || undefined;
+
+      render(
+        <IntlProvider locale="en">
+          <TableFloatingControls
+            tableRef={ref}
+            tableActive={true}
+            editorView={editorView}
+            getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+          />
+        </IntlProvider>,
       );
-      expect(floatingControls.find(CornerControls).length).toEqual(1);
-      expect(floatingControls.find(RowControls).length).toEqual(1);
+
+      expect(screen.getByLabelText('Highlight row')).toBeTruthy();
+      expect(screen.getByLabelText('Highlight table')).toBeTruthy();
     });
   });
 

package/src/__tests__/unit/undo-redo.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,
   p,
@@ -12,7 +16,6 @@ import {
   tdEmpty,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import { EditorView } from 'prosemirror-view';
-import { TablePluginState } from '../../plugins/table/types';
 import { pluginKey as tablePluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import { redo, undo } from 'prosemirror-history';
 import { insertColumn } from '../../plugins/table/commands';
@@ -21,6 +24,7 @@ import { colsToRect } from '../../plugins/table/utils/table';
 import sendKeyToPm from '@atlaskit/editor-test-helpers/send-key-to-pm';
 import clone from 'lodash/clone';
 import tablePlugin from '../../plugins/table';
+import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -46,7 +50,7 @@ const SHORTCUT_ADD_COLUMN_AFTER = (editorView: EditorView) =>
   sendKeyToPm(editorView, 'Ctrl-Alt-ArrowRight');
 
 describe('undo/redo with tables', () => {
-  const createEditor = createEditorFactory<TablePluginState>();
+  const createEditor = createProsemirrorEditorFactory();
   const editor = (doc: DocBuilder) => {
     const tableOptions = {
       advanced: true,
@@ -54,12 +58,9 @@ describe('undo/redo with tables', () => {
     };
     return createEditor({
       doc,
-      editorProps: {
-        allowTables: false,
-        dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ tableOptions })],
-        },
-      },
+      preset: new Preset<LightEditorPlugin>()
+        .add([tablePlugin, { tableOptions }])
+        .add(widthPlugin),
       pluginKey: tablePluginKey,
     });
   };

package/src/__tests__/unit/utils/nodes.ts

@@ -1,5 +1,9 @@
 import { findTable } 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,
   p,
@@ -11,17 +15,17 @@ import {
   thEmpty,
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { TablePluginState } from '../../../plugins/table/types';
 import { containsHeaderColumn } from '../../../plugins/table/utils/nodes';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+import tablePlugin from '../../../plugins/table-plugin';
 
 describe('table merging logic', () => {
-  const createEditor = createEditorFactory<TablePluginState>();
+  const createEditor = createProsemirrorEditorFactory();
 
   const editor = (doc: DocBuilder) =>
     createEditor({
       doc,
-      editorProps: { allowTables: true },
+      preset: new Preset<LightEditorPlugin>().add(tablePlugin),
       pluginKey,
     });
 

package/src/__tests__/unit/utils/row-controls.ts

@@ -2,7 +2,11 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { uuid } from '@atlaskit/adf-schema';
 
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   p,
@@ -12,9 +16,9 @@ import {
   td,
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { TablePluginState } from '../../../plugins/table/types';
 import { copyPreviousRow } from '../../../plugins/table/utils/row-controls';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+import tablePlugin from '../../../plugins/table-plugin';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -27,11 +31,11 @@ describe('table plugin: utils/row-controls.js', () => {
     uuid.setStatic(false);
   });
 
-  const createEditor = createEditorFactory<TablePluginState>();
+  const createEditor = createProsemirrorEditorFactory();
   const editor = (doc: DocBuilder) =>
     createEditor({
       doc,
-      editorProps: { allowTables: true },
+      preset: new Preset<LightEditorPlugin>().add(tablePlugin),
       pluginKey,
     });
 

package/src/plugins/table/commands/clear.ts

@@ -11,39 +11,40 @@ import { Command } from '@atlaskit/editor-common/types';
 // #endregion
 
 // #region Commands
-export const clearMultipleCells = (targetCellPosition?: number): Command => (
-  state,
-  dispatch,
-) => {
-  let cursorPos: number | undefined;
-  let { tr } = state;
+export const clearMultipleCells =
+  (targetCellPosition?: number): Command =>
+  (state, dispatch) => {
+    let cursorPos: number | undefined;
+    let { tr } = state;
 
-  if (isSelectionType(tr.selection, 'cell')) {
-    const selection = (tr.selection as any) as CellSelection;
-    selection.forEachCell((_node, pos) => {
-      const $pos = tr.doc.resolve(tr.mapping.map(pos + 1));
-      tr = emptyCell(findCellClosestToPos($pos)!, state.schema)(tr);
-    });
-    cursorPos = selection.$headCell.pos;
-  } else if (targetCellPosition) {
-    const cell = findCellClosestToPos(tr.doc.resolve(targetCellPosition + 1))!;
-    tr = emptyCell(cell, state.schema)(tr);
-    cursorPos = cell.pos;
-  }
-  if (tr.docChanged && cursorPos) {
-    const $pos = tr.doc.resolve(tr.mapping.map(cursorPos));
-    const textSelection = Selection.findFrom($pos, 1, true);
-    if (textSelection) {
-      tr.setSelection(textSelection);
+    if (isSelectionType(tr.selection, 'cell')) {
+      const selection = tr.selection as any as CellSelection;
+      selection.forEachCell((_node, pos) => {
+        const $pos = tr.doc.resolve(tr.mapping.map(pos + 1));
+        tr = emptyCell(findCellClosestToPos($pos)!, state.schema)(tr);
+      });
+      cursorPos = selection.$headCell.pos;
+    } else if (targetCellPosition) {
+      const cell = findCellClosestToPos(
+        tr.doc.resolve(targetCellPosition + 1),
+      )!;
+      tr = emptyCell(cell, state.schema)(tr);
+      cursorPos = cell.pos;
     }
+    if (tr.docChanged && cursorPos) {
+      const $pos = tr.doc.resolve(tr.mapping.map(cursorPos));
+      const textSelection = Selection.findFrom($pos, 1, true);
+      if (textSelection) {
+        tr.setSelection(textSelection);
+      }
 
-    if (dispatch) {
-      dispatch(tr);
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
     }
-    return true;
-  }
-  return false;
-};
+    return false;
+  };
 
 export const clearSelection: Command = (state, dispatch) => {
   if (dispatch) {