@atlaskit/editor-plugin-table 7.7.2 → 7.7.4

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

package/dist/es2019/ui/FloatingContextualButton/styles.js

@@ -1,46 +1,46 @@
 import { css } from '@emotion/react';
 import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
 import { contextualMenuTriggerSize } from '../consts';
-export const tableFloatingCellButtonStyles = () => css`
-  > div {
+export const tableFloatingCellButtonStyles = () => css({
+  '> div': {
     // Sits behind button to provide surface-color background
-    background: ${`var(--ds-surface, ${N20})`};
-    border-radius: ${"var(--ds-border-radius, 3px)"};
-    display: flex;
-    height: ${contextualMenuTriggerSize + 2}px;
-    flex-direction: column;
-  }
-  && button {
-    background: ${"var(--ds-background-neutral, none)"};
-    flex-direction: column;
-    margin: ${"var(--ds-space-025, 2px)"};
-    outline: 2px solid ${`var(--ds-surface, ${N0})`};
-    border-radius: 1px;
-    padding: 0;
-    height: calc(100% - 4px);
-    display: flex;
-  }
-  && button:hover {
-    background: ${`var(--ds-background-neutral-hovered, ${N30A})`};
-  }
-  && button:active {
-    background: ${"var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))"};
-  }
-  && button > span {
-    margin: 0px ${"var(--ds-space-negative-050, -4px)"};
-  }
-  && span {
-    pointer-events: none;
-  }
-`;
-export const tableFloatingCellButtonSelectedStyles = () => css`
-  && button {
-    background: ${`var(--ds-background-selected, ${N700})`};
-  }
-  && button:hover {
-    background: ${`var(--ds-background-selected-hovered, ${N700})`};
-  }
-  && button:active {
-    background: ${`var(--ds-background-selected-pressed, ${N700})`};
-  }
-`;
+    background: `var(--ds-surface, ${N20})`,
+    borderRadius: "var(--ds-border-radius, 3px)",
+    display: 'flex',
+    height: `${contextualMenuTriggerSize + 2}px`,
+    flexDirection: 'column'
+  },
+  '&& button': {
+    background: "var(--ds-background-neutral, none)",
+    flexDirection: 'column',
+    margin: "var(--ds-space-025, 2px)",
+    outline: `2px solid ${`var(--ds-surface, ${N0})`}`,
+    borderRadius: '1px',
+    padding: 0,
+    height: 'calc(100% - 4px)',
+    display: 'flex'
+  },
+  '&& button:hover': {
+    background: `var(--ds-background-neutral-hovered, ${N30A})`
+  },
+  '&& button:active': {
+    background: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))"
+  },
+  '&& button > span': {
+    margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
+  },
+  '&& span': {
+    pointerEvents: 'none'
+  }
+});
+export const tableFloatingCellButtonSelectedStyles = () => css({
+  '&& button': {
+    background: `var(--ds-background-selected, ${N700})`
+  },
+  '&& button:hover': {
+    background: `var(--ds-background-selected-hovered, ${N700})`
+  },
+  '&& button:active': {
+    background: `var(--ds-background-selected-pressed, ${N700})`
+  }
+});

package/dist/es2019/ui/FloatingContextualMenu/styles.js

@@ -3,19 +3,21 @@ import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../../types';
 import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
-export const cellColourPreviewStyles = selectedColor => css`
-  &::before {
-    background: ${selectedColor};
+export const cellColourPreviewStyles = selectedColor => css({
+  '&::before': {
+    background: selectedColor
   }
-`;
-export const elementBeforeIconStyles = css`
-  margin-right: ${"var(--ds-space-negative-075, -6px)"};
-  display: flex;
-`;
+});
+export const elementBeforeIconStyles = css({
+  marginRight: "var(--ds-space-negative-075, -6px)",
+  display: 'flex'
+});
 
 // TODO Delete this comment after verifying space token -> previous value `padding: 8px`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
-export const tablePopupStyles = isDragAndDropEnabled => css`
+export const tablePopupStyles = (isDragAndDropEnabled
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+) => css`
   .${ClassName.CONTEXTUAL_SUBMENU} {
     border-radius: ${"var(--ds-border-radius, 3px)"};
     background: ${"var(--ds-surface-overlay, white)"};

package/dist/es2019/ui/FloatingDragMenu/styles.js

@@ -3,15 +3,17 @@ import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../../types';
 import { dragMenuDropdownWidth } from '../consts';
-export const cellColourPreviewStyles = selectedColor => css`
-  &::before {
-    background: ${selectedColor};
+export const cellColourPreviewStyles = selectedColor => css({
+  '&::before': {
+    background: selectedColor
   }
-`;
-export const elementBeforeIconStyles = css`
-  margin-right: ${"var(--ds-space-negative-075, -6px)"};
-  display: flex;
-`;
+});
+export const elementBeforeIconStyles = css({
+  marginRight: "var(--ds-space-negative-075, -6px)",
+  display: 'flex'
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const dragMenuBackgroundColorStyles = css`
   .${ClassName.DRAG_SUBMENU} {
     border-radius: ${"var(--ds-border-radius, 3px)"};
@@ -48,19 +50,19 @@ export const dragMenuBackgroundColorStyles = css`
     }
   }
 `;
-export const toggleStyles = css`
-  display: flex;
-  input[type='checkbox'] {
-    width: 30px;
-    height: 14px;
-    pointer-events: initial;
-    cursor: pointer;
-  }
-  > label {
-    margin: 0px;
-    pointer-events: none;
-    > span {
-      pointer-events: none;
+export const toggleStyles = css({
+  display: 'flex',
+  "input[type='checkbox']": {
+    width: '30px',
+    height: '14px',
+    pointerEvents: 'initial',
+    cursor: 'pointer'
+  },
+  '> label': {
+    margin: '0px',
+    pointerEvents: 'none',
+    '> span': {
+      pointerEvents: 'none'
     }
   }
-`;
+});

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

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+export const DisplayModeGlyth = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    x: "4",
+    y: "5",
+    width: "4",
+    height: "14",
+    rx: "1",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.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.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.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"
+  }));
+};
+export const DisplayModeIcon = props => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: DisplayModeGlyth
+  }, props));
+};

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

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

package/dist/es2019/ui/ui-styles.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs mahual remediation */
 import { css } from '@emotion/react';
 import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
 import { akEditorShadowZIndex, akEditorTableBorder, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';

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

@@ -0,0 +1,16 @@
+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 { findTable } from '@atlaskit/editor-tables/utils';
+export var setTableDisplayMode = function setTableDisplayMode(_ref) {
+  var tr = _ref.tr;
+  var table = 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/esm/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/esm/nodeviews/table.js

@@ -34,7 +34,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/esm/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';
@@ -109,9 +109,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
       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 || (_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 && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') ? tableStage0 : table;
       return [{
         name: 'table',
-        node: table
+        node: tableNode
       }, {
         name: 'tableHeader',
         node: tableHeader
@@ -421,7 +422,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       },
       floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, function () {
         return editorViewRef.current;
-      })(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
+      }, options)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

package/dist/esm/pm-plugins/table-resizing/event-handlers.js

@@ -136,7 +136,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
         var resizedDelta = clientX - startX;
         tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
-          tr.setNodeAttribute(tablePos, 'width', newResizeState.tableWidth);
+          tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
         }
         if (colIndex === map.width - 1) {
           var mouseUpTime = event.timeStamp;

package/dist/esm/toolbar.js

@@ -5,6 +5,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 as _getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -16,7 +17,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';
@@ -24,6 +25,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 var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
@@ -300,7 +302,7 @@ export var getClosestSelectionOrTableRect = function getClosestSelectionOrTableR
   var tableRect = new Rect(0, 0, map.width, map.height);
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
 };
-export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) {
+export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options) {
   return function (config) {
     return function (state, intl) {
       var _tableObject$node$att, _tableObject$node;
@@ -314,7 +316,9 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
       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;
@@ -362,11 +366,12 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var _getPluginState2 = 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
@@ -493,32 +498,58 @@ export var getDistributeConfig = function getDistributeConfig(getEditorContainer
 
 // 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 = getPluginState(editorState);
   var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
   if (!selectionOrTableRect || !editorView) {
     return [];
   }
-  var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
+  var newResizeStateWithAnalytics = 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) && 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.unlockColumnWidths) : formatMessage(messages.lockColumnWidths);
+    items.push({
+      id: 'editor.table.lockColumns',
+      type: 'button',
+      title: title,
+      icon: function icon() {
+        return 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: 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/esm/ui/FloatingContextualButton/styles.js

@@ -1,11 +1,50 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
 import { contextualMenuTriggerSize } from '../consts';
 export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div {\n    // Sits behind button to provide surface-color background\n    background: ", ";\n    border-radius: ", ";\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    background: ", ";\n    flex-direction: column;\n    margin: ", ";\n    outline: 2px solid ", ";\n    border-radius: 1px;\n    padding: 0;\n    height: calc(100% - 4px);\n    display: flex;\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n  && button > span {\n    margin: 0px ", ";\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), "var(--ds-surface, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", contextualMenuTriggerSize + 2, "var(--ds-background-neutral, none)", "var(--ds-space-025, 2px)", "var(--ds-surface, ".concat(N0, ")"), "var(--ds-background-neutral-hovered, ".concat(N30A, ")"), "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))", "var(--ds-space-negative-050, -4px)");
+  return css({
+    '> div': {
+      // Sits behind button to provide surface-color background
+      background: "var(--ds-surface, ".concat(N20, ")"),
+      borderRadius: "var(--ds-border-radius, 3px)",
+      display: 'flex',
+      height: "".concat(contextualMenuTriggerSize + 2, "px"),
+      flexDirection: 'column'
+    },
+    '&& button': {
+      background: "var(--ds-background-neutral, none)",
+      flexDirection: 'column',
+      margin: "var(--ds-space-025, 2px)",
+      outline: "2px solid ".concat("var(--ds-surface, ".concat(N0, ")")),
+      borderRadius: '1px',
+      padding: 0,
+      height: 'calc(100% - 4px)',
+      display: 'flex'
+    },
+    '&& button:hover': {
+      background: "var(--ds-background-neutral-hovered, ".concat(N30A, ")")
+    },
+    '&& button:active': {
+      background: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))"
+    },
+    '&& button > span': {
+      margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
+    },
+    '&& span': {
+      pointerEvents: 'none'
+    }
+  });
 };
 export var tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n"])), "var(--ds-background-selected, ".concat(N700, ")"), "var(--ds-background-selected-hovered, ".concat(N700, ")"), "var(--ds-background-selected-pressed, ".concat(N700, ")"));
+  return css({
+    '&& button': {
+      background: "var(--ds-background-selected, ".concat(N700, ")")
+    },
+    '&& button:hover': {
+      background: "var(--ds-background-selected-hovered, ".concat(N700, ")")
+    },
+    '&& button:active': {
+      background: "var(--ds-background-selected-pressed, ".concat(N700, ")")
+    }
+  });
 };