@atlaskit/editor-plugin-table 7.5.2 → 7.5.4

package/src/ui/ColumnResizeWidget/index.tsx

@@ -1,6 +1,4 @@
 /** @jsx jsx */
-import React from 'react';
-
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 
@@ -15,11 +13,11 @@ type Props = {
   includeTooltip?: boolean;
 };
 
-export const ColumnResizeWidget: React.FC<Props> = ({
+export const ColumnResizeWidget = ({
   startIndex,
   endIndex,
   includeTooltip,
-}) => {
+}: Props) => {
   const { formatMessage } = useIntl();
 
   if (!includeTooltip) {

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx

@@ -13,13 +13,13 @@ export interface Props {
   marginTop?: number;
 }
 
-export const ColumnDropTarget: React.FC<Props> = ({
+export const ColumnDropTarget = ({
   index,
   localId,
   width,
   height,
   marginTop,
-}) => {
+}: Props) => {
   const dropTargetRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx

@@ -13,14 +13,14 @@ export interface Props {
   getScrollOffset?: () => number;
 }
 
-export const ColumnDropTargets: React.FC<Props> = ({
+export const ColumnDropTargets = ({
   tableRef,
   tableHeight,
   localId,
   colWidths,
   isHeaderSticky,
   getScrollOffset,
-}) => {
+}: Props) => {
   const dropTargetRef = useRef<HTMLDivElement>(null);
 
   if (!tableRef) {

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -40,7 +40,7 @@ export interface Props {
   getScrollOffset?: () => number;
 }
 
-export const TableFloatingColumnControls: React.FC<Props> = ({
+export const TableFloatingColumnControls = ({
   editorView,
   tableRef,
   getNode,
@@ -55,7 +55,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   tableContainerWidth,
   isNumberColumnEnabled,
   getScrollOffset,
-}) => {
+}: Props) => {
   const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
     { width: 0, height: 0 },
   );

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;
 }
 

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
  */