@atlaskit/editor-plugin-table 7.2.2 → 7.3.0

package/src/__tests__/unit/event-handlers/index.ts

@@ -1,125 +0,0 @@
-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,
-  table,
-  tdCursor,
-  tdEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import { whenTableInFocus } from '../../../event-handlers';
-import tablePlugin from '../../../plugin';
-import { pluginKey } from '../../../pm-plugins/plugin-key';
-import { setDragging } from '../../../pm-plugins/table-resizing/commands';
-import type { TablePluginState } from '../../../types';
-
-describe('event-handlers', () => {
-  let editor: any;
-
-  describe('#whenTableInFocus', () => {
-    describe('when allowColumnResizing is false', () => {
-      beforeEach(() => {
-        const createEditor = createProsemirrorEditorFactory();
-        const preset = new Preset<LightEditorPlugin>()
-          .add([featureFlagsPlugin, {}])
-          .add([analyticsPlugin, {}])
-          .add(contentInsertionPlugin)
-          .add(widthPlugin)
-          .add(guidelinePlugin)
-          .add(selectionPlugin)
-          .add([tablePlugin, { tableOptions: { allowColumnResizing: false } }]);
-        editor = (doc: DocBuilder) =>
-          createEditor<TablePluginState, PluginKey, typeof preset>({
-            doc,
-            preset,
-            pluginKey,
-          });
-      });
-
-      it('should not return false', () => {
-        const { editorView: view } = editor(
-          doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-        );
-        const fakeHandler = jest.fn();
-        fakeHandler.mockReturnValue(true);
-        // @ts-ignore
-        const fakeMouseEvent = jest.fn() as Event;
-
-        const result = whenTableInFocus(fakeHandler);
-
-        expect(result(view, fakeMouseEvent)).not.toBeFalsy();
-      });
-    });
-
-    describe('when allowColumnResizing is true', () => {
-      beforeEach(() => {
-        const createEditor = createProsemirrorEditorFactory();
-        const preset = new Preset<LightEditorPlugin>()
-          .add([featureFlagsPlugin, {}])
-          .add([analyticsPlugin, {}])
-          .add(contentInsertionPlugin)
-          .add(widthPlugin)
-          .add(guidelinePlugin)
-          .add(selectionPlugin)
-          .add([tablePlugin, { tableOptions: { allowColumnResizing: false } }]);
-        editor = (doc: DocBuilder) =>
-          createEditor<TablePluginState, PluginKey, typeof preset>({
-            doc,
-            preset,
-            pluginKey,
-          });
-      });
-
-      describe('when dragging exists', () => {
-        it('should return false', () => {
-          const { editorView: view } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-          const fakeHandler = jest.fn();
-          // @ts-ignore
-          const fakeMouseEvent = jest.fn() as Event;
-
-          setDragging({ startX: 0, startWidth: 0 })(view.state, view.dispatch);
-
-          const result = whenTableInFocus(fakeHandler);
-
-          expect(result(view, fakeMouseEvent)).toBeFalsy();
-        });
-      });
-
-      describe('when dragging is null', () => {
-        it('should not return false', () => {
-          const { editorView: view } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-          const fakeHandler = jest.fn();
-          fakeHandler.mockReturnValue(true);
-          // @ts-ignore
-          const fakeMouseEvent = jest.fn() as Event;
-
-          setDragging(null)(view.state, view.dispatch);
-
-          const result = whenTableInFocus(fakeHandler);
-
-          expect(result(view, fakeMouseEvent)).not.toBeFalsy();
-        });
-      });
-    });
-  });
-});

package/src/__tests__/unit/event-handlers.ts

@@ -1,296 +0,0 @@
-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 { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
-import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
-import { gridPlugin } from '@atlaskit/editor-plugin-grid';
-import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
-import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
-import { widthPlugin } from '@atlaskit/editor-plugin-width';
-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,
-  p,
-  table,
-  td,
-  tdCursor,
-  tdEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import {
-  addResizeHandleDecorations,
-  showInsertColumnButton,
-} from '../../commands';
-import {
-  handleMouseDown,
-  handleMouseMove,
-  handleMouseOut,
-  handleMouseOver,
-  withCellTracking,
-} from '../../event-handlers';
-import tablePlugin from '../../plugin';
-import { getPluginState } from '../../pm-plugins/plugin-factory';
-import { pluginKey } from '../../pm-plugins/plugin-key';
-import { TableCssClassName as ClassName } from '../../types';
-
-describe('table plugin: decorations', () => {
-  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('#handleMouseDown', () => {
-    beforeEach(() => {
-      jest.resetAllMocks();
-    });
-    it('should return true & prevent default behaviour for table wrappers: pm-table-container', () => {
-      const { editorView } = editor(
-        doc(table()(tr(td({})(p())), tr(td({})(p())), tr(td({})(p())))),
-      );
-      const tableContainer = document.createElement('div');
-      tableContainer.className = 'pm-table-container';
-      const event = new MouseEvent('mousedown');
-      Object.defineProperty(event, 'target', { value: tableContainer });
-      const preventDefaultSpy = jest.spyOn(
-        MouseEvent.prototype,
-        'preventDefault',
-      );
-
-      expect(handleMouseDown(editorView, event)).toEqual(true);
-      expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should return true & prevent default behaviour for table wrappers: pm-table-wrapper', () => {
-      const { editorView } = editor(
-        doc(table()(tr(td({})(p())), tr(td({})(p())), tr(td({})(p())))),
-      );
-      const tableContainer = document.createElement('div');
-      tableContainer.className = 'pm-table-wrapper';
-      const event = new MouseEvent('mousedown');
-      Object.defineProperty(event, 'target', { value: tableContainer });
-      const preventDefaultSpy = jest.spyOn(
-        MouseEvent.prototype,
-        'preventDefault',
-      );
-
-      expect(handleMouseDown(editorView, event)).toEqual(true);
-      expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should return false & not prevent default behaviour for editor content area: ak-editor-content-area', () => {
-      const { editorView } = editor(
-        doc(table()(tr(td({})(p())), tr(td({})(p())), tr(td({})(p())))),
-      );
-      const editorContentArea = document.createElement('div');
-      editorContentArea.className = 'ak-editor-content-area';
-      const event = new MouseEvent('mousedown');
-      Object.defineProperty(event, 'target', { value: editorContentArea });
-      const preventDefaultSpy = jest.spyOn(
-        MouseEvent.prototype,
-        'preventDefault',
-      );
-
-      expect(handleMouseDown(editorView, event)).toEqual(false);
-      expect(preventDefaultSpy).toHaveBeenCalledTimes(0);
-    });
-  });
-
-  describe('#handleMouseOut', () => {
-    describe('when the target is a resize handle column', () => {
-      it('should return true', () => {
-        const { editorView } = editor(
-          doc(table()(tr(tdCursor, tdEmpty), tr(td()(p('{o}')), tdEmpty))),
-        );
-        const firstCell = document.createElement('div');
-        firstCell.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
-
-        const spy = jest
-          .spyOn(MouseEvent.prototype, 'target', 'get')
-          .mockReturnValue(firstCell);
-
-        const event = new MouseEvent('opa');
-
-        expect(handleMouseOut(editorView, event)).toEqual(true);
-        spy.mockRestore();
-      });
-    });
-
-    describe('when the relatedTarget is a resize handle column too', () => {
-      it('should return false', () => {
-        const { editorView } = editor(
-          doc(table()(tr(tdCursor, tdEmpty), tr(td()(p('{o}')), tdEmpty))),
-        );
-        const firstCell = document.createElement('div');
-        firstCell.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
-        const secondCell = document.createElement('div');
-        secondCell.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
-
-        const spy = jest
-          .spyOn(MouseEvent.prototype, 'target', 'get')
-          .mockReturnValue(secondCell);
-
-        const event = new MouseEvent('opa', {
-          relatedTarget: firstCell,
-        });
-
-        expect(handleMouseOut(editorView, event)).toEqual(false);
-        spy.mockRestore();
-      });
-    });
-  });
-});
-
-describe('table event handlers', () => {
-  const createEditor = createProsemirrorEditorFactory();
-  const editor = (doc: DocBuilder) =>
-    createEditor({
-      doc,
-      attachTo: document.body,
-      preset: new Preset<LightEditorPlugin>()
-        .add([featureFlagsPlugin, {}])
-        .add([analyticsPlugin, {}])
-        .add(contentInsertionPlugin)
-        .add(decorationsPlugin)
-        .add(widthPlugin)
-        .add(guidelinePlugin)
-        .add(gridPlugin)
-        .add(selectionPlugin)
-        .add(tablePlugin),
-      pluginKey,
-    });
-
-  describe('#handleMouseOver', () => {
-    describe('when insert col/row button is hidden', () => {
-      it('should set table as hovered', () => {
-        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 event = {
-          target: editorView.dom.querySelector('td'),
-        };
-        expect(handleMouseOver(editorView, event as MouseEvent)).toEqual(true);
-      });
-    });
-
-    describe('when insert col/row button is visible', () => {
-      it('should call hideInsertColumnOrRowButton when moving to the first cell', () => {
-        const { editorView, refs } = editor(
-          doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-        );
-
-        showInsertColumnButton(0)(editorView.state, editorView.dispatch);
-
-        const firstCell = editorView.domAtPos(refs['<>']);
-        const event = {
-          target: firstCell.node,
-        };
-        expect(handleMouseOver(editorView, event as any)).toEqual(true);
-      });
-    });
-  });
-
-  describe('#handleMouseMove', () => {
-    describe('when resize decoration has been set', () => {
-      it('should return false', () => {
-        const { editorView, refs } = editor(
-          doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-        );
-        const { state, dispatch } = editorView;
-
-        addResizeHandleDecorations(0, 0, false)(state, dispatch);
-
-        const firstCell = editorView.domAtPos(refs['<>']);
-        const event = {
-          target: firstCell.node,
-        };
-        expect(handleMouseMove(editorView, event as any)).toEqual(false);
-      });
-    });
-  });
-});
-
-describe('withCellTracking', () => {
-  const createEditor = createProsemirrorEditorFactory();
-  const editor = (doc: DocBuilder, isDragAndDropEnabled = false) =>
-    createEditor({
-      doc,
-      attachTo: document.body,
-      featureFlags: {
-        tableDragAndDrop: isDragAndDropEnabled,
-      },
-      preset: new Preset<LightEditorPlugin>()
-        .add([featureFlagsPlugin, {}])
-        .add([analyticsPlugin, {}])
-        .add(contentInsertionPlugin)
-        .add(decorationsPlugin)
-        .add(widthPlugin)
-        .add(guidelinePlugin)
-        .add(gridPlugin)
-        .add(selectionPlugin)
-        .add([
-          tablePlugin,
-          {
-            tableOptions: { advanced: true },
-          },
-        ]),
-      pluginKey,
-    });
-
-  describe('should fire event handler passed in', () => {
-    const { editorView } = editor(
-      doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-      true,
-    );
-    const eventHandlerSpy = jest.fn();
-    withCellTracking(eventHandlerSpy)(editorView, {} as any);
-
-    expect(eventHandlerSpy).toHaveBeenCalled();
-  });
-
-  it('should correctly set table cell coordinates based on mouse location', () => {
-    const { editorView, refs } = editor(
-      doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-      true,
-    );
-    const firstCell = editorView.domAtPos(refs['<>']);
-
-    const event = {
-      target: firstCell.node,
-    };
-
-    withCellTracking(jest.fn())(editorView, event as any);
-
-    const pluginState = getPluginState(editorView.state);
-    expect(pluginState.hoveredCell).toEqual({
-      colIndex: undefined,
-      rowIndex: undefined,
-    });
-  });
-});

package/src/__tests__/unit/fix-tables.ts

@@ -1,164 +0,0 @@
-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,
-  th,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import tablePlugin from '../../plugin';
-import { pluginKey as tablePluginKey } from '../../pm-plugins/plugin-key';
-import type { PluginConfig } from '../../types';
-
-const TABLE_LOCAL_ID = 'test-table-local-id';
-
-describe('fix tables', () => {
-  const createEditor = createProsemirrorEditorFactory();
-  // @ts-ignore
-  global['fetch'] = jest.fn();
-
-  const editor = (doc: DocBuilder) => {
-    const tableOptions = {
-      allowNumberColumn: true,
-      allowHeaderRow: true,
-      allowHeaderColumn: true,
-      permittedLayouts: 'all',
-      allowColumnResizing: true,
-    } as PluginConfig;
-
-    return createEditor({
-      doc,
-      attachTo: document.body,
-      preset: new Preset<LightEditorPlugin>()
-        .add([featureFlagsPlugin, {}])
-        .add([analyticsPlugin, {}])
-        .add(contentInsertionPlugin)
-        .add(widthPlugin)
-        .add(guidelinePlugin)
-        .add(selectionPlugin)
-        .add([tablePlugin, { tableOptions }]),
-      pluginKey: tablePluginKey,
-    });
-  };
-
-  describe('removeExtraneousColumnWidths', () => {
-    it('removes unnecessary column widths', () => {
-      const { editorView } = editor(
-        doc(
-          table({ localId: TABLE_LOCAL_ID })(
-            tr(
-              th({ colwidth: [100, 100] })(p('{<>}1')),
-              th({ colwidth: [100, 100] })(p('2')),
-              th({ colwidth: [480] })(p('3')),
-            ),
-            tr(
-              td({ colwidth: [100, 100] })(p('4')),
-              td({ colwidth: [100, 100] })(p('5')),
-              td({ colwidth: [480] })(p('6')),
-            ),
-          ),
-        ),
-      );
-
-      expect(editorView.state.doc).toEqualDocument(
-        doc(
-          table({ localId: TABLE_LOCAL_ID })(
-            tr(
-              th({ colwidth: [100] })(p('1')),
-              th({ colwidth: [100] })(p('2')),
-              th({ colwidth: [480] })(p('3')),
-            ),
-            tr(
-              td({ colwidth: [100] })(p('4')),
-              td({ colwidth: [100] })(p('5')),
-              td({ colwidth: [480] })(p('6')),
-            ),
-          ),
-        ),
-      );
-    });
-  });
-
-  describe('cells with negative rowSpan', () => {
-    const TABLE_LOCAL_ID = 'test-table-2';
-    const SPAN_VALUE = -2;
-    it('should fire v3 analytics', () => {
-      const { dispatchAnalyticsEvent } = editor(
-        doc(
-          table({ localId: TABLE_LOCAL_ID })(
-            tr(
-              td({ rowspan: SPAN_VALUE })(p('')),
-              td({})(p('')),
-              td({})(p('')),
-            ),
-            tr(td({})(p('')), td({})(p('')), td({})(p(''))),
-          ),
-        ),
-      );
-
-      expect(dispatchAnalyticsEvent).toHaveBeenCalledWith(
-        expect.objectContaining({
-          action: 'invalidDocumentEncountered',
-          actionSubject: 'editor',
-          attributes: expect.objectContaining({
-            nodeType: 'tableCell',
-            reason: 'rowspan: negative value',
-            tableLocalId: TABLE_LOCAL_ID,
-            spanValue: SPAN_VALUE,
-          }),
-          eventType: 'operational',
-        }),
-      );
-    });
-  });
-
-  describe('cells with negative colSpan', () => {
-    const TABLE_LOCAL_ID = 'test-table-3';
-    const SPAN_VALUE = -2;
-    it('should fire v3 analytics', () => {
-      const { dispatchAnalyticsEvent } = editor(
-        doc(
-          table({ localId: TABLE_LOCAL_ID })(
-            tr(
-              td({ colspan: SPAN_VALUE })(p('')),
-              td({})(p('')),
-              td({})(p('')),
-            ),
-            tr(td({})(p('')), td({})(p('')), td({})(p(''))),
-          ),
-        ),
-      );
-
-      expect(dispatchAnalyticsEvent).toHaveBeenCalledWith(
-        expect.objectContaining({
-          action: 'invalidDocumentEncountered',
-          actionSubject: 'editor',
-          attributes: expect.objectContaining({
-            nodeType: 'tableCell',
-            reason: 'colspan: negative value',
-            tableLocalId: TABLE_LOCAL_ID,
-            spanValue: SPAN_VALUE,
-          }),
-          eventType: 'operational',
-        }),
-      );
-    });
-  });
-});