@atlaskit/editor-plugin-table 1.6.1 → 1.6.3

package/src/__tests__/playwright/extensions.spec.ts

@@ -0,0 +1,67 @@
+import {
+  EditorTableModel,
+  EditorNodeContainerModel,
+  EditorExtensionModel,
+  editorTestCase as test,
+  expect,
+} from '@af/editor-libra';
+import { tableInsideLayoutAfterExtension } from './__fixtures__/base-adfs';
+
+test.use({
+  editorProps: {
+    appearance: 'full-page',
+    allowTables: {
+      advanced: true,
+    },
+    allowLayouts: true,
+    allowExtension: true,
+  },
+
+  editorMountOptions: {
+    withConfluenceMacrosExtensionProvider: true,
+  },
+
+  adf: tableInsideLayoutAfterExtension,
+});
+
+test.describe('when the extension context panel opens', () => {
+  test('should not overflow the table', async ({ editor }) => {
+    const nodes = EditorNodeContainerModel.from(editor);
+    const extensionModel = EditorExtensionModel.from(nodes.bodiedExtension);
+    const tableModel = EditorTableModel.from(nodes.table);
+
+    await editor.selection.set({ anchor: 1, head: 1 });
+
+    await test.step('make sure the table is not overflowed already', async () => {
+      expect(await tableModel.hasOverflowed()).toBeFalsy();
+    });
+
+    await extensionModel.configuration(editor).openContextPanel();
+
+    expect(await tableModel.hasOverflowed()).toBeFalsy();
+  });
+});
+
+test('should not overflow the table when changing viewport', async ({
+  editor,
+}) => {
+  const nodes = EditorNodeContainerModel.from(editor);
+  const tableModel = EditorTableModel.from(nodes.table);
+  await editor.page.setViewportSize({ width: 1000, height: 1024 });
+  await editor.selection.set({ anchor: 1, head: 1 });
+  await tableModel.isSelected();
+  const cell = await tableModel.cell(0);
+  await cell.click();
+  await cell.resize({
+    mouse: editor.page.mouse,
+    cellSide: 'right',
+    moveDirection: 'right',
+    moveDistance: 100,
+  });
+  await test.step('make sure the table is not overflowed already', async () => {
+    expect(await tableModel.hasOverflowed()).toBeFalsy();
+  });
+  await editor.page.setViewportSize({ width: 1050, height: 1024 });
+  await tableModel.isSelected();
+  expect(await tableModel.hasOverflowed()).toBeFalsy();
+});

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

@@ -43,20 +43,6 @@ jest.mock('@atlaskit/editor-common/utils', () => ({
   },
 }));
 
-jest.mock('@atlaskit/editor-palette', () => ({
-  ...jest.requireActual<Object>('@atlaskit/editor-palette'),
-  hexToEditorBackgroundPaletteColorTokenName: jest.fn((hexColor: string) => {
-    return hexColor;
-  }),
-}));
-
-jest.mock('@atlaskit/tokens', () => ({
-  ...jest.requireActual<Object>('@atlaskit/tokens'),
-  getTokenValue: jest.fn((tokenId: string, fallback: string = '') => {
-    return tokenId || fallback;
-  }),
-}));
-
 describe('table -> nodeviews -> tableCell.tsx', () => {
   const TABLE_LOCAL_ID = 'test-table-local-id';
   const createEditor = createProsemirrorEditorFactory();

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

@@ -0,0 +1,214 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { render, screen, cleanup } from '@testing-library/react';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import FixedButton, {
+  BUTTON_WIDTH,
+  calcLeftPos,
+  calcObserverTargetMargin,
+} from '../../../plugins/table/ui/FloatingContextualButton/FixedButton';
+
+jest.mock('react-dom', () => ({
+  createPortal: jest.fn((node: React.ReactNode) => node),
+}));
+
+describe('calcLeftPos()', () => {
+  it('should calculate left position', () => {
+    let result = calcLeftPos({
+      buttonWidth: 0,
+      cellRectLeft: 0,
+      cellRefWidth: 0,
+      offset: 0,
+    });
+    expect(result).toEqual(0);
+    result = calcLeftPos({
+      buttonWidth: 20,
+      cellRectLeft: 400,
+      cellRefWidth: 250,
+      offset: 3,
+    });
+    expect(result).toEqual(627);
+  });
+});
+
+describe('calcObserverTargetMargin()', () => {
+  it('should calculate the margin', () => {
+    const mockTableWrapper = document.createElement('div');
+    mockTableWrapper.scrollLeft = 50;
+    const tableSpy = jest.spyOn(mockTableWrapper, 'getBoundingClientRect');
+    tableSpy.mockImplementation(() => ({ left: 800 } as DOMRect));
+
+    const mockButton = document.createElement('div');
+    const buttonSpy = jest.spyOn(mockButton, 'getBoundingClientRect');
+    buttonSpy.mockImplementation(() => ({ left: 1200 } as DOMRect));
+
+    const result = calcObserverTargetMargin(mockTableWrapper, mockButton);
+    expect(result).toEqual(450);
+  });
+});
+
+describe('<FixedButton />', () => {
+  const targetCellRef = document.createElement('div');
+  const fixedButtonRef = {
+    current: document.createElement('div'),
+  };
+  const observerTargetRef = {
+    current: document.createElement('div'),
+  };
+  const props = {
+    offset: 10,
+    stickyHeader: {
+      pos: 0,
+      top: 0,
+      padding: 0,
+      sticky: true,
+    },
+    targetCellPosition: 0,
+    targetCellRef,
+    mountTo: document.createElement('div'),
+    tableWrapper: document.createElement('div'),
+    fixedButtonRef,
+    observerTargetRef,
+    isContextualMenuOpen: false,
+  };
+  const MockChildren = () => <div data-testid="mock-children" />;
+
+  it('should render children', () => {
+    render(
+      <FixedButton {...props}>
+        <MockChildren />
+      </FixedButton>,
+    );
+    expect(screen.getByTestId('mock-children')).toBeInTheDocument();
+  });
+
+  it('should render using createPortal', () => {
+    render(
+      <FixedButton {...props}>
+        <MockChildren />
+      </FixedButton>,
+    );
+    expect(createPortal).toBeCalled();
+  });
+
+  describe('observerTargetRef', () => {
+    it('should have correct inital styles', () => {
+      const { container } = render(
+        <FixedButton {...props}>
+          <MockChildren />
+        </FixedButton>,
+      );
+      expect(container.firstChild).toHaveStyle(
+        `top: 0px; left: 0px; position: absolute; width: ${BUTTON_WIDTH}px; height: ${BUTTON_WIDTH}px`,
+      );
+    });
+
+    it('should have correct "margin-left" style', () => {
+      const mockTableWrapper = document.createElement('div');
+      mockTableWrapper.scrollLeft = 123;
+      const { container } = render(
+        <FixedButton {...props} tableWrapper={mockTableWrapper}>
+          <MockChildren />
+        </FixedButton>,
+      );
+
+      expect(container.firstChild).toHaveStyle(`margin-left: 123px;`);
+    });
+  });
+
+  describe('fixedButtonRef', () => {
+    it('should have correct "top" style', () => {
+      const { container, rerender } = render(
+        <FixedButton {...props} offset={10}>
+          <MockChildren />
+        </FixedButton>,
+      );
+      expect(container.firstChild?.firstChild).toHaveStyle(`top: 20px;`);
+
+      rerender(
+        <FixedButton
+          {...props}
+          stickyHeader={{ pos: 0, top: 3, padding: 0, sticky: true }}
+        >
+          <MockChildren />
+        </FixedButton>,
+      );
+      expect(container.firstChild?.firstChild).toHaveStyle(`top: 23px;`);
+
+      rerender(
+        <FixedButton
+          {...props}
+          stickyHeader={{ pos: 0, top: 0, padding: 2, sticky: true }}
+        >
+          <MockChildren />
+        </FixedButton>,
+      );
+      expect(container.firstChild?.firstChild).toHaveStyle(`top: 22px;`);
+    });
+
+    it('should have correct "left" style', () => {
+      const mockRef = document.createElement('div');
+      const mockRefSpy = jest.spyOn(mockRef, 'getBoundingClientRect');
+      mockRefSpy.mockImplementation(() => ({ left: 3 } as DOMRect));
+
+      const { container } = render(
+        <FixedButton {...props} targetCellRef={mockRef}>
+          <MockChildren />
+        </FixedButton>,
+      );
+      expect(container.firstChild?.firstChild).toHaveStyle(`left: -27px;`);
+    });
+
+    it('should have correct "z-index" style', () => {
+      const { container } = render(
+        <FixedButton {...props}>
+          <MockChildren />
+        </FixedButton>,
+      );
+      expect(container.firstChild?.firstChild).toHaveStyle(
+        `z-index: ${akEditorFloatingPanelZIndex}`,
+      );
+    });
+  });
+
+  describe('useEffect()', () => {
+    const observe = jest.fn();
+    const unobserve = jest.fn();
+
+    window.IntersectionObserver = jest.fn((callback) => {
+      callback([{ isIntersecting: true }]);
+      return {
+        observe,
+        unobserve,
+      };
+    }) as any;
+
+    it('should add / remove event listener to the table wrapper', () => {
+      const mockTableWrapper = document.createElement('div');
+      const addSpy = jest.spyOn(mockTableWrapper, 'addEventListener');
+      const removeSpy = jest.spyOn(mockTableWrapper, 'removeEventListener');
+
+      render(
+        <FixedButton {...props} tableWrapper={mockTableWrapper}>
+          <MockChildren />
+        </FixedButton>,
+      );
+
+      expect(addSpy).toBeCalled();
+      cleanup();
+      expect(removeSpy).toBeCalled();
+    });
+
+    it('should observe / unobserve an InterSectionObserver', () => {
+      render(
+        <FixedButton {...props}>
+          <MockChildren />
+        </FixedButton>,
+      );
+
+      expect(observe).toHaveBeenCalled();
+      cleanup();
+      expect(unobserve).toHaveBeenCalled();
+    });
+  });
+});

package/src/plugins/table/index.tsx

@@ -387,6 +387,7 @@ const tablesPlugin: NextEditorPlugin<
                         isContextualMenuOpen={isContextualMenuOpen}
                         layout={layout}
                         stickyHeader={stickyHeader}
+                        tableWrapper={tableWrapperTarget}
                       />
                     )}
                   {allowControls && (

package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -611,7 +611,7 @@ export class TableRowNodeView implements NodeView {
       return;
     }
 
-    const { table } = tree;
+    const { table, wrapper } = tree;
 
     // ED-16035 Make sure sticky header is only applied to first row
     const tbody = this.dom.parentElement;
@@ -639,6 +639,7 @@ export class TableRowNodeView implements NodeView {
 
     this.dom.style.top = `${domTop}px`;
     updateTableMargin(table);
+    this.dom.scrollLeft = wrapper.scrollLeft;
 
     this.emitOn(domTop, this.colControlsOffset);
   };

package/src/plugins/table/types.ts

@@ -289,6 +289,7 @@ export const TableCssClassName = {
   CONTEXTUAL_SUBMENU: `${tablePrefixSelector}-contextual-submenu`,
   CONTEXTUAL_MENU_BUTTON_WRAP: `${tablePrefixSelector}-contextual-menu-button-wrap`,
   CONTEXTUAL_MENU_BUTTON: `${tablePrefixSelector}-contextual-menu-button`,
+  CONTEXTUAL_MENU_BUTTON_FIXED: `${tablePrefixSelector}-contextual-menu-button-fixed`,
   CONTEXTUAL_MENU_ICON: `${tablePrefixSelector}-contextual-submenu-icon`,
 
   // come from prosemirror-table

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

@@ -0,0 +1,175 @@
+import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import rafSchedule from 'raf-schd';
+
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { RowStickyState } from '../../pm-plugins/sticky-headers';
+import { insertColumnButtonOffset } from '../common-styles';
+import { TableCssClassName as ClassName } from '../../types';
+
+export const BUTTON_WIDTH = 20;
+
+export interface Props {
+  children: React.ReactNode;
+  mountTo: HTMLElement;
+  offset: number;
+  stickyHeader: RowStickyState;
+  targetCellPosition: number;
+  targetCellRef: HTMLElement;
+  tableWrapper: HTMLElement;
+  isContextualMenuOpen: boolean | undefined;
+}
+
+interface CalcLeftPosData {
+  buttonWidth: number;
+  cellRectLeft: number;
+  cellRefWidth: number;
+  offset: number;
+}
+
+export const calcLeftPos = ({
+  buttonWidth,
+  cellRectLeft,
+  cellRefWidth,
+  offset,
+}: CalcLeftPosData) => {
+  return cellRectLeft + cellRefWidth - buttonWidth - offset;
+};
+
+export const calcObserverTargetMargin = (
+  tableWrapper: HTMLElement,
+  fixedButtonRefCurrent: HTMLElement,
+) => {
+  const tableWrapperRect = tableWrapper.getBoundingClientRect();
+  const fixedButtonRect = fixedButtonRefCurrent.getBoundingClientRect();
+  const scrollLeft = tableWrapper.scrollLeft;
+  return fixedButtonRect.left - tableWrapperRect.left + scrollLeft;
+};
+
+export const FixedButton = ({
+  children,
+  isContextualMenuOpen,
+  mountTo,
+  offset,
+  stickyHeader,
+  tableWrapper,
+  targetCellPosition,
+  targetCellRef,
+}: Props) => {
+  const fixedButtonRef = useRef<HTMLDivElement | null>(null);
+  const observerTargetRef = useRef<HTMLDivElement | null>(null);
+
+  // Using refs here rather than state to prevent heaps of renders on scroll
+  const scrollDataRef = useRef(0);
+  const leftPosDataRef = useRef(0);
+
+  useEffect(() => {
+    const observerTargetRefCurrent = observerTargetRef.current;
+    const fixedButtonRefCurrent = fixedButtonRef.current;
+
+    if (fixedButtonRefCurrent && observerTargetRefCurrent) {
+      scrollDataRef.current = tableWrapper.scrollLeft;
+      leftPosDataRef.current = 0;
+      // Hide the button initially in case there's a flash of the button being
+      // outside the table before the Intersection Observer fires
+      fixedButtonRefCurrent.style.visibility = 'hidden';
+
+      const margin = calcObserverTargetMargin(
+        tableWrapper,
+        fixedButtonRefCurrent,
+      );
+
+      // Much more simple and predictable to add this margin to the observer target
+      // rather than using it to calculate the rootMargin values
+      observerTargetRefCurrent.style.marginLeft = `${margin}px`;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              fixedButtonRefCurrent.style.visibility = 'visible';
+            } else {
+              fixedButtonRefCurrent.style.visibility = 'hidden';
+            }
+          });
+        },
+        {
+          root: tableWrapper,
+          rootMargin: `0px ${insertColumnButtonOffset}px 0px 0px`,
+          threshold: 1,
+        },
+      );
+
+      const handleScroll = rafSchedule((event) => {
+        if (fixedButtonRef.current) {
+          const delta = event.target.scrollLeft - scrollDataRef.current;
+          const style = `translateX(${leftPosDataRef.current - delta}px)`;
+          fixedButtonRef.current.style.transform = style;
+
+          scrollDataRef.current = event.target.scrollLeft;
+          leftPosDataRef.current = leftPosDataRef.current - delta;
+        }
+      });
+
+      observer.observe(observerTargetRefCurrent);
+      tableWrapper.addEventListener('scroll', handleScroll);
+
+      return () => {
+        tableWrapper.removeEventListener('scroll', handleScroll);
+        fixedButtonRefCurrent.style.transform = '';
+        observer.unobserve(observerTargetRefCurrent);
+      };
+    }
+  }, [
+    fixedButtonRef,
+    observerTargetRef,
+    tableWrapper,
+    targetCellPosition,
+    targetCellRef,
+    isContextualMenuOpen,
+  ]);
+
+  const targetCellRect = targetCellRef.getBoundingClientRect();
+
+  // Using a portal here to ensure wrapperRef has the tableWrapper as an
+  // ancestor. This is required to make the Intersection Observer work.
+  return createPortal(
+    // Using observerTargetRef here for our Intersection Observer. There is issues
+    // getting the observer to work just using the fixedButtonRef, possible due
+    // to using position fixed on this Element, or possibly due to its position
+    // being changed on scroll.
+    <div
+      ref={observerTargetRef}
+      style={{
+        position: 'absolute',
+        top: '0px',
+        left: '0px',
+        width: `${BUTTON_WIDTH}px`,
+        height: `${BUTTON_WIDTH}px`,
+      }}
+    >
+      <div
+        ref={fixedButtonRef}
+        style={{
+          position: 'fixed',
+          top: stickyHeader.top + stickyHeader.padding + offset * 2,
+          zIndex: akEditorFloatingPanelZIndex,
+          left: calcLeftPos({
+            buttonWidth: BUTTON_WIDTH,
+            cellRectLeft: targetCellRect.left,
+            cellRefWidth: targetCellRef.clientWidth,
+            offset,
+          }),
+          width: `${BUTTON_WIDTH}px`,
+          height: `${BUTTON_WIDTH}px`,
+        }}
+        className={ClassName.CONTEXTUAL_MENU_BUTTON_FIXED}
+      >
+        {children}
+      </div>
+    </div>,
+    mountTo,
+  );
+};
+
+export default FixedButton;