@atlaskit/editor-plugin-table 1.5.5 → 1.6.0

package/dist/types/plugins/table/nodeviews/TableContainer.d.ts

@@ -0,0 +1,35 @@
+import React, { PropsWithChildren } from 'react';
+import { Node as PMNode } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { EditorContainerWidth } from '@atlaskit/editor-common/types';
+type InnerContainerProps = {
+    className: string;
+    marginLeft: number | undefined;
+    width: number | 'inherit';
+    node: PMNode;
+};
+export declare const InnerContainer: React.ForwardRefExoticComponent<InnerContainerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+type ResizableTableContainerProps = {
+    containerWidth: number;
+    lineLength: number;
+    node: PMNode;
+    className: string;
+    editorView: EditorView;
+    getPos: () => number;
+    tableRef: HTMLTableElement;
+};
+export declare const ResizableTableContainer: ({ children, className, node, lineLength, editorView, getPos, tableRef, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
+type TableContainerProps = {
+    node: PMNode;
+    className: string;
+    containerWidth: EditorContainerWidth;
+    isFullWidthModeEnabled: boolean | undefined;
+    isBreakoutEnabled: boolean | undefined;
+    editorView: EditorView;
+    getPos: () => number;
+    tableRef: HTMLTableElement;
+};
+export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isFullWidthModeEnabled, isBreakoutEnabled, editorView, getPos, tableRef, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export {};

package/dist/types/plugins/table/nodeviews/TableResizer.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { EditorView } from 'prosemirror-view';
+import { Node as PMNode } from 'prosemirror-model';
+interface TableResizerProps {
+    width: number;
+    updateWidth: (width: number) => void;
+    editorView: EditorView;
+    getPos: () => number;
+    node: PMNode;
+    tableRef: HTMLTableElement;
+}
+export declare const TableResizer: ({ children, width, updateWidth, editorView, getPos, node, tableRef, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export {};

package/dist/types/plugins/table/pm-plugins/table-resizing/commands.d.ts

@@ -1,10 +1,8 @@
 import { Node as PMNode } from 'prosemirror-model';
 import { Transaction } from 'prosemirror-state';
-import type { Command } from '@atlaskit/editor-common/types';
-import type { DomAtPos } from 'prosemirror-utils';
-import { ResizeState, ScaleOptions } from './utils';
 import { ContentNodeWithPos } from 'prosemirror-utils';
-export declare const scaleTable: (tableRef: HTMLTableElement | null | undefined, options: ScaleOptions, domAtPos: DomAtPos) => Command;
+import type { Command } from '@atlaskit/editor-common/types';
+import { ResizeState } from './utils';
 export declare const evenColumns: ({ resizeState, table, start, event, }: {
     resizeState: ResizeState;
     table: PMNode;

package/dist/types/plugins/table/pm-plugins/table-resizing/index.d.ts

@@ -1,4 +1,3 @@
 export { createPlugin } from './plugin';
-export { scaleTable } from './commands';
 export { pluginKey } from './plugin-key';
 export { getPluginState } from './plugin-factory';

package/dist/types/plugins/table/pm-plugins/table-resizing/utils/index.d.ts

@@ -4,9 +4,9 @@ export { getColumnStateFromDOM, getFreeSpace, getCellsRefsInColumn, calculateCol
 export type { ColumnState } from './column-state';
 export { growColumn, shrinkColumn, reduceSpace } from './resize-logic';
 export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bulkColumnsResize, areColumnsEven, adjustColumnsWidths, } from './resize-state';
-export { tableLayoutToSize, getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, } from './misc';
+export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
-export { scale, scaleWithParent } from './scale-table';
+export { scale, scaleWithParent, scaleTable, previewScaleTable, } from './scale-table';
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
 export { resizeColumn } from './resize-column';

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

@@ -5,7 +5,6 @@ import { TableOptions } from '../../../nodeviews/types';
 import { Node as PMNode } from 'prosemirror-model';
 import { EditorState } from 'prosemirror-state';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-export declare const tableLayoutToSize: Record<string, number>;
 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<any>): false | PMNode<any> | null | undefined;

package/dist/types/plugins/table/pm-plugins/table-resizing/utils/scale-table.d.ts

@@ -1,4 +1,5 @@
 import { Node as PMNode } from 'prosemirror-model';
+import { Transaction } from 'prosemirror-state';
 import type { DomAtPos } from 'prosemirror-utils';
 import { ResizeState } from '../utils/types';
 export interface ScaleOptions {
@@ -15,3 +16,5 @@ export interface ScaleOptions {
 export declare const scale: (tableRef: HTMLTableElement, options: ScaleOptions, domAtPos: DomAtPos) => ResizeState | undefined;
 export declare const scaleWithParent: (tableRef: HTMLTableElement, parentWidth: number, table: PMNode, start: number, domAtPos: DomAtPos) => ResizeState;
 export declare function scaleTableTo(state: ResizeState, maxSize: number): ResizeState;
+export declare const previewScaleTable: (tableRef: HTMLTableElement | null | undefined, options: ScaleOptions, domAtPos: DomAtPos) => void;
+export declare const scaleTable: (tableRef: HTMLTableElement | null | undefined, options: ScaleOptions, domAtPos: DomAtPos) => (tr: Transaction) => Transaction<any>;

package/dist/types/plugins/table/types.d.ts

@@ -298,6 +298,7 @@ export declare const TableCssClassName: {
     TABLE_HEADER_CELL_WRAPPER: string;
     TABLE_ROW_CONTROLS_WRAPPER: string;
     TABLE_COLUMN_CONTROLS_DECORATIONS: string;
+    TABLE_RESIZER_CONTAINER: string;
 };
 export interface ToolbarMenuConfig {
     allowHeaderRow?: boolean;

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

@@ -28,7 +28,6 @@ export interface ComponentProps {
 }
 interface TableState {
     scroll: number;
-    tableContainerWidth: string;
     parentWidth?: number;
     isLoading: boolean;
     stickyHeader?: RowStickyState;
@@ -54,13 +53,11 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     onStickyState: (state: StickyPluginState) => void;
     prevTableState: any;
     render(): JSX.Element;
-    private getMarginLeft;
     private handleScroll;
     private handleTableResizing;
     private scaleTable;
     private handleAutoSize;
     private handleWindowResize;
-    private updateTableContainerWidth;
     private getParentNodeWidth;
     private updateParentWidth;
     private tableNodeLayoutSize;

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

@@ -0,0 +1,35 @@
+import React, { PropsWithChildren } from 'react';
+import { Node as PMNode } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { EditorContainerWidth } from '@atlaskit/editor-common/types';
+type InnerContainerProps = {
+    className: string;
+    marginLeft: number | undefined;
+    width: number | 'inherit';
+    node: PMNode;
+};
+export declare const InnerContainer: React.ForwardRefExoticComponent<InnerContainerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+type ResizableTableContainerProps = {
+    containerWidth: number;
+    lineLength: number;
+    node: PMNode;
+    className: string;
+    editorView: EditorView;
+    getPos: () => number;
+    tableRef: HTMLTableElement;
+};
+export declare const ResizableTableContainer: ({ children, className, node, lineLength, editorView, getPos, tableRef, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
+type TableContainerProps = {
+    node: PMNode;
+    className: string;
+    containerWidth: EditorContainerWidth;
+    isFullWidthModeEnabled: boolean | undefined;
+    isBreakoutEnabled: boolean | undefined;
+    editorView: EditorView;
+    getPos: () => number;
+    tableRef: HTMLTableElement;
+};
+export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isFullWidthModeEnabled, isBreakoutEnabled, editorView, getPos, tableRef, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { EditorView } from 'prosemirror-view';
+import { Node as PMNode } from 'prosemirror-model';
+interface TableResizerProps {
+    width: number;
+    updateWidth: (width: number) => void;
+    editorView: EditorView;
+    getPos: () => number;
+    node: PMNode;
+    tableRef: HTMLTableElement;
+}
+export declare const TableResizer: ({ children, width, updateWidth, editorView, getPos, node, tableRef, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export {};

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

@@ -1,10 +1,8 @@
 import { Node as PMNode } from 'prosemirror-model';
 import { Transaction } from 'prosemirror-state';
-import type { Command } from '@atlaskit/editor-common/types';
-import type { DomAtPos } from 'prosemirror-utils';
-import { ResizeState, ScaleOptions } from './utils';
 import { ContentNodeWithPos } from 'prosemirror-utils';
-export declare const scaleTable: (tableRef: HTMLTableElement | null | undefined, options: ScaleOptions, domAtPos: DomAtPos) => Command;
+import type { Command } from '@atlaskit/editor-common/types';
+import { ResizeState } from './utils';
 export declare const evenColumns: ({ resizeState, table, start, event, }: {
     resizeState: ResizeState;
     table: PMNode;

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

@@ -1,4 +1,3 @@
 export { createPlugin } from './plugin';
-export { scaleTable } from './commands';
 export { pluginKey } from './plugin-key';
 export { getPluginState } from './plugin-factory';

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

@@ -4,9 +4,9 @@ export { getColumnStateFromDOM, getFreeSpace, getCellsRefsInColumn, calculateCol
 export type { ColumnState } from './column-state';
 export { growColumn, shrinkColumn, reduceSpace } from './resize-logic';
 export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bulkColumnsResize, areColumnsEven, adjustColumnsWidths, } from './resize-state';
-export { tableLayoutToSize, getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, } from './misc';
+export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
-export { scale, scaleWithParent } from './scale-table';
+export { scale, scaleWithParent, scaleTable, previewScaleTable, } from './scale-table';
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
 export { resizeColumn } from './resize-column';

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

@@ -5,7 +5,6 @@ import { TableOptions } from '../../../nodeviews/types';
 import { Node as PMNode } from 'prosemirror-model';
 import { EditorState } from 'prosemirror-state';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-export declare const tableLayoutToSize: Record<string, number>;
 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<any>): false | PMNode<any> | null | undefined;

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

@@ -1,4 +1,5 @@
 import { Node as PMNode } from 'prosemirror-model';
+import { Transaction } from 'prosemirror-state';
 import type { DomAtPos } from 'prosemirror-utils';
 import { ResizeState } from '../utils/types';
 export interface ScaleOptions {
@@ -15,3 +16,5 @@ export interface ScaleOptions {
 export declare const scale: (tableRef: HTMLTableElement, options: ScaleOptions, domAtPos: DomAtPos) => ResizeState | undefined;
 export declare const scaleWithParent: (tableRef: HTMLTableElement, parentWidth: number, table: PMNode, start: number, domAtPos: DomAtPos) => ResizeState;
 export declare function scaleTableTo(state: ResizeState, maxSize: number): ResizeState;
+export declare const previewScaleTable: (tableRef: HTMLTableElement | null | undefined, options: ScaleOptions, domAtPos: DomAtPos) => void;
+export declare const scaleTable: (tableRef: HTMLTableElement | null | undefined, options: ScaleOptions, domAtPos: DomAtPos) => (tr: Transaction) => Transaction<any>;

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

@@ -298,6 +298,7 @@ export declare const TableCssClassName: {
     TABLE_HEADER_CELL_WRAPPER: string;
     TABLE_ROW_CONTROLS_WRAPPER: string;
     TABLE_COLUMN_CONTROLS_DECORATIONS: string;
+    TABLE_RESIZER_CONTAINER: string;
 };
 export interface ToolbarMenuConfig {
     allowHeaderRow?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "1.5.5",
+  "version": "1.6.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^25.8.0",
-    "@atlaskit/editor-common": "^74.6.0",
+    "@atlaskit/editor-common": "^74.7.0",
     "@atlaskit/editor-palette": "1.4.3",
     "@atlaskit/editor-plugin-analytics": "^0.0.2",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.2",
@@ -73,10 +73,10 @@
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/media-integration-test-helpers": "^3.0.0",
     "@atlaskit/synchrony-test-helpers": "^2.3.0",
-    "@atlaskit/util-data-test": "^17.8.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "^0.1.2",
     "@testing-library/react": "^12.1.5",
     "@types/prosemirror-history": "^1.0.1",
     "prosemirror-history": "^1.1.3",

package/src/__tests__/integration/sticky-header.ts

@@ -173,9 +173,12 @@ BrowserTestCase(
   },
 );
 
+// FIXME: This test was automatically skipped due to failure on 10/06/2023: https://product-fabric.atlassian.net/browse/ED-18761
 BrowserTestCase(
   'Sticky header should resize when the width of parent scroll container changes',
-  {},
+  {
+    skip: ['*'],
+  },
   async (client: any, testName: string) => {
     const page = await goToEditorTestingWDExample(
       client,

package/src/__tests__/unit/nodeviews/TableContainer.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
+import {
+  doc,
+  p,
+  table,
+  tr,
+  td,
+  tdEmpty,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { findTable } from '@atlaskit/editor-tables/utils';
+
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+import {
+  ResizableTableContainer,
+  TableContainer,
+} from '../../../plugins/table/nodeviews/TableContainer';
+import { TablePluginState } from '../../../plugins/table/types';
+import tablePlugin from '../../../plugins/table-plugin';
+import { TableAttributes } from '@atlaskit/adf-schema';
+import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+
+describe('table -> nodeviews -> TableContainer.tsx', () => {
+  const createEditor = createEditorFactory<TablePluginState>();
+  const editor = (
+    doc: DocBuilder,
+    featureFlags?: { [featureFlag: string]: string | boolean },
+  ) => {
+    return createEditor({
+      doc,
+      editorProps: {
+        allowTables: false,
+        dangerouslyAppendPlugins: {
+          __plugins: [tablePlugin()],
+        },
+        featureFlags,
+      },
+      pluginKey,
+    });
+  };
+  const createNode = (attrs?: TableAttributes) => {
+    const { editorView: view } = editor(
+      doc(p('text'), table(attrs)(tr(td()(p('{<>}text')), tdEmpty, tdEmpty))),
+    );
+    const resolvedTable = findTable(view.state.selection);
+
+    return resolvedTable!.node;
+  };
+
+  describe('show correct container for FF and options', () => {
+    const buildContainer = (allowResizing: boolean) => {
+      const node = createNode();
+
+      const { container } = render(
+        <TableContainer
+          containerWidth={{
+            width: 1800,
+            lineLength: 720,
+          }}
+          node={node}
+          isFullWidthModeEnabled={allowResizing}
+          isBreakoutEnabled={allowResizing}
+          className={''}
+          editorView={{} as any}
+          getPos={() => 1}
+          tableRef={{} as any}
+        />,
+      );
+
+      return container;
+    };
+
+    const buildTest = (
+      allowResizing: boolean,
+      expected?: { ffTrue?: boolean; ffFalse?: boolean },
+    ) => {
+      ffTest(
+        'platform.editor.custom-table-width',
+        async () => {
+          const container = buildContainer(allowResizing);
+
+          expect(!!container.querySelector('.resizer-item')).toBe(
+            expected?.ffTrue ?? true,
+          );
+        },
+        async () => {
+          const container = buildContainer(allowResizing);
+
+          expect(!!container.querySelector('.resizer-item')).toBe(
+            expected?.ffFalse ?? false,
+          );
+        },
+      );
+    };
+
+    describe('when allowResizing is true', () => {
+      buildTest(true);
+    });
+
+    describe('when allowResizing is false', () => {
+      buildTest(false, {
+        ffTrue: false,
+      });
+    });
+  });
+
+  describe('sets width and margin correctly for resizable container', () => {
+    const buildContainer = (attrs: TableAttributes) => {
+      const node = createNode(attrs);
+
+      const { container } = render(
+        <ResizableTableContainer
+          containerWidth={1800}
+          lineLength={720}
+          node={node}
+          className={''}
+          editorView={{} as any}
+          getPos={() => 1}
+          tableRef={{} as any}
+        />,
+      );
+
+      return container;
+    };
+
+    describe('when width attribute is not set', () => {
+      ffTest('platform.editor.custom-table-width', () => {
+        const container = buildContainer({ layout: 'wide' });
+
+        const style = window.getComputedStyle(container.firstChild as Element);
+        expect(style.width).toBe(`${akEditorWideLayoutWidth}px`);
+        expect(style.marginLeft).toBe('-120px');
+      });
+    });
+
+    describe('when width attribute is set', () => {
+      ffTest(
+        'platform.editor.custom-table-width',
+        () => {
+          const container = buildContainer({ width: 860 });
+
+          const style = window.getComputedStyle(
+            container.firstChild as Element,
+          );
+          expect(style.width).toBe(`860px`);
+          expect(style.marginLeft).toBe('-70px');
+        }, // fallback to layout because width can't be an attribute in schema
+        () => {
+          const container = buildContainer({ width: 860 });
+
+          const style = window.getComputedStyle(
+            container.firstChild as Element,
+          );
+          expect(style.width).toBe(`760px`);
+          expect(style.marginLeft).toBe('-20px');
+        },
+      );
+    });
+  });
+});

package/src/plugins/table/index.tsx

@@ -347,6 +347,26 @@ const tablesPlugin: NextEditorPlugin<
                 ? findStickyHeaderForTable(stickyHeadersState, tablePos)
                 : undefined;
 
+              const LayoutContent = getBooleanFF(
+                'platform.editor.custom-table-width',
+              ) ? null : isLayoutSupported(state) &&
+                options &&
+                options.breakoutEnabled ? (
+                <LayoutButton
+                  editorView={editorView}
+                  mountPoint={popupsMountPoint}
+                  boundariesElement={popupsBoundariesElement}
+                  scrollableElement={popupsScrollableElement}
+                  targetRef={tableWrapperTarget!}
+                  layout={layout}
+                  isResizing={
+                    !!resizingPluginState && !!resizingPluginState.dragging
+                  }
+                  stickyHeader={stickyHeader}
+                  editorAnalyticsAPI={options?.editorAnalyticsAPI}
+                />
+              ) : null;
+
               return (
                 <>
                   {targetCellPosition &&
@@ -416,24 +436,7 @@ const tablesPlugin: NextEditorPlugin<
                       editorAnalyticsAPI={options?.editorAnalyticsAPI}
                     />
                   )}
-                  {isLayoutSupported(state) &&
-                    options &&
-                    options.breakoutEnabled && (
-                      <LayoutButton
-                        editorView={editorView}
-                        mountPoint={popupsMountPoint}
-                        boundariesElement={popupsBoundariesElement}
-                        scrollableElement={popupsScrollableElement}
-                        targetRef={tableWrapperTarget!}
-                        layout={layout}
-                        isResizing={
-                          !!resizingPluginState &&
-                          !!resizingPluginState.dragging
-                        }
-                        stickyHeader={stickyHeader}
-                        editorAnalyticsAPI={options?.editorAnalyticsAPI}
-                      />
-                    )}
+                  {LayoutContent}
                 </>
               );
             }}