@atlaskit/editor-plugin-table 5.7.3 → 5.7.5

package/src/transforms/column-width.ts

@@ -1,26 +1,17 @@
 import type { CellAttributes } from '@atlaskit/adf-schema';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 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,
-  tableNewColumnMinWidth,
-} from '@atlaskit/editor-tables/table-map';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 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 {
-  getResizeState,
-  normaliseTableLayout,
-} from '../pm-plugins/table-resizing/utils/resize-state';
+import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
 import { insertColumnButtonOffset } from '../ui/common-styles';
 
@@ -112,7 +103,7 @@ export const updateColumnWidths =
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export const rescaleColumnsNew =
+export const rescaleColumns =
   () =>
   (table: ContentNodeWithPos, view: EditorView | undefined) =>
   (tr: Transaction): Transaction => {
@@ -138,8 +129,7 @@ export const rescaleColumnsNew =
       possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width')
         ? tableRef?.parentElement?.clientWidth || 0
         : (tableRef?.parentElement?.clientWidth || 0) -
-          insertColumnButtonOffset -
-          1,
+          insertColumnButtonOffset,
       isResized,
     };
 
@@ -223,126 +213,3 @@ export const rescaleColumnsNew =
 
     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 => {
-    if (!view) {
-      return tr;
-    }
-
-    const pos = table.pos;
-    const newTable = tr.doc.nodeAt(pos);
-    const { state } = view;
-    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 layout = normaliseTableLayout(tableRef?.dataset.layout);
-    // The is the width the table can reach before overflowing
-    const maxSize = getTableMaxWidth({
-      table: table.node,
-      tableStart: table.start,
-      state,
-      layout,
-      getEditorContainerWidth,
-    });
-
-    const tableWidth = tableRef.clientWidth || akEditorDefaultLayoutWidth;
-    let tableMaxWidth = tableRef?.parentElement?.clientWidth || 0;
-    tableMaxWidth -= insertColumnButtonOffset;
-    const newTableMap = TableMap.get(newTable);
-    const noOfColumns = newTableMap.width;
-    if (!noOfColumns || noOfColumns <= 0) {
-      return tr;
-    }
-    const columnWidthUnresized = tableWidth / noOfColumns;
-
-    // If the table has not been resized, and the column width is bigger than the minimum column width
-    // we skip updating the size of columns here.
-    if (
-      !hasTableBeenResized(table.node) &&
-      columnWidthUnresized > tableCellMinWidth
-    ) {
-      return tr;
-    }
-
-    // If the table has not been resized, and the 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 (
-      (!hasTableBeenResized(table.node) &&
-        columnWidthUnresized <= tableCellMinWidth) ||
-      (hasTableBeenResized(table.node) && isMinCellWidthTable(table.node))
-    ) {
-      const widths: Array<number> = new Array(noOfColumns).fill(
-        tableCellMinWidth,
-      );
-      const cols = widths.map((_, index) => ({
-        width: tableCellMinWidth,
-        minWidth: tableCellMinWidth,
-        index,
-      }));
-      const overflow = tableWidth > maxSize;
-      const minWidthResizeState = {
-        cols,
-        widths,
-        maxSize,
-        tableWidth,
-        overflow,
-      };
-      return updateColumnWidths(
-        minWidthResizeState,
-        table.node,
-        table.start,
-      )(tr);
-    }
-
-    let resizeState = getResizeState({
-      minWidth: tableCellMinWidth,
-      table: table.node,
-      start: table.start,
-      tableRef,
-      domAtPos,
-      maxSize,
-    });
-    const previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
-    const tableDidntPreviouslyOverflow =
-      previousTableWidth <= Math.max(maxSize, tableMaxWidth);
-
-    // If the new table width will result in the table going into an overflow state
-    // we resize the cells to avoid the overflow occuring
-    if (tableDidntPreviouslyOverflow && resizeState.overflow) {
-      resizeState = scaleTableTo(resizeState, maxSize);
-    }
-
-    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!);
-};

package/src/transforms/delete-columns.ts

@@ -8,7 +8,6 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { META_KEYS } from '../pm-plugins/table-analytics';
 
@@ -263,14 +262,9 @@ export const deleteColumns =
       updatedTr = deleteColumnsLegacy(rect)(updatedTr);
     }
     const table = findTable(updatedTr.selection);
-    if (
-      getBooleanFF(
-        'platform.editor.table-update-colwidths-after-column-is-deleted',
-      )
-    ) {
-      if (table) {
-        updatedTr = rescaleColumns()(table, view)(updatedTr);
-      }
+
+    if (table) {
+      updatedTr = rescaleColumns()(table, view)(updatedTr);
     }
     return updatedTr;
   };

package/src/ui/common-styles.ts

@@ -150,6 +150,7 @@ const stickyScrollbarContainerStyles = `.${ClassName.TABLE_CONTAINER} {
     overflow-x: auto;
     position: sticky;
     bottom: 0;
+    z-index: 1;
   }
 }`;
 

package/src/utils/analytics.ts

@@ -144,6 +144,7 @@ export const generateResizeFrameRatePayloads = (props: {
   docSize: number;
   frameRateSamples: number[];
   originalNode: PMNode;
+  experiments?: Record<string, boolean | undefined>;
 }): TableEventPayload[] => {
   const reducedResizeFrameRateSamples = reduceResizeFrameRateSamples(
     props.frameRateSamples,
@@ -157,6 +158,7 @@ export const generateResizeFrameRatePayloads = (props: {
       nodeSize: props.originalNode.nodeSize,
       docSize: props.docSize,
       isInitialSample: index === 0,
+      experiments: props.experiments,
     },
   }));
 };