@atlaskit/editor-plugin-table 7.12.4 → 7.12.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 7.12.6
+
+### Patch Changes
+
+-   [#98646](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98646)
+    [`b96ae2cfbd99`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b96ae2cfbd99) -
+    [ux] Fixes an issue where when the table is in overflow and is scaled due to a narrow screen
+    size and a column is inserted or deleted the oveflow is lost.
+-   Updated dependencies
+
+## 7.12.5
+
+### Patch Changes
+
+-   [#96056](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96056)
+    [`5ee939049a08`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5ee939049a08) -
+    Add analytics for lock columns button in floating toolbar.
+
 ## 7.12.4
 
 ### Patch Changes

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

@@ -4,16 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapTableInExpandWithAnalytics = exports.toggleTableLayoutWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = 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.toggleTableLockWithAnalytics = exports.toggleTableLayoutWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = 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 _utils = require("@atlaskit/editor-tables/utils");
 var _clear = require("./commands/clear");
 var _collapse = require("./commands/collapse");
 var _columnResize = require("./commands/column-resize");
 var _delete = require("./commands/delete");
+var _displayMode = require("./commands/display-mode");
 var _insert = require("./commands/insert");
 var _misc = require("./commands/misc");
 var _sort = require("./commands/sort");
@@ -494,4 +496,43 @@ 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));
+  };
+};
 // #endregion

package/dist/cjs/nodeviews/TableComponent.js

@@ -475,7 +475,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isTableWidthChanged = tableNodeWidth !== this.tableNodeWidth;
       var isTableSquashed = tableRenderWidth < tableNodeWidth;
       var isNumberColumnChanged = tableNode.attrs.isNumberColumnEnabled !== this.node.attrs.isNumberColumnEnabled;
-      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth || isNumberColumnChanged;
+      var isNumberOfColumnsChanged = (0, _utils5.tablesHaveDifferentNoOfColumns)(tableNode, this.node);
+      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth || isNumberColumnChanged || isNumberOfColumnsChanged;
       if (force || maybeScale) {
         var _this$containerWidth;
         var containerWidthValue = containerWidth.width;
@@ -484,7 +485,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var isTableResized = (0, _colgroup.hasTableBeenResized)(tableNode);
         var isColumnsDistributed = wasTableResized && !isTableResized;
         var isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
-        var shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged;
+        var shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged;
         if (force || !isResizing && shouldUpdateColgroup) {
           var _this$props$options, _this$props$options2;
           var resizeState = (0, _utils4.getResizeState)({
@@ -493,7 +494,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             table: tableNode,
             tableRef: this.table,
             start: start,
-            domAtPos: view.domAtPos,
+            domAtPos: view.domAtPos.bind(view),
             isTableScalingEnabled: true
           });
           var shouldScaleOnColgroupUpdate = false;

package/dist/cjs/toolbar.js

@@ -5,14 +5,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getDistributeConfig = exports.getClosestSelectionRect = exports.getClosestSelectionOrTableRect = void 0;
+exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getLockBtnConfig = exports.getDistributeConfig = exports.getClosestSelectionRect = exports.getClosestSelectionOrTableRect = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
 var _customSteps = require("@atlaskit/custom-steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
-var _preset = require("@atlaskit/editor-common/preset");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -437,6 +436,23 @@ 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) {
@@ -483,7 +499,9 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
           label: title
         });
       },
-      onClick: (0, _preset.editorCommandToPMCommand)(_commands.setTableDisplayMode),
+      onClick: function onClick(state, dispatch, view) {
+        return getLockBtnConfig(editorAnalyticsAPI)(state, dispatch, view);
+      },
       selected: areColumnWidthsLocked,
       testId: 'table-lock-column-widths-btn'
     });

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

@@ -1,11 +1,13 @@
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
-import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_BREAKOUT } from '@atlaskit/editor-common/analytics';
+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 { findCellClosestToPos, findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearMultipleCells } from './commands/clear';
 import { wrapTableInExpand } from './commands/collapse';
 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 } from './commands/misc';
 import { sortByColumn } from './commands/sort';
@@ -452,4 +454,40 @@ export const wrapTableInExpandWithAnalytics = editorAnalyticsAPI => withEditorAn
     eventType: EVENT_TYPE.TRACK
   };
 })(editorAnalyticsAPI)(wrapTableInExpand);
+export const toggleTableLockWithAnalytics = editorAnalyticsAPI => (displayMode, inputMethod) => withEditorAnalyticsAPI(state => {
+  const {
+    table,
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(state.selection);
+  let previousDisplayMode;
+  let 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,
+      previousDisplayMode,
+      newDisplayMode,
+      tableWidth: table === null || table === void 0 ? void 0 : table.node.attrs.width,
+      totalRowCount,
+      totalColumnCount
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+})(editorAnalyticsAPI)(editorCommandToPMCommand(setTableDisplayMode));
 // #endregion

package/dist/es2019/nodeviews/TableComponent.js

@@ -458,7 +458,8 @@ class TableComponent extends React.Component {
     const isTableWidthChanged = tableNodeWidth !== this.tableNodeWidth;
     const isTableSquashed = tableRenderWidth < tableNodeWidth;
     const isNumberColumnChanged = tableNode.attrs.isNumberColumnEnabled !== this.node.attrs.isNumberColumnEnabled;
-    const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth || isNumberColumnChanged;
+    const isNumberOfColumnsChanged = tablesHaveDifferentNoOfColumns(tableNode, this.node);
+    const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth || isNumberColumnChanged || isNumberOfColumnsChanged;
     if (force || maybeScale) {
       var _this$containerWidth;
       const {
@@ -469,7 +470,7 @@ class TableComponent extends React.Component {
       const isTableResized = hasTableBeenResized(tableNode);
       const isColumnsDistributed = wasTableResized && !isTableResized;
       const isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
-      const shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged;
+      const shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged;
       if (force || !isResizing && shouldUpdateColgroup) {
         var _this$props$options, _this$props$options2;
         const resizeState = getResizeState({
@@ -478,7 +479,7 @@ class TableComponent extends React.Component {
           table: tableNode,
           tableRef: this.table,
           start,
-          domAtPos: view.domAtPos,
+          domAtPos: view.domAtPos.bind(view),
           isTableScalingEnabled: true
         });
         let shouldScaleOnColgroupUpdate = false;

package/dist/es2019/toolbar.js

@@ -4,7 +4,6 @@ import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { 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 { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { closestElement, getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -16,8 +15,8 @@ import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal
 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, setTableDisplayMode } from './commands';
-import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
+import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
+import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, toggleTableLockWithAnalytics, 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';
@@ -415,6 +414,25 @@ 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) {
@@ -456,7 +474,7 @@ const getColumnSettingItems = (editorState, editorView, {
         size: "medium",
         label: title
       }),
-      onClick: editorCommandToPMCommand(setTableDisplayMode),
+      onClick: (state, dispatch, view) => getLockBtnConfig(editorAnalyticsAPI)(state, dispatch, view),
       selected: areColumnWidthsLocked,
       testId: 'table-lock-column-widths-btn'
     });

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

@@ -2,13 +2,15 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { _defineProperty(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; }
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
-import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_BREAKOUT } from '@atlaskit/editor-common/analytics';
+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 { findCellClosestToPos, findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearMultipleCells } from './commands/clear';
 import { wrapTableInExpand } from './commands/collapse';
 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 } from './commands/misc';
 import { sortByColumn } from './commands/sort';
@@ -487,4 +489,43 @@ 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));
+  };
+};
 // #endregion

package/dist/esm/nodeviews/TableComponent.js

@@ -468,7 +468,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isTableWidthChanged = tableNodeWidth !== this.tableNodeWidth;
       var isTableSquashed = tableRenderWidth < tableNodeWidth;
       var isNumberColumnChanged = tableNode.attrs.isNumberColumnEnabled !== this.node.attrs.isNumberColumnEnabled;
-      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth || isNumberColumnChanged;
+      var isNumberOfColumnsChanged = tablesHaveDifferentNoOfColumns(tableNode, this.node);
+      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth || isNumberColumnChanged || isNumberOfColumnsChanged;
       if (force || maybeScale) {
         var _this$containerWidth;
         var containerWidthValue = containerWidth.width;
@@ -477,7 +478,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var isTableResized = hasTableBeenResized(tableNode);
         var isColumnsDistributed = wasTableResized && !isTableResized;
         var isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
-        var shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged;
+        var shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged;
         if (force || !isResizing && shouldUpdateColgroup) {
           var _this$props$options, _this$props$options2;
           var resizeState = getResizeState({
@@ -486,7 +487,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             table: tableNode,
             tableRef: this.table,
             start: start,
-            domAtPos: view.domAtPos,
+            domAtPos: view.domAtPos.bind(view),
             isTableScalingEnabled: true
           });
           var shouldScaleOnColgroupUpdate = false;

package/dist/esm/toolbar.js

@@ -5,7 +5,6 @@ import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { 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 { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { closestElement, getChildrenInfo as _getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -17,8 +16,8 @@ import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal
 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, setTableDisplayMode } from './commands';
-import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
+import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
+import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, toggleTableLockWithAnalytics, 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';
@@ -426,6 +425,23 @@ var getCellItems = function getCellItems(state, view, _ref3, getEditorContainerW
   }
   return [];
 };
+export var getLockBtnConfig = function getLockBtnConfig(editorAnalyticsAPI) {
+  return function (state, dispatch, editorView) {
+    var selectionOrTableRect = getClosestSelectionOrTableRect(state);
+    if (!editorView || !selectionOrTableRect) {
+      return false;
+    }
+    var tr = state.tr;
+    var table = findTable(tr.selection);
+    if (!table) {
+      return false;
+    } else {
+      var displayMode = table.node.attrs.displayMode;
+      toggleTableLockWithAnalytics(editorAnalyticsAPI)(displayMode, INPUT_METHOD.FLOATING_TB)(state, dispatch);
+      return true;
+    }
+  };
+};
 export var getDistributeConfig = function getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI) {
   var isTableScalingEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (state, dispatch, editorView) {
@@ -472,7 +488,9 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
           label: title
         });
       },
-      onClick: editorCommandToPMCommand(setTableDisplayMode),
+      onClick: function onClick(state, dispatch, view) {
+        return getLockBtnConfig(editorAnalyticsAPI)(state, dispatch, view);
+      },
       selected: areColumnWidthsLocked,
       testId: 'table-lock-column-widths-btn'
     });

package/dist/types/commands-with-analytics.d.ts

@@ -1,6 +1,6 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { INPUT_METHOD, TABLE_DISPLAY_MODE } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
@@ -27,3 +27,4 @@ export declare const toggleTableLayoutWithAnalytics: (editorAnalyticsAPI: Editor
 export declare const sortColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, columnIndex: number, sortOrder: SortOrder) => Command;
 export declare const distributeColumnsWidthsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, { resizeState, table, attributes }: ResizeStateWithAnalytics) => Command;
 export declare const wrapTableInExpandWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
+export declare const toggleTableLockWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (displayMode: TABLE_DISPLAY_MODE | null, inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;

package/dist/types/toolbar.d.ts

@@ -10,4 +10,5 @@ export declare const getToolbarCellOptionsConfig: (editorState: EditorState, edi
 export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
 export declare const getClosestSelectionOrTableRect: (state: EditorState) => Rect | undefined;
 export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions) => (config: PluginConfig) => FloatingToolbarHandler;
+export declare const getLockBtnConfig: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
 export declare const getDistributeConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => Command;

package/dist/types-ts4.5/commands-with-analytics.d.ts

@@ -1,6 +1,6 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { INPUT_METHOD, TABLE_DISPLAY_MODE } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
@@ -27,3 +27,4 @@ export declare const toggleTableLayoutWithAnalytics: (editorAnalyticsAPI: Editor
 export declare const sortColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, columnIndex: number, sortOrder: SortOrder) => Command;
 export declare const distributeColumnsWidthsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, { resizeState, table, attributes }: ResizeStateWithAnalytics) => Command;
 export declare const wrapTableInExpandWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
+export declare const toggleTableLockWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (displayMode: TABLE_DISPLAY_MODE | null, inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;

package/dist/types-ts4.5/toolbar.d.ts

@@ -10,4 +10,5 @@ export declare const getToolbarCellOptionsConfig: (editorState: EditorState, edi
 export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
 export declare const getClosestSelectionOrTableRect: (state: EditorState) => Rect | undefined;
 export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions) => (config: PluginConfig) => FloatingToolbarHandler;
+export declare const getLockBtnConfig: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
 export declare const getDistributeConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => Command;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.12.4",
+  "version": "7.12.6",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -49,9 +49,9 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
     "@atlaskit/primitives": "^6.1.0",
-    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/theme": "^12.8.0",
     "@atlaskit/toggle": "^13.1.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/tokens": "^1.46.0",
     "@atlaskit/tooltip": "^18.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/src/commands-with-analytics.ts

@@ -8,11 +8,13 @@ import {
   INPUT_METHOD,
   TABLE_ACTION,
   TABLE_BREAKOUT,
+  TABLE_DISPLAY_MODE,
 } from '@atlaskit/editor-common/analytics';
 import type {
   AnalyticsEventPayload,
   EditorAnalyticsAPI,
 } from '@atlaskit/editor-common/analytics';
+import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import type {
   Command,
   GetEditorContainerWidth,
@@ -31,6 +33,7 @@ import { clearMultipleCells } from './commands/clear';
 import { wrapTableInExpand } from './commands/collapse';
 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,
@@ -634,4 +637,48 @@ export const wrapTableInExpandWithAnalytics = (
       eventType: EVENT_TYPE.TRACK,
     };
   })(editorAnalyticsAPI)(wrapTableInExpand);
+
+export const toggleTableLockWithAnalytics =
+  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+  (
+    displayMode: TABLE_DISPLAY_MODE | null,
+    inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB,
+  ) =>
+    withEditorAnalyticsAPI((state) => {
+      const { table, totalRowCount, totalColumnCount } = getSelectedTableInfo(
+        state.selection,
+      );
+
+      let previousDisplayMode: TABLE_DISPLAY_MODE;
+      let newDisplayMode: TABLE_DISPLAY_MODE;
+
+      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,
+          previousDisplayMode,
+          newDisplayMode,
+          tableWidth: table?.node.attrs.width,
+          totalRowCount,
+          totalColumnCount,
+        },
+        eventType: EVENT_TYPE.TRACK,
+      };
+    })(editorAnalyticsAPI)(editorCommandToPMCommand(setTableDisplayMode));
 // #endregion

package/src/nodeviews/TableComponent.tsx

@@ -387,12 +387,17 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     const isNumberColumnChanged =
       tableNode.attrs.isNumberColumnEnabled !==
       this.node.attrs.isNumberColumnEnabled;
+    const isNumberOfColumnsChanged = tablesHaveDifferentNoOfColumns(
+      tableNode,
+      this.node,
+    );
 
     const maybeScale =
       isTableSquashed ||
       isTableWidthChanged ||
       isTableResizedFullWidth ||
-      isNumberColumnChanged;
+      isNumberColumnChanged ||
+      isNumberOfColumnsChanged;
 
     if (force || maybeScale) {
       const { width: containerWidthValue } = containerWidth;
@@ -409,7 +414,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isTableResizedFullWidth ||
         isTableWidthChanged ||
         isTableDisplayModeChanged ||
-        isNumberColumnChanged;
+        isNumberColumnChanged ||
+        isNumberOfColumnsChanged;
 
       if (force || (!isResizing && shouldUpdateColgroup)) {
         const resizeState = getResizeState({
@@ -418,7 +424,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           table: tableNode,
           tableRef: this.table,
           start,
-          domAtPos: view.domAtPos,
+          domAtPos: view.domAtPos.bind(view),
           isTableScalingEnabled: true,
         });
 

package/src/toolbar.tsx

@@ -13,7 +13,6 @@ import {
 import commonMessages, {
   tableMessages as messages,
 } from '@atlaskit/editor-common/messages';
-import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import type { typeOption } from '@atlaskit/editor-common/src/types/floating-toolbar';
 import type {
   Command,
@@ -62,7 +61,6 @@ import {
   hoverRows,
   hoverTable,
   removeDescendantNodes,
-  setTableDisplayMode,
 } from './commands';
 import {
   deleteColumnsWithAnalytics,
@@ -79,6 +77,7 @@ import {
   toggleHeaderColumnWithAnalytics,
   toggleHeaderRowWithAnalytics,
   toggleNumberColumnWithAnalytics,
+  toggleTableLockWithAnalytics,
   wrapTableInExpandWithAnalytics,
 } from './commands-with-analytics';
 import type { TablePluginOptions } from './plugin';
@@ -644,6 +643,29 @@ const getCellItems = (
   return [];
 };
 
+export const getLockBtnConfig =
+  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null): Command =>
+  (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: GetEditorContainerWidth,
@@ -723,7 +745,8 @@ const getColumnSettingItems = (
       type: 'button',
       title,
       icon: () => <DisplayModeIcon size="medium" label={title} />,
-      onClick: editorCommandToPMCommand(setTableDisplayMode),
+      onClick: (state, dispatch, view) =>
+        getLockBtnConfig(editorAnalyticsAPI)(state, dispatch, view),
       selected: areColumnWidthsLocked,
       testId: 'table-lock-column-widths-btn',
     });