@atlaskit/editor-plugin-table 2.9.1 → 2.10.1

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -51,10 +51,8 @@ import {
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
 import type { TableOptions } from './types';
-import { updateOverflowShadows } from './update-overflow-shadows';
 
 const isIE11 = browser.ie_version === 11;
-const NOOP = () => undefined;
 export interface ComponentProps {
   view: EditorView;
   getNode: () => PmNode;
@@ -79,7 +77,6 @@ export interface ComponentProps {
 interface TableState {
   scroll: number;
   parentWidth?: number;
-  isLoading: boolean;
   stickyHeader?: RowStickyState;
   [ShadowEvent.SHOW_BEFORE_SHADOW]: boolean;
   [ShadowEvent.SHOW_AFTER_SHADOW]: boolean;
@@ -90,7 +87,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   state: TableState = {
     scroll: 0,
     parentWidth: undefined,
-    isLoading: true,
     [ShadowEvent.SHOW_BEFORE_SHADOW]: false,
     [ShadowEvent.SHOW_AFTER_SHADOW]: false,
   };
@@ -104,7 +100,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
   constructor(props: ComponentProps) {
     super(props);
-    const { options, containerWidth, getNode, getEditorFeatureFlags } = props;
+    const { options, containerWidth, getNode } = props;
     this.node = getNode();
     this.containerWidth = containerWidth;
 
@@ -129,15 +125,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         }
       });
     }
-
-    const { initialRenderOptimization } = getEditorFeatureFlags();
-
-    if (!initialRenderOptimization) {
-      // @see ED-7945
-      requestAnimationFrame(() => {
-        this.setState({ isLoading: false });
-      });
-    }
   }
 
   componentDidMount() {
@@ -206,29 +193,22 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       clearHoverSelection()(view.state, view.dispatch);
     }
 
-    const { tableOverflowShadowsOptimization } =
-      this.props.getEditorFeatureFlags();
-
-    if (!tableOverflowShadowsOptimization) {
-      this.updateShadows();
-    } else {
-      if (
-        this.wrapper?.parentElement &&
-        this.table &&
-        !this.overflowShadowsObserver
-      ) {
-        this.overflowShadowsObserver = new OverflowShadowsObserver(
-          this.updateShadowState,
-          this.table,
-          this.wrapper,
-        );
-      }
+    if (
+      this.wrapper?.parentElement &&
+      this.table &&
+      !this.overflowShadowsObserver
+    ) {
+      this.overflowShadowsObserver = new OverflowShadowsObserver(
+        this.updateShadowState,
+        this.table,
+        this.wrapper,
+      );
+    }
 
-      if (this.overflowShadowsObserver) {
-        this.overflowShadowsObserver.observeShadowSentinels(
-          this.state.stickyHeader?.sticky,
-        );
-      }
+    if (this.overflowShadowsObserver) {
+      this.overflowShadowsObserver.observeShadowSentinels(
+        this.state.stickyHeader?.sticky,
+      );
     }
 
     const currentTable = getNode();
@@ -248,32 +228,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       ) {
         const { view } = this.props;
         recreateResizeColsByNode(this.table, currentTable);
-        updateControls(this.props.getEditorFeatureFlags)(view.state);
+        updateControls()(view.state);
       }
 
       this.handleTableResizingDebounced();
     }
   }
 
-  private updateShadows() {
-    const parent = this.wrapper?.parentElement;
-    if (this.wrapper && parent) {
-      const rightShadows = parent.querySelectorAll<HTMLElement>(
-        `.${ClassName.TABLE_RIGHT_SHADOW}`,
-      );
-      const leftShadows = parent.querySelectorAll<HTMLElement>(
-        `.${ClassName.TABLE_LEFT_SHADOW}`,
-      );
-
-      updateOverflowShadows(this.props.getEditorFeatureFlags)(
-        this.wrapper,
-        this.table,
-        rightShadows,
-        leftShadows,
-      );
-    }
-  }
-
   private updateShadowState = (shadowKey: ShadowEvent, value: boolean) => {
     if (this.state[shadowKey] === value) {
       return;
@@ -293,9 +254,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   };
 
   onStickyState = (state: StickyPluginState) => {
-    const { tableOverflowShadowsOptimization } =
-      this.props.getEditorFeatureFlags();
-
     const pos = this.props.getPos();
     if (!isValidPosition(pos, this.props.view.state)) {
       return;
@@ -303,7 +261,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     const stickyHeader = findStickyHeaderForTable(state, pos);
     if (stickyHeader !== this.state.stickyHeader) {
       this.setState({ stickyHeader });
-      if (tableOverflowShadowsOptimization && this.overflowShadowsObserver) {
+      if (this.overflowShadowsObserver) {
         this.overflowShadowsObserver.updateStickyShadows();
       }
     }
@@ -326,27 +284,16 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       getPos,
       pluginInjectionApi,
     } = this.props;
-    const { isLoading, showBeforeShadow, showAfterShadow } = this.state;
+    const { showBeforeShadow, showAfterShadow } = this.state;
     const node = getNode();
     // doesn't work well with WithPluginState
     const { isInDanger, hoveredRows } = getPluginState(view.state);
 
-    const {
-      stickyHeadersOptimization,
-      initialRenderOptimization,
-      tableRenderOptimization,
-      tableOverflowShadowsOptimization,
-    } = this.props.getEditorFeatureFlags();
-
     const tableRef = this.table || undefined;
     const headerRow = tableRef
       ? tableRef.querySelector<HTMLTableRowElement>('tr[data-header-row]')
       : undefined;
 
-    //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
-    const tableHeight =
-      tableRef && !tableRenderOptimization ? tableRef.offsetHeight : undefined;
-
     const hasHeaderRow = containsHeaderRow(node);
     const rowControls = (
       <div className={ClassName.ROW_CONTROLS_WRAPPER}>
@@ -364,7 +311,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           hasHeaderRow={hasHeaderRow}
           // pass `selection` and `tableHeight` to control re-render
           selection={view.state.selection}
-          tableHeight={tableHeight}
           headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
           stickyHeader={this.state.stickyHeader}
           getEditorFeatureFlags={this.props.getEditorFeatureFlags}
@@ -373,16 +319,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     );
 
     const shadowPadding =
-      allowControls && (!isLoading || initialRenderOptimization) && tableActive
-        ? -tableToolbarSize
-        : tableMarginSides;
+      allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
 
-    const shadowStyle = tableOverflowShadowsOptimization
-      ? memoizeOne(
-          (visible) =>
-            ({ visibility: visible ? 'visible' : 'hidden' } as CSSProperties),
-        )
-      : NOOP;
+    const shadowStyle = memoizeOne(
+      (visible) =>
+        ({ visibility: visible ? 'visible' : 'hidden' } as CSSProperties),
+    );
 
     const isNested = isTableNested(view.state, getPos());
 
@@ -404,15 +346,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         pluginInjectionApi={pluginInjectionApi}
         isTableResizingEnabled={options?.isTableResizingEnabled}
       >
-        {stickyHeadersOptimization && (
-          <div
-            className={ClassName.TABLE_STICKY_SENTINEL_TOP}
-            data-testid="sticky-sentinel-top"
-          />
-        )}
-        {allowControls &&
-          (!isLoading || initialRenderOptimization) &&
-          rowControls}
+        <div
+          className={ClassName.TABLE_STICKY_SENTINEL_TOP}
+          data-testid="sticky-sentinel-top"
+        />
+        {allowControls && rowControls}
         <div
           style={shadowStyle(showBeforeShadow)}
           className={ClassName.TABLE_LEFT_SHADOW}
@@ -421,11 +359,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           <div
             className={`${ClassName.TABLE_LEFT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`}
             style={{
-              visibility: tableOverflowShadowsOptimization
-                ? showBeforeShadow && hasHeaderRow
-                  ? 'visible'
-                  : 'hidden'
-                : undefined,
+              visibility:
+                showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
               top: `${
                 this.state.stickyHeader.top +
                 this.state.stickyHeader.padding +
@@ -466,11 +401,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             <div
               className={`${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`}
               style={{
-                visibility: tableOverflowShadowsOptimization
-                  ? showAfterShadow && hasHeaderRow
-                    ? 'visible'
-                    : 'hidden'
-                  : undefined,
+                visibility:
+                  showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
                 top: `${
                   this.state.stickyHeader.top +
                   this.state.stickyHeader.padding +
@@ -481,12 +413,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             />
           </div>
         )}
-        {stickyHeadersOptimization && (
-          <div
-            className={ClassName.TABLE_STICKY_SENTINEL_BOTTOM}
-            data-testid="sticky-sentinel-bottom"
-          />
-        )}
+        <div
+          className={ClassName.TABLE_STICKY_SENTINEL_BOTTOM}
+          data-testid="sticky-sentinel-bottom"
+        />
       </TableContainer>
     );
   }
@@ -507,13 +437,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       }
     }
 
-    const { tableOverflowShadowsOptimization } =
-      this.props.getEditorFeatureFlags();
-
-    if (!tableOverflowShadowsOptimization) {
-      this.updateShadows();
-    }
-
     this.setState({
       [ShadowEvent.SHOW_BEFORE_SHADOW]: this.wrapper.scrollLeft !== 0,
     });

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -17,6 +17,7 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
+import { getPluginState } from '../pm-plugins/plugin-factory';
 import {
   COLUMN_MIN_WIDTH,
   getColgroupChildrenLength,
@@ -126,6 +127,7 @@ export const TableResizer = ({
 
   const resizerMinWidth = getResizerMinWidth(node);
   const handleHeightSize = getResizerHandleHeight(tableRef);
+  const { isInDanger } = getPluginState(editorView.state);
 
   const { startMeasure, endMeasure, countFrames } = useMeasureFramerate();
 
@@ -331,6 +333,7 @@ export const TableResizer = ({
       innerPadding={tableHandlePosition}
       isHandleVisible={findTable(editorView.state?.selection)?.pos === getPos()}
       handleComponent={handleComponent}
+      appearance={isInDanger ? 'danger' : undefined}
     >
       {children}
     </ResizerNext>

package/src/plugins/table/nodeviews/table.tsx

@@ -95,7 +95,6 @@ const toDOM = (node: PmNode, props: Props) => {
 export default class TableView extends ReactNodeView<Props> {
   private table: HTMLElement | undefined;
   private resizeObserver?: ResizeObserver;
-  private tableRenderOptimization?: boolean;
   eventDispatcher?: EventDispatcher;
 
   getPos: getPosHandlerNode;
@@ -114,7 +113,6 @@ export default class TableView extends ReactNodeView<Props> {
       props.hasIntlContext,
     );
     this.getPos = props.getPos;
-    this.tableRenderOptimization = props.tableRenderOptimization;
     this.eventDispatcher = props.eventDispatcher;
   }
 
@@ -247,37 +245,33 @@ export default class TableView extends ReactNodeView<Props> {
 
   private hasHoveredRows = false;
   viewShouldUpdate(nextNode: PmNode) {
-    if (this.tableRenderOptimization) {
-      const { hoveredRows } = getPluginState(this.view.state);
-      const hoveredRowsChanged = !!hoveredRows?.length !== this.hasHoveredRows;
-      if (nextNode.attrs.isNumberColumnEnabled && hoveredRowsChanged) {
-        this.hasHoveredRows = !!hoveredRows?.length;
-        return true;
-      }
-
-      const node = this.getNode();
-      if (typeof node.attrs !== typeof nextNode.attrs) {
-        return true;
-      }
-      const attrKeys = Object.keys(node.attrs);
-      const nextAttrKeys = Object.keys(nextNode.attrs);
-      if (attrKeys.length !== nextAttrKeys.length) {
-        return true;
-      }
+    const { hoveredRows } = getPluginState(this.view.state);
+    const hoveredRowsChanged = !!hoveredRows?.length !== this.hasHoveredRows;
+    if (nextNode.attrs.isNumberColumnEnabled && hoveredRowsChanged) {
+      this.hasHoveredRows = !!hoveredRows?.length;
+      return true;
+    }
 
-      const tableMap = TableMap.get(node);
-      const nextTableMap = TableMap.get(nextNode);
+    const node = this.getNode();
+    if (typeof node.attrs !== typeof nextNode.attrs) {
+      return true;
+    }
+    const attrKeys = Object.keys(node.attrs);
+    const nextAttrKeys = Object.keys(nextNode.attrs);
+    if (attrKeys.length !== nextAttrKeys.length) {
+      return true;
+    }
 
-      if (tableMap.width !== nextTableMap.width) {
-        return true;
-      }
+    const tableMap = TableMap.get(node);
+    const nextTableMap = TableMap.get(nextNode);
 
-      return attrKeys.some((key) => {
-        return node.attrs[key] !== nextNode.attrs[key];
-      });
+    if (tableMap.width !== nextTableMap.width) {
+      return true;
     }
 
-    return super.viewShouldUpdate(nextNode);
+    return attrKeys.some((key) => {
+      return node.attrs[key] !== nextNode.attrs[key];
+    });
   }
 
   ignoreMutation(
@@ -335,7 +329,6 @@ export const createTableView = (
 ): NodeView => {
   const { pluginConfig } = getPluginState(view.state);
   const { allowColumnResizing } = getPluginConfig(pluginConfig);
-  const { tableRenderOptimization } = getEditorFeatureFlags();
   const hasIntlContext = true;
 
   return new TableView({
@@ -346,7 +339,6 @@ export const createTableView = (
     eventDispatcher,
     getPos: getPos as getPosHandlerNode,
     options,
-    tableRenderOptimization,
     getEditorContainerWidth,
     getEditorFeatureFlags,
     hasIntlContext,

package/src/plugins/table/nodeviews/tableCell.tsx

@@ -6,10 +6,7 @@ import {
   getCellDomAttrs,
 } from '@atlaskit/adf-schema';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type {
-  GetEditorFeatureFlags,
-  getPosHandler,
-} from '@atlaskit/editor-common/types';
+import type { getPosHandler } from '@atlaskit/editor-common/types';
 import { DOMSerializer, Node } from '@atlaskit/editor-prosemirror/model';
 import { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 
@@ -24,13 +21,11 @@ export default class TableCellNodeView implements NodeView {
   view: EditorView;
   providerFactory?: ProviderFactory;
   observer?: ResizeObserver;
-  mouseMoveOptimization?: boolean;
 
   constructor(
     node: Node,
     view: EditorView,
     getPos: any,
-    getEditorFeatureFlags: GetEditorFeatureFlags,
     observer?: ResizeObserver,
   ) {
     this.view = view;
@@ -45,11 +40,8 @@ export default class TableCellNodeView implements NodeView {
     this.dom = dom as HTMLElement;
     this.contentDOM = contentDOM as HTMLElement;
 
-    const { mouseMoveOptimization } = getEditorFeatureFlags();
-
-    if (mouseMoveOptimization && observer) {
+    if (observer) {
       this.contentDOM.id = uuid();
-      this.mouseMoveOptimization = mouseMoveOptimization;
       this.observer = observer;
       observer.observe(this.contentDOM);
     }
@@ -108,7 +100,7 @@ export default class TableCellNodeView implements NodeView {
   }
 
   destroy() {
-    if (this.mouseMoveOptimization && this.observer) {
+    if (this.observer) {
       this.observer.unobserve(this.contentDOM);
     }
   }

package/src/plugins/table/nodeviews/types.ts

@@ -25,7 +25,6 @@ export interface Props {
   eventDispatcher: EventDispatcher;
   getPos: () => number | undefined;
   options?: TableOptions;
-  tableRenderOptimization?: boolean;
   getEditorContainerWidth: GetEditorContainerWidth;
   getEditorFeatureFlags: GetEditorFeatureFlags;
   hasIntlContext: boolean;

package/src/plugins/table/nodeviews/update-overflow-shadows.ts

@@ -1,5 +1,3 @@
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-
 import { TableCssClassName as ClassName } from '../types';
 
 export const updateShadowListForStickyStyles = (
@@ -17,55 +15,3 @@ export const updateShadowListForStickyStyles = (
     }
   });
 };
-
-/**
- * Update overflow shadows for a given wrapper & table.
- * if `overflowShadowOptimization` is enabled, this will exit early.
- */
-export const updateOverflowShadows =
-  (getEditorFeatureFlags: GetEditorFeatureFlags) =>
-  (
-    wrapper?: HTMLElement | null,
-    table?: HTMLElement | null,
-    rightShadows?: NodeListOf<HTMLElement> | null,
-    leftShadows?: NodeListOf<HTMLElement> | null,
-  ) => {
-    if (getEditorFeatureFlags()?.tableOverflowShadowsOptimization === true) {
-      return false;
-    }
-    // Right shadow
-    if (table && wrapper) {
-      const stickyRow = wrapper.querySelector('tr.sticky');
-      const stickyCell = stickyRow && stickyRow.firstElementChild;
-
-      if (rightShadows) {
-        const diff = table.offsetWidth - wrapper.offsetWidth;
-
-        for (let i = 0; i < rightShadows.length; i++) {
-          const rightShadow = rightShadows[i];
-          rightShadow.style.display =
-            diff > 0 && diff > wrapper.scrollLeft ? 'block' : 'none';
-
-          if (
-            rightShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) &&
-            stickyCell
-          ) {
-            rightShadow.style.height = `${stickyCell.clientHeight + 1}px`;
-          }
-        }
-      }
-      if (leftShadows) {
-        for (let i = 0; i < leftShadows.length; i++) {
-          const leftShadow = leftShadows[i];
-          leftShadow.style.display = wrapper.scrollLeft > 0 ? 'block' : 'none';
-
-          if (
-            leftShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) &&
-            stickyCell
-          ) {
-            leftShadow.style.height = `${stickyCell.clientHeight + 1}px`;
-          }
-        }
-      }
-    }
-  };

package/src/plugins/table/pm-plugins/main.ts

@@ -139,26 +139,12 @@ export const createPlugin = (
       node: ProseMirrorNode,
       view: EditorView,
       getPos: getPosHandler,
-    ) =>
-      new TableCellNodeView(
-        node,
-        view,
-        getPos,
-        getEditorFeatureFlags,
-        observer,
-      ),
+    ) => new TableCellNodeView(node, view, getPos, observer),
     tableHeader: (
       node: ProseMirrorNode,
       view: EditorView,
       getPos: getPosHandler,
-    ) =>
-      new TableCellNodeView(
-        node,
-        view,
-        getPos,
-        getEditorFeatureFlags,
-        observer,
-      ),
+    ) => new TableCellNodeView(node, view, getPos, observer),
   };
 
   // Used to prevent invalid table cell spans being reported more than once per editor/document
@@ -367,8 +353,7 @@ export const createPlugin = (
       },
 
       nodeViews: {
-        //temporary flag to test tableCell optimisation
-        ...(tableCellNodeview as any),
+        ...tableCellNodeview,
         table: (node, view, getPos) =>
           createTableView(
             node,
@@ -395,10 +380,7 @@ export const createPlugin = (
         mouseover: whenTableInFocus(handleMouseOver),
         mouseleave: whenTableInFocus(handleMouseLeave),
         mouseout: whenTableInFocus(handleMouseOut),
-        mousemove: whenTableInFocus(
-          handleMouseMove(getEditorFeatureFlags),
-          elementContentRects,
-        ),
+        mousemove: whenTableInFocus(handleMouseMove, elementContentRects),
         click: whenTableInFocus(handleClick),
       },