@atlaskit/editor-plugin-table 0.0.2 → 0.0.3

package/src/plugins/table/__tests__/integration/resize-handler.ts

@@ -0,0 +1,101 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import {
+  fullpage,
+  quickInsert,
+  hoverResizeHandler,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  clickFirstCell,
+  getSelectorForTableCell,
+} from '@atlaskit/editor-test-helpers/page-objects/table';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+interface BBoxWithId {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  id: string;
+}
+
+function calcOffset(
+  element: 'start' | 'target',
+  side: 'left' | 'top',
+  rect: BBoxWithId,
+): number {
+  if (element === 'target' && side === 'left') {
+    return -(rect.width / 2);
+  } else if (element === 'start' && side === 'left') {
+    return +(rect.width * 0.8);
+  }
+
+  return 0;
+}
+
+/*
+ * This is a regression test.
+ *
+ * The goal of this test is to make sure
+ * we can resize the table after a CellSelectio, and here is the why:
+ *
+ *
+ * Given this cell A1
+ *
+ * ```
+ *    ▁▁▁▁▁▁▁▁▁▁▁▁▁
+ *   |           ▒▒|
+ *   |     A1    ▒▒|
+ *   |           ▒▒|
+ *    ▔▔▔▔▔▔▔▔▔▔▔▔▔
+ * ```
+ *
+ * This element is a div, and every time the user hovers it, we should display a resize line.
+ * However, keeping a div for each cell in a table increases the HTML a lot,
+ * resulting in performance degradation to any DOM diff action.
+ * To avoid that, we decided to add the div on demand.
+ * Then, when the user comes close to that gap, we added a DIV.
+ * Next, we needed to check if the handle was already there using the resizeHandleColumnIndex from the PluginState.
+ * However, if that state was not clean properly, we could end up not adding the DIV element,
+ * then the user could not resize the column until they hover another one.
+ *
+ * We solved this problem search for the decorations too: if the DIV is not there, we will add it.
+ */
+BrowserTestCase(
+  'Should display the resizer handler after a cellselection',
+  // We are skipping other browsers because this test relies on drag and drop,
+  // and this API isn't stable in other browsers
+  { skip: ['firefox', 'safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        advanced: true,
+      },
+    });
+    await quickInsert(page, 'Table');
+
+    await clickFirstCell(page);
+
+    const firstCell = getSelectorForTableCell({
+      row: 2,
+      cell: 1,
+    });
+    const lastCell = getSelectorForTableCell({ row: 2, cell: 2 });
+    await hoverResizeHandler(page, 2, 1);
+
+    await page.simulateUserSelection(firstCell, lastCell, calcOffset);
+
+    // if it is not possible to resize this method will fail
+    await hoverResizeHandler(page, 2, 1);
+
+    expect(true).toBe(true);
+  },
+);

package/src/plugins/table/__tests__/integration/resize.ts

@@ -0,0 +1,342 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import { tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
+import { PluginKey } from 'prosemirror-state';
+import {
+  editable,
+  getDocFromElement,
+  fullpage,
+  resizeColumn,
+  selectColumns,
+  updateEditorProps,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+
+import {
+  insertColumn,
+  clickFirstCell,
+  selectTable,
+} from '@atlaskit/editor-test-helpers/page-objects/table';
+
+import {
+  tableWithRowSpan,
+  tableWithRowSpanAndColSpan,
+  twoColFullWidthTableWithContent,
+  tableInsideColumns,
+  resizedTableWithStackedColumns,
+  tableForBulkResize,
+  tableForBulkResize3Cols,
+  tableForBulkResizeWithNumberCol,
+} from './__fixtures__/resize-documents';
+import { tableWithMinWidthColumnsDocument } from './__fixtures__/table-with-min-width-columns-document';
+import { pluginKey as tableResizingPluginKey } from '@atlaskit/editor-core/src/plugins/table/pm-plugins/table-resizing';
+
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+BrowserTestCase(
+  'Can resize normally with a rowspan in the non last column.',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(tableWithRowSpan),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await resizeColumn(page, { cellHandlePos: 2, resizeWidth: 50 });
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'Can resize normally with a rowspan and colspan',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(tableWithRowSpanAndColSpan),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await resizeColumn(page, { cellHandlePos: 22, resizeWidth: -50 });
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'Can resize normally on a full width table with content',
+  { skip: ['firefox', 'safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(twoColFullWidthTableWithContent),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await resizeColumn(page, { cellHandlePos: 2, resizeWidth: -100 });
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  `Created column should be set to ${tableNewColumnMinWidth}px`,
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(tableWithMinWidthColumnsDocument),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await insertColumn(page, 0, 'right');
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'Can resize the last column when table is nested in Columns',
+  { skip: ['firefox', 'safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(tableInsideColumns),
+      allowTables: {
+        advanced: true,
+      },
+      allowLayouts: true,
+    });
+
+    await resizeColumn(page, { cellHandlePos: 10, resizeWidth: -100 });
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'Should stack columns to the left when widths of some of the columns equal minWidth',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(resizedTableWithStackedColumns),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await resizeColumn(page, { cellHandlePos: 14, resizeWidth: -200 });
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+[
+  {
+    test: 'Should stack columns to the right and go to overflow',
+    featureFlags: {},
+  },
+  {
+    test:
+      'Should stack columns to the right and go to overflow with overflowShadowsOptimisation',
+    featureFlags: {
+      tableOverflowShadowsOptimization: true,
+    },
+  },
+].forEach(({ test, featureFlags }) => {
+  BrowserTestCase(test, {}, async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(resizedTableWithStackedColumns),
+      allowTables: {
+        advanced: true,
+      },
+      featureFlags,
+    });
+
+    await resizeColumn(page, { cellHandlePos: 2, resizeWidth: 420 });
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  });
+});
+
+BrowserTestCase(
+  'Should bulk resize 3 columns in 4 columns table',
+  { skip: ['firefox', 'safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(tableForBulkResize3Cols),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await clickFirstCell(page);
+    await selectTable(page);
+    await resizeColumn(page, { cellHandlePos: 6, resizeWidth: -20 });
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'Should recover from overflow when number col is selected',
+  { skip: ['firefox', 'safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(tableForBulkResizeWithNumberCol),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await clickFirstCell(page);
+    await selectTable(page);
+    await resizeColumn(page, { cellHandlePos: 2, resizeWidth: -20 });
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'Should bulk resize selected columns',
+  { skip: ['firefox', 'safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(tableForBulkResize),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await clickFirstCell(page);
+    await selectColumns(page, [0, 1]);
+    await resizeColumn(page, { cellHandlePos: 2, resizeWidth: 52 });
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'Can resize normally while editor changes its appearance',
+  { skip: ['firefox', 'safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(tableForBulkResize),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    const resizeHandlePos = 2;
+
+    // We grab the resize handle and then change editor appearance to full-widths
+    // in which case we expect the editor not to throw
+    await (page as any).browser.execute(
+      (handlePos: number, pluginKey: PluginKey) => {
+        const view = (window as any).__editorView;
+        if (!view) {
+          return;
+        }
+        view.dispatch(
+          view.state.tr.setMeta(pluginKey, {
+            type: 'SET_RESIZE_HANDLE_POSITION',
+            data: {
+              resizeHandlePos: handlePos,
+            },
+          }),
+        );
+        view.dom.dispatchEvent(
+          new MouseEvent('mousedown', { clientX: handlePos }),
+        );
+      },
+      resizeHandlePos,
+      tableResizingPluginKey,
+    );
+
+    // doesn't reject the promise (throw)
+    expect(updateEditorProps(page, { appearance: 'full-width' })).resolves
+      .toBeUndefined;
+  },
+);

package/src/plugins/table/__tests__/integration/scale.ts

@@ -0,0 +1,67 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import {
+  editable,
+  getDocFromElement,
+  fullpage,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  insertColumn,
+  deleteColumn,
+} from '@atlaskit/editor-test-helpers/page-objects/table';
+import {
+  tableWithManyMinWidthCols,
+  tableInOverflow,
+} from './__fixtures__/scale';
+
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+BrowserTestCase(
+  'Should scale remaining columns when adding a new column preventing from going to overflow',
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(tableWithManyMinWidthCols),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await insertColumn(page, 5, 'left');
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'Should scale remaining columns when deleting a column recovering table from overflow',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(tableInOverflow),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await deleteColumn(page, 1);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);

package/src/plugins/table/__tests__/integration/table-controls-selection.ts

@@ -0,0 +1,70 @@
+//TODO: [ED-15027] remove and relocate this test once the behaviour has been corrected.\
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import { BrowserObject } from '@atlaskit/webdriver-runner/wd-wrapper';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+import {
+  fullpage,
+  expectToMatchSelection,
+  setProseMirrorTextSelection,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import type { WebDriverPage } from '@atlaskit/editor-test-helpers/integration/types';
+import adf from './__fixtures__/table-with-multiline-date.adf.json';
+
+describe('table with multiline date', () => {
+  const initEditor = async ({
+    client,
+    selection,
+    adf,
+  }: {
+    client: BrowserObject;
+    selection: { anchor: number; head: number };
+    adf: string;
+  }): Promise<WebDriverPage> => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    const props = {
+      appearance: fullpage.appearance,
+      defaultValue: adf,
+      allowTextAlignment: true,
+      allowTables: {
+        advanced: true,
+        allowColumnResizing: true,
+      },
+      allowDate: true,
+    };
+
+    await mountEditor(page, props, undefined, { clickInEditor: false });
+
+    await page.waitForSelector('.inlineNodeView');
+
+    await setProseMirrorTextSelection(page, selection);
+
+    return page;
+  };
+  BrowserTestCase(
+    'Does not select table corner controls when navigating up from a multiline node inside a table',
+    {
+      skip: ['firefox', 'safari'],
+    },
+    async (client: BrowserObject) => {
+      const page = await initEditor({
+        client,
+        selection: { anchor: 27, head: 27 },
+        adf,
+      });
+
+      await page.keys('ArrowUp');
+
+      await expectToMatchSelection(page, {
+        type: 'text',
+        anchor: 27,
+        head: 27,
+      });
+    },
+  );
+});

package/src/plugins/table/ui/FloatingContextualButton/index.tsx

@@ -83,8 +83,8 @@ export class FloatingContextualButtonInner extends React.Component<
             selection: editorView.state.selection.toJSON(),
             position: targetCellPosition,
             docSize: editorView.state.doc.nodeSize,
-            error: error.toString(),
-            errorStack: error.stack || undefined,
+            error: error instanceof Error ? error.message : String(error),
+            errorStack: error instanceof Error ? error.stack : undefined,
           },
         };
         dispatchAnalyticsEvent(payload);

package/types/package.json

@@ -3,5 +3,12 @@
   "main": "../dist/cjs/types.js",
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
-  "types": "../dist/types/types.d.ts"
+  "types": "../dist/types/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/types.d.ts"
+      ]
+    }
+  }
 }