@atlaskit/editor-plugin-table 0.2.0 → 0.2.2

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/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/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/types.ts

@@ -46,7 +46,6 @@ export interface PluginConfig {
   allowAddColumnWithCustomStep?: boolean;
   allowCollapse?: boolean;
   isHeaderRowRequired?: boolean;
-  stickToolbarToBottom?: boolean;
   permittedLayouts?: PermittedLayoutsDescriptor;
   allowControls?: boolean;
   stickyHeaders?: boolean;

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 */
@@ -580,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;
@@ -664,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 */

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

@@ -38,7 +38,6 @@ import {
   tableToolbarSize,
   tableInsertColumnButtonSize,
   tableDeleteButtonSize,
-  tableControlsSpacing,
 } from './consts';
 
 import { TableCssClassName as ClassName } from '../types';
@@ -273,11 +272,6 @@ export const OverflowShadow = (props: ThemeProps) => css`
       border-left: 1px solid ${tableBorderColor(props)};
     }
   }
-  .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY} {
-    .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-      top: ${tableControlsSpacing}px;
-    }
-  }
 `;
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 

package/src/plugins/table/utils/column-controls.ts

@@ -195,7 +195,7 @@ export const colWidthsForRow = (
   if (copyTarget) {
     // either from the first row while it's still in the table
     const cellInfos = maphElem(copyTarget, (cell) => ({
-      width: cell.offsetWidth,
+      width: cell.getBoundingClientRect().width,
       colspan: Number(cell.getAttribute('colspan') || 1),
       colwidth: cell.dataset.colwidth,
     }));

package/types/package.json

@@ -3,6 +3,7 @@
   "main": "../dist/cjs/plugins/table/types.js",
   "module": "../dist/esm/plugins/table/types.js",
   "module:es2019": "../dist/es2019/plugins/table/types.js",
+  "sideEffects": false,
   "types": "../dist/types/plugins/table/types.d.ts",
   "typesVersions": {
     ">=4.0 <4.5": {

package/ui/common-styles/package.json

@@ -3,6 +3,7 @@
   "main": "../../dist/cjs/plugins/table/ui/common-styles.js",
   "module": "../../dist/esm/plugins/table/ui/common-styles.js",
   "module:es2019": "../../dist/es2019/plugins/table/ui/common-styles.js",
+  "sideEffects": false,
   "types": "../../dist/types/plugins/table/ui/common-styles.d.ts",
   "typesVersions": {
     ">=4.0 <4.5": {

package/ui/consts/package.json

@@ -3,6 +3,7 @@
   "main": "../../dist/cjs/plugins/table/ui/consts.js",
   "module": "../../dist/esm/plugins/table/ui/consts.js",
   "module:es2019": "../../dist/es2019/plugins/table/ui/consts.js",
+  "sideEffects": false,
   "types": "../../dist/types/plugins/table/ui/consts.d.ts",
   "typesVersions": {
     ">=4.0 <4.5": {