@atlaskit/editor-plugin-table 7.5.5 → 7.5.7

package/src/pm-plugins/table-resizing/utils/resize-state.ts

@@ -1,4 +1,5 @@
 import type { TableLayout } from '@atlaskit/adf-schema';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import {
   tableCellMinWidth,
   tableNewColumnMinWidth,
@@ -20,15 +21,9 @@ import {
 import type { ColumnState } from './column-state';
 import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
 import { syncStickyRowToTable } from './dom';
-import { getTableContainerElementWidth, getTableMaxWidth } from './misc';
+import { getTableMaxWidth, getTableScalingPercent } from './misc';
 import type { ResizeState, ResizeStateWithAnalytics } from './types';
 
-import {
-  COLUMN_MIN_WIDTH,
-  MAX_SCALING_PERCENT,
-  TABLE_DEFAULT_WIDTH,
-} from './index';
-
 export const getResizeState = ({
   minWidth,
   maxSize,
@@ -46,6 +41,10 @@ export const getResizeState = ({
   domAtPos: (pos: number) => { node: Node; offset: number };
   isTableScalingEnabled: boolean;
 }): ResizeState => {
+  if (isTableScalingEnabled) {
+    const scalePercent = getTableScalingPercent(table, tableRef);
+    minWidth = Math.ceil(minWidth / scalePercent);
+  }
   // If the table has been resized, we can use the column widths from the table node
   if (hasTableBeenResized(table)) {
     const cols = calcTableColumnWidths(table).map((width, index) => ({
@@ -79,11 +78,12 @@ export const getResizeState = ({
   const cols = Array.from(colgroupChildren).map((_, index) => {
     // If the table hasn't been resized and we have a table width attribute, we can use it
     // to calculate the widths of the columns
-    if (isTableScalingEnabled && table.attrs.width) {
+    if (isTableScalingEnabled) {
+      const tableNodeWidth = getTableContainerWidth(table);
       return {
         index,
-        width: table.attrs.width / colgroupChildren.length,
-        minWidth: COLUMN_MIN_WIDTH,
+        width: tableNodeWidth / colgroupChildren.length,
+        minWidth,
       };
     }
     const cellsRefs = getCellsRefsInColumn(index, table, start, domAtPos);
@@ -116,24 +116,18 @@ export const updateColgroup = (
   if (getBooleanFF('platform.editor.custom-table-width')) {
     const columnsCount = cols.length;
     if (isTableScalingEnabled && tableNode) {
-      const tableWidth = getTableContainerElementWidth(tableNode);
-      if (tableWidth) {
-        let renderWidth =
-          tableRef.parentElement?.clientWidth || TABLE_DEFAULT_WIDTH;
-        let scalePercent = renderWidth / tableWidth;
-        scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
-        state.cols
-          .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
-          .forEach((column, i) => {
-            const fixedColWidth = getColWidthFix(column.width, columnsCount);
-            const scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
-            const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
-            // we aren't handling the remaining pixels here when the 48px min width is reached
-            if (cols[i]) {
-              cols[i].style.width = `${finalWidth}px`;
-            }
-          });
-      }
+      const scalePercent = getTableScalingPercent(tableNode, tableRef);
+      state.cols
+        .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
+        .forEach((column, i) => {
+          const fixedColWidth = getColWidthFix(column.width, columnsCount);
+          const scaledWidth = fixedColWidth * scalePercent;
+          const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
+          // we aren't handling the remaining pixels here when the 48px min width is reached
+          if (cols[i]) {
+            cols[i].style.width = `${finalWidth}px`;
+          }
+        });
     } else {
       state.cols
         .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.

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

@@ -182,18 +182,11 @@ export const previewScaleTable = (
   }
 
   const resizeState = parentWidth
-    ? scaleWithParent(
-        tableRef,
-        parentWidth,
-        node,
-        start,
-        domAtPos,
-        isTableScalingEnabled,
-      )
-    : scale(tableRef, options, domAtPos, isTableScalingEnabled);
+    ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false)
+    : scale(tableRef, options, domAtPos, false);
 
   if (resizeState) {
-    updateColgroup(resizeState, tableRef, node, isTableScalingEnabled);
+    updateColgroup(resizeState, tableRef, node, false);
   }
 };
 

package/src/pm-plugins/table-selection-keymap.ts

@@ -5,6 +5,7 @@ import {
   moveRight,
   selectColumn,
   selectRow,
+  selectTable,
   shiftArrowUp,
 } from '@atlaskit/editor-common/keymaps';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
@@ -15,6 +16,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import {
   arrowLeftFromTable,
   arrowRightFromTable,
+  modASelectTable,
   selectColumns,
   selectRows,
   shiftArrowUpFromTable,
@@ -62,6 +64,14 @@ export function tableSelectionKeymapPlugin(
     );
   }
 
+  if (getBooleanFF('platform.editor.table.cmd-a-select-table')) {
+    bindKeymapWithCommand(
+      selectTable.common!,
+      modASelectTable(editorSelectionAPI)(),
+      list,
+    );
+  }
+
   return keymap(list) as SafePlugin;
 }
 

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}

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;
       }
     }
   }