@atlaskit/editor-plugin-table 7.2.2 → 7.3.0

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

@@ -1,294 +0,0 @@
-import React from 'react';
-
-import { fireEvent, render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl-next';
-
-import type { DocBuilder } from '@atlaskit/editor-common/types';
-import { setTextSelection } from '@atlaskit/editor-common/utils';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
-import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
-import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
-import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { getSelectionRect, selectRow } from '@atlaskit/editor-tables/utils';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  createProsemirrorEditorFactory,
-  Preset,
-} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  doc,
-  p,
-  table,
-  td,
-  tdCursor,
-  tdEmpty,
-  thEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { selectRows } from '@atlaskit/editor-test-helpers/table';
-
-import { hoverRows } from '../../../commands';
-import tablePlugin from '../../../plugin';
-import { pluginKey } from '../../../pm-plugins/plugin-key';
-import TableFloatingControls from '../../../ui/TableFloatingControls';
-import { RowControls } from '../../../ui/TableFloatingControls/RowControls';
-
-describe('RowControls', () => {
-  const createEditor = createProsemirrorEditorFactory();
-  let originalResizeObserver: any;
-
-  beforeAll(() => {
-    originalResizeObserver = (window as any).ResizeObserver;
-    (window as any).ResizeObserver = function resizeObserverMock(
-      callback: () => {},
-    ) {
-      this.disconnect = jest.fn();
-      this.observe = jest.fn();
-      this.unobserve = jest.fn();
-    };
-  });
-
-  afterAll(() => {
-    (window as any).ResizeObserver = originalResizeObserver;
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  const editor = (doc: DocBuilder) => {
-    return createEditor({
-      doc,
-      preset: new Preset<LightEditorPlugin>()
-        .add([featureFlagsPlugin, {}])
-        .add([analyticsPlugin, {}])
-        .add(contentInsertionPlugin)
-        .add(widthPlugin)
-        .add(guidelinePlugin)
-        .add(selectionPlugin)
-        .add(tablePlugin),
-      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)));
-        const ref = editorView.dom.querySelector('table') || undefined;
-
-        render(
-          <IntlProvider locale="en">
-            <TableFloatingControls
-              tableRef={ref}
-              tableActive
-              editorView={editorView}
-              isDragAndDropEnabled={false}
-              selection={editorView.state.selection}
-            />
-          </IntlProvider>,
-        );
-
-        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))));
-    const ref = editorView.dom.querySelector('table') || undefined;
-
-    render(
-      <IntlProvider locale="en">
-        <TableFloatingControls
-          tableRef={ref}
-          tableActive={false}
-          editorView={editorView}
-        />
-      </IntlProvider>,
-    );
-
-    expect(screen.queryByLabelText('Highlight row')).toBeFalsy();
-  });
-
-  [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),
-            ),
-          ),
-        );
-
-        const ref = editorView.dom.querySelector('table') || undefined;
-
-        render(
-          <IntlProvider locale="en">
-            <TableFloatingControls
-              tableRef={ref}
-              tableActive
-              editorView={editorView}
-              isDragAndDropEnabled={false}
-              selection={editorView.state.selection}
-            />
-          </IntlProvider>,
-        );
-
-        // move to header row
-        const { nextPos } = refs;
-        setTextSelection(editorView, nextPos);
-
-        // now hover the row
-        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
-        fireEvent.mouseOut(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);
-      });
-    });
-  });
-
-  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),
-        ),
-      ),
-    );
-
-    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>,
-    );
-
-    const rowControls = screen.getAllByLabelText('Highlight row');
-    rowControls
-      .slice(0, 2)
-      .forEach((control) =>
-        expect(
-          control?.parentElement?.classList?.contains('danger'),
-        ).toBeTruthy(),
-      );
-  });
-
-  describe('row shift selection', () => {
-    it('should be able to shift + click to 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);
-
-      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>,
-      );
-
-      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 be able to shift + click to select rows 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);
-
-      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>,
-      );
-
-      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/RowDragControls.tsx

@@ -1,129 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl-next';
-
-import type { DocBuilder } from '@atlaskit/editor-common/types';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
-import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
-import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
-import { widthPlugin } from '@atlaskit/editor-plugin-width';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  createProsemirrorEditorFactory,
-  Preset,
-} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  doc,
-  p,
-  table,
-  td,
-  tdEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import tablePlugin from '../../../plugin';
-import { pluginKey } from '../../../pm-plugins/plugin-key';
-import { DragControls } from '../../../ui/TableFloatingControls/RowControls';
-
-describe('RowDragControls', () => {
-  const createEditor = createProsemirrorEditorFactory();
-
-  const editor = (doc: DocBuilder, tableOptions = {}) =>
-    createEditor({
-      doc,
-      preset: new Preset<LightEditorPlugin>()
-        .add([featureFlagsPlugin, {}])
-        .add([analyticsPlugin, {}])
-        .add(contentInsertionPlugin)
-        .add(widthPlugin)
-        .add(guidelinePlugin)
-        .add(selectionPlugin)
-        .add([tablePlugin, { tableOptions, dragAndDropEnabled: true }]),
-      pluginKey: pluginKey,
-    });
-
-  it('should only render one child container if hovered cell provided', () => {
-    const { editorView } = editor(
-      doc(
-        p('text'),
-        table()(
-          tr(tdEmpty, tdEmpty, tdEmpty),
-          tr(tdEmpty, tdEmpty, tdEmpty),
-          tr(td({})(p('\n\n\n\n\n')), tdEmpty, tdEmpty),
-        ),
-      ),
-      {},
-    );
-    const ref = editorView.dom.querySelector('table');
-
-    render(
-      <IntlProvider locale="en">
-        <DragControls
-          tableRef={ref!}
-          tableActive
-          editorView={editorView}
-          hoveredCell={{ rowIndex: 1, colIndex: 1 }}
-          isTableHovered={true}
-          hoverRows={jest.fn()}
-          selectRow={jest.fn()}
-          selectRows={jest.fn()}
-          updateCellHoverLocation={jest.fn()}
-          tableWidth={760}
-        />
-      </IntlProvider>,
-    );
-
-    const dragHandle = screen.getAllByTestId(
-      /^table-floating-row-\d-drag-handle$/,
-    );
-
-    expect(dragHandle.length).toBe(1);
-  });
-
-  it('should not render any drag handle containers if hoveredCell is undefined', () => {
-    const { editorView } = editor(
-      doc(
-        p('text'),
-        table()(
-          tr(tdEmpty, tdEmpty, tdEmpty),
-          tr(tdEmpty, tdEmpty, tdEmpty),
-          tr(td({})(p('\n\n\n\n\n')), tdEmpty, tdEmpty),
-        ),
-      ),
-      { dragAndDropEnabled: true },
-    );
-    const ref = editorView.dom.querySelector('table');
-
-    render(
-      <IntlProvider locale="en">
-        <DragControls
-          tableRef={ref!}
-          tableActive
-          editorView={editorView}
-          hoveredCell={{
-            colIndex: undefined,
-            rowIndex: undefined,
-          }}
-          hoverRows={jest.fn()}
-          selectRow={jest.fn()}
-          selectRows={jest.fn()}
-          updateCellHoverLocation={jest.fn()}
-          tableWidth={760}
-        />
-      </IntlProvider>,
-    );
-
-    const dragHandle = screen.queryAllByTestId(
-      /^table-floating-row-\d-drag-handle$/,
-    );
-
-    expect(dragHandle.length).toBe(0);
-  });
-});

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

@@ -1,189 +0,0 @@
-import React from 'react';
-
-import { fireEvent } from '@testing-library/dom';
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl-next';
-
-import type { DocBuilder, Refs } from '@atlaskit/editor-common/types';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
-import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
-import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
-import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  createProsemirrorEditorFactory,
-  Preset,
-} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  doc,
-  p,
-  table,
-  tdEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import tablePlugin from '../../../plugin';
-import { pluginKey } from '../../../pm-plugins/plugin-key';
-import type { TablePluginState } from '../../../types';
-import TableFloatingColumnControls from '../../../ui/TableFloatingColumnControls';
-
-describe('TableFloatingColumnControls', () => {
-  const createEditor = createProsemirrorEditorFactory();
-  const fakeGetEditorFeatureFlags = () => ({});
-  const editor = (
-    doc: DocBuilder,
-    options?: {
-      dragAndDropEnabled?: boolean;
-    },
-  ) => {
-    const preset = new Preset<LightEditorPlugin>()
-      .add([featureFlagsPlugin, {}])
-      .add([analyticsPlugin, {}])
-      .add(contentInsertionPlugin)
-      .add(widthPlugin)
-      .add(guidelinePlugin)
-      .add(selectionPlugin)
-      .add([tablePlugin, { ...options, tableOptions: {} }]);
-    return createEditor<TablePluginState, PluginKey, typeof preset>({
-      doc,
-      preset,
-      pluginKey: pluginKey,
-    });
-  };
-
-  const getNodeFunc = (view: EditorView, refs: Refs) => () =>
-    view.state.doc.nodeAt(refs['<node>'])!;
-
-  afterEach(async () => {
-    // cleanup any pending drags
-    fireEvent.dragEnd(window);
-    // Optional: unwind a post-drop browser bug fix
-    // tick forward a micro task to flush a post-drag bug fix
-    await 1;
-    // this will trigger the fix to be released
-    fireEvent.pointerMove(window);
-  });
-
-  it('should not render floating column controls when tableRef undefined and drag and drop is not enabled', () => {
-    const { editorView, refs } = editor(
-      doc(p('text'), '{<node>}', table()(tr(tdEmpty, tdEmpty, tdEmpty))),
-    );
-
-    const { container } = render(
-      <TableFloatingColumnControls
-        editorView={editorView}
-        getNode={getNodeFunc(editorView, refs)}
-        getEditorFeatureFlags={fakeGetEditorFeatureFlags}
-      />,
-    );
-    expect(container.innerHTML).toEqual('');
-  });
-
-  it('should not render floating column controls when tableRef undefined and drag and drop is enabled', () => {
-    const { editorView, refs } = editor(
-      doc(p('text'), '{<node>}', table()(tr(tdEmpty, tdEmpty, tdEmpty))),
-      {
-        dragAndDropEnabled: true,
-      },
-    );
-    const { container } = render(
-      <TableFloatingColumnControls
-        editorView={editorView}
-        getNode={getNodeFunc(editorView, refs)}
-        getEditorFeatureFlags={fakeGetEditorFeatureFlags}
-      />,
-    );
-    expect(container.innerHTML).toEqual('');
-  });
-
-  it.todo('should not render drop target when no drag is active');
-
-  it.todo(
-    'should render a drop target per column when dragging' /*, () => {
-    const { editorView, refs } = editor(
-      doc(
-        p('text'),
-        '{<node>}',
-        table()(tr(tdEmpty, tdCursor, tdEmpty, tdEmpty, tdEmpty)),
-      ),
-      {
-        dragAndDropEnabled: true,
-      },
-    );
-    const ref = editorView.dom.querySelector('table') || undefined;
-
-    render(
-      <IntlProvider locale="en">
-        <TableFloatingColumnControls
-          getNode={getNodeFunc(editorView, refs)}
-          tableRef={ref}
-          tableActive={true}
-          hoveredCell={{ colIndex: 1, rowIndex: 0}}
-          editorView={editorView}
-          getEditorFeatureFlags={fakeGetEditorFeatureFlags}
-        />
-      </IntlProvider>,
-    );
-
-    screen.debug();
-
-    const dragHandle = screen.getByTestId(
-      'table-floating-column-controls-drag-handle',
-    );
-
-    fireEvent.dragStart(dragHandle);
-
-     // ticking forward an animation frame will complete the lift
-    // @ts-expect-error
-    requestAnimationFrame.step();
-
-    const dropTargets = screen.getAllByTestId(
-      'table-floating-column-controls-drop-target',
-    );
-
-    expect(dropTargets).toHaveLength(5);
-  }*/,
-  );
-
-  // FIXME and unskp: presumably doesn't work becuase TableFloatingColumnControls are now mounted via ReactDOM.createPortal
-  it.skip('should render a drop target per column regardless of row count', () => {
-    const { editorView, refs } = editor(
-      doc(
-        p('text'),
-        '{<node>}',
-        table()(tr(tdEmpty), tr(tdEmpty), tr(tdEmpty)),
-      ),
-      {
-        dragAndDropEnabled: true,
-      },
-    );
-    const ref = editorView.dom.querySelector('table') || undefined;
-
-    render(
-      <IntlProvider locale="en">
-        <TableFloatingColumnControls
-          getNode={getNodeFunc(editorView, refs)}
-          tableRef={ref}
-          tableActive={true}
-          editorView={editorView}
-          getEditorFeatureFlags={fakeGetEditorFeatureFlags}
-        />
-      </IntlProvider>,
-    );
-
-    const dropTargets = screen.getAllByTestId(
-      'table-floating-column-controls-drop-target',
-    );
-    expect(dropTargets).toHaveLength(1);
-  });
-
-  it.todo('should remove column drop targets when dragging ends');
-});