@atlaskit/editor-plugin-table 0.2.6 → 1.0.1

package/dist/types/plugins/table/ui/messages.d.ts

@@ -34,5 +34,20 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
+    confirmDeleteLinkedModalMessagePrefix: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    confirmModalCheckboxLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    deleteElementTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "0.2.6",
+  "version": "1.0.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -18,9 +18,9 @@
     "releaseModel": "scheduled"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^24.0.0",
-    "@atlaskit/editor-common": "^71.0.0",
-    "@atlaskit/editor-shared-styles": "^2.2.0",
+    "@atlaskit/adf-schema": "^25.0.0",
+    "@atlaskit/editor-common": "^72.0.0",
+    "@atlaskit/editor-shared-styles": "^2.3.0",
     "@atlaskit/editor-tables": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/theme": "^12.1.0",
@@ -51,8 +51,8 @@
   "devDependencies": {
     "@atlaskit/analytics-next": "^8.3.3",
     "@atlaskit/button": "^16.5.0",
-    "@atlaskit/editor-core": "^176.0.0",
-    "@atlaskit/editor-test-helpers": "^17.2.0",
+    "@atlaskit/editor-core": "^177.0.0",
+    "@atlaskit/editor-test-helpers": "^18.0.0",
     "@atlaskit/link-provider": "^1.3.0",
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",

package/report.api.md

@@ -15,9 +15,9 @@
 
 ```ts
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { EditorPlugin } from '@atlaskit/editor-common/types';
 import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import { TableLayout } from '@atlaskit/adf-schema';
 
 // @public (undocumented)
@@ -60,8 +60,6 @@ interface PluginConfig {
   // (undocumented)
   permittedLayouts?: PermittedLayoutsDescriptor;
   // (undocumented)
-  stickToolbarToBottom?: boolean;
-  // (undocumented)
   stickyHeaders?: boolean;
   // (undocumented)
   stickyHeadersOptimization?: boolean;
@@ -94,9 +92,11 @@ interface TablePluginOptions {
 }
 
 // @public (undocumented)
-export const tablesPlugin: (
-  options?: TablePluginOptions | undefined,
-) => EditorPlugin;
+export const tablesPlugin: NextEditorPlugin<
+  'table',
+  never,
+  TablePluginOptions | undefined
+>;
 
 // (No @packageDocumentation comment for this package)
 ```

package/src/__tests__/integration/__fixtures__/table-and-paragraph-adf.json

@@ -0,0 +1,130 @@
+{
+    "version": 1,
+    "type": "doc",
+    "content": [
+        {
+            "type": "table",
+            "attrs": {
+                "isNumberColumnEnabled": false,
+                "layout": "default",
+                "localId": "e1365400-6226-4bb9-b3f1-b80fd3ae640a"
+            },
+            "content": [
+                {
+                    "type": "tableRow",
+                    "content": [
+                        {
+                            "type": "tableHeader",
+                            "attrs": {},
+                            "content": [
+                                {
+                                    "type": "paragraph",
+                                    "content": []
+                                }
+                            ]
+                        },
+                        {
+                            "type": "tableHeader",
+                            "attrs": {},
+                            "content": [
+                                {
+                                    "type": "paragraph",
+                                    "content": []
+                                }
+                            ]
+                        },
+                        {
+                            "type": "tableHeader",
+                            "attrs": {},
+                            "content": [
+                                {
+                                    "type": "paragraph",
+                                    "content": []
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    "type": "tableRow",
+                    "content": [
+                        {
+                            "type": "tableCell",
+                            "attrs": {},
+                            "content": [
+                                {
+                                    "type": "paragraph",
+                                    "content": []
+                                }
+                            ]
+                        },
+                        {
+                            "type": "tableCell",
+                            "attrs": {},
+                            "content": [
+                                {
+                                    "type": "paragraph",
+                                    "content": []
+                                }
+                            ]
+                        },
+                        {
+                            "type": "tableCell",
+                            "attrs": {},
+                            "content": [
+                                {
+                                    "type": "paragraph",
+                                    "content": []
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    "type": "tableRow",
+                    "content": [
+                        {
+                            "type": "tableCell",
+                            "attrs": {},
+                            "content": [
+                                {
+                                    "type": "paragraph",
+                                    "content": []
+                                }
+                            ]
+                        },
+                        {
+                            "type": "tableCell",
+                            "attrs": {},
+                            "content": [
+                                {
+                                    "type": "paragraph",
+                                    "content": []
+                                }
+                            ]
+                        },
+                        {
+                            "type": "tableCell",
+                            "attrs": {},
+                            "content": [
+                                {
+                                    "type": "paragraph",
+                                    "content": []
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "type": "paragraph",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "text"
+                }
+            ]
+        }
+    ]
+}

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

@@ -16,6 +16,7 @@ import {
 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';
 
 BrowserTestCase(
   'should floating toolbar context menu sit above other context menu layers',
@@ -167,3 +168,56 @@ BrowserTestCase(
     expect(doc).toMatchCustomDocSnapshot(testName);
   },
 );
+
+BrowserTestCase(
+  'should show tooltip on hover on disabled sort button then remove it on mouse out',
+  { 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: documentWithMergedCells,
+    });
+    const tableFloatingToolbarContextMenuSelector = `div[aria-label="Table floating controls"][data-editor-popup=true]`;
+    const sortAtoZButtonSelector =
+      '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
+    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();
+
+    // 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();
+    const tooltip = await page.$(tooltipSelector);
+    await tooltip.waitForExist();
+    expect((await page.$$(tooltipSelector)).length).toBe(1);
+
+    // Tooltip should be removed after mouseout to next button
+    const sortZtoAButton = await page.$(sortZtoAButtonSelector);
+    await sortZtoAButton.moveTo();
+    await tooltip.waitUntil(async () => {
+      return (await page.$$(tooltipSelector)).length === 0;
+    });
+  },
+);

package/src/__tests__/integration/meta-arrowup-cursor-in-first-row.ts

@@ -0,0 +1,37 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import {
+  fullpage,
+  setProseMirrorTextSelection,
+  expectToMatchSelection,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+import tableAdf from './__fixtures__/table-and-paragraph-adf.json';
+
+BrowserTestCase(
+  'meta-arrowup-cursor-in-first-row.ts: pressing command/ctrl + arrow up should move cursor into first row',
+  {},
+  async (client: any) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {},
+      defaultValue: tableAdf,
+    });
+
+    await setProseMirrorTextSelection(page, { anchor: 49 });
+
+    const keys = page.isWindowsPlatform()
+      ? ['Control', 'Home']
+      : ['Meta', 'ArrowUp'];
+
+    await page.keys(keys, true);
+
+    await expectToMatchSelection(page, { type: 'text', to: 4, from: 4 });
+  },
+);

package/src/__tests__/unit/color-picker.ts

@@ -0,0 +1,100 @@
+import {
+  doc,
+  DocBuilder,
+  p,
+  table,
+  tdCursor,
+  tdEmpty,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type {
+  FloatingToolbarButton,
+  FloatingToolbarItem,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
+import dataConsumerPlugin from '@atlaskit/editor-core/src/plugins/data-consumer';
+import extensionPlugin from '@atlaskit/editor-core/src/plugins/extension';
+import tablePlugin from '../../plugins/table';
+import { setEditorFocus, setTableRef } from '../../plugins/table/commands';
+import { getToolbarConfig } from '../../plugins/table/toolbar';
+
+const formatMessage: (t: { id: string }) => string = (message) =>
+  `${message.id}`;
+
+describe('color picker', () => {
+  /**
+   * Use `createEditorFactory` here to enable referentiality as
+   * `createProsemirrorEditorFactory` has some issues with correctly mimicking
+   * old state for the unique localId plugin
+   */
+  const createEditorFn = createProsemirrorEditorFactory();
+  const createEditor = (doc: DocBuilder) => {
+    const output = createEditorFn({
+      doc,
+
+      attachTo: document.body,
+      preset: new Preset<LightEditorPlugin>()
+        .add(dataConsumerPlugin)
+        .add(extensionPlugin)
+        .add(tablePlugin),
+    });
+
+    // Prep the table plugin state a little
+    const { editorView } = output;
+    const { dispatch } = editorView;
+    const tableRef = document.querySelector(
+      '.ProseMirror table',
+    ) as HTMLTableElement;
+    setEditorFocus(true)(output.editorView.state, dispatch);
+    setTableRef(tableRef)(output.editorView.state, dispatch);
+
+    return output;
+  };
+
+  it('should return a corect color picker option if allowBackgroundColor enabled', async () => {
+    const { editorView } = createEditor(
+      doc(p('text'), table()(tr(tdCursor, tdEmpty))),
+    );
+    const getEditorContainerWidth = () => ({ width: 500 });
+    const editorAnalyticsAPIFake: EditorAnalyticsAPI = {
+      attachAnalyticsEvent: jest.fn().mockReturnValue(() => jest.fn()),
+    };
+
+    // Enable tableCellOptionsInFloatingToolbar
+    const getEditorFeatureFlags: GetEditorFeatureFlags = jest
+      .fn()
+      .mockReturnValue({
+        tableCellOptionsInFloatingToolbar: true,
+      });
+
+    // Enable allowBackgroundColor feature flag
+    const { state } = editorView;
+    (state as any).tablePlugin$.pluginConfig.allowBackgroundColor = true;
+
+    // Create the editor
+    const config = getToolbarConfig(
+      getEditorContainerWidth,
+      editorAnalyticsAPIFake,
+      getEditorFeatureFlags,
+      () => editorView,
+    )({})(state, { formatMessage } as any, {} as any)!;
+
+    // Let's find the colorPicker from the option items list
+    const items =
+      typeof config.items === 'function'
+        ? config.items(state.doc.firstChild!)
+        : config.items;
+
+    const option = items.find(
+      (item: FloatingToolbarItem<any>) =>
+        item.type === 'select' && item.id === 'editor.table.colorPicker',
+    )! as FloatingToolbarButton<any>;
+    expect(option).not.toBeUndefined();
+  });
+});

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

@@ -132,10 +132,7 @@ describe('getToolbarConfig', () => {
       );
 
       const button = getButton(editorView);
-      expect(button.confirmDialog).toEqual({
-        message: 'fabric.editor.tables.confirmDeleteLinkedModalMessage',
-        okButtonLabel: 'fabric.editor.tables.confirmDeleteLinkedModalOKButton',
-      });
+      expect(typeof button.confirmDialog).toBe('function');
     });
   });
 });

package/src/__tests__/unit/keymap.ts

@@ -101,7 +101,7 @@ describe('table keymap', () => {
     .add([statusPlugin, { menuDisabled: false }])
     .add([mediaPlugin, { allowMediaSingle: true }])
     .add([analyticsPlugin, { createAnalyticsEvent }])
-    .add([featureFlagsPlugin]);
+    .add([featureFlagsPlugin, {}]);
 
   const editor = (doc: DocBuilder) =>
     createEditor<TablePluginState, PluginKey>({

package/src/__tests__/unit/nodeviews/cell.ts

@@ -100,70 +100,65 @@ describe('table -> nodeviews -> tableCell.tsx', () => {
     });
   });
 
-  describe('with tableCellOptimization on', () => {
-    describe('nodeview update', () => {
-      it('should not recreate nodeviews on attrs update', () => {
-        const {
-          editorView,
-          refs: { pos },
-        } = editor(
-          doc(p('text'), table()(tr(td()(p('{pos}text')), tdEmpty, tdEmpty))),
-          {
-            tableCellOptimization: true,
-          },
-        );
-        const { state, dispatch } = editorView;
-        const cell = findCellClosestToPos(state.doc.resolve(pos))!;
-        const background = tableBackgroundColorNames.get('red');
-        const updateSpy = jest.spyOn(TableCellViews.prototype, 'update');
-        dispatch(setCellAttrs(cell, { background })(state.tr));
-        expect(updateSpy).toHaveReturnedWith(true);
-        const cellDomNode = document.querySelector('td')!;
-        expect(rgbToHex(cellDomNode.style.backgroundColor!)).toEqual(
-          background,
-        );
-      });
+  describe('nodeview update', () => {
+    it('should not recreate nodeviews on attrs update', () => {
+      const {
+        editorView,
+        refs: { pos },
+      } = editor(
+        doc(p('text'), table()(tr(td()(p('{pos}text')), tdEmpty, tdEmpty))),
+        {
+          tableCellOptimization: true,
+        },
+      );
+      const { state, dispatch } = editorView;
+      const cell = findCellClosestToPos(state.doc.resolve(pos))!;
+      const background = tableBackgroundColorNames.get('red');
+      const updateSpy = jest.spyOn(TableCellViews.prototype, 'update');
+      dispatch(setCellAttrs(cell, { background })(state.tr));
+      expect(updateSpy).toHaveReturnedWith(true);
+      const cellDomNode = document.querySelector('td')!;
+      expect(rgbToHex(cellDomNode.style.backgroundColor!)).toEqual(background);
+    });
 
-      it('preserves correct rowspan and colspan after merge cells and undo', () => {
-        jest.spyOn(domHelpers, 'getTop').mockImplementation(() => 0);
+    it('should preserve the correct rowspan and colspan after merge cells and undo', () => {
+      jest.spyOn(domHelpers, 'getTop').mockImplementation(() => 0);
 
-        const originalDoc = doc(
+      const originalDoc = doc(
+        table({ localId: TABLE_LOCAL_ID })(
+          tr(th()(p('{<cell}')), thEmpty, thEmpty),
+          tr(td()(p('{cell>}')), tdEmpty, tdEmpty),
+          tr(tdEmpty, tdEmpty, tdEmpty),
+        ),
+      );
+      const { editorView } = editor(originalDoc, {
+        stickyHeaders: true,
+      });
+      const { state, dispatch } = editorView;
+
+      dispatch(mergeCells(state.tr));
+      expect(editorView.state.doc).toEqualDocument(
+        doc(
           table({ localId: TABLE_LOCAL_ID })(
-            tr(th()(p('{<cell}')), thEmpty, thEmpty),
-            tr(td()(p('{cell>}')), tdEmpty, tdEmpty),
+            tr(th({ rowspan: 2 })(p('')), thEmpty, thEmpty),
+            tr(tdEmpty, tdEmpty),
             tr(tdEmpty, tdEmpty, tdEmpty),
           ),
-        );
-        const { editorView } = editor(originalDoc, {
-          stickyHeaders: true,
-          tableCellOptimization: true,
-        });
-        const { state, dispatch } = editorView;
+        ),
+      );
 
-        dispatch(mergeCells(state.tr));
-        expect(editorView.state.doc).toEqualDocument(
-          doc(
-            table({ localId: TABLE_LOCAL_ID })(
-              tr(th({ rowspan: 2 })(p('')), thEmpty, thEmpty),
-              tr(tdEmpty, tdEmpty),
-              tr(tdEmpty, tdEmpty, tdEmpty),
-            ),
-          ),
-        );
+      sendKeyToPm(editorView, 'Mod-z');
+      validateUnmergedDomCells();
+      expect(editorView.state.doc).toEqualDocument(originalDoc);
+    });
 
-        sendKeyToPm(editorView, 'Mod-z');
-        validateUnmergedDomCells();
-        expect(editorView.state.doc).toEqualDocument(originalDoc);
+    // make sure all colspan/rowspan attributes are removed from cells
+    function validateUnmergedDomCells() {
+      const cells = document.querySelectorAll('table td, table th');
+      Array.from(cells).forEach((cell) => {
+        expect(cell.getAttribute('rowspan')).toBeFalsy();
+        expect(cell.getAttribute('colspan')).toBeFalsy();
       });
-
-      // make sure all colspan/rowspan attributes are removed from cells
-      function validateUnmergedDomCells() {
-        const cells = document.querySelectorAll('table td, table th');
-        Array.from(cells).forEach((cell) => {
-          expect(cell.getAttribute('rowspan')).toBeFalsy();
-          expect(cell.getAttribute('colspan')).toBeFalsy();
-        });
-      }
-    });
+    }
   });
 });