@atlaskit/editor-plugin-table 3.1.3 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "3.1.3",
+  "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/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/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,

package/src/plugins/table/ui/common-styles.ts

@@ -14,6 +14,7 @@ import {
   akEditorTableToolbarSize,
   akEditorUnitZIndex,
   getSelectionStyles,
+  MAX_BROWSER_SCROLLBAR_HEIGHT,
   relativeFontSizeToBase16,
   SelectionStyle,
 } from '@atlaskit/editor-shared-styles';
@@ -75,6 +76,7 @@ const cornerControlHeight = tableToolbarSize + 1;
   its center should be aligned with the edge
 */
 export const insertColumnButtonOffset = tableInsertColumnButtonSize / 2;
+export const tableRowHeight = 44;
 
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
@@ -114,6 +116,41 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
   }
 }`;
 
+const stickyScrollbarSentinelStyles = `.${ClassName.TABLE_CONTAINER} {
+ > .${ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM},
+ > .${ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP} {
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    margin-top: -1px;
+    // need this to avoid sentinel being focused via keyboard
+    // this still allows it to be detected by intersection observer
+    visibility: hidden;
+  }
+  > .${ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP} {
+    top: ${columnControlsDecorationHeight + tableRowHeight * 3}px;
+  }
+  > .${ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM} {
+    bottom: ${MAX_BROWSER_SCROLLBAR_HEIGHT}px;
+  }
+}`;
+
+const stickyScrollbarContainerStyles = `.${ClassName.TABLE_CONTAINER} {
+  > .${ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER} {
+    width: 100%;
+    display: none;
+    overflow-x: auto;
+    position: sticky;
+    bottom: 0;
+  }
+}`;
+
+const stickyScrollbarStyles = () => {
+  return getBooleanFF('platform.editor.table-sticky-scrollbar')
+    ? `${stickyScrollbarContainerStyles} ${stickyScrollbarSentinelStyles}`
+    : '';
+};
+
 const shadowSentinelStyles = `
   .${ClassName.TABLE_SHADOW_SENTINEL_LEFT},
   .${ClassName.TABLE_SHADOW_SENTINEL_RIGHT} {
@@ -417,6 +454,7 @@ export const tableStyles = (
 
     ${sentinelStyles}
     ${OverflowShadow(props)}
+    ${stickyScrollbarStyles()}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
       height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts