@atlaskit/editor-plugin-table 3.1.3 → 3.2.1

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/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -150,10 +150,13 @@ export class TableRowNodeView implements NodeView {
 
     this.listening = true;
 
-    this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this));
+    this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this), {
+      passive: true,
+    });
     this.dom.addEventListener(
       'touchmove',
       this.headerRowMouseScroll.bind(this),
+      { passive: true },
     );
   }
 
@@ -164,7 +167,7 @@ export class TableRowNodeView implements NodeView {
     if (this.intersectionObserver) {
       this.intersectionObserver.disconnect();
       // ED-16211 Once intersection observer is disconnected, we need to remove the isObserved from the sentinels
-      // Otherwise when new intersection observer is created it will not observe because it thinks its already being observed
+      // Otherwise when newer intersection observer is created it will not observe because it thinks its already being observed
       [this.sentinels.top, this.sentinels.bottom].forEach((el) => {
         if (el) {
           delete el.dataset.isObserved;
@@ -522,9 +525,27 @@ export class TableRowNodeView implements NodeView {
     return false;
   };
 
+  /**
+   * Manually refire the intersection observers.
+   * Useful when the header may have detached from the table.
+   */
+  refireIntersectionObservers = () => {
+    if (this.isSticky) {
+      [this.sentinels.top, this.sentinels.bottom].forEach((el) => {
+        if (el && this.intersectionObserver) {
+          this.intersectionObserver.unobserve(el);
+          this.intersectionObserver.observe(el);
+        }
+      });
+    }
+  };
+
   makeHeaderRowSticky = (tree: TableDOMElements, scrollTop?: number) => {
     // If header row height is more than 50% of viewport height don't do this
-    if (this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
+    if (
+      this.isSticky ||
+      (this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2)
+    ) {
       return;
     }
 
@@ -552,6 +573,22 @@ export class TableRowNodeView implements NodeView {
       table.classList.add(ClassName.TABLE_STICKY);
 
       this.isSticky = true;
+
+      /**
+       * The logic below is not desirable, but acts as a fail safe for scenarios where the sticky header
+       * detaches from the table. This typically happens during a fast scroll by the user which causes
+       * the intersection observer logic to not fire as expected.
+       */
+      this.editorScrollableElement?.addEventListener(
+        'scrollend',
+        this.refireIntersectionObservers,
+        { passive: true, once: true },
+      );
+
+      const fastScrollThresholdMs = 500;
+      setTimeout(() => {
+        this.refireIntersectionObservers();
+      }, fastScrollThresholdMs);
     }
 
     this.dom.style.top = `${domTop}px`;

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