@atlaskit/editor-plugin-table 7.16.16 → 7.16.18

package/dist/es2019/toolbar.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
@@ -20,22 +20,31 @@ import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
-import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, setTableAlignmentWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, toggleTableLockWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
+import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, setTableAlignmentWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleFixedColumnWidthsOptionAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import { getStaticTableScalingPercent } from './pm-plugins/table-resizing/utils/misc';
 import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
 import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { canMergeCells } from './transforms';
 import { TableCssClassName } from './types';
 import { FloatingAlignmentButtons } from './ui/FloatingAlignmentButtons/FloatingAlignmentButtons';
-import { DisplayModeIcon } from './ui/icons';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, isTableNested } from './utils';
 import { normaliseAlignment } from './utils/alignment';
 export const getToolbarMenuConfig = (config, state, {
   formatMessage
-}, editorAnalyticsAPI) => {
+}, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown = false, areTableColumnWidthsFixed = false) => {
   const optionItem = getBooleanFF('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'item-checkbox' : 'item';
   const options = [{
+    id: 'editor.table.lockColumnWidths',
+    title: formatMessage(messages.lockColumnWidths),
+    onClick: toggleFixedColumnWidthsOptionAnalytics(editorAnalyticsAPI, INPUT_METHOD.FLOATING_TB),
+    selected: areTableColumnWidthsFixed,
+    hidden: !isTableScalingWithFixedColumnWidthsOptionShown,
+    domItemOptions: {
+      type: optionItem
+    }
+  }, {
     id: 'editor.table.headerRow',
     title: formatMessage(messages.headerRow),
     onClick: toggleHeaderRowWithAnalytics(editorAnalyticsAPI),
@@ -81,7 +90,8 @@ export const getToolbarMenuConfig = (config, state, {
       icon: TableOptionsIcon,
       title: formatMessage(messages.tableOptions),
       hidden: options.every(option => option.hidden),
-      options
+      options,
+      dropdownWidth: isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined
     };
   } else {
     return {
@@ -90,7 +100,8 @@ export const getToolbarMenuConfig = (config, state, {
       testId: 'table_options',
       title: formatMessage(messages.tableOptions),
       hidden: options.every(option => option.hidden),
-      options
+      options,
+      dropdownWidth: isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined
     };
   }
 };
@@ -305,7 +316,7 @@ export const getClosestSelectionOrTableRect = state => {
   const tableRect = new Rect(0, 0, map.width, map.height);
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
 };
-export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options, shouldUseIncreasedScalingPercent = false) => config => (state, intl) => {
+export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options, isTableScalingWithFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => config => (state, intl) => {
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
@@ -315,14 +326,26 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
   const isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
   if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
     const nodeType = state.schema.nodes.table;
-    const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
-    let alignmentMenu;
     const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
-    alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth) : [];
-    let cellItems;
-    cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, shouldUseIncreasedScalingPercent);
-    let columnSettingsItems;
-    columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
+    const isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingWithFixedColumnWidthsOptionEnabled && !isNested;
+    const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
+    const editorView = getEditorView();
+    const getDomRef = editorView => {
+      let element;
+      const domAtPos = editorView.domAtPos.bind(editorView);
+      const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
+      if (parent) {
+        const tableRef = parent.querySelector('table') || undefined;
+        if (tableRef) {
+          element = closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
+        }
+      }
+      return element;
+    };
+    const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
+    const alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView) : [];
+    const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, shouldUseIncreasedScalingPercent);
+    const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
     const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
 
     // Check if we need to show confirm dialog for delete button
@@ -342,18 +365,6 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
         onConfirm: (isChecked = false) => clickWithCheckboxHandler(isChecked, tableObject.node)
       });
     }
-    const getDomRef = editorView => {
-      let element;
-      const domAtPos = editorView.domAtPos.bind(editorView);
-      const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
-      if (parent) {
-        const tableRef = parent.querySelector('table') || undefined;
-        if (tableRef) {
-          element = closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
-        }
-      }
-      return element;
-    };
     const {
       stickyScrollbar
     } = getEditorFeatureFlags();
@@ -424,25 +435,6 @@ const getCellItems = (state, view, {
   }
   return [];
 };
-export const getLockBtnConfig = editorAnalyticsAPI => (state, dispatch, editorView) => {
-  const selectionOrTableRect = getClosestSelectionOrTableRect(state);
-  if (!editorView || !selectionOrTableRect) {
-    return false;
-  }
-  const {
-    tr
-  } = state;
-  const table = findTable(tr.selection);
-  if (!table) {
-    return false;
-  } else {
-    const {
-      displayMode
-    } = table.node.attrs;
-    toggleTableLockWithAnalytics(editorAnalyticsAPI)(displayMode, INPUT_METHOD.FLOATING_TB)(state, dispatch);
-    return true;
-  }
-};
 export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false) => (state, dispatch, editorView) => {
   const selectionOrTableRect = getClosestSelectionOrTableRect(state);
   if (!editorView || !selectionOrTableRect) {
@@ -470,25 +462,6 @@ const getColumnSettingItems = (editorState, editorView, {
   const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
   const wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
   const items = [];
-  const isNested = pluginState.tablePos && isTableNested(editorState, pluginState.tablePos);
-  const isTableScalingLockBtnEnabled = !isNested && isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-  if (isTableScalingLockBtnEnabled) {
-    var _pluginState$tableNod;
-    const areColumnWidthsLocked = (pluginState === null || pluginState === void 0 ? void 0 : (_pluginState$tableNod = pluginState.tableNode) === null || _pluginState$tableNod === void 0 ? void 0 : _pluginState$tableNod.attrs.displayMode) === 'fixed';
-    const title = areColumnWidthsLocked ? formatMessage(messages.unlockColumnWidths) : formatMessage(messages.lockColumnWidths);
-    items.push({
-      id: 'editor.table.lockColumns',
-      type: 'button',
-      title,
-      icon: () => jsx(DisplayModeIcon, {
-        size: "medium",
-        label: title
-      }),
-      onClick: (state, dispatch, view) => 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',
@@ -565,7 +538,7 @@ const highlightColumnsHandler = (state, dispatch) => {
 };
 export const getAlignmentOptionsConfig = (editorState, {
   formatMessage
-}, editorAnalyticsAPI, getEditorContainerWidth) => {
+}, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView) => {
   const tableObject = findTable(editorState.selection);
   if (!tableObject) {
     return [];
@@ -598,8 +571,8 @@ export const getAlignmentOptionsConfig = (editorState, {
       icon: icon,
       title: formatMessage(layoutToMessages[value]),
       selected: normaliseAlignment(currentLayout) === value,
-      onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB),
-      ...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
+      onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB, CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED),
+      ...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, getDomRef, editorView) && {
         disabled: value !== 'center'
       })
     };
@@ -628,10 +601,20 @@ export const getSelectedAlignmentIcon = (alignmentIcons, selectedNode) => {
   const selectedAlignment = selectedNode.attrs.layout;
   return alignmentIcons.find(icon => icon.value === normaliseAlignment(selectedAlignment));
 };
-export const isLayoutOptionDisabled = (selectedNode, getEditorContainerWidth) => {
-  const lineLength = getEditorContainerWidth().lineLength;
-  const tableWidth = getTableContainerWidth(selectedNode);
-  if (selectedNode && lineLength && tableWidth > lineLength) {
+export const isLayoutOptionDisabled = (selectedNode, getEditorContainerWidth, getDomRef, editorView) => {
+  const {
+    lineLength
+  } = getEditorContainerWidth();
+  let tableContainerWidth = getTableContainerWidth(selectedNode);
+
+  // table may be scaled, use the scale percent to calculate the table width
+  if (editorView) {
+    const tableWrapper = getDomRef(editorView);
+    const tableWrapperWidth = (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.clientWidth) || tableContainerWidth;
+    const scalePercent = getStaticTableScalingPercent(selectedNode, tableWrapperWidth);
+    tableContainerWidth = tableContainerWidth * scalePercent;
+  }
+  if (selectedNode && lineLength && tableContainerWidth > lineLength) {
     return true;
   }
   return false;

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

@@ -1,7 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
-export { DisplayModeIcon } from './DisplayModeIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
 export { MergeCellsIcon } from './MergeCellsIcon';
 export { SplitCellIcon } from './SplitCellIcon';

package/dist/es2019/utils/snapping.js

@@ -1,5 +1,5 @@
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 const numberOfLanesInDefaultLayoutWidth = 12;
 const calculateSubSnappingWidths = (totalLanes, totalWidth) => new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map((v, i) => v * (i + 1) * 2);
 export const calculateDefaultSnappings = (lengthOffset = 0) => [...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, akEditorFullWidthLayoutWidth + lengthOffset];
@@ -8,7 +8,7 @@ export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorC
   innerGuidelines: false,
   breakoutPoints: false
 }) => {
-  const dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2;
+  const dynamicFullWidthLine = editorContainerWith - akEditorGutterPaddingDynamic() * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPaddingDynamic() * 2;
   const guides = [dynamicFullWidthLine - lengthOffset];
   if (!exclude.breakoutPoints) {
     guides.unshift(akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset);
@@ -25,7 +25,7 @@ export const defaultTablePreserveSnappingWidths = (lengthOffset, editorContainer
   innerGuidelines: false,
   breakoutPoints: false
 }) => {
-  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
+  return editorContainerWidth - akEditorGutterPaddingDynamic() * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 };
 
 /**

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

@@ -5,6 +5,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';
@@ -12,7 +13,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';
@@ -493,47 +494,45 @@ export var wrapTableInExpandWithAnalytics = function wrapTableInExpandWithAnalyt
     };
   })(editorAnalyticsAPI)(wrapTableInExpand);
 };
-export var toggleTableLockWithAnalytics = function toggleTableLockWithAnalytics(editorAnalyticsAPI) {
-  return function (displayMode, inputMethod) {
-    return withEditorAnalyticsAPI(function (state) {
-      var _getSelectedTableInfo13 = getSelectedTableInfo(state.selection),
-        table = _getSelectedTableInfo13.table,
-        totalRowCount = _getSelectedTableInfo13.totalRowCount,
-        totalColumnCount = _getSelectedTableInfo13.totalColumnCount;
-      var previousDisplayMode;
-      var newDisplayMode;
-      switch (displayMode) {
-        case 'fixed':
-          previousDisplayMode = TABLE_DISPLAY_MODE.FIXED;
-          newDisplayMode = TABLE_DISPLAY_MODE.DEFAULT;
-          break;
-        case 'default':
-          previousDisplayMode = TABLE_DISPLAY_MODE.DEFAULT;
-          newDisplayMode = TABLE_DISPLAY_MODE.FIXED;
-          break;
-        case null:
-        default:
-          previousDisplayMode = TABLE_DISPLAY_MODE.INITIAL;
-          newDisplayMode = TABLE_DISPLAY_MODE.FIXED;
-      }
-      return {
-        action: TABLE_ACTION.CHANGED_DISPLAY_MODE,
-        actionSubject: ACTION_SUBJECT.TABLE,
-        attributes: {
-          inputMethod: inputMethod,
-          previousDisplayMode: previousDisplayMode,
-          newDisplayMode: newDisplayMode,
-          tableWidth: table === null || table === void 0 ? void 0 : table.node.attrs.width,
-          totalRowCount: totalRowCount,
-          totalColumnCount: totalColumnCount
-        },
-        eventType: EVENT_TYPE.TRACK
-      };
-    })(editorAnalyticsAPI)(editorCommandToPMCommand(setTableDisplayMode));
-  };
+export var toggleFixedColumnWidthsOptionAnalytics = function toggleFixedColumnWidthsOptionAnalytics(editorAnalyticsAPI, inputMethod) {
+  return withEditorAnalyticsAPI(function (state) {
+    var _getSelectedTableInfo13 = getSelectedTableInfo(state.selection),
+      table = _getSelectedTableInfo13.table,
+      totalRowCount = _getSelectedTableInfo13.totalRowCount,
+      totalColumnCount = _getSelectedTableInfo13.totalColumnCount;
+    var previousDisplayMode;
+    var newDisplayMode;
+    switch (table === null || table === void 0 ? void 0 : table.node.attrs.displayMode) {
+      case 'fixed':
+        previousDisplayMode = TABLE_DISPLAY_MODE.FIXED;
+        newDisplayMode = TABLE_DISPLAY_MODE.DEFAULT;
+        break;
+      case 'default':
+        previousDisplayMode = TABLE_DISPLAY_MODE.DEFAULT;
+        newDisplayMode = TABLE_DISPLAY_MODE.FIXED;
+        break;
+      case null:
+      default:
+        previousDisplayMode = TABLE_DISPLAY_MODE.INITIAL;
+        newDisplayMode = TABLE_DISPLAY_MODE.FIXED;
+    }
+    return {
+      action: TABLE_ACTION.CHANGED_DISPLAY_MODE,
+      actionSubject: ACTION_SUBJECT.TABLE,
+      attributes: {
+        inputMethod: inputMethod,
+        previousDisplayMode: previousDisplayMode,
+        newDisplayMode: newDisplayMode,
+        tableWidth: table === null || table === void 0 ? void 0 : table.node.attrs.width,
+        totalRowCount: totalRowCount,
+        totalColumnCount: totalColumnCount
+      },
+      eventType: EVENT_TYPE.TRACK
+    };
+  })(editorAnalyticsAPI)(editorCommandToPMCommand(setTableDisplayMode));
 };
 export var setTableAlignmentWithAnalytics = function setTableAlignmentWithAnalytics(editorAnalyticsAPI) {
-  return function (newAlignment, previousAlignment, inputMethod) {
+  return function (newAlignment, previousAlignment, inputMethod, reason) {
     return withEditorAnalyticsAPI(function (state) {
       var _getSelectedTableInfo14 = getSelectedTableInfo(state.selection),
         table = _getSelectedTableInfo14.table,
@@ -550,9 +549,35 @@ export var setTableAlignmentWithAnalytics = function setTableAlignmentWithAnalyt
           previousAlignment: previousAlignment === 'center' || previousAlignment === 'align-start' ? previousAlignment : null,
           totalRowCount: totalRowCount,
           totalColumnCount: totalColumnCount,
-          inputMethod: inputMethod
+          inputMethod: inputMethod,
+          reason: reason
         }
       };
     })(editorAnalyticsAPI)(editorCommandToPMCommand(setTableAlignment(newAlignment)));
   };
+};
+export var setTableAlignmentWithTableContentWithPosWithAnalytics = function setTableAlignmentWithTableContentWithPosWithAnalytics(editorAnalyticsAPI) {
+  return function (newAlignment, previousAlignment, tableNodeWithPos, inputMethod, reason) {
+    return withEditorAnalyticsAPI(function () {
+      var map = TableMap.get(tableNodeWithPos.node);
+      var totalRowCount = map.height;
+      var totalColumnCount = map.width;
+      var 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/esm/nodeviews/TableContainer.js

@@ -1,12 +1,14 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -40,25 +42,25 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
     pluginInjectionApi = _ref2.pluginInjectionApi,
     getPos = _ref2.getPos,
     editorView = _ref2.editorView;
-  var alignment = node.attrs.layout;
+  var alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table']),
     tableState = _useSharedPluginState.tableState;
   useEffect(function () {
     if (tableState && editorView && getPos) {
       var wasFullWidthModeEnabled = tableState.wasFullWidthModeEnabled,
         isFullWidthModeEnabled = tableState.isFullWidthModeEnabled;
-      if (wasFullWidthModeEnabled && !isFullWidthModeEnabled && node.attrs.width > akEditorDefaultLayoutWidth) {
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      if (wasFullWidthModeEnabled && isFullWidthModeEnabled !== undefined && !isFullWidthModeEnabled && alignment !== ALIGN_CENTER && node.attrs.width > akEditorDefaultLayoutWidth) {
+        var _pluginInjectionApi$a;
         var pos = getPos && getPos();
         if (typeof pos !== 'number') {
           return;
         }
-        var tr = setTableAlignmentWithTableContentWithPos('center', {
+        setTableAlignmentWithTableContentWithPosWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(ALIGN_CENTER, alignment, {
           pos: pos,
           node: 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
@@ -171,8 +173,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     })) !== null && _pluginInjectionApi$g !== void 0 ? _pluginInjectionApi$g : false;
   }, [pluginInjectionApi, editorView]);
   var attachAnalyticsEvent = useCallback(function (payload) {
-    var _pluginInjectionApi$a;
-    return pluginInjectionApi === null || pluginInjectionApi === 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 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.attachAnalyticsEvent(payload);
   }, [pluginInjectionApi]);
   var displayGapCursor = useCallback(function (toggle) {
     var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
@@ -192,13 +194,13 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     // 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;
   }
   var width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {

package/dist/esm/nodeviews/TableResizer.js

@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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';
@@ -13,10 +13,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';
@@ -84,7 +85,7 @@ var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWi
     // guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
     var 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.
   }
   var width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
   return guidelines.filter(function (guideline) {
@@ -92,7 +93,7 @@ var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWi
   });
 };
 export var TableResizer = function TableResizer(_ref) {
-  var _findTable, _editorView$state;
+  var _findTable, _editorView$state, _pluginInjectionApi$a2;
   var children = _ref.children,
     width = _ref.width,
     maxWidth = _ref.maxWidth,
@@ -150,7 +151,7 @@ export var TableResizer = function TableResizer(_ref) {
       keys = _ref3.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
+      var 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]);
@@ -158,40 +159,38 @@ export var TableResizer = function TableResizer(_ref) {
     return 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]);
   var switchToCenterAlignment = useCallback(function (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;
       var tableNodeWithPos = {
         pos: pos,
         node: node
       };
-      var _tr = setTableAlignmentWithTableContentWithPos(ALIGN_CENTER, tableNodeWithPos)(state);
-      if (_tr) {
-        dispatch(_tr);
-      }
+      setTableAlignmentWithTableContentWithPosWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === 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 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions]);
   useEffect(function () {
     return function () {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
       // deleted this table
       if (isResizing.current) {
         var dispatch = editorView.dispatch,
-          _tr2 = editorView.state.tr;
+          _tr = editorView.state.tr;
         displayGapCursor(true);
         displayGuideline([]);
-        _tr2.setMeta(tableWidthPluginKey, {
+        _tr.setMeta(tableWidthPluginKey, {
           resizing: false,
           tableLocalId: '',
           tableRef: null
         });
-        dispatch(_tr2);
+        dispatch(_tr);
       }
     };
   }, [editorView, displayGuideline, displayGapCursor]);
@@ -210,7 +209,7 @@ export var TableResizer = function TableResizer(_ref) {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
+    var 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();
@@ -235,7 +234,7 @@ export var TableResizer = function TableResizer(_ref) {
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth;
+    var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth;
     var 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);
 
@@ -305,13 +304,13 @@ export var TableResizer = function TableResizer(_ref) {
     dispatch(tr);
     if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
       if (delta.width < 0) {
-        var _pluginInjectionApi$a;
-        pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.ariaNotify(formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
+        var _pluginInjectionApi$a3;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.actions.ariaNotify(formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
           newWidth: newWidth
         }));
       } else if (delta.width > 0) {
-        var _pluginInjectionApi$a2;
-        pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a2 === void 0 || _pluginInjectionApi$a2.actions.ariaNotify(formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
+        var _pluginInjectionApi$a4;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.ariaNotify(formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
           newWidth: newWidth
         }));
       }

package/dist/esm/plugin.js

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