@atlaskit/editor-plugin-table 22.2.17 → 22.2.18

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -42,9 +42,12 @@ import { canMergeCells } from '../../pm-plugins/transforms/merge';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../pm-plugins/utils/selection';
 import { getMergedCellsPositions } from '../../pm-plugins/utils/table';
 import { TableCssClassName as ClassName } from '../../types';
-import { colorPalletteColumns, contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
+import { colorPalletteColumns, contextualMenuDropdownWidthDnD } from '../consts';
 import { cellColourPreviewStyles } from './styles';
 const arrowsList = new Set(!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? ['ArrowRight', 'ArrowLeft'] : ['ArrowRight']);
+const dropdownMenuSection = {
+  hasSeparator: true
+};
 const elementBeforeIconStyles = xcss({
   marginRight: 'space.negative.075',
   display: 'flex'
@@ -108,8 +111,7 @@ export class ContextualMenu extends Component {
         isSubmenuOpen
       } = this.state;
       const {
-        targetCellPosition,
-        isDragAndDropEnabled
+        targetCellPosition
       } = getPluginState(editorView.state);
       if (allowBackgroundColor) {
         var _node$attrs, _node$attrs2;
@@ -122,17 +124,17 @@ export class ContextualMenu extends Component {
         const selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
         const selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
         return {
-          content: isDragAndDropEnabled ? formatMessage(messages.backgroundColor) : formatMessage(messages.cellBackground),
+          content: formatMessage(messages.backgroundColor),
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          elemBefore: jsx(Box, {
             xcss: elementBeforeIconStyles
           }, jsx(PaintBucketIcon, {
             color: "currentColor",
             spacing: "spacious",
             label: formatMessage(messages.backgroundColor)
-          })) : undefined,
+          })),
           elemAfter:
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           jsx("div", {
@@ -142,7 +144,7 @@ export class ContextualMenu extends Component {
             css: cellColourPreviewStyles(background)
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             ,
-            className: isDragAndDropEnabled ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
+            className: ClassName.CONTEXTUAL_MENU_ICON_SMALL
           }), isSubmenuOpen && jsx("div", {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className: ClassName.CONTEXTUAL_SUBMENU,
@@ -210,12 +212,8 @@ export class ContextualMenu extends Component {
         },
         intl: {
           formatMessage
-        },
-        editorView
+        }
       } = this.props;
-      const {
-        isDragAndDropEnabled
-      } = getPluginState(editorView.state);
       if (allowMergeCells) {
         return [{
           content: formatMessage(messages.mergeCells),
@@ -223,26 +221,26 @@ export class ContextualMenu extends Component {
             name: 'merge'
           },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          elemBefore: jsx(Box, {
             xcss: elementBeforeIconStyles
           }, jsx(TableCellMergeIcon, {
             color: "currentColor",
             spacing: "spacious",
             label: formatMessage(messages.mergeCells)
-          })) : undefined
+          }))
         }, {
           content: formatMessage(messages.splitCell),
           value: {
             name: 'split'
           },
           isDisabled: !splitCell(state),
-          elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          elemBefore: jsx(Box, {
             xcss: elementBeforeIconStyles
           }, jsx(TableCellSplitIcon, {
             color: "currentColor",
             spacing: "spacious",
             label: formatMessage(messages.splitCell)
-          })) : undefined
+          }))
         }];
       }
       return [];
@@ -251,13 +249,9 @@ export class ContextualMenu extends Component {
       const {
         intl: {
           formatMessage
-        },
-        editorView
+        }
       } = this.props;
-      const {
-        isDragAndDropEnabled
-      } = getPluginState(editorView.state);
-      const content = formatMessage(isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn);
+      const content = formatMessage(messages.addColumnRight);
       return {
         content,
         value: {
@@ -267,7 +261,7 @@ export class ContextualMenu extends Component {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter)),
-        elemBefore: isDragAndDropEnabled ?
+        elemBefore:
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         jsx(Box, {
           xcss: elementBeforeIconStyles
@@ -275,7 +269,7 @@ export class ContextualMenu extends Component {
           color: "currentColor",
           spacing: "spacious",
           label: formatMessage(messages.addColumnRight)
-        })) : undefined,
+        })),
         'aria-label': tooltip(addColumnAfter, String(content))
       };
     });
@@ -283,13 +277,9 @@ export class ContextualMenu extends Component {
       const {
         intl: {
           formatMessage
-        },
-        editorView
+        }
       } = this.props;
-      const {
-        isDragAndDropEnabled
-      } = getPluginState(editorView.state);
-      const content = formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow);
+      const content = formatMessage(messages.addRowBelow);
       return {
         content,
         value: {
@@ -299,13 +289,13 @@ export class ContextualMenu extends Component {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter)),
-        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+        elemBefore: jsx(Box, {
           xcss: elementBeforeIconStyles
         }, jsx(TableRowAddBelowIcon, {
           color: "currentColor",
           spacing: "spacious",
           label: formatMessage(messages.addRowBelow)
-        })) : undefined,
+        })),
         'aria-label': tooltip(addRowAfter, String(content))
       };
     });
@@ -314,12 +304,8 @@ export class ContextualMenu extends Component {
         selectionRect,
         intl: {
           formatMessage
-        },
-        editorView
+        }
       } = this.props;
-      const {
-        isDragAndDropEnabled
-      } = getPluginState(editorView.state);
       const {
         top,
         bottom,
@@ -340,7 +326,7 @@ export class ContextualMenu extends Component {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace)),
-        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+        elemBefore: jsx(Box, {
           xcss: elementBeforeIconStyles
         }, jsx(TableCellClearIcon, {
           color: "currentColor",
@@ -348,7 +334,7 @@ export class ContextualMenu extends Component {
           label: formatMessage(messages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
           })
-        })) : undefined,
+        })),
         'aria-label': tooltip(backspace, String(content))
       };
     });
@@ -357,12 +343,8 @@ export class ContextualMenu extends Component {
         selectionRect,
         intl: {
           formatMessage
-        },
-        editorView
+        }
       } = this.props;
-      const {
-        isDragAndDropEnabled
-      } = getPluginState(editorView.state);
       const {
         right,
         left
@@ -375,7 +357,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+        elemBefore: jsx(Box, {
           xcss: elementBeforeIconStyles
         }, jsx(TableColumnDeleteIcon, {
           color: "currentColor",
@@ -383,7 +365,7 @@ export class ContextualMenu extends Component {
           label: formatMessage(messages.removeColumns, {
             0: noOfColumns
           })
-        })) : undefined
+        }))
       };
     });
     _defineProperty(this, "createDeleteRowItem", () => {
@@ -391,12 +373,8 @@ export class ContextualMenu extends Component {
         selectionRect,
         intl: {
           formatMessage
-        },
-        editorView
+        }
       } = this.props;
-      const {
-        isDragAndDropEnabled
-      } = getPluginState(editorView.state);
       const {
         bottom,
         top
@@ -409,7 +387,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+        elemBefore: jsx(Box, {
           xcss: elementBeforeIconStyles
         }, jsx(TableRowDeleteIcon, {
           color: "currentColor",
@@ -417,7 +395,7 @@ export class ContextualMenu extends Component {
           label: formatMessage(messages.removeRows, {
             0: noOfRows
           })
-        })) : undefined
+        }))
       };
     });
     _defineProperty(this, "createDistributeColumnsItemInternal", partialMenuItem => {
@@ -448,73 +426,7 @@ export class ContextualMenu extends Component {
         ...partialMenuItem
       };
     });
-    _defineProperty(this, "createDistributeColumnsItem", () => {
-      const {
-        editorView
-      } = this.props;
-      const {
-        isDragAndDropEnabled,
-        pluginConfig: {
-          allowDistributeColumns
-        }
-      } = getPluginState(editorView.state);
-      if (allowDistributeColumns && !isDragAndDropEnabled) {
-        return this.createDistributeColumnsItemInternal();
-      }
-      return null;
-    });
-    _defineProperty(this, "createSortColumnItems", () => {
-      const {
-        intl: {
-          formatMessage
-        },
-        editorView,
-        allowColumnSorting
-      } = this.props;
-      const {
-        isDragAndDropEnabled
-      } = getPluginState(editorView.state);
-      if (allowColumnSorting && !isDragAndDropEnabled) {
-        const hasMergedCellsInTable = getMergedCellsPositions(editorView.state.tr).length > 0;
-        const warning = hasMergedCellsInTable ? {
-          tooltipDescription: formatMessage(messages.canNotSortTable),
-          isDisabled: true
-        } : {};
-        return [{
-          content: formatMessage(messages.sortColumnASC),
-          value: {
-            name: 'sort_column_asc'
-          },
-          ...warning
-        }, {
-          content: formatMessage(messages.sortColumnDESC),
-          value: {
-            name: 'sort_column_desc'
-          },
-          ...warning
-        }];
-      }
-      return null;
-    });
-    _defineProperty(this, "createOriginalContextMenuItems", () => {
-      const items = [];
-      const sortColumnItems = this.createSortColumnItems();
-      const backgroundColorItem = this.createBackgroundColorItem();
-      const distributeColumnsItem = this.createDistributeColumnsItem();
-      sortColumnItems && items.push(...sortColumnItems);
-      backgroundColorItem && items.push(backgroundColorItem);
-      items.push(this.createInsertColumnItem());
-      items.push(this.createInsertRowItem());
-      items.push(this.createDeleteColumnItem());
-      items.push(this.createDeleteRowItem());
-      items.push(...this.createMergeSplitCellItems());
-      distributeColumnsItem && items.push(distributeColumnsItem);
-      items.push(this.createClearCellsItem());
-      return [{
-        items
-      }];
-    });
-    _defineProperty(this, "createNewContextMenuItems", () => {
+    _defineProperty(this, "createContextMenuItems", () => {
       const backgroundColorItem = this.createBackgroundColorItem();
       const mergeSplitCellItems = this.createMergeSplitCellItems();
       const insertColumnItem = this.createInsertColumnItem();
@@ -815,10 +727,9 @@ export class ContextualMenu extends Component {
   }
   componentDidUpdate() {
     const {
-      isDragAndDropEnabled,
       isContextualMenuOpen
     } = getPluginState(this.props.editorView.state);
-    if (isDragAndDropEnabled && this.props.isDragMenuOpen && isContextualMenuOpen) {
+    if (this.props.isDragMenuOpen && isContextualMenuOpen) {
       toggleContextualMenu()(this.props.editorView.state, this.props.editorView.dispatch);
     }
   }
@@ -827,14 +738,10 @@ export class ContextualMenu extends Component {
       isOpen,
       offset,
       boundariesElement,
-      editorView,
       isCellMenuOpenByKeyboard,
       api
     } = this.props;
-    const {
-      isDragAndDropEnabled
-    } = getPluginState(editorView.state);
-    const items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
+    const items = this.createContextMenuItems();
     let isOpenAllowed = false;
     isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
     return jsx(UserIntentPopupWrapper, {
@@ -860,7 +767,7 @@ export class ContextualMenu extends Component {
       onMouseEnter: this.handleItemMouseEnter,
       onMouseLeave: this.handleItemMouseLeave,
       fitHeight: 188,
-      fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
+      fitWidth: contextualMenuDropdownWidthDnD
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       shouldFocusFirstItem: () => {
@@ -868,9 +775,7 @@ export class ContextualMenu extends Component {
       },
       boundariesElement: boundariesElement,
       offset: offset,
-      section: isDragAndDropEnabled ? {
-        hasSeparator: true
-      } : undefined,
+      section: dropdownMenuSection,
       allowEnterDefaultBehavior: this.state.isSubmenuOpen
     })));
   }

package/dist/es2019/ui/FloatingContextualMenu/index.js

@@ -9,7 +9,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
-import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
+import { contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
 
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
@@ -36,8 +36,7 @@ const FloatingContextualMenu = ({
 
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const {
-    targetCellPosition,
-    isDragAndDropEnabled
+    targetCellPosition
   } = getPluginState(editorView.state);
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
@@ -69,7 +68,7 @@ const FloatingContextualMenu = ({
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     fitHeight: tablePopupMenuFitHeight,
-    fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
+    fitWidth: contextualMenuDropdownWidthDnD
     // 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.
     ,
@@ -80,7 +79,7 @@ const FloatingContextualMenu = ({
     offset: [-7, 0],
     stick: true
   }, jsx("div", {
-    css: tablePopupStyles(isDragAndDropEnabled)
+    css: tablePopupStyles()
   }, jsx(ContextualMenu, {
     editorView: editorView
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)

package/dist/es2019/ui/FloatingContextualMenu/styles.js

@@ -2,15 +2,15 @@
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { TableCssClassName as ClassName } from '../../types';
-import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
+import { contextualMenuDropdownWidthDnD } from '../consts';
 export const cellColourPreviewStyles = selectedColor => css({
   '&::before': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     background: selectedColor
   }
 });
-export const tablePopupStyles = (isDragAndDropEnabled
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+export const tablePopupStyles = (
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) => css`
 	.${ClassName.CONTEXTUAL_SUBMENU} {
 		border-radius: ${"var(--ds-radius-small, 3px)"};
@@ -19,7 +19,7 @@ export const tablePopupStyles = (isDragAndDropEnabled
 		display: block;
 		position: absolute;
 		top: 0;
-		left: ${isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth}px;
+		left: ${contextualMenuDropdownWidthDnD}px;
 		padding: ${"var(--ds-space-100, 8px)"};
 
 		> div {
@@ -27,26 +27,6 @@ export const tablePopupStyles = (isDragAndDropEnabled
 		}
 	}
 
-	.${ClassName.CONTEXTUAL_MENU_ICON} {
-		display: flex;
-
-		&::before {
-			content: '';
-			display: block;
-			border: 1px solid ${tableBackgroundBorderColor};
-			border-radius: ${"var(--ds-radius-small, 3px)"};
-			width: 20px;
-			height: 20px;
-		}
-
-		&::after {
-			content: '›';
-			margin-left: ${"var(--ds-space-050, 4px)"};
-			line-height: 20px;
-			color: ${"var(--ds-icon, #292A2E)"};
-		}
-	}
-
 	.${ClassName.CONTEXTUAL_MENU_ICON_SMALL} {
 		display: flex;
 

package/dist/es2019/ui/FloatingInsertButton/InsertButton.js

@@ -11,33 +11,25 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import Tooltip from '@atlaskit/tooltip';
 import { TableCssClassName as ClassName } from '../../types';
 import { tableToolbarSize } from '../consts';
-const getInsertLineHeight = (tableRef, hasStickyHeaders, isDragAndDropEnabled) => {
+const getInsertLineHeight = (tableRef, hasStickyHeaders) => {
   // The line gets height 100% from the table,
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
   const LINE_OFFSET = 3;
-  const ADDITIONAL_HEIGHT = hasStickyHeaders ? tableRef.getBoundingClientRect().top - tableMarginTop * (isDragAndDropEnabled ? 3 : 4) - LINE_OFFSET : tableToolbarSize + LINE_OFFSET;
+  const ADDITIONAL_HEIGHT = hasStickyHeaders ? tableRef.getBoundingClientRect().top - tableMarginTop * 3 - LINE_OFFSET : tableToolbarSize + LINE_OFFSET;
   return tableRef.offsetHeight + ADDITIONAL_HEIGHT;
 };
-const getToolbarSize = tableRef => {
+const getNumberColumnWidth = tableRef => {
   const parent = closestElement(tableRef, `.${ClassName.TABLE_CONTAINER}`);
   if (parent) {
-    return parent.querySelector(`.${ClassName.NUMBERED_COLUMN}`) ? tableToolbarSize + akEditorTableNumberColumnWidth - 1 : tableToolbarSize;
-  }
-  return tableToolbarSize;
-};
-const getNumberColumnWidth = (tableRef, isDragAndDropEnabled) => {
-  const parent = closestElement(tableRef, `.${ClassName.TABLE_CONTAINER}`);
-  if (parent && isDragAndDropEnabled) {
     return parent.querySelector(`.${ClassName.NUMBERED_COLUMN}`) ? akEditorTableNumberColumnWidth - 1 : 0;
   }
   return 0;
 };
-const getInsertLineWidth = (tableRef, isDragAndDropEnabled, isChromelessEditor) => {
+const getInsertLineWidth = (tableRef, isChromelessEditor) => {
   // The line gets width 100% from the table,
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
-  const LINE_OFFSET = 4;
   const DRAG_LINE_OFFSET = isChromelessEditor ? 14 : 6;
   const {
     parentElement,
@@ -52,9 +44,7 @@ const getInsertLineWidth = (tableRef, isDragAndDropEnabled, isChromelessEditor)
     scrollLeft
   } = parentElement;
   const diff = offsetWidth - parentOffsetWidth;
-  const toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
-  const lineOffset = isDragAndDropEnabled ? DRAG_LINE_OFFSET : LINE_OFFSET;
-  return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset + getNumberColumnWidth(tableRef, isDragAndDropEnabled);
+  return Math.min(offsetWidth, parentOffsetWidth - Math.max(scrollLeft - diff, 0)) + DRAG_LINE_OFFSET + getNumberColumnWidth(tableRef);
 };
 const tooltipMessageByType = type => {
   return type === 'row' ? messages.insertRow : messages.insertColumn;
@@ -106,10 +96,10 @@ const InsertButtonForDragAndDrop = ({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: type === 'row' ? {
-      width: getInsertLineWidth(tableRef, true, isChromelessEditor),
+      width: getInsertLineWidth(tableRef, isChromelessEditor),
       left: "var(--ds-space-150, 12px)"
     } : {
-      height: getInsertLineHeight(tableRef, hasStickyHeaders, true) - 8,
+      height: getInsertLineHeight(tableRef, hasStickyHeaders) - 8,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: '-3px'
     }

package/dist/es2019/ui/FloatingInsertButton/getPopupOptions.js

@@ -1,13 +1,11 @@
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
-import { tableInsertColumnButtonOffset, tableInsertColumnButtonSize, tableToolbarSize } from '../consts';
+import { tableInsertColumnButtonOffset, tableInsertColumnButtonSize } from '../consts';
 const HORIZONTAL_ALIGN_COLUMN_BUTTON = -(tableInsertColumnButtonSize / 2);
 const HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON = HORIZONTAL_ALIGN_COLUMN_BUTTON + akEditorTableNumberColumnWidth;
-const VERTICAL_ALIGN_COLUMN_BUTTON = tableToolbarSize + tableInsertColumnButtonOffset;
 const VERTICAL_ALIGN_COLUMN_BUTTON_DRAG = tableInsertColumnButtonOffset;
-const HORIZONTAL_ALIGN_ROW_BUTTON = -(tableToolbarSize + tableInsertColumnButtonOffset + tableInsertColumnButtonSize);
 const HORIZONTAL_ALIGN_ROW_BUTTON_DRAG = -18;
 const VERTICAL_ALIGN_ROW_BUTTON = tableInsertColumnButtonSize / 2;
-function getRowOptions(index, isDragAndDropEnabled) {
+function getRowOptions(index) {
   let defaultOptions = {
     alignX: 'left',
     alignY: 'bottom',
@@ -27,16 +25,16 @@ function getRowOptions(index, isDragAndDropEnabled) {
       return {
         ...position,
         // Left position should be always the offset (To place in the correct position even if the table has overflow).
-        left: isDragAndDropEnabled ? HORIZONTAL_ALIGN_ROW_BUTTON_DRAG : HORIZONTAL_ALIGN_ROW_BUTTON
+        left: HORIZONTAL_ALIGN_ROW_BUTTON_DRAG
       };
     }
   };
 }
-function getColumnOptions(index, tableContainer, hasNumberedColumns, isDragAndDropEnabled) {
+function getColumnOptions(index, tableContainer, hasNumberedColumns) {
   const options = {
     alignX: 'end',
     alignY: 'top',
-    offset: [HORIZONTAL_ALIGN_COLUMN_BUTTON, isDragAndDropEnabled ? VERTICAL_ALIGN_COLUMN_BUTTON_DRAG : VERTICAL_ALIGN_COLUMN_BUTTON],
+    offset: [HORIZONTAL_ALIGN_COLUMN_BUTTON, VERTICAL_ALIGN_COLUMN_BUTTON_DRAG],
     // :: (position: PopupPosition) -> PopupPosition
     // Limit the InsertButton position to the table container
     // if the left position starts before it
@@ -77,12 +75,12 @@ function getColumnOptions(index, tableContainer, hasNumberedColumns, isDragAndDr
   }
   return options;
 }
-function getPopupOptions(direction, index, hasNumberedColumns, isDragAndDropEnabled, tableContainer) {
+function getPopupOptions(direction, index, hasNumberedColumns, tableContainer) {
   switch (direction) {
     case 'column':
-      return getColumnOptions(index, tableContainer, hasNumberedColumns, isDragAndDropEnabled);
+      return getColumnOptions(index, tableContainer, hasNumberedColumns);
     case 'row':
-      return getRowOptions(index, isDragAndDropEnabled);
+      return getRowOptions(index);
     default:
       return {};
   }

package/dist/es2019/ui/FloatingInsertButton/index.js

@@ -38,7 +38,8 @@ export class FloatingInsertButton extends React.Component {
       dispatchAnalyticsEvent,
       isChromelessEditor
     } = this.props;
-    // TODO: ED-26961 - temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
+
+    // ED-26961 - disable insert button for first column and row
     if (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0) {
       return null;
     }
@@ -129,7 +130,7 @@ export class FloatingInsertButton extends React.Component {
       allowOutOfBounds: true
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-    }, getPopupOptions(type, index, hasNumberedColumns, true, tableContainerWrapper), {
+    }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper), {
       zIndex: zIndex
     }), /*#__PURE__*/React.createElement(DragAndDropInsertButton, {
       type: type,

package/dist/es2019/ui/common-styles.js

@@ -234,9 +234,7 @@ const activeCellHighlightStyles = () => {
 		}
 	`;
 };
-const baseTableStylesWithoutSharedStyle = props => {
-  var _props$featureFlags;
-  return css`
+const baseTableStylesWithoutSharedStyle = props => css`
 	${columnControlsLineMarker()};
 	${hoveredDeleteButton()};
 	${hoveredCell()};
@@ -559,7 +557,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 	}
 
 	${sentinelStyles}
-	${OverflowShadow((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop)}
+	${OverflowShadow()}
     ${stickyScrollbarStyles}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
@@ -1307,7 +1305,6 @@ const baseTableStylesWithoutSharedStyle = props => {
 		overflow: visible;
 	}
 `;
-};
 
 // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
 export const baseTableStyles = props => css`

package/dist/es2019/ui/consts.js

@@ -52,7 +52,6 @@ export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
 export const resizeLineWidth = 2;
 export const resizeHandlerZIndex = columnControlsZIndex + akRichMediaResizeZIndex;
 export const contextualMenuTriggerSize = 16;
-export const contextualMenuDropdownWidth = 180;
 export const contextualMenuDropdownWidthDnD = 250;
 export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;