@atlaskit/editor-plugin-table 7.16.10 → 7.16.12

package/src/nodeviews/TableStickyScrollbar.ts

@@ -6,194 +6,177 @@ 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.handleScroll,
-      );
-    }
-
-    this.deleteIntersectionObserver();
-  }
-
-  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.handleScroll,
-        { 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.sentinelBottomCallback(entry);
-          }
-
-          if (
-            target.classList.contains(
-              ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
-            )
-          ) {
-            this.sentinelTopCallback(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 deleteIntersectionObserver() {
-    if (this.intersectionObserver) {
-      if (this.sentinels.bottom) {
-        this.intersectionObserver.unobserve(this.sentinels.bottom);
-      }
-      this.intersectionObserver.disconnect();
-    }
-  }
-
-  private sentinelBottomCallback(entry: IntersectionObserverEntry) {
-    const sentinelIsAboveScrollArea =
-      entry.boundingClientRect.top < (entry.rootBounds?.top || 0);
-
-    this.bottomSentinelState = sentinelIsAboveScrollArea
-      ? 'above'
-      : entry.isIntersecting
-      ? 'visible'
-      : 'below';
-
-    this.toggle();
-  }
-
-  private sentinelTopCallback(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 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.handleScroll);
+		}
+
+		this.deleteIntersectionObserver();
+	}
+
+	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.handleScroll, {
+				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.sentinelBottomCallback(entry);
+					}
+
+					if (target.classList.contains(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) {
+						this.sentinelTopCallback(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 deleteIntersectionObserver() {
+		if (this.intersectionObserver) {
+			if (this.sentinels.bottom) {
+				this.intersectionObserver.unobserve(this.sentinels.bottom);
+			}
+			this.intersectionObserver.disconnect();
+		}
+	}
+
+	private sentinelBottomCallback(entry: IntersectionObserverEntry) {
+		const sentinelIsAboveScrollArea = entry.boundingClientRect.top < (entry.rootBounds?.top || 0);
+
+		this.bottomSentinelState = sentinelIsAboveScrollArea
+			? 'above'
+			: entry.isIntersecting
+				? 'visible'
+				: 'below';
+
+		this.toggle();
+	}
+
+	private sentinelTopCallback(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;
+	};
 }

package/src/nodeviews/__mocks__/OverflowShadowsObserver.ts

@@ -1,13 +1,13 @@
 import { OverridableMock } from './OverridableMock';
 
 export class OverflowShadowsObserver extends OverridableMock {
-  leftShadowSentinel: HTMLElement | null = null;
-  rightShadowSentinel: HTMLElement | null = null;
-  constructor(...inputs: any[]) {
-    super(...inputs);
-  }
+	leftShadowSentinel: HTMLElement | null = null;
+	rightShadowSentinel: HTMLElement | null = null;
+	constructor(...inputs: any[]) {
+		super(...inputs);
+	}
 
-  observeShadowSentinels = this.getMock('observeShadowSentinels');
-  updateStickyShadows = this.getMock('updateStickyShadows');
-  dispose = this.getMock('dispose');
+	observeShadowSentinels = this.getMock('observeShadowSentinels');
+	updateStickyShadows = this.getMock('updateStickyShadows');
+	dispose = this.getMock('dispose');
 }

package/src/nodeviews/__mocks__/OverridableMock.ts

@@ -1,21 +1,20 @@
 export abstract class OverridableMock {
-  static mockOverrides: { [key: string]: any } = {};
+	static mockOverrides: { [key: string]: any } = {};
 
-  constructor(...inputs: any[]) {
-    const constructorMock =
-      OverridableMock.mockOverrides['constructor'] || jest.fn();
-    constructorMock(...inputs);
-  }
+	constructor(...inputs: any[]) {
+		const constructorMock = OverridableMock.mockOverrides['constructor'] || jest.fn();
+		constructorMock(...inputs);
+	}
 
-  getMock(key: string) {
-    return OverridableMock.mockOverrides[key] || jest.fn();
-  }
+	getMock(key: string) {
+		return OverridableMock.mockOverrides[key] || jest.fn();
+	}
 
-  static setMock(thisKey: string, value: any) {
-    OverridableMock.mockOverrides[thisKey] = value;
-  }
+	static setMock(thisKey: string, value: any) {
+		OverridableMock.mockOverrides[thisKey] = value;
+	}
 
-  static resetMocks() {
-    OverridableMock.mockOverrides = {};
-  }
+	static resetMocks() {
+		OverridableMock.mockOverrides = {};
+	}
 }