@atlaskit/editor-plugin-table 0.2.2 → 0.2.3

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

@@ -0,0 +1,169 @@
+import {
+  animationFrame,
+  editable,
+  fullpage,
+  getDocFromElement,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  clickFirstCell,
+  multiCellTableSelectionBottomRightToMiddleTopCell,
+  tableSelectors,
+} from '@atlaskit/editor-test-helpers/page-objects/table';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import { TableCssClassName } from '../../plugins/table/types';
+import basicTable from './__fixtures__/basic-table';
+
+BrowserTestCase(
+  'should floating toolbar context menu sit above other context menu layers',
+  { skip: [] },
+  async (client: any) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        advanced: true,
+        allowColumnSorting: true,
+        allowDistributeColumns: true,
+        allowCellOptionsInFloatingToolbar: true,
+      },
+      defaultValue: basicTable,
+    });
+    const tableFloatingToolbarContextMenuSelector = `div[aria-label="Table floating controls"][data-editor-popup=true]`;
+    // Select the all cells under column 2 and 3
+    await multiCellTableSelectionBottomRightToMiddleTopCell(page);
+    // Table floating toolbar should appear, then click on "Cell Options", which brings up another context menu
+    const cellOptionsMenuItem = await (
+      await page.$(tableFloatingToolbarContextMenuSelector)
+    ).$(`button=${tableSelectors.cellOptionsFloatingToolbarText}`);
+    await cellOptionsMenuItem.waitForClickable();
+    await cellOptionsMenuItem.click();
+    // Get the z-index style value of the delete icon popup
+    const popupZIndex = await page.evaluate(() => {
+      const popupSelector = 'div[aria-label="Popup"][data-editor-popup=true]';
+      const deleteIconSelector = 'button.pm-table-controls__delete-button';
+      return +(
+        (
+          document
+            ?.querySelector(`${popupSelector} ${deleteIconSelector}`)
+            ?.closest(popupSelector) as HTMLElement | null
+        )?.style.zIndex || 0
+      );
+    });
+    // Get the z-index style value of the table floating toolbar context menu
+    const floatingTablePopupZIndex = await page.evaluate(() => {
+      const floatingTablePopupSelector =
+        'div[aria-label="Table floating controls"][data-editor-popup=true]';
+      return +(
+        (
+          document?.querySelector(
+            floatingTablePopupSelector,
+          ) as HTMLElement | null
+        )?.style.zIndex || 0
+      );
+    });
+    // Floating toolbar context menu should sit above the popup
+    expect(floatingTablePopupZIndex).toBeGreaterThan(popupZIndex);
+  },
+);
+
+BrowserTestCase(
+  'should show hover indicators on delete columns menu option',
+  { skip: ['safari'] }, // The test does not pass on CI but works on physical browser
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        advanced: true,
+        allowColumnSorting: true,
+        allowDistributeColumns: true,
+        allowCellOptionsInFloatingToolbar: true,
+      },
+      defaultValue: basicTable,
+    });
+    const tableFloatingToolbarContextMenuSelector = `div[aria-label="Table floating controls"][data-editor-popup=true]`;
+
+    // First click on the cell
+    await clickFirstCell(page);
+
+    // Table floating toolbar should appear, then click on "Cell Options", which brings up another context menu
+    const cellOptionsMenuItem = await (
+      await page.$(tableFloatingToolbarContextMenuSelector)
+    ).$(`button=${tableSelectors.cellOptionsFloatingToolbarText}`);
+    await cellOptionsMenuItem.waitForClickable();
+    await cellOptionsMenuItem.click();
+
+    // Hover on the "Delete column" menu option on the context menu
+    const deleteColumnMenuItem = await (
+      await page.$(tableFloatingToolbarContextMenuSelector)
+    ).$(`button=${tableSelectors.removeColumnText}`);
+    await deleteColumnMenuItem.moveTo();
+    await animationFrame(page);
+
+    // Check the first column cells should have the hover indicators appear
+    const hoverCells = await page.$$(
+      `tbody tr th.${TableCssClassName.HOVERED_CELL}.${TableCssClassName.HOVERED_COLUMN}, tbody tr td.${TableCssClassName.HOVERED_CELL}.${TableCssClassName.HOVERED_COLUMN}`,
+    );
+    expect(hoverCells.length).toBe(3);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'should show hover indicators on delete rows menu option',
+  { skip: ['safari'] }, // The test does not pass on CI but works on physical browser
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        allowColumnSorting: true,
+        allowDistributeColumns: true,
+        allowCellOptionsInFloatingToolbar: true,
+      },
+      defaultValue: basicTable,
+    });
+    const tableFloatingToolbarContextMenuSelector = `div[aria-label="Table floating controls"][data-editor-popup=true]`;
+
+    // First click on the cell
+    await clickFirstCell(page);
+
+    // Table floating toolbar should appear, then click on "Cell Options", which brings up another context menu
+    const cellOptionsMenuItem = await (
+      await page.$(tableFloatingToolbarContextMenuSelector)
+    ).$(`button=${tableSelectors.cellOptionsFloatingToolbarText}`);
+    await cellOptionsMenuItem.waitForClickable();
+    await cellOptionsMenuItem.click();
+
+    // Hover on the "Delete row" menu option on the context menu
+    const deleteRowMenuItem = await (
+      await page.$(tableFloatingToolbarContextMenuSelector)
+    ).$(`button=${tableSelectors.removeRowText}`);
+    await deleteRowMenuItem.moveTo();
+    await animationFrame(page);
+
+    // Check the first row cells should have the hover indicators appear (second row from the top)
+    const hoverCells = await page.$$(
+      `tbody tr:nth-child(2) td.${TableCssClassName.HOVERED_CELL}.${TableCssClassName.HOVERED_ROW}`,
+    );
+    expect(hoverCells.length).toBe(3);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);

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

@@ -46,6 +46,7 @@ describe('getToolbarConfig', () => {
       getEditorContainerWidth,
       editorAnalyticsAPIFake,
       getEditorFeatureFlags,
+      () => editorView,
     )({})(state, { formatMessage } as any, {} as any)!;
     //
     expect(config).not.toBeUndefined();

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

@@ -1,7 +1,11 @@
 import React from 'react';
 import { replaceRaf } from 'raf-stub';
+import { TextSelection } from 'prosemirror-state';
+
+import { Command } from '@atlaskit/editor-common/types';
 import { render } from '@testing-library/react';
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import { selectTableClosestToPos } from '@atlaskit/editor-tables/src/utils/select-nodes';
 import tablePlugin from '../../../plugins/table-plugin';
 import {
   doc,
@@ -12,8 +16,13 @@ import {
   tdEmpty,
   tdCursor,
   DocBuilder,
+  thEmpty,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { findTable, selectTable } from '@atlaskit/editor-tables/utils';
+import {
+  findTable,
+  findTableClosestToPos,
+  selectTable,
+} from '@atlaskit/editor-tables/utils';
 import {
   TableCssClassName as ClassName,
   TablePluginState,
@@ -22,7 +31,11 @@ import TableComponent from '../../../plugins/table/nodeviews/TableComponent';
 
 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 * as commands from '../../../plugins/table/commands';
+import {
+  toggleNumberColumn,
+  hoverTable,
+} from '../../../plugins/table/commands';
 
 jest.mock('../../../plugins/table/utils/nodes', () =>
   Object.assign({}, jest.requireActual('../../../plugins/table/utils/nodes'), {
@@ -30,6 +43,12 @@ jest.mock('../../../plugins/table/utils/nodes', () =>
   }),
 );
 
+jest.mock('../../../plugins/table/commands', () =>
+  Object.assign({}, jest.requireActual('../../../plugins/table/commands'), {
+    clearHoverSelection: jest.fn(),
+  }),
+);
+
 replaceRaf();
 const requestAnimationFrame = window.requestAnimationFrame as any;
 
@@ -57,8 +76,8 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
     jest.clearAllMocks();
   });
 
-  describe('when the table is selected', () => {
-    it('should add table selected css class', () => {
+  describe('when a table is selected', () => {
+    it('should add table selected css class to the selected table', () => {
       const { editorView } = editor(
         doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdCursor))),
         {
@@ -78,6 +97,129 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
         tableContainer!.classList.contains(ClassName.TABLE_SELECTED),
       ).toBeTruthy();
     });
+
+    it('should not clear the editor state hover selection when changing selection to another table', () => {
+      const clearHoverSelectionSpy = jest
+        .spyOn(commands, 'clearHoverSelection')
+        .mockImplementation(() => (() => {}) as any as Command);
+
+      const { editorView } = editor(
+        doc(
+          p('text'),
+          table()(tr(thEmpty, thEmpty, thEmpty)),
+          table()(tr(thEmpty, thEmpty, thEmpty)),
+        ),
+      );
+      const { state, dispatch } = editorView;
+
+      const isInDanger = true;
+      hoverTable(isInDanger)(state, dispatch);
+
+      const selectSecondTableTr = selectTableClosestToPos(
+        state.tr,
+        state.doc.resolve(26),
+      );
+      dispatch(selectSecondTableTr);
+      const secondTable = findTableClosestToPos(state.doc.resolve(26));
+
+      const selectFirstTableTr = selectTableClosestToPos(
+        state.tr,
+        state.doc.resolve(8),
+      );
+      dispatch(selectFirstTableTr);
+      const firstTable = findTableClosestToPos(state.doc.resolve(8));
+
+      const getTableNode = (index: number) => () =>
+        index === 1 ? firstTable!.node : secondTable!.node;
+
+      render(
+        <div>
+          <TableComponent
+            view={editorView}
+            eventDispatcher={
+              { on: () => {}, off: () => {} } as any as EventDispatcher
+            }
+            // @ts-ignore
+            containerWidth={{}}
+            // @ts-ignore
+            getNode={getTableNode(1)}
+            getEditorFeatureFlags={getEditorFeatureFlags}
+            allowControls
+            contentDOM={(wrapper: HTMLElement | null) => {
+              const node = editorView.dom.getElementsByTagName('table')[0];
+              if (!wrapper?.firstChild) {
+                wrapper?.appendChild(node);
+              }
+            }}
+          />
+          <TableComponent
+            view={editorView}
+            eventDispatcher={
+              { on: () => {}, off: () => {} } as any as EventDispatcher
+            }
+            // @ts-ignore
+            containerWidth={{}}
+            // @ts-ignore
+            getNode={getTableNode(2)}
+            getEditorFeatureFlags={getEditorFeatureFlags}
+            allowControls
+            contentDOM={(wrapper: HTMLElement | null) => {
+              const node = editorView.dom.getElementsByTagName('table')[0];
+              if (!wrapper?.firstChild) {
+                wrapper?.appendChild(node);
+              }
+            }}
+          />
+          ,
+        </div>,
+      );
+      expect(clearHoverSelectionSpy).not.toBeCalled();
+    });
+  });
+
+  describe('when there are no tables in selection', () => {
+    it('clears the editor state hover selection if the editor state is in danger flag is set', () => {
+      const clearHoverSelectionSpy = jest
+        .spyOn(commands, 'clearHoverSelection')
+        .mockImplementation(() => (() => {}) as any as Command);
+
+      const { editorView } = editor(
+        doc(p('text'), table()(tr(thEmpty, thEmpty, thEmpty))),
+      );
+      const { state, dispatch } = editorView;
+
+      const isInDanger = true;
+      hoverTable(isInDanger)(state, dispatch);
+      dispatch(selectTable(state.tr));
+
+      const tableF = findTable(state.selection);
+      const getNode = () => tableF!.node;
+
+      const newTr = state.tr.setSelection(TextSelection.create(state.doc, 0));
+      dispatch(newTr);
+
+      render(
+        <TableComponent
+          view={editorView}
+          eventDispatcher={
+            { on: () => {}, off: () => {} } as any as EventDispatcher
+          }
+          // @ts-ignore
+          containerWidth={{}}
+          // @ts-ignore
+          getNode={getNode}
+          getEditorFeatureFlags={getEditorFeatureFlags}
+          allowControls
+          contentDOM={(wrapper: HTMLElement | null) => {
+            const node = editorView.dom.getElementsByTagName('table')[0];
+            if (!wrapper?.firstChild) {
+              wrapper?.appendChild(node);
+            }
+          }}
+        />,
+      );
+      expect(clearHoverSelectionSpy).toBeCalledTimes(1);
+    });
   });
 
   describe('when the numbered column attribute is changed', () => {

package/src/__tests__/unit/pm-plugins/table-resizing/event-handlers.ts

@@ -21,10 +21,12 @@ import {
 
 import tablePlugin from '../../../../plugins/table';
 import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
-import { TextSelection, NodeSelection } from 'prosemirror-state';
+import { TextSelection, NodeSelection, EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
 import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
 import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { akEditorFullPageMaxWidth } from '@atlaskit/editor-shared-styles/consts';
 
 describe('table-resizing/event-handlers', () => {
   const editorAnalyticsAPIFake: EditorAnalyticsAPI = {
@@ -57,18 +59,7 @@ describe('table-resizing/event-handlers', () => {
         doc(table()(tr(td()(p('1')), td()(p('2')), td()(p('3{<>}'))))),
       );
 
-      setResizeHandlePos(12)(view.state, view.dispatch);
-
-      const mousedownEvent = new MouseEvent('mousedown', {
-        clientX: 150,
-      });
-
-      view.dom.dispatchEvent(mousedownEvent);
-
-      const mouseupEvent = new MouseEvent('mouseup', {
-        clientX: 250,
-      });
-      window.dispatchEvent(mouseupEvent);
+      resizeColumn(view, 12, 150, 250);
 
       expect(editorAnalyticsAPIFake.attachAnalyticsEvent).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -85,6 +76,50 @@ describe('table-resizing/event-handlers', () => {
       );
     });
 
+    it('should shrink last column until table is no longer overflowing', async () => {
+      const { editorView: view } = editor(
+        doc(table()(tr(td()(p('1')), td()(p('2')), td()(p('3{<>}'))))),
+      );
+
+      // Increase column to overflow
+      resizeColumn(view, 7, 50, 500);
+
+      expect(getTotalTableWidth(view.state as EditorState)).toBeGreaterThan(
+        akEditorFullPageMaxWidth,
+      );
+
+      resizeColumn(view, 12, 3000, 700);
+
+      // No matter how large we try to resize the result should equal the width (within 1 pt)
+      expect(getTotalTableWidth(view.state as EditorState)).toBeLessThanOrEqual(
+        akEditorFullPageMaxWidth,
+      );
+      expect(
+        getTotalTableWidth(view.state as EditorState),
+      ).toBeGreaterThanOrEqual(akEditorFullPageMaxWidth - 1);
+    });
+
+    it('should not resize the last column to grow', async () => {
+      const { editorView: view } = editor(
+        doc(table()(tr(td()(p('1')), td()(p('2')), td()(p('3{<>}'))))),
+      );
+
+      // Increase column to overflow
+      resizeColumn(view, 7, 50, 500);
+
+      const overflowingTableWidth = getTotalTableWidth(
+        view.state as EditorState,
+      );
+      expect(overflowingTableWidth).toBeGreaterThan(akEditorFullPageMaxWidth);
+
+      resizeColumn(view, 12, 400, 3000);
+
+      // Width should be unchanged
+      expect(getTotalTableWidth(view.state as EditorState)).toBe(
+        overflowingTableWidth,
+      );
+    });
+
     it('should restore text selection after replacing the table', async () => {
       const { editorView: view } = editor(
         doc(table()(tr(td()(p('1')), td()(p('2')), td()(p('3{<>}'))))),
@@ -94,15 +129,7 @@ describe('table-resizing/event-handlers', () => {
       expect(currentSelection instanceof TextSelection).toBeTruthy();
       expect(currentSelection.$cursor.pos).toBe(15);
 
-      setResizeHandlePos(12)(view.state, view.dispatch);
-      const mousedownEvent = new MouseEvent('mousedown', {
-        clientX: 150,
-      });
-      view.dom.dispatchEvent(mousedownEvent);
-      const mouseupEvent = new MouseEvent('mouseup', {
-        clientX: 250,
-      });
-      window.dispatchEvent(mouseupEvent);
+      resizeColumn(view, 12, 150, 250);
 
       expect(currentSelection instanceof TextSelection).toBeTruthy();
       expect(currentSelection.$cursor.pos).toBe(15);
@@ -118,17 +145,41 @@ describe('table-resizing/event-handlers', () => {
       view.dispatch(_tr);
       expect(view.state.tr.selection.node.type.name).toBe('panel');
 
-      setResizeHandlePos(13)(view.state, view.dispatch);
-      const mousedownEvent = new MouseEvent('mousedown', {
-        clientX: 150,
-      });
-      view.dom.dispatchEvent(mousedownEvent);
-      const mouseupEvent = new MouseEvent('mouseup', {
-        clientX: 250,
-      });
-      window.dispatchEvent(mouseupEvent);
+      resizeColumn(view, 13, 150, 250);
 
       expect(view.state.tr.selection.node.type.name).toBe('panel');
     });
   });
 });
+
+function getTotalTableWidth(state: EditorState) {
+  let totalWidth = 0;
+  state.doc.descendants((node) => {
+    if (node.type.name === 'tableCell') {
+      totalWidth += node.attrs.colwidth[0];
+      return false;
+    }
+    return true;
+  });
+  return totalWidth;
+}
+
+function resizeColumn(
+  view: EditorView,
+  pos: number,
+  start: number,
+  end: number,
+) {
+  setResizeHandlePos(pos)(view.state, view.dispatch);
+
+  const firstmousedownEvent = new MouseEvent('mousedown', {
+    clientX: start,
+  });
+
+  view.dom.dispatchEvent(firstmousedownEvent);
+
+  const firstmouseupEvent = new MouseEvent('mouseup', {
+    clientX: end,
+  });
+  window.dispatchEvent(firstmouseupEvent);
+}