@atlaskit/editor-plugin-table 0.0.10 → 0.1.1

package/src/__tests__/unit/commands/sort.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,
@@ -12,11 +16,14 @@ import {
   status,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import { EditorView } from 'prosemirror-view';
-import { mentionResourceProvider } from '@atlaskit/util-data-test/mention-story-data';
 import { sortByColumn } from '../../../plugins/table/commands/sort';
 import { uuid } from '@atlaskit/adf-schema';
 import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
 import tablePlugin from '../../../plugins/table-plugin';
+import statusPlugin from '@atlaskit/editor-core/src/plugins/status';
+import mentionsPlugin from '@atlaskit/editor-core/src/plugins/mentions';
+import hyperlinkPlugin from '@atlaskit/editor-core/src/plugins/hyperlink';
+import datePlugin from '@atlaskit/editor-core/src/plugins/date';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -29,14 +36,13 @@ describe('Sort Table', () => {
     uuid.setStatic(false);
   });
 
-  const createEditor = createEditorFactory();
+  const createEditor = createProsemirrorEditorFactory();
   it('should test a basic table with heading', () => {
     const { editorView } = createEditor({
-      editorProps: {
-        dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ tableOptions: { allowHeaderRow: true } })],
-        },
-      },
+      preset: new Preset<LightEditorPlugin>().add([
+        tablePlugin,
+        { tableOptions: { allowHeaderRow: true } },
+      ]),
       doc: doc(
         table()(
           tr(th({})(p('Number{<>}'))),
@@ -62,11 +68,10 @@ describe('Sort Table', () => {
 
   it('should test a basic table descending', () => {
     const { editorView } = createEditor({
-      editorProps: {
-        dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ tableOptions: { allowHeaderRow: true } })],
-        },
-      },
+      preset: new Preset<LightEditorPlugin>().add([
+        tablePlugin,
+        { tableOptions: { allowHeaderRow: true } },
+      ]),
       doc: doc(
         table()(tr(td({})(p('2{<>}'))), tr(td({})(p('5'))), tr(td({})(p('4')))),
       ),
@@ -86,11 +91,10 @@ describe('Sort Table', () => {
 
   it('should test a basic table ascending', () => {
     const { editorView } = createEditor({
-      editorProps: {
-        dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ tableOptions: { allowHeaderRow: true } })],
-        },
-      },
+      preset: new Preset<LightEditorPlugin>().add([
+        tablePlugin,
+        { tableOptions: { allowHeaderRow: true } },
+      ]),
       doc: doc(
         table()(tr(td({})(p('2{<>}'))), tr(td({})(p('5'))), tr(td({})(p('4')))),
       ),
@@ -113,16 +117,12 @@ describe('Sort Table', () => {
 
     beforeEach(() => {
       ({ editorView } = createEditor({
-        editorProps: {
-          allowStatus: true,
-          allowDate: true,
-          dangerouslyAppendPlugins: {
-            __plugins: [
-              tablePlugin({ tableOptions: { allowHeaderRow: true } }),
-            ],
-          },
-          mentionProvider: Promise.resolve(mentionResourceProvider),
-        },
+        preset: new Preset<LightEditorPlugin>()
+          .add([tablePlugin, { tableOptions: { allowHeaderRow: true } }])
+          .add([statusPlugin, { menuDisabled: false }])
+          .add(mentionsPlugin)
+          .add(hyperlinkPlugin)
+          .add(datePlugin),
         doc: doc(
           table()(
             tr(th({})(p('Mixed{<>}'))),

package/src/{plugins/table/__tests__ → __tests__}/unit/commands.ts

@@ -48,13 +48,13 @@ import {
   toggleHeaderColumn,
   toggleHeaderRow,
   transformSliceToAddTableHeaders,
-} from '../../commands';
-import { splitCell } from '../../commands/split-cell';
-import { wrapTableInExpand } from '../../commands/collapse';
-import { handleCut } from '../../event-handlers';
-import { getPluginState } from '../../pm-plugins/plugin-factory';
-import { pluginKey } from '../../pm-plugins/plugin-key';
-import tablePlugin from '../../../table';
+} from '../../plugins/table/commands';
+import { splitCell } from '../../plugins/table/commands/split-cell';
+import { wrapTableInExpand } from '../../plugins/table/commands/collapse';
+import { handleCut } from '../../plugins/table/event-handlers';
+import { getPluginState } from '../../plugins/table/pm-plugins/plugin-factory';
+import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
+import tablePlugin from '../../plugins/table';
 import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
 import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
 import extensionPlugin from '@atlaskit/editor-core/src/plugins/extension';

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

@@ -0,0 +1,22 @@
+export {};
+
+it.skip('TODO; restore unit', () => {});
+
+// import { _getCopyButtonTestSuite } from '../../../copy-button/__tests__/unit/_getCopyButtonTestSuite';
+// import {
+//   doc,
+//   p,
+//   table,
+//   tr,
+//   td,
+// } from '@atlaskit/editor-test-helpers/doc-builder';
+
+// _getCopyButtonTestSuite({
+//   nodeType: 'table',
+//   editorOptions: {
+//     allowTables: {
+//       advanced: true,
+//     },
+//   },
+//   doc: doc(table()(tr(td({})(p())), tr(td({})(p())), tr(td({})(p())))),
+// });

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,10 @@
 import { MediaAttributes } from '@atlaskit/adf-schema';
 import { TextSelection } from 'prosemirror-state';
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   table,
@@ -14,7 +18,6 @@ import {
   mediaGroup,
   p,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { TablePluginState } from '../../plugins/table/types';
 import {
   handleMouseOver,
   handleMouseMove,
@@ -24,25 +27,139 @@ import {
   showInsertColumnButton,
   addResizeHandleDecorations,
 } from '../../plugins/table/commands';
+import {
+  handleMouseOut,
+  handleMouseDown,
+} from '../../plugins/table/event-handlers';
 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();
+  const editor = (doc: DocBuilder) =>
+    createEditor({
+      doc,
+      preset: new Preset<LightEditorPlugin>().add(tablePlugin),
+      pluginKey,
+    });
+
+  describe('#handleMouseDown', () => {
+    beforeEach(() => {
+      jest.resetAllMocks();
+    });
+    it('should return true & prevent default behaviour for table wrappers: pm-table-contianer', () => {
+      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 = 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,
     });
 
@@ -160,7 +277,6 @@ describe('table event handlers', () => {
               collection: testCollectionName,
             };
             const tableAttrs = { localId: 'table' };
-
             const { editorView } = editor(
               doc(
                 table(tableAttrs)(

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/{plugins/table/__tests__ → __tests__}/unit/get-toolbar-config.ts

@@ -17,15 +17,16 @@ import {
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 
-import tablePlugin from '../../../table';
+import tablePlugin from '../../plugins/table';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { getToolbarConfig } from '../../toolbar';
-import { setTableRef, setEditorFocus } from '../../commands';
+import { getToolbarConfig } from '../../plugins/table/toolbar';
+import { setTableRef, setEditorFocus } from '../../plugins/table/commands';
 import extensionPlugin from '@atlaskit/editor-core/src/plugins/extension';
 import dataConsumerPlugin from '@atlaskit/editor-core/src/plugins/data-consumer';
 import type {
   FloatingToolbarItem,
   FloatingToolbarButton,
+  GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
 
 const formatMessage: (t: { id: string }) => string = (message) =>
@@ -36,11 +37,15 @@ describe('getToolbarConfig', () => {
   const editorAnalyticsAPIFake: EditorAnalyticsAPI = {
     attachAnalyticsEvent: jest.fn().mockReturnValue(() => jest.fn()),
   };
+  const getEditorFeatureFlags: GetEditorFeatureFlags = jest
+    .fn()
+    .mockReturnValue({});
   const getButton = (editorView: EditorView) => {
     const { state } = editorView;
     const config = getToolbarConfig(
       getEditorContainerWidth,
       editorAnalyticsAPIFake,
+      getEditorFeatureFlags,
     )({})(state, { formatMessage } as any, {} as any)!;
     //
     expect(config).not.toBeUndefined();
@@ -60,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/{plugins/table/__tests__ → __tests__}/unit/nodeviews/OverflowShadowsObserver.ts

@@ -1,7 +1,7 @@
 import { MockIntersectionObserver } from '@atlaskit/editor-test-helpers/mock-intersection-observer';
 
-import { OverflowShadowsObserver } from '../../../nodeviews/OverflowShadowsObserver';
-import { ShadowEvent } from '../../../types';
+import { OverflowShadowsObserver } from '../../../plugins/table/nodeviews/OverflowShadowsObserver';
+import { ShadowEvent } from '../../../plugins/table/types';
 
 describe('OverflowShadowsObserver', () => {
   let table: HTMLTableElement;