@atlaskit/editor-plugin-table 7.16.16 → 7.16.18

package/dist/cjs/toolbar.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isLayoutOptionDisabled = exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getSelectedAlignmentIcon = exports.getLockBtnConfig = exports.getDistributeConfig = exports.getClosestSelectionRect = exports.getClosestSelectionOrTableRect = exports.getAlignmentOptionsConfig = void 0;
+exports.isLayoutOptionDisabled = exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getSelectedAlignmentIcon = exports.getDistributeConfig = exports.getClosestSelectionRect = exports.getClosestSelectionOrTableRect = exports.getAlignmentOptionsConfig = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -32,12 +32,12 @@ var _commands = require("./commands");
 var _commandsWithAnalytics = require("./commands-with-analytics");
 var _pluginFactory = require("./pm-plugins/plugin-factory");
 var _tableResizing = require("./pm-plugins/table-resizing");
+var _misc = require("./pm-plugins/table-resizing/utils/misc");
 var _resizeState = require("./pm-plugins/table-resizing/utils/resize-state");
 var _tableWidth = require("./pm-plugins/table-width");
 var _transforms = require("./transforms");
 var _types = require("./types");
 var _FloatingAlignmentButtons = require("./ui/FloatingAlignmentButtons/FloatingAlignmentButtons");
-var _icons = require("./ui/icons");
 var _utils4 = require("./utils");
 var _alignment = require("./utils/alignment");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -46,8 +46,19 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
+  var isTableScalingWithFixedColumnWidthsOptionShown = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var areTableColumnWidthsFixed = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var optionItem = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'item-checkbox' : 'item';
   var options = [{
+    id: 'editor.table.lockColumnWidths',
+    title: formatMessage(_messages.tableMessages.lockColumnWidths),
+    onClick: (0, _commandsWithAnalytics.toggleFixedColumnWidthsOptionAnalytics)(editorAnalyticsAPI, _analytics.INPUT_METHOD.FLOATING_TB),
+    selected: areTableColumnWidthsFixed,
+    hidden: !isTableScalingWithFixedColumnWidthsOptionShown,
+    domItemOptions: {
+      type: optionItem
+    }
+  }, {
     id: 'editor.table.headerRow',
     title: formatMessage(_messages.tableMessages.headerRow),
     onClick: (0, _commandsWithAnalytics.toggleHeaderRowWithAnalytics)(editorAnalyticsAPI),
@@ -95,7 +106,8 @@ var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMen
       hidden: options.every(function (option) {
         return option.hidden;
       }),
-      options: options
+      options: options,
+      dropdownWidth: isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined
     };
   } else {
     return {
@@ -106,7 +118,8 @@ var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMen
       hidden: options.every(function (option) {
         return option.hidden;
       }),
-      options: options
+      options: options,
+      dropdownWidth: isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined
     };
   }
 };
@@ -320,7 +333,8 @@ var getClosestSelectionOrTableRect = exports.getClosestSelectionOrTableRect = fu
   return (0, _utils3.isSelectionType)(selection, 'cell') ? (0, _utils3.getSelectionRect)(selection) : tableRect;
 };
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options) {
-  var shouldUseIncreasedScalingPercent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var isTableScalingWithFixedColumnWidthsOptionEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   return function (config) {
     return function (state, intl) {
       var tableObject = (0, _utils3.findTable)(state.selection);
@@ -332,14 +346,26 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
       var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
       if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
         var nodeType = state.schema.nodes.table;
-        var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
-        var alignmentMenu;
         var isNested = pluginState.tablePos && (0, _utils4.isTableNested)(state, pluginState.tablePos);
-        alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth) : [];
-        var cellItems;
-        cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, shouldUseIncreasedScalingPercent);
-        var columnSettingsItems;
-        columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
+        var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingWithFixedColumnWidthsOptionEnabled && !isNested;
+        var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
+        var editorView = getEditorView();
+        var getDomRef = function getDomRef(editorView) {
+          var element;
+          var domAtPos = editorView.domAtPos.bind(editorView);
+          var parent = (0, _utils2.findParentDomRefOfType)(nodeType, domAtPos)(state.selection);
+          if (parent) {
+            var tableRef = parent.querySelector('table') || undefined;
+            if (tableRef) {
+              element = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
+            }
+          }
+          return element;
+        };
+        var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
+        var alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView) : [];
+        var cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, shouldUseIncreasedScalingPercent);
+        var columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
 
         // Check if we need to show confirm dialog for delete button
@@ -366,18 +392,6 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
             };
           };
         }
-        var getDomRef = function getDomRef(editorView) {
-          var element;
-          var domAtPos = editorView.domAtPos.bind(editorView);
-          var parent = (0, _utils2.findParentDomRefOfType)(nodeType, domAtPos)(state.selection);
-          if (parent) {
-            var tableRef = parent.querySelector('table') || undefined;
-            if (tableRef) {
-              element = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
-            }
-          }
-          return element;
-        };
         var _getEditorFeatureFlag = getEditorFeatureFlags(),
           stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
         return {
@@ -450,23 +464,6 @@ var getCellItems = function getCellItems(state, view, _ref3, getEditorContainerW
   }
   return [];
 };
-var getLockBtnConfig = exports.getLockBtnConfig = function getLockBtnConfig(editorAnalyticsAPI) {
-  return function (state, dispatch, editorView) {
-    var selectionOrTableRect = getClosestSelectionOrTableRect(state);
-    if (!editorView || !selectionOrTableRect) {
-      return false;
-    }
-    var tr = state.tr;
-    var table = (0, _utils3.findTable)(tr.selection);
-    if (!table) {
-      return false;
-    } else {
-      var displayMode = table.node.attrs.displayMode;
-      (0, _commandsWithAnalytics.toggleTableLockWithAnalytics)(editorAnalyticsAPI)(displayMode, _analytics.INPUT_METHOD.FLOATING_TB)(state, dispatch);
-      return true;
-    }
-  };
-};
 var getDistributeConfig = exports.getDistributeConfig = function getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI) {
   var isTableScalingEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (state, dispatch, editorView) {
@@ -497,29 +494,6 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
   var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
   var wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
   var items = [];
-  var isNested = pluginState.tablePos && (0, _utils4.isTableNested)(editorState, pluginState.tablePos);
-  var isTableScalingLockBtnEnabled = !isNested && isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button');
-  if (isTableScalingLockBtnEnabled) {
-    var _pluginState$tableNod;
-    var areColumnWidthsLocked = (pluginState === null || pluginState === void 0 || (_pluginState$tableNod = pluginState.tableNode) === null || _pluginState$tableNod === void 0 ? void 0 : _pluginState$tableNod.attrs.displayMode) === 'fixed';
-    var title = areColumnWidthsLocked ? formatMessage(_messages.tableMessages.unlockColumnWidths) : formatMessage(_messages.tableMessages.lockColumnWidths);
-    items.push({
-      id: 'editor.table.lockColumns',
-      type: 'button',
-      title: title,
-      icon: function icon() {
-        return (0, _react.jsx)(_icons.DisplayModeIcon, {
-          size: "medium",
-          label: title
-        });
-      },
-      onClick: function onClick(state, dispatch, view) {
-        return getLockBtnConfig(editorAnalyticsAPI)(state, dispatch, view);
-      },
-      selected: areColumnWidthsLocked,
-      testId: 'table-lock-column-widths-btn'
-    });
-  }
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
     items.push({
       id: 'editor.table.distributeColumns',
@@ -600,7 +574,7 @@ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch)
   }
   return false;
 };
-var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI, getEditorContainerWidth) {
+var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView) {
   var formatMessage = _ref6.formatMessage;
   var tableObject = (0, _utils3.findTable)(editorState.selection);
   if (!tableObject) {
@@ -632,8 +606,8 @@ var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function get
       icon: icon,
       title: formatMessage(layoutToMessages[value]),
       selected: (0, _alignment.normaliseAlignment)(currentLayout) === value,
-      onClick: (0, _commandsWithAnalytics.setTableAlignmentWithAnalytics)(editorAnalyticsAPI)(value, currentLayout, _analytics.INPUT_METHOD.FLOATING_TB)
-    }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
+      onClick: (0, _commandsWithAnalytics.setTableAlignmentWithAnalytics)(editorAnalyticsAPI)(value, currentLayout, _analytics.INPUT_METHOD.FLOATING_TB, _analytics.CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED)
+    }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, getDomRef, editorView) && {
       disabled: value !== 'center'
     });
   });
@@ -663,10 +637,19 @@ var getSelectedAlignmentIcon = exports.getSelectedAlignmentIcon = function getSe
     return icon.value === (0, _alignment.normaliseAlignment)(selectedAlignment);
   });
 };
-var isLayoutOptionDisabled = exports.isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth) {
-  var lineLength = getEditorContainerWidth().lineLength;
-  var tableWidth = (0, _nodeWidth.getTableContainerWidth)(selectedNode);
-  if (selectedNode && lineLength && tableWidth > lineLength) {
+var isLayoutOptionDisabled = exports.isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth, getDomRef, editorView) {
+  var _getEditorContainerWi = getEditorContainerWidth(),
+    lineLength = _getEditorContainerWi.lineLength;
+  var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(selectedNode);
+
+  // table may be scaled, use the scale percent to calculate the table width
+  if (editorView) {
+    var tableWrapper = getDomRef(editorView);
+    var tableWrapperWidth = (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.clientWidth) || tableContainerWidth;
+    var scalePercent = (0, _misc.getStaticTableScalingPercent)(selectedNode, tableWrapperWidth);
+    tableContainerWidth = tableContainerWidth * scalePercent;
+  }
+  if (selectedNode && lineLength && tableContainerWidth > lineLength) {
     return true;
   }
   return false;

package/dist/cjs/ui/icons/index.js

@@ -27,12 +27,6 @@ Object.defineProperty(exports, "AddRowBelowIcon", {
     return _AddRowBelowIcon.AddRowBelowIcon;
   }
 });
-Object.defineProperty(exports, "DisplayModeIcon", {
-  enumerable: true,
-  get: function get() {
-    return _DisplayModeIcon.DisplayModeIcon;
-  }
-});
 Object.defineProperty(exports, "DragHandleDisabledIcon", {
   enumerable: true,
   get: function get() {
@@ -72,7 +66,6 @@ Object.defineProperty(exports, "SplitCellIcon", {
 var _DragHandleIcon = require("./DragHandleIcon");
 var _DragInMotionIcon = require("./DragInMotionIcon");
 var _DragHandleDisabledIcon = require("./DragHandleDisabledIcon");
-var _DisplayModeIcon = require("./DisplayModeIcon");
 var _MinimisedHandle = require("./MinimisedHandle");
 var _MergeCellsIcon = require("./MergeCellsIcon");
 var _SplitCellIcon = require("./SplitCellIcon");

package/dist/cjs/utils/snapping.js

@@ -26,7 +26,7 @@ var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreser
     innerGuidelines: false,
     breakoutPoints: false
   };
-  var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2;
+  var dynamicFullWidthLine = editorContainerWith - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
   var guides = [dynamicFullWidthLine - lengthOffset];
   if (!exclude.breakoutPoints) {
     guides.unshift(_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset);
@@ -44,7 +44,7 @@ var defaultTablePreserveSnappingWidths = exports.defaultTablePreserveSnappingWid
     innerGuidelines: false,
     breakoutPoints: false
   };
-  return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
+  return editorContainerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 };
 
 /**

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

@@ -2,6 +2,7 @@ import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
 import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_BREAKOUT, TABLE_DISPLAY_MODE } from '@atlaskit/editor-common/analytics';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellClosestToPos, findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearMultipleCells } from './commands/clear';
 import { wrapTableInExpand } from './commands/collapse';
@@ -9,7 +10,7 @@ import { changeColumnWidthByStep } from './commands/column-resize';
 import { deleteColumnsCommand } from './commands/delete';
 import { setTableDisplayMode } from './commands/display-mode';
 import { insertColumn, insertRow } from './commands/insert';
-import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleCellAttrs, setTableAlignment } from './commands/misc';
+import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleCellAttrs, setTableAlignment, setTableAlignmentWithTableContentWithPos } from './commands/misc';
 import { sortByColumn } from './commands/sort';
 import { splitCell } from './commands/split-cell';
 import { getNextLayout, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './commands/toggle';
@@ -454,7 +455,7 @@ export const wrapTableInExpandWithAnalytics = editorAnalyticsAPI => withEditorAn
     eventType: EVENT_TYPE.TRACK
   };
 })(editorAnalyticsAPI)(wrapTableInExpand);
-export const toggleTableLockWithAnalytics = editorAnalyticsAPI => (displayMode, inputMethod) => withEditorAnalyticsAPI(state => {
+export const toggleFixedColumnWidthsOptionAnalytics = (editorAnalyticsAPI, inputMethod) => withEditorAnalyticsAPI(state => {
   const {
     table,
     totalRowCount,
@@ -462,7 +463,7 @@ export const toggleTableLockWithAnalytics = editorAnalyticsAPI => (displayMode,
   } = getSelectedTableInfo(state.selection);
   let previousDisplayMode;
   let newDisplayMode;
-  switch (displayMode) {
+  switch (table === null || table === void 0 ? void 0 : table.node.attrs.displayMode) {
     case 'fixed':
       previousDisplayMode = TABLE_DISPLAY_MODE.FIXED;
       newDisplayMode = TABLE_DISPLAY_MODE.DEFAULT;
@@ -490,7 +491,7 @@ export const toggleTableLockWithAnalytics = editorAnalyticsAPI => (displayMode,
     eventType: EVENT_TYPE.TRACK
   };
 })(editorAnalyticsAPI)(editorCommandToPMCommand(setTableDisplayMode));
-export const setTableAlignmentWithAnalytics = editorAnalyticsAPI => (newAlignment, previousAlignment, inputMethod) => withEditorAnalyticsAPI(state => {
+export const setTableAlignmentWithAnalytics = editorAnalyticsAPI => (newAlignment, previousAlignment, inputMethod, reason) => withEditorAnalyticsAPI(state => {
   const {
     table,
     totalRowCount,
@@ -507,7 +508,29 @@ export const setTableAlignmentWithAnalytics = editorAnalyticsAPI => (newAlignmen
       previousAlignment: previousAlignment === 'center' || previousAlignment === 'align-start' ? previousAlignment : null,
       totalRowCount,
       totalColumnCount,
-      inputMethod
+      inputMethod,
+      reason
     }
   };
-})(editorAnalyticsAPI)(editorCommandToPMCommand(setTableAlignment(newAlignment)));
+})(editorAnalyticsAPI)(editorCommandToPMCommand(setTableAlignment(newAlignment)));
+export const setTableAlignmentWithTableContentWithPosWithAnalytics = editorAnalyticsAPI => (newAlignment, previousAlignment, tableNodeWithPos, inputMethod, reason) => withEditorAnalyticsAPI(() => {
+  const map = TableMap.get(tableNodeWithPos.node);
+  const totalRowCount = map.height;
+  const totalColumnCount = map.width;
+  const attributes = {
+    tableWidth: tableNodeWithPos.node.attrs.width,
+    newAlignment: newAlignment,
+    previousAlignment: previousAlignment,
+    totalRowCount: totalRowCount,
+    totalColumnCount: totalColumnCount,
+    inputMethod: inputMethod,
+    reason: reason
+  };
+  return {
+    action: TABLE_ACTION.CHANGED_ALIGNMENT,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: attributes
+  };
+})(editorAnalyticsAPI)(editorCommandToPMCommand(setTableAlignmentWithTableContentWithPos(newAlignment, tableNodeWithPos)));

package/dist/es2019/nodeviews/TableContainer.js

@@ -1,11 +1,13 @@
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
-import { setTableAlignmentWithTableContentWithPos } from '../commands/misc';
+import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
+import { ALIGN_CENTER, ALIGN_START } from '../utils/alignment';
 import { TableResizer } from './TableResizer';
 export const InnerContainer = /*#__PURE__*/forwardRef(({
   className,
@@ -41,7 +43,7 @@ const AlignmentTableContainer = ({
   getPos,
   editorView
 }) => {
-  const alignment = node.attrs.layout;
+  const alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
   const {
     tableState
   } = useSharedPluginState(pluginInjectionApi, ['table']);
@@ -51,18 +53,20 @@ const AlignmentTableContainer = ({
         wasFullWidthModeEnabled,
         isFullWidthModeEnabled
       } = tableState;
-      if (wasFullWidthModeEnabled && !isFullWidthModeEnabled && node.attrs.width > akEditorDefaultLayoutWidth) {
+      const {
+        state,
+        dispatch
+      } = editorView;
+      if (wasFullWidthModeEnabled && isFullWidthModeEnabled !== undefined && !isFullWidthModeEnabled && alignment !== ALIGN_CENTER && node.attrs.width > akEditorDefaultLayoutWidth) {
+        var _pluginInjectionApi$a;
         const pos = getPos && getPos();
         if (typeof pos !== 'number') {
           return;
         }
-        const tr = setTableAlignmentWithTableContentWithPos('center', {
+        setTableAlignmentWithTableContentWithPosWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(ALIGN_CENTER, alignment, {
           pos,
           node
-        })(editorView.state);
-        if (tr) {
-          editorView.dispatch(tr);
-        }
+        }, INPUT_METHOD.AUTO, CHANGE_ALIGNMENT_REASON.EDITOR_APPEARANCE_CHANGED)(state, dispatch);
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -176,8 +180,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     })) !== null && _pluginInjectionApi$g !== void 0 ? _pluginInjectionApi$g : false;
   }, [pluginInjectionApi, editorView]);
   const attachAnalyticsEvent = useCallback(payload => {
-    var _pluginInjectionApi$a;
-    return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.attachAnalyticsEvent(payload);
+    var _pluginInjectionApi$a2;
+    return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.attachAnalyticsEvent(payload);
   }, [pluginInjectionApi]);
   const displayGapCursor = useCallback(toggle => {
     var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
@@ -198,13 +202,13 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
     // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
     // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
-    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - akEditorGutterPadding * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
   } else {
     // 76 is currently an accepted padding value considering the spacing for resizer handle
     // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
     // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
     // padding left = padding right = akEditorGutterPadding = 32
-    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 : containerWidth - akEditorGutterPadding * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
   }
   let width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {

package/dist/es2019/nodeviews/TableResizer.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import rafSchd from 'raf-schd';
 import { useIntl } from 'react-intl-next';
-import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
@@ -9,10 +9,11 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { browser } from '@atlaskit/editor-common/utils';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
-import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { setTableAlignmentWithTableContentWithPos, updateWidthToWidest } from '../commands/misc';
+import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
+import { updateWidthToWidest } from '../commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
@@ -80,7 +81,7 @@ const getVisibleGuidelines = (guidelines, containerWidth, lineLength, isTableSca
     // guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
     const preserve_table_widths_adjustment = -1 * PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET + 1;
     guidelineVisibleAdjustment = isFullWidthModeEnabled ? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
-    : -2 * akEditorGutterPadding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
+    : -2 * akEditorGutterPaddingDynamic() + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
   }
   const width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
   return guidelines.filter(guideline => {
@@ -110,7 +111,7 @@ export const TableResizer = ({
   pluginInjectionApi,
   isFullWidthModeEnabled
 }) => {
-  var _findTable, _editorView$state;
+  var _findTable, _editorView$state, _pluginInjectionApi$a2;
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   const isResizing = useRef(false);
@@ -147,31 +148,29 @@ export const TableResizer = ({
   }) => {
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
+      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
   }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, lineLength, isFullWidthModeEnabled]);
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
     x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
     // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
-    isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
+    isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
   } : undefined, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
   const switchToCenterAlignment = useCallback((pos, node, newWidth, state, dispatch) => {
     if (isTableAlignmentEnabled && node && node.attrs.layout === ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
     // We don't want to switch alignment in Full-width editor
     isResizing.current) {
+      var _pluginInjectionApi$a;
       const tableNodeWithPos = {
         pos,
         node
       };
-      const tr = setTableAlignmentWithTableContentWithPos(ALIGN_CENTER, tableNodeWithPos)(state);
-      if (tr) {
-        dispatch(tr);
-      }
+      setTableAlignmentWithTableContentWithPosWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(ALIGN_CENTER, ALIGN_START, tableNodeWithPos, INPUT_METHOD.AUTO, CHANGE_ALIGNMENT_REASON.EDITOR_APPEARANCE_CHANGED)(state, dispatch);
       return true;
     }
     return false;
-  }, [lineLength, isTableAlignmentEnabled, isResizing]);
+  }, [isTableAlignmentEnabled, lineLength, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions]);
   useEffect(() => {
     return () => {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
@@ -213,7 +212,7 @@ export const TableResizer = ({
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
+    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
@@ -238,7 +237,7 @@ export const TableResizer = ({
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    const editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth;
+    const editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth;
     const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
     updateActiveGuidelines(closestSnap);
 
@@ -311,13 +310,13 @@ export const TableResizer = ({
     dispatch(tr);
     if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
       if (delta.width < 0) {
-        var _pluginInjectionApi$a;
-        pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify(formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
+        var _pluginInjectionApi$a3;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions.ariaNotify(formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
           newWidth: newWidth
         }));
       } else if (delta.width > 0) {
-        var _pluginInjectionApi$a2;
-        pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.ariaNotify(formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
+        var _pluginInjectionApi$a4;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions.ariaNotify(formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
           newWidth: newWidth
         }));
       }

package/dist/es2019/plugin.js

@@ -61,7 +61,8 @@ const tablesPlugin = ({
     };
   };
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-  const shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+  const isTableScalingWithFixedColumnWidthsOptionEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+  const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
   return {
     name: 'table',
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
@@ -460,7 +461,7 @@ const tablesPlugin = ({
           return tr;
         }
       }],
-      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current, options, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
+      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current, options, isTableScalingWithFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

package/dist/es2019/pm-plugins/keymap.js

@@ -1,5 +1,5 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
+import { addColumnAfter, addColumnAfterVO, addColumnBefore, addColumnBeforeVO, addRowAfter, addRowAfterVO, addRowBefore, addRowBeforeVO, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -23,6 +23,12 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
   bindKeymapWithCommand(addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
   bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
   bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
+  if (getBooleanFF('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg')) {
+    bindKeymapWithCommand(addRowBeforeVO.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
+    bindKeymapWithCommand(addRowAfterVO.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
+    bindKeymapWithCommand(addColumnBeforeVO.common, addColumnBeforeCommand(isTableScalingEnabled), list);
+    bindKeymapWithCommand(addColumnAfterVO.common, addColumnAfterCommand(isTableScalingEnabled), list);
+  }
   if (dragAndDropEnabled) {
     // Move row/column shortcuts
     /**

package/dist/es2019/pm-plugins/table-resizing/utils/misc.js

@@ -2,7 +2,7 @@ import { getParentNodeWidth, getTableContainerWidth, layoutToWidth } from '@atla
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-common/ui';
 import { calcTableColumnWidths, containsClassName } from '@atlaskit/editor-common/utils';
-import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { hasTableBeenResized } from './colgroup';
 import { MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
 
@@ -12,7 +12,7 @@ export function getLayoutSize(tableLayout, containerWidth = 0, options) {
     isFullWidthModeEnabled
   } = options;
   if (isFullWidthModeEnabled) {
-    return containerWidth ? Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
+    return containerWidth ? Math.min(containerWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
   }
   const calculatedTableWidth = calcTableWidth(tableLayout, containerWidth, true);
   if (calculatedTableWidth !== 'inherit') {