@atlaskit/editor-plugin-table 7.7.3 → 7.7.4

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/icons/DisplayModeIcon.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+export var DisplayModeGlyth = function 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 var DisplayModeIcon = function DisplayModeIcon(props) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: DisplayModeGlyth
+  }, props));
+};

package/dist/esm/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/types/commands/display-mode.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const setTableDisplayMode: EditorCommand;

package/dist/types/commands/index.d.ts

@@ -6,3 +6,4 @@ export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOr
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
 export { removeDescendantNodes } from './referentiality';
+export { setTableDisplayMode } from './display-mode';

package/dist/types/commands/toggle.d.ts

@@ -4,7 +4,7 @@ import type { Command } from '@atlaskit/editor-common/types';
  * Table layout toggle logic
  * default -> wide -> full-width -> default
  */
-export declare const getNextLayout: (currentLayout: TableLayout) => TableLayout;
+export declare const getNextLayout: (currentLayout: TableLayout) => "default" | "wide" | "full-width";
 export declare const toggleHeaderRow: Command;
 export declare const toggleHeaderColumn: Command;
 export declare const toggleNumberColumn: Command;

package/dist/types/pm-plugins/table-resizing/utils/misc.d.ts

@@ -1,10 +1,10 @@
-import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TableOptions } from '../../../nodeviews/types';
-export declare function getLayoutSize(tableLayout: TableLayout, containerWidth: number | undefined, options: TableOptions): number;
+export declare function getLayoutSize(tableLayout: 'default' | 'wide' | 'full-width', containerWidth: number | undefined, options: TableOptions): number;
 export declare function getDefaultLayoutMaxWidth(containerWidth?: number): number;
 export declare function pointsAtCell($pos: ResolvedPos): false | PMNode | null;
 export declare function currentColWidth(view: EditorView, cellPos: number, { colspan, colwidth }: CellAttributes): number;
@@ -13,7 +13,7 @@ interface getTableMaxWidthProps {
     table: PMNode;
     tableStart: number;
     state: EditorState;
-    layout: TableLayout;
+    layout: 'default' | 'wide' | 'full-width';
     getEditorContainerWidth: GetEditorContainerWidth;
 }
 export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getEditorContainerWidth, }: getTableMaxWidthProps) => number;

package/dist/types/pm-plugins/table-resizing/utils/resize-state.d.ts

@@ -1,4 +1,3 @@
-import type { TableLayout } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
@@ -23,7 +22,7 @@ export declare const evenAllColumnsWidths: (resizeState: ResizeState) => ResizeS
 export declare const evenSelectedColumnsWidths: (resizeState: ResizeState, rect: Rect) => ResizeState;
 export declare const bulkColumnsResize: (resizeState: ResizeState, columnsIndexes: number[], sourceColumnIndex: number) => ResizeState;
 export declare const areColumnsEven: (resizeState: ResizeState) => boolean;
-export declare const normaliseTableLayout: (input: string | undefined | null) => TableLayout;
+export declare const normaliseTableLayout: (input: string | undefined | null) => "default" | "wide" | "full-width";
 export declare const getNewResizeStateFromSelectedColumns: (rect: Rect, state: EditorState, domAtPos: (pos: number) => {
     node: Node;
     offset: number;

package/dist/types/toolbar.d.ts

@@ -3,10 +3,11 @@ import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, Floating
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { TablePluginOptions } from './plugin';
 import type { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => FloatingToolbarDropdown<Command>;
 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) => (config: PluginConfig) => FloatingToolbarHandler;
+export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions) => (config: PluginConfig) => FloatingToolbarHandler;
 export declare const getDistributeConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => Command;

package/dist/types/ui/icons/DisplayModeIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { CustomGlyphProps, GlyphProps } from '@atlaskit/icon/types';
+export declare const DisplayModeGlyth: (props: CustomGlyphProps) => JSX.Element;
+export declare const DisplayModeIcon: (props: GlyphProps) => JSX.Element;

package/dist/types/ui/icons/index.d.ts

@@ -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/types-ts4.5/commands/display-mode.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const setTableDisplayMode: EditorCommand;

package/dist/types-ts4.5/commands/index.d.ts

@@ -6,3 +6,4 @@ export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOr
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
 export { removeDescendantNodes } from './referentiality';
+export { setTableDisplayMode } from './display-mode';

package/dist/types-ts4.5/commands/toggle.d.ts

@@ -4,7 +4,7 @@ import type { Command } from '@atlaskit/editor-common/types';
  * Table layout toggle logic
  * default -> wide -> full-width -> default
  */
-export declare const getNextLayout: (currentLayout: TableLayout) => TableLayout;
+export declare const getNextLayout: (currentLayout: TableLayout) => "default" | "wide" | "full-width";
 export declare const toggleHeaderRow: Command;
 export declare const toggleHeaderColumn: Command;
 export declare const toggleNumberColumn: Command;

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/misc.d.ts

@@ -1,10 +1,10 @@
-import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TableOptions } from '../../../nodeviews/types';
-export declare function getLayoutSize(tableLayout: TableLayout, containerWidth: number | undefined, options: TableOptions): number;
+export declare function getLayoutSize(tableLayout: 'default' | 'wide' | 'full-width', containerWidth: number | undefined, options: TableOptions): number;
 export declare function getDefaultLayoutMaxWidth(containerWidth?: number): number;
 export declare function pointsAtCell($pos: ResolvedPos): false | PMNode | null;
 export declare function currentColWidth(view: EditorView, cellPos: number, { colspan, colwidth }: CellAttributes): number;
@@ -13,7 +13,7 @@ interface getTableMaxWidthProps {
     table: PMNode;
     tableStart: number;
     state: EditorState;
-    layout: TableLayout;
+    layout: 'default' | 'wide' | 'full-width';
     getEditorContainerWidth: GetEditorContainerWidth;
 }
 export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getEditorContainerWidth, }: getTableMaxWidthProps) => number;

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-state.d.ts

@@ -1,4 +1,3 @@
-import type { TableLayout } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
@@ -23,7 +22,7 @@ export declare const evenAllColumnsWidths: (resizeState: ResizeState) => ResizeS
 export declare const evenSelectedColumnsWidths: (resizeState: ResizeState, rect: Rect) => ResizeState;
 export declare const bulkColumnsResize: (resizeState: ResizeState, columnsIndexes: number[], sourceColumnIndex: number) => ResizeState;
 export declare const areColumnsEven: (resizeState: ResizeState) => boolean;
-export declare const normaliseTableLayout: (input: string | undefined | null) => TableLayout;
+export declare const normaliseTableLayout: (input: string | undefined | null) => "default" | "wide" | "full-width";
 export declare const getNewResizeStateFromSelectedColumns: (rect: Rect, state: EditorState, domAtPos: (pos: number) => {
     node: Node;
     offset: number;

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

@@ -3,10 +3,11 @@ import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, Floating
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { TablePluginOptions } from './plugin';
 import type { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => FloatingToolbarDropdown<Command>;
 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) => (config: PluginConfig) => FloatingToolbarHandler;
+export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions) => (config: PluginConfig) => FloatingToolbarHandler;
 export declare const getDistributeConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => Command;

package/dist/types-ts4.5/ui/icons/DisplayModeIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { CustomGlyphProps, GlyphProps } from '@atlaskit/icon/types';
+export declare const DisplayModeGlyth: (props: CustomGlyphProps) => JSX.Element;
+export declare const DisplayModeIcon: (props: GlyphProps) => JSX.Element;

package/dist/types-ts4.5/ui/icons/index.d.ts

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.7.3",
+  "version": "7.7.4",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,8 +28,8 @@
     "runReact18": false
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.9.0",
-    "@atlaskit/custom-steps": "^0.0.18",
+    "@atlaskit/adf-schema": "^35.9.2",
+    "@atlaskit/custom-steps": "^0.0.19",
     "@atlaskit/editor-common": "^78.30.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.0.0",
@@ -136,6 +136,9 @@
     "platform.editor.table.cmd-a-select-table": {
       "type": "boolean"
     },
+    "platform.editor.table.preserve-widths-with-lock-button": {
+      "type": "boolean"
+    },
     "platform.editor.table.use-shared-state-hook": {
       "type": "boolean"
     },

package/src/commands/display-mode.ts

@@ -0,0 +1,19 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+import { findTable } from '@atlaskit/editor-tables/utils';
+
+export const setTableDisplayMode: EditorCommand = ({ 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/src/commands/index.ts

@@ -44,3 +44,4 @@ export {
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
 export { removeDescendantNodes } from './referentiality';
+export { setTableDisplayMode } from './display-mode';

package/src/commands/toggle.ts

@@ -15,7 +15,7 @@ import { META_KEYS } from '../pm-plugins/table-analytics';
  * Table layout toggle logic
  * default -> wide -> full-width -> default
  */
-export const getNextLayout = (currentLayout: TableLayout): TableLayout => {
+export const getNextLayout = (currentLayout: TableLayout) => {
   switch (currentLayout) {
     case 'default':
       return 'wide';

package/src/commands-with-analytics.ts

@@ -1,6 +1,5 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 
-import type { TableLayout } from '@atlaskit/adf-schema';
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
 import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import {
@@ -535,7 +534,9 @@ export const toggleTableLayoutWithAnalytics = (
     );
 
     if (table) {
-      const { layout } = table.node.attrs as { layout: TableLayout };
+      const { layout } = table.node.attrs as {
+        layout: 'default' | 'wide' | 'full-width';
+      };
       return {
         action: TABLE_ACTION.CHANGED_BREAKOUT_MODE,
         actionSubject: ACTION_SUBJECT.TABLE,

package/src/nodeviews/table.tsx

@@ -50,6 +50,7 @@ const tableAttributes = (node: PmNode) => {
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
     'data-table-width': node.attrs.width,
+    'data-table-display-mode': node.attrs.displayMode,
   };
 };
 

package/src/plugin.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 
-import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import {
+  table,
+  tableCell,
+  tableHeader,
+  tableRow,
+  tableStage0,
+} from '@atlaskit/adf-schema';
 import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
 import {
   ACTION,
@@ -223,8 +229,14 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
     },
 
     nodes() {
+      const tableNode =
+        options?.isTableScalingEnabled &&
+        getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+          ? tableStage0
+          : table;
+
       return [
-        { name: 'table', node: table },
+        { name: 'table', node: tableNode },
         { name: 'tableHeader', node: tableHeader },
         { name: 'tableRow', node: tableRow },
         { name: 'tableCell', node: tableCell },
@@ -610,6 +622,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         editorAnalyticsAPI,
         options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
         () => editorViewRef.current,
+        options,
       )(pluginConfig(options?.tableOptions)),
     },
   };

package/src/pm-plugins/table-resizing/utils/misc.ts

@@ -1,4 +1,4 @@
-import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes } from '@atlaskit/adf-schema';
 import {
   getParentNodeWidth,
   getTableContainerWidth,
@@ -34,7 +34,7 @@ import { MAX_SCALING_PERCENT } from './consts';
 
 // Translates named layouts in number values.
 export function getLayoutSize(
-  tableLayout: TableLayout,
+  tableLayout: 'default' | 'wide' | 'full-width',
   containerWidth: number = 0,
   options: TableOptions,
 ): number {
@@ -112,7 +112,7 @@ interface getTableMaxWidthProps {
   table: PMNode;
   tableStart: number;
   state: EditorState;
-  layout: TableLayout;
+  layout: 'default' | 'wide' | 'full-width';
   getEditorContainerWidth: GetEditorContainerWidth;
 }
 

package/src/pm-plugins/table-resizing/utils/resize-state.ts

@@ -1,4 +1,3 @@
-import type { TableLayout } from '@atlaskit/adf-schema';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import {
   tableCellMinWidth,
@@ -321,9 +320,7 @@ export const areColumnsEven = (resizeState: ResizeState): boolean => {
 };
 
 // Get the layout
-export const normaliseTableLayout = (
-  input: string | undefined | null,
-): TableLayout => {
+export const normaliseTableLayout = (input: string | undefined | null) => {
   switch (input) {
     case 'wide':
       return input;