@atlaskit/editor-plugin-table 2.8.6 → 2.9.0

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

@@ -6,6 +6,7 @@ import {
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import defaultSchema from '@atlaskit/editor-test-helpers/schema';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import {
   generateColgroup,
@@ -15,74 +16,169 @@ import { isMinCellWidthTable } from '../../../../plugins/table/pm-plugins/table-
 
 describe('table-resizing/colgroup', () => {
   describe('#generateColgroup', () => {
-    describe('creates col with correct widths ', () => {
-      it('based on colwidth cell attributes', () => {
-        const result = generateColgroup(
-          getTable([
-            {
-              colwidth: [10],
-              colspan: 1,
-            },
-            {
-              colwidth: [20],
-              colspan: 1,
-            },
-          ]),
-        );
+    describe('creates col with correct widths', () => {
+      describe('based on colwidth cell attributes', () => {
+        ffTest(
+          'platform.editor.custom-table-width',
+          () => {
+            const result = generateColgroup(
+              getTable([
+                {
+                  colwidth: [10],
+                  colspan: 1,
+                },
+                {
+                  colwidth: [20],
+                  colspan: 1,
+                },
+              ]),
+            );
 
-        expect(result).toEqual([
-          ['col', { style: 'width: 10px;' }],
-          ['col', { style: 'width: 20px;' }],
-        ]);
-      });
+            expect(result).toEqual([
+              ['col', { style: 'width: 47.5px;' }],
+              ['col', { style: 'width: 47.5px;' }],
+            ]);
+          },
+          () => {
+            const result = generateColgroup(
+              getTable([
+                {
+                  colwidth: [10],
+                  colspan: 1,
+                },
+                {
+                  colwidth: [20],
+                  colspan: 1,
+                },
+              ]),
+            );
 
-      it('when colwidth is not an array', () => {
-        const result = generateColgroup(
-          getTable([
-            {
-              colwidth: 10,
-              colspan: 1,
-            },
-            {
-              colwidth: null,
-              colspan: 1,
-            },
-            {
-              colwidth: undefined,
-              colspan: 1,
-            },
-          ]),
+            expect(result).toEqual([
+              ['col', { style: 'width: 10px;' }],
+              ['col', { style: 'width: 20px;' }],
+            ]);
+          },
         );
+      });
+
+      describe('when colwidth is not an array', () => {
+        ffTest(
+          'platform.editor.custom-table-width',
+          () => {
+            const result = generateColgroup(
+              getTable([
+                {
+                  colwidth: 10,
+                  colspan: 1,
+                },
+                {
+                  colwidth: null,
+                  colspan: 1,
+                },
+                {
+                  colwidth: undefined,
+                  colspan: 1,
+                },
+              ]),
+            );
 
-        expect(result).toEqual([
-          ['col', {}],
-          ['col', {}],
-          ['col', {}],
-        ]);
+            expect(result).toEqual([
+              ['col', { style: 'width: 48px;' }],
+              ['col', { style: 'width: 48px;' }],
+              ['col', { style: 'width: 48px;' }],
+            ]);
+          },
+          () => {
+            const result = generateColgroup(
+              getTable([
+                {
+                  colwidth: 10,
+                  colspan: 1,
+                },
+                {
+                  colwidth: null,
+                  colspan: 1,
+                },
+                {
+                  colwidth: undefined,
+                  colspan: 1,
+                },
+              ]),
+            );
+
+            expect(result).toEqual([
+              ['col', {}],
+              ['col', {}],
+              ['col', {}],
+            ]);
+          },
+        );
       });
 
-      it('when colwidth has falsy values', () => {
-        const result = generateColgroup(
-          getTable([
-            {
-              colwidth: [0],
-              colspan: 1,
-            },
-            {
-              colwidth: [null],
-              colspan: 1,
-            },
-            {
-              colwidth: [undefined],
-              colspan: 1,
-            },
-          ]),
+      describe('when colwidth has falsy values', () => {
+        ffTest(
+          'platform.editor.custom-table-width',
+          () => {
+            const result = generateColgroup(
+              getTable([
+                {
+                  colwidth: [0],
+                  colspan: 1,
+                },
+                {
+                  colwidth: [null],
+                  colspan: 1,
+                },
+                {
+                  colwidth: [undefined],
+                  colspan: 1,
+                },
+              ]),
+            );
+
+            expect(result).toEqual(
+              expect.arrayContaining([
+                // (.666*) -> match unknown number of 6's
+                // (.?) -> match rounding errors e.g. 47.6666664px
+                [
+                  'col',
+                  { style: expect.stringMatching(/^width: 47.666*.?px/) },
+                ],
+                [
+                  'col',
+                  { style: expect.stringMatching(/^width: 47.666*.?px/) },
+                ],
+                [
+                  'col',
+                  { style: expect.stringMatching(/^width: 47.666*.?px/) },
+                ],
+              ]),
+            );
+          },
+          () => {
+            const result = generateColgroup(
+              getTable([
+                {
+                  colwidth: [0],
+                  colspan: 1,
+                },
+                {
+                  colwidth: [null],
+                  colspan: 1,
+                },
+                {
+                  colwidth: [undefined],
+                  colspan: 1,
+                },
+              ]),
+            );
+            expect(result).toEqual([
+              ['col', {}],
+              ['col', {}],
+              ['col', {}],
+            ]);
+          },
         );
-        expect(result).toEqual([
-          ['col', {}],
-          ['col', {}],
-          ['col', {}],
-        ]);
       });
 
       function getTable(cellAttributes: { [key: string]: any }[]) {

package/src/plugins/table/nodeviews/OverflowShadowsObserver.ts

@@ -1,3 +1,5 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import { tableInsertColumnButtonSize } from '../ui/consts';
 
@@ -63,7 +65,9 @@ export class OverflowShadowsObserver {
         {
           threshold: [0, 1],
           root: this.wrapper,
-          rootMargin: `0px ${tableInsertColumnButtonSize / 2}px 0px 0px`,
+          rootMargin: getBooleanFF('platform.editor.custom-table-width')
+            ? '0px'
+            : `0px ${tableInsertColumnButtonSize / 2}px 0px 0px`,
         },
       );
       return;

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

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import React from 'react';
 
 import classnames from 'classnames';
 import memoizeOne from 'memoize-one';
@@ -13,18 +14,21 @@ import type {
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
+import type {
+  RowStickyState,
+  StickyPluginState,
+} from '../pm-plugins/sticky-headers';
 import {
   findStickyHeaderForTable,
-  RowStickyState,
   pluginKey as stickyHeadersPluginKey,
-  StickyPluginState,
 } from '../pm-plugins/sticky-headers';
 import {
   getLayoutSize,
@@ -33,11 +37,9 @@ import {
 } from '../pm-plugins/table-resizing/utils';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
-import {
-  TableCssClassName as ClassName,
-  PluginInjectionAPI,
-  ShadowEvent,
-} from '../types';
+import type { PluginInjectionAPI } from '../types';
+import { TableCssClassName as ClassName, ShadowEvent } from '../types';
+import { tableOverflowShadowWidth } from '../ui/consts';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import {
   containsHeaderRow,
@@ -456,7 +458,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           <div
             style={{
               position: 'absolute',
-              right: '-2px',
+              right: getBooleanFF('platform.editor.custom-table-width')
+                ? `${tableOverflowShadowWidth}px`
+                : '-2px',
             }}
           >
             <div
@@ -566,7 +570,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         this.scaleTable({
           parentWidth,
           layoutChanged,
-          isTableResizingEnabled: options?.isTableResizingEnabled,
         });
       }
 
@@ -574,9 +577,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       if (options?.isTableResizingEnabled && hasNumberedColumnChanged) {
         if (!hasTableBeenResized(prevNode)) {
           this.scaleTable({
-            parentWidth,
+            parentWidth: node.attrs.width,
             layoutChanged,
-            isTableResizingEnabled: options?.isTableResizingEnabled,
           });
         }
       }
@@ -592,7 +594,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   private scaleTable = (scaleOptions: {
     layoutChanged: boolean;
     parentWidth?: number;
-    isTableResizingEnabled?: boolean;
   }) => {
     const { view, getNode, getPos, containerWidth, options } = this.props;
     const node = getNode();

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

@@ -208,7 +208,7 @@ export const TableContainer = ({
     <InnerContainer
       node={node}
       className={classNames(className, {
-        'less-padding': editorWidth < akEditorMobileBreakoutPoint,
+        'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested,
       })}
       style={{
         width: tableWidth,

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

@@ -82,8 +82,9 @@ const getResizerMinWidth = (node: PMNode) => {
     currentColumnCount <= 3
       ? currentColumnCount * COLUMN_MIN_WIDTH
       : 3 * COLUMN_MIN_WIDTH;
-
-  return minColumnWidth;
+  // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
+  // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
+  return minColumnWidth + 1;
 };
 
 export const TableResizer = ({

package/src/plugins/table/nodeviews/update-overflow-shadows.ts

@@ -4,7 +4,6 @@ import { TableCssClassName as ClassName } from '../types';
 
 export const updateShadowListForStickyStyles = (
   heightStyle: string,
-
   shadows: HTMLCollection,
 ) => {
   Array.from(shadows).forEach((shadow) => {

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

@@ -1,4 +1,4 @@
-import { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
 import {
   ACTION_SUBJECT,
   EVENT_TYPE,
@@ -11,10 +11,11 @@ import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes, updateResizeHandles } from '../../utils';
@@ -65,13 +66,21 @@ export const handleMouseDown = (
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(start, state, containerWidth);
 
-  let maxSize =
-    parentWidth ||
-    getLayoutSize(
-      dom.getAttribute('data-layout') as TableLayout,
-      containerWidth.width,
-      {},
-    );
+  let maxSize = getBooleanFF('platform.editor.custom-table-width')
+    ? parentWidth ||
+      // its safe to reference table width from node as this will not have changed
+      originalTable.attrs.width ||
+      getLayoutSize(
+        dom.getAttribute('data-layout') as TableLayout,
+        containerWidth.width,
+        {},
+      )
+    : parentWidth ||
+      getLayoutSize(
+        dom.getAttribute('data-layout') as TableLayout,
+        containerWidth.width,
+        {},
+      );
 
   if (originalTable.attrs.isNumberColumnEnabled) {
     maxSize -= akEditorTableNumberColumnWidth;

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

@@ -1,18 +1,26 @@
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
-import {
-  DOMSerializer,
-  Node as PmNode,
-} from '@atlaskit/editor-prosemirror/model';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 type Col = Array<string | { [name: string]: string }>;
 
-export const generateColgroup = (table: PmNode): Col[] => {
+/**
+ * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
+ * than the table and table wrapper elements. This is necessary as there is no longer
+ * padding on the .pm-table-wrapper, so all elements need to be the same width to avoid
+ * overflow.
+ */
+export const getColWidthFix = (colwidth: number, tableColumnCount: number) =>
+  colwidth - 1 / tableColumnCount;
+
+export const generateColgroup = (table: PmNode) => {
   const cols: Col[] = [];
 
   if (getBooleanFF('platform.editor.custom-table-width')) {
+    const map = TableMap.get(table);
     table.content.firstChild!.content.forEach((cell) => {
       const colspan = cell.attrs.colspan || 1;
       if (Array.isArray(cell.attrs.colwidth)) {
@@ -22,9 +30,10 @@ export const generateColgroup = (table: PmNode): Col[] => {
           cols.push([
             'col',
             {
-              style: `width: ${
-                width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth
-              }px;`,
+              style: `width: ${getColWidthFix(
+                width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth,
+                map.width,
+              )}px;`,
             },
           ]);
         });

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

@@ -1,4 +1,4 @@
-import { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
 import {
   getParentNodeWidth,
   layoutToWidth,
@@ -10,13 +10,13 @@ import {
   mapBreakpointToLayoutMaxWidth,
 } from '@atlaskit/editor-common/ui';
 import { containsClassName } from '@atlaskit/editor-common/utils';
-import {
+import type {
   NodeSpec,
   Node as PMNode,
   ResolvedPos,
 } from '@atlaskit/editor-prosemirror/model';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
   akEditorFullWidthLayoutWidth,
   akEditorGutterPadding,
@@ -24,7 +24,7 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import { TableOptions } from '../../../nodeviews/types';
+import type { TableOptions } from '../../../nodeviews/types';
 
 // Translates named layouts in number values.
 export function getLayoutSize(
@@ -120,15 +120,11 @@ export const getTableMaxWidth = ({
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
 
-  let maxWidth;
-  if (getBooleanFF('platform.editor.custom-table-width')) {
-    maxWidth =
-      parentWidth ||
+  let maxWidth = getBooleanFF('platform.editor.custom-table-width')
+    ? parentWidth ||
       table.attrs.width ||
-      getLayoutSize(layout, containerWidth.width, {});
-  } else {
-    maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
-  }
+      getLayoutSize(layout, containerWidth.width, {})
+    : parentWidth || getLayoutSize(layout, containerWidth.width, {});
 
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;

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

@@ -1,25 +1,27 @@
-import { TableLayout } from '@atlaskit/adf-schema';
+import type { TableLayout } from '@atlaskit/adf-schema';
 import {
   tableCellMinWidth,
   tableNewColumnMinWidth,
 } from '@atlaskit/editor-common/styles';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { getSelectedTableInfo } from '../../../utils';
 
-import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import {
-  ColumnState,
-  getCellsRefsInColumn,
-  getColumnStateFromDOM,
-} from './column-state';
+  getColWidthFix,
+  hasTableBeenResized,
+  insertColgroupFromNode,
+} from './colgroup';
+import type { ColumnState } from './column-state';
+import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
 import { syncStickyRowToTable } from './dom';
 import { getTableMaxWidth } from './misc';
-import { ResizeState, ResizeStateWithAnalytics } from './types';
+import type { ResizeState, ResizeStateWithAnalytics } from './types';
 
 export const getResizeState = ({
   minWidth,
@@ -83,13 +85,28 @@ export const updateColgroup = (
   tableRef: HTMLElement,
 ): void => {
   const cols = tableRef.querySelectorAll('col');
-  state.cols
-    .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
-    .forEach((column, i) => {
-      if (cols[i]) {
-        cols[i].style.width = `${column.width}px`;
-      }
-    });
+
+  if (getBooleanFF('platform.editor.custom-table-width')) {
+    const columnsCount = cols.length;
+    state.cols
+      .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
+      .forEach((column, i) => {
+        if (cols[i]) {
+          cols[i].style.width = `${getColWidthFix(
+            column.width,
+            columnsCount,
+          )}px`;
+        }
+      });
+  } else {
+    state.cols
+      .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
+      .forEach((column, i) => {
+        if (cols[i]) {
+          cols[i].style.width = `${column.width}px`;
+        }
+      });
+  }
 
   // colgroup has updated, reflect new widths in sticky header
   syncStickyRowToTable(tableRef);

package/src/plugins/table/types.ts

@@ -1,19 +1,19 @@
-import { IntlShape } from 'react-intl-next';
+import type { IntlShape } from 'react-intl-next';
 
+import type { TableLayout } from '@atlaskit/adf-schema';
 import {
   tableCellSelector,
   tableHeaderSelector,
-  TableLayout,
   tablePrefixSelector,
 } from '@atlaskit/adf-schema';
-import { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 
 import type tablePlugin from './index';