@atlaskit/editor-plugin-table 1.1.2 → 1.1.4

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/FloatingContextualMenu/ContextualMenu.tsx

@@ -20,6 +20,7 @@ import {
   ColorPalette,
   cellBackgroundColorPalette,
 } from '@atlaskit/editor-common/ui-color';
+import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 
 import { DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 
@@ -220,7 +221,7 @@ export class ContextualMenu extends Component<
         content: formatMessage(messages.cellBackground),
         value: { name: 'background' },
         elemAfter: (
-          <div>
+          <div className={DropdownMenuSharedCssClassName.SUBMENU}>
             <div
               css={cellColourPreviewStyles(background)}
               className={ClassName.CONTEXTUAL_MENU_ICON}

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%;
   }
 `;