@atlaskit/editor-plugin-table 7.16.16 → 7.16.17

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';
@@ -12,7 +12,8 @@ import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { akEditorGutterPadding } 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';
@@ -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);
@@ -160,18 +161,16 @@ export const TableResizer = ({
     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
@@ -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') {

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,7 +20,7 @@ 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 { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
@@ -28,14 +28,22 @@ 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 +89,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 +99,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 +315,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,9 +325,11 @@ 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);
+    const isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingWithFixedColumnWidthsOptionEnabled && !isNested;
+    const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
+    const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
+    let alignmentMenu;
     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);
@@ -424,25 +436,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 +463,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',
@@ -598,7 +572,7 @@ export const getAlignmentOptionsConfig = (editorState, {
       icon: icon,
       title: formatMessage(layoutToMessages[value]),
       selected: normaliseAlignment(currentLayout) === value,
-      onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB),
+      onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB, CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED),
       ...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
         disabled: value !== 'center'
       })

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) {