@atlaskit/editor-plugin-table 1.1.1 → 1.1.3

package/src/__tests__/unit/pm-plugins/table-resizing/event-handlers.ts

@@ -26,7 +26,10 @@ import { EditorView } from 'prosemirror-view';
 import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
 import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { akEditorFullPageMaxWidth } from '@atlaskit/editor-shared-styles/consts';
+import {
+  akEditorFullPageMaxWidth,
+  akEditorDefaultLayoutWidth,
+} from '@atlaskit/editor-shared-styles/consts';
 
 describe('table-resizing/event-handlers', () => {
   const editorAnalyticsAPIFake: EditorAnalyticsAPI = {
@@ -92,7 +95,7 @@ describe('table-resizing/event-handlers', () => {
 
       // No matter how large we try to resize the result should equal the width (within 1 pt)
       expect(getTotalTableWidth(view.state as EditorState)).toBeLessThanOrEqual(
-        akEditorFullPageMaxWidth,
+        akEditorDefaultLayoutWidth,
       );
       expect(
         getTotalTableWidth(view.state as EditorState),

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-column-menu-item-visual-hints-should-be-added-to-the-table-column-on-hover-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b2d4c34ad034fd6a8ffe63e9470ef849f5025413a0d1f9f97e5621ee7c689333
-size 29845
+oid sha256:73e26bdfa1009884d8657a69ff2a721ecf9f0a0763629cae053550cf9b640425
+size 29791

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-visual-hints-should-be-added-to-the-table-row-on-hover-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:337ae7625db1ff78ea3fad3a65bda0821c41c0917ba728eaa6cc059dc5432a8a
-size 29876
+oid sha256:4c6f837604b1df78aef416e043bfd090906490e7604121f6f0c683d43dd7c9da
+size 29783

package/src/__tests__/visual-regression/__image_snapshots__/sticky-header-ts-snapshot-test-table-sticky-header-should-align-with-table-cell-when-active-2-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f1a5a555cab8c01960d1dd4009d44eb51abf0fbd27674404e0bc8ddc9152c345
-size 19785
+oid sha256:19e5db9586d2f5b635464786308235a3da2adda2bea5ab7dcde7a50d901cd869
+size 19731

package/src/__tests__/visual-regression/sticky-header.ts

@@ -38,7 +38,8 @@ describe('Snapshot Test: Table', () => {
   });
 
   describe('sticky header', () => {
-    it('should align with table cell when active', async () => {
+    // FIXME: This test was automatically skipped due to failure on 14/02/2023: https://product-fabric.atlassian.net/browse/ED-16900
+    it.skip('should align with table cell when active', async () => {
       await initEditor(page, stickyHeaderWithHorizontalScroll);
 
       await clickFirstCell(page, true);

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

@@ -55,6 +55,7 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
+import { getParentWidthWithoutPadding } from '../pm-plugins/table-resizing/utils/misc';
 
 const isIE11 = browser.ie_version === 11;
 const NOOP = () => undefined;
@@ -620,14 +621,23 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
   private handleWindowResize = () => {
     const { getNode, containerWidth } = this.props;
-    const layoutSize = this.tableNodeLayoutSize(getNode());
+    const node = getNode();
+    const prevNode = this.node;
+    const layoutSize = this.tableNodeLayoutSize(node);
+    const prevAttrs = prevNode?.attrs;
+    const layoutChanged =
+      prevAttrs?.layout !== node?.attrs?.layout &&
+      prevAttrs?.__autoSize === node?.attrs?.__autoSize;
 
     if (containerWidth.width > layoutSize) {
       return;
     }
 
     const parentWidth = this.getParentNodeWidth();
-    this.scaleTableDebounced(parentWidth);
+    this.scaleTableDebounced({
+      layoutChanged: layoutChanged,
+      parentWidth: parentWidth,
+    });
   };
 
   private updateTableContainerWidth = () => {
@@ -671,12 +681,15 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     if (!isValidPosition(pos, state)) {
       return;
     }
-    return getParentNodeWidth(
+
+    const parentNodeWith = getParentNodeWidth(
       pos,
       state,
       containerWidth,
       options && options.isFullWidthModeEnabled,
     );
+
+    return getParentWidthWithoutPadding(parentNodeWith, pos, state);
   };
 
   private updateParentWidth = (width?: number) => {

package/src/plugins/table/pm-plugins/table-resizing/commands.ts

@@ -33,7 +33,7 @@ export const scaleTable =
       return false;
     }
 
-    const { node, start, parentWidth } = options;
+    const { node, start, parentWidth, layoutChanged } = options;
 
     // If a table has not been resized yet, columns should be auto.
     if (hasTableBeenResized(node) === false) {
@@ -65,7 +65,11 @@ export const scaleTable =
         // TODO: ED-8995
         // We need to do this check to reduce the number of race conditions when working with tables.
         // This metadata is been used in the sendTransaction function in the Collab plugin
-        tr.setMeta('scaleTable', true);
+        /* Added !layoutChanged check here to solve unnecessary scroll bar after publish when click on breakout button multiple times and publish
+           scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
+           Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
+         */
+        !layoutChanged && tr.setMeta('scaleTable', true);
         dispatch(tr);
         return true;
       }

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

@@ -31,6 +31,7 @@ import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
+import { getParentWidthWithoutPadding } from './utils/misc';
 
 export const handleMouseDown = (
   view: EditorView,
@@ -67,8 +68,15 @@ export const handleMouseDown = (
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(start, state, containerWidth);
 
+  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
+  const parentActualWidth = getParentWidthWithoutPadding(
+    parentWidth,
+    start,
+    state,
+  );
+
   let maxSize =
-    parentWidth ||
+    parentActualWidth ||
     getLayoutSize(
       dom.getAttribute('data-layout') as TableLayout,
       containerWidth.width,

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

@@ -1,6 +1,6 @@
 import { DOMSerializer, Node as PmNode } from 'prosemirror-model';
-
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 
 type Col = Array<string | { [name: string]: string }>;
 
@@ -47,6 +47,24 @@ export const hasTableBeenResized = (table: PmNode) => {
   );
 };
 
+/**
+ * Check if a table has all the column width set to tableCellMinWidth(48px) or null
+ *
+ * @param table
+ * @returns true if all column width is equal to tableCellMinWidth or null, false otherwise
+ */
+export const isMinCellWidthTable = (table: PmNode) => {
+  const cellArray = getFragmentBackingArray(table.content.firstChild!.content);
+  const isTableMinCellWidth = cellArray.every((cell) => {
+    return (
+      (cell.attrs.colwidth && cell.attrs.colwidth[0] === tableCellMinWidth) ||
+      cell.attrs.colwidth === null
+    );
+  });
+
+  return isTableMinCellWidth;
+};
+
 function renderColgroupFromNode(table: PmNode): HTMLElement {
   const rendered = DOMSerializer.renderSpec(document, [
     'colgroup',

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

@@ -21,6 +21,8 @@ import { Node as PMNode } from 'prosemirror-model';
 import { EditorState } from 'prosemirror-state';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
+import { gridSize } from '@atlaskit/theme/constants';
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 
 export const tableLayoutToSize: Record<string, number> = {
   default: akEditorDefaultLayoutWidth,
@@ -54,10 +56,6 @@ export function getLayoutSize(
     return parseInt(calculatedTableWidth, 10);
   }
 
-  if (tableLayout === 'default') {
-    return getDefaultLayoutMaxWidth(containerWidth);
-  }
-
   return tableLayoutToSize[tableLayout] || containerWidth;
 }
 
@@ -126,7 +124,15 @@ export const getTableMaxWidth = ({
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
 
-  let maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
+  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
+  const parentActualWidth = getParentWidthWithoutPadding(
+    parentWidth,
+    tableStart,
+    state,
+  );
+
+  let maxWidth =
+    parentActualWidth || getLayoutSize(layout, containerWidth.width, {});
 
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;
@@ -134,3 +140,49 @@ export const getTableMaxWidth = ({
 
   return maxWidth;
 };
+
+export const getParentWidthWithoutPadding = (
+  parentWidth: number,
+  tableStartPos: number,
+  state: EditorState,
+) => {
+  const node = getNestedParentNode(tableStartPos, state);
+  if (!node) {
+    return;
+  }
+
+  const { schema } = state;
+
+  if (node.type === schema.nodes.expand) {
+    // padding
+    parentWidth -= gridSize() * 2;
+    // gutter offset
+    parentWidth += gridSize() * 1.5 * 2;
+    // padding right
+    parentWidth -= gridSize();
+    // padding left
+    parentWidth -= gridSize() * 4 - gridSize() / 2;
+  }
+
+  return parentWidth;
+};
+
+// copy of getNestedParentNode() from packages/editor/editor-common/src/node-width/index.ts
+// to be removed later when we will move getParentWidthWithoutPadding() logic to editor-common
+const getNestedParentNode = (
+  tablePos: number,
+  state: EditorState,
+): PMNode | null => {
+  if (tablePos === undefined) {
+    return null;
+  }
+
+  const $pos = state.doc.resolve(tablePos);
+  const parent = findParentNodeOfTypeClosestToPos($pos, [
+    state.schema.nodes.bodiedExtension,
+    state.schema.nodes.layoutSection,
+    state.schema.nodes.expand,
+  ]);
+
+  return parent ? parent.node : null;
+};

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

@@ -19,7 +19,7 @@ export const growColumn = (
   if (remaining > 0) {
     newState = stackSpace(newState, colIndex, remaining).state;
   }
-  if (selectedColumns) {
+  if (selectedColumns && selectedColumns.length > 1) {
     return bulkColumnsResize(newState, selectedColumns, colIndex);
   }
 
@@ -51,7 +51,7 @@ export const shrinkColumn = (
   if (remaining < 0) {
     newState = stackSpace(newState, colIndex + 1, remaining).state;
   }
-  if (selectedColumns) {
+  if (selectedColumns && selectedColumns.length > 1) {
     return bulkColumnsResize(newState, selectedColumns, colIndex);
   }
 

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

@@ -2,6 +2,7 @@ import { Node as PMNode } from 'prosemirror-model';
 import { Transaction } from 'prosemirror-state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 
 import { CellAttributes } from '@atlaskit/adf-schema';
 
@@ -21,6 +22,8 @@ import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
+import { insertColumnButtonOffset } from '../ui/common-styles';
 
 export const updateColumnWidths =
   (resizeState: ResizeState, table: PMNode, start: number) =>
@@ -138,19 +141,18 @@ export const rescaleColumns =
   (getEditorContainerWidth: GetEditorContainerWidth) =>
   (table: ContentNodeWithPos, view: EditorView | undefined) =>
   (tr: Transaction): Transaction => {
-    // If the table has been not been resized we skip updating the size
-    // of columns here.
-    if (!view || !hasTableBeenResized(table.node)) {
+    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) {
+    if (!tableRef || !newTable) {
       return tr;
     }
 
@@ -163,6 +165,57 @@ export const rescaleColumns =
       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((width, 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,
@@ -172,7 +225,8 @@ export const rescaleColumns =
       maxSize,
     });
     const previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
-    const tableDidntPreviouslyOverflow = previousTableWidth <= maxSize;
+    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

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

@@ -73,7 +73,7 @@ const cornerControlHeight = tableToolbarSize + 1;
   that is aligned to the right edge initially on hover of the top right column control when table overflown,
   its center should be aligned with the edge
 */
-const insertColumnButtonOffset = tableInsertColumnButtonSize / 2;
+export const insertColumnButtonOffset = tableInsertColumnButtonSize / 2;
 
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
@@ -615,6 +615,8 @@ export const tableStyles = (
       table-layout: fixed;
       white-space: normal;
       border-top: none;
+      // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212
+      margin-right: -1px;
 
       > tbody > tr {
         white-space: pre-wrap;
@@ -737,7 +739,8 @@ export const tableStyles = (
 export const tableFullPageEditorStyles = css`
   .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
     margin-left: 0;
-    margin-right: 0;
+    // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212
+    margin-right: -1px;
     width: 100%;
   }
 `;