@atlaskit/editor-plugin-table 0.1.2 → 0.2.1

package/src/__tests__/visual-regression/__image_snapshots__/sticky-header-ts-snapshot-test-table-sticky-header-should-align-with-table-cell-when-active-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4c5e3b7ade5e92b861452ef14e9774592b6252c91a89e955a33e56e3678cf54c
+size 20560

package/src/__tests__/visual-regression/__image_snapshots__/sticky-header-ts-snapshot-test-table-sticky-header-should-align-with-table-cell-when-active-2-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f1a5a555cab8c01960d1dd4009d44eb51abf0fbd27674404e0bc8ddc9152c345
+size 19785

package/src/__tests__/visual-regression/cell-options-menu.ts

@@ -1,99 +1,110 @@
-export {};
-
-// import {
-//   PuppeteerPage,
-//   waitForNoTooltip,
-// } from '@atlaskit/visual-regression/helper';
-// import { insertTable } from '../../../../__tests__/__helpers/page-objects/_table';
-
-// import {
-//   snapshot,
-//   initFullPageEditorWithAdf,
-// } from '../../../../__tests__/visual-regression/_utils';
-
-it.skip('TODO: restore vr `packages/editor/editor-plugin-table/src/plugins/table/__tests__/visual-regression/cell-options-menu.ts`', () => {});
-
-// const firstCellSelector = 'table tbody th p';
-// const cellOptionsSelector = '[aria-label="Cell options"]';
-// const deleteColumnCellOptionSelector = '[aria-label="Delete column"]';
-// const deleteRowCellOptionSelector = '[aria-label="Delete row"]';
-
-// const emptyDocAdf = {
-//   version: 1,
-//   type: 'doc',
-//   content: [],
-// };
-
-// describe('Table cell options menu', () => {
-//   let page: PuppeteerPage;
-
-//   beforeEach(async () => {
-//     page = global.page;
-//     await initFullPageEditorWithAdf(page, emptyDocAdf);
-//     await insertTable(page);
-//     page.waitForSelector(firstCellSelector);
-
-//     // move the focus to the first table cell
-//     await page.type(firstCellSelector, 'focus table cell');
-//   });
-
-//   describe('delete column menu item', () => {
-//     it('visual hints should be added to the table column on hover', async () => {
-//       // open the table cell options menu
-//       await page.waitForSelector(cellOptionsSelector);
-//       await page.click(cellOptionsSelector);
-
-//       // hover over the table cell options Delete column entry
-//       await page.waitForSelector(deleteColumnCellOptionSelector);
-//       await page.hover(deleteColumnCellOptionSelector);
-
-//       await waitForNoTooltip(page);
-
-//       await snapshot(page);
-//     });
-
-//     it('should remove the table column on click', async () => {
-//       // open the table cell options menu
-//       await page.waitForSelector(cellOptionsSelector);
-//       await page.click(cellOptionsSelector);
-
-//       // click the table cell options Delete column entry
-//       await page.waitForSelector(deleteColumnCellOptionSelector);
-//       await page.click(deleteColumnCellOptionSelector);
-
-//       await waitForNoTooltip(page);
-
-//       await snapshot(page);
-//     });
-//   });
-
-//   describe('delete row menu item', () => {
-//     it('visual hints should be added to the table row on hover', async () => {
-//       // open the table cell options menu
-//       await page.waitForSelector(cellOptionsSelector);
-//       await page.click(cellOptionsSelector);
-
-//       // hover over the table cell options Delete row entry
-//       await page.waitForSelector(deleteRowCellOptionSelector);
-//       await page.hover(deleteRowCellOptionSelector);
-
-//       await waitForNoTooltip(page);
-
-//       await snapshot(page);
-//     });
-
-//     it('should remove the table row on click', async () => {
-//       // open the table cell options menu
-//       await page.waitForSelector(cellOptionsSelector);
-//       await page.click(cellOptionsSelector);
-
-//       // click the table cell options Delete row entry
-//       await page.waitForSelector(deleteColumnCellOptionSelector);
-//       await page.click(deleteRowCellOptionSelector);
-
-//       await waitForNoTooltip(page);
-
-//       await snapshot(page);
-//     });
-//   });
-// });
+import {
+  PuppeteerPage,
+  waitForNoTooltip,
+} from '@atlaskit/visual-regression/helper';
+import { insertTable } from '@atlaskit/editor-test-helpers/page-objects/table';
+import {
+  snapshot,
+  initFullPageEditorWithAdf,
+} from '@atlaskit/editor-test-helpers/vr-utils/base-utils';
+
+const firstCellSelector = 'table tbody th p';
+const cellOptionsSelector = '[aria-label="Cell options"]';
+const deleteColumnCellOptionSelector = '[aria-label="Delete column"]';
+const deleteRowCellOptionSelector = '[aria-label="Delete row"]';
+
+const emptyDocAdf = {
+  version: 1,
+  type: 'doc',
+  content: [],
+};
+
+describe('Table cell options menu', () => {
+  let page: PuppeteerPage;
+
+  beforeEach(async () => {
+    page = global.page;
+    await initFullPageEditorWithAdf(
+      page,
+      emptyDocAdf,
+      undefined,
+      undefined,
+      {},
+      undefined,
+      undefined,
+      true,
+      false,
+      undefined,
+      {
+        group: 'editor',
+        packageName: 'editor-plugin-table',
+        exampleName: 'testing',
+      },
+    );
+    await insertTable(page);
+    page.waitForSelector(firstCellSelector);
+
+    // move the focus to the first table cell
+    await page.type(firstCellSelector, 'focus table cell');
+  });
+
+  describe('delete column menu item', () => {
+    it('visual hints should be added to the table column on hover', async () => {
+      // open the table cell options menu
+      await page.waitForSelector(cellOptionsSelector);
+      await page.click(cellOptionsSelector);
+
+      // hover over the table cell options Delete column entry
+      await page.waitForSelector(deleteColumnCellOptionSelector);
+      await page.hover(deleteColumnCellOptionSelector);
+
+      await waitForNoTooltip(page);
+
+      await snapshot(page);
+    });
+
+    it('should remove the table column on click', async () => {
+      // open the table cell options menu
+      await page.waitForSelector(cellOptionsSelector);
+      await page.click(cellOptionsSelector);
+
+      // click the table cell options Delete column entry
+      await page.waitForSelector(deleteColumnCellOptionSelector);
+      await page.click(deleteColumnCellOptionSelector);
+
+      await waitForNoTooltip(page);
+
+      await snapshot(page);
+    });
+  });
+
+  describe('delete row menu item', () => {
+    it('visual hints should be added to the table row on hover', async () => {
+      // open the table cell options menu
+      await page.waitForSelector(cellOptionsSelector);
+      await page.click(cellOptionsSelector);
+
+      // hover over the table cell options Delete row entry
+      await page.waitForSelector(deleteRowCellOptionSelector);
+      await page.hover(deleteRowCellOptionSelector);
+
+      await waitForNoTooltip(page);
+
+      await snapshot(page);
+    });
+
+    it('should remove the table row on click', async () => {
+      // open the table cell options menu
+      await page.waitForSelector(cellOptionsSelector);
+      await page.click(cellOptionsSelector);
+
+      // click the table cell options Delete row entry
+      await page.waitForSelector(deleteColumnCellOptionSelector);
+      await page.click(deleteRowCellOptionSelector);
+
+      await waitForNoTooltip(page);
+
+      await snapshot(page);
+    });
+  });
+});

package/src/__tests__/visual-regression/index.ts

@@ -1,44 +1,56 @@
-export {};
-
-// import { PuppeteerPage } from '@atlaskit/visual-regression/helper';
-// import { Device } from '@atlaskit/editor-test-helpers/vr-utils/device-viewport';
-// import {
-//   snapshot,
-//   initFullPageEditorWithAdf,
-// } from '../../../../__tests__/visual-regression/_utils';
-// import tableWith100ListItemsADF from './__fixtures__/table-with-100-numbered-list-items.json';
-// import {
-//   scrollToBottom,
-//   scrollToElement,
-// } from '../../../../__tests__/__helpers/page-objects/_editor';
-
-// async function initEditor(page: PuppeteerPage, adf: Object) {
-//   await initFullPageEditorWithAdf(page, adf, Device.LaptopMDPI, undefined, {});
-// }
-
-it.skip('TODO: restore vr `packages/editor/editor-plugin-table/src/plugins/table/__tests__/visual-regression/index.ts`', () => {});
-
-// describe('Snapshot Test: Table', () => {
-//   let page: PuppeteerPage;
-
-//   beforeEach(() => {
-//     page = global.page;
-//   });
-
-//   describe('numbered list', () => {
-//     it('should not overflow table cell, when there are more than 100 ordered list items', async () => {
-//       await initEditor(page, tableWith100ListItemsADF);
-
-//       // initial elements
-//       await snapshot(page);
-
-//       // 100th elements
-//       await scrollToElement(page, 'ol > li:nth-of-type(120)');
-//       await snapshot(page);
-
-//       // 1000th elements
-//       await scrollToBottom(page);
-//       await snapshot(page);
-//     });
-//   });
-// });
+import { PuppeteerPage } from '@atlaskit/visual-regression/helper';
+import { Device } from '@atlaskit/editor-test-helpers/vr-utils/device-viewport';
+import {
+  snapshot,
+  initFullPageEditorWithAdf,
+} from '@atlaskit/editor-test-helpers/vr-utils/base-utils';
+import tableWith100ListItemsADF from './__fixtures__/table-with-100-numbered-list-items.json';
+import {
+  scrollToBottom,
+  scrollToElement,
+} from '@atlaskit/editor-test-helpers/page-objects/editor';
+
+async function initEditor(page: PuppeteerPage, adf: Object) {
+  await initFullPageEditorWithAdf(
+    page,
+    adf,
+    Device.LaptopMDPI,
+    undefined,
+    {},
+    undefined,
+    undefined,
+    true,
+    false,
+    undefined,
+    {
+      group: 'editor',
+      packageName: 'editor-plugin-table',
+      exampleName: 'testing',
+    },
+  );
+}
+
+describe('Snapshot Test: Table', () => {
+  let page: PuppeteerPage;
+
+  beforeAll(async () => {
+    page = global.page;
+  });
+
+  describe('numbered list', () => {
+    it('should not overflow table cell, when there are more than 100 ordered list items', async () => {
+      await initEditor(page, tableWith100ListItemsADF);
+
+      // initial elements
+      await snapshot(page);
+
+      // 100th elements
+      await scrollToElement(page, 'ol > li:nth-of-type(120)');
+      await snapshot(page);
+
+      // 1000th elements
+      await scrollToBottom(page);
+      await snapshot(page);
+    });
+  });
+});

package/src/__tests__/visual-regression/sticky-header.ts

@@ -0,0 +1,55 @@
+import { PuppeteerPage } from '@atlaskit/visual-regression/helper';
+import {
+  snapshot,
+  initEditorWithAdf,
+  Appearance,
+} from '@atlaskit/editor-test-helpers/vr-utils/base-utils';
+import stickyHeaderWithHorizontalScroll from './__fixtures__/sticky-header-with-horizontal-scroll.json';
+import { scrollToElement } from '@atlaskit/editor-test-helpers/page-objects/editor';
+import { clickFirstCell } from '@atlaskit/editor-test-helpers/page-objects/table';
+
+const initEditor = async (page: PuppeteerPage, adf: any) => {
+  await initEditorWithAdf(
+    page,
+    {
+      appearance: Appearance.fullPage,
+      adf,
+      viewport: { width: 1280, height: 868 },
+      editorProps: {
+        allowTables: {
+          stickyHeaders: true,
+          allowColumnResizing: true,
+        },
+      },
+    },
+    {
+      group: 'editor',
+      packageName: 'editor-plugin-table',
+      exampleName: 'testing',
+    },
+  );
+};
+
+describe('Snapshot Test: Table', () => {
+  let page: PuppeteerPage;
+
+  beforeEach(async () => {
+    page = global.page;
+  });
+
+  describe('sticky header', () => {
+    it('should align with table cell when active', async () => {
+      await initEditor(page, stickyHeaderWithHorizontalScroll);
+
+      await clickFirstCell(page, true);
+
+      // scroll to bottom center to see scroll shadows
+      await scrollToElement(page, 'ol > li');
+      await snapshot(page);
+
+      // scroll to bottom right
+      await scrollToElement(page, 'ul > li');
+      await snapshot(page);
+    });
+  });
+});

package/src/plugins/table/commands/misc.ts

@@ -90,6 +90,7 @@ export const setTableRef = (ref?: HTMLTableElement) =>
           isHeaderRowEnabled: checkIfHeaderRowEnabled(state.selection),
           isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state.selection),
           decorationSet,
+          resizeHandleRowIndex: undefined,
           resizeHandleColumnIndex: undefined,
         },
       };
@@ -434,7 +435,10 @@ export const hideInsertColumnOrRowButton = () =>
     (tr) => tr.setMeta('addToHistory', false),
   );
 
-export const addResizeHandleDecorations = (columnIndex: number) =>
+export const addResizeHandleDecorations = (
+  rowIndex: number,
+  columnIndex: number,
+) =>
   createCommand(
     (state) => {
       const tableNode = findTable(state.selection);
@@ -449,10 +453,14 @@ export const addResizeHandleDecorations = (columnIndex: number) =>
       return {
         type: 'ADD_RESIZE_HANDLE_DECORATIONS',
         data: {
-          decorationSet: buildColumnResizingDecorations(columnIndex)({
+          decorationSet: buildColumnResizingDecorations(
+            rowIndex,
+            columnIndex,
+          )({
             tr: state.tr,
             decorationSet: getDecorations(state),
           }),
+          resizeHandleRowIndex: rowIndex,
           resizeHandleColumnIndex: columnIndex,
         },
       };

package/src/plugins/table/create-plugin-config.ts

@@ -9,7 +9,6 @@ export const pluginConfig = (config: PluginConfig = {}) => {
         allowHeaderRow: true,
         allowMergeCells: true,
         allowNumberColumn: true,
-        stickToolbarToBottom: true,
         permittedLayouts: 'all' as PermittedLayoutsDescriptor,
         allowControls: true,
         ...config,

package/src/plugins/table/event-handlers.ts

@@ -55,7 +55,6 @@ import {
   getMousePositionHorizontalRelativeByElement,
   getMousePositionVerticalRelativeByElement,
   getSelectedCellInfo,
-  hasResizeHandler,
   isCell,
   isColumnControlsDecorations,
   isCornerButton,
@@ -358,7 +357,8 @@ export const handleMouseMove =
 
       if (positionColumn !== null) {
         const { state, dispatch } = view;
-        const { resizeHandleColumnIndex } = getPluginState(state);
+        const { resizeHandleColumnIndex, resizeHandleRowIndex } =
+          getPluginState(state);
         const tableCell = closestElement(
           element,
           'td, th',
@@ -372,14 +372,16 @@ export const handleMouseMove =
           const columnEndIndexTarget =
             positionColumn === 'left' ? rect.left : rect.right;
 
+          const rowIndexTarget = rect.top;
+
           if (
             columnEndIndexTarget !== resizeHandleColumnIndex ||
-            !hasResizeHandler({ target: element, columnEndIndexTarget })
+            rowIndexTarget !== resizeHandleRowIndex
           ) {
-            return addResizeHandleDecorations(columnEndIndexTarget)(
-              state,
-              dispatch,
-            );
+            return addResizeHandleDecorations(
+              rowIndexTarget,
+              columnEndIndexTarget,
+            )(state, dispatch);
           }
         }
       }

package/src/plugins/table/pm-plugins/decorations/utils/column-resizing.ts

@@ -32,12 +32,14 @@ const updateLastCellElement =
     );
 
 export const buildColumnResizingDecorations =
-  (columnEndIndex: number): DecorationTransformer =>
+  (rowEndIndex: number, columnEndIndex: number): DecorationTransformer =>
   ({ tr, decorationSet }): DecorationSet => {
     const [columnResizesDecorations, lastCellElementsDecorations] =
       columnEndIndex < 0
         ? emptyDecorations
-        : createResizeHandleDecoration(tr, { right: columnEndIndex });
+        : createResizeHandleDecoration(tr, rowEndIndex, {
+            right: columnEndIndex,
+          });
 
     return composeDecorations([
       updateColumnResizeHandle(columnResizesDecorations),

package/src/plugins/table/pm-plugins/table-resizing/utils/dom.ts

@@ -4,10 +4,8 @@ import { EditorView } from 'prosemirror-view';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import {
   tableCellBorderWidth,
-  tableCellPadding,
   tableMarginTop,
 } from '@atlaskit/editor-common/styles';
-import { browser } from '@atlaskit/editor-common/utils';
 
 import {
   closestElement,
@@ -114,15 +112,11 @@ export const updateStickyMargins = (table: HTMLElement) => {
 
   const paddingTop =
     parsePx(window.getComputedStyle(row).paddingTop || '') || 0;
-  const firstRowHeight = row.clientHeight - paddingTop - 2; /* border */
-
-  // firefox handles margin and padding differently
-  // when applied with tables
-  table.style.marginTop = `${
-    browser.gecko
-      ? firstRowHeight + tableCellPadding - tableCellBorderWidth
-      : tableMarginTop + firstRowHeight
-  }px`;
+
+  const firstRowHeight =
+    row.getBoundingClientRect().height - paddingTop - tableCellBorderWidth;
+
+  table.style.marginTop = `${tableMarginTop + firstRowHeight}px`;
 };
 
 export const applyColWidthsToStickyRow = (

package/src/plugins/table/reducer.ts

@@ -80,12 +80,14 @@ export default (
         ...pluginState,
         ...action.data,
         resizeHandleColumnIndex: undefined,
+        resizeHandleRowIndex: undefined,
       };
 
     case 'ADD_RESIZE_HANDLE_DECORATIONS':
       if (
         action.data.resizeHandleColumnIndex ===
-        pluginState.resizeHandleColumnIndex
+          pluginState.resizeHandleColumnIndex &&
+        action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex
       ) {
         return pluginState;
       }

package/src/plugins/table/types.ts

@@ -46,7 +46,6 @@ export interface PluginConfig {
   allowAddColumnWithCustomStep?: boolean;
   allowCollapse?: boolean;
   isHeaderRowRequired?: boolean;
-  stickToolbarToBottom?: boolean;
   permittedLayouts?: PermittedLayoutsDescriptor;
   allowControls?: boolean;
   stickyHeaders?: boolean;
@@ -116,6 +115,7 @@ export interface TablePluginState {
   isFullWidthModeEnabled?: boolean;
   layout?: TableLayout;
   ordering?: TableColumnOrdering;
+  resizeHandleRowIndex?: number;
   resizeHandleColumnIndex?: number;
   tableCellOptimization?: boolean;
   // for table wrap/collapse
@@ -172,7 +172,11 @@ export type TablePluginAction =
     }
   | {
       type: 'ADD_RESIZE_HANDLE_DECORATIONS';
-      data: { decorationSet: DecorationSet; resizeHandleColumnIndex: number };
+      data: {
+        decorationSet: DecorationSet;
+        resizeHandleRowIndex: number;
+        resizeHandleColumnIndex: number;
+      };
     }
   | { type: 'CLEAR_HOVER_SELECTION'; data: { decorationSet: DecorationSet } }
   | { type: 'SHOW_RESIZE_HANDLE_LINE'; data: { decorationSet: DecorationSet } }
@@ -302,6 +306,7 @@ export const TableCssClassName = {
   LAST_ITEM_IN_CELL: `${tablePrefixSelector}-last-item-in-cell`,
 
   WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`,
+  WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`,
 };
 
 export interface ToolbarMenuConfig {

package/src/plugins/table/ui/common-styles.ts

@@ -67,6 +67,13 @@ import { token } from '@atlaskit/tokens';
 
 const cornerControlHeight = tableToolbarSize + 1;
 
+/*
+  compensating for half of the insert column button
+  that is aligned to the right edge initially on hover of the top right column control when table overflown,
+  its center should be aligned with the edge
+*/
+const insertColumnButtonOffset = tableInsertColumnButtonSize / 2;
+
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
   th,td {
@@ -280,7 +287,7 @@ export const tableStyles = (props: ThemeProps) => css`
     /* add a little bit so the scroll lines up with the table */
     .${ClassName.TABLE_STICKY} tr.sticky::after {
       content: ' ';
-      width: 1px;
+      width: ${insertColumnButtonOffset + 1}px;
     }
 
     /* To fix jumpiness caused in Chrome Browsers for sticky headers */
@@ -394,18 +401,6 @@ export const tableStyles = (props: ThemeProps) => css`
         `,
         )};
       }
-
-      .${ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER} {
-        position: relative;
-
-        ${InsertMarker(
-          props,
-          `
-          right: -1px;
-          top: -12px;
-        `,
-        )};
-      }
     }
 
     .${ClassName.CORNER_CONTROLS}.sticky {
@@ -592,6 +587,12 @@ export const tableStyles = (props: ThemeProps) => css`
     /* Table */
     .${ClassName.TABLE_NODE_WRAPPER} > table {
       table-layout: fixed;
+      white-space: normal;
+      border-top: none;
+
+      > tbody > tr {
+        white-space: pre-wrap;
+      }
 
       .${ClassName.COLUMN_CONTROLS_DECORATIONS} + * {
         margin-top: 0;
@@ -676,13 +677,8 @@ export const tableStyles = (props: ThemeProps) => css`
       left: -${tableToolbarSize}px;
     }
     .${ClassName.TABLE_NODE_WRAPPER} {
-      /*
-      compensating for half of the insert column button
-      that is aligned to the right edge initially on hover of the top right column control when table overflown,
-      its center should be aligned with the edge
-       */
-      padding-right: ${tableInsertColumnButtonSize / 2}px;
-      margin-right: -${tableInsertColumnButtonSize / 2}px;
+      padding-right: ${insertColumnButtonOffset}px;
+      margin-right: -${insertColumnButtonOffset}px;
       padding-bottom: ${tableScrollbarOffset}px;
       margin-bottom: -${tableScrollbarOffset}px;
       /* fixes gap cursor height */