@atlaskit/editor-plugin-table 0.0.6 → 0.0.8

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

@@ -0,0 +1,106 @@
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+  LightEditorPlugin,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  table,
+  tr,
+  tdEmpty,
+  tdCursor,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { TablePluginState } from '../../../plugins/table/types';
+import { whenTableInFocus } from '../../../plugins/table/event-handlers';
+import { setDragging } from '../../../plugins/table/pm-plugins/table-resizing/commands';
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+import tablePlugin from '../../../plugins/table-plugin';
+import { PluginKey } from 'prosemirror-state';
+
+describe('event-handlers', () => {
+  let editor: any;
+
+  describe('#whenTableInFocus', () => {
+    describe('when allowColumnResizing is false', () => {
+      beforeEach(() => {
+        const createEditor = createProsemirrorEditorFactory();
+        const preset = new Preset<LightEditorPlugin>().add([
+          tablePlugin,
+          { tableOptions: { allowColumnResizing: false } },
+        ]);
+        editor = (doc: DocBuilder) =>
+          createEditor<TablePluginState, PluginKey>({
+            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([
+          tablePlugin,
+          { tableOptions: { allowColumnResizing: false } },
+        ]);
+        editor = (doc: DocBuilder) =>
+          createEditor<TablePluginState, PluginKey>({
+            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

@@ -0,0 +1,202 @@
+import { MediaAttributes } from '@atlaskit/adf-schema';
+import { TextSelection } from 'prosemirror-state';
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  doc,
+  table,
+  td,
+  tr,
+  tdEmpty,
+  thEmpty,
+  tdCursor,
+  DocBuilder,
+  media,
+  mediaGroup,
+  p,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { TablePluginState } from '../../plugins/table/types';
+import {
+  handleMouseOver,
+  handleMouseMove,
+  handleClick,
+} from '../../plugins/table/event-handlers';
+import {
+  showInsertColumnButton,
+  addResizeHandleDecorations,
+} from '../../plugins/table/commands';
+import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
+import tablePlugin from '../../plugins/table-plugin';
+
+describe('table event handlers', () => {
+  const createEditor = createEditorFactory<TablePluginState>();
+  const fakeGetEditorFeatureFlags = () => ({});
+  const editor = (doc: DocBuilder) =>
+    createEditor({
+      doc,
+      editorProps: {
+        allowTables: false,
+        media: {
+          allowMediaSingle: true,
+          allowMediaGroup: true,
+        },
+        dangerouslyAppendPlugins: {
+          __plugins: [tablePlugin()],
+        },
+      },
+      pluginKey,
+    });
+
+  describe('#handleMouseOver', () => {
+    describe('when insert col/row button is hidden', () => {
+      it('should return false', () => {
+        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(false);
+      });
+    });
+
+    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)(state, dispatch);
+
+        const firstCell = editorView.domAtPos(refs['<>']);
+        const event = {
+          target: firstCell.node,
+        };
+        expect(
+          handleMouseMove(fakeGetEditorFeatureFlags)(editorView, event as any),
+        ).toEqual(false);
+      });
+    });
+  });
+
+  describe('#handleClick', () => {
+    describe('clicking on media group node', () => {
+      describe('when on last cell of middle row', () => {
+        describe('when last element is media group node', () => {
+          it('should insert a new paragraph node', () => {
+            const testCollectionName = 'media-plugin-mock-collection-random-id';
+            const fileId = 'random-id';
+            const mediaAttrs: MediaAttributes = {
+              id: fileId,
+              type: 'file',
+              collection: testCollectionName,
+            };
+            const tableAttrs = { localId: 'table' };
+
+            const { editorView } = editor(
+              doc(
+                table(tableAttrs)(
+                  tr(thEmpty, thEmpty, thEmpty),
+                  tr(tdEmpty, tdEmpty, td()(mediaGroup(media(mediaAttrs)()))),
+                  tr(tdEmpty, tdEmpty, tdEmpty),
+                ),
+              ),
+            );
+
+            const firstCell = editorView.domAtPos(27);
+            const event = {
+              target: firstCell.node,
+            };
+            expect(handleClick(editorView, event as any)).toEqual(true);
+
+            expect(editorView.state.doc).toEqualDocument(
+              doc(
+                table(tableAttrs)(
+                  tr(thEmpty, thEmpty, thEmpty),
+                  tr(
+                    tdEmpty,
+                    tdEmpty,
+                    td()(mediaGroup(media(mediaAttrs)()), p()),
+                  ),
+                  tr(tdEmpty, tdEmpty, tdEmpty),
+                ),
+              ),
+            );
+          });
+        });
+
+        describe('when last element is not media group node', () => {
+          it('should not insert a new paragraph node', () => {
+            const testCollectionName = 'media-plugin-mock-collection-random-id';
+            const fileId = 'random-id';
+            const mediaAttrs: MediaAttributes = {
+              id: fileId,
+              type: 'file',
+              collection: testCollectionName,
+            };
+            const tableAttrs = { localId: 'table' };
+
+            const { editorView } = editor(
+              doc(
+                table(tableAttrs)(
+                  tr(thEmpty, thEmpty, thEmpty),
+                  tr(
+                    tdEmpty,
+                    tdEmpty,
+                    td()(mediaGroup(media(mediaAttrs)()), p()),
+                  ),
+                  tr(tdEmpty, tdEmpty, tdEmpty),
+                ),
+              ),
+            );
+
+            const firstCell = editorView.domAtPos(27);
+            const event = {
+              target: firstCell.node,
+            };
+            expect(handleClick(editorView, event as any)).toEqual(true);
+
+            expect(editorView.state.doc).toEqualDocument(
+              doc(
+                table(tableAttrs)(
+                  tr(thEmpty, thEmpty, thEmpty),
+                  tr(
+                    tdEmpty,
+                    tdEmpty,
+                    td()(mediaGroup(media(mediaAttrs)()), p()),
+                  ),
+                  tr(tdEmpty, tdEmpty, tdEmpty),
+                ),
+              ),
+            );
+          });
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,156 @@
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  doc,
+  p,
+  table,
+  tr,
+  td,
+  th,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { TablePluginState, PluginConfig } from '../../plugins/table/types';
+
+import { pluginKey as tablePluginKey } from '../../plugins/table/pm-plugins/plugin-key';
+import tablePlugin from '../../plugins/table-plugin';
+const TABLE_LOCAL_ID = 'test-table-local-id';
+
+describe('fix tables', () => {
+  const createEditor = createEditorFactory<TablePluginState>();
+  // @ts-ignore
+  global['fetch'] = jest.fn();
+  const createAnalyticsEvent = jest.fn();
+
+  afterEach(() => {
+    createAnalyticsEvent.mockReset();
+  });
+
+  const editor = (doc: DocBuilder) => {
+    const tableOptions = {
+      allowNumberColumn: true,
+      allowHeaderRow: true,
+      allowHeaderColumn: true,
+      permittedLayouts: 'all',
+      allowColumnResizing: true,
+    } as PluginConfig;
+
+    return createEditor({
+      doc,
+      editorProps: {
+        dangerouslyAppendPlugins: {
+          __plugins: [
+            tablePlugin({
+              tableOptions,
+            }),
+          ],
+        },
+        allowAnalyticsGASV3: true,
+      },
+      pluginKey: tablePluginKey,
+      createAnalyticsEvent,
+    });
+  };
+
+  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', () => {
+      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(createAnalyticsEvent).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', () => {
+      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(createAnalyticsEvent).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',
+        }),
+      );
+    });
+  });
+});

package/src/__tests__/unit/floating-toolbar.ts

@@ -0,0 +1,95 @@
+// TODO: still broken
+import { PluginConfig } from '../../plugins/table/types';
+import { setTextSelection } from '@atlaskit/editor-common/utils';
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  doc,
+  p,
+  table,
+  tr,
+  td,
+  th,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import {
+  FloatingToolbarPluginState,
+  pluginKey as floatingToolbarPluginKey,
+} from '@atlaskit/editor-core/src/plugins/floating-toolbar';
+import { setEditorFocus } from '../../plugins/table/commands';
+import { EditorState } from 'prosemirror-state';
+import tablePlugin from '../../plugins/table-plugin';
+
+describe('table floating toolbar', () => {
+  const createEditor = createEditorFactory();
+
+  const editor = (doc: DocBuilder) => {
+    const tableOptions = {
+      allowNumberColumn: true,
+      allowHeaderRow: true,
+      allowHeaderColumn: true,
+      permittedLayouts: 'all',
+    } as PluginConfig;
+
+    return createEditor({
+      doc,
+      editorProps: {
+        dangerouslyAppendPlugins: {
+          __plugins: [tablePlugin({ tableOptions })],
+        },
+      },
+    });
+  };
+
+  describe('when selecting a cell', () => {
+    it('should contain the floating toolbar info within the first dispatch', () => {
+      const { editorView, onEditorViewStateUpdatedCallbacks } = editor(
+        doc(
+          p('te{<>}xt'),
+          table()(
+            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')),
+            ),
+          ),
+        ),
+      );
+
+      setEditorFocus(true)(editorView.state, editorView.dispatch);
+      setTextSelection(editorView, 5);
+
+      const pluginStates: Array<{ config: any } | null | undefined> = [];
+
+      const mock = jest.fn(
+        ({ newEditorState }: { newEditorState: EditorState }) => {
+          const { getConfigWithNodeInfo } = floatingToolbarPluginKey.getState(
+            newEditorState,
+          ) as FloatingToolbarPluginState;
+          pluginStates.push(getConfigWithNodeInfo(editorView.state));
+        },
+      );
+
+      onEditorViewStateUpdatedCallbacks.push({
+        pluginName: 'listener',
+        callback: mock,
+      });
+      setTextSelection(editorView, 9);
+
+      expect(pluginStates).toHaveLength(2);
+      // Inner dispatch for #findTable
+      const firstCall = pluginStates[0];
+      expect(firstCall).toBeTruthy();
+      expect(firstCall!.config).toBeTruthy();
+
+      // Outer dispatch for selection change
+      const secondCall = pluginStates[1];
+      expect(secondCall).toBeTruthy();
+      expect(secondCall!.config).toBeTruthy();
+    });
+  });
+});

package/src/__tests__/unit/handlers.ts

@@ -0,0 +1,81 @@
+import { PluginKey, TextSelection } from 'prosemirror-state';
+
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+  LightEditorPlugin,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  table,
+  tr,
+  tdEmpty,
+  tdCursor,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { TablePluginState } from '../../plugins/table/types';
+import { handleDocOrSelectionChanged } from '../../plugins/table/handlers';
+import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
+import { defaultTableSelection } from '../../plugins/table/pm-plugins/default-table-selection';
+import tablePlugin from '../../plugins/table-plugin';
+
+describe('table action handlers', () => {
+  let editor: any;
+  let defaultPluginState: any;
+
+  beforeEach(() => {
+    const createEditor = createProsemirrorEditorFactory();
+    const preset = new Preset<LightEditorPlugin>().add(tablePlugin);
+
+    editor = (doc: DocBuilder) =>
+      createEditor<TablePluginState, PluginKey>({
+        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,
+      });
+    });
+  });
+});