@atlaskit/editor-plugin-table 7.5.3 → 7.5.5

package/src/utils/drag-menu.ts

@@ -141,7 +141,7 @@ export type DragMenuOptionIdType =
 
 export interface DragMenuConfig extends DropdownOptionT<Command> {
   id: DragMenuOptionIdType;
-  icon?: React.ComponentType<IconProps>;
+  icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
   keymap?: string;
 }
 
@@ -159,7 +159,7 @@ export const getDragMenuConfig = (
   selectionRect?: Rect,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
   isHeaderRowRequired?: boolean,
-  tablePreserveWidth = false,
+  isTableScalingEnabled = false,
 ): DragMenuConfig[] => {
   const addOptions =
     direction === 'row'
@@ -294,15 +294,10 @@ export const getDragMenuConfig = (
             },
           )(state, dispatch);
         } else {
-          insertColumnWithAnalytics(
-            getEditorContainerWidth,
-            editorAnalyticsAPI,
-            tablePreserveWidth,
-          )(INPUT_METHOD.TABLE_CONTEXT_MENU, (index ?? 0) + offset)(
-            state,
-            dispatch,
-            editorView,
-          );
+          insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(
+            INPUT_METHOD.TABLE_CONTEXT_MENU,
+            (index ?? 0) + offset,
+          )(state, dispatch, editorView);
         }
         return true;
       },
@@ -321,7 +316,7 @@ export const getDragMenuConfig = (
                 state,
                 editorView.domAtPos.bind(editorView),
                 getEditorContainerWidth,
-                tablePreserveWidth,
+                isTableScalingEnabled,
               );
 
               if (newResizeState) {
@@ -362,7 +357,7 @@ export const getDragMenuConfig = (
             !!isHeaderRowRequired,
           )(state, dispatch);
         } else {
-          deleteColumnsWithAnalytics(editorAnalyticsAPI, tablePreserveWidth)(
+          deleteColumnsWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(
             INPUT_METHOD.TABLE_CONTEXT_MENU,
             selectionRect ?? defaultSelectionRect,
           )(state, dispatch, editorView);

package/src/utils/guidelines.ts

@@ -1,7 +1,10 @@
 import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 
-import { calculateDefaultSnappings } from './snapping';
+import {
+  calculateDefaultSnappings,
+  calculateDefaultTablePreserveSnappings,
+} from './snapping';
 
 // NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
 // If we don't do this then the guidelines will not align correctly to the edge of the table
@@ -9,3 +12,11 @@ export const defaultGuidelines = createFixedGuidelinesFromLengths([
   0,
   ...calculateDefaultSnappings(-1),
 ]) as GuidelineConfig[];
+
+export const defaultGuidelinesForPreserveTable = (
+  editorContainerWidth: number,
+) =>
+  createFixedGuidelinesFromLengths([
+    0,
+    ...calculateDefaultTablePreserveSnappings(-1, editorContainerWidth),
+  ]) as GuidelineConfig[];

package/src/utils/snapping.ts

@@ -4,6 +4,8 @@ import {
   akEditorCalculatedWideLayoutWidth,
   akEditorDefaultLayoutWidth,
   akEditorFullWidthLayoutWidth,
+  akEditorGutterPadding,
+  akEditorMediaResizeHandlerPaddingWide,
 } from '@atlaskit/editor-shared-styles';
 
 const numberOfLanesInDefaultLayoutWidth = 12;
@@ -23,8 +25,42 @@ export const calculateDefaultSnappings = (lengthOffset: number = 0) => [
   akEditorFullWidthLayoutWidth + lengthOffset,
 ];
 
+// FF TablePreserve for calculateDefaultSnappings
+export const calculateDefaultTablePreserveSnappings = (
+  lengthOffset: number = 0,
+  editorContainerWith: number = akEditorFullWidthLayoutWidth,
+) => {
+  const dynamicFullWidthLine =
+    editorContainerWith - akEditorGutterPadding * 2 >=
+    akEditorFullWidthLayoutWidth
+      ? akEditorFullWidthLayoutWidth
+      : editorContainerWith -
+        akEditorGutterPadding * 2 -
+        akEditorMediaResizeHandlerPaddingWide;
+
+  return [
+    ...calculateSubSnappingWidths(
+      numberOfLanesInDefaultLayoutWidth,
+      akEditorDefaultLayoutWidth + lengthOffset,
+    ),
+    akEditorDefaultLayoutWidth + lengthOffset,
+    akEditorCalculatedWideLayoutWidth + lengthOffset,
+    dynamicFullWidthLine - lengthOffset,
+  ];
+};
+
 export const defaultSnappingWidths = calculateDefaultSnappings();
 
+// FF TablePreserve for defaultSnappingWidths
+export const defaultTablePreserveSnappingWidths = (
+  editorContainerWidth: number,
+) => {
+  return editorContainerWidth - akEditorGutterPadding * 2 >
+    akEditorFullWidthLayoutWidth
+    ? calculateDefaultSnappings()
+    : calculateDefaultTablePreserveSnappings(0, editorContainerWidth);
+};
+
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */