@atlaskit/editor-plugin-table 0.0.5 → 0.0.7

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

@@ -0,0 +1,301 @@
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import { mountWithIntl } from '@atlaskit/editor-test-helpers/enzyme';
+import {
+  doc,
+  p,
+  table,
+  td,
+  tdCursor,
+  tdEmpty,
+  thEmpty,
+  tr,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+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 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(
+      callback: () => {},
+    ) {
+      this.disconnect = jest.fn();
+      this.observe = jest.fn();
+      resizeCallback = callback;
+    };
+  });
+
+  afterAll(() => {
+    (window as any).ResizeObserver = originalResizeObserver;
+  });
+
+  afterEach(() => {
+    if (floatingControls && floatingControls.length) {
+      floatingControls.unmount();
+    }
+    jest.clearAllMocks();
+  });
+
+  const editor = (doc: DocBuilder, props?: EditorProps) => {
+    const { featureFlags } = props || {};
+    fakeGetEditorFeatureFlags.mockReturnValue(featureFlags || {});
+
+    return createEditor({
+      doc,
+      editorProps: {
+        allowTables: false,
+        dangerouslyAppendPlugins: { __plugins: [tablePlugin()] },
+        ...props,
+      },
+      pluginKey,
+    });
+  };
+
+  [1, 2, 3].forEach((row) => {
+    describe(`when table has ${row} rows`, () => {
+      it(`should render ${row} row header buttons`, () => {
+        const rows = [tr(tdCursor)];
+        for (let i = 1; i < row; i++) {
+          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}
+          />,
+        );
+        expect(floatingControls.find(RowControlsButtonWrap)).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);
+  });
+
+  describe('with tableRenderOptimization enabled', () => {
+    it('updates rowControls if table height changes', () => {
+      const { editorView } = editor(doc(table()(tr(tdCursor))), {
+        featureFlags: { tableRenderOptimization: true },
+      });
+      floatingControls = mountWithIntl(
+        <TableFloatingControls
+          tableRef={document.querySelector('table')!}
+          tableActive={true}
+          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);
+    });
+  });
+
+  [0, 1, 2].forEach((row) => {
+    describe(`when HeaderButton in row ${row + 1} is clicked`, () => {
+      it('should not move the cursor when hovering controls', () => {
+        const { editorView, refs } = editor(
+          doc(
+            table()(
+              tr(thEmpty, td({})(p('{nextPos}')), thEmpty),
+              tr(tdCursor, tdEmpty, tdEmpty),
+              tr(tdEmpty, tdEmpty, tdEmpty),
+            ),
+          ),
+        );
+
+        floatingControls = mountWithIntl(
+          <TableFloatingControls
+            tableRef={document.querySelector('table')!}
+            tableActive={true}
+            editorView={editorView}
+            getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+          />,
+        );
+
+        // move to header row
+        const { nextPos } = refs;
+        setTextSelection(editorView, nextPos);
+
+        // now hover the row
+        floatingControls
+          .find(RowControlsButtonWrap)
+          .at(row)
+          .find('button')
+          .first()
+          .simulate('mouseover');
+
+        // 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');
+
+        // assert the cursor is still in same position
+        expect(editorView.state.selection.$from.pos).toBe(nextPos);
+        expect(editorView.state.selection.$to.pos).toBe(nextPos);
+      });
+    });
+  });
+
+  it('applies the danger class to the row buttons', () => {
+    const { editorView } = editor(
+      doc(
+        table()(
+          tr(thEmpty, td({})(p()), thEmpty),
+          tr(tdCursor, tdEmpty, tdEmpty),
+          tr(tdEmpty, tdEmpty, tdEmpty),
+        ),
+      ),
+    );
+
+    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));
+        }}
+      />,
+    );
+
+    floatingControls
+      .find(RowControlsButtonWrap)
+      .slice(0, 2)
+      .forEach((buttonWrap) => {
+        expect(buttonWrap.hasClass('danger')).toBe(true);
+      });
+  });
+
+  describe('row shift selection', () => {
+    it('should shift select rows after the currently selected row', () => {
+      const { editorView } = editor(
+        doc(
+          table()(
+            tr(thEmpty, thEmpty, thEmpty),
+            tr(tdEmpty, tdEmpty, tdEmpty),
+            tr(tdEmpty, tdEmpty, tdEmpty),
+            tr(tdEmpty, tdEmpty, tdEmpty),
+          ),
+        ),
+      );
+
+      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));
+          }}
+        />,
+      );
+
+      floatingControls
+        .find(ControlsButton)
+        .at(2)
+        .simulate('click', { 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', () => {
+      const { editorView } = editor(
+        doc(
+          table()(
+            tr(thEmpty, thEmpty, thEmpty),
+            tr(tdEmpty, tdEmpty, tdEmpty),
+            tr(tdEmpty, tdEmpty, tdEmpty),
+            tr(tdEmpty, tdEmpty, tdEmpty),
+          ),
+        ),
+      );
+
+      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));
+          }}
+        />,
+      );
+
+      floatingControls
+        .find(ControlsButton)
+        .first()
+        .simulate('click', { 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

@@ -0,0 +1,93 @@
+import { shallow, mount } from 'enzyme';
+import React from 'react';
+
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+  LightEditorPlugin,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  p,
+  table,
+  tr,
+  tdEmpty,
+  tdCursor,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+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';
+import { PluginKey } from 'prosemirror-state';
+
+describe('TableFloatingControls', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const fakeGetEditorFeatureFlags = () => ({});
+  const preset = new Preset<LightEditorPlugin>().add(tablePlugin);
+
+  const editor = (doc: DocBuilder) =>
+    createEditor<TablePluginState, PluginKey>({
+      doc,
+      preset,
+      pluginKey: pluginKey,
+    });
+
+  describe('when tableRef is undefined', () => {
+    it('should not render table header', () => {
+      const { editorView } = editor(
+        doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
+      );
+      const floatingControls = mount(
+        <TableFloatingControls
+          editorView={editorView}
+          getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+        />,
+      );
+      expect(floatingControls.html()).toEqual(null);
+      floatingControls.unmount();
+    });
+  });
+
+  describe('when tableRef is defined', () => {
+    it('should render CornerControls and RowControls', () => {
+      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}
+        />,
+      );
+      expect(floatingControls.find(CornerControls).length).toEqual(1);
+      expect(floatingControls.find(RowControls).length).toEqual(1);
+    });
+  });
+
+  describe('when delete icon is hovered', () => {
+    it('should add a node decoration to table nodeView with class="danger"', () => {
+      const { editorView } = editor(
+        doc(
+          p('text'),
+          table()(
+            tr(tdCursor, tdEmpty),
+            tr(tdEmpty, tdEmpty),
+            tr(tdEmpty, tdEmpty),
+          ),
+        ),
+      );
+      hoverTable(true)(editorView.state, editorView.dispatch);
+      const decorationSet = getDecorations(editorView.state);
+      const decoration = decorationSet.find()[0] as any;
+      expect(decoration.type.attrs.class.indexOf('danger')).toBeGreaterThan(-1);
+    });
+  });
+});

package/src/__tests__/unit/undo-redo.ts

@@ -0,0 +1,202 @@
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  doc,
+  p,
+  table,
+  tr,
+  th,
+  DocBuilder,
+  thEmpty,
+  td,
+  tdCursor,
+  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';
+import { deleteColumns } from '../../plugins/table/transforms';
+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';
+
+const TABLE_LOCAL_ID = 'test-table-local-id';
+
+const getEditorContainerWidth = () => {
+  return {
+    width: 500,
+  };
+};
+// HELPERS
+const INSERT_COLUMN = (editorView: EditorView) =>
+  insertColumn(getEditorContainerWidth)(1)(
+    editorView.state,
+    editorView.dispatch,
+    editorView,
+  );
+const DELETE_COLUMN = (editorView: EditorView) => {
+  const { state, dispatch } = editorView;
+  dispatch(deleteColumns(colsToRect([0], 1))(state.tr));
+};
+const SHORTCUT_ADD_COLUMN_BEFORE = (editorView: EditorView) =>
+  sendKeyToPm(editorView, 'Ctrl-Alt-ArrowLeft');
+const SHORTCUT_ADD_COLUMN_AFTER = (editorView: EditorView) =>
+  sendKeyToPm(editorView, 'Ctrl-Alt-ArrowRight');
+
+describe('undo/redo with tables', () => {
+  const createEditor = createEditorFactory<TablePluginState>();
+  const editor = (doc: DocBuilder) => {
+    const tableOptions = {
+      advanced: true,
+      allowColumnSorting: true,
+    };
+    return createEditor({
+      doc,
+      editorProps: {
+        allowTables: false,
+        dangerouslyAppendPlugins: {
+          __plugins: [tablePlugin({ tableOptions })],
+        },
+      },
+      pluginKey: tablePluginKey,
+    });
+  };
+  type TestCase = [
+    string,
+    {
+      before: DocBuilder;
+      action: Function;
+    },
+  ];
+
+  const case01: TestCase = [
+    'when table has colwidth attribute and new col has been inserted',
+    {
+      before: doc(
+        table({
+          localId: TABLE_LOCAL_ID,
+        })(tr(th({ colwidth: [285] })(p('')), th({ colwidth: [1310] })(p('')))),
+      ),
+      action: INSERT_COLUMN,
+    },
+  ];
+
+  const case02: TestCase = [
+    'when table has colwidth attribute and deleting a col',
+    {
+      before: doc(
+        table({
+          localId: TABLE_LOCAL_ID,
+        })(tr(th({ colwidth: [285] })(p('')), th({ colwidth: [1310] })(p('')))),
+      ),
+      action: DELETE_COLUMN,
+    },
+  ];
+
+  const case03: TestCase = [
+    'when table has no colwidth attribute and new col is inserted',
+    {
+      before: doc(
+        table({
+          localId: TABLE_LOCAL_ID,
+        })(tr(thEmpty, thEmpty)),
+      ),
+      action: INSERT_COLUMN,
+    },
+  ];
+
+  const case04: TestCase = [
+    'when table has no colwidth attribute and col is deleted',
+    {
+      before: doc(
+        table({
+          localId: TABLE_LOCAL_ID,
+        })(tr(thEmpty, thEmpty)),
+      ),
+      action: DELETE_COLUMN,
+    },
+  ];
+
+  const case05: TestCase = [
+    'when table has colwidth attribute and col is inserted after selection via shortcuts',
+    {
+      before: doc(
+        table({
+          localId: TABLE_LOCAL_ID,
+        })(
+          tr(
+            td({ colwidth: [194] })(p('{<>}')),
+            td({ colwidth: [564] })(p('')),
+          ),
+        ),
+      ),
+      action: SHORTCUT_ADD_COLUMN_AFTER,
+    },
+  ];
+
+  const case06: TestCase = [
+    'when table has colwidth attribute and col is inserted before selection via shortcuts',
+    {
+      before: doc(
+        table({
+          localId: TABLE_LOCAL_ID,
+        })(
+          tr(
+            td({ colwidth: [194] })(p('{<>}')),
+            td({ colwidth: [564] })(p('')),
+          ),
+        ),
+      ),
+      action: SHORTCUT_ADD_COLUMN_BEFORE,
+    },
+  ];
+
+  const case07: TestCase = [
+    'when table has no colwidth attribute and col is inserted before selection via shortcuts',
+    {
+      before: doc(
+        table({
+          localId: TABLE_LOCAL_ID,
+        })(tr(tdCursor, tdEmpty)),
+      ),
+      action: SHORTCUT_ADD_COLUMN_BEFORE,
+    },
+  ];
+
+  const case08: TestCase = [
+    'when table has no colwidth attribute and col is inserted after selection via shortcuts',
+    {
+      before: doc(
+        table({
+          localId: TABLE_LOCAL_ID,
+        })(tr(tdCursor, tdEmpty)),
+      ),
+      action: SHORTCUT_ADD_COLUMN_BEFORE,
+    },
+  ];
+
+  describe.each<TestCase>([
+    case01,
+    case02,
+    case03,
+    case04,
+    case05,
+    case06,
+    case07,
+    case08,
+  ])('[case%#] %s', (_description, testCase) => {
+    it('should be able to undo/redo', () => {
+      const { editorView } = editor(testCase.before);
+      const docAtStart = clone(editorView.state.doc);
+      testCase.action(editorView);
+      expect(editorView.state.doc).not.toEqualDocument(docAtStart);
+      const docAfterAction = clone(editorView.state.doc);
+      undo(editorView.state, editorView.dispatch);
+      expect(editorView.state.doc).toEqualDocument(docAtStart);
+      redo(editorView.state, editorView.dispatch);
+      expect(editorView.state.doc).toEqualDocument(docAfterAction);
+    });
+  });
+});