@atlaskit/editor-plugin-table 0.2.5 → 1.0.0

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();
-        });
-      }
-    });
+    }
   });
 });

package/src/__tests__/unit/pm-plugins/sticky-headers/tableRow.tsx

@@ -54,9 +54,10 @@ describe('TableRowNodeView', () => {
     return createEditor({
       doc,
       preset: new Preset<LightEditorPlugin>()
-        .add([tablePlugin])
+        .add(tablePlugin)
         .add([featureFlagsPlugin, featureFlags]),
       pluginKey,
+      attachTo: document.body,
     });
   };
   let editorView: EditorView;
@@ -81,7 +82,7 @@ describe('TableRowNodeView', () => {
       const editorWithTableSticky = (doc: DocBuilder) =>
         createEditor({
           doc,
-          preset: new Preset<LightEditorPlugin>().add([tablePlugin]),
+          preset: new Preset<LightEditorPlugin>().add(tablePlugin),
           pluginKey,
         });
       const editorData = editorWithTableSticky(
@@ -349,44 +350,42 @@ describe('TableRowNodeView', () => {
       tableRowNodeView.dom = tableRowDom;
     });
 
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
     function getTableElements(tableRowDom: HTMLTableRowElement) {
       const tableWrapper = tableRowDom.closest(
         `.${TableCssClassName.NODEVIEW_WRAPPER}`,
       );
       const tableElement = tableRowDom.closest('table');
       const tableParent = tableElement?.parentElement;
-
       const scrollContainer = tableWrapper?.parentElement;
       return { tableWrapper, tableElement, tableParent, scrollContainer };
     }
-
     function mockScrollPositions(tableRowDom: HTMLTableRowElement) {
       const { tableWrapper, tableParent, scrollContainer } =
         getTableElements(tableRowDom);
       (findOverflowScrollParent as unknown as jest.SpyInstance).mockReturnValue(
         scrollContainer,
       );
-
       jest
         .spyOn(scrollContainer as HTMLElement, 'getBoundingClientRect')
         .mockImplementationOnce(() => ({
           ...baseBoundingRect,
           top: -50,
         }));
-
       jest
         .spyOn(tableParent as HTMLElement, 'getBoundingClientRect')
         .mockImplementationOnce(() => ({
           ...baseBoundingRect,
         }));
-
       jest
         .spyOn(tableWrapper as HTMLElement, 'getBoundingClientRect')
         .mockImplementationOnce(() => ({
           ...baseBoundingRect,
           top: -100,
         }));
-
       return scrollContainer;
     }
 
@@ -580,4 +579,87 @@ describe('TableRowNodeView', () => {
       expect(sentinelBottom.dataset.isObserved).toBeUndefined();
     });
   });
+
+  describe('makeRowHeaderNotSticky', () => {
+    let makeRowHeaderNotStickySpy: jest.SpyInstance;
+    let tableRef: HTMLElement;
+    beforeEach(() => {
+      const editorData = editor(
+        doc(table()(tr(thEmpty, thEmpty), tr(tdEmpty, tdEmpty))),
+        true, // toggle to enable optimization
+      );
+      editorView = editorData.editorView;
+      eventDispatcher = editorData.eventDispatcher;
+      tableRowNode = editorView.state.doc.firstChild!.firstChild!;
+      tableRowDom = editorView.dom.getElementsByTagName('tr')[0];
+
+      tableRowNodeView = new TableRowNodeView(
+        tableRowNode,
+        editorView,
+        jest.fn(),
+        eventDispatcher,
+        fakeGetEditorFeatureFlags,
+      );
+      tableRowNodeView.dom = tableRowDom;
+
+      // Initialize with sticky off
+      tableRowNodeView.isSticky = false;
+      tableRowNodeView.top = 0;
+      tableRowNodeView.padding = 0;
+
+      makeRowHeaderNotStickySpy = jest.spyOn(
+        tableRowNodeView as any,
+        'makeRowHeaderNotSticky',
+      );
+      tableRef = document.querySelector(
+        '.ProseMirror table',
+      ) as HTMLTableElement;
+    });
+
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should not be called if table is not selected', () => {
+      eventDispatcher.emit((pluginKey as any).key, {
+        isHeaderRowEnabled: false,
+        tableRef: null,
+      });
+      expect(makeRowHeaderNotStickySpy).not.toHaveBeenCalled();
+    });
+
+    it('should not be called if header row is enabled', () => {
+      eventDispatcher.emit((pluginKey as any).key, {
+        isHeaderRowEnabled: true,
+        tableRef,
+      });
+      expect(makeRowHeaderNotStickySpy).not.toHaveBeenCalled();
+    });
+
+    it('should be called if header row is disabled and table is selected', () => {
+      eventDispatcher.emit((pluginKey as any).key, {
+        isHeaderRowEnabled: false,
+        tableRef,
+      });
+      expect(makeRowHeaderNotStickySpy).toHaveBeenCalled();
+    });
+
+    it('should cause isSticky state to be set to false when called', () => {
+      // Begin test with stickyheaders state on
+      tableRowNodeView.isSticky = true;
+      tableRowNodeView.top = 1;
+      tableRowNodeView.padding = 1;
+
+      tableRowNodeView.makeRowHeaderNotSticky(tableRef);
+
+      expect(updateStickyState).toHaveBeenCalledWith(
+        expect.objectContaining({
+          sticky: false,
+        }),
+      );
+      expect(tableRowNodeView.isSticky).toBe(false);
+      expect(tableRowNodeView.top).toBe(0);
+      expect(tableRowNodeView.padding).toBe(0);
+    });
+  });
 });

package/src/__tests__/unit/transforms/delete-columns.ts

@@ -41,7 +41,7 @@ describe('table plugin -> transforms -> delete columns', () => {
   });
 
   const createEditor = createProsemirrorEditorFactory();
-  const preset = new Preset<LightEditorPlugin>().add([tablePlugin]);
+  const preset = new Preset<LightEditorPlugin>().add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>
     createEditor<TablePluginState, PluginKey>({

package/src/__tests__/unit/transforms/delete-rows.ts

@@ -41,7 +41,7 @@ describe('table plugin -> transforms -> delete rows', () => {
     uuid.setStatic(false);
   });
   const createEditor = createProsemirrorEditorFactory();
-  const preset = new Preset<LightEditorPlugin>().add([tablePlugin]);
+  const preset = new Preset<LightEditorPlugin>().add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>
     createEditor<TablePluginState, PluginKey>({

package/src/__tests__/unit/utils/collapse.ts

@@ -23,9 +23,9 @@ describe('collapse', () => {
   const createEditor = createProsemirrorEditorFactory();
 
   const editor = (doc: DocBuilder, expandInPlugins?: boolean) => {
-    const preset = new Preset<LightEditorPlugin>().add([tablePlugin]);
+    const preset = new Preset<LightEditorPlugin>().add(tablePlugin);
 
-    const finalPreset = expandInPlugins ? preset.add([expandPlugin]) : preset;
+    const finalPreset = expandInPlugins ? preset.add(expandPlugin) : preset;
 
     return createEditor({ doc, preset: finalPreset });
   };

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

@@ -38,3 +38,4 @@ export {
 } from './misc';
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
+export { removeDescendantNodes } from './referentiality';