@atlaskit/editor-plugin-table 4.1.1 → 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/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!);
+};

package/src/plugins/table/transforms/delete-columns.ts

@@ -4,12 +4,15 @@ import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
+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';
 
+import { rescaleColumns } from './column-width';
 import { splitCellsInColumns } from './split';
 
 const deleteColumnsCustomStep =
@@ -247,13 +250,27 @@ function fixRowSpans(table: PMNode): PMNode | null {
 }
 
 export const deleteColumns =
-  (rect: Rect, allowAddColumnCustomStep = false) =>
-  (tr: Transaction): Transaction => {
-    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+  (rect: Rect, allowCustomStep: boolean, view?: EditorView) =>
+  (tr: Transaction) => {
+    let updatedTr = tr;
+    updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.DELETED_COLUMN,
     });
-    if (allowAddColumnCustomStep) {
-      return deleteColumnsCustomStep(rect)(tr);
+
+    if (allowCustomStep) {
+      updatedTr = deleteColumnsCustomStep(rect)(updatedTr);
+    } else {
+      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);
+      }
     }
-    return deleteColumnsLegacy(rect)(tr);
+    return updatedTr;
   };

package/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -434,7 +434,7 @@ export class ContextualMenu extends Component<
         deleteColumnsWithAnalytics(editorAnalyticsAPI)(
           INPUT_METHOD.CONTEXT_MENU,
           selectionRect,
-        )(state, dispatch);
+        )(state, dispatch, editorView);
         this.toggleOpen();
         break;
       case 'delete_row':

package/src/plugins/table/ui/FloatingDeleteButton/index.tsx

@@ -1,4 +1,5 @@
-import React, { Component, SyntheticEvent } from 'react';
+import type { SyntheticEvent } from 'react';
+import React, { Component } from 'react';
 
 import { createPortal } from 'react-dom';
 
@@ -6,8 +7,8 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { closestElement } from '@atlaskit/editor-common/utils';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+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/cell-selection';
 import {
@@ -21,7 +22,7 @@ import {
   deleteRowsWithAnalytics,
 } from '../../commands-with-analytics';
 import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
-import { RowStickyState } from '../../pm-plugins/sticky-headers';
+import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 import {
   getColumnDeleteButtonParams,
@@ -34,7 +35,7 @@ import tableMessages from '../messages';
 
 import DeleteButton from './DeleteButton';
 import getPopupOptions from './getPopUpOptions';
-import { CellSelectionType } from './types';
+import type { CellSelectionType } from './types';
 
 export interface Props {
   editorView: EditorView;
@@ -278,7 +279,7 @@ class FloatingDeleteButton extends Component<Props, State> {
           deleteColumnsWithAnalytics(editorAnalyticsAPI)(
             INPUT_METHOD.BUTTON,
             rect,
-          )(state, dispatch);
+          )(state, dispatch, this.props.editorView);
           return;
         }
         case 'row': {

package/src/plugins/table/ui/common-styles.ts

@@ -249,7 +249,6 @@ const tableWrapperStyles = () => {
         position: relative;
 
         > table[data-number-column='true'] {
-          margin-left: 1px;
           width: calc(100% - 1px);
         }
       }