@atlaskit/editor-plugin-table 7.5.5 → 7.5.6

package/src/nodeviews/TableComponent.tsx

@@ -84,6 +84,12 @@ const isIE11 = browser.ie_version === 11;
 // To make sure we capture the last update, we use setTimeout.
 const initialOverflowCaptureTimeroutDelay = 300;
 
+// This is a hard switch for controlling whether the overflow analytics should be dispatched. There has been 6months of data
+// already collected which we could use but have not. This has been disabled rather then removed entirely in the event that
+// the current collected data becomes stale and we want to start collecting fresh data again in future.
+// PLEASE NOTE: that the current way this alaytics has been configured WILL cause reflows to occur. This is why the has been disabled.
+const isOverflowAnalyticsEnabled = false;
+
 export interface ComponentProps {
   view: EditorView;
   getNode: () => PmNode;
@@ -114,6 +120,8 @@ interface TableState {
   stickyHeader?: RowStickyState;
   [ShadowEvent.SHOW_BEFORE_SHADOW]: boolean;
   [ShadowEvent.SHOW_AFTER_SHADOW]: boolean;
+  tableWrapperWidth?: number;
+  tableWrapperHeight?: number;
 }
 
 class TableComponent extends React.Component<ComponentProps, TableState> {
@@ -124,6 +132,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     parentWidth: undefined,
     [ShadowEvent.SHOW_BEFORE_SHADOW]: false,
     [ShadowEvent.SHOW_AFTER_SHADOW]: false,
+    tableWrapperWidth: undefined,
+    tableWrapperHeight: undefined,
   };
 
   private wrapper?: HTMLDivElement | null;
@@ -136,6 +146,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
   private isInitialOverflowSent: boolean;
   private initialOverflowCaptureTimerId?: ReturnType<typeof setTimeout>;
+  private resizeObserver?: ResizeObserver;
 
   private dragAndDropCleanupFn?: CleanupFn;
 
@@ -158,6 +169,21 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       },
     );
 
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        this.setState((prev) => {
+          return prev?.tableWrapperWidth === entry.contentRect?.width &&
+            prev?.tableWrapperHeight === entry.contentRect?.height
+            ? prev
+            : {
+                ...prev,
+                tableWrapperWidth: entry.contentRect.width,
+                tableWrapperHeight: entry.contentRect.height,
+              };
+        });
+      }
+    });
+
     // Disable inline table editing and resizing controls in Firefox
     // https://github.com/ProseMirror/prosemirror/issues/432
     if ('execCommand' in document) {
@@ -231,11 +257,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     eventDispatcher.on((stickyHeadersPluginKey as any).key, this.onStickyState);
 
-    const initialIsOveflowing =
-      this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-      this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+    if (isOverflowAnalyticsEnabled) {
+      const initialIsOveflowing =
+        this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+        this.state[ShadowEvent.SHOW_AFTER_SHADOW];
 
-    this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+    }
   }
 
   componentWillUnmount() {
@@ -254,6 +282,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       this.dragAndDropCleanupFn();
     }
 
+    this.resizeObserver?.disconnect();
+
     const { stickyScrollbar } = getEditorFeatureFlags();
 
     if (stickyScrollbar) {
@@ -418,38 +448,42 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
       this.handleTableResizingDebounced();
     }
+    if (isOverflowAnalyticsEnabled) {
+      const newIsOverflowing =
+        this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+        this.state[ShadowEvent.SHOW_AFTER_SHADOW];
 
-    const newIsOverflowing =
-      this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-      this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+      const prevIsOverflowing =
+        prevState[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+        prevState[ShadowEvent.SHOW_AFTER_SHADOW];
 
-    const prevIsOverflowing =
-      prevState[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-      prevState[ShadowEvent.SHOW_AFTER_SHADOW];
-
-    if (this.initialOverflowCaptureTimerId) {
-      clearTimeout(this.initialOverflowCaptureTimerId);
-    }
-
-    if (!this.isInitialOverflowSent) {
-      this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
-    }
+      if (this.initialOverflowCaptureTimerId) {
+        clearTimeout(this.initialOverflowCaptureTimerId);
+      }
 
-    if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
-      const {
-        dispatch,
-        state: { tr },
-      } = this.props.view;
+      if (!this.isInitialOverflowSent) {
+        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+      }
 
-      dispatch(
-        tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
-          isOverflowing: newIsOverflowing,
-          wasOverflowing: prevIsOverflowing,
-          editorWidth: this.props.containerWidth.width || 0,
-          width: this.node.attrs.width || 0,
-          parentWidth: this.state?.parentWidth || 0,
-        }),
-      );
+      if (
+        this.isInitialOverflowSent &&
+        prevIsOverflowing !== newIsOverflowing
+      ) {
+        const {
+          dispatch,
+          state: { tr },
+        } = this.props.view;
+
+        dispatch(
+          tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
+            isOverflowing: newIsOverflowing,
+            wasOverflowing: prevIsOverflowing,
+            editorWidth: this.props.containerWidth.width || 0,
+            width: this.node.attrs.width || 0,
+            parentWidth: this.state?.parentWidth || 0,
+          }),
+        );
+      }
     }
   }
 
@@ -471,6 +505,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     }
   };
 
+  private observeTable(table: HTMLTableElement | null) {
+    if (table) {
+      this.resizeObserver?.observe(table);
+    }
+  }
+
   onStickyState = (state: StickyPluginState) => {
     const pos = this.props.getPos();
     if (!isValidPosition(pos, this.props.view.state)) {
@@ -539,6 +579,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         selection={view.state.selection}
         headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
         stickyHeader={this.state.stickyHeader}
+        tableWrapperWidth={this.state.tableWrapperWidth}
       />
     );
     const tableContainerWidth = getTableContainerWidth(node);
@@ -563,6 +604,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         tableContainerWidth={tableContainerWidth}
         isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
         getScrollOffset={() => this.wrapper?.scrollLeft || 0}
+        tableWrapperHeight={this.state.tableWrapperHeight}
       />
     ) : null;
 
@@ -615,6 +657,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isBreakoutEnabled={options?.isBreakoutEnabled}
         isNested={isNested}
         pluginInjectionApi={pluginInjectionApi}
+        tableWrapperHeight={this.state.tableWrapperHeight}
         isTableResizingEnabled={options?.isTableResizingEnabled}
         isResizing={isResizing}
         isTableScalingEnabled={isTableScalingEnabled}
@@ -668,6 +711,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
               if (tableElement !== this.table) {
                 this.table = tableElement;
                 this.createShadowSentinels(this.table);
+                this.observeTable(this.table);
               }
             }
           }}

package/src/nodeviews/TableContainer.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import React, { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 
@@ -78,6 +78,7 @@ type ResizableTableContainerProps = {
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
   isTableScalingEnabled?: boolean;
+  tableWrapperHeight?: number;
 };
 
 export const ResizableTableContainer = React.memo(
@@ -92,9 +93,11 @@ export const ResizableTableContainer = React.memo(
     isResizing,
     pluginInjectionApi,
     isTableScalingEnabled,
+    tableWrapperHeight,
   }: PropsWithChildren<ResizableTableContainerProps>) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
+    const [resizing, setIsResizing] = useState(false);
 
     const updateContainerHeight = useCallback((height: number | 'auto') => {
       // current StickyHeader State is not stable to be fetch.
@@ -108,41 +111,26 @@ export const ResizableTableContainer = React.memo(
         //    1px is border width but collapse make it 0.5.
         // -- When sticky header appear, we should add first row height but reduce
         //    collapsed border
-        containerRef.current?.style.setProperty(
-          'height',
-          typeof height === 'number' ? `${height + 40.5}px` : 'auto',
-        );
+        return typeof height === 'number' ? `${height + 40.5}px` : 'auto';
       } else {
         const stickyHeaderHeight =
           containerRef.current
             ?.getElementsByTagName('th')[0]
             .getBoundingClientRect().height || 0;
-        containerRef.current?.style.setProperty(
-          'height',
-          typeof height === 'number'
-            ? `${height + stickyHeaderHeight + 39.5}px`
-            : 'auto',
-        );
+
+        return typeof height === 'number'
+          ? `${height + stickyHeaderHeight + 39.5}px`
+          : 'auto';
       }
     }, []);
 
-    const resizeObserverRef = useRef(
-      new ResizeObserver((entries) => {
-        updateContainerHeight(entries[entries.length - 1].contentRect.height);
-      }),
-    );
-
     const onResizeStart = useCallback(() => {
-      if (tableRef) {
-        resizeObserverRef.current.observe(tableRef);
-      }
-    }, [tableRef]);
+      setIsResizing(true);
+    }, []);
 
     const onResizeStop = useCallback(() => {
-      updateContainerHeight('auto');
-
-      resizeObserverRef.current.disconnect();
-    }, [updateContainerHeight]);
+      setIsResizing(false);
+    }, []);
 
     const updateWidth = useCallback((width: number) => {
       if (!containerRef.current) {
@@ -239,6 +227,9 @@ export const ResizableTableContainer = React.memo(
         <div
           style={{
             width: tableWidthRef.current,
+            height: resizing
+              ? updateContainerHeight(tableWrapperHeight ?? 'auto')
+              : 'auto',
           }}
           className={ClassName.TABLE_RESIZER_CONTAINER}
           ref={containerRef}
@@ -267,6 +258,7 @@ type TableContainerProps = {
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
   isTableScalingEnabled?: boolean;
+  tableWrapperHeight?: number;
 };
 
 export const TableContainer = ({
@@ -280,6 +272,7 @@ export const TableContainer = ({
   getPos,
   tableRef,
   isNested,
+  tableWrapperHeight,
   isResizing,
   pluginInjectionApi,
   isTableScalingEnabled,
@@ -293,6 +286,7 @@ export const TableContainer = ({
         editorView={editorView}
         getPos={getPos}
         tableRef={tableRef}
+        tableWrapperHeight={tableWrapperHeight}
         isResizing={isResizing}
         pluginInjectionApi={pluginInjectionApi}
         isTableScalingEnabled={isTableScalingEnabled}

package/src/nodeviews/TableResizer.tsx

@@ -125,10 +125,7 @@ const getResizerHandleHeight = (
 
 const getResizerMinWidth = (node: PMNode) => {
   const currentColumnCount = getColgroupChildrenLength(node);
-  const minColumnWidth =
-    currentColumnCount <= 3
-      ? currentColumnCount * COLUMN_MIN_WIDTH
-      : 3 * COLUMN_MIN_WIDTH;
+  const minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
   // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;

package/src/plugin.tsx

@@ -135,10 +135,11 @@ export type TablePlugin = NextEditorPlugin<
 const tablesPlugin: TablePlugin = ({ config: options, api }) => {
   const editorViewRef: Record<'current', EditorView | null> = { current: null };
   const defaultGetEditorContainerWidth: GetEditorContainerWidth = () => {
-    const defaultState = {
-      width: document?.body?.offsetWidth ?? 500,
-    };
-    return api?.width?.sharedState.currentState() ?? defaultState;
+    return (
+      api?.width?.sharedState.currentState() ?? {
+        width: document?.body?.offsetWidth ?? 500,
+      }
+    );
   };
   const editorAnalyticsAPI = api?.analytics?.actions;
 

package/src/pm-plugins/main.ts

@@ -77,7 +77,6 @@ import TableRow from '../nodeviews/TableRow';
 import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
 import { fixTables, replaceSelectedTable } from '../transforms';
 import type {
-  ElementContentRects,
   InvalidNodeAttr,
   PluginConfig,
   PluginInjectionAPI,
@@ -134,19 +133,6 @@ export const createPlugin = (
     getIntl,
   });
 
-  let elementContentRects: ElementContentRects = {};
-
-  const observer = window?.ResizeObserver
-    ? new ResizeObserver((entries) => {
-        entries.forEach((entry) => {
-          if (!entry.target.id) {
-            return;
-          }
-          elementContentRects[entry.target.id] = entry.contentRect;
-        });
-      })
-    : undefined;
-
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   const invalidTableIds: string[] = [];
   let editorViewRef: EditorView | null = null;
@@ -282,11 +268,6 @@ export const createPlugin = (
             removeResizeHandleDecorations()(state, dispatch);
           }
         },
-        destroy: () => {
-          if (observer) {
-            observer.disconnect();
-          }
-        },
       };
     },
     props: {
@@ -417,9 +398,9 @@ export const createPlugin = (
         tableRow: (node, view, getPos) =>
           new TableRow(node, view, getPos, eventDispatcher),
         tableCell: (node, view, getPos) =>
-          new TableCell(node, view, getPos, eventDispatcher, observer),
+          new TableCell(node, view, getPos, eventDispatcher),
         tableHeader: (node, view, getPos) =>
-          new TableCell(node, view, getPos, eventDispatcher, observer),
+          new TableCell(node, view, getPos, eventDispatcher),
       },
       handleDOMEvents: {
         focus: handleFocus,
@@ -428,7 +409,7 @@ export const createPlugin = (
         mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
         mouseleave: handleMouseLeave,
         mouseout: whenTableInFocus(handleMouseOut),
-        mousemove: whenTableInFocus(handleMouseMove, elementContentRects),
+        mousemove: whenTableInFocus(handleMouseMove),
         mouseenter: handleMouseEnter,
         mouseup: whenTableInFocus(handleMouseUp),
         click: withCellTracking(whenTableInFocus(handleClick)),

package/src/types.ts

@@ -447,10 +447,6 @@ export interface ToolbarMenuContext {
   formatMessage: IntlShape['formatMessage'];
 }
 
-export type ElementContentRects = {
-  [key: string]: ResizeObserverEntry['contentRect'];
-};
-
 export enum ShadowEvent {
   SHOW_BEFORE_SHADOW = 'showBeforeShadow',
   SHOW_AFTER_SHADOW = 'showAfterShadow',

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -38,6 +38,7 @@ export interface Props {
   tableContainerWidth?: number;
   isNumberColumnEnabled?: boolean;
   getScrollOffset?: () => number;
+  tableWrapperHeight?: number;
 }
 
 export const TableFloatingColumnControls = ({
@@ -55,10 +56,8 @@ export const TableFloatingColumnControls = ({
   tableContainerWidth,
   isNumberColumnEnabled,
   getScrollOffset,
+  tableWrapperHeight,
 }: Props) => {
-  const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
-    { width: 0, height: 0 },
-  );
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -70,29 +69,6 @@ export const TableFloatingColumnControls = ({
       ? stickyHeader.top
       : undefined;
 
-  useEffect(() => {
-    if (tableRef && window?.ResizeObserver) {
-      const resizeObserver = new ResizeObserver((entries) => {
-        for (let entry of entries) {
-          setTableRect((prev) => {
-            if (
-              prev.width !== entry.contentRect.width ||
-              prev.height !== entry.contentRect.height
-            ) {
-              return entry.contentRect;
-            }
-            return prev;
-          });
-        }
-      });
-      resizeObserver.observe(tableRef);
-
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [tableRef]);
-
   useEffect(() => {
     return monitorForElements({
       canMonitor({ source }) {
@@ -115,11 +91,11 @@ export const TableFloatingColumnControls = ({
 
   const rowHeights = useMemo(() => {
     // NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
-    if (tableRef && !!tableRect.height) {
+    if (tableRef && !!tableWrapperHeight) {
       return getRowHeights(tableRef);
     }
     return [0];
-  }, [tableRef, tableRect.height]);
+  }, [tableRef, tableWrapperHeight]);
 
   if (!tableRef || !tableActive || isResizing) {
     return null;
@@ -165,7 +141,7 @@ export const TableFloatingColumnControls = ({
         <ColumnDropTargets
           tableRef={tableRef}
           isHeaderSticky={stickyHeader?.sticky && hasHeaderRow}
-          tableHeight={tableRect.height}
+          tableHeight={tableWrapperHeight}
           localId={currentNodeLocalId}
           colWidths={colWidths}
           getScrollOffset={getScrollOffset}