@atlaskit/editor-plugin-table 3.1.2 → 3.2.0

package/dist/types/plugins/table/nodeviews/TableStickyScrollbar.d.ts

@@ -0,0 +1,24 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare class TableStickyScrollbar {
+    private wrapper;
+    private view;
+    private editorScrollableElement?;
+    private intersectionObserver?;
+    private stickyScrollbarContainerElement?;
+    private sentinels;
+    private topSentinelState?;
+    private bottomSentinelState?;
+    constructor(wrapper: HTMLDivElement, view: EditorView);
+    dispose(): void;
+    scrollLeft(left: number): void;
+    private init;
+    private createIntersectionObserver;
+    private deleteIntesactionObserver;
+    private sentenialBottomCallback;
+    private sentenialTopCallback;
+    private toggle;
+    private hide;
+    private show;
+    private handleScroll;
+    private handleScrollDebounced;
+}

package/dist/types/plugins/table/toolbar.d.ts

@@ -1,9 +1,9 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { Rect } from '@atlaskit/editor-tables/table-map';
-import { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
+import type { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
 export declare const messages: {
     tableOptions: {
         id: string;

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

@@ -295,8 +295,11 @@ export declare const TableCssClassName: {
     TABLE_RIGHT_SHADOW: string;
     TABLE_STICKY_SHADOW: string;
     TABLE_STICKY_WRAPPER: string;
+    TABLE_STICKY_SCROLLBAR_CONTAINER: string;
     TABLE_STICKY_SENTINEL_TOP: string;
     TABLE_STICKY_SENTINEL_BOTTOM: string;
+    TABLE_STICKY_SCROLLBAR_SENTINEL_TOP: string;
+    TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM: string;
     TABLE_SHADOW_SENTINEL_LEFT: string;
     TABLE_SHADOW_SENTINEL_RIGHT: string;
     TABLE_CELL_NODEVIEW_CONTENT_DOM: string;

package/dist/types/plugins/table/ui/common-styles.d.ts

@@ -1,6 +1,7 @@
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 import type { ThemeProps } from '@atlaskit/theme/types';
 export declare const insertColumnButtonOffset: number;
+export declare const tableRowHeight = 44;
 export declare const tableStyles: (props: ThemeProps & {
     featureFlags?: FeatureFlags;
 }) => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/plugins/table/nodeviews/TableComponent.d.ts

@@ -43,6 +43,7 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     private containerWidth?;
     private layoutSize?;
     private overflowShadowsObserver?;
+    private stickyScrollbar?;
     private isInitialOverflowSent;
     private initialOverflowCaptureTimerId?;
     constructor(props: ComponentProps);

package/dist/types-ts4.5/plugins/table/nodeviews/TableStickyScrollbar.d.ts

@@ -0,0 +1,24 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare class TableStickyScrollbar {
+    private wrapper;
+    private view;
+    private editorScrollableElement?;
+    private intersectionObserver?;
+    private stickyScrollbarContainerElement?;
+    private sentinels;
+    private topSentinelState?;
+    private bottomSentinelState?;
+    constructor(wrapper: HTMLDivElement, view: EditorView);
+    dispose(): void;
+    scrollLeft(left: number): void;
+    private init;
+    private createIntersectionObserver;
+    private deleteIntesactionObserver;
+    private sentenialBottomCallback;
+    private sentenialTopCallback;
+    private toggle;
+    private hide;
+    private show;
+    private handleScroll;
+    private handleScrollDebounced;
+}

package/dist/types-ts4.5/plugins/table/toolbar.d.ts

@@ -1,9 +1,9 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { Rect } from '@atlaskit/editor-tables/table-map';
-import { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
+import type { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
 export declare const messages: {
     tableOptions: {
         id: string;

package/dist/types-ts4.5/plugins/table/types.d.ts

@@ -295,8 +295,11 @@ export declare const TableCssClassName: {
     TABLE_RIGHT_SHADOW: string;
     TABLE_STICKY_SHADOW: string;
     TABLE_STICKY_WRAPPER: string;
+    TABLE_STICKY_SCROLLBAR_CONTAINER: string;
     TABLE_STICKY_SENTINEL_TOP: string;
     TABLE_STICKY_SENTINEL_BOTTOM: string;
+    TABLE_STICKY_SCROLLBAR_SENTINEL_TOP: string;
+    TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM: string;
     TABLE_SHADOW_SENTINEL_LEFT: string;
     TABLE_SHADOW_SENTINEL_RIGHT: string;
     TABLE_CELL_NODEVIEW_CONTENT_DOM: string;

package/dist/types-ts4.5/plugins/table/ui/common-styles.d.ts

@@ -1,6 +1,7 @@
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 import type { ThemeProps } from '@atlaskit/theme/types';
 export declare const insertColumnButtonOffset: number;
+export declare const tableRowHeight = 44;
 export declare const tableStyles: (props: ThemeProps & {
     featureFlags?: FeatureFlags;
 }) => import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,12 +28,12 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^29.1.0",
-    "@atlaskit/editor-common": "^75.6.0",
+    "@atlaskit/editor-common": "^75.8.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
-    "@atlaskit/editor-shared-styles": "^2.7.0",
+    "@atlaskit/editor-shared-styles": "^2.8.0",
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
@@ -102,6 +102,9 @@
     "platform.editor.custom-table-width": {
       "type": "boolean"
     },
+    "platform.editor.table-sticky-scrollbar": {
+      "type": "boolean"
+    },
     "platform.editor.update-table-cell-width-via-step": {
       "type": "boolean"
     },

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

@@ -29,6 +29,7 @@ import {
   TableContainer,
 } from '../../../plugins/table/nodeviews/TableContainer';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+import { pluginKey as tableResizingPluginKey } from '../../../plugins/table/pm-plugins/table-width';
 import type { TablePluginState } from '../../../plugins/table/types';
 
 const mockStartMeasure = jest.fn();
@@ -66,9 +67,14 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
     return createEditor({
       doc,
       editorProps: {
+        appearance: 'full-page',
         allowTables: false,
         dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ config: undefined })],
+          __plugins: [
+            tablePlugin({
+              config: { tableResizingEnabled: true, tableOptions: {} },
+            }),
+          ],
         },
         featureFlags,
       },
@@ -228,21 +234,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!);
       fireEvent.mouseUp(container.querySelector('.resizer-handle.right')!);
 
-      expect(analyticsMock).toHaveBeenCalledWith({
-        action: TABLE_ACTION.RESIZED,
-        actionSubject: ACTION_SUBJECT.TABLE,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: {
-          width: undefined, // Can't get the events right to trigger re-resizeable
-          prevWidth: null,
-          nodeSize: 20,
-          totalTableWidth: null,
-          totalRowCount: 1,
-          totalColumnCount: 3,
-        },
-      });
-
-      expect(analyticsMock).toHaveBeenCalledWith({
+      expect(analyticsMock).toHaveBeenNthCalledWith(1, {
         action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
         actionSubject: ACTION_SUBJECT.TABLE,
         eventType: EVENT_TYPE.OPERATIONAL,
@@ -254,7 +246,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
         },
       });
 
-      expect(analyticsMock).toHaveBeenCalledWith({
+      expect(analyticsMock).toHaveBeenNthCalledWith(2, {
         action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
         actionSubject: ACTION_SUBJECT.TABLE,
         eventType: EVENT_TYPE.OPERATIONAL,
@@ -266,6 +258,20 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
         },
       });
 
+      expect(analyticsMock).toHaveBeenNthCalledWith(3, {
+        action: TABLE_ACTION.RESIZED,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          newWidth: 0, // Can't get the events right to trigger re-resizeable
+          prevWidth: 960,
+          nodeSize: 20,
+          totalTableWidth: null,
+          totalRowCount: 1,
+          totalColumnCount: 3,
+        },
+      });
+
       analyticsMock.mockReset();
     });
 
@@ -378,7 +384,13 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
         />,
       );
 
-      return { container, unmount, selectionActionMock, actualGuidelineMock };
+      return {
+        container,
+        unmount,
+        editorView,
+        selectionActionMock,
+        actualGuidelineMock,
+      };
     };
 
     afterEach(() => {
@@ -408,5 +420,18 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       unmount();
       expect(actualGuidelineMock).toHaveBeenCalledWith({ guidelines: [] });
     });
+
+    // this is testing logic inside TableResizer, targeting the clean up in the useEffect
+    it('should call restore resizing plugin state when removed', () => {
+      const { container, unmount, editorView } = buildContainer({});
+
+      fireEvent.mouseDown(container.querySelector('.resizer-handle.right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!);
+
+      unmount();
+      expect(tableResizingPluginKey.getState(editorView.state)).toStrictEqual({
+        resizing: false,
+      });
+    });
   });
 });

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -27,7 +27,10 @@ import {
 } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
+import {
+  MAX_BROWSER_SCROLLBAR_HEIGHT,
+  akEditorTableToolbarSize as tableToolbarSize,
+} from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
@@ -65,6 +68,7 @@ import {
 
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
+import { TableStickyScrollbar } from './TableStickyScrollbar';
 import type { TableOptions } from './types';
 
 const isIE11 = browser.ie_version === 11;
@@ -72,6 +76,7 @@ const isIE11 = browser.ie_version === 11;
 // componentDidUpdate is called multiple times. The isOverflowing value is correct only on the last update.
 // To make sure we capture the last update, we use setTimeout.
 const initialOverflowCaptureTimeroutDelay = 300;
+
 export interface ComponentProps {
   view: EditorView;
   getNode: () => PmNode;
@@ -117,6 +122,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   private containerWidth?: EditorContainerWidth;
   private layoutSize?: number;
   private overflowShadowsObserver?: OverflowShadowsObserver;
+  private stickyScrollbar?: TableStickyScrollbar;
 
   private isInitialOverflowSent: boolean;
   private initialOverflowCaptureTimerId?: ReturnType<typeof setTimeout>;
@@ -154,7 +160,18 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   componentDidMount() {
     const { allowColumnResizing, eventDispatcher, options } = this.props;
     if (allowColumnResizing && this.wrapper && !isIE11) {
-      this.wrapper.addEventListener('scroll', this.handleScrollDebounced);
+      this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
+        passive: true,
+      });
+
+      if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
+        if (this.table) {
+          this.stickyScrollbar = new TableStickyScrollbar(
+            this.wrapper,
+            this.props.view,
+          );
+        }
+      }
     }
 
     if (allowColumnResizing) {
@@ -193,6 +210,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
     }
 
+    if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
+      if (this.stickyScrollbar) {
+        this.stickyScrollbar.dispose();
+      }
+    }
+
     this.handleScrollDebounced.cancel();
     this.scaleTableDebounced.cancel();
     this.handleTableResizingDebounced.cancel();
@@ -453,6 +476,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           className={ClassName.TABLE_STICKY_SENTINEL_TOP}
           data-testid="sticky-sentinel-top"
         />
+        {getBooleanFF('platform.editor.table-sticky-scrollbar') && (
+          <div
+            className={ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP}
+            data-testid="sticky-scrollbar-sentinel-top"
+          />
+        )}
         {allowControls && rowControls}
         <div
           style={shadowStyle(showBeforeShadow)}
@@ -473,7 +502,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             }}
           />
         )}
-
         <div
           className={classnames(ClassName.TABLE_NODE_WRAPPER)}
           ref={(elem) => {
@@ -488,6 +516,17 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             }
           }}
         />
+        {getBooleanFF('platform.editor.table-sticky-scrollbar') && (
+          <div
+            className={ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}
+            style={{
+              height: MAX_BROWSER_SCROLLBAR_HEIGHT,
+              display: 'none',
+            }}
+          >
+            <div style={{ width: tableRef?.clientWidth }}></div>
+          </div>
+        )}
         <div
           style={shadowStyle(showAfterShadow)}
           className={ClassName.TABLE_RIGHT_SHADOW}
@@ -526,6 +565,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           className={ClassName.TABLE_STICKY_SENTINEL_BOTTOM}
           data-testid="sticky-sentinel-bottom"
         />
+        {getBooleanFF('platform.editor.table-sticky-scrollbar') && (
+          <div
+            className={ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM}
+            data-testid="sticky-scrollbar-sentinel-bottom"
+          />
+        )}
       </TableContainer>
     );
   }
@@ -535,6 +580,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       return;
     }
 
+    if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
+      if (this.stickyScrollbar) {
+        this.stickyScrollbar.scrollLeft(this.wrapper.scrollLeft);
+      }
+    }
+
     if (this.table) {
       // sync sticky header row to table scroll
       const headers = this.table.querySelectorAll('tr[data-header-row]');

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -201,11 +201,17 @@ export const TableResizer = ({
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
       // deleted this table
       if (isResizing.current) {
+        const {
+          dispatch,
+          state: { tr },
+        } = editorView;
         displayGapCursor(true);
         displayGuideline([]);
+        tr.setMeta(tableWidthPluginKey, { resizing: false });
+        dispatch(tr);
       }
     };
-  }, [displayGuideline, displayGapCursor]);
+  }, [editorView, displayGuideline, displayGapCursor]);
 
   const handleResizeStart = useCallback(() => {
     startMeasure();

package/src/plugins/table/nodeviews/TableStickyScrollbar.ts

@@ -0,0 +1,204 @@
+import rafSchedule from 'raf-schd';
+
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+import { TableCssClassName as ClassName } from '../types';
+
+type SentinelState = 'above' | 'visible' | 'below';
+
+export class TableStickyScrollbar {
+  private wrapper: HTMLDivElement;
+  private view: EditorView;
+  private editorScrollableElement?: HTMLElement | Document;
+  private intersectionObserver?: IntersectionObserver;
+  private stickyScrollbarContainerElement?: HTMLDivElement | null;
+
+  private sentinels: {
+    bottom?: HTMLElement | null;
+    top?: HTMLElement | null;
+  } = {};
+
+  private topSentinelState?: SentinelState;
+  private bottomSentinelState?: SentinelState;
+
+  constructor(wrapper: HTMLDivElement, view: EditorView) {
+    this.wrapper = wrapper;
+    this.view = view;
+
+    this.init();
+  }
+
+  dispose() {
+    if (this.stickyScrollbarContainerElement) {
+      this.stickyScrollbarContainerElement.removeEventListener(
+        'scroll',
+        this.handleScrollDebounced,
+      );
+      this.handleScrollDebounced.cancel();
+    }
+
+    this.deleteIntesactionObserver();
+  }
+
+  scrollLeft(left: number) {
+    if (this.stickyScrollbarContainerElement) {
+      this.stickyScrollbarContainerElement.scrollLeft = left;
+    }
+  }
+
+  private init() {
+    if (!this.wrapper) {
+      return;
+    }
+
+    this.stickyScrollbarContainerElement =
+      this.wrapper.parentElement?.querySelector(
+        `.${ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}`,
+      );
+
+    if (this.stickyScrollbarContainerElement) {
+      this.stickyScrollbarContainerElement.addEventListener(
+        'scroll',
+        this.handleScrollDebounced,
+        { passive: true },
+      );
+    }
+
+    this.createIntersectionObserver();
+  }
+
+  private createIntersectionObserver() {
+    this.editorScrollableElement =
+      (findOverflowScrollParent(this.view.dom) as HTMLElement) ||
+      window.document;
+
+    if (!this.editorScrollableElement || !this.wrapper) {
+      return;
+    }
+
+    this.intersectionObserver = new IntersectionObserver(
+      (entries: IntersectionObserverEntry[], _: IntersectionObserver) => {
+        if (!this.stickyScrollbarContainerElement) {
+          return;
+        }
+
+        entries.forEach((entry) => {
+          const target = entry.target as HTMLElement;
+          // if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
+          if (entry.rootBounds?.height === 0) {
+            return;
+          }
+
+          if (
+            target.classList.contains(
+              ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
+            )
+          ) {
+            this.sentenialBottomCallback(entry);
+          }
+
+          if (
+            target.classList.contains(
+              ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
+            )
+          ) {
+            this.sentenialTopCallback(entry);
+          }
+        });
+      },
+      { root: this.editorScrollableElement },
+    );
+
+    this.sentinels.bottom = this.wrapper?.parentElement
+      ?.getElementsByClassName(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)
+      ?.item(0) as HTMLElement;
+
+    this.sentinels.top = this.wrapper?.parentElement
+      ?.getElementsByClassName(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)
+      ?.item(0) as HTMLElement;
+
+    [this.sentinels.bottom, this.sentinels.top].forEach((el) =>
+      this.intersectionObserver!.observe(el),
+    );
+  }
+
+  private deleteIntesactionObserver() {
+    if (this.intersectionObserver) {
+      if (this.sentinels.bottom) {
+        this.intersectionObserver.unobserve(this.sentinels.bottom);
+      }
+      this.intersectionObserver.disconnect();
+    }
+  }
+
+  private sentenialBottomCallback(entry: IntersectionObserverEntry) {
+    const sentinelIsAboveScrollArea =
+      entry.boundingClientRect.top < (entry.rootBounds?.top || 0);
+
+    this.bottomSentinelState = sentinelIsAboveScrollArea
+      ? 'above'
+      : entry.isIntersecting
+      ? 'visible'
+      : 'below';
+
+    this.toggle();
+  }
+
+  private sentenialTopCallback(entry: IntersectionObserverEntry) {
+    const sentinelIsBelowScrollArea =
+      (entry.rootBounds?.bottom || 0) < entry.boundingClientRect.top;
+
+    this.topSentinelState = sentinelIsBelowScrollArea
+      ? 'below'
+      : entry.isIntersecting
+      ? 'visible'
+      : 'above';
+
+    this.toggle();
+  }
+
+  private toggle() {
+    if (
+      (this.topSentinelState === 'visible' ||
+        this.topSentinelState === 'above') &&
+      this.bottomSentinelState === 'below'
+    ) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  private hide() {
+    if (
+      this.stickyScrollbarContainerElement &&
+      this.stickyScrollbarContainerElement.style.display !== 'none'
+    ) {
+      this.stickyScrollbarContainerElement.style.display = 'none';
+    }
+  }
+
+  private show() {
+    if (
+      this.stickyScrollbarContainerElement &&
+      this.stickyScrollbarContainerElement.style.display !== 'block'
+    ) {
+      this.stickyScrollbarContainerElement.style.display = 'block';
+    }
+  }
+
+  private handleScroll = (event: Event) => {
+    if (
+      !this.stickyScrollbarContainerElement ||
+      !this.wrapper ||
+      event.target !== this.stickyScrollbarContainerElement
+    ) {
+      return;
+    }
+
+    this.wrapper.scrollLeft = this.stickyScrollbarContainerElement.scrollLeft;
+  };
+
+  private handleScrollDebounced = rafSchedule(this.handleScroll);
+}

package/src/plugins/table/toolbar.tsx

@@ -33,13 +33,13 @@ import {
   getNodeName,
   isReferencedSource,
 } from '@atlaskit/editor-common/utils';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 import {
   findCellRectClosestToPos,
   findTable,
@@ -48,6 +48,7 @@ import {
   splitCell,
 } from '@atlaskit/editor-tables/utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   clearHoverSelection,
@@ -79,13 +80,13 @@ import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing
 import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
 import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { canMergeCells } from './transforms';
-import {
+import type {
   PluginConfig,
-  TableCssClassName,
   ToolbarMenuConfig,
   ToolbarMenuContext,
   ToolbarMenuState,
 } from './types';
+import { TableCssClassName } from './types';
 import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
 import tableMessages from './ui/messages';
 import {
@@ -520,6 +521,9 @@ export const getToolbarConfig =
         getDomRef,
         nodeType,
         offset: [0, 18],
+        absoluteOffset: getBooleanFF('platform.editor.table-sticky-scrollbar')
+          ? { top: -6 }
+          : { top: 0 },
         zIndex: akEditorFloatingPanelZIndex + 1, // Place the context menu slightly above the others
         items: [
           menu,