@atlaskit/editor-plugin-table 7.7.3 → 7.8.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-table
 
+## 7.8.0
+
+### Minor Changes
+
+- [#91934](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91934) [`b76a78c6a199`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b76a78c6a199) - bumped editor-prosemirror version to 4.0.0
+
+### Patch Changes
+
+- [#93082](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93082) [`fb0cc922f8e4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fb0cc922f8e4) - fix resizing offset not match when extend to overflow in handle and mouse
+- Updated dependencies
+
+## 7.7.4
+
+### Patch Changes
+
+- [#92426](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92426) [`32c76c7c225c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/32c76c7c225c) - Bump adf-schema to 35.9.2 to support table alignment options
+- [#90659](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90659) [`fc633861cff4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fc633861cff4) - [ux] Adds lock button on table's floating toolbar.
+- Updated dependencies
+
 ## 7.7.3
 
 ### Patch Changes

package/dist/cjs/commands/display-mode.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setTableDisplayMode = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _utils = require("@atlaskit/editor-tables/utils");
+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) { (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; }
+var setTableDisplayMode = exports.setTableDisplayMode = function setTableDisplayMode(_ref) {
+  var tr = _ref.tr;
+  var table = (0, _utils.findTable)(tr.selection);
+  if (!table) {
+    return null;
+  }
+  var displayMode = table.node.attrs.displayMode;
+  tr.setNodeMarkup(table.pos, tr.doc.type.schema.nodes.table, _objectSpread(_objectSpread({}, table.node.attrs), {}, {
+    displayMode: !displayMode || displayMode === 'default' ? 'fixed' : 'default'
+  }));
+  return tr.setMeta('scrollIntoView', false);
+};

package/dist/cjs/commands/index.js

@@ -171,6 +171,12 @@ Object.defineProperty(exports, "setMultipleCellAttrs", {
     return _misc.setMultipleCellAttrs;
   }
 });
+Object.defineProperty(exports, "setTableDisplayMode", {
+  enumerable: true,
+  get: function get() {
+    return _displayMode.setTableDisplayMode;
+  }
+});
 Object.defineProperty(exports, "setTableHovered", {
   enumerable: true,
   get: function get() {
@@ -262,4 +268,5 @@ var _clear = require("./clear");
 var _misc = require("./misc");
 var _sort = require("./sort");
 var _goToNextCell = require("./go-to-next-cell");
-var _referentiality = require("./referentiality");
+var _referentiality = require("./referentiality");
+var _displayMode = require("./display-mode");

package/dist/cjs/nodeviews/table.js

@@ -41,7 +41,8 @@ var tableAttributes = function tableAttributes(node) {
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
-    'data-table-width': node.attrs.width
+    'data-table-width': node.attrs.width,
+    'data-table-display-mode': node.attrs.displayMode
   };
 };
 var getInlineWidth = function getInlineWidth(node, options, state, pos) {

package/dist/cjs/plugin.js

@@ -116,9 +116,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
       insertTableWithSize: (0, _insert.insertTableWithSize)(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     nodes: function nodes() {
+      var tableNode = options !== null && options !== void 0 && options.isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button') ? _adfSchema.tableStage0 : _adfSchema.table;
       return [{
         name: 'table',
-        node: _adfSchema.table
+        node: tableNode
       }, {
         name: 'tableHeader',
         node: _adfSchema.tableHeader
@@ -428,7 +429,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;
-      })((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
+      }, options)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

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

@@ -15,8 +15,24 @@ 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; } // Resize a given column by an amount from the current state
 var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
   var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
   var scalePercent = 1;
-  var resizeAmount = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? amount * 2 : amount;
+  var resizeAmount;
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
+    var _tableRef$closest;
+    // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
+    var tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
+    var tableContainerWidth = (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+    var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
+    resizeAmount = amount * 2;
+    if (isOverflowed) {
+      resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
+    } else {
+      resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
+    }
+  } else {
+    resizeAmount = amount;
+  }
 
   // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
   if (isTableScalingEnabled && !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
@@ -24,7 +40,7 @@ var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, col
     resizeAmount = amount / scalePercent;
   }
   var newState = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? (0, _resizeLogic.updateAffectedColumn)(resizeState, colIndex, resizeAmount) : resizeAmount > 0 ? (0, _resizeLogic.growColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? (0, _resizeLogic.shrinkColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
-  (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled);
+  (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, false) : (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled);
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
     // use the difference in width from affected column to update overall table width
     var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
@@ -35,9 +51,7 @@ var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, col
   }
   return newState;
 };
-var updateTable = function updateTable(resizeAmount, tableRef, tableNode
-// isTableScalingEnabled: boolean,
-) {
+var updateTable = function updateTable(resizeAmount, tableRef, tableNode) {
   var currentWidth = (0, _misc.getTableContainerElementWidth)(tableNode);
   var resizingContainer = tableRef.closest(".".concat(_types.TableCssClassName.TABLE_RESIZER_CONTAINER));
   var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');

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

@@ -94,6 +94,11 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
 var updateColgroup = exports.updateColgroup = function updateColgroup(state, tableRef, tableNode, isTableScalingEnabled) {
   var cols = tableRef.querySelectorAll('col');
   var columnsCount = cols.length;
+  /**
+     updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
+     We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
+     We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
+     * */
   if (isTableScalingEnabled && tableNode) {
     var scalePercent = (0, _misc.getTableScalingPercent)(tableNode, tableRef);
     state.cols.filter(function (column) {

package/dist/cjs/toolbar.js

@@ -12,6 +12,7 @@ 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");
@@ -31,6 +32,7 @@ var _resizeState = require("./pm-plugins/table-resizing/utils/resize-state");
 var _tableWidth = require("./pm-plugins/table-width");
 var _transforms = require("./transforms");
 var _types = require("./types");
+var _icons = require("./ui/icons");
 var _TableFullWidthLabel = require("./ui/TableFullWidthLabel");
 var _utils4 = require("./utils");
 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); }
@@ -311,7 +313,7 @@ var getClosestSelectionOrTableRect = exports.getClosestSelectionOrTableRect = fu
   var tableRect = new _tableMap.Rect(0, 0, map.width, map.height);
   return (0, _utils3.isSelectionType)(selection, 'cell') ? (0, _utils3.getSelectionRect)(selection) : tableRect;
 };
-var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) {
+var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options) {
   return function (config) {
     return function (state, intl) {
       var _tableObject$node$att, _tableObject$node;
@@ -325,7 +327,9 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
       var isTableScalingEnabled = pluginState.isTableScalingEnabled,
         widthToWidest = pluginState.widthToWidest;
       var currentTableNodeLocalId = (_tableObject$node$att = tableObject === null || tableObject === void 0 || (_tableObject$node = tableObject.node) === null || _tableObject$node === void 0 || (_tableObject$node = _tableObject$node.attrs) === null || _tableObject$node === void 0 ? void 0 : _tableObject$node.localId) !== null && _tableObject$node$att !== void 0 ? _tableObject$node$att : '';
-      if (isTableScalingEnabled && isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
+      if (isTableScalingEnabled &&
+      // TODO ED-21670: check if need options.isTableScalingEnabled
+      isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
         var _getEditorFeatureFlag = getEditorFeatureFlags(),
           stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
         var nodeType = state.schema.nodes.table;
@@ -373,11 +377,12 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
           _getPluginState2$isTa = _getPluginState2.isTableScalingEnabled,
-          _isTableScalingEnabled = _getPluginState2$isTa === void 0 ? false : _getPluginState2$isTa;
+          _isTableScalingEnabled = _getPluginState2$isTa === void 0 ? false : _getPluginState2$isTa; // TODO ED-21670: check if we need options.isTableScalingEnabled and not an acutual state of displayNode attr on the table
+
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled);
         var columnSettingsItems;
-        columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled) : [];
+        columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options, _isTableScalingEnabled) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
         // Check if we need to show confirm dialog for delete button
@@ -504,32 +509,58 @@ var getDistributeConfig = exports.getDistributeConfig = function getDistributeCo
 
 // this create the button group for distribute column and also fixed column width
 // fixed column button should be in this function call in the future
-var getColumnSettingItems = function getColumnSettingItems(editorState, editorView, _ref4, getEditorContainerWidth, editorAnalyticsAPI) {
+var getColumnSettingItems = function getColumnSettingItems(editorState, editorView, _ref4, getEditorContainerWidth, editorAnalyticsAPI, options) {
   var _newResizeStateWithAn2, _pluginState$pluginCo3;
   var formatMessage = _ref4.formatMessage;
-  var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var pluginState = (0, _pluginFactory.getPluginState)(editorState);
   var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
   if (!selectionOrTableRect || !editorView) {
     return [];
   }
-  var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
+  var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled // TODO ED-21670: Here should be actual state of tableNode's displayMode attr
+  );
   var wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
+  var items = [];
+  var isTableScalingLockBtnEnabled = (options === null || options === void 0 ? void 0 : options.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: (0, _preset.editorCommandToPMCommand)(_commands.setTableDisplayMode),
+      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) {
-    return [{
+    items.push({
       id: 'editor.table.distributeColumns',
       type: 'button',
       title: formatMessage(_messages.tableMessages.distributeColumns),
       icon: _layoutThreeEqual.default,
       onClick: function onClick(state, dispatch, view) {
-        return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled)(state, dispatch, view);
+        return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled // TODO ED-21670: Maybe here too we an actual state of tableNode's displayMode attr
+        )(state, dispatch, view);
       },
       disabled: !wouldChange
-    }, {
+    });
+  }
+  if (items.length !== 0) {
+    items.push({
       type: 'separator'
-    }];
+    });
   }
-  return [];
+  return items;
 };
 var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI) {
   var _node$attrs;

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DisplayModeIcon = exports.DisplayModeGlyth = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var DisplayModeGlyth = exports.DisplayModeGlyth = function DisplayModeGlyth(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "4",
+    y: "5",
+    width: "4",
+    height: "14",
+    rx: "1",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 5C10.4477 5 10 5.44772 10 6V9.10102C11.0503 8.02921 12.4424 7.29368 14 7.07089V6C14 5.44772 13.5523 5 13 5H11Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17 5C16.4477 5 16 5.44772 16 6V7.07089C17.5576 7.29368 18.9497 8.02921 20 9.10102V6C20 5.44772 19.5523 5 19 5H17Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21 14C21 17.3137 18.3137 20 15 20C11.6863 20 9 17.3137 9 14C9 10.6863 11.6863 8 15 8C18.3137 8 21 10.6863 21 14ZM12 15C12 14.4477 12.4477 14 13 14V12C13 10.8954 13.8954 10 15 10C16.1046 10 17 10.8954 17 12V14C17.5523 14 18 14.4477 18 15V17C18 17.5523 17.5523 18 17 18H13C12.4477 18 12 17.5523 12 17V15ZM16 14V12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12V14H16Z",
+    fill: "currentColor"
+  }));
+};
+var DisplayModeIcon = exports.DisplayModeIcon = function DisplayModeIcon(props) {
+  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    glyph: DisplayModeGlyth
+  }, props));
+};

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

@@ -27,6 +27,12 @@ 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() {
@@ -66,6 +72,7 @@ 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/es2019/commands/display-mode.js

@@ -0,0 +1,17 @@
+import { findTable } from '@atlaskit/editor-tables/utils';
+export const setTableDisplayMode = ({
+  tr
+}) => {
+  const table = findTable(tr.selection);
+  if (!table) {
+    return null;
+  }
+  const {
+    displayMode
+  } = table.node.attrs;
+  tr.setNodeMarkup(table.pos, tr.doc.type.schema.nodes.table, {
+    ...table.node.attrs,
+    displayMode: !displayMode || displayMode === 'default' ? 'fixed' : 'default'
+  });
+  return tr.setMeta('scrollIntoView', false);
+};

package/dist/es2019/commands/index.js

@@ -5,4 +5,5 @@ export { clearMultipleCells } from './clear';
 export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest } from './misc';
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
-export { removeDescendantNodes } from './referentiality';
+export { removeDescendantNodes } from './referentiality';
+export { setTableDisplayMode } from './display-mode';

package/dist/es2019/nodeviews/table.js

@@ -23,7 +23,8 @@ const tableAttributes = node => {
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
-    'data-table-width': node.attrs.width
+    'data-table-width': node.attrs.width,
+    'data-table-display-mode': node.attrs.displayMode
   };
 };
 const getInlineWidth = (node, options, state, pos) => {

package/dist/es2019/plugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import { table, tableCell, tableHeader, tableRow, tableStage0 } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { IconTable } from '@atlaskit/editor-common/icons';
@@ -106,9 +106,10 @@ const tablesPlugin = ({
       insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     nodes() {
+      const tableNode = options !== null && options !== void 0 && options.isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') ? tableStage0 : table;
       return [{
         name: 'table',
-        node: table
+        node: tableNode
       }, {
         name: 'tableHeader',
         node: tableHeader
@@ -419,7 +420,7 @@ const tablesPlugin = ({
           return tr;
         }
       }],
-      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current)(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)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

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

@@ -6,8 +6,24 @@ import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
 import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
 export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false) => {
+  // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
   let scalePercent = 1;
-  let resizeAmount = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? amount * 2 : amount;
+  let resizeAmount;
+  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+    var _tableRef$closest;
+    // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
+    const tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
+    const tableContainerWidth = (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+    const isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
+    resizeAmount = amount * 2;
+    if (isOverflowed) {
+      resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
+    } else {
+      resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
+    }
+  } else {
+    resizeAmount = amount;
+  }
 
   // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
   if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
@@ -15,7 +31,7 @@ export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode,
     resizeAmount = amount / scalePercent;
   }
   const newState = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateAffectedColumn(resizeState, colIndex, resizeAmount) : resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
-  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
+  getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateColgroup(newState, tableRef, tableNode, false) : updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
   if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
     // use the difference in width from affected column to update overall table width
     const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
@@ -27,9 +43,7 @@ export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode,
   }
   return newState;
 };
-const updateTable = (resizeAmount, tableRef, tableNode
-// isTableScalingEnabled: boolean,
-) => {
+const updateTable = (resizeAmount, tableRef, tableNode) => {
   const currentWidth = getTableContainerElementWidth(tableNode);
   const resizingContainer = tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
   const resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');

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

@@ -74,6 +74,11 @@ export const getResizeState = ({
 export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled) => {
   const cols = tableRef.querySelectorAll('col');
   const columnsCount = cols.length;
+  /**
+     updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
+     We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
+     We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
+     * */
   if (isTableScalingEnabled && tableNode) {
     const scalePercent = getTableScalingPercent(tableNode, tableRef);
     state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.

package/dist/es2019/toolbar.js

@@ -4,6 +4,7 @@ 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';
@@ -15,7 +16,7 @@ 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 } from './commands';
+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 { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
@@ -23,6 +24,7 @@ import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizin
 import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { canMergeCells } from './transforms';
 import { TableCssClassName } from './types';
+import { DisplayModeIcon } from './ui/icons';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from './utils';
 export const getToolbarMenuConfig = (config, state, {
@@ -299,7 +301,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) => config => (state, intl) => {
+export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options) => config => (state, intl) => {
   var _tableObject$node$att, _tableObject$node, _tableObject$node$att2;
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
@@ -313,7 +315,9 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     widthToWidest
   } = pluginState;
   const currentTableNodeLocalId = (_tableObject$node$att = tableObject === null || tableObject === void 0 ? void 0 : (_tableObject$node = tableObject.node) === null || _tableObject$node === void 0 ? void 0 : (_tableObject$node$att2 = _tableObject$node.attrs) === null || _tableObject$node$att2 === void 0 ? void 0 : _tableObject$node$att2.localId) !== null && _tableObject$node$att !== void 0 ? _tableObject$node$att : '';
-  if (isTableScalingEnabled && isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
+  if (isTableScalingEnabled &&
+  // TODO ED-21670: check if need options.isTableScalingEnabled
+  isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
     const {
       stickyScrollbar
     } = getEditorFeatureFlags();
@@ -362,11 +366,12 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
     const {
       isTableScalingEnabled = false
-    } = getPluginState(state);
+    } = getPluginState(state); // TODO ED-21670: check if we need options.isTableScalingEnabled and not an acutual state of displayNode attr on the table
+
     let cellItems;
     cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
     let columnSettingsItems;
-    columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled) : [];
+    columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options, isTableScalingEnabled) : [];
     const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
     // Check if we need to show confirm dialog for delete button
@@ -484,28 +489,52 @@ export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI,
 // fixed column button should be in this function call in the future
 const getColumnSettingItems = (editorState, editorView, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false) => {
+}, getEditorContainerWidth, editorAnalyticsAPI, options, isTableScalingEnabled = false) => {
   var _newResizeStateWithAn2, _pluginState$pluginCo3;
   const pluginState = getPluginState(editorState);
   const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
   if (!selectionOrTableRect || !editorView) {
     return [];
   }
-  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
+  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled // TODO ED-21670: Here should be actual state of tableNode's displayMode attr
+  );
   const wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
+  const items = [];
+  const isTableScalingLockBtnEnabled = (options === null || options === void 0 ? void 0 : options.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: editorCommandToPMCommand(setTableDisplayMode),
+      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) {
-    return [{
+    items.push({
       id: 'editor.table.distributeColumns',
       type: 'button',
       title: formatMessage(messages.distributeColumns),
       icon: DistributeColumnIcon,
-      onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled)(state, dispatch, view),
+      onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled // TODO ED-21670: Maybe here too we an actual state of tableNode's displayMode attr
+      )(state, dispatch, view),
       disabled: !wouldChange
-    }, {
+    });
+  }
+  if (items.length !== 0) {
+    items.push({
       type: 'separator'
-    }];
+    });
   }
-  return [];
+  return items;
 };
 const getColorPicker = (state, menu, {
   formatMessage