@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/src/plugins/table/__tests__/unit/nodeviews/TableComponent.tsx

@@ -0,0 +1,388 @@
+import React from 'react';
+import { mount, ReactWrapper, shallow } from 'enzyme';
+import { replaceRaf } from 'raf-stub';
+
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import tablePlugin from '../../../../table';
+import {
+  doc,
+  p,
+  table,
+  tr,
+  td,
+  tdEmpty,
+  tdCursor,
+  DocBuilder,
+  thEmpty,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { findTable, selectTable } from '@atlaskit/editor-tables/utils';
+import {
+  TableCssClassName as ClassName,
+  TablePluginState,
+} from '../../../types';
+import TableComponent from '../../../nodeviews/TableComponent';
+import { OverflowShadowsObserver } from '../../../nodeviews/OverflowShadowsObserver';
+import { pluginKey } from '../../../pm-plugins/plugin-key';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { toggleNumberColumn } from '../../../commands';
+import {
+  pluginKey as stickyHeadersPluginKey,
+  StickyPluginState,
+} from '../../../pm-plugins/sticky-headers';
+import { tablesHaveDifferentColumnWidths } from '../../../utils/nodes';
+
+jest.mock('../../../utils/nodes', () =>
+  Object.assign({}, jest.requireActual('../../../utils/nodes'), {
+    tablesHaveDifferentColumnWidths: jest.fn(),
+  }),
+);
+
+// with this jest will load mocked class from the relative __mocks__ folder
+jest.mock('../../../nodeviews/OverflowShadowsObserver');
+
+replaceRaf();
+const requestAnimationFrame = window.requestAnimationFrame as any;
+
+describe('table -> nodeviews -> TableComponent.tsx', () => {
+  const createEditor = createEditorFactory<TablePluginState>();
+  //
+  const getEditorFeatureFlags = jest.fn();
+  //
+  const editor = (
+    doc: DocBuilder,
+    featureFlags?: { [featureFlag: string]: string | boolean },
+  ) => {
+    getEditorFeatureFlags.mockReturnValue(featureFlags || {});
+    return createEditor({
+      doc,
+      editorProps: {
+        allowTables: false,
+        dangerouslyAppendPlugins: {
+          __plugins: [tablePlugin()],
+        },
+        featureFlags,
+      },
+      pluginKey,
+    });
+  };
+  //
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('when the table is selected', () => {
+    it('should add table selected css class', () => {
+      const { editorView } = editor(
+        doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdCursor))),
+        {
+          tableCellOptimization: true,
+          tableRenderOptimization: true,
+          stickyHeadersOptimization: true,
+          initialRenderOptimization: true,
+        },
+      );
+      const { state, dispatch } = editorView;
+      dispatch(selectTable(state.tr));
+      requestAnimationFrame.step();
+      const tableContainer = document.querySelector(
+        `.${ClassName.TABLE_CONTAINER}`,
+      );
+      expect(
+        tableContainer!.classList.contains(ClassName.TABLE_SELECTED),
+      ).toBeTruthy();
+    });
+  });
+
+  describe('when the numbered column attribute is changed', () => {
+    it('should not resize the columns', () => {
+      const { editorView } = editor(
+        doc(
+          table({ isNumberColumnEnabled: false, layout: 'default' })(
+            tr(
+              td({ colwidth: [1400] })(p('{<>}')),
+              td({ colwidth: [48] })(p()),
+              td({ colwidth: [48] })(p()),
+            ),
+          ),
+        ),
+      );
+      const { state, dispatch } = editorView;
+      const tableCell = state.schema.nodes.tableCell;
+      const columnWidths: number[][] = [];
+
+      toggleNumberColumn(state, dispatch);
+      requestAnimationFrame.step();
+
+      editorView.state.doc.nodesBetween(3, 14, (node) => {
+        if (node.type === tableCell) {
+          columnWidths.push(node.attrs.colwidth);
+        }
+
+        return node.type !== tableCell;
+      });
+
+      expect(columnWidths).toEqual([[1400], [48], [48]]);
+    });
+  });
+
+  describe('WITH_CONTROLS css class', () => {
+    it.each<[string, object, boolean]>([
+      [
+        'is added when allowControls is set',
+        {
+          allowControls: true,
+          tableActive: true,
+        },
+        true,
+      ],
+      [
+        'is added by default when allowControls is not provided',
+        {
+          tableActive: true,
+        },
+        true,
+      ],
+      [
+        'is not added when allowControls is false',
+        {
+          allowControls: false,
+          tableActive: true,
+        },
+        false,
+      ],
+      [
+        'is not added when table is not active',
+        {
+          allowControls: true,
+          tableActive: false,
+        },
+        false,
+      ],
+    ])('%s', (_, props, expected) => {
+      const { editorView: view } = editor(
+        doc(p('text'), table()(tr(td()(p('{<>}text')), tdEmpty, tdEmpty))),
+      );
+
+      const tableF = findTable(view.state.selection);
+      const getNode = () => tableF!.node;
+      const wrapper = shallow(
+        <TableComponent
+          view={view}
+          eventDispatcher={({ on: () => {} } as any) as EventDispatcher}
+          // @ts-ignore
+          containerWidth={{}}
+          // @ts-ignore
+          getNode={getNode}
+          getEditorFeatureFlags={getEditorFeatureFlags}
+          {...props}
+        />,
+      );
+
+      expect(wrapper.hasClass(ClassName.WITH_CONTROLS)).toBe(expected);
+    });
+  });
+
+  describe('overflowShadowOptimization', () => {
+    let overflowShadowsConstructorSpy = jest.fn();
+    let updateStickyShadowsSpy = jest.fn();
+    let observeCellsSpy = jest.fn();
+    let disposeSpy = jest.fn();
+    beforeAll(() => {
+      (OverflowShadowsObserver as any).setMock('observeCells', observeCellsSpy);
+      (OverflowShadowsObserver as any).setMock('dispose', disposeSpy);
+      (OverflowShadowsObserver as any).setMock(
+        'updateStickyShadows',
+        updateStickyShadowsSpy,
+      );
+      (OverflowShadowsObserver as any).setMock(
+        'constructor',
+        overflowShadowsConstructorSpy,
+      );
+    });
+
+    afterAll(() => {
+      (OverflowShadowsObserver as any).resetMocks();
+    });
+
+    let triggerDispatcherEvent: { [key: string]: any } = {};
+    const tablePos = 0;
+
+    function setupTable(tableOverflowShadowsOptimization: boolean = false) {
+      const editorData = editor(
+        doc(
+          table()(
+            tr(thEmpty, thEmpty, thEmpty),
+            tr(td()(p('{<>}text')), tdEmpty, tdEmpty),
+          ),
+        ),
+        {
+          tableOverflowShadowsOptimization,
+        },
+      );
+
+      const view = editorData.editorView;
+      const tableF = findTable(view.state.selection);
+
+      const getNode = () => view.state.doc.firstChild!;
+      const wrapper = mount(
+        <TableComponent
+          view={view}
+          eventDispatcher={
+            ({
+              on: (key: string, action: Function) => {
+                triggerDispatcherEvent[key] = action;
+              },
+              off: jest.fn(),
+            } as any) as EventDispatcher
+          }
+          // @ts-ignore
+          containerWidth={{}}
+          pluginState={{
+            pluginConfig: {
+              allowControls: false,
+            },
+          }}
+          getPos={() => tablePos}
+          getNode={getNode}
+          node={tableF!.node}
+          contentDOM={(wrapper: HTMLElement | null) => {
+            const node = view.dom.getElementsByTagName('table')[0];
+
+            if (!wrapper?.firstChild) {
+              wrapper?.appendChild(node);
+            }
+          }}
+          getEditorFeatureFlags={getEditorFeatureFlags}
+        />,
+      );
+
+      return { wrapper, view };
+    }
+
+    describe('with optimisation on', () => {
+      let wrapper: ReactWrapper;
+      beforeEach(() => {
+        wrapper = setupTable(true).wrapper;
+      });
+
+      it('inits overflow shadows observer', () => {
+        const tableWrapperNode = wrapper
+          .find(`.${ClassName.TABLE_NODE_WRAPPER}`)
+          .getDOMNode();
+        const tableNode = tableWrapperNode.querySelector('table');
+        wrapper.setProps({});
+        expect(overflowShadowsConstructorSpy).toHaveBeenCalledWith(
+          expect.any(Function),
+          tableNode,
+          tableWrapperNode,
+        );
+      });
+
+      it('observes table cells on component update', () => {
+        expect(observeCellsSpy).not.toHaveBeenCalled();
+        wrapper.setProps({});
+        expect(observeCellsSpy).toHaveBeenCalledTimes(1);
+      });
+
+      it('updates sticky shadows on sticky state changed', () => {
+        const newStickyState: StickyPluginState = [
+          {
+            pos: tablePos + 1,
+            top: 0,
+            padding: 10,
+            sticky: true,
+          },
+        ];
+        triggerDispatcherEvent[(stickyHeadersPluginKey as any).key](
+          newStickyState,
+        );
+        expect(updateStickyShadowsSpy).toHaveBeenCalled();
+      });
+
+      it('disposes shadows observer on unmount', () => {
+        wrapper.setProps({});
+        wrapper.unmount();
+        expect(disposeSpy).toHaveBeenCalled();
+      });
+    });
+
+    describe('with optimisation off', () => {
+      let wrapper: ReactWrapper;
+      beforeEach(() => {
+        wrapper = setupTable(false).wrapper;
+      });
+
+      it('does not init overflow shadows observer', () => {
+        wrapper.setProps({});
+        expect(overflowShadowsConstructorSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('when media fullscreen is changed', () => {
+    function setupTable(isMediaFullscreen: boolean) {
+      const editorData = editor(
+        doc(
+          table()(
+            tr(thEmpty, thEmpty, thEmpty),
+            tr(td()(p('{<>}text')), tdEmpty, tdEmpty),
+          ),
+        ),
+      );
+
+      const view = editorData.editorView;
+      const tableF = findTable(view.state.selection);
+      let triggerDispatcherEvent: { [key: string]: any } = {};
+      const getNode = () => view.state.doc.firstChild!;
+      const tablePos = 0;
+
+      const wrapper = mount(
+        <TableComponent
+          view={view}
+          eventDispatcher={
+            ({
+              on: (key: string, action: Function) => {
+                triggerDispatcherEvent[key] = action;
+              },
+              off: jest.fn(),
+            } as any) as EventDispatcher
+          }
+          // @ts-ignore
+          containerWidth={{}}
+          pluginState={{
+            pluginConfig: {
+              allowControls: false,
+            },
+          }}
+          getPos={() => tablePos}
+          getNode={getNode}
+          node={tableF!.node}
+          contentDOM={(wrapper: HTMLElement | null) => {
+            const node = view.dom.getElementsByTagName('table')[0];
+            if (!wrapper?.firstChild) {
+              wrapper?.appendChild(node);
+            }
+          }}
+          isMediaFullscreen={isMediaFullscreen}
+          allowColumnResizing={true}
+          getEditorFeatureFlags={getEditorFeatureFlags}
+        />,
+      );
+      return { wrapper, view };
+    }
+
+    it('when media is not fullscreen', () => {
+      const wrapper = setupTable(false).wrapper;
+      wrapper.setProps({});
+
+      expect(tablesHaveDifferentColumnWidths).toHaveBeenCalled();
+    });
+
+    it('when media is fullscreen', () => {
+      const wrapper = setupTable(true).wrapper;
+      wrapper.setProps({});
+
+      expect(tablesHaveDifferentColumnWidths).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/plugins/table/__tests__/unit/nodeviews/table.ts

@@ -0,0 +1,121 @@
+import { Node as PMNode } from 'prosemirror-model';
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  doc,
+  p,
+  table,
+  tr,
+  td,
+  tdEmpty,
+  tdCursor,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { TableAttributes } from '@atlaskit/adf-schema';
+import { TablePluginState } from '../../../../../plugins/table/types';
+import { pluginKey } from '../../../../../plugins/table/pm-plugins/plugin-key';
+import tablePlugin from '../../../../../plugins/table';
+import TableView from '../../../../../plugins/table/nodeviews/table';
+import defaultSchema from '@atlaskit/editor-test-helpers/schema';
+import type { EditorProps } from '@atlaskit/editor-core';
+import { EditorView } from 'prosemirror-view';
+import { hoverRows } from '../../../commands';
+
+describe('table -> nodeviews -> table.tsx', () => {
+  const createEditor = createEditorFactory<TablePluginState>();
+  const createTableNode = (attrs?: TableAttributes) => (...args: any) =>
+    table(attrs)(...args)(defaultSchema);
+
+  const editor = (doc: DocBuilder, props?: EditorProps) =>
+    createEditor({
+      doc,
+      editorProps: {
+        allowTables: false,
+        dangerouslyAppendPlugins: {
+          __plugins: [tablePlugin()],
+        },
+        ...props,
+      },
+      pluginKey,
+    });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('TableView', () => {
+    describe('with tableRenderOptimization', () => {
+      describe('on view update', () => {
+        let tableNode: PMNode,
+          tableNodeView: TableView,
+          renderSpy: jest.SpyInstance,
+          view: EditorView;
+        beforeEach(() => {
+          tableNode = createTableNode({
+            isNumberColumnEnabled: true,
+          })(tr(td()(p('{<>}text')), tdEmpty, tdEmpty));
+          const { editorView, portalProviderAPI, eventDispatcher } = editor(
+            doc(
+              p('text'),
+              table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty)),
+            ),
+            {
+              featureFlags: { tableRenderOptimization: true },
+            },
+          );
+          view = editorView;
+          tableNodeView = new TableView({
+            node: tableNode,
+            allowColumnResizing: false,
+            view: editorView,
+            portalProviderAPI,
+            eventDispatcher,
+            getPos: () => 1,
+            tableRenderOptimization: true,
+            getEditorContainerWidth: () => ({ width: 500 }),
+            getEditorFeatureFlags: () => ({}),
+          }).init();
+
+          renderSpy = jest.spyOn(tableNodeView, 'render');
+        });
+
+        it('does not rerender if attributes or table width did not change', () => {
+          const newNodeWithUnchangedAttributesOrWidth = createTableNode({
+            isNumberColumnEnabled: true,
+          })(tr(td()(p('{<>}text1')), tdEmpty, tdEmpty));
+          tableNodeView.update(newNodeWithUnchangedAttributesOrWidth, []);
+          expect(renderSpy).not.toHaveBeenCalled();
+        });
+
+        it('rerenders when table width changes', () => {
+          const newNodeWithUnchangedAttributesAndExtraColumn = createTableNode({
+            isNumberColumnEnabled: true,
+          })(tr(td()(p('{<>}text1')), tdEmpty, tdEmpty, tdEmpty));
+          tableNodeView.update(
+            newNodeWithUnchangedAttributesAndExtraColumn,
+            [],
+          );
+          expect(renderSpy).toHaveBeenCalled();
+        });
+
+        it('rerenders when attributes change', () => {
+          const newNodeWithChangedAttributes = createTableNode({
+            isNumberColumnEnabled: false,
+          })(tr(td()(p('{<>}text1')), tdEmpty));
+
+          tableNodeView.update(newNodeWithChangedAttributes, []);
+          expect(renderSpy).toHaveBeenCalled();
+        });
+
+        it('rerenders when hovered rows change but attributes dont change', () => {
+          const newNodeWithUnchangedAttributes = createTableNode({
+            isNumberColumnEnabled: true,
+          })(tr(td()(p('{<>}text1')), tdEmpty));
+
+          hoverRows([1])(view.state, view.dispatch);
+          tableNodeView.update(newNodeWithUnchangedAttributes, []);
+          expect(renderSpy).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+});

package/src/plugins/table/__tests__/unit/pm-plugins/decorations/column-controls.ts

@@ -0,0 +1,34 @@
+import { DecorationSet } from 'prosemirror-view';
+
+import {
+  doc,
+  table,
+  tdCursor,
+  tdEmpty,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { createEditorState } from '@atlaskit/editor-test-helpers/create-editor-state';
+
+import { buildColumnControlsDecorations } from '../../../../pm-plugins/decorations/utils';
+import { TableDecorations } from '../../../../types';
+
+describe('tables: column controls decorations', () => {
+  describe('#buildColumnControlsDecorations', () => {
+    const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
+    it(`should return a decorationSet with 2 ${decorationKey} type`, () => {
+      const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
+      const nextDecorationSet = buildColumnControlsDecorations({
+        decorationSet: DecorationSet.empty,
+        tr: state.tr,
+      });
+
+      const decorations = nextDecorationSet.find(
+        undefined,
+        undefined,
+        (spec: any) => spec.key.indexOf(decorationKey) > -1,
+      );
+
+      expect(decorations).toHaveLength(2);
+    });
+  });
+});

package/src/plugins/table/__tests__/unit/pm-plugins/decorations/column-resizing.ts

@@ -0,0 +1,152 @@
+import { PluginKey } from 'prosemirror-state';
+import { ContentNodeWithPos } from 'prosemirror-utils';
+import { getCellsInColumn } from '@atlaskit/editor-tables/utils';
+
+import { DecorationSet, EditorView } from 'prosemirror-view';
+
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  p,
+  table,
+  td,
+  tdCursor,
+  tdEmpty,
+  tr,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import tablePlugin from '../../../../../table';
+import {
+  hideResizeHandleLine,
+  showResizeHandleLine,
+} from '../../../../commands/hover';
+import { getDecorations } from '../../../../pm-plugins/decorations/plugin';
+import { buildColumnResizingDecorations } from '../../../../pm-plugins/decorations/utils';
+import { pluginKey } from '../../../../pm-plugins/plugin-key';
+import { TableDecorations, TablePluginState } from '../../../../types';
+
+describe('tables: column resizing decorations', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const getEditorFeatureFlags = () => ({});
+  const editor = (doc: DocBuilder) =>
+    createEditor<TablePluginState, PluginKey>({
+      doc,
+      preset: new Preset<LightEditorPlugin>().add([
+        tablePlugin,
+        { tableOptions: { allowColumnResizing: true }, getEditorFeatureFlags },
+      ]),
+      pluginKey,
+    });
+
+  const getTableDecorations = (
+    editorView: EditorView,
+    cells: Array<ContentNodeWithPos>,
+    key?: TableDecorations,
+  ) => {
+    const decorationSet = getDecorations(editorView.state);
+    if (key) {
+      const lastCell = cells[cells.length - 1];
+      return decorationSet.find(
+        cells[0].pos,
+        lastCell.pos + lastCell.node.nodeSize,
+        (spec) => spec.key.indexOf(key) > -1,
+      );
+    }
+
+    return decorationSet.find(cells[0].pos, cells[cells.length - 1].pos);
+  };
+
+  describe('#buildColumnResizingDecorations', () => {
+    describe.each([
+      [-1, TableDecorations.COLUMN_RESIZING_HANDLE, 0],
+      [0, TableDecorations.COLUMN_RESIZING_HANDLE, 0],
+      [1, TableDecorations.COLUMN_RESIZING_HANDLE, 1],
+    ])(
+      'when columnEndIndex is %i',
+      (columnEndIndex, decorationKey, expectedDecorations) => {
+        it(`should return a decorationSet with ${expectedDecorations} ${decorationKey} type`, () => {
+          const {
+            editorView: { state },
+          } = editor(doc(table()(tr(tdCursor, tdEmpty))));
+          const nextDecorationSet = buildColumnResizingDecorations(
+            columnEndIndex,
+          )({
+            decorationSet: DecorationSet.empty,
+            tr: state.tr,
+          });
+
+          const decorations = nextDecorationSet.find(
+            undefined,
+            undefined,
+            (spec) => spec.key.indexOf(decorationKey) > -1,
+          );
+
+          expect(decorations).toHaveLength(expectedDecorations);
+        });
+      },
+    );
+  });
+
+  describe('when the table has merged cells on first row', () => {
+    let editorView: EditorView;
+
+    beforeEach(() => {
+      const mountedEditor = editor(
+        doc(
+          p('text'),
+          table()(
+            tr(tdCursor, td({ colspan: 2 })(p(''))),
+            tr(td()(p('a1')), tdEmpty, tdEmpty),
+            tr(td()(p('a2')), tdEmpty, tdEmpty),
+          ),
+        ),
+      );
+
+      editorView = mountedEditor.editorView;
+    });
+
+    describe('when the showResizeHandleLine is dispatched', () => {
+      beforeEach(() => {
+        showResizeHandleLine({ left: 1, right: 2 })(
+          editorView.state,
+          editorView.dispatch,
+        );
+      });
+
+      it('should add resizer line decoration', () => {
+        const cells = getCellsInColumn(1)(editorView.state.selection)!;
+
+        const decor = getTableDecorations(
+          editorView,
+          cells,
+          TableDecorations.COLUMN_RESIZING_HANDLE_LINE,
+        );
+
+        expect(decor).toHaveLength(2);
+      });
+
+      describe('when the hideResizeHandleLine is dispatched', () => {
+        beforeEach(() => {
+          hideResizeHandleLine()(editorView.state, editorView.dispatch);
+        });
+
+        it('should remove resizer line decoration', () => {
+          const cells = getCellsInColumn(1)(editorView.state.selection)!;
+
+          const decor = getTableDecorations(
+            editorView,
+            cells,
+            TableDecorations.COLUMN_RESIZING_HANDLE_LINE,
+          );
+
+          expect(decor).toHaveLength(0);
+        });
+      });
+    });
+  });
+});