@atlaskit/editor-plugin-table 2.8.6 → 2.9.1

package/dist/types-ts4.5/plugins/table/ui/consts.d.ts

@@ -42,6 +42,7 @@ export declare const contextualMenuDropdownWidth = 180;
 export declare const stickyRowZIndex: number;
 export declare const stickyRowOffsetTop = 8;
 export declare const stickyHeaderBorderBottomWidth = 1;
+export declare const tableOverflowShadowWidth = 8;
 export declare const TABLE_SNAP_GAP = 9;
 export declare const TABLE_HIGHLIGHT_GAP = 10;
 export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;

package/dist/types-ts4.5/plugins/table/ui/ui-styles.d.ts

@@ -1,4 +1,4 @@
-import { ThemeProps } from '@atlaskit/theme/types';
+import type { ThemeProps } from '@atlaskit/theme/types';
 export declare const InsertMarker: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButton: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/plugins/table/utils/decoration.d.ts

@@ -1,7 +1,9 @@
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { ReadonlyTransaction, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { Cell, CellColumnPositioning, TableDecorations } from '../types';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { ReadonlyTransaction, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import type { Cell, CellColumnPositioning } from '../types';
+import { TableDecorations } from '../types';
 export declare const findColumnControlSelectedDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const findControlsHoverDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const createCellHoverDecoration: (cells: Cell[]) => Decoration[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.8.6",
+  "version": "2.9.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^28.1.0",
-    "@atlaskit/editor-common": "^74.45.0",
+    "@atlaskit/editor-common": "^74.46.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.8",

package/report.api.md

@@ -23,7 +23,7 @@ import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-import { TableLayout } from '@atlaskit/adf-schema';
+import type { TableLayout } from '@atlaskit/adf-schema';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 // @public (undocumented)

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

@@ -1,23 +1,20 @@
-import React, {
-  forwardRef,
-  PropsWithChildren,
-  useCallback,
-  useRef,
-} from 'react';
+import type { PropsWithChildren } from 'react';
+import React, { forwardRef, useCallback, useRef } from 'react';
 
 import classNames from 'classnames';
 
-import { TableEventPayload } from '@atlaskit/editor-common/analytics';
+import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
-import { EditorContainerWidth } from '@atlaskit/editor-common/types';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
-import { TableCssClassName as ClassName, PluginInjectionAPI } from '../types';
+import type { PluginInjectionAPI } from '../types';
+import { TableCssClassName as ClassName } from '../types';
 
 import { TableResizer } from './TableResizer';
 
@@ -94,6 +91,14 @@ export const ResizableTableContainer = ({
 
       const marginLeft = getMarginLeft(lineLength, width);
 
+      // make sure during resizing
+      // the pm-table-resizer-container width is the same as its child div resizer-item
+      // otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
+      // and cause the fabric-editor-popup-scroll-parent to overflow
+      if (containerRef.current.style.width !== `${width}px`) {
+        containerRef.current.style.width = `${width}px`;
+      }
+
       if (marginLeftRef.current !== marginLeft) {
         marginLeftRef.current = marginLeft;
 
@@ -141,6 +146,7 @@ export const ResizableTableContainer = ({
       <TableResizer
         width={width}
         maxWidth={maxResizerWidth}
+        containerWidth={containerWidth}
         updateWidth={updateWidth}
         editorView={editorView}
         getPos={getPos}
@@ -208,7 +214,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

@@ -40,6 +40,7 @@ import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
 interface TableResizerProps {
   width: number;
   maxWidth: number;
+  containerWidth: number;
   updateWidth: (width: number) => void;
   editorView: EditorView;
   getPos: () => number | undefined;
@@ -82,14 +83,36 @@ const getResizerMinWidth = (node: PMNode) => {
     currentColumnCount <= 3
       ? currentColumnCount * COLUMN_MIN_WIDTH
       : 3 * COLUMN_MIN_WIDTH;
+  // 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;
+};
 
-  return minColumnWidth;
+/**
+ * When guidelines are outside the viewport, filter them out, do not show
+ * So the guideline container won't make the fabric-editor-popup-scroll-parent overflow
+ * @param guidelines
+ * @param containerWidth editorWidth
+ */
+const getVisibleGuidelines = (
+  guidelines: GuidelineConfig[],
+  containerWidth: number,
+) => {
+  return guidelines.filter((guideline) => {
+    return (
+      guideline.position &&
+      guideline.position.x !== undefined &&
+      typeof guideline.position.x === 'number' &&
+      Math.abs(guideline.position.x * 2) < containerWidth
+    );
+  });
 };
 
 export const TableResizer = ({
   children,
   width,
   maxWidth,
+  containerWidth,
   updateWidth,
   editorView,
   getPos,
@@ -110,17 +133,21 @@ export const TableResizer = ({
     ({ gap, keys }: { gap: number; keys: string[] }) => {
       if (gap !== currentGap.current) {
         currentGap.current = gap;
+        const visibleGuidelines = getVisibleGuidelines(
+          defaultGuidelines,
+          containerWidth,
+        );
         displayGuideline(
           getGuidelinesWithHighlights(
             gap,
             TABLE_SNAP_GAP,
             keys,
-            defaultGuidelines,
+            visibleGuidelines,
           ),
         );
       }
     },
-    [displayGuideline],
+    [displayGuideline, containerWidth],
   );
 
   const guidelineSnaps = useMemo(
@@ -143,8 +170,12 @@ export const TableResizer = ({
 
     dispatch(tr.setMeta(tableWidthPluginKey, { resizing: true }));
 
-    setSnappingEnabled(displayGuideline(defaultGuidelines));
-  }, [displayGuideline, editorView, startMeasure]);
+    const visibleGuidelines = getVisibleGuidelines(
+      defaultGuidelines,
+      containerWidth,
+    );
+    setSnappingEnabled(displayGuideline(visibleGuidelines));
+  }, [displayGuideline, containerWidth, editorView, startMeasure]);
 
   const handleResize = useCallback(
     (originalState, delta) => {

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;`,
             },
           ]);
         });