@atlaskit/editor-plugin-table 7.5.5 → 7.5.6

package/src/ui/TableFloatingControls/index.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -10,13 +10,12 @@ import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 import type { CellHoverMeta } from '../../types';
-import { isSelectionUpdated } from '../../utils';
 
 import { CornerControls, DragCornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
 import { DragControls, RowControls } from './RowControls';
 
-export interface Props {
+export interface TableFloatingControlsProps {
   editorView: EditorView;
   selection?: Selection;
   tableRef?: HTMLTableElement;
@@ -36,248 +35,163 @@ export interface Props {
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
   insertRowButtonIndex?: number;
+  tableWrapperWidth?: number;
 }
 
-interface State {
-  tableWrapperWidth: number;
-  tableWrapperHeight: number;
-}
-
-export default class TableFloatingControls extends Component<Props, State> {
-  static displayName = 'TableFloatingControls';
-  private resizeObserver?: ResizeObserver;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      tableWrapperWidth: 0,
-      /** Height needs to be tracked to re-render decorations correctly, do not remove */
-      tableWrapperHeight: 0,
-    };
-  }
-
-  componentDidMount() {
-    this.tryInitResizeObserver();
-  }
-
-  componentDidUpdate() {
-    // tableRef prop is not guaranteed to be defined after componentDidMount, so retry to init resize observer on update
-    this.tryInitResizeObserver();
-  }
-
-  // tracking the table height changes to update floating controls
-  private tryInitResizeObserver() {
-    let { tableRef } = this.props;
-    if (tableRef && !this.resizeObserver && window?.ResizeObserver) {
-      const tableWrapper = tableRef.closest(
-        `.${ClassName.TABLE_NODE_WRAPPER}`,
-      ) as Element;
-      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
-              : {
-                  tableWrapperWidth: entry.contentRect.width,
-                  tableWrapperHeight: entry.contentRect.height,
-                };
-          });
-        }
-      });
-      this.resizeObserver.observe(tableWrapper);
-    }
-  }
-
-  shouldComponentUpdate(nextProps: Props, nextState: State) {
-    const {
-      tableRef,
-      isInDanger,
-      isResizing,
-      isHeaderRowEnabled,
-      isNumberColumnEnabled,
-      hoveredRows,
-      selection,
-      tableActive,
-      isHeaderColumnEnabled,
-      ordering,
-      headerRowHeight,
-      stickyHeader,
-      hoveredCell,
-      isTableHovered,
-    } = this.props;
-    return (
-      this.state.tableWrapperWidth !== nextState.tableWrapperWidth ||
-      this.state.tableWrapperHeight !== nextState.tableWrapperHeight ||
-      ordering !== nextProps.ordering ||
-      tableRef !== nextProps.tableRef ||
-      tableActive !== nextProps.tableActive ||
-      isInDanger !== nextProps.isInDanger ||
-      isResizing !== nextProps.isResizing ||
-      hoveredRows !== nextProps.hoveredRows ||
-      isHeaderRowEnabled !== nextProps.isHeaderRowEnabled ||
-      isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled ||
-      isNumberColumnEnabled !== nextProps.isNumberColumnEnabled ||
-      isSelectionUpdated(selection!, nextProps.selection) ||
-      headerRowHeight !== nextProps.headerRowHeight ||
-      stickyHeader !== nextProps.stickyHeader ||
-      hoveredCell !== nextProps.hoveredCell ||
-      isTableHovered !== nextProps.isTableHovered
-    );
-  }
+export const TableFloatingControls = ({
+  editorView,
+  tableRef,
+  tableNode,
+  isInDanger,
+  isResizing,
+  isNumberColumnEnabled,
+  isHeaderRowEnabled,
+  isHeaderColumnEnabled,
+  tableActive,
+  hasHeaderRow,
+  hoveredRows,
+  stickyHeader,
+  isDragAndDropEnabled,
+  hoveredCell,
+  isTableHovered,
+  tableWrapperWidth,
+}: TableFloatingControlsProps) => {
+  const _selectRow = useCallback(
+    (row: number, expand: boolean) => {
+      const { state, dispatch } = editorView;
+      // fix for issue ED-4665
+      if (browser.ie_version === 11) {
+        (editorView.dom as HTMLElement).blur();
+      }
+      selectRow(row, expand)(state, dispatch);
+    },
+    [editorView],
+  );
+
+  const _selectRows = useCallback(
+    (rowIndexes: number[]) => {
+      const { state, dispatch } = editorView;
+      // fix for issue ED-4665
+      if (browser.ie_version === 11) {
+        (editorView.dom as HTMLElement).blur();
+      }
+      selectRows(rowIndexes)(state, dispatch);
+    },
+    [editorView],
+  );
+
+  const _hoverRows = useCallback(
+    (rows: Array<number>, danger?: boolean) => {
+      const { state, dispatch } = editorView;
+      hoverRows(rows, danger)(state, dispatch);
+    },
+    [editorView],
+  );
 
-  componentWillUnmount() {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
+  // re-use across numbered columns and row controls
+  const updateCellHoverLocation = useCallback(
+    (rowIndex: number) => {
+      const { state, dispatch } = editorView;
+
+      if (tableActive) {
+        // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
+        // of the opposite dimension. For example; here when we mouse over the row drag handle then we're technically
+        // also hovering over column 0 index. And vice-versa with columns. This means we don't need to worry about knowing the
+        // current column index. We can just force it to 0.
+        hoverCell(rowIndex, 0)(state, dispatch);
+      }
+    },
+    [editorView, tableActive],
+  );
+
+  if (!tableRef) {
+    return null;
   }
 
-  render() {
-    const {
-      editorView,
-      tableRef,
-      tableNode,
-      isInDanger,
-      isResizing,
-      isNumberColumnEnabled,
-      isHeaderRowEnabled,
-      isHeaderColumnEnabled,
-      tableActive,
-      hasHeaderRow,
-      hoveredRows,
-      stickyHeader,
-      isDragAndDropEnabled,
-      hoveredCell,
-      isTableHovered,
-    } = this.props;
-
-    if (!tableRef) {
-      return null;
-    }
-
-    const stickyTop =
-      stickyHeader && stickyHeader.sticky && hasHeaderRow
-        ? stickyHeader.top
-        : undefined;
-
-    const wrapperClassName = isDragAndDropEnabled
-      ? ClassName.DRAG_ROW_CONTROLS_WRAPPER
-      : ClassName.ROW_CONTROLS_WRAPPER;
-
-    return (
-      <div className={wrapperClassName}>
-        <div onMouseDown={(e) => !isDragAndDropEnabled && e.preventDefault()}>
-          {isNumberColumnEnabled ? (
-            <NumberColumn
-              editorView={editorView}
-              hoverRows={this.hoverRows}
-              tableRef={tableRef}
-              tableActive={tableActive}
-              hoveredRows={hoveredRows}
-              hasHeaderRow={hasHeaderRow}
-              isInDanger={isInDanger}
-              isResizing={isResizing}
-              selectRow={this.selectRow}
-              updateCellHoverLocation={this.updateCellHoverLocation}
-              stickyTop={stickyTop}
-              isDragAndDropEnabled={isDragAndDropEnabled}
-            />
-          ) : null}
-
-          {tableActive && (
-            <>
-              {isDragAndDropEnabled ? (
-                <>
-                  <DragCornerControls
-                    editorView={editorView}
-                    tableRef={tableRef}
-                    isInDanger={isInDanger}
-                    isResizing={isResizing}
-                  />
-                  <DragControls
-                    tableRef={tableRef}
-                    tableNode={tableNode}
-                    hoveredCell={hoveredCell}
-                    isTableHovered={isTableHovered}
-                    editorView={editorView}
-                    tableActive={tableActive}
-                    isInDanger={isInDanger}
-                    isResizing={isResizing}
-                    tableWidth={this.state.tableWrapperWidth}
-                    hoverRows={this.hoverRows}
-                    selectRow={this.selectRow}
-                    selectRows={this.selectRows}
-                    updateCellHoverLocation={this.updateCellHoverLocation}
-                  />
-                </>
-              ) : (
-                <>
-                  <CornerControls
-                    editorView={editorView}
-                    tableRef={tableRef}
-                    isInDanger={isInDanger}
-                    isResizing={isResizing}
-                    isHeaderRowEnabled={isHeaderRowEnabled}
-                    isHeaderColumnEnabled={isHeaderColumnEnabled}
-                    hoveredRows={hoveredRows}
-                    stickyTop={tableActive ? stickyTop : undefined}
-                  />
-                  <RowControls
-                    editorView={editorView}
-                    tableRef={tableRef}
-                    hoverRows={this.hoverRows}
-                    hoveredRows={hoveredRows}
-                    isInDanger={isInDanger}
-                    isResizing={isResizing}
-                    selectRow={this.selectRow}
-                    stickyTop={tableActive ? stickyTop : undefined}
-                  />
-                </>
-              )}
-            </>
-          )}
-        </div>
+  const stickyTop =
+    stickyHeader && stickyHeader.sticky && hasHeaderRow
+      ? stickyHeader.top
+      : undefined;
+
+  const wrapperClassName = isDragAndDropEnabled
+    ? ClassName.DRAG_ROW_CONTROLS_WRAPPER
+    : ClassName.ROW_CONTROLS_WRAPPER;
+
+  return (
+    <div className={wrapperClassName}>
+      <div onMouseDown={(e) => !isDragAndDropEnabled && e.preventDefault()}>
+        {isNumberColumnEnabled ? (
+          <NumberColumn
+            editorView={editorView}
+            hoverRows={_hoverRows}
+            tableRef={tableRef}
+            tableActive={tableActive}
+            hoveredRows={hoveredRows}
+            hasHeaderRow={hasHeaderRow}
+            isInDanger={isInDanger}
+            isResizing={isResizing}
+            selectRow={_selectRow}
+            updateCellHoverLocation={updateCellHoverLocation}
+            stickyTop={stickyTop}
+            isDragAndDropEnabled={isDragAndDropEnabled}
+          />
+        ) : null}
+
+        {tableActive && (
+          <>
+            {isDragAndDropEnabled ? (
+              <>
+                <DragCornerControls
+                  editorView={editorView}
+                  tableRef={tableRef}
+                  isInDanger={isInDanger}
+                  isResizing={isResizing}
+                />
+                <DragControls
+                  tableRef={tableRef}
+                  tableNode={tableNode}
+                  hoveredCell={hoveredCell}
+                  isTableHovered={isTableHovered}
+                  editorView={editorView}
+                  tableActive={tableActive}
+                  isInDanger={isInDanger}
+                  isResizing={isResizing}
+                  tableWidth={tableWrapperWidth!}
+                  hoverRows={_hoverRows}
+                  selectRow={_selectRow}
+                  selectRows={_selectRows}
+                  updateCellHoverLocation={updateCellHoverLocation}
+                />
+              </>
+            ) : (
+              <>
+                <CornerControls
+                  editorView={editorView}
+                  tableRef={tableRef}
+                  isInDanger={isInDanger}
+                  isResizing={isResizing}
+                  isHeaderRowEnabled={isHeaderRowEnabled}
+                  isHeaderColumnEnabled={isHeaderColumnEnabled}
+                  hoveredRows={hoveredRows}
+                  stickyTop={tableActive ? stickyTop : undefined}
+                />
+                <RowControls
+                  editorView={editorView}
+                  tableRef={tableRef}
+                  hoverRows={_hoverRows}
+                  hoveredRows={hoveredRows}
+                  isInDanger={isInDanger}
+                  isResizing={isResizing}
+                  selectRow={_selectRow}
+                  stickyTop={tableActive ? stickyTop : undefined}
+                />
+              </>
+            )}
+          </>
+        )}
       </div>
-    );
-  }
+    </div>
+  );
+};
 
-  private selectRow = (row: number, expand: boolean) => {
-    const { editorView } = this.props;
-    const { state, dispatch } = editorView;
-    // fix for issue ED-4665
-    if (browser.ie_version === 11) {
-      (editorView.dom as HTMLElement).blur();
-    }
-    selectRow(row, expand)(state, dispatch);
-  };
-
-  private selectRows = (rowIndexes: number[]) => {
-    const { editorView } = this.props;
-    const { state, dispatch } = editorView;
-    // fix for issue ED-4665
-    if (browser.ie_version === 11) {
-      (editorView.dom as HTMLElement).blur();
-    }
-    selectRows(rowIndexes)(state, dispatch);
-  };
-
-  private hoverRows = (rows: Array<number>, danger?: boolean) => {
-    const { state, dispatch } = this.props.editorView;
-    hoverRows(rows, danger)(state, dispatch);
-  };
-
-  // re-use across numbered columns and row controls
-  private updateCellHoverLocation = (rowIndex: number) => {
-    const { editorView, tableActive } = this.props;
-    const { state, dispatch } = editorView;
-
-    if (tableActive) {
-      // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
-      // of the opposite dimension. For example; here when we mouse over the row drag handle then we're technically
-      // also hovering over column 0 index. And vice-versa with columns. This means we don't need to worry about knowing the
-      // current column index. We can just force it to 0.
-      hoverCell(rowIndex, 0)(state, dispatch);
-    }
-  };
-}
+export default TableFloatingControls;

package/src/utils/column-controls.ts

@@ -6,7 +6,6 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
   findTable,
-  getCellsInColumn,
   getSelectionRect,
   isColumnSelected,
   isTableSelected,
@@ -34,13 +33,13 @@ export const getColumnsWidths = (
     // When there is no cell we need to fill it with undefined
     widths = Array.from({ length: map.width });
     for (let i = 0; i < map.width; i++) {
-      const cells = getCellsInColumn(i)(selection)!;
-      const cell = cells[0];
-      if (cell) {
-        const cellRef = findDomRefAtPos(cell.pos, domAtPos) as HTMLElement;
+      if (!map.isCellMergedTopLeft(0, i)) {
+        const node = table.node.nodeAt(map.map[i])!;
+        const pos = map.map[i] + table.start;
+        const cellRef = findDomRefAtPos(pos, domAtPos) as HTMLElement;
         const rect = cellRef.getBoundingClientRect();
         widths[i] = (rect ? rect.width : cellRef.offsetWidth) + 1;
-        i += cell.node.attrs.colspan - 1;
+        i += node.attrs.colspan - 1;
       }
     }
   }

package/src/utils/dom.ts

@@ -4,9 +4,6 @@ import {
 } from '@atlaskit/editor-common/utils';
 
 import { TableCssClassName as ClassName } from '../types';
-import type { ElementContentRects } from '../types';
-
-const SELECTOR_TABLE_LEAFS = `.${ClassName.TABLE_CELL}, .${ClassName.TABLE_HEADER_CELL}`;
 
 export const isCell = (node: HTMLElement | null): boolean => {
   return Boolean(
@@ -118,29 +115,25 @@ export const isDragCornerButton = (node: HTMLElement | null) =>
  *
  * the same is valid to the right side.
  */
-
+/**
+ * This can be used with mouse events to determine the left/right side of the target the pointer is closest too.
+ *
+ * WARNING: This metod reads properties which can trigger a reflow; use this wisely.
+ *
+ * @param mouseEvent
+ * @param gapInPixels
+ * @returns
+ */
 export const getMousePositionHorizontalRelativeByElement = (
   mouseEvent: MouseEvent,
-  elementContentRects?: ElementContentRects,
+  offsetX: number,
   gapInPixels?: number,
-  isDragAndDropEnabled?: boolean,
 ): 'left' | 'right' | null => {
   const element = mouseEvent.target;
 
   if (element instanceof HTMLElement) {
-    let width, x;
-
-    if (isDragAndDropEnabled) {
-      // mouse event fires for new overlapping column controls, so the cell can not get detected. Get width
-      // directly from element that will be .pm-table-drag-columns-floating-insert-dot-wrapper
-      width = element.clientWidth;
-    } else {
-      const closestCell = element.closest(SELECTOR_TABLE_LEAFS);
-
-      const id = closestCell?.id ?? '';
-      width = elementContentRects?.[id]?.width ?? 0;
-    }
-    x = mouseEvent.offsetX;
+    const width = element.clientWidth; // reflow
+    const x = !Number.isNaN(offsetX) ? offsetX : mouseEvent.offsetX; // reflow
 
     if (width <= 0) {
       return null;