@atlaskit/editor-plugin-table 2.8.5 → 2.9.0

package/dist/types-ts4.5/plugins/table/nodeviews/TableComponent.d.ts

@@ -2,10 +2,11 @@ import React from 'react';
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { EditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { RowStickyState, StickyPluginState } from '../pm-plugins/sticky-headers';
-import { PluginInjectionAPI, ShadowEvent } from '../types';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { RowStickyState, StickyPluginState } from '../pm-plugins/sticky-headers';
+import type { PluginInjectionAPI } from '../types';
+import { ShadowEvent } from '../types';
 import type { TableOptions } from './types';
 export interface ComponentProps {
     view: EditorView;

package/dist/types-ts4.5/plugins/table/pm-plugins/keymap.d.ts

@@ -1,5 +1,5 @@
-import { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null): SafePlugin;
 export default keymapPlugin;

package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/event-handlers.d.ts

@@ -1,4 +1,4 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI) => boolean;

package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/utils/colgroup.d.ts

@@ -1,7 +1,14 @@
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 type Col = Array<string | {
     [name: string]: string;
 }>;
+/**
+ * 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 declare const getColWidthFix: (colwidth: number, tableColumnCount: number) => number;
 export declare const generateColgroup: (table: PmNode) => Col[];
 export declare const insertColgroupFromNode: (tableRef: HTMLTableElement, table: PmNode) => HTMLCollection;
 export declare const hasTableBeenResized: (table: PmNode) => boolean;

package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/utils/misc.d.ts

@@ -1,9 +1,9 @@
-import { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { TableOptions } from '../../../nodeviews/types';
+import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { TableOptions } from '../../../nodeviews/types';
 export declare function getLayoutSize(tableLayout: TableLayout, containerWidth: number | undefined, options: TableOptions): number;
 export declare function getDefaultLayoutMaxWidth(containerWidth?: number): number;
 export declare function pointsAtCell($pos: ResolvedPos): false | PMNode | null;

package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/utils/resize-state.d.ts

@@ -1,9 +1,9 @@
-import { TableLayout } from '@atlaskit/adf-schema';
+import type { TableLayout } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-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 { ResizeState, ResizeStateWithAnalytics } from './types';
+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 type { ResizeState, ResizeStateWithAnalytics } from './types';
 export declare const getResizeState: ({ minWidth, maxSize, table, tableRef, start, domAtPos, }: {
     minWidth: number;
     maxSize: number;

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

@@ -1,12 +1,12 @@
-import { IntlShape } from 'react-intl-next';
-import { TableLayout } from '@atlaskit/adf-schema';
-import { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { IntlShape } from 'react-intl-next';
+import type { TableLayout } from '@atlaskit/adf-schema';
+import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 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';
 export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';

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

@@ -1,5 +1,6 @@
-import React, { SyntheticEvent } from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
+import type { SyntheticEvent } from 'react';
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
 export interface ButtonProps {
     type: 'row' | 'column';
     tableRef: HTMLElement;

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.5",
+  "version": "2.9.0",
   "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

@@ -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) => {