@atlaskit/editor-plugin-table 7.5.3 → 7.5.5

package/src/commands/insert.ts

@@ -11,12 +11,7 @@ import {
   EVENT_TYPE,
   TABLE_OVERFLOW_CHANGE_TRIGGER,
 } from '@atlaskit/editor-common/analytics';
-import type {
-  Command,
-  EditorCommand,
-  GetEditorContainerWidth,
-  GetEditorFeatureFlags,
-} from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
@@ -50,10 +45,7 @@ function addColumnAtCustomStep(column: number) {
   };
 }
 
-export function addColumnAt(
-  getEditorContainerWidth: GetEditorContainerWidth,
-  tablePreserveWidth = false,
-) {
+export function addColumnAt(isTableScalingEnabled = false) {
   return (
     column: number,
     allowAddColumnCustomStep: boolean = false,
@@ -69,7 +61,9 @@ export function addColumnAt(
       const table = findTable(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = rescaleColumns(tablePreserveWidth)(table, view)(updatedTr);
+        updatedTr = rescaleColumns(isTableScalingEnabled)(table, view)(
+          updatedTr,
+        );
       }
 
       if (
@@ -94,10 +88,7 @@ export function addColumnAt(
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
 export const addColumnBefore =
-  (
-    getEditorContainerWidth: GetEditorContainerWidth,
-    tablePreserveWidth = false,
-  ): Command =>
+  (isTableScalingEnabled = false): Command =>
   (state, dispatch, view) => {
     const table = findTable(state.selection);
     if (!table) {
@@ -106,7 +97,7 @@ export const addColumnBefore =
     if (dispatch) {
       let rect = selectedRect(state);
       dispatch(
-        addColumnAt(getEditorContainerWidth, tablePreserveWidth)(
+        addColumnAt(isTableScalingEnabled)(
           rect.left,
           getAllowAddColumnCustomStep(state),
           view,
@@ -119,7 +110,7 @@ export const addColumnBefore =
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column after the column with the selection.
 export const addColumnAfter =
-  (getEditorContainerWidth: GetEditorContainerWidth): Command =>
+  (isTableScalingEnabled?: boolean): Command =>
   (state, dispatch, view) => {
     const table = findTable(state.selection);
     if (!table) {
@@ -128,7 +119,7 @@ export const addColumnAfter =
     if (dispatch) {
       let rect = selectedRect(state);
       dispatch(
-        addColumnAt(getEditorContainerWidth)(
+        addColumnAt(isTableScalingEnabled)(
           rect.right,
           getAllowAddColumnCustomStep(state),
           view,
@@ -139,13 +130,10 @@ export const addColumnAfter =
   };
 
 export const insertColumn =
-  (
-    getEditorContainerWidth: GetEditorContainerWidth,
-    tablePreserveWidth = false,
-  ) =>
+  (isTableScalingEnabled = false) =>
   (column: number): Command =>
   (state, dispatch, view) => {
-    let tr = addColumnAt(getEditorContainerWidth, tablePreserveWidth)(
+    let tr = addColumnAt(isTableScalingEnabled)(
       column,
       getAllowAddColumnCustomStep(state),
       view,
@@ -213,13 +201,13 @@ export const insertRow =
 
 export const createTable =
   (
+    isTableScalingEnabled?: boolean,
     isFullWidthModeEnabled?: boolean,
-    getEditorFeatureFlags?: GetEditorFeatureFlags,
   ): Command =>
   (state, dispatch) => {
     const table = createTableWithWidth(
+      isTableScalingEnabled,
       isFullWidthModeEnabled,
-      getEditorFeatureFlags,
     )(state.schema);
 
     if (dispatch) {
@@ -231,7 +219,7 @@ export const createTable =
 export const insertTableWithSize =
   (
     isFullWidthModeEnabled?: boolean,
-    getEditorFeatureFlags?: GetEditorFeatureFlags,
+    isTableScalingEnabled?: boolean,
     editorAnalyticsAPI?: EditorAnalyticsAPI,
   ) =>
   (
@@ -241,8 +229,8 @@ export const insertTableWithSize =
   ): EditorCommand => {
     return ({ tr }) => {
       const tableNode = createTableWithWidth(
+        isTableScalingEnabled,
         isFullWidthModeEnabled,
-        getEditorFeatureFlags,
         {
           rowsCount: rowsCount,
           colsCount: colsCount,

package/src/commands-with-analytics.ts

@@ -257,7 +257,7 @@ export const changeColumnWidthByStepWithAnalytics =
   (
     stepSize: number,
     getEditorContainerWidth: GetEditorContainerWidth,
-    tablePreserveWidth: boolean,
+    isTableScalingEnabled: boolean,
     inputMethod: INPUT_METHOD.SHORTCUT,
   ) =>
     withEditorAnalyticsAPI((state) => {
@@ -286,15 +286,14 @@ export const changeColumnWidthByStepWithAnalytics =
       changeColumnWidthByStep(
         stepSize,
         getEditorContainerWidth,
-        tablePreserveWidth,
+        isTableScalingEnabled,
       ),
     );
 
 export const insertColumnWithAnalytics =
   (
-    getEditorContainerWidth: GetEditorContainerWidth,
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-    tablePreserveWidth = false,
+    isTableScalingEnabled = false,
   ) =>
   (
     inputMethod:
@@ -321,9 +320,7 @@ export const insertColumnWithAnalytics =
         },
         eventType: EVENT_TYPE.TRACK,
       };
-    })(editorAnalyticsAPI)(
-      insertColumn(getEditorContainerWidth, tablePreserveWidth)(position),
-    );
+    })(editorAnalyticsAPI)(insertColumn(isTableScalingEnabled)(position));
 
 export const deleteRowsWithAnalytics =
   (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
@@ -364,7 +361,7 @@ export const deleteRowsWithAnalytics =
 export const deleteColumnsWithAnalytics =
   (
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-    tablePreserveWidth = false,
+    isTableScalingEnabled = false,
   ) =>
   (
     inputMethod:
@@ -392,7 +389,7 @@ export const deleteColumnsWithAnalytics =
         },
         eventType: EVENT_TYPE.TRACK,
       };
-    })(editorAnalyticsAPI)(deleteColumnsCommand(rect, tablePreserveWidth));
+    })(editorAnalyticsAPI)(deleteColumnsCommand(rect, isTableScalingEnabled));
 
 export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut =
   (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null): Command =>

package/src/event-handlers.ts

@@ -538,7 +538,7 @@ export const handleCut = (
   newState: EditorState,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
   editorView?: EditorView,
-  tablePreserveWidth = false,
+  isTableScalingEnabled = false,
 ): Transaction => {
   const oldSelection = oldState.tr.selection;
   let { tr } = newState;
@@ -595,7 +595,7 @@ export const handleCut = (
               rect,
               getAllowAddColumnCustomStep(oldState),
               editorView,
-              tablePreserveWidth,
+              isTableScalingEnabled,
             )(tr);
           }
         }

package/src/nodeviews/TableComponent.tsx

@@ -22,11 +22,7 @@ import type {
   EditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
-import {
-  browser,
-  calcTableColumnWidths,
-  isValidPosition,
-} from '@atlaskit/editor-common/utils';
+import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
@@ -59,6 +55,7 @@ import {
   updateColgroup,
 } from '../pm-plugins/table-resizing/utils';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
+import { TABLE_EDITOR_MARGIN } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import type { PluginInjectionAPI } from '../types';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
@@ -102,13 +99,13 @@ export interface ComponentProps {
   isHeaderColumnEnabled: boolean;
   isMediaFullscreen?: boolean;
   isDragAndDropEnabled?: boolean;
+  isTableScalingEnabled?: boolean;
   tableActive: boolean;
   ordering: TableColumnOrdering;
   isResizing?: boolean;
   getEditorFeatureFlags: GetEditorFeatureFlags;
   dispatchAnalyticsEvent: DispatchAnalyticsEvent;
   pluginInjectionApi?: PluginInjectionAPI;
-  tableRef?: HTMLElement | undefined;
 }
 
 interface TableState {
@@ -142,8 +139,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
   private dragAndDropCleanupFn?: CleanupFn;
 
-  private tableColumnWidths?: number[];
-
   constructor(props: ComponentProps) {
     super(props);
     const { options, containerWidth, getNode } = props;
@@ -182,8 +177,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       isDragAndDropEnabled,
       getNode,
       getEditorFeatureFlags,
+      isTableScalingEnabled,
     } = this.props;
 
+    if (isTableScalingEnabled) {
+      this.handleColgroupUpdates(true);
+    }
+
     if (allowColumnResizing && this.wrapper && !isIE11) {
       this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
         passive: true,
@@ -288,20 +288,17 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     }
   }
 
-  handleColgroupUpdates() {
-    const { getNode, containerWidth, isResizing, view, getPos, tableRef } =
-      this.props;
+  handleColgroupUpdates(force = false) {
+    const { getNode, containerWidth, isResizing, view, getPos } = this.props;
 
-    if (!tableRef) {
+    if (!this.table) {
       return;
     }
 
-    const TABLE_MARGIN = 76;
-
     // Remove any widths styles after resizing preview is completed
-    tableRef.style.width = '';
+    this.table.style.width = '';
 
-    const tableRenderWidth = containerWidth.width - TABLE_MARGIN;
+    const tableRenderWidth = containerWidth.width - TABLE_EDITOR_MARGIN;
     const tableNode = getNode();
     const start = getPos() || 0;
     const depth = view.state.doc.resolve(start).depth;
@@ -312,39 +309,25 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     }
 
     const { width: tableNodeWidth } = tableNode.attrs;
-    const tableColumnWidths = calcTableColumnWidths(tableNode);
     const shouldTableScale = tableRenderWidth < tableNodeWidth;
-    let isTableColumnWidthsSame = false;
-    if (this.tableColumnWidths) {
-      isTableColumnWidthsSame = tableColumnWidths?.every(
-        (width, index) => width === this.tableColumnWidths![index],
-      );
-    }
+
     const { width: containerWidthValue } = containerWidth;
     const isWidthChanged = this.containerWidth?.width !== containerWidthValue;
 
-    if (
-      shouldTableScale &&
-      !isResizing &&
-      (!isTableColumnWidthsSame || isWidthChanged)
-    ) {
+    if (force || (shouldTableScale && !isResizing && isWidthChanged)) {
       const resizeState = getResizeState({
         minWidth: COLUMN_MIN_WIDTH,
         maxSize: tableRenderWidth,
         table: tableNode,
-        tableRef: this.table as HTMLTableElement,
+        tableRef: this.table,
         start,
         domAtPos: view.domAtPos,
-        tablePreserveWidth: true,
-      });
-
-      requestAnimationFrame(() => {
-        updateColgroup(resizeState, this.table!, true);
+        isTableScalingEnabled: true,
       });
 
-      this.tableColumnWidths = tableColumnWidths;
-      this.containerWidth = containerWidth;
+      updateColgroup(resizeState, this.table!, tableNode, true);
     }
+    this.containerWidth = containerWidth;
   }
 
   componentDidUpdate(_: any, prevState: TableState) {
@@ -355,13 +338,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       allowColumnResizing,
       isResizing,
       options,
-      getEditorFeatureFlags,
+      isTableScalingEnabled,
     } = this.props;
     const { isInDanger } = getPluginState(view.state);
-    const { tablePreserveWidth = false } = getEditorFeatureFlags();
     const table = findTable(view.state.selection);
 
-    if (tablePreserveWidth) {
+    if (isTableScalingEnabled) {
       this.handleColgroupUpdates();
     }
 
@@ -424,7 +406,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             isResizing);
 
         if (shouldRecreateResizeCols) {
-          insertColgroupFromNode(this.table, currentTable, tablePreserveWidth);
+          insertColgroupFromNode(
+            this.table,
+            currentTable,
+            isTableScalingEnabled,
+          );
         }
 
         updateControls()(view.state);
@@ -517,6 +503,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       pluginInjectionApi,
       isDragAndDropEnabled,
       getEditorFeatureFlags,
+      isTableScalingEnabled,
     } = this.props;
 
     const { showBeforeShadow, showAfterShadow } = this.state;
@@ -610,7 +597,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           shadowPadding +
           2;
 
-    const { stickyScrollbar, tablePreserveWidth } = getEditorFeatureFlags();
+    const { stickyScrollbar } = getEditorFeatureFlags();
 
     return (
       <TableContainer
@@ -630,7 +617,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         pluginInjectionApi={pluginInjectionApi}
         isTableResizingEnabled={options?.isTableResizingEnabled}
         isResizing={isResizing}
-        tablePreserveWidth={tablePreserveWidth}
+        isTableScalingEnabled={isTableScalingEnabled}
       >
         <div
           className={ClassName.TABLE_STICKY_SENTINEL_TOP}
@@ -860,7 +847,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       getPos,
       containerWidth,
       options,
-      getEditorFeatureFlags,
+      isTableScalingEnabled,
     } = this.props;
     const node = getNode();
     const { state, dispatch } = view;
@@ -874,8 +861,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     this.scaleTableDebounced.cancel();
 
-    const { tablePreserveWidth = false } = getEditorFeatureFlags();
-
     const tr = scaleTable(
       this.table,
       {
@@ -888,7 +873,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         ...options,
       },
       domAtPos,
-      tablePreserveWidth,
+      isTableScalingEnabled,
     )(state.tr);
 
     dispatch(tr);

package/src/nodeviews/TableContainer.tsx

@@ -12,6 +12,8 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
   akEditorDefaultLayoutWidth,
+  akEditorGutterPadding,
+  akEditorMediaResizeHandlerPaddingWide,
   akEditorMobileBreakoutPoint,
 } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -75,7 +77,7 @@ type ResizableTableContainerProps = {
   tableRef: HTMLTableElement;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
-  tablePreserveWidth?: boolean;
+  isTableScalingEnabled?: boolean;
 };
 
 export const ResizableTableContainer = React.memo(
@@ -89,7 +91,7 @@ export const ResizableTableContainer = React.memo(
     tableRef,
     isResizing,
     pluginInjectionApi,
-    tablePreserveWidth,
+    isTableScalingEnabled,
   }: PropsWithChildren<ResizableTableContainerProps>) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
@@ -189,7 +191,14 @@ export const ResizableTableContainer = React.memo(
 
     const tableWidth = getTableContainerWidth(node);
     // 76 is currently an accepted padding value considering the spacing for resizer handle
-    const responsiveContainerWidth = containerWidth - 76;
+    const responsiveContainerWidth = isTableScalingEnabled
+      ? containerWidth -
+        akEditorGutterPadding * 2 -
+        akEditorMediaResizeHandlerPaddingWide / 2
+      : containerWidth -
+        akEditorGutterPadding * 2 -
+        akEditorMediaResizeHandlerPaddingWide;
+
     const width = Math.min(tableWidth, responsiveContainerWidth);
 
     if (!isResizing) {
@@ -209,7 +218,7 @@ export const ResizableTableContainer = React.memo(
       displayGuideline,
       attachAnalyticsEvent,
       displayGapCursor,
-      tablePreserveWidth,
+      isTableScalingEnabled,
     };
 
     if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
@@ -257,7 +266,7 @@ type TableContainerProps = {
   isNested: boolean;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
-  tablePreserveWidth?: boolean;
+  isTableScalingEnabled?: boolean;
 };
 
 export const TableContainer = ({
@@ -273,7 +282,7 @@ export const TableContainer = ({
   isNested,
   isResizing,
   pluginInjectionApi,
-  tablePreserveWidth,
+  isTableScalingEnabled,
 }: PropsWithChildren<TableContainerProps>) => {
   if (isTableResizingEnabled && !isNested) {
     return (
@@ -286,7 +295,7 @@ export const TableContainer = ({
         tableRef={tableRef}
         isResizing={isResizing}
         pluginInjectionApi={pluginInjectionApi}
-        tablePreserveWidth={tablePreserveWidth}
+        isTableScalingEnabled={isTableScalingEnabled}
       >
         {children}
       </ResizableTableContainer>

package/src/nodeviews/TableResizer.tsx

@@ -51,8 +51,15 @@ import {
   generateResizeFrameRatePayloads,
   useMeasureFramerate,
 } from '../utils/analytics';
-import { defaultGuidelines } from '../utils/guidelines';
-import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
+import {
+  defaultGuidelines,
+  defaultGuidelinesForPreserveTable,
+} from '../utils/guidelines';
+import {
+  defaultSnappingWidths,
+  defaultTablePreserveSnappingWidths,
+  findClosestSnap,
+} from '../utils/snapping';
 
 interface TableResizerProps {
   width: number;
@@ -68,7 +75,7 @@ interface TableResizerProps {
     payload: TableEventPayload,
   ) => ((tr: Transaction) => boolean) | undefined;
   displayGapCursor: (toggle: boolean) => boolean;
-  tablePreserveWidth?: boolean;
+  isTableScalingEnabled?: boolean;
 }
 
 export interface TableResizerImprovementProps extends TableResizerProps {
@@ -163,7 +170,7 @@ export const TableResizer = ({
   displayGuideline,
   attachAnalyticsEvent,
   displayGapCursor,
-  tablePreserveWidth,
+  isTableScalingEnabled,
 }: PropsWithChildren<TableResizerImprovementProps>) => {
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
@@ -211,9 +218,12 @@ export const TableResizer = ({
       if (gap !== currentGap.current) {
         currentGap.current = gap;
         const visibleGuidelines = getVisibleGuidelines(
-          defaultGuidelines,
+          isTableScalingEnabled
+            ? defaultGuidelinesForPreserveTable(containerWidth)
+            : defaultGuidelines,
           containerWidth,
         );
+
         displayGuideline(
           getGuidelinesWithHighlights(
             gap,
@@ -224,17 +234,19 @@ export const TableResizer = ({
         );
       }
     },
-    [displayGuideline, containerWidth],
+    [isTableScalingEnabled, containerWidth, displayGuideline],
   );
 
   const guidelineSnaps = useMemo(
     () =>
       snappingEnabled
         ? {
-            x: defaultSnappingWidths,
+            x: isTableScalingEnabled
+              ? defaultTablePreserveSnappingWidths(containerWidth)
+              : defaultSnappingWidths,
           }
         : undefined,
-    [snappingEnabled],
+    [snappingEnabled, isTableScalingEnabled, containerWidth],
   );
 
   useEffect(() => {
@@ -270,9 +282,12 @@ export const TableResizer = ({
     dispatch(tr);
 
     const visibleGuidelines = getVisibleGuidelines(
-      defaultGuidelines,
+      isTableScalingEnabled
+        ? defaultGuidelinesForPreserveTable(containerWidth)
+        : defaultGuidelines,
       containerWidth,
     );
+
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (
       getBooleanFF('platform.editor.resizing-table-height-improvement') &&
@@ -281,12 +296,13 @@ export const TableResizer = ({
       onResizeStart();
     }
   }, [
+    startMeasure,
+    editorView,
     displayGapCursor,
+    isTableScalingEnabled,
+    containerWidth,
     displayGuideline,
-    editorView,
-    startMeasure,
     onResizeStart,
-    containerWidth,
   ]);
 
   const handleResize = useCallback(
@@ -312,32 +328,36 @@ export const TableResizer = ({
           parentWidth: newWidth,
         },
         editorView.domAtPos.bind(editorView),
-        tablePreserveWidth,
+        isTableScalingEnabled,
       );
 
       updateActiveGuidelines(
         findClosestSnap(
           newWidth,
-          defaultSnappingWidths,
-          defaultGuidelines,
+          isTableScalingEnabled
+            ? defaultTablePreserveSnappingWidths(containerWidth)
+            : defaultSnappingWidths,
+          isTableScalingEnabled
+            ? defaultGuidelinesForPreserveTable(containerWidth)
+            : defaultGuidelines,
           TABLE_HIGHLIGHT_GAP,
           TABLE_HIGHLIGHT_TOLERANCE,
         ),
       );
-
       updateWidth(newWidth);
 
       return newWidth;
     },
     [
-      editorView,
-      getPos,
-      node,
+      countFrames,
+      isTableScalingEnabled,
       tableRef,
-      updateWidth,
+      node,
+      editorView,
       updateActiveGuidelines,
-      countFrames,
-      tablePreserveWidth,
+      containerWidth,
+      updateWidth,
+      getPos,
     ],
   );
 
@@ -380,7 +400,7 @@ export const TableResizer = ({
             parentWidth: newWidth,
           },
           editorView.domAtPos.bind(editorView),
-          tablePreserveWidth,
+          isTableScalingEnabled,
         )(tr);
 
         const scaledNode = tr.doc.nodeAt(pos)!;
@@ -421,7 +441,7 @@ export const TableResizer = ({
       attachAnalyticsEvent,
       endMeasure,
       onResizeStop,
-      tablePreserveWidth,
+      isTableScalingEnabled,
     ],
   );