@atlaskit/editor-plugin-table 7.16.15 → 7.16.17

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/editor-plugin-table
 
+## 7.16.17
+
+### Patch Changes
+
+- [#106586](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/106586)
+  [`f3486a7d141c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3486a7d141c) -
+  Update usage of akEditorGutterPadding to its dynamic version which can increase padding to support
+  editor drag and drop. Breakout logic is also updated to accommodate extra padding.
+- [#107920](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107920)
+  [`f918580d1700`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f918580d1700) -
+  [ux] Removes Table Lock button and addes a new menu item 'Fixed column widths' in the table's
+  floating toolbar menu instead of the button.
+- [#107415](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107415)
+  [`f7f135cdedb8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f7f135cdedb8) -
+  ED-23441: Added analytics for table aligment changes caused by resizing or appearance changes"
+- [#100714](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100714)
+  [`81849acfe13c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/81849acfe13c) -
+  ECA11Y-228: Added new shortcuts for insert column and row and added correct formatting for help
+  modal dialog
+- Updated dependencies
+
+## 7.16.16
+
+### Patch Changes
+
+- [#107213](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107213)
+  [`afae0e144fb2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/afae0e144fb2) -
+  [ux] Hide table selection control when blocks plugin enabled
+
 ## 7.16.15
 
 ### Patch Changes

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

@@ -4,12 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapTableInExpandWithAnalytics = exports.toggleTableLockWithAnalytics = exports.toggleTableLayoutWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = exports.setTableAlignmentWithAnalytics = exports.setColorWithAnalytics = exports.mergeCellsWithAnalytics = exports.insertRowWithAnalytics = exports.insertColumnWithAnalytics = exports.emptyMultipleCellsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = exports.deleteTableWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteRowsWithAnalytics = exports.deleteColumnsWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = exports.addRowAroundSelection = void 0;
+exports.wrapTableInExpandWithAnalytics = exports.toggleTableLayoutWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.toggleFixedColumnWidthsOptionAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = exports.setTableAlignmentWithTableContentWithPosWithAnalytics = exports.setTableAlignmentWithAnalytics = exports.setColorWithAnalytics = exports.mergeCellsWithAnalytics = exports.insertRowWithAnalytics = exports.insertColumnWithAnalytics = exports.emptyMultipleCellsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = exports.deleteTableWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteRowsWithAnalytics = exports.deleteColumnsWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = exports.addRowAroundSelection = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _preset = require("@atlaskit/editor-common/preset");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _clear = require("./commands/clear");
 var _collapse = require("./commands/collapse");
@@ -500,47 +501,45 @@ var wrapTableInExpandWithAnalytics = exports.wrapTableInExpandWithAnalytics = fu
     };
   })(editorAnalyticsAPI)(_collapse.wrapTableInExpand);
 };
-var toggleTableLockWithAnalytics = exports.toggleTableLockWithAnalytics = function toggleTableLockWithAnalytics(editorAnalyticsAPI) {
-  return function (displayMode, inputMethod) {
-    return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
-      var _getSelectedTableInfo13 = (0, _utils2.getSelectedTableInfo)(state.selection),
-        table = _getSelectedTableInfo13.table,
-        totalRowCount = _getSelectedTableInfo13.totalRowCount,
-        totalColumnCount = _getSelectedTableInfo13.totalColumnCount;
-      var previousDisplayMode;
-      var newDisplayMode;
-      switch (displayMode) {
-        case 'fixed':
-          previousDisplayMode = _analytics.TABLE_DISPLAY_MODE.FIXED;
-          newDisplayMode = _analytics.TABLE_DISPLAY_MODE.DEFAULT;
-          break;
-        case 'default':
-          previousDisplayMode = _analytics.TABLE_DISPLAY_MODE.DEFAULT;
-          newDisplayMode = _analytics.TABLE_DISPLAY_MODE.FIXED;
-          break;
-        case null:
-        default:
-          previousDisplayMode = _analytics.TABLE_DISPLAY_MODE.INITIAL;
-          newDisplayMode = _analytics.TABLE_DISPLAY_MODE.FIXED;
-      }
-      return {
-        action: _analytics.TABLE_ACTION.CHANGED_DISPLAY_MODE,
-        actionSubject: _analytics.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: _analytics.EVENT_TYPE.TRACK
-      };
-    })(editorAnalyticsAPI)((0, _preset.editorCommandToPMCommand)(_displayMode.setTableDisplayMode));
-  };
+var toggleFixedColumnWidthsOptionAnalytics = exports.toggleFixedColumnWidthsOptionAnalytics = function toggleFixedColumnWidthsOptionAnalytics(editorAnalyticsAPI, inputMethod) {
+  return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
+    var _getSelectedTableInfo13 = (0, _utils2.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 = _analytics.TABLE_DISPLAY_MODE.FIXED;
+        newDisplayMode = _analytics.TABLE_DISPLAY_MODE.DEFAULT;
+        break;
+      case 'default':
+        previousDisplayMode = _analytics.TABLE_DISPLAY_MODE.DEFAULT;
+        newDisplayMode = _analytics.TABLE_DISPLAY_MODE.FIXED;
+        break;
+      case null:
+      default:
+        previousDisplayMode = _analytics.TABLE_DISPLAY_MODE.INITIAL;
+        newDisplayMode = _analytics.TABLE_DISPLAY_MODE.FIXED;
+    }
+    return {
+      action: _analytics.TABLE_ACTION.CHANGED_DISPLAY_MODE,
+      actionSubject: _analytics.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: _analytics.EVENT_TYPE.TRACK
+    };
+  })(editorAnalyticsAPI)((0, _preset.editorCommandToPMCommand)(_displayMode.setTableDisplayMode));
 };
 var setTableAlignmentWithAnalytics = exports.setTableAlignmentWithAnalytics = function setTableAlignmentWithAnalytics(editorAnalyticsAPI) {
-  return function (newAlignment, previousAlignment, inputMethod) {
+  return function (newAlignment, previousAlignment, inputMethod, reason) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
       var _getSelectedTableInfo14 = (0, _utils2.getSelectedTableInfo)(state.selection),
         table = _getSelectedTableInfo14.table,
@@ -557,9 +556,35 @@ var setTableAlignmentWithAnalytics = exports.setTableAlignmentWithAnalytics = fu
           previousAlignment: previousAlignment === 'center' || previousAlignment === 'align-start' ? previousAlignment : null,
           totalRowCount: totalRowCount,
           totalColumnCount: totalColumnCount,
-          inputMethod: inputMethod
+          inputMethod: inputMethod,
+          reason: reason
         }
       };
     })(editorAnalyticsAPI)((0, _preset.editorCommandToPMCommand)((0, _misc.setTableAlignment)(newAlignment)));
   };
+};
+var setTableAlignmentWithTableContentWithPosWithAnalytics = exports.setTableAlignmentWithTableContentWithPosWithAnalytics = function setTableAlignmentWithTableContentWithPosWithAnalytics(editorAnalyticsAPI) {
+  return function (newAlignment, previousAlignment, tableNodeWithPos, inputMethod, reason) {
+    return (0, _analytics2.withEditorAnalyticsAPI)(function () {
+      var map = _tableMap.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: _analytics.TABLE_ACTION.CHANGED_ALIGNMENT,
+        actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: attributes
+      };
+    })(editorAnalyticsAPI)((0, _preset.editorCommandToPMCommand)((0, _misc.setTableAlignmentWithTableContentWithPos)(newAlignment, tableNodeWithPos)));
+  };
 };

package/dist/cjs/nodeviews/TableContainer.js

@@ -9,12 +9,14 @@ exports.TableContainer = exports.ResizableTableContainer = exports.InnerContaine
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _misc = require("../commands/misc");
+var _commandsWithAnalytics = require("../commands-with-analytics");
 var _utils = require("../pm-plugins/table-resizing/utils");
 var _types = require("../types");
+var _alignment = require("../utils/alignment");
 var _TableResizer = require("./TableResizer");
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -50,25 +52,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 !== _alignment.ALIGN_START ? _alignment.ALIGN_CENTER : _alignment.ALIGN_START;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table']),
     tableState = _useSharedPluginState.tableState;
   (0, _react.useEffect)(function () {
     if (tableState && editorView && getPos) {
       var wasFullWidthModeEnabled = tableState.wasFullWidthModeEnabled,
         isFullWidthModeEnabled = tableState.isFullWidthModeEnabled;
-      if (wasFullWidthModeEnabled && !isFullWidthModeEnabled && node.attrs.width > _editorSharedStyles.akEditorDefaultLayoutWidth) {
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      if (wasFullWidthModeEnabled && isFullWidthModeEnabled !== undefined && !isFullWidthModeEnabled && alignment !== _alignment.ALIGN_CENTER && node.attrs.width > _editorSharedStyles.akEditorDefaultLayoutWidth) {
+        var _pluginInjectionApi$a;
         var pos = getPos && getPos();
         if (typeof pos !== 'number') {
           return;
         }
-        var tr = (0, _misc.setTableAlignmentWithTableContentWithPos)('center', {
+        (0, _commandsWithAnalytics.setTableAlignmentWithTableContentWithPosWithAnalytics)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(_alignment.ALIGN_CENTER, alignment, {
           pos: pos,
           node: node
-        })(editorView.state);
-        if (tr) {
-          editorView.dispatch(tr);
-        }
+        }, _analytics.INPUT_METHOD.AUTO, _analytics.CHANGE_ALIGNMENT_REASON.EDITOR_APPEARANCE_CHANGED)(state, dispatch);
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -181,8 +183,8 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     })) !== null && _pluginInjectionApi$g !== void 0 ? _pluginInjectionApi$g : false;
   }, [pluginInjectionApi, editorView]);
   var attachAnalyticsEvent = (0, _react.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 = (0, _react.useCallback)(function (toggle) {
     var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
@@ -202,13 +204,13 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     // 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 - _editorSharedStyles.akEditorGutterPadding * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - (0, _editorSharedStyles.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 - _editorSharedStyles.akEditorGutterPadding * 2 : containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 : containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - resizeHandleSpacing;
   }
   var width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {

package/dist/cjs/nodeviews/TableResizer.js

@@ -22,6 +22,7 @@ var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _commandsWithAnalytics = require("../commands-with-analytics");
 var _misc = require("../commands/misc");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
 var _utils3 = require("../pm-plugins/table-resizing/utils");
@@ -102,7 +103,7 @@ var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWi
   });
 };
 var TableResizer = exports.TableResizer = function TableResizer(_ref) {
-  var _findTable, _editorView$state;
+  var _findTable, _editorView$state, _pluginInjectionApi$a2;
   var children = _ref.children,
     width = _ref.width,
     maxWidth = _ref.maxWidth,
@@ -175,33 +176,31 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     if (isTableAlignmentEnabled && node && node.attrs.layout === _alignment.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 = (0, _misc.setTableAlignmentWithTableContentWithPos)(_alignment.ALIGN_CENTER, tableNodeWithPos)(state);
-      if (_tr) {
-        dispatch(_tr);
-      }
+      (0, _commandsWithAnalytics.setTableAlignmentWithTableContentWithPosWithAnalytics)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(_alignment.ALIGN_CENTER, _alignment.ALIGN_START, tableNodeWithPos, _analytics.INPUT_METHOD.AUTO, _analytics.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]);
   (0, _react.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(_tableWidth.pluginKey, {
+        _tr.setMeta(_tableWidth.pluginKey, {
           resizing: false,
           tableLocalId: '',
           tableRef: null
         });
-        dispatch(_tr2);
+        dispatch(_tr);
       }
     };
   }, [editorView, displayGuideline, displayGapCursor]);
@@ -315,13 +314,13 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     dispatch(tr);
     if ((0, _platformFeatureFlags.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.tableMessages.tableSizeDecreaseScreenReaderInformation, {
+        var _pluginInjectionApi$a3;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.actions.ariaNotify(formatMessage(_messages.tableMessages.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.tableMessages.tableSizeIncreaseScreenReaderInformation, {
+        var _pluginInjectionApi$a4;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.ariaNotify(formatMessage(_messages.tableMessages.tableSizeIncreaseScreenReaderInformation, {
           newWidth: newWidth
         }));
       }

package/dist/cjs/plugin.js

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

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

@@ -36,6 +36,12 @@ function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEn
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.addRowAfter.common, (0, _commandsWithAnalytics.addRowAroundSelection)(editorAnalyticsAPI)('BOTTOM'), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.addColumnBefore.common, (0, _insert.addColumnBefore)(isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.addColumnAfter.common, (0, _insert.addColumnAfter)(isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg')) {
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.addRowBeforeVO.common, (0, _commandsWithAnalytics.addRowAroundSelection)(editorAnalyticsAPI)('TOP'), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.addRowAfterVO.common, (0, _commandsWithAnalytics.addRowAroundSelection)(editorAnalyticsAPI)('BOTTOM'), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.addColumnBeforeVO.common, (0, _insert.addColumnBefore)(isTableScalingEnabled), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.addColumnAfterVO.common, (0, _insert.addColumnAfter)(isTableScalingEnabled), list);
+  }
   if (dragAndDropEnabled) {
     // Move row/column shortcuts
     /**

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

@@ -22,7 +22,7 @@ function getLayoutSize(tableLayout) {
   var options = arguments.length > 2 ? arguments[2] : undefined;
   var isFullWidthModeEnabled = options.isFullWidthModeEnabled;
   if (isFullWidthModeEnabled) {
-    return containerWidth ? Math.min(containerWidth - _editorSharedStyles.akEditorGutterPadding * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+    return containerWidth ? Math.min(containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
   }
   var calculatedTableWidth = (0, _styles.calcTableWidth)(tableLayout, containerWidth, true);
   if (calculatedTableWidth !== 'inherit') {

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"));
@@ -37,7 +37,6 @@ 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 +45,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 +105,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 +117,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 +332,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,9 +345,11 @@ 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);
+        var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingWithFixedColumnWidthsOptionEnabled && !isNested;
+        var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
+        var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
+        var alignmentMenu;
         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);
@@ -450,23 +465,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 +495,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',
@@ -632,7 +607,7 @@ 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)
+      onClick: (0, _commandsWithAnalytics.setTableAlignmentWithAnalytics)(editorAnalyticsAPI)(value, currentLayout, _analytics.INPUT_METHOD.FLOATING_TB, _analytics.CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED)
     }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
       disabled: value !== 'center'
     });

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

@@ -98,7 +98,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
       updateCellHoverLocation: updateCellHoverLocation,
       stickyTop: stickyTop,
       isDragAndDropEnabled: isDragAndDropEnabled
-    }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/_react.default.createElement(_CornerControls.DragCornerControlsWithSelection, {
+    }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.drag-and-drop_wmv9t') && ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/_react.default.createElement(_CornerControls.DragCornerControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
@@ -109,7 +109,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
       tableRef: tableRef,
       isInDanger: isInDanger,
       isResizing: isResizing
-    }), /*#__PURE__*/_react.default.createElement(_RowControls.DragControls, {
+    })), /*#__PURE__*/_react.default.createElement(_RowControls.DragControls, {
       tableRef: tableRef,
       tableNode: tableNode,
       hoveredCell: hoveredCell,

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.
 };
 
 /**