@atlaskit/editor-plugin-table 5.7.1 → 5.7.3

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -1,10 +1,12 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 import type { MouseEvent } from 'react';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { closestElement } from '@atlaskit/editor-common/utils';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 
@@ -35,6 +37,8 @@ export interface ColumnControlsProps {
   hasHeaderColumn?: boolean;
   isTableHovered?: boolean;
   canDrag?: boolean;
+  tableContainerWidth?: number;
+  isNumberColumnEnabled?: boolean;
 }
 
 const getSelectedColumns = (selection: Selection) => {
@@ -62,10 +66,18 @@ export const ColumnControls = ({
   hasHeaderColumn,
   isTableHovered,
   canDrag,
+  tableContainerWidth,
+  isNumberColumnEnabled,
 }: ColumnControlsProps) => {
+  const columnControlsRef = useRef<HTMLDivElement>(null);
   const widths =
-    colWidths?.map((width) => (width ? `${width - 1}px` : '0px')).join(' ') ??
-    '0px';
+    colWidths
+      ?.map((width) =>
+        // when there is sticky header, a `margin-right: -1px` applied to `tr.sticky th` so it causes colWidths to be 1px wider
+        // we need to reduce the width by 1px to avoid misalignment of column controls.
+        width ? (stickyTop ? `${width - 2}px` : `${width - 1}px`) : '0px',
+      )
+      .join(' ') ?? '0px';
   // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
   const columnParams = getRowsParams(colWidths ?? []);
   const colIndex = hoveredCell?.colIndex;
@@ -153,8 +165,32 @@ export const ColumnControls = ({
   const colIndexes = useMemo(() => {
     return [colIndex!];
   }, [colIndex]);
+  const tableWrapper = closestElement(
+    tableRef,
+    `.${ClassName.TABLE_NODE_WRAPPER}`,
+  );
+  const handleScroll = useCallback(
+    (event?: Event) => {
+      if (stickyTop) {
+        if (columnControlsRef && columnControlsRef.current) {
+          columnControlsRef.current.scrollLeft = tableWrapper?.scrollLeft ?? 0;
+        }
+      }
+    },
+    [stickyTop, tableWrapper],
+  );
+
+  useEffect(() => {
+    handleScroll();
+  }, [handleScroll]);
+
+  useEffect(() => {
+    tableWrapper?.addEventListener('scroll', handleScroll);
 
-  const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
+    return () => {
+      tableWrapper?.removeEventListener('scroll', handleScroll);
+    };
+  }, [tableWrapper, handleScroll]);
 
   const generateHandleByType = (type: HandleTypes): JSX.Element | null => {
     if (!hoveredCell || !colWidths?.length) {
@@ -163,6 +199,7 @@ export const ColumnControls = ({
     const isHover = type === 'hover';
 
     const isColumnsSelected = selectedColIndexes.length > 0;
+    const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
 
     const showCondition = isHover
       ? isColumnsSelected &&
@@ -186,13 +223,13 @@ export const ColumnControls = ({
         : 'selected'
       : 'default';
 
-    const currentSelectionApprearance = isColumnsSelected
+    const currentSelectionAppearance = isColumnsSelected
       ? isInDanger
         ? 'danger'
         : 'selected'
       : hoveredAppearance;
 
-    const istSelecting = isColumnsSelected && !isHover;
+    const isSelecting = isColumnsSelected && !isHover;
 
     // this indexes are used to calculate the drag and drop source
     const indexes = isColumnsSelected
@@ -206,7 +243,7 @@ export const ColumnControls = ({
         <div
           key={type}
           style={{
-            gridColumn: istSelecting
+            gridColumn: isSelecting
               ? selectedColumnPosition
               : gridColumnPosition,
             display: 'flex',
@@ -228,7 +265,7 @@ export const ColumnControls = ({
             previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
             previewHeight={previewHeight}
             appearance={
-              istSelecting ? currentSelectionApprearance : hoveredAppearance
+              isSelecting ? currentSelectionAppearance : hoveredAppearance
             }
             onClick={handleClick}
             onMouseOver={handleMouseOver}
@@ -261,24 +298,31 @@ export const ColumnControls = ({
       : sortedHandles.reverse();
   };
 
+  const containerWidth =
+    isNumberColumnEnabled && tableContainerWidth
+      ? tableContainerWidth - akEditorTableNumberColumnWidth
+      : tableContainerWidth;
   return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS}
       onMouseMove={handleMouseMove}
     >
       <div
+        ref={columnControlsRef}
         className={ClassName.DRAG_COLUMN_CONTROLS_INNER}
         data-testid="table-floating-column-controls"
         style={{
           gridTemplateColumns: widths,
           marginTop,
+          width: stickyTop ? containerWidth : undefined,
+          overflowX: stickyTop ? 'hidden' : 'visible',
         }}
       >
         {!isResizing &&
           columnParams.map(({ startIndex, endIndex }, index) => (
             <div
               style={{
-                gridColumn: `${index + 1} / span 1`,
+                gridColumn: `${startIndex + 1} / span 1`,
               }}
               data-start-index={startIndex}
               data-end-index={endIndex}
@@ -286,16 +330,6 @@ export const ColumnControls = ({
               contentEditable={false}
               key={index}
             >
-              {/* TODO: Disabling first column insert button https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50 */}
-              {/* {!hasHeaderColumn && index === 0 && (
-                <div
-                  style={{
-                    left: '0px',
-                    right: 'unset',
-                  }}
-                  className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
-                />
-              )} */}
               <div
                 className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
                 style={columnParams.length - 1 === index ? { right: '0' } : {}}

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
@@ -36,6 +36,8 @@ export interface Props {
   stickyHeader?: RowStickyState;
   isTableHovered?: boolean;
   canDrag?: boolean;
+  tableContainerWidth?: number;
+  isNumberColumnEnabled?: boolean;
 }
 
 export const TableFloatingColumnControls: React.FC<Props> = ({
@@ -51,15 +53,22 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   isInDanger,
   isTableHovered,
   canDrag,
+  tableContainerWidth,
+  isNumberColumnEnabled,
 }) => {
   const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
     { width: 0, height: 0 },
   );
-
   const [hasDropTargets, setHasDropTargets] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
   const node = getNode();
   const currentNodeLocalId = node?.attrs.localId;
   const hasHeaderColumn = containsHeaderColumn(node);
+  const stickyTop =
+    stickyHeader && stickyHeader.sticky && hasHeaderRow
+      ? stickyHeader.top
+      : undefined;
 
   useEffect(() => {
     if (tableRef && window?.ResizeObserver) {
@@ -118,19 +127,20 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
 
   const colWidths = getColumnsWidths(editorView);
 
-  const stickyTop =
-    stickyHeader && stickyHeader.sticky && hasHeaderRow
-      ? stickyHeader.top
-      : undefined;
-
-  // TODO - Removing column controls for now because they are causing the table
-  // to overflow and scroll. Update this when sticky header support is added ED-21088
-  if (stickyHeader && stickyHeader.sticky) {
-    return null;
+  if (stickyTop) {
+    const headerRowHeight =
+      hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
+    containerRef?.current?.style.setProperty(
+      'top',
+      `${stickyTop! - headerRowHeight + 33}px`, // 33px is padding and margin applied on tr.sticky
+    );
+  } else {
+    containerRef?.current?.style.removeProperty('top');
   }
 
   return (
     <div
+      ref={containerRef}
       className={ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}
       data-testid="table-floating-column-controls-wrapper"
     >
@@ -148,6 +158,8 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         colWidths={colWidths}
         hasHeaderColumn={hasHeaderColumn}
         canDrag={canDrag}
+        tableContainerWidth={tableContainerWidth}
+        isNumberColumnEnabled={isNumberColumnEnabled}
       />
       {hasDropTargets && (
         <ColumnDropTargets

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -310,16 +310,6 @@ const DragControlsComponent = ({
               contentEditable={false}
               key={`insert-dot-${index}`}
             >
-              {/* TODO: Disabling first column insert button https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50 */}
-              {/* {!hasHeaderRow && index === 0 && (
-              <div
-                style={{
-                  top: '0px',
-                  left: token('space.075', '6px'),
-                }}
-                className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT}
-              />
-            )} */}
               <div className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT} />
             </div>
             {isDragging && (

package/src/ui/common-styles.ts

@@ -7,6 +7,7 @@ import {
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 import { browser } from '@atlaskit/editor-common/utils';
 import {
+  akEditorFloatingDialogZIndex,
   akEditorSelectedNodeClassName,
   akEditorSmallZIndex,
   akEditorStickyHeaderZIndex,
@@ -1049,6 +1050,11 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
       top: ${tableMarginTop}px;
     }
 
+    .${ClassName.TABLE_STICKY} .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
+      position: fixed;
+      z-index: ${akEditorFloatingDialogZIndex};
+    }
+
     ${tableWrapperStyles()}
   }
 

package/src/utils/decoration.ts

@@ -22,6 +22,7 @@ import {
   getCellsInRow,
   getSelectionRect,
 } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import type { Cell, CellColumnPositioning } from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
@@ -101,34 +102,46 @@ export const createControlsHoverDecoration = (
   // So If the table cells are in danger we want to create a "rectangle" selection
   // to match the "clicked" selection
 
-  if (danger) {
-    // Find the bounding rectangle of all the given cells, also considering
-    // merged cells.
-    const { recLeft, recTop, recRight, recBottom } = cells.reduce(
-      (acc, cell) => {
-        const { left, right, bottom, top } = map.findCell(
-          cell.pos - table.start,
-        );
-        // Finding the bounding rect requires finding the min left and top positions,
-        // and the max right and bottom positions of the cells
-        return {
-          recLeft: Math.min(acc.recLeft, left),
-          recTop: Math.min(acc.recTop, top),
-          recRight: Math.max(acc.recRight, right),
-          recBottom: Math.max(acc.recBottom, bottom),
-        };
-      },
-      // +-Infinity as initialisation vars which will always be overwritten
-      // by smaller/larger values respectively
-      {
-        recLeft: Infinity,
-        recTop: Infinity,
-        recRight: -Infinity,
-        recBottom: -Infinity,
-      },
-    );
-    const rect = new Rect(recLeft, recTop, recRight, recBottom);
-    updatedCells = map.cellsInRect(rect).map((x) => x + table.start);
+  if (getBooleanFF('platform.editor.table.in-danger-hover-merged-cells-fix')) {
+    if (danger && type !== 'table') {
+      const { selection } = tr;
+      const table = findTable(selection);
+      const rect = getSelectionRect(selection);
+
+      if (table && rect) {
+        updatedCells = map.cellsInRect(rect).map((x) => x + table.start);
+      }
+    }
+  } else {
+    if (danger) {
+      // Find the bounding rectangle of all the given cells, also considering
+      // merged cells.
+      const { recLeft, recTop, recRight, recBottom } = cells.reduce(
+        (acc, cell) => {
+          const { left, right, bottom, top } = map.findCell(
+            cell.pos - table.start,
+          );
+          // Finding the bounding rect requires finding the min left and top positions,
+          // and the max right and bottom positions of the cells
+          return {
+            recLeft: Math.min(acc.recLeft, left),
+            recTop: Math.min(acc.recTop, top),
+            recRight: Math.max(acc.recRight, right),
+            recBottom: Math.max(acc.recBottom, bottom),
+          };
+        },
+        // +-Infinity as initialisation vars which will always be overwritten
+        // by smaller/larger values respectively
+        {
+          recLeft: Infinity,
+          recTop: Infinity,
+          recRight: -Infinity,
+          recBottom: -Infinity,
+        },
+      );
+      const rect = new Rect(recLeft, recTop, recRight, recBottom);
+      updatedCells = map.cellsInRect(rect).map((x) => x + table.start);
+    }
   }
 
   return updatedCells.map((pos) => {

package/src/utils/dom.ts

@@ -5,7 +5,6 @@ import {
 
 import { TableCssClassName as ClassName } from '../types';
 import type { ElementContentRects } from '../types';
-import { tableToolbarSize } from '../ui/consts';
 
 const SELECTOR_TABLE_LEAFS = `.${ClassName.TABLE_CELL}, .${ClassName.TABLE_HEADER_CELL}`;
 
@@ -178,28 +177,6 @@ export const getMousePositionVerticalRelativeByElement = (
   return null;
 };
 
-// This function is deprecated
-export const updateResizeHandles = (tableRef?: HTMLElement) => {
-  if (!tableRef) {
-    return;
-  }
-
-  // see ED-7600
-  const nodes = Array.from(
-    tableRef.querySelectorAll(
-      `.${ClassName.RESIZE_HANDLE}`,
-    ) as NodeListOf<HTMLElement>,
-  );
-  if (!nodes || !nodes.length) {
-    return;
-  }
-
-  const height = tableRef.offsetHeight + tableToolbarSize;
-  nodes.forEach((node) => {
-    node.style.height = `${height}px`;
-  });
-};
-
 export const hasResizeHandler = ({
   columnEndIndexTarget,
   target,

package/src/utils/index.ts

@@ -54,7 +54,6 @@ export {
   getColumnOrRowIndex,
   getMousePositionHorizontalRelativeByElement,
   getMousePositionVerticalRelativeByElement,
-  updateResizeHandles,
   isResizeHandleDecoration,
   hasResizeHandler,
   findNearestCellIndexToPoint,