@atlaskit/editor-plugin-table 7.2.2 → 7.2.3

package/src/__tests__/unit/transforms/merging.ts

@@ -1,392 +0,0 @@
-import { uuid } from '@atlaskit/adf-schema';
-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';
-import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
-// 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 { mergeCells } from '../../../transforms';
-import type { TablePluginState } from '../../../types';
-
-const TABLE_LOCAL_ID = 'test-table-local-id';
-
-describe('table plugin -> transforms -> merge cells', () => {
-  beforeAll(() => {
-    uuid.setStatic(TABLE_LOCAL_ID);
-  });
-
-  afterAll(() => {
-    uuid.setStatic(false);
-  });
-
-  const createEditor = createProsemirrorEditorFactory();
-  const preset = new Preset<LightEditorPlugin>()
-    .add([featureFlagsPlugin, {}])
-    .add([analyticsPlugin, {}])
-    .add(contentInsertionPlugin)
-    .add(widthPlugin)
-    .add(guidelinePlugin)
-    .add(selectionPlugin)
-    .add(tablePlugin);
-
-  const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey, typeof preset>({
-      doc,
-      preset,
-      pluginKey,
-    });
-
-  describe('#mergeCells', () => {
-    it('should merge columns and rows', () => {
-      const { editorView } = editor(
-        doc(
-          p('text'),
-          table()(
-            tr(td({})(p('{<cell}')), tdEmpty, tdEmpty),
-            tr(tdEmpty, tdEmpty, tdEmpty),
-            tr(tdEmpty, td({})(p('{cell>}')), tdEmpty),
-          ),
-        ),
-      );
-      const { state, dispatch } = editorView;
-      dispatch(mergeCells(state.tr));
-      expect(editorView.state.doc).toEqualDocument(
-        doc(
-          p('text'),
-          table({ localId: TABLE_LOCAL_ID })(
-            tr(td({ rowspan: 3 })(p('')), tdEmpty),
-            tr(tdEmpty),
-            tr(tdEmpty),
-          ),
-        ),
-      );
-    });
-
-    describe('when two rows gets merged column by column', () => {
-      describe('when last non-merged cell gets merged from the end of the row', () => {
-        it('should delete an empty row that gets created as a result', () => {
-          const { editorView } = editor(
-            doc(
-              p('text'),
-              table()(
-                tr(tdEmpty, tdEmpty, tdEmpty),
-                tr(
-                  td({ rowspan: 2 })(p('b1')),
-                  td({ rowspan: 2 })(p('b2')),
-                  td({})(p('{<cell}b3')),
-                ),
-                tr(td({})(p('{cell>}c3'))),
-              ),
-            ),
-          );
-          const { state, dispatch } = editorView;
-          dispatch(mergeCells(state.tr));
-          expect(editorView.state.doc).toEqualDocument(
-            doc(
-              p('text'),
-              table({ localId: TABLE_LOCAL_ID })(
-                tr(tdEmpty, tdEmpty, tdEmpty),
-                tr(td({})(p('b1')), td({})(p('b2')), td({})(p('b3'), p('c3'))),
-              ),
-            ),
-          );
-        });
-      });
-      describe('when last non-merged cell gets merged from the start of the row', () => {
-        it('should delete an empty row that gets created as a result', () => {
-          const { editorView } = editor(
-            doc(
-              p('text'),
-              table()(
-                tr(tdEmpty, tdEmpty, tdEmpty),
-                tr(
-                  td({})(p('{<cell}b1')),
-                  td({ rowspan: 2 })(p('b2')),
-                  td({ rowspan: 2 })(p('b3')),
-                ),
-                tr(td({})(p('{cell>}c1'))),
-              ),
-            ),
-          );
-          const { state, dispatch } = editorView;
-          dispatch(mergeCells(state.tr));
-          expect(editorView.state.doc).toEqualDocument(
-            doc(
-              p('text'),
-              table({ localId: TABLE_LOCAL_ID })(
-                tr(tdEmpty, tdEmpty, tdEmpty),
-                tr(td({})(p('b1'), p('c1')), td({})(p('b2')), td({})(p('b3'))),
-              ),
-            ),
-          );
-        });
-      });
-    });
-
-    describe('when more than two rows gets merged', () => {
-      describe('when last non-merged cell gets merged from the end of the row', () => {
-        it('should delete an empty row that gets created as a result', () => {
-          const { editorView } = editor(
-            doc(
-              p('text'),
-              table()(
-                tr(td({ rowspan: 4 })(p('a1')), td({})(p('{<cell}a2'))),
-                tr(tdEmpty),
-                tr(td({})(p('{cell>}c2'))),
-                tr(tdEmpty),
-                tr(tdEmpty, tdEmpty),
-              ),
-            ),
-          );
-          const { state, dispatch } = editorView;
-          dispatch(mergeCells(state.tr));
-          expect(editorView.state.doc).toEqualDocument(
-            doc(
-              p('text'),
-              table({ localId: TABLE_LOCAL_ID })(
-                tr(td({ rowspan: 2 })(p('a1')), td({})(p('a2'), p('c2'))),
-                tr(tdEmpty),
-                tr(tdEmpty, tdEmpty),
-              ),
-            ),
-          );
-        });
-      });
-    });
-
-    describe('when rows from the first columns get merged', () => {
-      describe('and table has merged rows in the next column', () => {
-        it('should delete an empty row and decrement rowspan of the next column', () => {
-          const { editorView } = editor(
-            doc(
-              p('text'),
-              table()(
-                tr(td({})(p('{<cell}a1')), td({ rowspan: 3 })(p('a2'))),
-                tr(td({})(p('{cell>}'))),
-                tr(tdEmpty),
-              ),
-            ),
-          );
-          const { state, dispatch } = editorView;
-          dispatch(mergeCells(state.tr));
-          expect(editorView.state.doc).toEqualDocument(
-            doc(
-              p('text'),
-              table({ localId: TABLE_LOCAL_ID })(
-                tr(td({})(p('a1')), td({ rowspan: 2 })(p('a2'))),
-                tr(tdEmpty),
-              ),
-            ),
-          );
-        });
-      });
-    });
-
-    describe('when rows from the last columns get merged', () => {
-      describe('and table has merged rows in the previous column', () => {
-        it('should delete an empty row and decrement rowspan of the previous column', () => {
-          const { editorView } = editor(
-            doc(
-              p('text'),
-              table()(
-                tr(td({ rowspan: 3 })(p('a1')), td({})(p('{<cell}a2'))),
-                tr(td({})(p('{cell>}'))),
-                tr(tdEmpty),
-              ),
-            ),
-          );
-          const { state, dispatch } = editorView;
-          dispatch(mergeCells(state.tr));
-          expect(editorView.state.doc).toEqualDocument(
-            doc(
-              p('text'),
-              table({ localId: TABLE_LOCAL_ID })(
-                tr(td({ rowspan: 2 })(p('a1')), td({})(p('a2'))),
-                tr(tdEmpty),
-              ),
-            ),
-          );
-        });
-      });
-    });
-
-    describe('when two empty cells are merged', () => {
-      it('should fill the merged cell with a paragraph', () => {
-        const { editorView } = editor(
-          doc(
-            p('text'),
-            table()(
-              tr(td({})(p('{<cell}')), td({})(p('{cell>}'))),
-              tr(tdEmpty, tdEmpty),
-            ),
-          ),
-        );
-        const { state, dispatch } = editorView;
-        dispatch(mergeCells(state.tr));
-        expect(editorView.state.doc).toEqualDocument(
-          doc(
-            p('text'),
-            table({ localId: TABLE_LOCAL_ID })(
-              tr(td({ colspan: 2 })(p(''))),
-              tr(tdEmpty, tdEmpty),
-            ),
-          ),
-        );
-      });
-    });
-
-    describe('when next column is invisible', () => {
-      it('should decrement colspans of the preceeding column', () => {
-        const { editorView } = editor(
-          doc(
-            p('text'),
-            table()(
-              tr(tdEmpty, td({})(p('{<cell}')), tdEmpty, td({})(p('{cell>}'))),
-              tr(tdEmpty, td({ colspan: 3 })(p(''))),
-              tr(tdEmpty, td({ colspan: 2 })(p('')), tdEmpty),
-            ),
-          ),
-        );
-        const { state, dispatch } = editorView;
-        dispatch(mergeCells(state.tr));
-        expect(editorView.state.doc).toEqualDocument(
-          doc(
-            p('text'),
-            table({ localId: TABLE_LOCAL_ID })(
-              tr(tdEmpty, td({ colspan: 2 })(p(''))),
-              tr(tdEmpty, td({ colspan: 2 })(p(''))),
-              tr(tdEmpty, tdEmpty, tdEmpty),
-            ),
-          ),
-        );
-      });
-    });
-
-    describe('when next column is not invisible', () => {
-      it('should not decrement colspans of the preceeding column', () => {
-        const { editorView } = editor(
-          doc(
-            p('text'),
-            table()(
-              tr(tdEmpty, td({})(p('{<cell}')), tdEmpty, td({})(p('{cell>}'))),
-              tr(tdEmpty, td({ colspan: 3 })(p(''))),
-              tr(tdEmpty, td({ colspan: 2 })(p('')), tdEmpty),
-              tr(tdEmpty, tdEmpty, tdEmpty, tdEmpty),
-            ),
-          ),
-        );
-        const { state, dispatch } = editorView;
-        dispatch(mergeCells(state.tr));
-        expect(editorView.state.doc).toEqualDocument(
-          doc(
-            p('text'),
-            table({ localId: TABLE_LOCAL_ID })(
-              tr(tdEmpty, td({ colspan: 3 })(p(''))),
-              tr(tdEmpty, td({ colspan: 3 })(p(''))),
-              tr(tdEmpty, td({ colspan: 2 })(p('')), tdEmpty),
-              tr(tdEmpty, tdEmpty, tdEmpty, tdEmpty),
-            ),
-          ),
-        );
-      });
-    });
-
-    describe('when empty cells and cells with content are merged together', () => {
-      it('should copy content from merged cells dropping empty cells', () => {
-        const { editorView } = editor(
-          doc(
-            p('text'),
-            table()(
-              tr(td({})(p('1')), td({})(p('2'))),
-              tr(td({ colspan: 2 })(p('{<cell}'))),
-              tr(td({})(p('1')), td({})(p('2{cell>}'))),
-            ),
-          ),
-        );
-        const { state, dispatch } = editorView;
-        dispatch(mergeCells(state.tr));
-        expect(editorView.state.doc).toEqualDocument(
-          doc(
-            p('text'),
-            table({ localId: TABLE_LOCAL_ID })(
-              tr(td({})(p('1')), td({})(p('2'))),
-              tr(td({ colspan: 2 })(p('1'), p('2'))),
-            ),
-          ),
-        );
-      });
-    });
-
-    describe('when table has columns where all cells have colspan > 1', () => {
-      it('should delete an empty column', () => {
-        const { editorView } = editor(
-          doc(
-            p('text'),
-            table()(
-              tr(
-                td({})(p('1')),
-                td({})(p('2')),
-                td({ colspan: 2, rowspan: 2 })(p('3')),
-                td({})(p('5')),
-                td({})(p('6')),
-              ),
-              tr(tdEmpty, tdEmpty, tdEmpty, tdEmpty),
-              tr(
-                td({})(p('1')),
-                td({})(p('{<cell}2')),
-                td({})(p('3')),
-                td({})(p('4')),
-                td({})(p('5{cell>}')),
-                td({})(p('6')),
-              ),
-            ),
-          ),
-        );
-        const { state, dispatch } = editorView;
-        dispatch(mergeCells(state.tr));
-        expect(editorView.state.doc).toEqualDocument(
-          doc(
-            p('text'),
-            table({ localId: TABLE_LOCAL_ID })(
-              tr(
-                td({})(p('1')),
-                td({})(p('2')),
-                td({ rowspan: 2 })(p('3')),
-                td({})(p('5')),
-                td({})(p('6')),
-              ),
-              tr(tdEmpty, tdEmpty, tdEmpty, tdEmpty),
-              tr(
-                td({})(p('1')),
-                td({ colspan: 3 })(p('2'), p('3'), p('4'), p('5')),
-                td({})(p('6')),
-              ),
-            ),
-          ),
-        );
-      });
-    });
-  });
-});

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

@@ -1,71 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-import { createIntl } from 'react-intl-next';
-
-// 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 { 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,
-  tdCursor,
-  tdEmpty,
-  th,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import tablePlugin from '../../../plugin';
-import { ContextualMenu } from '../../../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([featureFlagsPlugin, {}])
-          .add([analyticsPlugin, {}])
-          .add(contentInsertionPlugin)
-          .add(widthPlugin)
-          .add(guidelinePlugin)
-          .add(selectionPlugin)
-          .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

@@ -1,99 +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';
-// 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 { isTableSelected } 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,
-  table,
-  thEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import tablePlugin from '../../../plugin';
-import { getPluginState } from '../../../pm-plugins/plugin-factory';
-import { pluginKey } from '../../../pm-plugins/plugin-key';
-import { CornerControls } from '../../../ui/TableFloatingControls/CornerControls';
-
-describe('CornerControls', () => {
-  const createEditor = createProsemirrorEditorFactory();
-
-  const editor = (doc: DocBuilder) =>
-    createEditor({
-      doc,
-      preset: new Preset<LightEditorPlugin>()
-        .add([featureFlagsPlugin, {}])
-        .add([analyticsPlugin, {}])
-        .add(contentInsertionPlugin)
-        .add(widthPlugin)
-        .add(guidelinePlugin)
-        .add(selectionPlugin)
-        .add(tablePlugin),
-      pluginKey,
-    });
-
-  describe('when button is clicked', () => {
-    it('should select the table', () => {
-      const { editorView } = editor(
-        doc(table()(tr(thEmpty, thEmpty, thEmpty))),
-      );
-
-      const ref = editorView.dom.querySelector('table') || undefined;
-
-      render(
-        <IntlProvider locale="en">
-          <CornerControls tableRef={ref} editorView={editorView} />
-        </IntlProvider>,
-      );
-
-      const cornerControl = screen.getByLabelText('Highlight table');
-
-      fireEvent.click(cornerControl);
-
-      expect(isTableSelected(editorView.state.selection)).toBe(true);
-    });
-  });
-
-  describe('when button is hovered', () => {
-    it('should highlight the table with hover decoration', () => {
-      const { editorView } = editor(
-        doc(
-          table()(tr(thEmpty, thEmpty, thEmpty), tr(thEmpty, thEmpty, thEmpty)),
-        ),
-      );
-
-      const ref = editorView.dom.querySelector('table') || undefined;
-
-      render(
-        <IntlProvider locale="en">
-          <CornerControls tableRef={ref} editorView={editorView} />
-        </IntlProvider>,
-      );
-
-      const cornerControl = screen.getByLabelText('Highlight table');
-
-      fireEvent.mouseOver(cornerControl);
-
-      const { hoveredColumns, hoveredRows } = getPluginState(editorView.state);
-      expect(hoveredColumns).toEqual([0, 1, 2]);
-      expect(hoveredRows).toEqual([0, 1]);
-    });
-  });
-});

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

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