@atlaskit/editor-plugin-table 7.16.10 → 7.16.12

package/src/nodeviews/OverflowShadowsObserver.ts

@@ -5,161 +5,152 @@ import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import { updateShadowListForStickyStyles } from './update-overflow-shadows';
 
 export class OverflowShadowsObserver {
-  private tableIntersectionObserver?: IntersectionObserver;
-  private updateShadowState: (shadowKey: ShadowEvent, value: boolean) => void;
-  private table: HTMLElement;
-  private wrapper: HTMLDivElement;
-
-  private leftShadowSentinel: HTMLElement | null = null;
-  private rightShadowSentinel: HTMLElement | null = null;
-  private shadowsObserved: boolean = false;
-
-  private isSticky = false;
-  private stickyRowHeight = 0;
-
-  // updateShadowState is a method to update shadow key
-  constructor(
-    updateShadowState: (shadowKey: ShadowEvent, value: boolean) => void,
-    table: HTMLElement,
-    wrapper: HTMLDivElement,
-  ) {
-    this.updateShadowState = updateShadowState;
-    this.table = table;
-    this.wrapper = wrapper;
-
-    this.init();
-  }
-
-  private init = () => {
-    const table = this.table;
-
-    if (!this.wrapper || !table) {
-      return;
-    }
-
-    if (!this.tableIntersectionObserver) {
-      const intersectonOnbserverCallback = (
-        entry: IntersectionObserverEntry,
-      ) => {
-        if (
-          entry.target !== this.leftShadowSentinel &&
-          entry.target !== this.rightShadowSentinel
-        ) {
-          return;
-        }
-
-        this.updateStickyShadowsHeightIfChanged();
-        this.updateShadowState(
-          this.leftShadowSentinel === entry.target
-            ? ShadowEvent.SHOW_BEFORE_SHADOW
-            : ShadowEvent.SHOW_AFTER_SHADOW,
-          entry.intersectionRatio !== 1,
-        );
-      };
-
-      this.tableIntersectionObserver = new IntersectionObserver(
-        (entries: IntersectionObserverEntry[], _: IntersectionObserver) => {
-          entries.forEach((entry) => intersectonOnbserverCallback(entry));
-        },
-        {
-          threshold: [0, 1],
-          root: this.wrapper,
-          rootMargin: '0px',
-        },
-      );
-      return;
-    }
-  };
-
-  private updateStickyShadowsHeightIfChanged() {
-    if (!this.isSticky) {
-      return;
-    }
-    const stickyCell = this.getStickyCell();
-    if (!stickyCell) {
-      return;
-    }
-
-    this.updateStickyShadows();
-  }
-
-  private getStickyCell() {
-    const stickyRow = this.wrapper?.querySelector('tr.sticky');
-    const stickyCell = stickyRow && stickyRow.firstElementChild;
-    return stickyCell;
-  }
-
-  observeShadowSentinels = (isSticky?: boolean) => {
-    if (this.isSticky === isSticky) {
-      return;
-    }
-
-    this.isSticky = !!isSticky;
-
-    // reset height
-    this.stickyRowHeight = 0;
-    // update sticky shadows
-    this.updateStickyShadowsHeightIfChanged();
-
-    this.leftShadowSentinel = this.table?.querySelector(
-      `.${ClassName.TABLE_SHADOW_SENTINEL_LEFT}`,
-    );
-    this.rightShadowSentinel = this.table?.querySelector(
-      `.${ClassName.TABLE_SHADOW_SENTINEL_RIGHT}`,
-    );
-
-    if (
-      this.tableIntersectionObserver &&
-      this.leftShadowSentinel &&
-      this.rightShadowSentinel &&
-      !this.shadowsObserved
-    ) {
-      this.tableIntersectionObserver.disconnect();
-      this.tableIntersectionObserver.observe(this.leftShadowSentinel);
-      this.tableIntersectionObserver.observe(this.rightShadowSentinel);
-      this.shadowsObserved = true;
-    }
-  };
-
-  /**
-   * Takes a heightStyle if it can be computed in a less expensive manner,
-   * e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
-   * reading it from sticky cell
-   */
-  updateStickyShadows = rafSchedule((stickyRowHeight?: number) => {
-    if (!this.isSticky) {
-      return;
-    }
-    const stickyCell = this.getStickyCell();
-    if (!stickyCell || !this.wrapper?.parentElement) {
-      return;
-    }
-
-    // Reflow Warning! - stickyCell.clientHeight
-    const newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
-
-    if (newStickyRowHeight !== this.stickyRowHeight) {
-      this.stickyRowHeight = newStickyRowHeight;
-      const heightStyleOrCompute = `${newStickyRowHeight}px`;
-      // Use getElementsByClassName here for a live node list to capture
-      // sticky shadows
-      const liveRightShadows =
-        this.wrapper?.parentElement?.getElementsByClassName(
-          `${ClassName.TABLE_RIGHT_SHADOW}`,
-        );
-      const liveLeftShadows =
-        this.wrapper?.parentElement?.getElementsByClassName(
-          `${ClassName.TABLE_LEFT_SHADOW}`,
-        );
-      updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
-      updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
-    }
-  });
-
-  dispose() {
-    if (this.tableIntersectionObserver) {
-      this.tableIntersectionObserver.disconnect();
-      this.tableIntersectionObserver = undefined;
-    }
-  }
+	private tableIntersectionObserver?: IntersectionObserver;
+	private updateShadowState: (shadowKey: ShadowEvent, value: boolean) => void;
+	private table: HTMLElement;
+	private wrapper: HTMLDivElement;
+
+	private leftShadowSentinel: HTMLElement | null = null;
+	private rightShadowSentinel: HTMLElement | null = null;
+	private shadowsObserved: boolean = false;
+
+	private isSticky = false;
+	private stickyRowHeight = 0;
+
+	// updateShadowState is a method to update shadow key
+	constructor(
+		updateShadowState: (shadowKey: ShadowEvent, value: boolean) => void,
+		table: HTMLElement,
+		wrapper: HTMLDivElement,
+	) {
+		this.updateShadowState = updateShadowState;
+		this.table = table;
+		this.wrapper = wrapper;
+
+		this.init();
+	}
+
+	private init = () => {
+		const table = this.table;
+
+		if (!this.wrapper || !table) {
+			return;
+		}
+
+		if (!this.tableIntersectionObserver) {
+			const intersectonOnbserverCallback = (entry: IntersectionObserverEntry) => {
+				if (entry.target !== this.leftShadowSentinel && entry.target !== this.rightShadowSentinel) {
+					return;
+				}
+
+				this.updateStickyShadowsHeightIfChanged();
+				this.updateShadowState(
+					this.leftShadowSentinel === entry.target
+						? ShadowEvent.SHOW_BEFORE_SHADOW
+						: ShadowEvent.SHOW_AFTER_SHADOW,
+					entry.intersectionRatio !== 1,
+				);
+			};
+
+			this.tableIntersectionObserver = new IntersectionObserver(
+				(entries: IntersectionObserverEntry[], _: IntersectionObserver) => {
+					entries.forEach((entry) => intersectonOnbserverCallback(entry));
+				},
+				{
+					threshold: [0, 1],
+					root: this.wrapper,
+					rootMargin: '0px',
+				},
+			);
+			return;
+		}
+	};
+
+	private updateStickyShadowsHeightIfChanged() {
+		if (!this.isSticky) {
+			return;
+		}
+		const stickyCell = this.getStickyCell();
+		if (!stickyCell) {
+			return;
+		}
+
+		this.updateStickyShadows();
+	}
+
+	private getStickyCell() {
+		const stickyRow = this.wrapper?.querySelector('tr.sticky');
+		const stickyCell = stickyRow && stickyRow.firstElementChild;
+		return stickyCell;
+	}
+
+	observeShadowSentinels = (isSticky?: boolean) => {
+		if (this.isSticky === isSticky) {
+			return;
+		}
+
+		this.isSticky = !!isSticky;
+
+		// reset height
+		this.stickyRowHeight = 0;
+		// update sticky shadows
+		this.updateStickyShadowsHeightIfChanged();
+
+		this.leftShadowSentinel = this.table?.querySelector(`.${ClassName.TABLE_SHADOW_SENTINEL_LEFT}`);
+		this.rightShadowSentinel = this.table?.querySelector(
+			`.${ClassName.TABLE_SHADOW_SENTINEL_RIGHT}`,
+		);
+
+		if (
+			this.tableIntersectionObserver &&
+			this.leftShadowSentinel &&
+			this.rightShadowSentinel &&
+			!this.shadowsObserved
+		) {
+			this.tableIntersectionObserver.disconnect();
+			this.tableIntersectionObserver.observe(this.leftShadowSentinel);
+			this.tableIntersectionObserver.observe(this.rightShadowSentinel);
+			this.shadowsObserved = true;
+		}
+	};
+
+	/**
+	 * Takes a heightStyle if it can be computed in a less expensive manner,
+	 * e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
+	 * reading it from sticky cell
+	 */
+	updateStickyShadows = rafSchedule((stickyRowHeight?: number) => {
+		if (!this.isSticky) {
+			return;
+		}
+		const stickyCell = this.getStickyCell();
+		if (!stickyCell || !this.wrapper?.parentElement) {
+			return;
+		}
+
+		// Reflow Warning! - stickyCell.clientHeight
+		const newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
+
+		if (newStickyRowHeight !== this.stickyRowHeight) {
+			this.stickyRowHeight = newStickyRowHeight;
+			const heightStyleOrCompute = `${newStickyRowHeight}px`;
+			// Use getElementsByClassName here for a live node list to capture
+			// sticky shadows
+			const liveRightShadows = this.wrapper?.parentElement?.getElementsByClassName(
+				`${ClassName.TABLE_RIGHT_SHADOW}`,
+			);
+			const liveLeftShadows = this.wrapper?.parentElement?.getElementsByClassName(
+				`${ClassName.TABLE_LEFT_SHADOW}`,
+			);
+			updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
+			updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
+		}
+	});
+
+	dispose() {
+		if (this.tableIntersectionObserver) {
+			this.tableIntersectionObserver.disconnect();
+			this.tableIntersectionObserver = undefined;
+		}
+	}
 }

package/src/nodeviews/TableCell.ts

@@ -9,68 +9,61 @@ import TableNodeView from './TableNodeViewBase';
 const DEFAULT_COL_SPAN = 1;
 const DEFAULT_ROW_SPAN = 1;
 
-export default class TableCell
-  extends TableNodeView<HTMLElement>
-  implements NodeView
-{
-  constructor(
-    node: PMNode,
-    view: EditorView,
-    getPos: () => number | undefined,
-    eventDispatcher: EventDispatcher,
-  ) {
-    super(node, view, getPos, eventDispatcher);
-  }
+export default class TableCell extends TableNodeView<HTMLElement> implements NodeView {
+	constructor(
+		node: PMNode,
+		view: EditorView,
+		getPos: () => number | undefined,
+		eventDispatcher: EventDispatcher,
+	) {
+		super(node, view, getPos, eventDispatcher);
+	}
 
-  update(node: PMNode) {
-    const didUpdate = this.updateNodeView(node);
-    if (didUpdate) {
-      this.node = node;
-    }
-    return didUpdate;
-  }
+	update(node: PMNode) {
+		const didUpdate = this.updateNodeView(node);
+		if (didUpdate) {
+			this.node = node;
+		}
+		return didUpdate;
+	}
 
-  private updateNodeView(node: PMNode) {
-    if (this.node.type !== node.type) {
-      return false;
-    }
+	private updateNodeView(node: PMNode) {
+		if (this.node.type !== node.type) {
+			return false;
+		}
 
-    const attrs = getCellDomAttrs(this.node);
-    const nextAttrs = getCellDomAttrs(node);
+		const attrs = getCellDomAttrs(this.node);
+		const nextAttrs = getCellDomAttrs(node);
 
-    const { colspan, rowspan } = getCellAttrs(this.dom);
+		const { colspan, rowspan } = getCellAttrs(this.dom);
 
-    // need to rerender when colspan/rowspan in dom are different from the node attrs
-    // this can happen when undoing merge cells
-    if (
-      colspan !== (node.attrs.colspan || DEFAULT_COL_SPAN) ||
-      rowspan !== (node.attrs.rowspan || DEFAULT_ROW_SPAN)
-    ) {
-      return false;
-    }
+		// need to rerender when colspan/rowspan in dom are different from the node attrs
+		// this can happen when undoing merge cells
+		if (
+			colspan !== (node.attrs.colspan || DEFAULT_COL_SPAN) ||
+			rowspan !== (node.attrs.rowspan || DEFAULT_ROW_SPAN)
+		) {
+			return false;
+		}
 
-    // added + changed attributes
-    const addedAttrs = Object.entries(nextAttrs).filter(
-      ([key, value]) => attrs[key as keyof CellDomAttrs] !== value,
-    );
+		// added + changed attributes
+		const addedAttrs = Object.entries(nextAttrs).filter(
+			([key, value]) => attrs[key as keyof CellDomAttrs] !== value,
+		);
 
-    const removedAttrs = Object.keys(attrs).filter(
-      (key) => !nextAttrs.hasOwnProperty(key),
-    );
+		const removedAttrs = Object.keys(attrs).filter((key) => !nextAttrs.hasOwnProperty(key));
 
-    if (addedAttrs.length || removedAttrs.length) {
-      addedAttrs.forEach(([key, value]) =>
-        this.dom.setAttribute(key, value || ''),
-      );
-      removedAttrs.forEach((key) => this.dom.removeAttribute(key));
-      return true;
-    }
+		if (addedAttrs.length || removedAttrs.length) {
+			addedAttrs.forEach(([key, value]) => this.dom.setAttribute(key, value || ''));
+			removedAttrs.forEach((key) => this.dom.removeAttribute(key));
+			return true;
+		}
 
-    // Return true to not re-render this node view
-    if (this.node.sameMarkup(node)) {
-      return true;
-    }
+		// Return true to not re-render this node view
+		if (this.node.sameMarkup(node)) {
+			return true;
+		}
 
-    return false;
-  }
+		return false;
+	}
 }