@atlaskit/editor-plugin-table 2.9.0 → 2.10.0

package/src/__tests__/integration/horizontal-scroll-shadows.ts

@@ -7,7 +7,7 @@ import {
   mountEditor,
 } from '@atlaskit/editor-test-helpers/testing-example-page';
 import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
-import WebdriverPage from '@atlaskit/webdriver-runner/wd-wrapper';
+import type WebdriverPage from '@atlaskit/webdriver-runner/wd-wrapper';
 
 import { TableCssClassName as className } from '../../plugins/table/types';
 
@@ -15,19 +15,16 @@ import basicTable from './__fixtures__/basic-table';
 
 const checkShadows = async (page: WebdriverPage, side?: 'left' | 'right') => {
   const leftShadow = await page.$(`.${className.TABLE_LEFT_SHADOW}`);
-  const leftShadowStyle = await leftShadow.getAttribute('style');
   const rightShadow = await page.$(`.${className.TABLE_RIGHT_SHADOW}`);
-  const rightShadowStyle = await rightShadow.getAttribute('style');
 
   if (!side) {
-    return (
-      leftShadowStyle.includes('display: block;') &&
-      rightShadowStyle.includes('display: block;')
-    );
+    const leftDisplayed = await leftShadow.isDisplayed();
+    const rightDisplayed = await rightShadow.isDisplayed();
+    return leftDisplayed && rightDisplayed;
   } else if (side === 'left') {
-    return leftShadowStyle.includes('display: block;');
+    return await leftShadow.isDisplayed();
   } else if (side === 'right') {
-    return rightShadowStyle.includes('display: block;');
+    return await rightShadow.isDisplayed();
   }
 };
 

package/src/__tests__/integration/resize.ts

@@ -178,19 +178,10 @@ BrowserTestCase(
   },
 );
 
-[
-  {
-    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) => {
+BrowserTestCase(
+  'Should stack columns to the right and go to overflow',
+  {},
+  async (client: any, testName: string) => {
     const page = await goToEditorTestingWDExample(
       client,
       'editor-plugin-table',
@@ -202,15 +193,14 @@ BrowserTestCase(
       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',

package/src/__tests__/unit/event-handlers.ts

@@ -154,7 +154,6 @@ describe('table plugin: decorations', () => {
 
 describe('table event handlers', () => {
   const createEditor = createProsemirrorEditorFactory();
-  const fakeGetEditorFeatureFlags = () => ({});
   const editor = (doc: DocBuilder) =>
     createEditor({
       doc,
@@ -222,9 +221,7 @@ describe('table event handlers', () => {
         const event = {
           target: firstCell.node,
         };
-        expect(
-          handleMouseMove(fakeGetEditorFeatureFlags)(editorView, event as any),
-        ).toEqual(false);
+        expect(handleMouseMove(editorView, event as any)).toEqual(false);
       });
     });
   });

package/src/__tests__/unit/nodeviews/TableComponent.tsx

@@ -6,6 +6,7 @@ import { replaceRaf } from 'raf-stub';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { Command } from '@atlaskit/editor-common/types';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { selectTableClosestToPos } from '@atlaskit/editor-tables/src/utils/select-nodes';
 import {
   findTable,
@@ -73,6 +74,33 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
       pluginKey,
     });
   };
+  const getTableComponent = (editorView: EditorView, props: any = {}) => {
+    const tableF = findTable(editorView.state.selection);
+    const getNode = () => tableF!.node;
+    return (
+      <TableComponent
+        view={editorView}
+        eventDispatcher={
+          { on: () => {}, off: () => {} } as any as EventDispatcher
+        }
+        // @ts-ignore
+        containerWidth={{}}
+        // @ts-ignore
+        getNode={getNode}
+        getEditorFeatureFlags={getEditorFeatureFlags}
+        allowControls
+        contentDOM={(wrapper: HTMLElement | null) => {
+          const node = editorView.dom.getElementsByTagName('table')[0];
+          if (!wrapper?.firstChild) {
+            wrapper?.appendChild(node);
+          }
+        }}
+        getPos={jest.fn()}
+        {...props}
+      />
+    );
+  };
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -81,17 +109,11 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
     it('should add table selected css class to the selected table', () => {
       const { editorView } = editor(
         doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdCursor))),
-        {
-          tableCellOptimization: true,
-          tableRenderOptimization: true,
-          stickyHeadersOptimization: true,
-          initialRenderOptimization: true,
-        },
       );
       const { state, dispatch } = editorView;
       dispatch(selectTable(state.tr));
-      requestAnimationFrame.step();
-      const tableContainer = document.querySelector(
+      const { container } = render(getTableComponent(editorView));
+      const tableContainer = container.querySelector(
         `.${ClassName.TABLE_CONTAINER}`,
       );
       expect(
@@ -135,45 +157,12 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
 
       render(
         <div>
-          <TableComponent
-            view={editorView}
-            eventDispatcher={
-              { on: () => {}, off: () => {} } as any as EventDispatcher
-            }
-            // @ts-ignore
-            containerWidth={{}}
-            // @ts-ignore
-            getNode={getTableNode(1)}
-            getEditorFeatureFlags={getEditorFeatureFlags}
-            allowControls
-            contentDOM={(wrapper: HTMLElement | null) => {
-              const node = editorView.dom.getElementsByTagName('table')[0];
-              if (!wrapper?.firstChild) {
-                wrapper?.appendChild(node);
-              }
-            }}
-            getPos={jest.fn()}
-          />
-          <TableComponent
-            view={editorView}
-            eventDispatcher={
-              { on: () => {}, off: () => {} } as any as EventDispatcher
-            }
-            // @ts-ignore
-            containerWidth={{}}
-            // @ts-ignore
-            getNode={getTableNode(2)}
-            getEditorFeatureFlags={getEditorFeatureFlags}
-            allowControls
-            contentDOM={(wrapper: HTMLElement | null) => {
-              const node = editorView.dom.getElementsByTagName('table')[0];
-              if (!wrapper?.firstChild) {
-                wrapper?.appendChild(node);
-              }
-            }}
-            getPos={jest.fn()}
-          />
-          ,
+          {getTableComponent(editorView, {
+            getNode: getTableNode(1),
+          })}
+          {getTableComponent(editorView, {
+            getNode: getTableNode(2),
+          })}
         </div>,
       );
       expect(clearHoverSelectionSpy).not.toBeCalled();
@@ -189,8 +178,8 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
       const { editorView } = editor(
         doc(p('text'), table()(tr(thEmpty, thEmpty, thEmpty))),
       );
-      const { state, dispatch } = editorView;
 
+      const { state, dispatch } = editorView;
       const isInDanger = true;
       hoverTable(isInDanger)(state, dispatch);
       dispatch(selectTable(state.tr));
@@ -198,29 +187,19 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
       const tableF = findTable(state.selection);
       const getNode = () => tableF!.node;
 
+      const { rerender } = render(
+        getTableComponent(editorView, {
+          getNode,
+        }),
+      );
+
       const newTr = state.tr.setSelection(TextSelection.create(state.doc, 0));
       dispatch(newTr);
 
-      render(
-        <TableComponent
-          view={editorView}
-          eventDispatcher={
-            { on: () => {}, off: () => {} } as any as EventDispatcher
-          }
-          // @ts-ignore
-          containerWidth={{}}
-          // @ts-ignore
-          getNode={getNode}
-          getEditorFeatureFlags={getEditorFeatureFlags}
-          allowControls
-          contentDOM={(wrapper: HTMLElement | null) => {
-            const node = editorView.dom.getElementsByTagName('table')[0];
-            if (!wrapper?.firstChild) {
-              wrapper?.appendChild(node);
-            }
-          }}
-          getPos={jest.fn()}
-        />,
+      rerender(
+        getTableComponent(editorView, {
+          getNode,
+        }),
       );
       expect(clearHoverSelectionSpy).toBeCalledTimes(1);
     });
@@ -295,30 +274,7 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
       const { editorView: view } = editor(
         doc(p('text'), table()(tr(td()(p('{<>}text')), tdEmpty, tdEmpty))),
       );
-
-      const tableF = findTable(view.state.selection);
-      const getNode = () => tableF!.node;
-      const { container } = render(
-        <TableComponent
-          view={view}
-          eventDispatcher={
-            { on: jest.fn(), off: jest.fn() } as unknown as EventDispatcher
-          }
-          // @ts-ignore
-          containerWidth={{}}
-          getNode={getNode}
-          contentDOM={(contentElement: HTMLElement | null) => {
-            const node = view.dom.getElementsByTagName('table')[0];
-
-            if (!contentElement?.firstChild) {
-              contentElement?.appendChild(node);
-            }
-          }}
-          getEditorFeatureFlags={getEditorFeatureFlags}
-          getPos={jest.fn()}
-          {...props}
-        />,
-      );
+      const { container } = render(getTableComponent(view, props));
       const controlsContainer = container.querySelector(
         `.${ClassName.WITH_CONTROLS}`,
       );

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

@@ -111,9 +111,7 @@ describe('table -> nodeviews -> tableCell.tsx', () => {
         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))!;

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

@@ -36,97 +36,85 @@ describe('table -> nodeviews -> table.tsx', () => {
       table(attrs)(...args)(defaultSchema);
 
   describe('TableView', () => {
-    describe('with tableRenderOptimization', () => {
-      const editor = (doc: DocBuilder) =>
-        createEditor({
-          doc,
-          preset: new Preset<LightEditorPlugin>()
-            .add([featureFlagsPlugin, {}])
-            .add([analyticsPlugin, {}])
-            .add(contentInsertionPlugin)
-            .add(widthPlugin)
-            .add(guidelinePlugin)
-            .add([
-              tablePlugin,
-              {
-                tableOptions: {},
-                getEditorFeatureFlags: () => ({
-                  tableRenderOptimization: true,
-                }),
-              },
-            ]),
-          pluginKey,
-        });
+    const editor = (doc: DocBuilder) =>
+      createEditor({
+        doc,
+        preset: new Preset<LightEditorPlugin>()
+          .add([featureFlagsPlugin, {}])
+          .add([analyticsPlugin, {}])
+          .add(contentInsertionPlugin)
+          .add(widthPlugin)
+          .add(guidelinePlugin)
+          .add([
+            tablePlugin,
+            {
+              tableOptions: {},
+            },
+          ]),
+        pluginKey,
+      });
 
-      describe('on view update', () => {
-        let tableNode: PMNode,
-          tableNodeView: TableView,
-          renderSpy: jest.SpyInstance,
-          view: EditorView;
-        beforeEach(() => {
-          tableNode = createTableNode({
-            isNumberColumnEnabled: true,
-          })(tr(td()(p('{<>}text')), tdEmpty, tdEmpty));
-          const { editorView, portalProviderAPI, eventDispatcher } = editor(
-            doc(
-              p('text'),
-              table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty)),
-            ),
-          );
-          view = editorView;
-          tableNodeView = new TableView({
-            node: tableNode,
-            allowColumnResizing: false,
-            view: editorView,
-            portalProviderAPI,
-            eventDispatcher,
-            getPos: () => 1,
-            tableRenderOptimization: true,
-            getEditorContainerWidth: () => ({ width: 500 }),
-            getEditorFeatureFlags: () => ({}),
-            hasIntlContext: true,
-          }).init();
+    describe('on view update', () => {
+      let tableNode: PMNode,
+        tableNodeView: TableView,
+        renderSpy: jest.SpyInstance,
+        view: EditorView;
+      beforeEach(() => {
+        tableNode = createTableNode({
+          isNumberColumnEnabled: true,
+        })(tr(td()(p('{<>}text')), tdEmpty, tdEmpty));
+        const { editorView, portalProviderAPI, eventDispatcher } = editor(
+          doc(p('text'), table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+        );
+        view = editorView;
+        tableNodeView = new TableView({
+          node: tableNode,
+          allowColumnResizing: false,
+          view: editorView,
+          portalProviderAPI,
+          eventDispatcher,
+          getPos: () => 1,
+          getEditorContainerWidth: () => ({ width: 500 }),
+          getEditorFeatureFlags: () => ({}),
+          hasIntlContext: true,
+        }).init();
 
-          renderSpy = jest.spyOn(tableNodeView, 'render');
-        });
+        renderSpy = jest.spyOn(tableNodeView, 'render');
+      });
 
-        it('does not rerender if attributes or table width did not change', () => {
-          const newNodeWithUnchangedAttributesOrWidth = createTableNode({
-            isNumberColumnEnabled: true,
-          })(tr(td()(p('{<>}text1')), tdEmpty, tdEmpty));
-          tableNodeView.update(newNodeWithUnchangedAttributesOrWidth, []);
-          expect(renderSpy).not.toHaveBeenCalled();
-        });
+      it('does not rerender if attributes or table width did not change', () => {
+        const newNodeWithUnchangedAttributesOrWidth = createTableNode({
+          isNumberColumnEnabled: true,
+        })(tr(td()(p('{<>}text1')), tdEmpty, tdEmpty));
+        tableNodeView.update(newNodeWithUnchangedAttributesOrWidth, []);
+        expect(renderSpy).not.toHaveBeenCalled();
+      });
 
-        it('rerenders when table width changes', () => {
-          const newNodeWithUnchangedAttributesAndExtraColumn = createTableNode({
-            isNumberColumnEnabled: true,
-          })(tr(td()(p('{<>}text1')), tdEmpty, tdEmpty, tdEmpty));
-          tableNodeView.update(
-            newNodeWithUnchangedAttributesAndExtraColumn,
-            [],
-          );
-          expect(renderSpy).toHaveBeenCalled();
-        });
+      it('rerenders when table width changes', () => {
+        const newNodeWithUnchangedAttributesAndExtraColumn = createTableNode({
+          isNumberColumnEnabled: true,
+        })(tr(td()(p('{<>}text1')), tdEmpty, tdEmpty, tdEmpty));
+        tableNodeView.update(newNodeWithUnchangedAttributesAndExtraColumn, []);
+        expect(renderSpy).toHaveBeenCalled();
+      });
 
-        it('rerenders when attributes change', () => {
-          const newNodeWithChangedAttributes = createTableNode({
-            isNumberColumnEnabled: false,
-          })(tr(td()(p('{<>}text1')), tdEmpty));
+      it('rerenders when attributes change', () => {
+        const newNodeWithChangedAttributes = createTableNode({
+          isNumberColumnEnabled: false,
+        })(tr(td()(p('{<>}text1')), tdEmpty));
 
-          tableNodeView.update(newNodeWithChangedAttributes, []);
-          expect(renderSpy).toHaveBeenCalled();
-        });
+        tableNodeView.update(newNodeWithChangedAttributes, []);
+        expect(renderSpy).toHaveBeenCalled();
+      });
 
-        it('rerenders when hovered rows change but attributes dont change', () => {
-          const newNodeWithUnchangedAttributes = createTableNode({
-            isNumberColumnEnabled: true,
-          })(tr(td()(p('{<>}text1')), tdEmpty));
+      it('rerenders when hovered rows change but attributes dont change', () => {
+        const newNodeWithUnchangedAttributes = createTableNode({
+          isNumberColumnEnabled: true,
+        })(tr(td()(p('{<>}text1')), tdEmpty));
 
-          hoverRows([1])(view.state, view.dispatch);
-          tableNodeView.update(newNodeWithUnchangedAttributes, []);
-          expect(renderSpy).toHaveBeenCalled();
-        });
+        hoverRows([1])(view.state, view.dispatch);
+        tableNodeView.update(newNodeWithUnchangedAttributes, []);
+        expect(renderSpy).toHaveBeenCalled();
       });
     });
   });

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

@@ -55,8 +55,8 @@ describe('TableRowNodeView', () => {
   let tableRowNodeView: TableRowNodeView;
   const fakeGetEditorFeatureFlags = jest.fn(() => ({}));
   const createEditor = createProsemirrorEditorFactory();
-  const editor = (doc: DocBuilder, stickyHeadersOptimization?: boolean) => {
-    const featureFlags = { stickyHeadersOptimization };
+  const editor = (doc: DocBuilder) => {
+    const featureFlags = {};
     fakeGetEditorFeatureFlags.mockReturnValue(featureFlags);
     return createEditor({
       doc,
@@ -114,7 +114,6 @@ describe('TableRowNodeView', () => {
         editorView,
         jest.fn(),
         eventDispatcher,
-        fakeGetEditorFeatureFlags,
       );
     });
     afterEach(() => {
@@ -216,7 +215,6 @@ describe('TableRowNodeView', () => {
         editorView,
         jest.fn(),
         eventDispatcher,
-        fakeGetEditorFeatureFlags,
       );
       tableRowDom = editorView.dom.getElementsByTagName('tr')[0];
     });
@@ -258,7 +256,7 @@ describe('TableRowNodeView', () => {
     });
   });
 
-  describe('with stickyHeadersOptimization', () => {
+  describe('sticky headers', () => {
     let rafStub: Stub;
     let originalIntersectionObserver: object;
     let originalResizeObserver: object;
@@ -323,6 +321,7 @@ describe('TableRowNodeView', () => {
       ) {
         this.disconnect = jest.fn();
         this.observe = jest.fn();
+        this.unobserve = jest.fn();
         intersectCallback = callback;
       };
 
@@ -332,6 +331,7 @@ describe('TableRowNodeView', () => {
       ) {
         this.disconnect = jest.fn();
         this.observe = jest.fn();
+        this.unobserve = jest.fn();
         resizeCallback = callback;
       };
     });
@@ -349,7 +349,6 @@ describe('TableRowNodeView', () => {
 
       const editorData = editor(
         doc(table()(tr(thEmpty, thEmpty), tr(tdEmpty, tdEmpty))),
-        true, // toggle to enable optimization
       );
       editorView = editorData.editorView;
       eventDispatcher = editorData.eventDispatcher;
@@ -362,7 +361,6 @@ describe('TableRowNodeView', () => {
         editorView,
         jest.fn(),
         eventDispatcher,
-        fakeGetEditorFeatureFlags,
       );
       tableRowNodeView.dom = tableRowDom;
     });
@@ -604,7 +602,6 @@ describe('TableRowNodeView', () => {
     beforeEach(() => {
       const editorData = editor(
         doc(table()(tr(thEmpty, thEmpty), tr(tdEmpty, tdEmpty))),
-        true, // toggle to enable optimization
       );
       editorView = editorData.editorView;
       eventDispatcher = editorData.eventDispatcher;
@@ -616,7 +613,6 @@ describe('TableRowNodeView', () => {
         editorView,
         jest.fn(),
         eventDispatcher,
-        fakeGetEditorFeatureFlags,
       );
       tableRowNodeView.dom = tableRowDom;
 

package/src/__tests__/unit/ui/RowControls.tsx

@@ -46,6 +46,7 @@ describe('RowControls', () => {
     ) {
       this.disconnect = jest.fn();
       this.observe = jest.fn();
+      this.unobserve = jest.fn();
     };
   });