@atlaskit/editor-plugin-table 7.2.2 → 7.3.0

package/src/__tests__/unit/get-toolbar-config.ts

@@ -1,127 +0,0 @@
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type {
-  DocBuilder,
-  FloatingToolbarButton,
-  FloatingToolbarItem,
-  GetEditorFeatureFlags,
-} 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 { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
-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,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import { setEditorFocus, setTableRef } from '../../commands';
-import tablePlugin from '../../plugin';
-import { getToolbarConfig } from '../../toolbar';
-
-const formatMessage: (t: { id: string }) => string = (message) =>
-  `${message.id}`;
-
-describe('getToolbarConfig', () => {
-  const getEditorContainerWidth = () => ({ width: 500 });
-  const editorAnalyticsAPIFake: EditorAnalyticsAPI = {
-    attachAnalyticsEvent: jest.fn().mockReturnValue(() => jest.fn()),
-    fireAnalyticsEvent: jest.fn(),
-  };
-  const getEditorFeatureFlags: GetEditorFeatureFlags = jest
-    .fn()
-    .mockReturnValue({});
-  const getButton = (editorView: EditorView) => {
-    const { state } = editorView;
-    const config = getToolbarConfig(
-      getEditorContainerWidth,
-      editorAnalyticsAPIFake,
-      getEditorFeatureFlags,
-      () => editorView,
-    )({})(state, { formatMessage } as any, {} as any)!;
-    //
-    expect(config).not.toBeUndefined();
-    expect(Array.isArray(config.items)).toBeTruthy();
-
-    const items =
-      typeof config.items === 'function'
-        ? config.items(state.doc.firstChild!)
-        : config.items;
-
-    const button = items.find(
-      (item: FloatingToolbarItem<any>) =>
-        item.type === 'button' && item.id === 'editor.table.delete',
-    )! as FloatingToolbarButton<any>;
-
-    expect(button).not.toBeUndefined();
-    return button;
-  };
-
-  const createEditorFn = createProsemirrorEditorFactory();
-  const createEditor = (doc: DocBuilder) => {
-    const output = createEditorFn({
-      doc,
-
-      attachTo: document.body,
-      preset: new Preset<LightEditorPlugin>()
-        .add([featureFlagsPlugin, {}])
-        .add([analyticsPlugin, {}])
-        .add(contentInsertionPlugin)
-        .add(decorationsPlugin)
-        .add(widthPlugin)
-        .add(guidelinePlugin)
-        .add(selectionPlugin)
-        .add(tablePlugin),
-    });
-
-    // Prep the table plugin state a little
-    const { editorView } = output;
-    const { dispatch } = editorView;
-    const tableRef = document.querySelector(
-      '.ProseMirror table',
-    ) as HTMLTableElement;
-    setEditorFocus(true)(output.editorView.state, dispatch);
-    setTableRef(tableRef)(output.editorView.state, dispatch);
-
-    return output;
-  };
-
-  describe('should not add confirmDialog to delete button', () => {
-    it('if no localId', () => {
-      const { editorView } = createEditor(
-        doc(p('text'), table()(tr(tdCursor, tdEmpty))),
-      );
-
-      const button = getButton(editorView);
-      expect(button.confirmDialog).toBeUndefined();
-    });
-
-    it('if localId defined but not referenced', () => {
-      const { editorView } = createEditor(
-        doc(
-          p('text'),
-          table({ localId: 'unreferenced' })(tr(tdCursor, tdEmpty)),
-        ),
-      );
-
-      const button = getButton(editorView);
-      expect(button.confirmDialog).toBeUndefined();
-    });
-  });
-});

package/src/__tests__/unit/handlers.ts

@@ -1,98 +0,0 @@
-import type { DocBuilder } from '@atlaskit/editor-common/types';
-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 { TextSelection } 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,
-  table,
-  tdCursor,
-  tdEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import { handleDocOrSelectionChanged } from '../../handlers';
-import tablePlugin from '../../plugin';
-import { defaultTableSelection } from '../../pm-plugins/default-table-selection';
-import { pluginKey } from '../../pm-plugins/plugin-key';
-import type { TablePluginState } from '../../types';
-
-describe('table action handlers', () => {
-  let editor: any;
-  let defaultPluginState: any;
-
-  beforeEach(() => {
-    const createEditor = createProsemirrorEditorFactory();
-    const preset = new Preset<LightEditorPlugin>()
-      .add([featureFlagsPlugin, {}])
-      .add([analyticsPlugin, {}])
-      .add(contentInsertionPlugin)
-      .add(widthPlugin)
-      .add(guidelinePlugin)
-      .add(selectionPlugin)
-      .add(tablePlugin);
-
-    editor = (doc: DocBuilder) =>
-      createEditor<TablePluginState, PluginKey, typeof preset>({
-        doc,
-        preset,
-        pluginKey,
-      });
-
-    defaultPluginState = {
-      ...defaultTableSelection,
-      pluginConfig: {},
-      editorHasFocus: true,
-      isNumberColumnEnabled: false,
-      isHeaderColumnEnabled: false,
-      isHeaderRowEnabled: false,
-    };
-  });
-
-  describe('#handleDocOrSelectionChanged', () => {
-    it('should return a new state with updated tableNode prop and reset selection', () => {
-      const pluginState = {
-        ...defaultPluginState,
-        hoveredColumns: [1, 2, 3],
-        hoveredRows: [1, 2, 3],
-        isInDanger: true,
-        tableNode: undefined,
-        targetCellPosition: undefined,
-        ordering: undefined,
-        resizeHandleColumnIndex: undefined,
-      };
-      const { editorView } = editor(
-        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-      );
-      const { state } = editorView;
-      const cursorPos = 8;
-      editorView.dispatch(
-        state.tr.setSelection(new TextSelection(state.doc.resolve(cursorPos))),
-      );
-
-      const newState = handleDocOrSelectionChanged(
-        editorView.state.tr,
-        pluginState,
-      );
-
-      expect(newState).toEqual({
-        ...pluginState,
-        ...defaultTableSelection,
-        tableNode: editorView.state.doc.firstChild,
-        targetCellPosition: cursorPos - 2,
-      });
-    });
-  });
-});

package/src/__tests__/unit/hover-selection.ts

@@ -1,230 +0,0 @@
-import type { DocBuilder } from '@atlaskit/editor-common/types';
-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';
-import {
-  getCellsInColumn,
-  getCellsInRow,
-  getCellsInTable,
-} 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,
-  tdCursor,
-  tdEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { selectColumns } from '@atlaskit/editor-test-helpers/table';
-
-import {
-  clearHoverSelection,
-  hoverColumns,
-  hoverRows,
-  hoverTable,
-} from '../../commands';
-import tablePlugin from '../../plugin';
-import { getDecorations } from '../../pm-plugins/decorations/plugin';
-import { pluginKey } from '../../pm-plugins/plugin-key';
-import type { TablePluginState } from '../../types';
-import { TableDecorations } from '../../types';
-
-describe('table hover selection plugin', () => {
-  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,
-    });
-
-  const getTableDecorations = (
-    editorView: EditorView,
-    cells: Array<{ pos: number }>,
-    key?: TableDecorations,
-  ) => {
-    const decorationSet = getDecorations(editorView.state);
-
-    if (key) {
-      return decorationSet.find(
-        cells[0].pos,
-        cells[cells.length - 1].pos,
-        (spec) => spec.key.indexOf(key) > -1,
-      );
-    }
-
-    return decorationSet.find(cells[0].pos, cells[cells.length - 1].pos);
-  };
-
-  describe('when table has 3 columns/2 rows', () => {
-    let editorView: EditorView;
-    beforeEach(() => {
-      const mountedEditor = editor(
-        doc(
-          p('text'),
-          table()(
-            tr(tdCursor, tdEmpty, tdEmpty),
-            tr(tdEmpty, tdEmpty, tdEmpty),
-          ),
-        ),
-      );
-
-      editorView = mountedEditor.editorView;
-    });
-
-    describe('selectColumn(1)', () => {
-      const column = 1;
-      beforeEach(() => {
-        selectColumns([column])(editorView.state, editorView.dispatch);
-      });
-
-      it('should add decoration', () => {
-        const cells = getCellsInColumn(column)(editorView.state.selection)!;
-
-        const decor = getTableDecorations(
-          editorView,
-          cells,
-          TableDecorations.COLUMN_SELECTED,
-        );
-
-        expect(decor).toHaveLength(2);
-      });
-    });
-
-    describe('hoverColumn(number)', () => {
-      it('can create a hover selection over multiple columns', () => {
-        hoverColumns([0, 1])(editorView.state, editorView.dispatch);
-        const cells = getCellsInColumn(0)(editorView.state.selection)!.concat(
-          getCellsInColumn(1)(editorView.state.selection)!,
-        );
-
-        expect(
-          getTableDecorations(
-            editorView,
-            cells,
-            TableDecorations.ALL_CONTROLS_HOVER,
-          ),
-        ).toHaveLength(4);
-      });
-
-      describe.each([0, 1, 2])(
-        'when called hoverColumns with [%d]',
-        (column) => {
-          it('should create a hover selection of column', () => {
-            hoverColumns([column])(editorView.state, editorView.dispatch);
-            const decos = getTableDecorations(
-              editorView,
-              getCellsInColumn(column)(editorView.state.selection)!,
-              TableDecorations.ALL_CONTROLS_HOVER,
-            );
-
-            // selection spans 2 cells in the selected column (because we have 2 rows in the table)
-            expect(decos).toHaveLength(2);
-          });
-        },
-      );
-    });
-  });
-
-  describe('hoverRow(number)', () => {
-    describe('when table has 3 rows', () => {
-      let editorView: EditorView;
-      beforeEach(() => {
-        const mountedEditor = editor(
-          doc(
-            p('text'),
-            table()(
-              tr(tdCursor, tdEmpty),
-              tr(tdEmpty, tdEmpty),
-              tr(tdEmpty, tdEmpty),
-            ),
-          ),
-        );
-
-        editorView = mountedEditor.editorView;
-      });
-
-      it('can create a hover selection over multiple rows', () => {
-        hoverRows([0, 1])(editorView.state, editorView.dispatch);
-        const cells = getCellsInRow(0)(editorView.state.selection)!.concat(
-          getCellsInRow(1)(editorView.state.selection)!,
-        );
-
-        expect(
-          getTableDecorations(
-            editorView,
-            cells,
-            TableDecorations.ALL_CONTROLS_HOVER,
-          ),
-        ).toHaveLength(4);
-      });
-
-      describe.each([0, 1, 2])('when called hoverRows with [%d]', (row) => {
-        it('should create a hover selection of row', () => {
-          hoverRows([row])(editorView.state, editorView.dispatch);
-          expect(
-            getTableDecorations(
-              editorView,
-              getCellsInRow(row)(editorView.state.selection)!,
-              TableDecorations.ALL_CONTROLS_HOVER,
-            ),
-          ).toHaveLength(2);
-        });
-      });
-    });
-  });
-
-  describe('hovertable()', () => {
-    describe('when table has 3 rows', () => {
-      it('should create a hover selection of the whole table', () => {
-        const { editorView } = editor(
-          doc(
-            p('text'),
-            table()(
-              tr(tdCursor, tdEmpty),
-              tr(tdEmpty, tdEmpty),
-              tr(tdEmpty, tdEmpty),
-            ),
-          ),
-        );
-
-        hoverTable()(editorView.state, editorView.dispatch);
-
-        // selection should span all 6 cells
-        expect(
-          getTableDecorations(
-            editorView,
-            getCellsInTable(editorView.state.selection)!,
-            TableDecorations.ALL_CONTROLS_HOVER,
-          ),
-        ).toHaveLength(6);
-
-        // reset hover selection plugin to an empty DecorationSet
-        clearHoverSelection()(editorView.state, editorView.dispatch);
-      });
-    });
-  });
-});

package/src/__tests__/unit/index-with-fake-timers.ts

@@ -1,111 +0,0 @@
-// TODO: ensure this works as I have removed sinon here
-import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
-import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import type { DocBuilder } from '@atlaskit/editor-common/types';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  doc,
-  p,
-  table,
-  tdCursor,
-  tdEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import TableView from '../../nodeviews/table';
-import { pluginKey } from '../../pm-plugins/plugin-key';
-import type { PluginConfig, TablePluginState } from '../../types';
-
-// TODO: this doesn't work
-describe.skip('TableView', () => {
-  const createEditor = createEditorFactory<TablePluginState>();
-  const getEditorContainerWidth = () => ({ width: 500 });
-  const fakeGetEditorFeatureFlags = () => ({});
-  const originalHandleRef = (TableView.prototype as any).handleRef;
-  const handleRefInnerMock = jest.fn(originalHandleRef);
-  let handleRefMock: jest.SpyInstance;
-
-  const editor = (doc: DocBuilder) => {
-    const tableOptions = {
-      allowNumberColumn: true,
-      allowHeaderRow: true,
-      allowHeaderColumn: true,
-      permittedLayouts: 'all',
-    } as PluginConfig;
-    return createEditor({
-      doc,
-      editorProps: {
-        allowTables: tableOptions,
-        media: {
-          allowMediaSingle: true,
-        },
-      },
-      pluginKey,
-    });
-  };
-
-  // beforeEach(() => {
-  //   handleRefMock = jest
-  //     .spyOn(Object.getPrototypeOf(TableView), 'handleRef')
-  //     .mockImplementation(() => {
-  //       console.log('getting called?');
-  //       // window.setTimeout(() => handleRefInnerMock.call(this, ref), 0);
-  //     });
-  // });
-  // previous regression involved PM trying to render child DOM elements,
-  // but the NodeView had an undefined contentDOM after the React render finishes
-  // (since render is not synchronous)
-  it('always provides a content DOM', function (this: any) {
-    jest.useFakeTimers();
-
-    // in the tests, handleRef gets called immediately (due to event loop ordering)
-    // however, the ref callback function can be called async from React after
-    // calling render, which can often occur in the browser
-    //
-    // to simulate this, we add a callback to force it to run out-of-order
-    // const handleRefMock = sinon
-    //   // @ts-ignore
-    //   .stub(TableView.prototype, '_handleRef')
-    //   .callsFake((ref: HTMLElement) => {
-    //     window.setTimeout(() => handleRefInnerMock.call(this, ref), 0);
-    //   });
-
-    // create the NodeView
-    const node = table()(tr(tdCursor, tdEmpty, tdEmpty))(defaultSchema);
-    const { editorView, portalProviderAPI } = editor(doc(p()));
-    const eventDispatcher = { on: () => {} } as unknown as EventDispatcher;
-    const tableView = new TableView({
-      node,
-      allowColumnResizing: false,
-      view: editorView,
-      portalProviderAPI,
-      eventDispatcher,
-      getPos: () => 1,
-      getEditorContainerWidth,
-      getEditorFeatureFlags: fakeGetEditorFeatureFlags,
-      hasIntlContext: true,
-      dispatchAnalyticsEvent: jest.fn(),
-    }).init();
-
-    // we expect to have a contentDOM after instanciating the NodeView so that
-    // ProseMirror will render the node's children into the element
-    expect(tableView.contentDOM).toBeDefined();
-
-    // we shouldn't have called the mock yet, since it's behind the window.setTimeout
-    expect(handleRefInnerMock).not.toBeCalled();
-
-    // run the timers through
-    jest.runAllTimers();
-
-    // the timer should have expired now
-    expect(handleRefInnerMock).toBeCalled();
-
-    // ensure we still have a contentDOM
-    expect(tableView.contentDOM).toBeDefined();
-
-    // reset the mock
-    handleRefMock.mockClear();
-  });
-});