@atlaskit/editor-plugin-table 7.4.8 → 7.5.0

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

@@ -302,8 +302,11 @@ export class ContextualMenu extends Component {
         }
       } = getPluginState(editorView.state);
       if (allowDistributeColumns && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
-        var _newResizeState$chang;
-        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+        var _this$props$getEditor, _this$props, _newResizeState$chang;
+        const {
+          tablePreserveWidth = false
+        } = ((_this$props$getEditor = (_this$props = this.props).getEditorFeatureFlags) === null || _this$props$getEditor === void 0 ? void 0 : _this$props$getEditor.call(_this$props)) || {};
+        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
         const wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
         return {
           content: formatMessage(messages.distributeColumns),
@@ -397,7 +400,8 @@ export class ContextualMenu extends Component {
         editorView,
         selectionRect,
         editorAnalyticsAPI,
-        getEditorContainerWidth
+        getEditorContainerWidth,
+        getEditorFeatureFlags
       } = this.props;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       const {
@@ -407,6 +411,9 @@ export class ContextualMenu extends Component {
       const {
         targetCellPosition
       } = getPluginState(state);
+      const {
+        tablePreserveWidth = false
+      } = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {};
       switch (item.value.name) {
         case 'sort_column_desc':
           sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
@@ -425,7 +432,7 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'distribute_columns':
-          const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+          const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
           if (newResizeStateWithAnalytics) {
             distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
             this.toggleOpen();
@@ -436,7 +443,7 @@ 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/dist/es2019/ui/FloatingContextualMenu/index.js

@@ -5,7 +5,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 } from '../consts';
+import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
 import ContextualMenu from './ContextualMenu';
 import { tablePopupStyles } from './styles';
 const FloatingContextualMenu = ({
@@ -16,7 +16,8 @@ const FloatingContextualMenu = ({
   isOpen,
   pluginConfig,
   editorAnalyticsAPI,
-  getEditorContainerWidth
+  getEditorContainerWidth,
+  getEditorFeatureFlags
 }) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const {
@@ -46,7 +47,7 @@ const FloatingContextualMenu = ({
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitHeight: 188,
+    fitHeight: tablePopupMenuFitHeight,
     fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
     // 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.
@@ -68,7 +69,8 @@ const FloatingContextualMenu = ({
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth
+    getEditorContainerWidth: getEditorContainerWidth,
+    getEditorFeatureFlags: getEditorFeatureFlags
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -170,7 +170,13 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   pluginConfig,
   intl: {
     formatMessage
-  }
+  },
+  fitHeight,
+  fitWidth,
+  mountPoint,
+  scrollableElement,
+  boundariesElement,
+  tablePreserveWidth
 }) => {
   var _pluginConfig$allowBa;
   const {
@@ -190,7 +196,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   const shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
   const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
   const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, tablePreserveWidth);
   const {
     menuItems,
     menuCallback
@@ -457,12 +463,17 @@ export const DragMenu = /*#__PURE__*/React.memo(({
     section: {
       hasSeparator: true
     },
-    target: target,
     items: menuItems,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
-    handleClose: closeMenu
+    handleClose: closeMenu,
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    direction: direction,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   });
 });
 export default injectIntl(DragMenu);

package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js

@@ -1,26 +1,38 @@
-import React from 'react';
-import { DropList } from '@atlaskit/editor-common/ui';
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+import React, { useState } from 'react';
+import { DropList, Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, 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';
 import { dragMenuDropdownWidth } from '../consts';
 const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export const DropdownMenu = ({
-  target,
   items,
   section,
   disableKeyboardHandling,
   onItemActivated,
   handleClose,
   onMouseEnter,
-  onMouseLeave
+  onMouseLeave,
+  fitWidth,
+  fitHeight,
+  direction,
+  mountPoint,
+  boundariesElement,
+  scrollableElement
 }) => {
+  const [popupPlacement, setPopupPlacement] = useState(['bottom', 'left']);
+  const [targetRefDiv, setTargetRefDiv] = useState(null);
+  const handleRef = ref => {
+    setTargetRefDiv(ref);
+  };
   const innerMenu = () => {
     return /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
       isOpen: true,
       shouldFitContainer: true,
-      position: ['bottom', 'left'].join(' '),
+      position: popupPlacement.join(' '),
       handleClickOutside: () => handleClose('editor'),
       handleEscapeKeydown: () => {
         if (!disableKeyboardHandling) {
@@ -33,7 +45,7 @@ export const DropdownMenu = ({
           e.stopPropagation();
         }
       },
-      targetRef: target
+      targetRef: targetRefDiv
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         height: 0,
@@ -60,7 +72,29 @@ export const DropdownMenu = ({
   if (disableKeyboardHandling) {
     return innerMenu();
   }
-  return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+
+  // 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 /*#__PURE__*/React.createElement("div", {
+    className: "drag-dropdown-menu-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "drag-dropdown-menu-popup-ref",
+    ref: handleRef
+  }), /*#__PURE__*/React.createElement(Popup, {
+    target: targetRefDiv,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    onPlacementChanged: placement => {
+      setPopupPlacement(placement);
+    },
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    zIndex: akEditorFloatingPanelZIndex,
+    offset: [offsetX, offsetY],
+    allowOutOfBounds: true // 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
+  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: ArrowKeyNavigationType.MENU,
     onSelection: index => {
@@ -105,5 +139,5 @@ export const DropdownMenu = ({
         });
       }
     }
-  }, innerMenu());
+  }, innerMenu())));
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { dragMenuDropdownWidth } from '../consts';
+import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 import DragMenu from './DragMenu';
 const FloatingDragMenu = ({
   mountPoint,
@@ -17,19 +17,21 @@ const FloatingDragMenu = ({
   getEditorContainerWidth,
   editorAnalyticsAPI,
   stickyHeaders,
-  pluginConfig
+  pluginConfig,
+  getEditorFeatureFlags
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
   const inStickyMode = stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky;
   const targetHandleRef = direction === 'row' ? 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 || !(editorView.state.selection instanceof CellSelection)) {
     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 /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -37,7 +39,8 @@ const FloatingDragMenu = ({
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: dragMenuDropdownWidth
+    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
@@ -56,7 +59,13 @@ const FloatingDragMenu = ({
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    pluginConfig: pluginConfig
+    pluginConfig: pluginConfig,
+    fitWidth: dragMenuDropdownWidth,
+    fitHeight: tablePopupMenuFitHeight,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    tablePreserveWidth: tablePreserveWidth
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -177,12 +177,16 @@ export class FloatingInsertButton extends React.Component {
       getEditorContainerWidth
     } = this.props;
     if (typeof insertColumnButtonIndex !== 'undefined') {
+      var _this$props$getEditor, _this$props;
       event.preventDefault();
+      const {
+        tablePreserveWidth = false
+      } = ((_this$props$getEditor = (_this$props = this.props).getEditorFeatureFlags) === null || _this$props$getEditor === void 0 ? void 0 : _this$props$getEditor.call(_this$props)) || {};
       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/dist/es2019/ui/consts.js

@@ -56,6 +56,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;
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;

package/dist/es2019/utils/create.js

@@ -3,7 +3,7 @@ import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 export const createTableWithWidth = (isFullWidthModeEnabled, getEditorFeatureFlags, createTableProps) => schema => {
   const {
     tablePreserveWidth = false
-  } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
+  } = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {};
   if (tablePreserveWidth && isFullWidthModeEnabled) {
     return createTable({
       schema,

package/dist/es2019/utils/drag-menu.js

@@ -58,7 +58,7 @@ const defaultSelectionRect = {
   right: 0,
   bottom: 0
 };
-export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, tablePreserveWidth = false) => {
   var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
   const addOptions = direction === 'row' ? [{
     label: 'above',
@@ -138,7 +138,7 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
           moveCursorToInsertedRow: true
         })(state, dispatch);
       } else {
-        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
+        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
       }
       return true;
     },
@@ -150,7 +150,7 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
     onClick: (state, dispatch) => {
       const selectionRect = getClosestSelectionRect(state);
       if (selectionRect) {
-        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
         if (newResizeState) {
           distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, newResizeState)(state, dispatch);
           return true;
@@ -176,7 +176,7 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
       if (direction === 'row') {
         deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect, !!isHeaderRowRequired)(state, dispatch);
       } else {
-        deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect)(state, dispatch, editorView);
+        deleteColumnsWithAnalytics(editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect)(state, dispatch, editorView);
       }
       return true;
     },

package/dist/esm/commands/column-resize.js

@@ -122,6 +122,7 @@ export var activateNextResizeArea = function activateNextResizeArea(direction) {
   };
 };
 export var changeColumnWidthByStep = function changeColumnWidthByStep(stepSize, getEditorContainerWidth) {
+  var tablePreserveWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (state, dispatch, view) {
     var customTr = state.tr;
     var fakeDispatch = function fakeDispatch(tr) {
@@ -170,14 +171,15 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(stepSize,
       table: originalTable,
       tableRef: dom,
       start: tableStartPosition,
-      domAtPos: domAtPos
+      domAtPos: domAtPos,
+      tablePreserveWidth: tablePreserveWidth
     });
     updateControls()(state);
     var selectionRect = getSelectionRect(state.selection);
     var selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
     // only selected (or selected - 1) columns should be distributed
     var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-    var newResizeState = resizeColumn(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined);
+    var newResizeState = resizeColumn(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined, tablePreserveWidth);
     customTr = updateColumnWidths(newResizeState, originalTable, tableStartPosition)(customTr);
     if (dispatch) {
       dispatch(customTr);

package/dist/esm/commands/delete.js

@@ -1,8 +1,9 @@
 import { deleteColumns } from '../transforms/delete-columns';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 export var deleteColumnsCommand = function deleteColumnsCommand(rect) {
+  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (state, dispatch, view) {
-    var tr = deleteColumns(rect, getAllowAddColumnCustomStep(state), view)(state.tr);
+    var tr = deleteColumns(rect, getAllowAddColumnCustomStep(state), view, tablePreserveWidth)(state.tr);
     if (dispatch) {
       dispatch(tr);
       return true;

package/dist/esm/commands/insert.js

@@ -21,6 +21,7 @@ function addColumnAtCustomStep(column) {
   };
 }
 export function addColumnAt(getEditorContainerWidth) {
+  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (column) {
     var allowAddColumnCustomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var view = arguments.length > 2 ? arguments[2] : undefined;
@@ -34,7 +35,7 @@ export function addColumnAt(getEditorContainerWidth) {
       var table = findTable(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = rescaleColumns()(table, view)(updatedTr);
+        updatedTr = rescaleColumns(tablePreserveWidth)(table, view)(updatedTr);
       }
       if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event') && view) {
         updatedTr = updateRowOrColumnMovedTransform({
@@ -52,6 +53,7 @@ export function addColumnAt(getEditorContainerWidth) {
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
 export var addColumnBefore = function addColumnBefore(getEditorContainerWidth) {
+  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (state, dispatch, view) {
     var table = findTable(state.selection);
     if (!table) {
@@ -59,7 +61,7 @@ export var addColumnBefore = function addColumnBefore(getEditorContainerWidth) {
     }
     if (dispatch) {
       var rect = selectedRect(state);
-      dispatch(addColumnAt(getEditorContainerWidth)(rect.left, getAllowAddColumnCustomStep(state), view)(state.tr));
+      dispatch(addColumnAt(getEditorContainerWidth, tablePreserveWidth)(rect.left, getAllowAddColumnCustomStep(state), view)(state.tr));
     }
     return true;
   };
@@ -81,9 +83,10 @@ export var addColumnAfter = function addColumnAfter(getEditorContainerWidth) {
   };
 };
 export var insertColumn = function insertColumn(getEditorContainerWidth) {
+  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (column) {
     return function (state, dispatch, view) {
-      var tr = addColumnAt(getEditorContainerWidth)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
+      var tr = addColumnAt(getEditorContainerWidth, tablePreserveWidth)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
       var table = findTable(tr.selection);
       if (!table) {
         return false;

package/dist/esm/commands-with-analytics.js

@@ -183,6 +183,7 @@ export var insertRowWithAnalytics = function insertRowWithAnalytics(editorAnalyt
   };
 };
 export var insertColumnWithAnalytics = function insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI) {
+  var tablePreserveWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (inputMethod, position) {
     return withEditorAnalyticsAPI(function (state) {
       var _getSelectedTableInfo2 = getSelectedTableInfo(state.selection),
@@ -200,7 +201,7 @@ export var insertColumnWithAnalytics = function insertColumnWithAnalytics(getEdi
         },
         eventType: EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)(insertColumn(getEditorContainerWidth)(position));
+    })(editorAnalyticsAPI)(insertColumn(getEditorContainerWidth, tablePreserveWidth)(position));
   };
 };
 export var deleteRowsWithAnalytics = function deleteRowsWithAnalytics(editorAnalyticsAPI) {
@@ -232,6 +233,7 @@ export var deleteRowsWithAnalytics = function deleteRowsWithAnalytics(editorAnal
   };
 };
 export var deleteColumnsWithAnalytics = function deleteColumnsWithAnalytics(editorAnalyticsAPI) {
+  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (inputMethod, rect) {
     return withEditorAnalyticsAPI(function (_ref6) {
       var selection = _ref6.selection;
@@ -251,7 +253,7 @@ export var deleteColumnsWithAnalytics = function deleteColumnsWithAnalytics(edit
         },
         eventType: EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)(deleteColumnsCommand(rect));
+    })(editorAnalyticsAPI)(deleteColumnsCommand(rect, tablePreserveWidth));
   };
 };
 export var deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = function deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI) {

package/dist/esm/event-handlers.js

@@ -328,6 +328,7 @@ export function handleTripleClick(view, pos) {
   return false;
 }
 export var handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI, editorView) {
+  var tablePreserveWidth = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var oldSelection = oldState.tr.selection;
   var tr = newState.tr;
   if (oldSelection instanceof CellSelection) {
@@ -370,7 +371,7 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
               isHeaderRowRequired = _getPluginState9.pluginConfig.isHeaderRowRequired;
             tr = deleteRows(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
-            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView)(tr);
+            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, tablePreserveWidth)(tr);
           }
         }
       }