@atlaskit/editor-plugin-table 2.9.1 → 2.10.1

package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -2,7 +2,6 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 
 import { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { mapChildren } from '@atlaskit/editor-common/utils';
 import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -78,7 +77,6 @@ export class TableRowNodeView implements NodeView {
 
   private intersectionObserver?: IntersectionObserver;
   private resizeObserver?: ResizeObserver;
-  private stickyHeadersOptimization = false;
   private sentinels: {
     top?: HTMLElement | null;
     bottom?: HTMLElement | null;
@@ -94,7 +92,6 @@ export class TableRowNodeView implements NodeView {
     view: EditorView,
     getPos: any,
     eventDispatcher: EventDispatcher,
-    getEditorFeatureFlags: GetEditorFeatureFlags,
   ) {
     this.view = view;
     this.node = node;
@@ -104,9 +101,6 @@ export class TableRowNodeView implements NodeView {
     this.dom = document.createElement('tr');
     this.contentDOM = this.dom;
 
-    const featureFlags = getEditorFeatureFlags();
-    const { stickyHeadersOptimization } = featureFlags;
-    this.stickyHeadersOptimization = !!stickyHeadersOptimization;
     this.lastTimePainted = 0;
     this.isHeaderRow = supportedHeaderRow(node);
     this.isSticky = false;
@@ -139,11 +133,7 @@ export class TableRowNodeView implements NodeView {
       findOverflowScrollParent(this.view.dom as HTMLElement) || window;
 
     if (this.editorScrollableElement) {
-      if (this.stickyHeadersOptimization) {
-        this.initObservers();
-      } else {
-        this.editorScrollableElement.addEventListener('scroll', this.onScroll);
-      }
+      this.initObservers();
       this.topPosEditorElement = getTop(this.editorScrollableElement);
     }
 
@@ -182,10 +172,6 @@ export class TableRowNodeView implements NodeView {
       this.resizeObserver.disconnect();
     }
 
-    if (this.editorScrollableElement && !this.stickyHeadersOptimization) {
-      this.editorScrollableElement.removeEventListener('scroll', this.onScroll);
-    }
-
     this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
     this.eventDispatcher.off(
       (tablePluginKey as any).key,
@@ -340,66 +326,6 @@ export class TableRowNodeView implements NodeView {
 
   nextFrame: number | undefined;
 
-  onScroll = () => {
-    if (!this.tree) {
-      return;
-    }
-
-    this.latestDomTop = getTop(this.tree.wrapper);
-
-    // kick off rAF loop again if it hasn't already happened
-    if (!this.nextFrame) {
-      this.loop();
-    }
-  };
-
-  loop = () => {
-    this.nextFrame = window.requestAnimationFrame(() => {
-      if (
-        this.previousDomTop === this.latestDomTop &&
-        this.previousPadding === this.padding
-      ) {
-        this.nextFrame = undefined;
-        return;
-      }
-
-      // can't store these since React might re-render at any time
-      const tree = this.tree;
-      if (!tree) {
-        this.nextFrame = undefined;
-        return;
-      }
-
-      this.paint(tree);
-
-      // run again on next frame
-      this.previousPadding = this.padding;
-      this.previousDomTop = this.latestDomTop;
-      this.loop();
-    });
-  };
-
-  paint = (tree: TableDOMElements) => {
-    const { table, wrapper } = tree;
-
-    // If the previous refresh is less than 10ms then don't do anything.
-    // The jumpiness happen under that time and this is to avoid it.
-    const timelapse = Math.abs(performance.now() - this.lastTimePainted);
-    if (timelapse < 10) {
-      return;
-    }
-
-    if (this.shouldHeaderStick(tree)) {
-      this.makeHeaderRowSticky(tree);
-    } else {
-      this.makeRowHeaderNotSticky(table);
-    }
-
-    // ensure scroll positions are locked
-    this.dom.scrollLeft = wrapper.scrollLeft;
-    this.lastTimePainted = performance.now();
-  };
-
   /* nodeview lifecycle */
   update(node: PmNode, ..._args: any[]) {
     // do nothing if nodes were identical
@@ -477,7 +403,6 @@ export class TableRowNodeView implements NodeView {
 
   onTablePluginState = (state: TablePluginState) => {
     const tableRef = state.tableRef;
-    let focusChanged = false;
 
     const tree = this.tree;
     if (!tree) {
@@ -499,9 +424,6 @@ export class TableRowNodeView implements NodeView {
     if (isCurrentTableSelected && !state.isHeaderRowEnabled && this.tree) {
       this.makeRowHeaderNotSticky(this.tree.table);
     }
-    if (isCurrentTableSelected !== this.focused) {
-      focusChanged = true;
-    }
     this.focused = isCurrentTableSelected;
 
     const { wrapper } = tree;
@@ -535,10 +457,6 @@ export class TableRowNodeView implements NodeView {
 
     // run after table style changes have been committed
     setTimeout(() => {
-      // if focus changed while header is sticky - still repaint the positions will shift
-      if (!this.stickyHeadersOptimization || (focusChanged && this.isSticky)) {
-        this.paint(tree);
-      }
       syncStickyRowToTable(tree.table);
     }, 0);
   };

package/src/plugins/table/pm-plugins/sticky-headers/plugin.ts

@@ -21,13 +21,7 @@ export const createPlugin = (
     props: {
       nodeViews: {
         tableRow: (node, view, getPos) => {
-          return new TableRowNodeView(
-            node,
-            view,
-            getPos,
-            eventDispatcher,
-            getEditorFeatureFlags,
-          );
+          return new TableRowNodeView(node, view, getPos, eventDispatcher);
         },
       },
     },

package/src/plugins/table/pm-plugins/table-resizing/event-handlers.ts

@@ -214,7 +214,7 @@ export const handleMouseDown = (
 
     resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom);
 
-    updateControls(getEditorFeatureFlags)(state);
+    updateControls()(state);
     updateResizeHandles(dom);
   }
 

package/src/plugins/table/pm-plugins/table-resizing/utils/dom.ts

@@ -2,7 +2,6 @@ import {
   tableCellBorderWidth,
   tableMarginTop,
 } from '@atlaskit/editor-common/styles';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import {
   closestElement,
   containsClassName,
@@ -11,65 +10,48 @@ import {
 import { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 
-import { updateOverflowShadows } from '../../../nodeviews/update-overflow-shadows';
 import { TableCssClassName as ClassName } from '../../../types';
 import { colWidthsForRow } from '../../../utils/column-controls';
 import { getRowHeights } from '../../../utils/row-controls';
 import { getPluginState as getMainPluginState } from '../../plugin-factory';
 
-export const updateControls =
-  (getEditorFeatureFlags: GetEditorFeatureFlags) => (state: EditorState) => {
-    const { tableRef } = getMainPluginState(state);
-    if (!tableRef) {
-      return;
-    }
-    const tr = tableRef.querySelector('tr');
-    if (!tr) {
-      return;
-    }
-    const wrapper = tableRef.parentElement;
-    if (!(wrapper && wrapper.parentElement)) {
-      return;
-    }
+export const updateControls = () => (state: EditorState) => {
+  const { tableRef } = getMainPluginState(state);
+  if (!tableRef) {
+    return;
+  }
+  const tr = tableRef.querySelector('tr');
+  if (!tr) {
+    return;
+  }
+  const wrapper = tableRef.parentElement;
+  if (!(wrapper && wrapper.parentElement)) {
+    return;
+  }
 
-    const rowControls = wrapper.parentElement.querySelectorAll<HTMLElement>(
-      `.${ClassName.ROW_CONTROLS_BUTTON_WRAP}`,
-    );
-    const numberedRows = wrapper.parentElement.querySelectorAll<HTMLElement>(
-      ClassName.NUMBERED_COLUMN_BUTTON,
-    );
+  const rowControls = wrapper.parentElement.querySelectorAll<HTMLElement>(
+    `.${ClassName.ROW_CONTROLS_BUTTON_WRAP}`,
+  );
+  const numberedRows = wrapper.parentElement.querySelectorAll<HTMLElement>(
+    ClassName.NUMBERED_COLUMN_BUTTON,
+  );
 
-    syncStickyRowToTable(tableRef);
+  syncStickyRowToTable(tableRef);
 
-    const rowHeights = getRowHeights(tableRef);
+  const rowHeights = getRowHeights(tableRef);
 
-    // update rows controls height on resize
-    for (let i = 0, count = rowControls.length; i < count; i++) {
-      const height = rowHeights[i];
-      if (height) {
-        rowControls[i].style.height = `${height}px`;
+  // update rows controls height on resize
+  for (let i = 0, count = rowControls.length; i < count; i++) {
+    const height = rowHeights[i];
+    if (height) {
+      rowControls[i].style.height = `${height}px`;
 
-        if (numberedRows.length) {
-          numberedRows[i].style.height = `${height}px`;
-        }
+      if (numberedRows.length) {
+        numberedRows[i].style.height = `${height}px`;
       }
     }
-
-    const rightShadows = wrapper.parentElement.querySelectorAll<HTMLElement>(
-      `.${ClassName.TABLE_RIGHT_SHADOW}`,
-    );
-
-    const leftShadows = wrapper.parentElement.querySelectorAll<HTMLElement>(
-      `.${ClassName.TABLE_LEFT_SHADOW}`,
-    );
-
-    updateOverflowShadows(getEditorFeatureFlags)(
-      wrapper,
-      tableRef,
-      rightShadows,
-      leftShadows,
-    );
-  };
+  }
+};
 
 export const isClickNear = (
   event: MouseEvent,

package/src/plugins/table/types.ts

@@ -53,13 +53,15 @@ export interface PluginConfig {
   permittedLayouts?: PermittedLayoutsDescriptor;
   allowControls?: boolean;
   stickyHeaders?: boolean;
+  allowCellOptionsInFloatingToolbar?: boolean;
+  allowDistributeColumns?: boolean;
+  // to be cleaned up in ED-19477 after confluence no longer consumes table optimisation flags
   tableCellOptimization?: boolean;
   tableRenderOptimization?: boolean;
   stickyHeadersOptimization?: boolean;
   initialRenderOptimization?: boolean;
   mouseMoveOptimization?: boolean;
   tableOverflowShadowsOptimization?: boolean;
-  allowDistributeColumns?: boolean;
 }
 
 export type { ColumnResizingPluginState } from '@atlaskit/editor-common/types';
@@ -115,7 +117,6 @@ export interface TablePluginState {
   ordering?: TableColumnOrdering;
   resizeHandleRowIndex?: number;
   resizeHandleColumnIndex?: number;
-  tableCellOptimization?: boolean;
   // for table wrap/collapse
   isTableCollapsed?: boolean; // is the current table already in an expand?
   canCollapseTable?: boolean; // enabled/disabled state of collapse option

package/src/plugins/table/ui/TableFloatingControls/index.tsx

@@ -26,7 +26,6 @@ export interface Props {
   isHeaderColumnEnabled?: boolean;
   isNumberColumnEnabled?: boolean;
   hasHeaderRow?: boolean;
-  tableHeight?: number;
   headerRowHeight?: number;
   hoveredRows?: number[];
   ordering?: TableColumnOrdering;
@@ -53,13 +52,7 @@ export default class TableFloatingControls extends Component<Props, State> {
   // tracking the table height changes to update floating controls
   private tryInitResizeObserver() {
     let { tableRef } = this.props;
-    const { tableRenderOptimization } = this.props.getEditorFeatureFlags();
-    if (
-      tableRenderOptimization &&
-      tableRef &&
-      !this.resizeObserver &&
-      window?.ResizeObserver
-    ) {
+    if (tableRef && !this.resizeObserver && window?.ResizeObserver) {
       this.resizeObserver = new ResizeObserver((entries) => {
         for (let entry of entries) {
           const tableHeight = entry.contentRect.height;
@@ -85,13 +78,8 @@ export default class TableFloatingControls extends Component<Props, State> {
       headerRowHeight,
       stickyHeader,
     } = this.props;
-    const { tableRenderOptimization } = this.props.getEditorFeatureFlags();
-    const tableHeight = tableRenderOptimization
-      ? this.state?.tableHeight
-      : this.props.tableHeight;
-    const nextTableHeight = tableRenderOptimization
-      ? nextState?.tableHeight
-      : nextProps.tableHeight;
+    const tableHeight = this.state?.tableHeight;
+    const nextTableHeight = nextState?.tableHeight;
     return (
       ordering !== nextProps.ordering ||
       tableRef !== nextProps.tableRef ||

package/src/plugins/table/ui/common-styles.ts

@@ -409,7 +409,7 @@ export const tableStyles = (
         ${token('elevation.surface', 'white')};
     }
 
-    ${props.featureFlags?.stickyHeadersOptimization ? sentinelStyles : ''}
+    ${sentinelStyles}
     ${OverflowShadow(props)}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {

package/src/plugins/table/utils/dom.ts

@@ -106,7 +106,6 @@ export const isTableContainerOrWrapper = (node: HTMLElement | null): boolean =>
 
 export const getMousePositionHorizontalRelativeByElement = (
   mouseEvent: MouseEvent,
-  mouseMoveOptimization?: boolean,
   elementContentRects?: ElementContentRects,
   gapInPixels?: number,
 ): 'left' | 'right' | null => {
@@ -116,16 +115,9 @@ export const getMousePositionHorizontalRelativeByElement = (
     let width, x;
     const closestCell = element.closest(SELECTOR_TABLE_LEAFS);
 
-    if (mouseMoveOptimization) {
-      const id = closestCell?.id ?? '';
-      width = elementContentRects?.[id]?.width ?? 0;
-      x = mouseEvent.offsetX;
-    } else {
-      const elementRect = element.getBoundingClientRect();
-      width = elementRect.width;
-      const left = elementRect.left;
-      x = mouseEvent.clientX - left;
-    }
+    const id = closestCell?.id ?? '';
+    width = elementContentRects?.[id]?.width ?? 0;
+    x = mouseEvent.offsetX;
 
     if (width <= 0) {
       return null;

package/tmp/api-report-tmp.d.ts

@@ -30,6 +30,8 @@ interface PluginConfig {
     // (undocumented)
     allowBackgroundColor?: boolean;
     // (undocumented)
+    allowCellOptionsInFloatingToolbar?: boolean;
+    // (undocumented)
     allowCollapse?: boolean;
     // (undocumented)
     allowColumnResizing?: boolean;