@atlaskit/editor-plugin-table 1.0.1 → 1.0.3

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

@@ -319,3 +319,295 @@ Object {
   "type": "doc",
 }
 `;
+
+exports[`should show yellow highlight on the megred rows when hover disabled sort column ASC menu option 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "__autoSize": false,
+        "isNumberColumnEnabled": false,
+        "layout": "default",
+        "localId": "abc-123",
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableHeader",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableHeader",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableHeader",
+            },
+          ],
+          "type": "tableRow",
+        },
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+          ],
+          "type": "tableRow",
+        },
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 2,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+          ],
+          "type": "tableRow",
+        },
+      ],
+      "type": "table",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`should show yellow highlight on the megred rows when hover disabled sort column DESC menu option 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "__autoSize": false,
+        "isNumberColumnEnabled": false,
+        "layout": "default",
+        "localId": "abc-123",
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableHeader",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableHeader",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableHeader",
+            },
+          ],
+          "type": "tableRow",
+        },
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+          ],
+          "type": "tableRow",
+        },
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 2,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+          ],
+          "type": "tableRow",
+        },
+      ],
+      "type": "table",
+    },
+  ],
+  "type": "doc",
+}
+`;

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

@@ -17,6 +17,7 @@ import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
 import { TableCssClassName } from '../../plugins/table/types';
 import basicTable from './__fixtures__/basic-table';
 import { documentWithMergedCells } from './__fixtures__/merged-rows-and-cols-document';
+import basicTableWithMergedCell from './__fixtures__/basic-table-with-merged-cell';
 
 BrowserTestCase(
   'should floating toolbar context menu sit above other context menu layers',
@@ -187,10 +188,8 @@ BrowserTestCase(
       defaultValue: documentWithMergedCells,
     });
     const tableFloatingToolbarContextMenuSelector = `div[aria-label="Table floating controls"][data-editor-popup=true]`;
-    const sortAtoZButtonSelector =
+    const sortColumnButtonSelector =
       'div[data-role=droplistContent] div[role=presentation]';
-    const sortZtoAButtonSelector =
-      'div[data-role=droplistContent] div[role=presentation]:nth-of-type(2)';
     const tooltipSelector = 'div.atlaskit-portal div[role=tooltip]';
 
     // Click on the cell on the table
@@ -206,18 +205,175 @@ BrowserTestCase(
     // No tooltip is shown
     expect((await page.$$(tooltipSelector)).length).toBe(0);
 
-    // Hover Sort column A -> Z button then it should show tooltip
-    const sortAtoZButton = await page.$(sortAtoZButtonSelector);
-    await sortAtoZButton.moveTo();
+    // Expect there are 2 sort column tooltip menu option
+    const sortColumnButtons = await page.$$(sortColumnButtonSelector);
+    expect(sortColumnButtons.length).toBe(2);
     const tooltip = await page.$(tooltipSelector);
+
+    // Hover Sort column A -> Z button then it should show tooltip, and should be removed after mouseout
+    const sortAtoZButton = sortColumnButtons[0];
+    await sortAtoZButton.moveTo();
     await tooltip.waitForExist();
     expect((await page.$$(tooltipSelector)).length).toBe(1);
+    await cellOptionsMenuItem.moveTo();
+    await tooltip.waitUntil(async () => {
+      return (await page.$$(tooltipSelector)).length === 0;
+    });
 
-    // Tooltip should be removed after mouseout to next button
-    const sortZtoAButton = await page.$(sortZtoAButtonSelector);
+    // Hover Sort column Z -> A button then it should show tooltip, and should be removed after mouseout
+    const sortZtoAButton = sortColumnButtons[1];
     await sortZtoAButton.moveTo();
+    await tooltip.waitForExist();
+    expect((await page.$$(tooltipSelector)).length).toBe(1);
+    await cellOptionsMenuItem.moveTo();
     await tooltip.waitUntil(async () => {
       return (await page.$$(tooltipSelector)).length === 0;
     });
   },
 );
+
+BrowserTestCase(
+  'should show yellow highlight on the megred rows when hover disabled sort column ASC 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: basicTableWithMergedCell,
+    });
+    const tableFloatingToolbarContextMenuSelector = `div[aria-label="Table floating controls"][data-editor-popup=true]`;
+
+    // Click on the cell on the table
+    await clickFirstCell(page);
+
+    // Table floating toolbar should appear, then hover 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 "Sort column ASC" menu option on the context menu
+    const sortColumnAscMenuItem = await (
+      await page.$(tableFloatingToolbarContextMenuSelector)
+    ).$(`button=${tableSelectors.sortColumnASC}`);
+    await sortColumnAscMenuItem.moveTo();
+    await animationFrame(page);
+
+    // Check there the yellow highlight background on the merged cells.
+    const highlightedCell = await page.$$(
+      `tbody tr:nth-child(3) td.${TableCssClassName.HOVERED_CELL_WARNING}`,
+    );
+    expect(highlightedCell.length).toBe(1);
+    await animationFrame(page);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'should show yellow highlight on the megred rows when hover disabled sort column DESC 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: basicTableWithMergedCell,
+    });
+    const tableFloatingToolbarContextMenuSelector = `div[aria-label="Table floating controls"][data-editor-popup=true]`;
+
+    // Click on the cell on the table
+    await clickFirstCell(page);
+
+    // Table floating toolbar should appear, then hover 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 "Sort column DESC" menu option on the context menu
+    const sortColumnDescMenuItem = await (
+      await page.$(tableFloatingToolbarContextMenuSelector)
+    ).$(`button=${tableSelectors.sortColumnDESC}`);
+    await sortColumnDescMenuItem.moveTo();
+    await animationFrame(page);
+
+    // Check there the yellow highlight background on the merged cells.
+    const highlightedCell = await page.$$(
+      `tbody tr:nth-child(3) td.${TableCssClassName.HOVERED_CELL_WARNING}`,
+    );
+    expect(highlightedCell.length).toBe(1);
+    await animationFrame(page);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'should the context menu disabled item stay open when clicked.',
+  { 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 tableFloatingToolbar = await page.$(
+      tableFloatingToolbarContextMenuSelector,
+    );
+    tableFloatingToolbar.waitForExist();
+    await animationFrame(page);
+
+    const cellOptionsMenuItem = await tableFloatingToolbar.$(
+      `button=${tableSelectors.cellOptionsFloatingToolbarText}`,
+    );
+    await cellOptionsMenuItem.waitForClickable();
+    await cellOptionsMenuItem.click();
+    await animationFrame(page);
+
+    // Hover on the "Merge Cell" menu option on the context menu (which should be disabled)
+    const mergeCellsMenuItem = await tableFloatingToolbar.$(
+      `button=${tableSelectors.mergeCellsText}`,
+    );
+    expect(await mergeCellsMenuItem.getAttribute('disabled')).toBe('true');
+    await mergeCellsMenuItem.moveTo();
+    await mergeCellsMenuItem.click();
+    await animationFrame(page);
+
+    // The context menu should remains open, thus the menu item should still be visible
+    expect(await mergeCellsMenuItem.isDisplayed()).toBe(true);
+  },
+);

package/src/plugins/table/toolbar.tsx

@@ -23,6 +23,7 @@ import {
   hoverColumns,
   hoverRows,
   removeDescendantNodes,
+  hoverMergedCells,
 } from './commands';
 import {
   deleteTableWithAnalytics,
@@ -339,6 +340,17 @@ export const getToolbarCellOptionsConfig = (
     options.push({
       id: 'editor.table.sortColumnAsc',
       title: formatMessage(ContextualMenuMessages.sortColumnASC),
+      onMouseOver: (state: EditorState, dispatch?: CommandDispatch) => {
+        if (getMergedCellsPositions(state.tr).length !== 0) {
+          hoverMergedCells()(state, dispatch);
+          return true;
+        }
+        return false;
+      },
+      onMouseOut: (state: EditorState, dispatch?: CommandDispatch) => {
+        clearHoverSelection()(state, dispatch);
+        return true;
+      },
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         sortColumnWithAnalytics(editorAnalyticsAPI)(
           INPUT_METHOD.FLOATING_TB,
@@ -355,6 +367,17 @@ export const getToolbarCellOptionsConfig = (
     options.push({
       id: 'editor.table.sortColumnDesc',
       title: formatMessage(ContextualMenuMessages.sortColumnDESC),
+      onMouseOver: (state: EditorState, dispatch?: CommandDispatch) => {
+        if (getMergedCellsPositions(state.tr).length !== 0) {
+          hoverMergedCells()(state, dispatch);
+          return true;
+        }
+        return false;
+      },
+      onMouseOut: (state: EditorState, dispatch?: CommandDispatch) => {
+        clearHoverSelection()(state, dispatch);
+        return true;
+      },
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         sortColumnWithAnalytics(editorAnalyticsAPI)(
           INPUT_METHOD.FLOATING_TB,

package/src/plugins/table/utils/decoration.ts

@@ -1,6 +1,6 @@
 import { Node as PmNode } from 'prosemirror-model';
 import { Selection, Transaction, ReadonlyTransaction } from 'prosemirror-state';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { ContentNodeWithPos } from 'prosemirror-utils';
 import {
   findTable,
@@ -96,7 +96,32 @@ export const createControlsHoverDecoration = (
   // to match the "clicked" selection
 
   if (danger) {
-    const rect = map.rectBetween(min - table.start, max - table.start);
+    // Find the bounding rectangle of all the given cells, also considering
+    // merged cells.
+    const { recLeft, recTop, recRight, recBottom } = cells.reduce(
+      (acc, cell) => {
+        const { left, right, bottom, top } = map.findCell(
+          cell.pos - table.start,
+        );
+        // Finding the bounding rect requires finding the min left and top positions,
+        // and the max right and bottom positions of the cells
+        return {
+          recLeft: Math.min(acc.recLeft, left),
+          recTop: Math.min(acc.recTop, top),
+          recRight: Math.max(acc.recRight, right),
+          recBottom: Math.max(acc.recBottom, bottom),
+        };
+      },
+      // +-Infinity as initialisation vars which will always be overwritten
+      // by smaller/larger values respectively
+      {
+        recLeft: Infinity,
+        recTop: Infinity,
+        recRight: -Infinity,
+        recBottom: -Infinity,
+      },
+    );
+    const rect = new Rect(recLeft, recTop, recRight, recBottom);
     updatedCells = map.cellsInRect(rect).map((x) => x + table.start);
   }