@atlaskit/editor-plugin-table 7.4.7 → 7.4.9

package/src/ui/FloatingDragMenu/index.tsx

@@ -13,7 +13,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { PluginConfig, TableDirection } from '../../types';
-import { dragMenuDropdownWidth } from '../consts';
+import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 
 import DragMenu from './DragMenu';
 
@@ -63,7 +63,7 @@ const FloatingDragMenu = ({
       ? document.querySelector('#drag-handle-button-row')
       : document.querySelector('#drag-handle-button-column');
 
-  const offset = direction === 'row' ? [-9, 6] : [0, -7];
+  const offset = direction === 'row' ? [-9, 0] : [0, -7];
 
   if (
     !targetHandleRef ||
@@ -72,7 +72,6 @@ const FloatingDragMenu = ({
     return null;
   }
 
-  // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return (
     <Popup
       alignX={direction === 'row' ? 'right' : undefined}
@@ -82,6 +81,7 @@ const FloatingDragMenu = ({
       boundariesElement={boundariesElement}
       scrollableElement={scrollableElement}
       fitWidth={dragMenuDropdownWidth}
+      fitHeight={tablePopupMenuFitHeight}
       // z-index value below is to ensure that this menu is above other floating menu
       // in table, but below floating dialogs like typeaheads, pickers, etc.
       // In sticky mode, we want to show the menu above the sticky header
@@ -105,6 +105,11 @@ const FloatingDragMenu = ({
         getEditorContainerWidth={getEditorContainerWidth}
         editorAnalyticsAPI={editorAnalyticsAPI}
         pluginConfig={pluginConfig}
+        fitWidth={dragMenuDropdownWidth}
+        fitHeight={tablePopupMenuFitHeight}
+        mountPoint={mountPoint}
+        boundariesElement={boundariesElement}
+        scrollableElement={scrollableElement}
       />
     </Popup>
   );

package/src/ui/consts.ts

@@ -125,6 +125,7 @@ export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;
 export const tableOverflowShadowWidth = 8;
 export const tableOverflowShadowWidthWide = 32;
+export const tablePopupMenuFitHeight = 188;
 
 export const dropTargetsZIndex = 14;
 

package/src/utils/create.ts

@@ -0,0 +1,32 @@
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
+import { createTable } from '@atlaskit/editor-tables/utils';
+
+import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
+
+export const createTableWithWidth =
+  (
+    isFullWidthModeEnabled?: boolean,
+    getEditorFeatureFlags?: GetEditorFeatureFlags,
+    createTableProps?: {
+      rowsCount?: number;
+      colsCount?: number;
+    },
+  ) =>
+  (schema: Schema) => {
+    const { tablePreserveWidth = false } = getEditorFeatureFlags
+      ? getEditorFeatureFlags()
+      : {};
+
+    if (tablePreserveWidth && isFullWidthModeEnabled) {
+      return createTable({
+        schema,
+        tableWidth: TABLE_MAX_WIDTH,
+        ...createTableProps,
+      });
+    }
+    return createTable({
+      schema,
+      ...createTableProps,
+    });
+  };

package/src/utils/index.ts

@@ -86,3 +86,4 @@ export {
   findDuplicatePosition,
   checkEdgeHasMergedCells,
 } from './merged-cells';
+export { createTableWithWidth } from './create';