@atlaskit/editor-plugin-table 7.7.3 → 7.8.0

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/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/utils/resize-column.js

@@ -10,8 +10,24 @@ import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
 export var 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 = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? amount * 2 : amount;
+  var 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.
+    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 && !getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
@@ -19,7 +35,7 @@ export var resizeColumn = function resizeColumn(resizeState, colIndex, amount, t
     resizeAmount = amount / scalePercent;
   }
   var 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
     var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
@@ -30,9 +46,7 @@ export var resizeColumn = function resizeColumn(resizeState, colIndex, amount, t
   }
   return newState;
 };
-var updateTable = function updateTable(resizeAmount, tableRef, tableNode
-// isTableScalingEnabled: boolean,
-) {
+var updateTable = function updateTable(resizeAmount, tableRef, tableNode) {
   var currentWidth = getTableContainerElementWidth(tableNode);
   var resizingContainer = tableRef.closest(".".concat(ClassName.TABLE_RESIZER_CONTAINER));
   var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');

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

@@ -87,6 +87,11 @@ export var getResizeState = function getResizeState(_ref) {
 export var 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 = getTableScalingPercent(tableNode, tableRef);
     state.cols.filter(function (column) {

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.8.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,20 +28,20 @@
     "runReact18": false
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.9.0",
-    "@atlaskit/custom-steps": "^0.0.18",
-    "@atlaskit/editor-common": "^78.30.0",
+    "@atlaskit/adf-schema": "^35.9.2",
+    "@atlaskit/custom-steps": "^0.1.0",
+    "@atlaskit/editor-common": "^78.31.0",
     "@atlaskit/editor-palette": "1.5.3",
-    "@atlaskit/editor-plugin-accessibility-utils": "^1.0.0",
-    "@atlaskit/editor-plugin-analytics": "^1.0.0",
-    "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
-    "@atlaskit/editor-plugin-editor-viewmode": "^1.0.0",
-    "@atlaskit/editor-plugin-guideline": "^1.0.0",
-    "@atlaskit/editor-plugin-selection": "^1.1.0",
-    "@atlaskit/editor-plugin-width": "^1.0.0",
-    "@atlaskit/editor-prosemirror": "3.0.0",
+    "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
+    "@atlaskit/editor-plugin-analytics": "^1.1.0",
+    "@atlaskit/editor-plugin-content-insertion": "^1.1.0",
+    "@atlaskit/editor-plugin-editor-viewmode": "^1.1.0",
+    "@atlaskit/editor-plugin-guideline": "^1.1.0",
+    "@atlaskit/editor-plugin-selection": "^1.2.0",
+    "@atlaskit/editor-plugin-width": "^1.1.0",
+    "@atlaskit/editor-prosemirror": "4.0.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
-    "@atlaskit/editor-tables": "^2.6.0",
+    "@atlaskit/editor-tables": "^2.7.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/menu": "^2.1.5",
     "@atlaskit/platform-feature-flags": "^0.2.1",
@@ -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';