@atlaskit/editor-plugin-table 5.3.0 → 5.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.0",
+  "version": "5.3.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,8 +40,9 @@
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/pragmatic-drag-and-drop": "^0.23.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.11.8",
+    "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "^0.4.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.26.0",
+    "@atlaskit/tokens": "^1.27.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -106,6 +107,9 @@
     "platform.editor.custom-table-width": {
       "type": "boolean"
     },
+    "platform.editor.table.drag-and-drop": {
+      "type": "boolean"
+    },
     "platform.editor.table-sticky-scrollbar": {
       "type": "boolean"
     },

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

@@ -25,6 +25,7 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import tablePlugin from '../../plugins/table-plugin';
 import {
@@ -36,7 +37,9 @@ import {
   handleMouseMove,
   handleMouseOut,
   handleMouseOver,
+  withCellTracking,
 } from '../../plugins/table/event-handlers';
+import { getPluginState } from '../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import { TableCssClassName as ClassName } from '../../plugins/table/types';
 
@@ -60,7 +63,7 @@ describe('table plugin: decorations', () => {
     beforeEach(() => {
       jest.resetAllMocks();
     });
-    it('should return true & prevent default behaviour for table wrappers: pm-table-contianer', () => {
+    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())))),
       );
@@ -232,3 +235,73 @@ describe('table event handlers', () => {
     });
   });
 });
+
+describe('withCellTracking', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const editor = (doc: DocBuilder, isDragAndDropEnabled = false) =>
+    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,
+          {
+            dragAndDropEnabled: isDragAndDropEnabled,
+            tableOptions: { advanced: true },
+          },
+        ]),
+      pluginKey,
+    });
+
+  describe('should fire event handler passed in', () => {
+    ffTest(
+      'platform.editor.table.drag-and-drop',
+      () => {
+        const { editorView } = editor(
+          doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          true,
+        );
+        const eventHandlerSpy = jest.fn();
+        withCellTracking(eventHandlerSpy)(editorView, {} as any);
+
+        expect(eventHandlerSpy).toHaveBeenCalled();
+      },
+      () => {
+        const { editorView } = editor(
+          doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+        );
+        const eventHandlerSpy = jest.fn();
+        withCellTracking(eventHandlerSpy)(editorView, {} as any);
+
+        expect(eventHandlerSpy).toHaveBeenCalled();
+      },
+    );
+  });
+
+  describe('should correctly set table cell coordinates based on mouse location', () => {
+    ffTest('platform.editor.table.drag-and-drop', () => {
+      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: 0, rowIndex: 0 });
+    });
+  });
+});

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

@@ -9,27 +9,47 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import { buildColumnControlsDecorations } from '../../../../plugins/table/pm-plugins/decorations/utils';
 import { TableDecorations } from '../../../../plugins/table/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,
-      });
+  describe(`should return a decorationSet with 2 ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type`, () => {
+    ffTest(
+      'platform.editor.table.drag-and-drop',
+      () => {
+        const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
+        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,
-      );
+        const decorations = nextDecorationSet.find(
+          undefined,
+          undefined,
+          (spec: any) => spec.key.indexOf(decorationKey) > -1,
+        );
 
-      expect(decorations).toHaveLength(2);
-    });
+        expect(decorations).toHaveLength(2);
+      },
+      () => {
+        const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
+        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/__tests__/unit/pm-plugins/decorations/plugin.ts

@@ -23,6 +23,7 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import tablePlugin from '../../../../plugins/table';
 import { selectColumn } from '../../../../plugins/table/commands';
@@ -53,28 +54,92 @@ describe('decorations plugin', () => {
 
   // ED-8457
   describe('when there is a selection pointer set', () => {
-    it('should remove the column selected decorations', () => {
-      const { editorView } = editor(
-        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-      );
+    describe('should remove the column selected decorations', () => {
+      ffTest(
+        'platform.editor.table.drag-and-drop',
+        () => {
+          const { editorView } = editor(
+            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          );
+
+          selectColumn(1)(editorView.state, editorView.dispatch);
+
+          const { tr: transaction } = editorView.state;
+
+          transaction.setMeta('pointer', true);
+          transaction.setSelection(Selection.atStart(transaction.doc));
+          editorView.dispatch(transaction);
+
+          const decorationSet = getDecorations(editorView.state);
+
+          const columnSelectedDecorations = decorationSet.find(
+            undefined,
+            undefined,
+            (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
+          );
+
+          expect(columnSelectedDecorations).toHaveLength(0);
+        },
+        () => {
+          const { editorView } = editor(
+            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          );
 
-      selectColumn(1)(editorView.state, editorView.dispatch);
+          selectColumn(1)(editorView.state, editorView.dispatch);
 
-      const { tr: transaction } = editorView.state;
+          const { tr: transaction } = editorView.state;
 
-      transaction.setMeta('pointer', true);
-      transaction.setSelection(Selection.atStart(transaction.doc));
-      editorView.dispatch(transaction);
+          transaction.setMeta('pointer', true);
+          transaction.setSelection(Selection.atStart(transaction.doc));
+          editorView.dispatch(transaction);
 
-      const decorationSet = getDecorations(editorView.state);
+          const decorationSet = getDecorations(editorView.state);
 
-      const columnSelectedDecorations = decorationSet.find(
-        undefined,
-        undefined,
-        (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
+          const columnSelectedDecorations = decorationSet.find(
+            undefined,
+            undefined,
+            (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
+          );
+
+          expect(columnSelectedDecorations).toHaveLength(0);
+        },
       );
+    });
+  });
+
+  describe('when the hovered cell state changes', () => {
+    describe('should add column control decorations', () => {
+      ffTest('platform.editor.table.drag-and-drop', () => {
+        const pluginState = DecorationSet.empty;
+        const { editorView } = editor(
+          doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+        );
 
-      expect(columnSelectedDecorations).toHaveLength(0);
+        const transaction = editorView.state.tr.setMeta(pluginKey, {
+          type: 'HOVER_CELL',
+          data: {
+            colIndex: 0,
+            rowIndex: 0,
+          },
+        });
+
+        const oldState = handleDocOrSelectionChanged(
+          transaction,
+          pluginState,
+          editorView.state,
+          editorView.state,
+        );
+
+        editorView.dispatch(transaction);
+        const newState = handleDocOrSelectionChanged(
+          transaction,
+          oldState,
+          editorView.state,
+          editorView.state,
+        );
+
+        expect(oldState).not.toEqual(newState);
+      });
     });
   });
 
@@ -104,37 +169,76 @@ describe('decorations plugin', () => {
   });
 
   describe('when the table changed', () => {
-    it('should re-create the column controls decorations', () => {
-      const { editorView } = editor(
-        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-      );
-      const { state } = editorView;
+    describe('should re-create the column controls decorations', () => {
+      ffTest(
+        'platform.editor.table.drag-and-drop',
+        () => {
+          const { editorView } = editor(
+            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          );
+          const { state } = editorView;
 
-      const nextPluginState = handleDocOrSelectionChanged(
-        editorView.state.tr,
-        DecorationSet.empty,
-        editorView.state,
-        state,
-      );
+          const nextPluginState = handleDocOrSelectionChanged(
+            editorView.state.tr,
+            DecorationSet.empty,
+            editorView.state,
+            state,
+          );
 
-      const { tr: transaction } = state;
-      editorView.dispatch(addColumnAt(2)(transaction));
+          const { tr: transaction } = state;
+          editorView.dispatch(addColumnAt(2)(transaction));
 
-      const newState = handleDocOrSelectionChanged(
-        transaction,
-        nextPluginState,
-        editorView.state,
-        state,
-      );
-      const expectedDecorationSet = newState;
-      const decorations = expectedDecorationSet.find(
-        undefined,
-        undefined,
-        (spec) =>
-          spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) > -1,
-      );
+          const newState = handleDocOrSelectionChanged(
+            transaction,
+            nextPluginState,
+            editorView.state,
+            state,
+          );
+          const expectedDecorationSet = newState;
+          const decorations = expectedDecorationSet.find(
+            undefined,
+            undefined,
+            (spec) =>
+              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
+              -1,
+          );
+
+          expect(decorations).toHaveLength(3);
+        },
+        () => {
+          const { editorView } = editor(
+            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          );
+          const { state } = editorView;
+
+          const nextPluginState = handleDocOrSelectionChanged(
+            editorView.state.tr,
+            DecorationSet.empty,
+            editorView.state,
+            state,
+          );
 
-      expect(decorations).toHaveLength(3);
+          const { tr: transaction } = state;
+          editorView.dispatch(addColumnAt(2)(transaction));
+
+          const newState = handleDocOrSelectionChanged(
+            transaction,
+            nextPluginState,
+            editorView.state,
+            state,
+          );
+          const expectedDecorationSet = newState;
+          const decorations = expectedDecorationSet.find(
+            undefined,
+            undefined,
+            (spec) =>
+              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
+              -1,
+          );
+
+          expect(decorations).toHaveLength(3);
+        },
+      );
     });
   });
 

package/src/__tests__/unit/ui/NumberColumn.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
+
+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 { 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,
+  tdEmpty,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import tablePlugin from '../../../plugins/table-plugin';
+import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+// import type { TablePluginState } from '../../../plugins/table/types';
+import { TableCssClassName as ClassName } from '../../../plugins/table/types';
+import NumberColumn from '../../../plugins/table/ui/TableFloatingControls/NumberColumn';
+
+describe('NumberColumn', () => {
+  const createEditor = createProsemirrorEditorFactory();
+
+  const editor = (doc: DocBuilder, tableOptions = {}) =>
+    createEditor({
+      doc,
+      preset: new Preset<LightEditorPlugin>()
+        .add([featureFlagsPlugin, {}])
+        .add([analyticsPlugin, {}])
+        .add(contentInsertionPlugin)
+        .add(widthPlugin)
+        .add(guidelinePlugin)
+        .add(selectionPlugin)
+        .add([tablePlugin, { tableOptions }]),
+      pluginKey: pluginKey,
+    });
+
+  it('should update plugin state for hovered cell - when drag and drop is enabled', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
+      { dragAndDropEnabled: true },
+    );
+    const ref = editorView.dom.querySelector('table');
+
+    const { container } = render(
+      <IntlProvider locale="en">
+        <NumberColumn
+          tableRef={ref!}
+          tableActive
+          editorView={editorView}
+          hoverRows={jest.fn()}
+          selectRow={jest.fn()}
+          isDragAndDropEnabled
+        />
+      </IntlProvider>,
+    );
+
+    const firstNumberedCell = container.querySelector(
+      `.${ClassName.NUMBERED_COLUMN} > div`,
+    );
+
+    fireEvent.mouseOver(firstNumberedCell!);
+
+    const pluginState = getPluginState(editorView.state);
+    // colIndex is not defined yet, keep undefined
+    expect(pluginState.hoveredCell).toEqual({
+      colIndex: undefined,
+      rowIndex: 0,
+    });
+  });
+
+  it('should render button disabled numbered column cells - when drag and drop is enabled', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
+      { dragAndDropEnabled: true },
+    );
+    const ref = editorView.dom.querySelector('table');
+
+    const { container } = render(
+      <IntlProvider locale="en">
+        <NumberColumn
+          tableRef={ref!}
+          tableActive
+          editorView={editorView}
+          hoverRows={jest.fn()}
+          selectRow={jest.fn()}
+          isDragAndDropEnabled
+        />
+      </IntlProvider>,
+    );
+
+    const firstNumberedCells = container.querySelectorAll(
+      `.${ClassName.NUMBERED_COLUMN} > div`,
+    );
+
+    firstNumberedCells.forEach((cell) => {
+      expect(
+        cell.classList.contains(ClassName.NUMBERED_COLUMN_BUTTON_DISABLED),
+      ).toBeTruthy();
+    });
+  });
+
+  it('should render buttons for numbered column cells - when drag and drop is disabled', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
+      { dragAndDropEnabled: false },
+    );
+    const ref = editorView.dom.querySelector('table');
+
+    const { container } = render(
+      <IntlProvider locale="en">
+        <NumberColumn
+          tableRef={ref!}
+          tableActive
+          editorView={editorView}
+          hoverRows={jest.fn()}
+          selectRow={jest.fn()}
+          isDragAndDropEnabled={false}
+        />
+      </IntlProvider>,
+    );
+
+    const firstNumberedCells = container.querySelectorAll(
+      `.${ClassName.NUMBERED_COLUMN} > div`,
+    );
+
+    firstNumberedCells.forEach((cell) => {
+      expect(
+        cell.classList.contains(ClassName.NUMBERED_COLUMN_BUTTON_DISABLED),
+      ).toBeFalsy();
+    });
+  });
+});

package/src/__tests__/unit/ui/RowControls.tsx

@@ -41,7 +41,6 @@ import { RowControls } from '../../../plugins/table/ui/TableFloatingControls/Row
 
 describe('RowControls', () => {
   const createEditor = createProsemirrorEditorFactory();
-  const fakeGetEditorFeatureFlags = jest.fn(() => ({}));
   let originalResizeObserver: any;
 
   beforeAll(() => {
@@ -94,7 +93,8 @@ describe('RowControls', () => {
               tableRef={ref}
               tableActive
               editorView={editorView}
-              getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+              isDragAndDropEnabled={false}
+              selection={editorView.state.selection}
             />
           </IntlProvider>,
         );
@@ -116,7 +116,6 @@ describe('RowControls', () => {
           tableRef={ref}
           tableActive={false}
           editorView={editorView}
-          getEditorFeatureFlags={fakeGetEditorFeatureFlags}
         />
       </IntlProvider>,
     );
@@ -145,7 +144,8 @@ describe('RowControls', () => {
               tableRef={ref}
               tableActive
               editorView={editorView}
-              getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+              isDragAndDropEnabled={false}
+              selection={editorView.state.selection}
             />
           </IntlProvider>,
         );