@atlaskit/editor-plugin-table 4.1.0 → 4.2.0

package/src/plugins/table/commands-with-analytics.ts

@@ -27,6 +27,7 @@ import {
 
 import { clearMultipleCells } from './commands/clear';
 import { wrapTableInExpand } from './commands/collapse';
+import { deleteColumnsCommand } from './commands/delete';
 import { insertColumn, insertRow } from './commands/insert';
 import {
   deleteTable,
@@ -45,7 +46,7 @@ import {
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { distributeColumnsWidths } from './pm-plugins/table-resizing/commands';
 import type { ResizeStateWithAnalytics } from './pm-plugins/table-resizing/utils';
-import { deleteColumns, deleteRows, mergeCells } from './transforms';
+import { deleteRows, mergeCells } from './transforms';
 import type {
   InsertRowMethods,
   InsertRowOptions,
@@ -57,7 +58,6 @@ import {
   getSelectedTableInfo,
 } from './utils';
 import { withEditorAnalyticsAPI } from './utils/analytics';
-import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 
 const TABLE_BREAKOUT_NAME_MAPPING = {
   default: TABLE_BREAKOUT.NORMAL,
@@ -337,14 +337,7 @@ export const deleteColumnsWithAnalytics =
         },
         eventType: EVENT_TYPE.TRACK,
       };
-    })(editorAnalyticsAPI)((state, dispatch) => {
-      if (dispatch) {
-        dispatch(
-          deleteColumns(rect, getAllowAddColumnCustomStep(state))(state.tr),
-        );
-      }
-      return true;
-    });
+    })(editorAnalyticsAPI)(deleteColumnsCommand(rect));
 
 const getTableDeletedAnalytics = (
   selection: Selection,

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

@@ -412,6 +412,7 @@ export const handleCut = (
   oldState: EditorState,
   newState: EditorState,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
+  editorView?: EditorView,
 ): Transaction => {
   const oldSelection = oldState.tr.selection;
   let { tr } = newState;
@@ -464,7 +465,11 @@ export const handleCut = (
             } = getPluginState(newState);
             tr = deleteRows(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
-            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState))(tr);
+            tr = deleteColumns(
+              rect,
+              getAllowAddColumnCustomStep(oldState),
+              editorView,
+            )(tr);
           }
         }
       }

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

@@ -23,7 +23,10 @@ import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
 import type { TableResizerImprovementProps } from './TableResizer';
 
-const getMarginLeft = (lineLength: number, tableWidth: number | 'inherit') => {
+const getMarginLeft = (
+  lineLength: number | undefined,
+  tableWidth: number | 'inherit',
+) => {
   let marginLeft;
   if (tableWidth !== 'inherit' && lineLength) {
     const containerWidth = tableWidth;
@@ -40,7 +43,7 @@ type InnerContainerProps = {
   className: string;
   style?: {
     width: number | 'inherit';
-    marginLeft: number | undefined;
+    marginLeft?: number;
   };
   node: PMNode;
 };
@@ -65,7 +68,7 @@ export const InnerContainer = forwardRef<
 
 type ResizableTableContainerProps = {
   containerWidth: number;
-  lineLength: number;
+  lineLength?: number;
   node: PMNode;
   className: string;
   editorView: EditorView;
@@ -75,178 +78,205 @@ type ResizableTableContainerProps = {
   pluginInjectionApi?: PluginInjectionAPI;
 };
 
-export const ResizableTableContainer = ({
-  children,
-  className,
-  node,
-  lineLength,
-  containerWidth,
-  editorView,
-  getPos,
-  tableRef,
-  isResizing,
-  pluginInjectionApi,
-}: PropsWithChildren<ResizableTableContainerProps>) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const marginLeftRef = useRef<number | undefined>(0);
-  const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
-
-  const updateContainerHeight = useCallback((height: number | 'auto') => {
-    // current StickyHeader State is not stable to be fetch.
-    // we need to update stickyHeader plugin to make sure state can be
-    //    consistently fetch and refactor below
-    const stickyHeaders =
-      containerRef.current?.getElementsByClassName('pm-table-sticky');
-    if (!stickyHeaders || stickyHeaders.length < 1) {
-      // when starting to drag, we need to keep the original space,
-      // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
-      //    1px is border width but collapse make it 0.5.
-      // -- When sticky header appear, we should add first row height but reduce
-      //    collapsed border
-      containerRef.current?.style.setProperty(
-        'height',
-        typeof height === 'number' ? `${height + 40.5}px` : 'auto',
-      );
-    } else {
-      const stickyHeaderHeight =
-        containerRef.current
-          ?.getElementsByTagName('th')[0]
-          .getBoundingClientRect().height || 0;
-      containerRef.current?.style.setProperty(
-        'height',
-        typeof height === 'number'
-          ? `${height + stickyHeaderHeight + 39.5}px`
-          : 'auto',
-      );
-    }
-  }, []);
-
-  const resizeObserverRef = useRef(
-    new ResizeObserver((entries) => {
-      updateContainerHeight(entries[entries.length - 1].contentRect.height);
-    }),
-  );
-
-  const onResizeStart = useCallback(() => {
-    if (tableRef) {
-      resizeObserverRef.current.observe(tableRef);
-    }
-  }, [tableRef]);
-
-  const onResizeStop = useCallback(() => {
-    updateContainerHeight('auto');
-
-    resizeObserverRef.current.disconnect();
-  }, [updateContainerHeight]);
-
-  const updateWidth = useCallback(
-    (width: number) => {
-      if (!containerRef.current) {
-        return;
+export const ResizableTableContainer = React.memo(
+  ({
+    children,
+    className,
+    node,
+    lineLength,
+    containerWidth,
+    editorView,
+    getPos,
+    tableRef,
+    isResizing,
+    pluginInjectionApi,
+  }: PropsWithChildren<ResizableTableContainerProps>) => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const marginLeftRef = useRef<number | undefined>(0);
+    const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
+
+    const updateContainerHeight = useCallback((height: number | 'auto') => {
+      // current StickyHeader State is not stable to be fetch.
+      // we need to update stickyHeader plugin to make sure state can be
+      //    consistently fetch and refactor below
+      const stickyHeaders =
+        containerRef.current?.getElementsByClassName('pm-table-sticky');
+      if (!stickyHeaders || stickyHeaders.length < 1) {
+        // when starting to drag, we need to keep the original space,
+        // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
+        //    1px is border width but collapse make it 0.5.
+        // -- When sticky header appear, we should add first row height but reduce
+        //    collapsed border
+        containerRef.current?.style.setProperty(
+          'height',
+          typeof height === 'number' ? `${height + 40.5}px` : 'auto',
+        );
+      } else {
+        const stickyHeaderHeight =
+          containerRef.current
+            ?.getElementsByTagName('th')[0]
+            .getBoundingClientRect().height || 0;
+        containerRef.current?.style.setProperty(
+          'height',
+          typeof height === 'number'
+            ? `${height + stickyHeaderHeight + 39.5}px`
+            : 'auto',
+        );
       }
+    }, []);
 
-      const marginLeft = getMarginLeft(lineLength, width);
+    const resizeObserverRef = useRef(
+      new ResizeObserver((entries) => {
+        updateContainerHeight(entries[entries.length - 1].contentRect.height);
+      }),
+    );
 
-      // make sure during resizing
-      // the pm-table-resizer-container width is the same as its child div resizer-item
-      // otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
-      // and cause the fabric-editor-popup-scroll-parent to overflow
-      if (containerRef.current.style.width !== `${width}px`) {
-        containerRef.current.style.width = `${width}px`;
+    const onResizeStart = useCallback(() => {
+      if (tableRef) {
+        resizeObserverRef.current.observe(tableRef);
       }
+    }, [tableRef]);
+
+    const onResizeStop = useCallback(() => {
+      updateContainerHeight('auto');
 
-      if (marginLeftRef.current !== marginLeft) {
-        marginLeftRef.current = marginLeft;
+      resizeObserverRef.current.disconnect();
+    }, [updateContainerHeight]);
 
-        if (Number.isFinite(marginLeft)) {
-          containerRef.current.style.marginLeft = `${marginLeft}px`;
+    const updateWidth = useCallback(
+      (width: number) => {
+        if (!containerRef.current) {
+          return;
         }
-      }
-    },
-    [lineLength],
-  );
 
-  const displayGuideline = useCallback(
-    (guidelines: GuidelineConfig[]) => {
-      return (
-        pluginInjectionApi?.guideline?.actions?.displayGuideline(editorView)({
-          guidelines,
-        }) ?? false
-      );
-    },
-    [pluginInjectionApi, editorView],
-  );
+        // make sure during resizing
+        // the pm-table-resizer-container width is the same as its child div resizer-item
+        // otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
+        // and cause the fabric-editor-popup-scroll-parent to overflow
+        if (containerRef.current.style.width !== `${width}px`) {
+          containerRef.current.style.width = `${width}px`;
+        }
 
-  const attachAnalyticsEvent = useCallback(
-    (payload: TableEventPayload) => {
-      return pluginInjectionApi?.analytics?.actions.attachAnalyticsEvent(
-        payload,
-      );
-    },
-    [pluginInjectionApi],
-  );
+        if (
+          !getBooleanFF('platform.editor.table.update-table-resizer-styles')
+        ) {
+          const marginLeft = getMarginLeft(lineLength, width);
+          if (marginLeftRef.current !== marginLeft) {
+            marginLeftRef.current = marginLeft;
+            if (Number.isFinite(marginLeft)) {
+              containerRef.current.style.marginLeft = `${marginLeft}px`;
+            }
+          }
+        }
+      },
+      [lineLength],
+    );
 
-  const displayGapCursor = useCallback(
-    (toggle) => {
-      return (
-        pluginInjectionApi?.core?.actions.execute(
-          pluginInjectionApi?.selection?.commands.displayGapCursor(toggle),
-        ) ?? false
-      );
-    },
-    [pluginInjectionApi],
-  );
+    const displayGuideline = useCallback(
+      (guidelines: GuidelineConfig[]) => {
+        return (
+          pluginInjectionApi?.guideline?.actions?.displayGuideline(editorView)({
+            guidelines,
+          }) ?? false
+        );
+      },
+      [pluginInjectionApi, editorView],
+    );
 
-  const tableWidth = getTableContainerWidth(node);
-  // 76 is currently an accepted padding value considering the spacing for resizer handle
-  const responsiveContainerWidth = containerWidth - 76;
-  const width = Math.min(tableWidth, responsiveContainerWidth);
+    const attachAnalyticsEvent = useCallback(
+      (payload: TableEventPayload) => {
+        return pluginInjectionApi?.analytics?.actions.attachAnalyticsEvent(
+          payload,
+        );
+      },
+      [pluginInjectionApi],
+    );
 
-  if (!isResizing) {
-    tableWidthRef.current = width;
-    marginLeftRef.current = getMarginLeft(lineLength, width);
-  }
-  const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
+    const displayGapCursor = useCallback(
+      (toggle) => {
+        return (
+          pluginInjectionApi?.core?.actions.execute(
+            pluginInjectionApi?.selection?.commands.displayGapCursor(toggle),
+          ) ?? false
+        );
+      },
+      [pluginInjectionApi],
+    );
 
-  let tableResizerProps: TableResizerImprovementProps = {
-    width,
-    maxWidth: maxResizerWidth,
-    containerWidth,
-    updateWidth,
-    editorView,
-    getPos,
-    node,
-    tableRef,
-    displayGuideline,
-    attachAnalyticsEvent,
-    displayGapCursor,
-  };
+    const tableWidth = getTableContainerWidth(node);
+    // 76 is currently an accepted padding value considering the spacing for resizer handle
+    const responsiveContainerWidth = containerWidth - 76;
+    const width = Math.min(tableWidth, responsiveContainerWidth);
 
-  if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
-    tableResizerProps = {
-      ...tableResizerProps,
-      onResizeStart: onResizeStart,
-      onResizeStop: onResizeStop,
+    if (!isResizing) {
+      tableWidthRef.current = width;
+      if (!getBooleanFF('platform.editor.table.update-table-resizer-styles')) {
+        marginLeftRef.current = getMarginLeft(lineLength, width);
+      }
+    }
+    const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
+
+    let tableResizerProps: TableResizerImprovementProps = {
+      width,
+      maxWidth: maxResizerWidth,
+      containerWidth,
+      updateWidth,
+      editorView,
+      getPos,
+      node,
+      tableRef,
+      displayGuideline,
+      attachAnalyticsEvent,
+      displayGapCursor,
     };
-  }
 
-  return (
-    <div
-      style={{
-        marginLeft: marginLeftRef.current,
-        width: tableWidthRef.current,
-      }}
-      className={ClassName.TABLE_RESIZER_CONTAINER}
-      ref={containerRef}
-    >
-      <TableResizer {...tableResizerProps}>
-        <InnerContainer className={className} node={node}>
-          {children}
-        </InnerContainer>
-      </TableResizer>
-    </div>
-  );
-};
+    if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
+      tableResizerProps = {
+        ...tableResizerProps,
+        onResizeStart: onResizeStart,
+        onResizeStop: onResizeStop,
+      };
+    }
+
+    return getBooleanFF('platform.editor.table.update-table-resizer-styles') ? (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          style={{
+            width: tableWidthRef.current,
+          }}
+          className={ClassName.TABLE_RESIZER_CONTAINER}
+          ref={containerRef}
+        >
+          <TableResizer {...tableResizerProps}>
+            <InnerContainer className={className} node={node}>
+              {children}
+            </InnerContainer>
+          </TableResizer>
+        </div>
+      </div>
+    ) : (
+      <div
+        style={{
+          marginLeft: marginLeftRef.current,
+          width: tableWidthRef.current,
+        }}
+        className={ClassName.TABLE_RESIZER_CONTAINER}
+        ref={containerRef}
+      >
+        <TableResizer {...tableResizerProps}>
+          <InnerContainer className={className} node={node}>
+            {children}
+          </InnerContainer>
+        </TableResizer>
+      </div>
+    );
+  },
+);
 
 type TableContainerProps = {
   node: PMNode;

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

@@ -191,7 +191,13 @@ export const createPlugin = (
 
       if (tr) {
         // "fixTables" removes empty rows as we don't allow that in schema
-        const updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI);
+        const updatedTr = handleCut(
+          tr,
+          oldState,
+          newState,
+          editorAnalyticsAPI,
+          editorViewRef || undefined,
+        );
         return fixTables(updatedTr) || updatedTr;
       }
       if (transactions.find((tr) => tr.docChanged)) {

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

@@ -130,5 +130,5 @@ export const getTableMaxWidth = ({
     maxWidth -= akEditorTableNumberColumnWidth;
   }
 
-  return maxWidth;
+  return maxWidth as number;
 };

package/src/plugins/table/transforms/column-width.ts

@@ -1,22 +1,20 @@
-import { CellAttributes } from '@atlaskit/adf-schema';
+import type { CellAttributes } from '@atlaskit/adf-schema';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
-import {
-  tableCellMinWidth,
-  tableNewColumnMinWidth,
-} from '@atlaskit/editor-common/styles';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import {
+  TableMap,
+  tableNewColumnMinWidth,
+} from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import {
-  hasTableBeenResized,
-  ResizeState,
-} from '../pm-plugins/table-resizing/utils';
+import type { ResizeState } from '../pm-plugins/table-resizing/utils';
+import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
 import {
@@ -26,6 +24,13 @@ import {
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
 import { insertColumnButtonOffset } from '../ui/common-styles';
 
+/**
+ * Given a new ResizeState object, create a transaction that replaces and updates the table node based on new state.
+ * @param resizeState
+ * @param table
+ * @param start
+ * @returns
+ */
 export const updateColumnWidths =
   (resizeState: ResizeState, table: PMNode, start: number) =>
   (tr: Transaction): Transaction => {
@@ -147,7 +152,129 @@ export const updateColumnWidths =
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export const rescaleColumns =
+export const rescaleColumnsNew =
+  () =>
+  (table: ContentNodeWithPos, view: EditorView | undefined) =>
+  (tr: Transaction): Transaction => {
+    if (!view) {
+      return tr;
+    }
+
+    const newTable = tr.doc.nodeAt(table.pos);
+    const domAtPos = view.domAtPos.bind(view);
+    const maybeTable = domAtPos(table.start).node as HTMLElement;
+    const tableRef = maybeTable.closest('table');
+
+    if (!tableRef || !newTable) {
+      return tr;
+    }
+
+    const isResized = hasTableBeenResized(table.node);
+    // get current table info
+    const previousTableInfo = {
+      // when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
+      width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
+      /** the is the width the table can reach before overflowing */
+      possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width')
+        ? tableRef?.parentElement?.clientWidth || 0
+        : (tableRef?.parentElement?.clientWidth || 0) -
+          insertColumnButtonOffset -
+          1,
+      isResized,
+    };
+
+    // determine the new table, based on new width
+    const newTableInfo = {
+      noOfColumns: TableMap.get(newTable).width,
+    };
+
+    if (!newTableInfo.noOfColumns || newTableInfo.noOfColumns <= 0) {
+      return tr;
+    }
+
+    const averageColumnWidth =
+      previousTableInfo.width / newTableInfo.noOfColumns;
+
+    // If the table has not been resized (i.e. all columns will have the same width) and every column width is bigger than the minimum column width
+    // we skip updating the size of columns here.
+    if (
+      !previousTableInfo.isResized &&
+      averageColumnWidth > tableCellMinWidth
+    ) {
+      return tr;
+    }
+
+    const wasTableInOverflow =
+      previousTableInfo.width > previousTableInfo.possibleMaxWidth;
+
+    // If the table has not been resized, and each column width is smaller than the minimum column width
+    // Or if the table has been resized, but each column width is either 48px or null
+    // we update the table to have 48px for each column
+    if (
+      (!previousTableInfo.isResized &&
+        averageColumnWidth <= tableCellMinWidth) ||
+      (previousTableInfo.isResized && isMinCellWidthTable(table.node))
+    ) {
+      const widths = new Array(newTableInfo.noOfColumns).fill(
+        tableCellMinWidth,
+      );
+      const cols = widths.map((_, index) => ({
+        width: tableCellMinWidth,
+        minWidth: tableCellMinWidth,
+        index,
+      }));
+
+      const minWidthResizeState = {
+        cols,
+        widths,
+        maxSize: previousTableInfo.possibleMaxWidth,
+        tableWidth: previousTableInfo.width,
+        overflow: wasTableInOverflow,
+      };
+      return updateColumnWidths(
+        minWidthResizeState,
+        table.node,
+        table.start,
+      )(tr);
+    }
+
+    let resizeState = getResizeState({
+      minWidth: tableCellMinWidth,
+      table: table.node,
+      start: table.start,
+      tableRef,
+      domAtPos,
+      maxSize: previousTableInfo.possibleMaxWidth,
+    });
+
+    // Two scenarios that require scaling:
+    //   1. If the new table width will result in the table going into overflow
+    //      we resize the cells to avoid it (e.g. adding a column)
+    //   2. If the new table width will be shorter than the parent width, scale columns to fit parent
+    if (
+      (!wasTableInOverflow && resizeState.overflow) ||
+      resizeState.tableWidth < resizeState.maxSize
+    ) {
+      resizeState = scaleTableTo(
+        resizeState,
+        previousTableInfo.possibleMaxWidth,
+      );
+    }
+
+    return updateColumnWidths(resizeState, table.node, table.start)(tr);
+  };
+
+/**
+ * This function is called when user inserts/deletes a column in a table to;
+ * - rescale all columns (if the table did not overflow before the insertion)
+ * - and update column widths.
+ *
+ * This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
+ * @param table
+ * @param view
+ * @returns Updated transaction with rescaled columns for a given table
+ */
+export const rescaleColumnsOld =
   (getEditorContainerWidth: GetEditorContainerWidth) =>
   (table: ContentNodeWithPos, view: EditorView | undefined) =>
   (tr: Transaction): Transaction => {
@@ -246,3 +373,16 @@ export const rescaleColumns =
 
     return updateColumnWidths(resizeState, table.node, table.start)(tr);
   };
+
+export const rescaleColumns = (
+  getEditorContainerWidth?: GetEditorContainerWidth,
+) => {
+  if (
+    getBooleanFF(
+      'platform.editor.table-update-colwidths-after-column-is-deleted',
+    )
+  ) {
+    return rescaleColumnsNew();
+  }
+  return rescaleColumnsOld(getEditorContainerWidth!);
+};