@atlaskit/editor-plugin-table 1.5.5 → 1.6.0

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

@@ -5,21 +5,16 @@ import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 import rafSchedule from 'raf-schd';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import {
-  calcTableWidth,
-  tableMarginSides,
-} from '@atlaskit/editor-common/styles';
+import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import {
   akEditorMobileBreakoutPoint,
   akEditorTableToolbarSize as tableToolbarSize,
 } from '@atlaskit/editor-shared-styles';
 
-import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
-import { parsePx } from '@atlaskit/editor-common/utils';
+import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -29,10 +24,10 @@ import {
   pluginKey as stickyHeadersPluginKey,
   StickyPluginState,
 } from '../pm-plugins/sticky-headers';
-import { scaleTable } from '../pm-plugins/table-resizing';
 import {
   getLayoutSize,
   insertColgroupFromNode as recreateResizeColsByNode,
+  scaleTable,
 } from '../pm-plugins/table-resizing/utils';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 
@@ -56,6 +51,7 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
+import { TableContainer } from './TableContainer';
 
 const isIE11 = browser.ie_version === 11;
 const NOOP = () => undefined;
@@ -81,7 +77,6 @@ export interface ComponentProps {
 
 interface TableState {
   scroll: number;
-  tableContainerWidth: string;
   parentWidth?: number;
   isLoading: boolean;
   stickyHeader?: RowStickyState;
@@ -93,7 +88,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
   state: TableState = {
     scroll: 0,
-    tableContainerWidth: 'inherit',
     parentWidth: undefined,
     isLoading: true,
     [ShadowEvent.SHOW_BEFORE_SHADOW]: false,
@@ -157,7 +151,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
        * Instead we use the resize event to only trigger updates when necessary.
        */
       window.addEventListener('resize', this.handleWindowResizeDebounced);
-      this.updateTableContainerWidth();
       this.handleTableResizingDebounced();
     }
 
@@ -324,13 +317,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       isHeaderColumnEnabled,
       tableActive,
       containerWidth,
+      options,
+      getPos,
     } = this.props;
-    const {
-      isLoading,
-      tableContainerWidth,
-      showBeforeShadow,
-      showAfterShadow,
-    } = this.state;
+    const { isLoading, showBeforeShadow, showAfterShadow } = this.state;
     const node = getNode();
     // doesn't work well with WithPluginState
     const { isInDanger, hoveredRows } = getPluginState(view.state);
@@ -390,17 +380,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         )
       : NOOP;
 
-    if (getBooleanFF('platform.editor.custom-table-width')) {
-      // new table experience code goes here
-      // return <Resizer>...
-    }
-
     return (
-      <div
-        style={{
-          width: tableContainerWidth,
-          marginLeft: this.getMarginLeft(tableContainerWidth),
-        }}
+      <TableContainer
         className={classnames(ClassName.TABLE_CONTAINER, {
           [ClassName.WITH_CONTROLS]: allowControls && tableActive,
           [ClassName.TABLE_STICKY]: this.state.stickyHeader && hasHeaderRow,
@@ -408,8 +389,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           [ClassName.TABLE_SELECTED]: isTableSelected(view.state.selection),
           'less-padding': containerWidth.width < akEditorMobileBreakoutPoint,
         })}
-        data-number-column={node.attrs.isNumberColumnEnabled}
-        data-layout={node.attrs.layout}
+        editorView={view}
+        getPos={getPos}
+        node={node}
+        tableRef={tableRef!}
+        containerWidth={containerWidth}
+        isFullWidthModeEnabled={options?.isFullWidthModeEnabled}
+        isBreakoutEnabled={options?.isBreakoutEnabled}
       >
         {stickyHeadersOptimization && (
           <div
@@ -492,24 +478,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             data-testid="sticky-sentinel-bottom"
           />
         )}
-      </div>
+      </TableContainer>
     );
   }
 
-  private getMarginLeft = (tableContainerCssWidth: string) => {
-    const { containerWidth } = this.props;
-    const { lineLength } = containerWidth;
-    let marginLeft;
-    if (tableContainerCssWidth !== 'inherit' && lineLength) {
-      const containerWidth = parsePx(tableContainerCssWidth);
-
-      if (containerWidth) {
-        marginLeft = (lineLength - containerWidth) / 2;
-      }
-    }
-    return marginLeft;
-  };
-
   private handleScroll = (event: Event) => {
     if (!this.wrapper || event.target !== this.wrapper) {
       return;
@@ -584,7 +556,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       this.updateParentWidth(parentWidth);
     }
 
-    this.updateTableContainerWidth();
     this.node = node;
     this.containerWidth = containerWidth;
     this.layoutSize = layoutSize;
@@ -598,6 +569,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     const node = getNode();
     const { state, dispatch } = view;
     const pos = getPos();
+
     if (!isValidPosition(pos, state)) {
       return;
     }
@@ -606,7 +578,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     this.scaleTableDebounced.cancel();
 
-    scaleTable(
+    const tr = scaleTable(
       this.table,
       {
         ...scaleOptions,
@@ -618,7 +590,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         ...options,
       },
       domAtPos,
-    )(state, dispatch);
+    )(state.tr);
+
+    dispatch(tr);
   };
 
   private handleAutoSize = () => {
@@ -656,36 +630,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     });
   };
 
-  private updateTableContainerWidth = () => {
-    const { getNode, containerWidth, options } = this.props;
-    const node = getNode();
-    if (options && options.isBreakoutEnabled === false) {
-      return;
-    }
-    const tableContainerWidth = calcTableWidth(
-      node.attrs.layout,
-      containerWidth.width,
-    );
-
-    if (this.state.tableContainerWidth === tableContainerWidth) {
-      return null;
-    }
-
-    this.setState((prevState: TableState) => {
-      if (
-        options &&
-        options.isBreakoutEnabled === false &&
-        prevState.tableContainerWidth !== 'inherit'
-      ) {
-        return { tableContainerWidth: 'inherit' };
-      }
-
-      return {
-        tableContainerWidth,
-      };
-    });
-  };
-
   private getParentNodeWidth = () => {
     const {
       getPos,
@@ -697,7 +641,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     if (!isValidPosition(pos, state)) {
       return;
     }
-
     const parentNodeWith = getParentNodeWidth(
       pos,
       state,

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

@@ -0,0 +1,200 @@
+import React, {
+  PropsWithChildren,
+  useCallback,
+  useRef,
+  forwardRef,
+} from 'react';
+import { Node as PMNode } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { EditorContainerWidth } from '@atlaskit/editor-common/types';
+import { calcTableWidth } from '@atlaskit/editor-common/styles';
+
+import { TableCssClassName as ClassName } from '../types';
+import { TableResizer } from './TableResizer';
+
+interface GetMarginLeftOpts {
+  lineLength: number;
+  tableWidth: number | 'inherit';
+}
+
+const getMarginLeft = ({ lineLength, tableWidth }: GetMarginLeftOpts) => {
+  let marginLeft;
+  if (tableWidth !== 'inherit' && lineLength) {
+    const containerWidth = tableWidth;
+
+    if (containerWidth) {
+      marginLeft = (lineLength - containerWidth) / 2;
+    }
+  }
+
+  return marginLeft;
+};
+
+type InnerContainerProps = {
+  className: string;
+  marginLeft: number | undefined;
+  width: number | 'inherit';
+  node: PMNode;
+};
+
+export const InnerContainer = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<InnerContainerProps>
+>(({ marginLeft, className, width, node, children }, ref) => {
+  return (
+    <div
+      ref={ref}
+      style={{
+        width,
+        marginLeft,
+      }}
+      className={className}
+      data-number-column={node.attrs.isNumberColumnEnabled}
+      data-layout={node.attrs.layout}
+      data-test-id="table-container"
+    >
+      {children}
+    </div>
+  );
+});
+
+type ResizableTableContainerProps = {
+  containerWidth: number;
+  lineLength: number;
+  node: PMNode;
+  className: string;
+  editorView: EditorView;
+  getPos: () => number;
+  tableRef: HTMLTableElement;
+};
+
+export const ResizableTableContainer = ({
+  children,
+  className,
+  node,
+  lineLength,
+  editorView,
+  getPos,
+  tableRef,
+}: PropsWithChildren<ResizableTableContainerProps>) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const innerContainerRef = useRef<HTMLDivElement | null>(null);
+
+  const updateWidth = useCallback(
+    (width: number) => {
+      if (!containerRef.current || !innerContainerRef.current) {
+        return;
+      }
+
+      innerContainerRef.current.style.width = `${width}px`;
+
+      const marginLeft = getMarginLeft({
+        lineLength,
+        tableWidth: width,
+      });
+
+      containerRef.current.style.width = `${width}px`;
+      containerRef.current.style.marginLeft = `${marginLeft}px`;
+    },
+    [lineLength],
+  );
+
+  const width = getTableContainerWidth(node);
+  const marginLeft = getMarginLeft({
+    lineLength,
+    tableWidth: width,
+  });
+
+  return (
+    <div
+      style={{ marginLeft, width }}
+      className={ClassName.TABLE_RESIZER_CONTAINER}
+      ref={containerRef}
+    >
+      <TableResizer
+        width={width}
+        updateWidth={updateWidth}
+        editorView={editorView}
+        getPos={getPos}
+        node={node}
+        tableRef={tableRef}
+      >
+        <InnerContainer
+          ref={innerContainerRef}
+          className={className}
+          node={node}
+          width={width}
+          marginLeft={0}
+        >
+          {children}
+        </InnerContainer>
+      </TableResizer>
+    </div>
+  );
+};
+
+type TableContainerProps = {
+  node: PMNode;
+  className: string;
+  containerWidth: EditorContainerWidth;
+  // TODO: passing through both isFullWidthModeEnabled and isBreakoutEnabled to support custom table widths and
+  //  exiting breakout behaviour. In the future these values will be removed and replaced
+  // with a single table plugin option - requires changes to editor-core
+  isFullWidthModeEnabled: boolean | undefined;
+  isBreakoutEnabled: boolean | undefined;
+  editorView: EditorView;
+  getPos: () => number;
+  tableRef: HTMLTableElement;
+};
+
+export const TableContainer = ({
+  children,
+  node,
+  className,
+  containerWidth: { lineLength, width: editorWidth },
+  isFullWidthModeEnabled,
+  isBreakoutEnabled,
+  editorView,
+  getPos,
+  tableRef,
+}: PropsWithChildren<TableContainerProps>) => {
+  if (
+    (isFullWidthModeEnabled || isBreakoutEnabled) &&
+    getBooleanFF('platform.editor.custom-table-width')
+  ) {
+    return (
+      <ResizableTableContainer
+        className={className}
+        node={node}
+        lineLength={lineLength!}
+        containerWidth={editorWidth!}
+        editorView={editorView}
+        getPos={getPos}
+        tableRef={tableRef}
+      >
+        {children}
+      </ResizableTableContainer>
+    );
+  }
+
+  const tableWidth = isBreakoutEnabled
+    ? calcTableWidth(node.attrs.layout, editorWidth)
+    : 'inherit';
+
+  return (
+    <InnerContainer
+      node={node}
+      className={className}
+      width={tableWidth}
+      marginLeft={getMarginLeft({
+        lineLength: lineLength!,
+        tableWidth,
+      })}
+    >
+      {children}
+    </InnerContainer>
+  );
+};

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

@@ -0,0 +1,88 @@
+import React, { PropsWithChildren } from 'react';
+import { EditorView } from 'prosemirror-view';
+import { Node as PMNode } from 'prosemirror-model';
+import rafSchd from 'raf-schd';
+
+import { ResizerNext } from '@atlaskit/editor-common/resizer';
+
+import {
+  scaleTable,
+  previewScaleTable,
+} from '../pm-plugins/table-resizing/utils';
+
+interface TableResizerProps {
+  width: number;
+  updateWidth: (width: number) => void;
+  editorView: EditorView;
+  getPos: () => number;
+  node: PMNode;
+  tableRef: HTMLTableElement;
+}
+
+const handles = { right: true };
+
+export const TableResizer = ({
+  children,
+  width,
+  updateWidth,
+  editorView,
+  getPos,
+  node,
+  tableRef,
+}: PropsWithChildren<TableResizerProps>) => {
+  return (
+    <ResizerNext
+      enable={handles}
+      width={width}
+      handleResizeStart={() => width}
+      handleResize={rafSchd((originalState, delta) => {
+        const newWidth = originalState.width + delta.width;
+
+        previewScaleTable(
+          tableRef,
+          {
+            node,
+            prevNode: node,
+            start: getPos() + 1,
+            parentWidth: newWidth,
+          },
+          editorView.domAtPos.bind(editorView),
+        );
+
+        updateWidth(newWidth);
+        return newWidth;
+      })}
+      handleResizeStop={(originalState, delta) => {
+        const newWidth = originalState.width + delta.width;
+
+        const { state, dispatch } = editorView;
+        const pos = getPos();
+
+        let tr = state.tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          width: newWidth,
+        });
+
+        const newNode = tr.doc.nodeAt(pos)!;
+        tr = scaleTable(
+          tableRef,
+          {
+            node: newNode,
+            prevNode: node,
+            start: getPos() + 1,
+            parentWidth: newWidth,
+          },
+          editorView.domAtPos.bind(editorView),
+        )(tr);
+
+        dispatch(tr);
+
+        updateWidth(newWidth);
+        return newWidth;
+      }}
+      resizeRatio={2}
+    >
+      {children}
+    </ResizerNext>
+  );
+};

package/src/plugins/table/pm-plugins/table-resizing/commands.ts

@@ -1,82 +1,13 @@
 import { Node as PMNode } from 'prosemirror-model';
 import { Transaction } from 'prosemirror-state';
+import { ContentNodeWithPos } from 'prosemirror-utils';
 
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
-
 import type { Command } from '@atlaskit/editor-common/types';
-import type { DomAtPos } from 'prosemirror-utils';
-import { updateColumnWidths } from '../../transforms';
 
 import { createCommand, getPluginState } from './plugin-factory';
-import {
-  evenAllColumnsWidths,
-  hasTableBeenResized,
-  isClickNear,
-  insertColgroupFromNode as recreateResizeColsByNode,
-  ResizeState,
-  scale,
-  ScaleOptions,
-  scaleWithParent,
-} from './utils';
-
-import { ContentNodeWithPos } from 'prosemirror-utils';
-
-// Scale the table to meet new requirements (col, layout change etc)
-export const scaleTable =
-  (
-    tableRef: HTMLTableElement | null | undefined,
-    options: ScaleOptions,
-    domAtPos: DomAtPos,
-  ): Command =>
-  (state, dispatch) => {
-    if (!tableRef) {
-      return false;
-    }
-
-    const { node, start, parentWidth, layoutChanged } = options;
-
-    // If a table has not been resized yet, columns should be auto.
-    if (hasTableBeenResized(node) === false) {
-      // If its not a re-sized table, we still want to re-create cols
-      // To force reflow of columns upon delete.
-      recreateResizeColsByNode(tableRef, node);
-      return false;
-    }
-
-    let resizeState;
-    if (parentWidth) {
-      resizeState = scaleWithParent(
-        tableRef,
-        parentWidth,
-        node,
-        start,
-        domAtPos,
-      );
-    } else {
-      resizeState = scale(tableRef, options, domAtPos);
-    }
-
-    if (resizeState) {
-      let { tr } = state;
-      tr = updateColumnWidths(resizeState, node, start)(tr);
-
-      if (tr.docChanged && dispatch) {
-        tr.setMeta('scrollIntoView', false);
-        // TODO: ED-8995
-        // We need to do this check to reduce the number of race conditions when working with tables.
-        // This metadata is been used in the sendTransaction function in the Collab plugin
-        /* Added !layoutChanged check here to solve unnecessary scroll bar after publish when click on breakout button multiple times and publish
-           scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
-           Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
-         */
-        !layoutChanged && tr.setMeta('scaleTable', true);
-        dispatch(tr);
-        return true;
-      }
-    }
-
-    return false;
-  };
+import { evenAllColumnsWidths, isClickNear, ResizeState } from './utils';
+import { updateColumnWidths } from '../../transforms';
 
 export const evenColumns =
   ({

package/src/plugins/table/pm-plugins/table-resizing/index.ts

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

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

@@ -23,7 +23,6 @@ export {
   adjustColumnsWidths,
 } from './resize-state';
 export {
-  tableLayoutToSize,
   getLayoutSize,
   getDefaultLayoutMaxWidth,
   pointsAtCell,
@@ -31,7 +30,12 @@ export {
   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/src/plugins/table/pm-plugins/table-resizing/utils/misc.ts

@@ -8,10 +8,8 @@ import {
   mapBreakpointToLayoutMaxWidth,
 } from '@atlaskit/editor-common/ui';
 import {
-  akEditorDefaultLayoutWidth,
   akEditorFullWidthLayoutWidth,
   akEditorGutterPadding,
-  akEditorWideLayoutWidth,
   akEditorTableNumberColumnWidth,
 } from '@atlaskit/editor-shared-styles';
 
@@ -20,13 +18,10 @@ 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';
-import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
-
-export const tableLayoutToSize: Record<string, number> = {
-  default: akEditorDefaultLayoutWidth,
-  wide: akEditorWideLayoutWidth,
-  'full-width': akEditorFullWidthLayoutWidth,
-};
+import {
+  getParentNodeWidth,
+  layoutToWidth,
+} from '@atlaskit/editor-common/node-width';
 
 // Translates named layouts in number values.
 export function getLayoutSize(
@@ -50,11 +45,11 @@ export function getLayoutSize(
     containerWidth,
     true,
   );
-  if (calculatedTableWidth.endsWith('px')) {
-    return parseInt(calculatedTableWidth, 10);
+  if (calculatedTableWidth !== 'inherit') {
+    return calculatedTableWidth;
   }
 
-  return tableLayoutToSize[tableLayout] || containerWidth;
+  return layoutToWidth[tableLayout] || containerWidth;
 }
 
 export function getDefaultLayoutMaxWidth(containerWidth?: number): number {