@atlaskit/editor-plugin-table 0.1.0 → 0.1.2

package/src/__tests__/unit/copy-paste.ts

@@ -49,14 +49,12 @@ const array = (...args: any): Node[] => args.map((i: any) => i(defaultSchema));
 const fragment = (...args: any) =>
   Fragment.from(args.map((i: any) => i(defaultSchema)));
 
-const selectCell = (cell: {
-  pos: number;
-  start: number;
-  node: ProsemirrorNode;
-}) => (tr: Transaction) => {
-  const $anchor = tr.doc.resolve(cell.pos);
-  return tr.setSelection(new CellSelection($anchor, $anchor) as any);
-};
+const selectCell =
+  (cell: { pos: number; start: number; node: ProsemirrorNode }) =>
+  (tr: Transaction) => {
+    const $anchor = tr.doc.resolve(cell.pos);
+    return tr.setSelection(new CellSelection($anchor, $anchor) as any);
+  };
 
 const copySelectionAndPasteAtPos = ({
   editorView,

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

@@ -1,6 +1,5 @@
 import { MediaAttributes } from '@atlaskit/adf-schema';
 import { TextSelection } from 'prosemirror-state';
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
 import {
   createProsemirrorEditorFactory,
   LightEditorPlugin,
@@ -19,7 +18,6 @@ import {
   mediaGroup,
   p,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { TablePluginState } from '../../plugins/table/types';
 import {
   handleMouseOver,
   handleMouseMove,
@@ -36,6 +34,7 @@ import {
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import { TableCssClassName as ClassName } from '../../plugins/table/types';
 import tablePlugin from '../../plugins/table-plugin';
+import mediaPlugin from '@atlaskit/editor-core/src/plugins/media';
 
 describe('table plugin: decorations', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -148,21 +147,19 @@ describe('table plugin: decorations', () => {
 });
 
 describe('table event handlers', () => {
-  const createEditor = createEditorFactory<TablePluginState>();
+  const createEditor = createProsemirrorEditorFactory();
   const fakeGetEditorFeatureFlags = () => ({});
   const editor = (doc: DocBuilder) =>
     createEditor({
       doc,
-      editorProps: {
-        allowTables: false,
-        media: {
+      attachTo: document.body,
+      preset: new Preset<LightEditorPlugin>().add(tablePlugin).add([
+        mediaPlugin,
+        {
           allowMediaSingle: true,
           allowMediaGroup: true,
         },
-        dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin()],
-        },
-      },
+      ]),
       pluginKey,
     });
 

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

@@ -1,4 +1,8 @@
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   p,
@@ -8,21 +12,17 @@ import {
   th,
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { TablePluginState, PluginConfig } from '../../plugins/table/types';
+import { 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>();
+  const createEditor = createProsemirrorEditorFactory();
   // @ts-ignore
   global['fetch'] = jest.fn();
-  const createAnalyticsEvent = jest.fn();
-
-  afterEach(() => {
-    createAnalyticsEvent.mockReset();
-  });
 
   const editor = (doc: DocBuilder) => {
     const tableOptions = {
@@ -35,18 +35,12 @@ describe('fix tables', () => {
 
     return createEditor({
       doc,
-      editorProps: {
-        dangerouslyAppendPlugins: {
-          __plugins: [
-            tablePlugin({
-              tableOptions,
-            }),
-          ],
-        },
-        allowAnalyticsGASV3: true,
-      },
+      attachTo: document.body,
+      preset: new Preset<LightEditorPlugin>().add([
+        tablePlugin,
+        { tableOptions },
+      ]),
       pluginKey: tablePluginKey,
-      createAnalyticsEvent,
     });
   };
 
@@ -92,7 +86,7 @@ describe('fix tables', () => {
     const TABLE_LOCAL_ID = 'test-table-2';
     const SPAN_VALUE = -2;
     it('should fire v3 analytics', () => {
-      editor(
+      const { dispatchAnalyticsEvent } = editor(
         doc(
           table({ localId: TABLE_LOCAL_ID })(
             tr(
@@ -105,7 +99,7 @@ describe('fix tables', () => {
         ),
       );
 
-      expect(createAnalyticsEvent).toHaveBeenCalledWith(
+      expect(dispatchAnalyticsEvent).toHaveBeenCalledWith(
         expect.objectContaining({
           action: 'invalidDocumentEncountered',
           actionSubject: 'editor',
@@ -125,7 +119,7 @@ describe('fix tables', () => {
     const TABLE_LOCAL_ID = 'test-table-3';
     const SPAN_VALUE = -2;
     it('should fire v3 analytics', () => {
-      editor(
+      const { dispatchAnalyticsEvent } = editor(
         doc(
           table({ localId: TABLE_LOCAL_ID })(
             tr(
@@ -138,7 +132,7 @@ describe('fix tables', () => {
         ),
       );
 
-      expect(createAnalyticsEvent).toHaveBeenCalledWith(
+      expect(dispatchAnalyticsEvent).toHaveBeenCalledWith(
         expect.objectContaining({
           action: 'invalidDocumentEncountered',
           actionSubject: 'editor',

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

@@ -65,11 +65,6 @@ describe('getToolbarConfig', () => {
     return button;
   };
 
-  /**
-   * Use `createEditorFactory` here to enable referentiality as
-   * `createProsemirrorEditorFactory` has some issues with correctly mimicking
-   * old state for the unique localId plugin
-   */
   const createEditorFn = createProsemirrorEditorFactory();
   const createEditor = (doc: DocBuilder) => {
     const output = createEditorFn({

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

@@ -26,11 +26,7 @@ import {
   hoverRows,
   hoverTable,
 } from '../../plugins/table/commands';
-import {
-  TableDecorations,
-  TableCssClassName as ClassName,
-  TablePluginState,
-} from '../../plugins/table/types';
+import { TableDecorations, TablePluginState } from '../../plugins/table/types';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import { getDecorations } from '../../plugins/table/pm-plugins/decorations/plugin';
 import tablePlugin from '../../plugins/table-plugin';
@@ -130,51 +126,6 @@ describe('table hover selection plugin', () => {
             // selection spans 2 cells in the selected column (because we have 2 rows in the table)
             expect(decos).toHaveLength(2);
           });
-
-          it('should apply the hovered column class', () => {
-            hoverColumns([column])(editorView.state, editorView.dispatch);
-
-            const decos = getTableDecorations(
-              editorView,
-              getCellsInColumn(column)(editorView.state.selection)!,
-              TableDecorations.ALL_CONTROLS_HOVER,
-            );
-
-            decos.forEach((deco) => {
-              expect(deco).toEqual(
-                expect.objectContaining({
-                  type: expect.objectContaining({
-                    attrs: expect.objectContaining({
-                      class: expect.stringContaining(ClassName.HOVERED_COLUMN),
-                    }),
-                  }),
-                }),
-              );
-            });
-          });
-
-          it('can apply the danger class to the decoration', () => {
-            hoverColumns([column], true)(editorView.state, editorView.dispatch);
-
-            const decos = getTableDecorations(
-              editorView,
-              getCellsInColumn(column)(editorView.state.selection)!,
-              TableDecorations.ALL_CONTROLS_HOVER,
-            );
-
-            expect(decos).toHaveLength(2);
-            const expected = [
-              ClassName.HOVERED_CELL_IN_DANGER,
-              ClassName.HOVERED_COLUMN,
-            ];
-
-            decos.forEach((deco) => {
-              // @ts-ignore
-              expect(deco.type.attrs.class.split(' ')).toEqual(
-                expect.arrayContaining(expected),
-              );
-            });
-          });
         },
       );
     });
@@ -224,22 +175,6 @@ describe('table hover selection plugin', () => {
             ),
           ).toHaveLength(2);
         });
-
-        it('can apply the danger class to the decoration', () => {
-          hoverRows([row], true)(editorView.state, editorView.dispatch);
-          const cells = getCellsInRow(row)(editorView.state.selection)!;
-          const decos = getTableDecorations(
-            editorView,
-            cells,
-            TableDecorations.ALL_CONTROLS_HOVER,
-          );
-
-          expect(decos).toHaveLength(2);
-          decos.forEach((deco) => {
-            // @ts-ignore
-            expect(deco.type.attrs.class.split(' ')).toContain('danger');
-          });
-        });
       });
     });
   });

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

@@ -72,7 +72,7 @@ describe.skip('TableView', () => {
     // 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 eventDispatcher = { on: () => {} } as unknown as EventDispatcher;
     const tableView = new TableView({
       node,
       allowColumnResizing: false,

package/src/__tests__/unit/index.ts

@@ -450,8 +450,8 @@ describe('table plugin', () => {
             );
 
             editorView.dispatch(selectColumn(column)(editorView.state.tr));
-            const selection = (editorView.state
-              .selection as any) as CellSelection;
+            const selection = editorView.state
+              .selection as any as CellSelection;
             const tableNode = selection.$anchorCell.node(-1);
             const map = TableMap.get(tableNode);
             const start = selection.$anchorCell.start(-1);
@@ -476,8 +476,8 @@ describe('table plugin', () => {
             );
 
             editorView.dispatch(selectRow(row)(editorView.state.tr));
-            const selection = (editorView.state
-              .selection as any) as CellSelection;
+            const selection = editorView.state
+              .selection as any as CellSelection;
             const anchor = selection.$anchorCell.index(-1);
             const head = selection.$headCell.index(-1);
             expect(anchor).toEqual(row);
@@ -496,7 +496,7 @@ describe('table plugin', () => {
       );
 
       editorView.dispatch(selectTable(editorView.state.tr));
-      const selection = (editorView.state.selection as any) as CellSelection;
+      const selection = editorView.state.selection as any as CellSelection;
       expect(selection.isRowSelection()).toEqual(true);
       expect(selection.isColSelection()).toEqual(true);
     });

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { mount, ReactWrapper, shallow } from 'enzyme';
 import { replaceRaf } from 'raf-stub';
-
+import { render } from '@testing-library/react';
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
 import tablePlugin from '../../../plugins/table-plugin';
 import {
@@ -13,7 +12,6 @@ import {
   tdEmpty,
   tdCursor,
   DocBuilder,
-  thEmpty,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import { findTable, selectTable } from '@atlaskit/editor-tables/utils';
 import {
@@ -21,15 +19,10 @@ import {
   TablePluginState,
 } from '../../../plugins/table/types';
 import TableComponent from '../../../plugins/table/nodeviews/TableComponent';
-import { OverflowShadowsObserver } from '../../../plugins/table/nodeviews/OverflowShadowsObserver';
+
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { toggleNumberColumn } from '../../../plugins/table/commands';
-import {
-  pluginKey as stickyHeadersPluginKey,
-  StickyPluginState,
-} from '../../../plugins/table/pm-plugins/sticky-headers';
-import { tablesHaveDifferentColumnWidths } from '../../../plugins/table/utils/nodes';
 
 jest.mock('../../../plugins/table/utils/nodes', () =>
   Object.assign({}, jest.requireActual('../../../plugins/table/utils/nodes'), {
@@ -37,17 +30,12 @@ jest.mock('../../../plugins/table/utils/nodes', () =>
   }),
 );
 
-// with this jest will load mocked class from the relative __mocks__ folder
-jest.mock('../../../plugins/table/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 },
@@ -65,7 +53,6 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
       pluginKey,
     });
   };
-  //
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -165,224 +152,30 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
 
       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(
+      const { container } = render(
         <TableComponent
           view={view}
           eventDispatcher={
-            ({
-              on: (key: string, action: Function) => {
-                triggerDispatcherEvent[key] = action;
-              },
-              off: jest.fn(),
-            } as any) as EventDispatcher
+            { on: jest.fn(), off: jest.fn() } as unknown as EventDispatcher
           }
           // @ts-ignore
           containerWidth={{}}
-          pluginState={{
-            pluginConfig: {
-              allowControls: false,
-            },
-          }}
-          getPos={() => tablePos}
           getNode={getNode}
-          node={tableF!.node}
-          contentDOM={(wrapper: HTMLElement | null) => {
+          contentDOM={(contentElement: HTMLElement | null) => {
             const node = view.dom.getElementsByTagName('table')[0];
 
-            if (!wrapper?.firstChild) {
-              wrapper?.appendChild(node);
+            if (!contentElement?.firstChild) {
+              contentElement?.appendChild(node);
             }
           }}
           getEditorFeatureFlags={getEditorFeatureFlags}
+          {...props}
         />,
       );
-
-      return { wrapper, view };
-    }
-
-    describe('with optimization 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 optimization 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}
-        />,
+      const controlsContainer = container.querySelector(
+        `.${ClassName.WITH_CONTROLS}`,
       );
-      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();
+      expect(!!controlsContainer).toBe(expected);
     });
   });
 });

package/src/__tests__/unit/nodeviews/cell.ts

@@ -2,7 +2,11 @@ import {
   setCellAttrs,
   findCellClosestToPos,
 } from '@atlaskit/editor-tables/utils';
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   p,
@@ -19,13 +23,14 @@ import {
   rgbToHex,
   uuid,
 } from '@atlaskit/adf-schema';
-import { TablePluginState, PluginConfig } from '../../../plugins/table/types';
+import { PluginConfig } from '../../../plugins/table/types';
 import { mergeCells } from '../../../plugins/table/transforms';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import TableCellViews from '../../../plugins/table/nodeviews/tableCell';
 import sendKeyToPm from '@atlaskit/editor-test-helpers/send-key-to-pm';
 import * as domHelpers from '../../../plugins/table/pm-plugins/sticky-headers/nodeviews/dom';
 import tablePlugin from '../../../plugins/table-plugin';
+import undoRedoPlugin from '@atlaskit/editor-core/src/plugins/undo-redo';
 
 jest.mock('@atlaskit/editor-common/utils', () => ({
   ...jest.requireActual<Object>('@atlaskit/editor-common/utils'),
@@ -36,18 +41,15 @@ jest.mock('@atlaskit/editor-common/utils', () => ({
 
 describe('table -> nodeviews -> tableCell.tsx', () => {
   const TABLE_LOCAL_ID = 'test-table-local-id';
-  const createEditor = createEditorFactory<TablePluginState>();
+  const createEditor = createProsemirrorEditorFactory();
 
   const editor = (doc: DocBuilder, props?: PluginConfig) =>
     createEditor({
       doc,
-      editorProps: {
-        dangerouslyAppendPlugins: {
-          __plugins: [
-            tablePlugin({ tableOptions: { advanced: true, ...props } }),
-          ],
-        },
-      },
+      attachTo: document.body,
+      preset: new Preset<LightEditorPlugin>()
+        .add([tablePlugin, { tableOptions: { advanced: true, ...props } }])
+        .add(undoRedoPlugin),
       pluginKey,
     });