@atlaskit/editor-plugin-table 7.4.8 → 7.5.0

package/src/transforms/delete-columns.ts

@@ -249,7 +249,12 @@ function fixRowSpans(table: PMNode): PMNode | null {
 }
 
 export const deleteColumns =
-  (rect: Rect, allowCustomStep: boolean, view?: EditorView) =>
+  (
+    rect: Rect,
+    allowCustomStep: boolean,
+    view?: EditorView,
+    tablePreserveWidth = false,
+  ) =>
   (tr: Transaction) => {
     let updatedTr = tr;
     updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
@@ -264,7 +269,7 @@ export const deleteColumns =
     const table = findTable(updatedTr.selection);
 
     if (table) {
-      updatedTr = rescaleColumns()(table, view)(updatedTr);
+      updatedTr = rescaleColumns(tablePreserveWidth)(table, view)(updatedTr);
     }
     return updatedTr;
   };

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -23,7 +23,10 @@ import {
 } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 import {
   backgroundPaletteTooltipMessages,
   cellBackgroundColorPalette,
@@ -99,6 +102,7 @@ export interface Props {
   offset?: Array<number>;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
   getEditorContainerWidth: GetEditorContainerWidth;
+  getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 
 export interface State {
@@ -464,11 +468,14 @@ export class ContextualMenu extends Component<
       (!isDragAndDropEnabled ||
         !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))
     ) {
+      const { tablePreserveWidth = false } =
+        this.props.getEditorFeatureFlags?.() || {};
       const newResizeState = getNewResizeStateFromSelectedColumns(
         selectionRect,
         editorView.state,
         editorView.domAtPos.bind(editorView),
         getEditorContainerWidth,
+        tablePreserveWidth,
       );
 
       const wouldChange = newResizeState?.changed ?? false;
@@ -583,10 +590,12 @@ export class ContextualMenu extends Component<
       selectionRect,
       editorAnalyticsAPI,
       getEditorContainerWidth,
+      getEditorFeatureFlags,
     } = this.props;
     // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
     const { state, dispatch } = editorView;
     const { targetCellPosition } = getPluginState(state);
+    const { tablePreserveWidth = false } = getEditorFeatureFlags?.() || {};
 
     switch (item.value.name) {
       case 'sort_column_desc':
@@ -626,6 +635,7 @@ export class ContextualMenu extends Component<
             state,
             editorView.domAtPos.bind(editorView),
             getEditorContainerWidth,
+            tablePreserveWidth,
           );
 
         if (newResizeStateWithAnalytics) {
@@ -644,10 +654,15 @@ export class ContextualMenu extends Component<
         this.toggleOpen();
         break;
       case 'insert_column':
-        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(
-          INPUT_METHOD.CONTEXT_MENU,
-          selectionRect.right,
-        )(state, dispatch, editorView);
+        insertColumnWithAnalytics(
+          getEditorContainerWidth,
+          editorAnalyticsAPI,
+          tablePreserveWidth,
+        )(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(
+          state,
+          dispatch,
+          editorView,
+        );
         this.toggleOpen();
         break;
       case 'insert_row':

package/src/ui/FloatingContextualMenu/index.tsx

@@ -25,6 +25,7 @@ import {
   contextualMenuDropdownWidth,
   contextualMenuDropdownWidthDnD,
   contextualMenuTriggerSize,
+  tablePopupMenuFitHeight,
 } from '../consts';
 
 import ContextualMenu from './ContextualMenu';
@@ -52,6 +53,7 @@ const FloatingContextualMenu = ({
   pluginConfig,
   editorAnalyticsAPI,
   getEditorContainerWidth,
+  getEditorFeatureFlags,
 }: Props) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const { targetCellPosition, isDragAndDropEnabled } = getPluginState(
@@ -91,7 +93,7 @@ const FloatingContextualMenu = ({
       mountTo={mountPoint}
       boundariesElement={boundariesElement}
       scrollableElement={scrollableElement}
-      fitHeight={188}
+      fitHeight={tablePopupMenuFitHeight}
       fitWidth={
         isDragAndDropEnabled
           ? contextualMenuDropdownWidthDnD
@@ -121,6 +123,7 @@ const FloatingContextualMenu = ({
           boundariesElement={boundariesElement}
           editorAnalyticsAPI={editorAnalyticsAPI}
           getEditorContainerWidth={getEditorContainerWidth}
+          getEditorFeatureFlags={getEditorFeatureFlags}
         />
       </div>
     </Popup>

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -96,6 +96,12 @@ type DragMenuProps = {
   pluginConfig?: PluginConfig;
   getEditorContainerWidth: GetEditorContainerWidth;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
+  fitWidth?: number;
+  fitHeight?: number;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
+  tablePreserveWidth?: boolean;
 };
 
 type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
@@ -269,6 +275,12 @@ export const DragMenu = React.memo(
     editorAnalyticsAPI,
     pluginConfig,
     intl: { formatMessage },
+    fitHeight,
+    fitWidth,
+    mountPoint,
+    scrollableElement,
+    boundariesElement,
+    tablePreserveWidth,
   }: DragMenuProps & WrappedComponentProps) => {
     const { state, dispatch } = editorView;
     const { selection } = state;
@@ -301,6 +313,7 @@ export const DragMenu = React.memo(
       selectionRect,
       editorAnalyticsAPI,
       pluginConfig?.isHeaderRowRequired,
+      tablePreserveWidth,
     );
 
     const { menuItems, menuCallback } = convertToDropdownItems(
@@ -627,12 +640,17 @@ export const DragMenu = React.memo(
       <DropdownMenu
         disableKeyboardHandling={isSubmenuOpen}
         section={{ hasSeparator: true }}
-        target={target as HTMLElement | undefined}
         items={menuItems}
         onItemActivated={handleMenuItemActivated}
         onMouseEnter={handleItemMouseEnter}
         onMouseLeave={handleItemMouseLeave}
         handleClose={closeMenu}
+        fitHeight={fitHeight}
+        fitWidth={fitWidth}
+        direction={direction}
+        mountPoint={mountPoint}
+        boundariesElement={boundariesElement}
+        scrollableElement={scrollableElement}
       />
     );
   },

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+import React, { useState } from 'react';
 
-import { DropList } from '@atlaskit/editor-common/ui';
+import { DropList, Popup } from '@atlaskit/editor-common/ui';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import {
   ArrowKeyNavigationProvider,
@@ -8,6 +9,7 @@ import {
   DropdownMenuItem,
 } from '@atlaskit/editor-common/ui-menu';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
@@ -17,7 +19,6 @@ const DropListWithOutsideListeners =
   withReactEditorViewOuterListeners(DropList);
 
 type DropdownMenuProps = {
-  target?: HTMLElement;
   items: Array<{
     items: MenuItem[];
   }>;
@@ -34,10 +35,16 @@ type DropdownMenuProps = {
   handleClose: (focusTarget: 'editor' | 'handle') => void;
   onMouseEnter: (attrs: { item: MenuItem }) => void;
   onMouseLeave: (attrs: { item: MenuItem }) => void;
+  fitWidth?: number;
+  fitHeight?: number;
+  direction?: string;
+  offset?: Array<number>;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
 };
 
 export const DropdownMenu = ({
-  target,
   items,
   section,
   disableKeyboardHandling,
@@ -45,13 +52,24 @@ export const DropdownMenu = ({
   handleClose,
   onMouseEnter,
   onMouseLeave,
+  fitWidth,
+  fitHeight,
+  direction,
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
 }: DropdownMenuProps) => {
+  const [popupPlacement, setPopupPlacement] = useState(['bottom', 'left']);
+  const [targetRefDiv, setTargetRefDiv] = useState<HTMLDivElement | null>(null);
+  const handleRef = (ref: HTMLDivElement | null) => {
+    setTargetRefDiv(ref);
+  };
   const innerMenu = () => {
     return (
       <DropListWithOutsideListeners
         isOpen
         shouldFitContainer
-        position={['bottom', 'left'].join(' ')}
+        position={popupPlacement.join(' ')}
         handleClickOutside={() => handleClose('editor')}
         handleEscapeKeydown={() => {
           if (!disableKeyboardHandling) {
@@ -64,7 +82,7 @@ export const DropdownMenu = ({
             e.stopPropagation();
           }
         }}
-        targetRef={target}
+        targetRef={targetRefDiv}
       >
         <div style={{ height: 0, minWidth: dragMenuDropdownWidth }} />
         <MenuGroup role="menu">
@@ -95,56 +113,82 @@ export const DropdownMenu = ({
     return innerMenu();
   }
 
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  let offsetY =
+    direction === 'row' ? (popupPlacement[0] === 'bottom' ? -8 : -34) : 0;
+  let offsetX =
+    direction === 'column' ? (popupPlacement[1] === 'left' ? 0 : -7) : 0;
+
   return (
-    <ArrowKeyNavigationProvider
-      closeOnTab
-      type={ArrowKeyNavigationType.MENU}
-      onSelection={(index) => {
-        const results = items.flatMap((item) =>
-          'items' in item ? item.items : item,
-        );
+    <div className="drag-dropdown-menu-wrapper">
+      <div className="drag-dropdown-menu-popup-ref" ref={handleRef}></div>
+      <Popup
+        target={targetRefDiv as HTMLElement}
+        mountTo={mountPoint}
+        boundariesElement={boundariesElement}
+        scrollableElement={scrollableElement}
+        onPlacementChanged={(placement: [string, string]) => {
+          setPopupPlacement(placement);
+        }}
+        fitHeight={fitHeight}
+        fitWidth={fitWidth}
+        zIndex={akEditorFloatingPanelZIndex}
+        offset={[offsetX, offsetY]}
+        allowOutOfBounds // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+      >
+        <ArrowKeyNavigationProvider
+          closeOnTab
+          type={ArrowKeyNavigationType.MENU}
+          onSelection={(index) => {
+            const results = items.flatMap((item) =>
+              'items' in item ? item.items : item,
+            );
 
-        // onSelection is called when any focusable element is 'activated'
-        // this is an issue as some menu items have toggles, which cause the index value
-        // in the callback to be outside of array length.
-        // The logic below normalises the index value based on the number
-        // of menu items with 2 focusable elements, and adjusts the index to ensure
-        // the correct menu item is sent in onItemActivated callback
-        if (
-          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-        ) {
-          const keys = ['row_numbers', 'header_row', 'header_column'];
-          let doubleItemCount = 0;
+            // onSelection is called when any focusable element is 'activated'
+            // this is an issue as some menu items have toggles, which cause the index value
+            // in the callback to be outside of array length.
+            // The logic below normalises the index value based on the number
+            // of menu items with 2 focusable elements, and adjusts the index to ensure
+            // the correct menu item is sent in onItemActivated callback
+            if (
+              getBooleanFF(
+                'platform.editor.table.new-cell-context-menu-styling',
+              )
+            ) {
+              const keys = ['row_numbers', 'header_row', 'header_column'];
+              let doubleItemCount = 0;
 
-          const firstIndex = results.findIndex((value) =>
-            keys.includes(value.key!),
-          );
+              const firstIndex = results.findIndex((value) =>
+                keys.includes(value.key!),
+              );
 
-          if (firstIndex === -1 || index <= firstIndex) {
-            onItemActivated && onItemActivated({ item: results[index] });
-            return;
-          }
+              if (firstIndex === -1 || index <= firstIndex) {
+                onItemActivated && onItemActivated({ item: results[index] });
+                return;
+              }
 
-          for (let i = firstIndex; i < results.length; i += 1) {
-            if (keys.includes(results[i].key!)) {
-              doubleItemCount += 1;
-            }
-            if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
-              onItemActivated && onItemActivated({ item: results[i] });
-              return;
-            }
+              for (let i = firstIndex; i < results.length; i += 1) {
+                if (keys.includes(results[i].key!)) {
+                  doubleItemCount += 1;
+                }
+                if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
+                  onItemActivated && onItemActivated({ item: results[i] });
+                  return;
+                }
 
-            if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
-              onItemActivated && onItemActivated({ item: results[i] });
-              return;
+                if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+                  onItemActivated && onItemActivated({ item: results[i] });
+                  return;
+                }
+              }
+            } else {
+              onItemActivated && onItemActivated({ item: results[index] });
             }
-          }
-        } else {
-          onItemActivated && onItemActivated({ item: results[index] });
-        }
-      }}
-    >
-      {innerMenu()}
-    </ArrowKeyNavigationProvider>
+          }}
+        >
+          {innerMenu()}
+        </ArrowKeyNavigationProvider>
+      </Popup>
+    </div>
   );
 };

package/src/ui/FloatingDragMenu/index.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -13,7 +16,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';
 
@@ -32,6 +35,7 @@ export interface Props {
   editorAnalyticsAPI?: EditorAnalyticsAPI;
   stickyHeaders?: RowStickyState;
   pluginConfig?: PluginConfig;
+  getEditorFeatureFlags: GetEditorFeatureFlags;
 }
 
 const FloatingDragMenu = ({
@@ -48,6 +52,7 @@ const FloatingDragMenu = ({
   editorAnalyticsAPI,
   stickyHeaders,
   pluginConfig,
+  getEditorFeatureFlags,
 }: Props) => {
   if (
     !isOpen ||
@@ -63,7 +68,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 +77,8 @@ 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.
+  const { tablePreserveWidth = false } = getEditorFeatureFlags();
+
   return (
     <Popup
       alignX={direction === 'row' ? 'right' : undefined}
@@ -82,6 +88,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 +112,12 @@ const FloatingDragMenu = ({
         getEditorContainerWidth={getEditorContainerWidth}
         editorAnalyticsAPI={editorAnalyticsAPI}
         pluginConfig={pluginConfig}
+        fitWidth={dragMenuDropdownWidth}
+        fitHeight={tablePopupMenuFitHeight}
+        mountPoint={mountPoint}
+        boundariesElement={boundariesElement}
+        scrollableElement={scrollableElement}
+        tablePreserveWidth={tablePreserveWidth}
       />
     </Popup>
   );

package/src/ui/FloatingInsertButton/index.tsx

@@ -15,7 +15,10 @@ import {
   EVENT_TYPE,
   INPUT_METHOD,
 } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -52,6 +55,7 @@ export interface Props {
   hasStickyHeaders?: boolean;
   dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
+  getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 
 export class FloatingInsertButton extends React.Component<
@@ -284,11 +288,19 @@ export class FloatingInsertButton extends React.Component<
     if (typeof insertColumnButtonIndex !== 'undefined') {
       event.preventDefault();
 
+      const { tablePreserveWidth = false } =
+        this.props.getEditorFeatureFlags?.() || {};
+
       const { state, dispatch } = editorView;
-      insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(
-        INPUT_METHOD.BUTTON,
-        insertColumnButtonIndex,
-      )(state, dispatch, editorView);
+      insertColumnWithAnalytics(
+        getEditorContainerWidth,
+        editorAnalyticsAPI,
+        tablePreserveWidth,
+      )(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(
+        state,
+        dispatch,
+        editorView,
+      );
     }
   }
 }

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

@@ -14,9 +14,7 @@ export const createTableWithWidth =
     },
   ) =>
   (schema: Schema) => {
-    const { tablePreserveWidth = false } = getEditorFeatureFlags
-      ? getEditorFeatureFlags()
-      : {};
+    const { tablePreserveWidth = false } = getEditorFeatureFlags?.() || {};
 
     if (tablePreserveWidth && isFullWidthModeEnabled) {
       return createTable({

package/src/utils/drag-menu.ts

@@ -159,6 +159,7 @@ export const getDragMenuConfig = (
   selectionRect?: Rect,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
   isHeaderRowRequired?: boolean,
+  tablePreserveWidth = false,
 ): DragMenuConfig[] => {
   const addOptions =
     direction === 'row'
@@ -296,6 +297,7 @@ export const getDragMenuConfig = (
           insertColumnWithAnalytics(
             getEditorContainerWidth,
             editorAnalyticsAPI,
+            tablePreserveWidth,
           )(INPUT_METHOD.TABLE_CONTEXT_MENU, (index ?? 0) + offset)(
             state,
             dispatch,
@@ -319,6 +321,7 @@ export const getDragMenuConfig = (
                 state,
                 editorView.domAtPos.bind(editorView),
                 getEditorContainerWidth,
+                tablePreserveWidth,
               );
 
               if (newResizeState) {
@@ -359,7 +362,7 @@ export const getDragMenuConfig = (
             !!isHeaderRowRequired,
           )(state, dispatch);
         } else {
-          deleteColumnsWithAnalytics(editorAnalyticsAPI)(
+          deleteColumnsWithAnalytics(editorAnalyticsAPI, tablePreserveWidth)(
             INPUT_METHOD.TABLE_CONTEXT_MENU,
             selectionRect ?? defaultSelectionRect,
           )(state, dispatch, editorView);